*{box-sizing:border-box}
:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --ink:#0b0f1a;
  --muted:#94a3b8;
  --text:#e2e8f0;
  --accent:#1d4ed8;
  --edge:#1f2937;
}
html,body{margin:0;padding:0;background:#0a0f1c;color:var(--text);font:14px/1.45 system-ui,Segoe UI,Roboto,Arial}
h1,h2,h3{margin:0 0 .6rem 0}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--edge);background:#0a1020;position:sticky;top:0;z-index:10}
.app-header h1{font-size:18px;font-weight:700}
.actions button{margin-left:8px}
button{background:#111827;color:#e5e7eb;border:1px solid #273244;border-radius:10px;padding:10px 14px;cursor:pointer}
button:hover{border-color:#3b82f6}
input,textarea{width:100%;background:#0b1428;border:1px solid #20314a;border-radius:10px;padding:10px;color:#e5e7eb}
label{display:block;color:#cbd5e1;margin:8px 0 6px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px}
.panel{background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.row{display:flex;gap:12px}
.col{flex:1}
.col.grow{flex:2}
.table-actions{margin-top:10px}
#itemsTable{width:100%;border-collapse:collapse;margin-top:8px}
#itemsTable th,#itemsTable td{border-bottom:1px solid #1e293b;padding:8px}
#itemsTable th{font-weight:600;color:#cbd5e1;text-align:left}
#itemsTable td:last-child{text-align:right}
#itemsTable button{padding:6px 10px}

.sum-lines{margin:16px 0;border-top:1px dashed #334155;padding-top:12px}
.sum-lines div{display:flex;justify-content:space-between;margin:6px 0}
.sum-lines .grand{font-weight:800;font-size:18px;border-top:1px solid #334155;padding-top:8px}

.invoice{background:white;color:#0f172a;border-radius:8px;padding:20mm;width:210mm;min-height:297mm;margin:auto}
.invoice .logo{height:28px}
.invoice-header{display:grid;grid-template-columns:1fr 1.2fr .8fr;gap:10px;align-items:start;margin-bottom:16px}
.invoice-header .bname{font-size:18px;font-weight:800}
.invoice-header .meta{justify-self:end;text-align:right}
.billto{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;padding:12px;margin:8px 0 12px}
.billto .title{font-weight:700;margin-bottom:6px}
.lines{width:100%;border-collapse:collapse;margin-top:6px}
.lines th,.lines td{border-bottom:1px solid #e5e7eb;padding:8px;text-align:left}
.lines th{text-transform:uppercase;font-size:12px;letter-spacing:.02em}
.totals-block{margin-top:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.totals-block .row{display:flex;gap:20px;min-width:40%;justify-content:space-between}
.totals-block .grand{font-weight:800;font-size:18px;border-top:1px solid #e5e7eb;padding-top:6px}
.notes .title{font-weight:700;margin-top:14px}
.invoice-footer{margin-top:18px;border-top:1px solid #e5e7eb;padding-top:10px;color:#64748b}

@media print{
  body{background:white}
  header,.panel h2,.actions, .table-actions, .sum-lines, .totals, .grid>.panel:first-child{display:none!important}
  .grid{display:block}
  .invoice{box-shadow:none;border:none;margin:0;width:auto;min-height:auto;padding:0}
}