:root{
  --paper:#f6f3ee; --surface:#ffffff; --surface-2:#fbf9f6; --sunk:#efeae2;
  --ink:#14202f; --ink-2:#3c4654; --muted:#6b7079; --faint:#9aa0a8;
  --line:#ddd7cd; --line-soft:#e9e4db;
  --navy:#1c3557; --navy-ink:#ffffff; --crimson:#b3121c;
  --ok:#0f6d4d; --ok-bg:#e3f1ea; --warn:#8a5200; --warn-bg:#f8eddb; --bad:#a3161f; --bad-bg:#f8e4e3;
  --neutral-bg:#e9e5de; --neutral-fg:#4c525b;
  --s1:#3b5c9f; --s2:#0f8a5f;
  --age1:#f0c6c4; --age2:#dd8b87; --age3:#c4534f; --age4:#9c1219;
  --shadow:0 1px 2px rgba(20,32,47,.06), 0 8px 24px -12px rgba(20,32,47,.18);
  --radius:7px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12161c; --surface:#1a2028; --surface-2:#1e242d; --sunk:#151a21;
    --ink:#e9e6e0; --ink-2:#c2c7ce; --muted:#99a0aa; --faint:#767d87;
    --line:#2f3944; --line-soft:#262f39;
    --navy:#31496f; --navy-ink:#eef3fb; --crimson:#e4757c;
    --ok:#4cbd93; --ok-bg:#14312a; --warn:#d9a45f; --warn-bg:#33260f; --bad:#ec8b8f; --bad-bg:#36191b;
    --neutral-bg:#262e38; --neutral-fg:#aab1bb;
    --s1:#5a86d4; --s2:#23a07c;
    --age1:#4a2b2c; --age2:#7a3c3d; --age3:#b05a58; --age4:#e0888a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.6);
    color-scheme:dark;
  }
  :root:not([data-theme="light"]) .brandlogo.light{display:none}
  :root:not([data-theme="light"]) .brandlogo.dark{display:block}
}
:root[data-theme="dark"] .brandlogo.light{display:none}
:root[data-theme="dark"] .brandlogo.dark{display:block}
:root[data-theme="dark"]{
  --paper:#12161c; --surface:#1a2028; --surface-2:#1e242d; --sunk:#151a21;
  --ink:#e9e6e0; --ink-2:#c2c7ce; --muted:#99a0aa; --faint:#767d87;
  --line:#2f3944; --line-soft:#262f39;
  --navy:#31496f; --navy-ink:#eef3fb; --crimson:#e4757c;
  --ok:#4cbd93; --ok-bg:#14312a; --warn:#d9a45f; --warn-bg:#33260f; --bad:#ec8b8f; --bad-bg:#36191b;
  --neutral-bg:#262e38; --neutral-fg:#aab1bb;
  --s1:#5a86d4; --s2:#23a07c;
  --age1:#4a2b2c; --age2:#7a3c3d; --age3:#b05a58; --age4:#e0888a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.6);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:14px; line-height:1.5;
}
h1,h2,h3,h4{font-family:Spectral, Georgia, "Times New Roman", serif; margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.01em}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--crimson)}
:focus-visible{outline:2px solid var(--s1); outline-offset:2px; border-radius:3px}
.num{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums}

/* ---------- chrome ---------- */
.topbar{
  position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 20px;
}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto; min-width:0}
.brandlogo{height:30px; width:auto; flex:none}
.logoswap.dark{display:none}
.brand-div{width:1px; height:22px; background:var(--line); flex:none}
.brand-name{font-family:Spectral, Georgia, serif; font-size:16px; font-weight:600; letter-spacing:.01em; color:var(--ink-2); white-space:nowrap}
.pill{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  padding:4px 9px; border-radius:999px; background:var(--neutral-bg); color:var(--neutral-fg);
  letter-spacing:.02em; white-space:nowrap;
}
.pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.pill.ok{background:var(--ok-bg); color:var(--ok)}
.pill.warnp{background:var(--warn-bg); color:var(--warn)}
.pill.badp{background:var(--bad-bg); color:var(--bad)}

