:root{
  --ink:#0A1A2F;
  --ink-2:#12294A;
  --ink-3:#1D3A63;
  --teal:#0E9E96;
  --teal-dk:#0A7A73;
  --teal-soft:#E2F4F2;
  --gold:#C08A2C;
  --gold-soft:#FBF1DC;
  --red:#B33F2C;
  --red-soft:#FBEAE6;
  --green:#1B7A56;
  --paper:#F3F6F9;
  --card:#FFFFFF;
  --rule:#E0E7EF;
  --rule-2:#EEF2F7;
  --text:#16233A;
  --muted:#6A788D;
  --sidew:236px;
  --r:10px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.5;
}
h1,h2,h3,th,.brand strong,.btn,.navlist a,label{font-family:Poppins,Inter,sans-serif}
h1{font-size:1.45rem;font-weight:600;margin:0;letter-spacing:-.01em}
h2{font-size:1rem;font-weight:600;margin:0 0 14px;letter-spacing:-.01em}
a{color:var(--teal-dk)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:99;border-radius:6px}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}

/* ---------- figures: everything numeric is mono + tabular ------- */
.num,td.num,.fig,input[type=number],.mono{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
td.num,th.num{text-align:right;white-space:nowrap}

/* ---------- sidebar --------------------------------------------- */
.navtoggle{position:absolute;opacity:0;pointer-events:none}
.side{
  position:fixed;inset:0 auto 0 0;width:var(--sidew);background:var(--ink);
  color:#DCE5F0;display:flex;flex-direction:column;z-index:30;
}
.brand{display:flex;gap:10px;align-items:center;padding:20px 18px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-mark{
  width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:var(--teal);
  color:#04211F;display:grid;place-items:center;font-weight:600;font-family:Poppins,sans-serif;
}
.brand-text{min-width:0}
.brand strong{display:block;color:#fff;font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{display:block;color:#8FA3BE;font-size:.7rem;letter-spacing:.03em;font-family:"IBM Plex Mono",monospace}
.navlist{list-style:none;margin:0;padding:14px 10px;flex:1;overflow-y:auto}
.navlist a{
  display:block;padding:9px 12px;border-radius:8px;color:#B9C8DC;
  text-decoration:none;font-size:.88rem;font-weight:500;
}
.navlist a:hover{background:var(--ink-2);color:#fff}
.navlist a.on{background:var(--ink-3);color:#fff;box-shadow:inset 2px 0 0 var(--teal)}
.sideout{padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:.78rem;color:#8FA3BE}
.sideout span{display:block;color:#DCE5F0;margin-bottom:2px}
.sideout a{color:#8FA3BE}

/* ---------- topbar (mobile only) -------------------------------- */
.topbar{display:none}
.burger{display:flex;flex-direction:column;gap:4px;padding:10px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px}

/* ---------- main ------------------------------------------------ */
.main{margin-left:var(--sidew);padding:26px 28px 60px;max-width:1180px}
.pagehead{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  padding-bottom:14px;margin-bottom:20px;border-bottom:2px solid var(--ink);
}
.pagemeta{margin:5px 0 0;color:var(--muted);font-size:.82rem}
.pagemeta .mono{color:var(--text)}
.pageaction{display:flex;gap:8px;flex-wrap:wrap}
.foot{margin-top:40px;padding-top:14px;border-top:1px solid var(--rule);color:var(--muted);font-size:.75rem}

/* ---------- statement strip (dashboard signature) --------------- */
.strip{
  display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin-bottom:22px;
}
.strip div{padding:16px 18px;border-left:1px solid var(--rule-2)}
.strip div:first-child{border-left:0}
.strip dt{margin:0 0 8px;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-family:Poppins,sans-serif}
.strip dd{margin:0;font-size:1.3rem;font-weight:500;letter-spacing:-.02em;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.strip .sub{display:block;font-family:Inter,sans-serif;font-size:.72rem;color:var(--muted);margin-top:5px;letter-spacing:0}
.t-teal{color:var(--teal-dk)}
.t-gold{color:var(--gold)}
.t-red{color:var(--red)}
.t-green{color:var(--green)}

/* ---------- cards & tables -------------------------------------- */
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:18px 20px;margin-bottom:20px}
.card.tight{padding:0}
.card.tight h2{padding:16px 20px 0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

table{width:100%;border-collapse:collapse;font-size:.86rem}
thead th{
  text-align:left;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--rule);white-space:nowrap;
}
tbody td{padding:11px 12px;border-bottom:1px solid var(--rule-2);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FAFCFE}
tfoot td{padding:12px;border-top:2px solid var(--ink);font-weight:600}
.tablewrap{overflow-x:auto}
td .sub{display:block;color:var(--muted);font-size:.75rem;margin-top:2px}
.empty{padding:34px 20px;text-align:center;color:var(--muted);font-size:.86rem}
.empty strong{display:block;color:var(--text);margin-bottom:4px;font-family:Poppins,sans-serif}

/* invoice number treatment: series muted, serial bold */
.invno{font-family:"IBM Plex Mono",monospace;font-size:.82rem;white-space:nowrap}
.invno .series{color:var(--muted)}
.invno .serial{font-weight:600;color:var(--ink)}

/* ---------- badges ---------------------------------------------- */
.badge{
  display:inline-block;padding:3px 9px;border-radius:99px;font-size:.68rem;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-family:Poppins,sans-serif;
}
.b-paid{background:var(--teal-soft);color:var(--teal-dk)}
.b-due{background:var(--gold-soft);color:var(--gold)}
.b-over{background:var(--red-soft);color:var(--red)}
.b-draft{background:#EEF2F7;color:var(--muted)}
.b-cancel{background:#EEF2F7;color:var(--muted);text-decoration:line-through}

/* ---------- buttons --------------------------------------------- */
.btn{
  display:inline-block;padding:9px 16px;border-radius:8px;border:1px solid transparent;
  background:var(--ink);color:#fff;font-size:.82rem;font-weight:500;cursor:pointer;
  text-decoration:none;line-height:1.3;
}
.btn:hover{background:var(--ink-2)}
.btn-teal{background:var(--teal)}
.btn-teal:hover{background:var(--teal-dk)}
.btn-ghost{background:#fff;color:var(--text);border-color:var(--rule)}
.btn-ghost:hover{background:#F7FAFC}
.btn-sm{padding:6px 11px;font-size:.76rem}
.btn-danger{background:#fff;color:var(--red);border-color:var(--red-soft)}
.btn-danger:hover{background:var(--red-soft)}
.linkish{background:none;border:0;color:var(--teal-dk);cursor:pointer;font-size:.8rem;padding:0;text-decoration:underline}

/* ---------- forms ----------------------------------------------- */
.field{margin-bottom:14px}
.field label,.lbl{
  display:block;font-size:.72rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px;
}
input[type=text],input[type=date],input[type=number],input[type=email],
input[type=password],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--rule);border-radius:8px;
  font-size:.88rem;font-family:inherit;background:#fff;color:var(--text);
}
input:focus,select:focus,textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--teal-soft)}
textarea{min-height:70px;resize:vertical}
.row{display:grid;gap:14px}
.row-2{grid-template-columns:1fr 1fr}
.row-3{grid-template-columns:repeat(3,1fr)}
.row-4{grid-template-columns:repeat(4,1fr)}
.hint{font-size:.74rem;color:var(--muted);margin-top:4px}
.inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.inline .field{margin-bottom:0}
.check{display:flex;align-items:center;gap:8px;font-size:.85rem}
.check input{width:auto}
fieldset{border:1px solid var(--rule);border-radius:var(--r);padding:16px;margin:0 0 18px}
legend{font-family:Poppins,sans-serif;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 6px}

/* line-item editor */
.items td{padding:6px}
.items input,.items select{padding:7px 9px;font-size:.83rem}
.items .rm{color:var(--red);background:none;border:0;cursor:pointer;font-size:1.1rem;line-height:1;padding:4px 8px}

/* totals panel */
.totals{margin-left:auto;width:100%;max-width:330px}
.totals div{display:flex;justify-content:space-between;padding:7px 0;font-size:.86rem}
.totals .grand{
  border-top:2px solid var(--ink);margin-top:6px;padding-top:11px;
  font-size:1.05rem;font-weight:600;
}
.totals span:last-child{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}

/* ---------- flash ----------------------------------------------- */
.flash{padding:11px 15px;border-radius:8px;margin-bottom:18px;font-size:.85rem;border:1px solid}
.flash-ok{background:var(--teal-soft);border-color:#B9E4E0;color:#0A5F5A}
.flash-err{background:var(--red-soft);border-color:#F0CDC5;color:var(--red)}

/* ---------- login ----------------------------------------------- */
.authwrap{min-height:100vh;display:grid;place-items:center;padding:22px;background:var(--ink)}
.authcard{background:#fff;border-radius:14px;padding:32px;width:100%;max-width:370px}
.authcard h1{margin-bottom:4px}
.authcard p.sub{color:var(--muted);font-size:.84rem;margin:0 0 22px}
.authcard .btn{width:100%;text-align:center;padding:11px}

/* ---------- ledger (signature: true debit/credit rule) ---------- */
.ledger thead th.dr,.ledger thead th.cr{text-align:right}
.ledger td.dr{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;border-left:1px solid var(--rule)}
.ledger td.cr{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.ledger td.bal{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  border-left:1px solid var(--rule);font-weight:500;background:#FAFCFE}
.ledger .opening td{background:#F7FAFC;color:var(--muted);font-style:italic}

/* ---------- printable invoice ----------------------------------- */
.sheet{
  background:#fff;max-width:820px;margin:22px auto;padding:44px;
  border:1px solid var(--rule);border-radius:var(--r);
}
.sheet-head{display:flex;justify-content:space-between;gap:26px;padding-bottom:20px;border-bottom:2px solid var(--ink)}
.sheet-head h2{font-size:1.3rem;margin:0 0 4px}
.sheet-title{text-align:right}
.sheet-title .tag{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-family:Poppins,sans-serif}
.sheet-title .no{font-family:"IBM Plex Mono",monospace;font-size:1.02rem;font-weight:600;margin-top:3px}
.sheet-meta{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:20px 0;font-size:.85rem}
.sheet-meta .lbl{margin-bottom:6px}
.sheet address{font-style:normal;line-height:1.55}
.sheet-words{background:#F7FAFC;border-left:3px solid var(--teal);padding:11px 15px;font-size:.83rem;margin:18px 0}
.printbar{max-width:820px;margin:0 auto;display:flex;gap:8px;justify-content:flex-end;padding:0 4px}

@media print{
  .side,.topbar,.printbar,.foot,.pagehead,.flash{display:none !important}
  body{background:#fff}
  .main{margin:0;padding:0;max-width:none}
  .sheet{border:0;border-radius:0;margin:0;padding:0;max-width:none}
  @page{margin:14mm}
}

/* ---------- responsive ------------------------------------------ */
@media (max-width:860px){
  .cols,.cols-3{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr 1fr}
  .strip div:nth-child(3){border-left:0}
  .strip div:nth-child(n+3){border-top:1px solid var(--rule-2)}
  .row-3,.row-4{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .topbar{
    display:flex;align-items:center;gap:6px;background:var(--ink);color:#fff;
    padding:6px 12px;position:sticky;top:0;z-index:40;
  }
  .topbar-name{font-family:Poppins,sans-serif;font-weight:500;font-size:.92rem}
  .side{transform:translateX(-100%);transition:transform .18s ease;box-shadow:0 0 40px rgba(0,0,0,.3);width:250px}
  .navtoggle:checked ~ .side{transform:none}
  .main{margin-left:0;padding:18px 15px 50px}
  .pagehead{flex-direction:column;align-items:flex-start}
  .row-2,.row-3,.row-4{grid-template-columns:1fr}
  .sheet{padding:22px}
  .sheet-head,.sheet-meta{flex-direction:column;grid-template-columns:1fr}
  .sheet-title{text-align:left}
  table{font-size:.8rem}
  thead th,tbody td{padding:9px 8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}