.btn{
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  padding:7px 13px; border-radius:var(--radius); cursor:pointer; font-weight:500; font-size:13px;
  display:inline-flex; align-items:center; gap:7px; transition:background .12s, border-color .12s;
}
.btn:hover{background:var(--sunk)}
.btn.primary{background:var(--navy); border-color:var(--navy); color:var(--navy-ink); font-weight:600}
.btn.primary:hover{filter:brightness(1.12)}
.btn.accent{background:var(--crimson); border-color:var(--crimson); color:#fff; font-weight:600}
:root[data-theme="dark"] .btn.accent, :root:not([data-theme="light"]) .btn.accent{color:#1a1013}
.btn.accent:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; border-color:transparent; color:var(--muted); padding:5px 8px}
.btn.ghost:hover{background:var(--sunk); color:var(--ink)}
.btn.sm{padding:4px 9px; font-size:12px}
.btn:disabled{opacity:.45; cursor:not-allowed}

.tabs{display:flex; gap:2px; padding:0 20px; background:var(--surface); border-bottom:1px solid var(--line); overflow-x:auto; position:sticky; top:51px; z-index:39}
.tab{
  border:0; background:none; padding:10px 13px 9px; cursor:pointer; font-size:13px; font-weight:500;
  color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap;
}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--crimson); font-weight:600}
.tab:hover{color:var(--ink)}

main{max-width:1260px; margin:0 auto; padding-block:22px 64px; padding-left:20px; padding-right:20px}
.view[hidden]{display:none}
.section-head{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.section-head h2{font-size:20px}
.section-head p{margin:0; color:var(--muted); font-size:12.5px; max-width:72ch}
.section-head select{max-width:160px}
.spacer{margin-left:auto}

/* ---------- tiles ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:22px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 15px; display:flex; flex-direction:column; gap:5px}
.tile .lbl{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:600}
.tile .val{font-family:"IBM Plex Mono", monospace; font-variant-numeric:tabular-nums; font-size:24px; font-weight:600; letter-spacing:-.02em; line-height:1.1}
.tile .sub{font-size:12px; color:var(--muted)}
.tile.flag-bad{border-left:3px solid var(--bad)}
.tile.flag-ok{border-left:3px solid var(--ok)}

/* ---------- panels & tables ---------- */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:18px; overflow:hidden}
.panel > header{display:flex; align-items:center; gap:10px; padding:12px 15px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap}
.panel > header h3{font-size:15px}
.panel > header .hint{font-size:12px; color:var(--muted)}
.panel-body{padding:15px}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:13px}
th{
  text-align:left; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  font-weight:600; padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface-2);
}
td{padding:10px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:var(--surface-2)}
td.r, th.r{text-align:right}
.empty{padding:26px 15px; text-align:center; color:var(--muted); font-size:13px}
.strong{font-weight:600}
.tiny{font-size:11.5px; color:var(--muted)}

.status{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px; letter-spacing:.02em; white-space:nowrap}
.status::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor}
.status.draft{background:var(--neutral-bg); color:var(--neutral-fg)}
.status.sent{background:var(--warn-bg); color:var(--warn)}
.status.partial{background:var(--warn-bg); color:var(--warn)}
.status.paid{background:var(--ok-bg); color:var(--ok)}
.status.overdue{background:var(--bad-bg); color:var(--bad)}
.status.cancelled{background:var(--neutral-bg); color:var(--neutral-fg); text-decoration:line-through}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:4px}
.field label, .flabel{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600}
input[type=text], input[type=date], input[type=number], input[type=email], select, textarea{
  border:1px solid var(--line); background:var(--surface); border-radius:5px; padding:7px 9px; font-size:13px; width:100%;
}
textarea{resize:vertical; min-height:38px; line-height:1.45}
input:focus, select:focus, textarea:focus{border-color:var(--s1); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--s1) 18%, transparent)}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:11px}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:11px}
.inline-check{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500}
.toolbar{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.toolbar input[type=text]{max-width:250px}
.toolbar select{max-width:200px}

/* ---------- editor split ---------- */
.split{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:18px; align-items:start}
@media (max-width:1000px){ .split{grid-template-columns:1fr} }
.editor-col{display:flex; flex-direction:column; gap:14px}
.lines{display:flex; flex-direction:column; gap:9px}
.line-row{border:1px solid var(--line-soft); border-radius:6px; padding:9px; background:var(--surface-2); display:flex; flex-direction:column; gap:8px}
.line-row .rowtop{display:flex; gap:8px; align-items:center}
.line-row .rowtop .idx{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted); width:18px; flex:none}
.line-nums{display:grid; grid-template-columns:70px 1fr 1fr; gap:8px; align-items:end}
.line-nums .amt{text-align:right; font-family:"IBM Plex Mono",monospace; font-size:13px; padding-top:6px; font-weight:600}

/* ---------- invoice sheet ---------- */
.sheet-wrap{background:var(--sunk); border:1px solid var(--line); border-radius:var(--radius); padding:16px; overflow-x:auto}
.sheet{
  width:760px; max-width:100%; background:#fff; color:#111; margin:0 auto;
  padding:26px 30px 22px; font-family:"IBM Plex Sans", sans-serif; font-size:11px; line-height:1.35;
  box-shadow:0 2px 14px rgba(0,0,0,.14);
}
.sheet .sh-top{display:flex; justify-content:space-between; gap:20px; align-items:flex-start}
.sheet .logo{display:flex; align-items:center}
.sheet .sheet-logo{width:228px; max-width:100%; height:auto; display:block}
.sheet .inv-word{font-family:Spectral, serif; font-size:34px; font-weight:700; color:#5f7ba8; letter-spacing:.02em; text-align:right; line-height:1}
.sheet .meta{margin-top:6px; font-size:10px}
.sheet .meta div{display:flex; justify-content:flex-end; gap:8px; align-items:center; margin-top:2px}
.sheet .meta .k{color:#333}
.sheet .meta .v{border:1px solid #999; min-width:92px; text-align:center; padding:1px 5px; font-family:"IBM Plex Mono",monospace; font-size:10px}
.sheet .addr{margin-top:10px; font-size:10.5px; color:#222}
.sheet .bar{background:#1c3557; color:#fff; font-size:10px; font-weight:600; letter-spacing:.06em; padding:3px 8px; margin-top:12px; max-width:330px}
.sheet .billrow{display:flex; justify-content:space-between; gap:24px; margin-top:6px}
.sheet .billrow .right{text-align:right}
.sheet table.items{width:100%; border-collapse:collapse; margin-top:12px; font-size:10.5px}
.sheet table.items th{background:#1c3557; color:#fff; font-size:9.5px; letter-spacing:.08em; padding:4px 7px; border:1px solid #1c3557; text-transform:uppercase}
.sheet table.items td{border:1px solid #c8cdd6; padding:5px 7px; vertical-align:top; color:#111}
.sheet table.items tr:nth-child(even) td{background:#f4f6f9}
.sheet table.items td.c{width:52px; text-align:left}
.sheet table.items td.n{width:92px; text-align:right; font-family:"IBM Plex Mono",monospace}
.sheet .totals{display:flex; justify-content:flex-end; margin-top:2px}
.sheet .totals table{border-collapse:collapse; font-size:10.5px}
.sheet .totals td{padding:3px 8px}
.sheet .totals td.lab{text-align:right; font-weight:600}
.sheet .totals td.val{text-align:right; font-family:"IBM Plex Mono",monospace; min-width:96px}
.sheet .totals tr.grand td{background:#dde5f1; font-weight:700; font-size:12px; border:1px solid #1c3557}
.sheet .foot{display:flex; justify-content:space-between; gap:20px; margin-top:14px; align-items:flex-start}
.sheet .comments{max-width:58%}
.sheet .comments .bar{max-width:none}
.sheet .comments ol{margin:5px 0 0; padding-left:16px}
.sheet .bank{margin-top:16px; font-size:10px; color:#222}
.sheet .sign{margin-top:22px; font-size:10px}
.sheet .sign .rule{border-top:1px dotted #444; width:190px; margin-bottom:3px}
.sheet .thanks{text-align:center; font-family:Spectral,serif; font-style:italic; font-weight:600; font-size:13px; margin-top:16px; color:#111}

/* ---------- charts ---------- */
.chart-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:18px}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-bottom:8px}
.legend span{display:inline-flex; align-items:center; gap:6px}
.swatch{width:10px; height:10px; border-radius:2px; flex:none}
svg text{font-family:"IBM Plex Sans",sans-serif}
.bar-mark{transition:opacity .12s}
.bar-mark:hover{opacity:.78}
.tt{
  position:fixed; z-index:80; pointer-events:none; background:var(--surface); border:1px solid var(--line);
  border-radius:6px; padding:7px 10px; font-size:12px; box-shadow:var(--shadow); max-width:230px;
}
.tt .tt-t{font-weight:600; margin-bottom:3px}
.tt .tt-r{display:flex; justify-content:space-between; gap:14px; font-variant-numeric:tabular-nums}

/* ---------- modal ---------- */
.modal-bg{position:fixed; inset:0; background:rgba(16,22,30,.5); z-index:60; display:flex; align-items:flex-start; justify-content:center; padding:24px 16px; overflow-y:auto}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:9px; width:min(560px,100%); box-shadow:var(--shadow)}
.modal header{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line-soft)}
.modal header h3{font-size:16px; margin-right:auto}
.modal .mbody{padding:16px; display:flex; flex-direction:column; gap:12px}
.modal footer{display:flex; gap:9px; justify-content:flex-end; padding:13px 16px; border-top:1px solid var(--line-soft); flex-wrap:wrap}

.toast-host{position:fixed; left:50%; transform:translateX(-50%); bottom:22px; z-index:90; display:flex; flex-direction:column; gap:8px; align-items:center}
.toast{background:var(--ink); color:var(--paper); padding:9px 15px; border-radius:999px; font-size:13px; box-shadow:var(--shadow); max-width:min(92vw,460px)}
.toast.bad{background:var(--bad); color:#fff}

.aging-row{display:grid; grid-template-columns:96px 1fr 96px; gap:10px; align-items:center; padding:6px 0; font-size:12.5px}
.aging-track{background:var(--sunk); border-radius:3px; height:14px; overflow:hidden}
.aging-fill{height:100%; border-radius:3px 4px 4px 3px}

@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }

/* ---------- print ---------- */
.print-only{display:none}
@media print{
  @page{size:A4; margin:12mm}
  body{background:#fff}
  .topbar,.tabs,.no-print,.toast-host{display:none !important}
  main{padding:0; max-width:none}
  .view[hidden]{display:none}
  .split{display:block}
  .editor-col{display:none}
  .sheet-wrap{background:none; border:0; padding:0; overflow:visible}
  .sheet{width:100%; max-width:none; box-shadow:none; padding:0; font-size:10.5px}
  .panel{border:0}
}

/* ---------- sign-in / setup ---------- */
.auth-body{display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--paper); padding:24px 16px}
.auth-card{background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
  width:min(420px,100%); padding:28px 26px; display:flex; flex-direction:column; gap:12px}
.auth-logo{width:200px; max-width:70%; height:auto; margin-bottom:4px}
.auth-card h1{font-size:19px}
.auth-note{margin:0; font-size:13px; color:var(--muted); line-height:1.55}
.auth-note.ok{color:var(--ok)}
.auth-err{background:var(--bad-bg); color:var(--bad); border-radius:6px; padding:9px 11px; font-size:13px; font-weight:500}
.auth-form{display:flex; flex-direction:column; gap:5px}
.auth-form label{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-top:8px}
.auth-form label.check{display:flex; gap:8px; align-items:flex-start; text-transform:none; letter-spacing:0;
  font-size:12.5px; font-weight:400; color:var(--ink-2); margin-top:14px; line-height:1.45}
.auth-form label.check input{width:auto; margin-top:2px}
.auth-form .btn{margin-top:16px; justify-content:center}

/* ---------- user chip ---------- */
.userchip{display:flex; align-items:center; gap:8px; font-size:12.5px}
.userchip .who{display:flex; flex-direction:column; line-height:1.2; text-align:right}
.userchip .who b{font-weight:600}
.userchip .who span{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.avatar{width:30px; height:30px; border-radius:50%; background:var(--navy); color:var(--navy-ink);
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12px; flex:none}
.admin-only[hidden]{display:none !important}
.rolechip{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  padding:2px 7px; border-radius:999px; background:var(--neutral-bg); color:var(--neutral-fg)}
.rolechip.admin{background:var(--bad-bg); color:var(--bad)}
.banner{background:var(--warn-bg); color:var(--warn); border-radius:var(--radius); padding:10px 13px;
  font-size:13px; margin-bottom:16px; font-weight:500}

.logoswap.dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logoswap.light{display:none}
  :root:not([data-theme="light"]) .logoswap.dark{display:block}
}
:root[data-theme="dark"] .logoswap.light{display:none}
:root[data-theme="dark"] .logoswap.dark{display:block}