:root{
  --bg:#EAF4EB;
  --bg-grad:radial-gradient(1100px 700px at -5% -10%, #CDEAD4 0%, transparent 60%), radial-gradient(900px 700px at 105% 110%, #D7F0DC 0%, transparent 55%), radial-gradient(700px 500px at 70% 10%, #E8F6EA 0%, transparent 60%), linear-gradient(160deg,#F3FAF4,#E9F5EB);
  --glass:rgba(255,255,255,.38); --glass-strong:rgba(255,255,255,.60); --glass-border:rgba(255,255,255,.70); --blur:blur(18px) saturate(160%);
  --surface:rgba(255,255,255,.48); --surface-2:rgba(236,248,238,.40); --surface-solid:#EEF9F1; --ink:#0A1F0F; --muted:#3F6A4C; --line:rgba(10,120,40,.14); --line-strong:rgba(10,120,40,.24);
  --brand:#0A7A26; --brand-hover:#086620; --brand-ink:#FFFFFF; --deep:#0A3A1A; --deep-2:#0F4A22; --leaf:#2FBD5C; --leaf-soft:rgba(47,189,92,.14);
  --danger:#B42328; --danger-soft:rgba(180,35,40,.10); --warn:#8A5A00; --warn-soft:rgba(232,170,40,.18); --info:#1B5A87; --info-soft:rgba(27,90,135,.12);
  --status-approved:#0A7A26; --status-approved-soft:rgba(47,189,92,.14); --status-neutral-soft:rgba(236,248,238,.40); --status-line:rgba(10,120,40,.14);
  --shadow:0 1px 1px rgba(255,255,255,.6) inset,0 8px 30px rgba(10,120,40,.10);
  --r-lg:18px; --r:12px; --r-sm:9px;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]):not([data-color="pink"]){
  --bg:#071209;
  --bg-grad:radial-gradient(1100px 700px at -5% -10%, #10301B 0%, transparent 60%), radial-gradient(900px 700px at 105% 110%, #0D2816 0%, transparent 55%), linear-gradient(160deg,#071209,#0A170C);
  --glass:rgba(18,36,24,.38); --glass-strong:rgba(16,32,20,.65); --glass-border:rgba(255,255,255,.09);
  --surface:rgba(20,40,28,.52); --surface-2:rgba(255,255,255,.05); --surface-solid:#102418; --ink:#E4F5E8; --muted:#8FC9A4; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --brand:#3DDB6F; --brand-hover:#56E383; --deep:#10301B; --deep-2:#184827; --leaf-soft:rgba(61,219,111,.18);
  --danger:#F07A7E; --danger-soft:rgba(240,122,126,.14); --warn:#E8B44E; --warn-soft:rgba(232,180,78,.14); --info:#7DB7E6; --info-soft:rgba(125,183,230,.14);
  --status-approved:#3DDB6F; --status-approved-soft:rgba(61,219,111,.18); --status-neutral-soft:rgba(255,255,255,.05); --status-line:rgba(255,255,255,.08);
  --shadow:0 1px 0 rgba(255,255,255,.05) inset,0 10px 30px rgba(0,0,0,.35); color-scheme:dark;
}}
:root[data-theme="dark"]:not([data-color="pink"]){
  --bg:#071209;
  --bg-grad:radial-gradient(1100px 700px at -5% -10%, #10301B 0%, transparent 60%), radial-gradient(900px 700px at 105% 110%, #0D2816 0%, transparent 55%), linear-gradient(160deg,#071209,#0A170C);
  --glass:rgba(18,36,24,.38); --glass-strong:rgba(16,32,20,.65); --glass-border:rgba(255,255,255,.09);
  --surface:rgba(20,40,28,.52); --surface-2:rgba(255,255,255,.05); --surface-solid:#102418; --ink:#E4F5E8; --muted:#8FC9A4; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --brand:#3DDB6F; --brand-hover:#56E383; --deep:#10301B; --deep-2:#184827; --leaf-soft:rgba(61,219,111,.18);
  --danger:#F07A7E; --danger-soft:rgba(240,122,126,.14); --warn:#E8B44E; --warn-soft:rgba(232,180,78,.14); --info:#7DB7E6; --info-soft:rgba(125,183,230,.14);
  --status-approved:#3DDB6F; --status-approved-soft:rgba(61,219,111,.18); --status-neutral-soft:rgba(255,255,255,.05); --status-line:rgba(255,255,255,.08);
  --shadow:0 1px 0 rgba(255,255,255,.05) inset,0 10px 30px rgba(0,0,0,.35); color-scheme:dark;
}
/* ---------- pink theme (Theme 2) ---------- */
:root[data-color="pink"]{
  --bg:#FBEAF1;
  --bg-grad:radial-gradient(1100px 700px at -5% -10%, #F8D3E6 0%, transparent 60%), radial-gradient(900px 700px at 105% 110%, #FAD9E9 0%, transparent 55%), radial-gradient(700px 500px at 70% 10%, #FCE9F2 0%, transparent 60%), linear-gradient(160deg,#FDF1F6,#FBE7F0);
  --surface-2:rgba(253,235,244,.40); --surface-solid:#FDEFF5; --ink:#0B0207; --muted:#3D1B2C; --line:rgba(150,10,80,.14); --line-strong:rgba(150,10,80,.24);
  --brand:#D6006F; --brand-hover:#B8005F; --deep:#4A0026; --deep-2:#5C0030; --leaf:#FF4FA3; --leaf-soft:rgba(255,79,163,.14);
  --shadow:0 1px 1px rgba(255,255,255,.6) inset,0 8px 30px rgba(150,10,80,.10);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"])[data-color="pink"]{
  --bg:#1A060F;
  --bg-grad:radial-gradient(1100px 700px at -5% -10%, #4A1030 0%, transparent 60%), radial-gradient(900px 700px at 105% 110%, #3D0F28 0%, transparent 55%), linear-gradient(160deg,#1A060F,#220A16);
  --glass:rgba(36,18,28,.38); --glass-strong:rgba(32,16,24,.65); --glass-border:rgba(255,255,255,.09);
  --surface:rgba(40,20,30,.52); --surface-2:rgba(255,255,255,.05); --surface-solid:#241019; --ink:#F5E4EE; --muted:#C98FAE; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --brand:#FF4FA3; --brand-hover:#FF6FB3; --deep:#4A1030; --deep-2:#5A1838; --leaf-soft:rgba(255,79,163,.18);
  --shadow:0 1px 0 rgba(255,255,255,.05) inset,0 10px 30px rgba(0,0,0,.35); color-scheme:dark;
}}
:root[data-theme="dark"][data-color="pink"]{
  --bg:#1A060F;
  --bg-grad:radial-gradient(1100px 700px at -5% -10%, #4A1030 0%, transparent 60%), radial-gradient(900px 700px at 105% 110%, #3D0F28 0%, transparent 55%), linear-gradient(160deg,#1A060F,#220A16);
  --glass:rgba(36,18,28,.38); --glass-strong:rgba(32,16,24,.65); --glass-border:rgba(255,255,255,.09);
  --surface:rgba(40,20,30,.52); --surface-2:rgba(255,255,255,.05); --surface-solid:#241019; --ink:#F5E4EE; --muted:#C98FAE; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --brand:#FF4FA3; --brand-hover:#FF6FB3; --deep:#4A1030; --deep-2:#5A1838; --leaf-soft:rgba(255,79,163,.18);
  --shadow:0 1px 0 rgba(255,255,255,.05) inset,0 10px 30px rgba(0,0,0,.35); color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0; height:100%; background:var(--bg); color:var(--ink); font:14px/1.5 Manrope,"Segoe UI",system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit; color:inherit}
img{max-width:100%}
.num{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
:focus-visible{outline:2px solid var(--leaf); outline-offset:2px}
.hidden{display:none!important}

/* ---------- buttons & inputs ---------- */
.btn{display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:var(--r-sm); border:1px solid var(--line-strong); background:var(--surface); cursor:pointer; font-weight:600; font-size:13.5px; white-space:nowrap}
.btn:hover{border-color:var(--brand)}
.btn.primary{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.btn.primary:hover{background:var(--brand-hover)}
.btn.danger{color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.btn.fill-red{background:var(--danger); border-color:var(--danger); color:#fff}
.btn.fill-red:hover{background:color-mix(in srgb, var(--danger) 85%, black); box-shadow:0 0 16px color-mix(in srgb,var(--danger) 70%,transparent)}
.btn.fill-yellow{background:#C98A1A; border-color:#C98A1A; color:#fff}
.btn.fill-yellow:hover{background:#B47814; box-shadow:0 0 16px rgba(201,138,26,.7)}
.btn.fill-green{background:#0A7A26; border-color:#0A7A26; color:#fff}
.btn.fill-green:hover{background:#086620; box-shadow:0 0 16px rgba(10,122,38,.7)}
/* Voucher review buttons — Reject (red), Return to Maker (orange), Verify / Approve and post (green): solid glossy fill
   in every theme; hover brightens, lifts and adds a colored glow; press settles back down. */
.btn:is(.act-red,.act-orange,.act-green){--c1:#E5484D; --c2:#C62F35; --c3:#9E1F25; --glow:229,72,77;
  color:#fff; font-weight:700; border:1px solid var(--c3); text-shadow:0 1px 1px rgba(0,0,0,.25);
  background:linear-gradient(115deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 40%), linear-gradient(180deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
  box-shadow:0 4px 12px rgba(var(--glow),.32), inset 0 1px 0 rgba(255,255,255,.4);
  transition:filter .18s ease, box-shadow .18s ease, transform .12s ease}
.btn.act-orange{--c1:#FF9F43; --c2:#F07F12; --c3:#C2610A; --glow:240,127,18}
.btn.act-green{--c1:#2DBE6C; --c2:#16994D; --c3:#0D7238; --glow:22,153,77}
.btn:is(.act-red,.act-orange,.act-green):hover{border-color:var(--c3); filter:brightness(1.08) saturate(1.1); transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(var(--glow),.22), 0 8px 22px rgba(var(--glow),.55), inset 0 1px 0 rgba(255,255,255,.5)}
.btn:is(.act-red,.act-orange,.act-green):active{transform:translateY(0); filter:brightness(.96); box-shadow:0 2px 8px rgba(var(--glow),.4), inset 0 2px 4px rgba(0,0,0,.18)}
.btn:is(.act-red,.act-orange,.act-green):focus-visible{outline:none; box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(var(--glow),.8)}
/* Excel / Print buttons: same green hover in every theme — glossy gradient, white text, slight lift */
.btn:is([data-act="exportV"],[data-act="exportR"],[data-act="exportCOA"],[data-act="printR"],[data-act="printV"]){transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease}
.btn:is([data-act="exportV"],[data-act="exportR"],[data-act="exportCOA"],[data-act="printR"],[data-act="printV"]):not(:disabled):hover{background:linear-gradient(115deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 38%), linear-gradient(180deg, #23A35A 0%, #138A44 55%, #0B6E34 100%); border-color:#0E7A3B; color:#fff; box-shadow:0 8px 20px rgba(19,138,68,.38), inset 0 1px 0 rgba(255,255,255,.45); transform:translateY(-1px)}
.btn:is([data-act="exportV"],[data-act="exportR"],[data-act="exportCOA"],[data-act="printR"],[data-act="printV"]):not(:disabled):active{transform:translateY(0); box-shadow:0 3px 10px rgba(19,138,68,.3), inset 0 1px 0 rgba(255,255,255,.35)}
/* Same glow-on-hover treatment for a solid .primary button (used by Approve and post) without
   touching every other .btn.primary in the app — the fill and theme color stay exactly as-is. */
.btn.glow-fill:hover{box-shadow:0 0 16px color-mix(in srgb,var(--brand) 70%,transparent)}
.btn.ghost{border-color:transparent; background:transparent}
.btn.ghost:hover{background:var(--surface-2)}
/* A medium (not full-solid, not transparent) tint of each button's own color by default, colored
   text/border to match — then on hover it deepens and glows, so Reject/Return/Verify read as
   lighter-weight actions than the solid Approve button while still carrying color at rest, not
   only on hover. */
.btn.glow-red{background:color-mix(in srgb,var(--danger) 24%,var(--surface)); border-color:color-mix(in srgb,var(--danger) 55%,transparent); color:var(--danger)}
.btn.glow-red:hover{background:color-mix(in srgb,var(--danger) 38%,var(--surface)); border-color:var(--danger); box-shadow:0 0 0 1px var(--danger), 0 0 16px color-mix(in srgb,var(--danger) 55%,transparent)}
.btn.glow-yellow{background:color-mix(in srgb,#C98A1A 24%,var(--surface)); border-color:color-mix(in srgb,#C98A1A 55%,transparent); color:#C98A1A}
.btn.glow-yellow:hover{background:color-mix(in srgb,#C98A1A 38%,var(--surface)); border-color:#C98A1A; box-shadow:0 0 0 1px #C98A1A, 0 0 16px rgba(201,138,26,.55)}
.btn.glow-brand{background:color-mix(in srgb,var(--brand) 24%,var(--surface)); border-color:color-mix(in srgb,var(--brand) 55%,transparent); color:var(--brand)}
.btn.glow-brand:hover{background:color-mix(in srgb,var(--brand) 38%,var(--surface)); border-color:var(--brand); box-shadow:0 0 0 1px var(--brand), 0 0 16px color-mix(in srgb,var(--brand) 55%,transparent)}
.btn.sm{height:30px; padding:0 10px; font-size:12.5px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn svg{width:16px; height:16px; flex:none}
label.f{display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:var(--muted)}
.in, select.in, textarea.in{height:38px; padding:0 11px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font-weight:500; font-size:14px; width:100%; min-width:0}
textarea.in{height:auto; min-height:64px; padding:9px 11px; resize:vertical}
.in:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--leaf) 22%,transparent)}
.in:disabled{background:var(--surface-2); color:var(--ink)}
.in.bad{border-color:var(--danger)}
.check{display:flex; align-items:center; gap:9px; font-weight:500; font-size:13.5px; color:var(--ink); cursor:pointer; padding:6px 0}
.check input{width:17px; height:17px; accent-color:var(--brand)}
.check.solo{justify-content:center; padding:4px 0}
table.access-mtx th:not(:first-child),table.access-mtx td:not(:first-child){text-align:center}
table.access-mtx td:not(:first-child){width:90px}

/* ---------- auth screens: centered glass card over the seal ---------- */
#app{height:100%}
.auth{min-height:100%; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:32px 16px; position:relative; overflow:hidden; background:#0A3A1A}
.auth-bg{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.auth-bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center}
.auth-form{position:relative; z-index:1; width:100%; max-width:420px; padding:16px 14px 26px; border-radius:26px;
  background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(8px) saturate(150%); backdrop-filter:blur(8px) saturate(150%);
  border:1px solid rgba(255,255,255,.40); box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 30px 80px rgba(0,0,0,.40)}
@media (max-width:760px){ .auth{justify-content:center; padding:32px 16px} }
.card-head{text-align:center; margin-bottom:6px}
.card-head img.card-head-logo{width:100%; max-width:none; height:auto; object-fit:contain}
.card-head h1{margin:12px 0 0; font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--deep); text-shadow:0 1px 3px rgba(255,255,255,.5)}
.card-head p{margin:2px 0 0; color:var(--muted); font-size:13px; text-shadow:0 1px 3px rgba(255,255,255,.5)}
.auth-form form{width:100%; display:flex; flex-direction:column; gap:14px}
.auth-form h2{margin:0; font-size:18px; font-weight:800; text-align:center}
.auth-form .sub{margin:-8px 0 4px; color:var(--ink); text-align:center; font-size:13px}
.auth-form .in{background:rgba(255,255,255,.55)}
.auth-form label.f{color:var(--ink); font-weight:700}
.auth-form .btn.primary{height:48px; justify-content:center; font-size:15.5px; font-weight:800; letter-spacing:.01em; border-radius:12px; border:none; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.2);
  background:linear-gradient(115deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 32%), linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff) 0%, var(--brand) 48%, color-mix(in srgb, var(--brand) 78%, #000) 100%);
  box-shadow:0 10px 26px color-mix(in srgb, var(--brand) 48%, transparent), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 5px color-mix(in srgb, var(--brand) 40%, #000);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease}
.auth-form .btn.primary:hover{filter:brightness(1.07); box-shadow:0 14px 34px color-mix(in srgb, var(--brand) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 5px color-mix(in srgb, var(--brand) 40%, #000); transform:translateY(-1px)}
.auth-form .btn.primary:active{transform:translateY(0); filter:brightness(.97)}
.auth-form .note{text-align:center; color:var(--ink)}
.pw-wrap{position:relative}
.pw-wrap .in{padding-right:40px}
.pw-toggle{position:absolute; right:4px; top:50%; transform:translateY(-50%); width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:var(--muted); padding:0; border-radius:8px}
.pw-toggle svg{width:18px; height:18px}
.pw-toggle:hover{color:var(--ink); background:var(--surface-2)}
.err{color:var(--danger); background:var(--danger-soft); padding:9px 12px; border-radius:var(--r-sm); font-weight:600; font-size:13px}
.note{color:var(--muted); font-size:12.5px}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .auth-form{background:rgba(10,20,14,.18); border-color:rgba(255,255,255,.16)} :root:not([data-theme="light"]) .card-head h1{color:#fff} :root:not([data-theme="light"]) .auth-form .in{background:rgba(255,255,255,.10)} }
:root[data-theme="dark"] .auth-form{background:rgba(10,20,14,.18); border-color:rgba(255,255,255,.16)}
:root[data-theme="dark"] .card-head h1{color:#fff}
@media (max-width:480px){ .auth-form{padding:14px 12px 20px; border-radius:22px} }

/* ---------- shell ---------- */
.shell{display:grid; grid-template-columns:256px 1fr; height:100%}
.side{background:var(--glass); color:var(--ink); display:flex; flex-direction:column; overflow-y:auto; position:relative; z-index:30}
.brandbar{display:flex; align-items:center; gap:6px; padding:10px 6px 4px 8px; position:relative}
.side-toggle{flex:none; width:30px; height:30px; border-radius:9px; border:1px solid var(--line-strong); background:var(--surface); color:var(--deep); display:grid; place-items:center; cursor:pointer; margin-left:auto; position:absolute; right:6px; top:8px; box-shadow:0 2px 8px rgba(0,0,0,.12)}
.side-toggle:hover{background:var(--surface-2)}
.side-toggle svg{width:16px; height:16px}
:root[data-theme="dark"] .side-toggle{color:var(--ink)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .side-toggle{color:var(--ink)} }
.brandbar img.brand-logo-wide{width:100%; height:auto; object-fit:contain; flex:1; min-width:0; filter:drop-shadow(0 2px 6px rgba(0,0,0,.18))}
.brandbar b{display:block; font-size:15px; color:var(--deep); line-height:1.2}
.brandbar span{font-size:12px; color:var(--muted)}
.nav{padding:0 10px 18px; display:flex; flex-direction:column; gap:1px}
.nav h6{margin:16px 10px 6px; display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.02em}
.nav h6 svg{width:13px; height:13px; opacity:.85; flex:none}
.nav h6.sep{margin-top:18px; padding-top:14px; position:relative}
.nav h6.sep::before{content:""; position:absolute; top:0; left:2px; right:2px; height:1px; background:linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent)}
.nav-ab{flex:none; width:24px; height:18px; border-radius:5px; display:grid; place-items:center; font-size:9.5px; font-weight:800; letter-spacing:.01em; color:currentColor; background:color-mix(in srgb, currentColor 12%, transparent); border:1px solid color-mix(in srgb, currentColor 32%, transparent); opacity:.85}
.nav a.on .nav-ab,.nav a:hover .nav-ab{opacity:1}
.nav a{display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:10px; color:var(--deep); text-decoration:none; font-weight:600; font-size:13.5px; cursor:pointer; position:relative; transition:background .15s ease, box-shadow .15s ease, color .15s ease, transform .1s ease}
.nav a svg{width:17px; height:17px; flex:none; opacity:.75; transition:opacity .15s ease}
.nav a:hover:not(.on){background:color-mix(in srgb, var(--brand) 20%, transparent); color:var(--brand); -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%); box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent) inset, 0 1px 0 rgba(255,255,255,.5) inset, 0 4px 12px color-mix(in srgb, var(--brand) 18%, transparent)}
.nav a:active:not(.on){transform:scale(.98)}
.nav a.on{background:var(--brand); color:#fff; font-weight:700; box-shadow:0 6px 16px color-mix(in srgb, var(--brand) 35%, transparent)}
.nav a.on svg{opacity:1}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .nav a{color:var(--ink)} :root:not([data-theme="light"]) .nav a svg{opacity:.65} :root:not([data-theme="light"]) .brandbar b{color:var(--ink)} :root:not([data-theme="light"]) .vhead .ttl h2,:root:not([data-theme="light"]) table.lines thead th,:root:not([data-theme="light"]) .sign b,:root:not([data-theme="light"]) table.coa tr.major td{color:var(--ink)} }
:root[data-theme="dark"] .nav a{color:var(--ink)}
:root[data-theme="dark"] .nav a svg{opacity:.65}
:root[data-theme="dark"] .brandbar b{color:var(--ink)}
:root[data-theme="dark"] .vhead .ttl h2,:root[data-theme="dark"] table.lines thead th,:root[data-theme="dark"] .sign b,:root[data-theme="dark"] table.coa tr.major td{color:var(--ink)}
.side .nav a:not(.on){color:#07230F; font-weight:700; text-shadow:0 1px 2px rgba(255,255,255,.65), 0 0 10px rgba(255,255,255,.4)}
.side .nav a:not(.on) svg{filter:drop-shadow(0 1px 1px rgba(255,255,255,.7))}
.side .nav h6{color:#07230F; font-weight:800; text-shadow:0 1px 2px rgba(255,255,255,.65)}
.side .brandbar b{color:#07230F; text-shadow:0 1px 2px rgba(255,255,255,.65)}
.side .brandbar span{color:#07230F; text-shadow:0 1px 2px rgba(255,255,255,.65)}
.side-foot{margin-top:auto; padding:14px 18px; border-top:1px solid var(--line); font-size:12px; color:#07230F; font-weight:700; display:flex; align-items:center; gap:8px; text-shadow:0 1px 2px rgba(255,255,255,.65)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .side .nav a:not(.on){color:#FFFFFF} :root:not([data-theme="light"]) .side .nav h6{color:#EAF4EB} :root:not([data-theme="light"]) .side .brandbar b{color:#FFFFFF} :root:not([data-theme="light"]) .side .brandbar span{color:#EAF4EB} :root:not([data-theme="light"]) .side-foot{color:#EAF4EB} }
:root[data-theme="dark"] .side .nav a:not(.on){color:#FFFFFF}
:root[data-theme="dark"] .side .nav h6{color:#EAF4EB}
:root[data-theme="dark"] .side .brandbar b{color:#FFFFFF}
:root[data-theme="dark"] .side .brandbar span{color:#EAF4EB}
:root[data-theme="dark"] .side-foot{color:#EAF4EB}
/* sidebar art has saturated magenta ribbons behind the text — dark plum text with a solid white halo keeps it readable on both the ribbons and the pale areas */
:root[data-color="pink"] .side .nav a:not(.on){color:#140309; text-shadow:0 0 2px #fff, 0 0 6px rgba(255,255,255,.95), 0 0 12px rgba(255,255,255,.7)}
:root[data-color="pink"] .side .nav a:not(.on) svg{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px rgba(255,255,255,.9))}
:root[data-color="pink"] .side .nav a:hover:not(.on){background:rgba(255,255,255,.78); color:var(--brand); text-shadow:none; box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent) inset, 0 4px 14px rgba(90,10,45,.22)}
:root[data-color="pink"] .side .nav a:hover:not(.on) svg{filter:none; opacity:1}
:root[data-color="pink"] .side .nav h6{color:#140309; text-shadow:0 0 2px #fff, 0 0 6px rgba(255,255,255,.95)}
:root[data-color="pink"] .side .brandbar b{color:#140309; text-shadow:0 0 2px #fff, 0 0 6px rgba(255,255,255,.95)}
:root[data-color="pink"] .side .brandbar span{color:#140309; text-shadow:0 0 2px #fff, 0 0 6px rgba(255,255,255,.95)}
:root[data-color="pink"] .side-foot{color:#140309; text-shadow:0 0 2px #fff, 0 0 6px rgba(255,255,255,.95)}
:root[data-theme="dark"][data-color="pink"] .side .nav a:not(.on){color:#FFFFFF}
:root[data-theme="dark"][data-color="pink"] .side .nav h6{color:#F3DDEA}
:root[data-theme="dark"][data-color="pink"] .side .brandbar b{color:#FFFFFF}
:root[data-theme="dark"][data-color="pink"] .side .brandbar span{color:#F3DDEA}
:root[data-theme="dark"][data-color="pink"] .side-foot{color:#F3DDEA}
:root[data-theme="dark"][data-color="pink"] .side :is(.nav a:not(.on), .nav h6, .brandbar b, .brandbar span),:root[data-theme="dark"][data-color="pink"] .side-foot{text-shadow:0 1px 3px rgba(0,0,0,.6)}
:root[data-theme="dark"][data-color="pink"] .side .nav a:not(.on) svg{filter:none}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"])[data-color="pink"] .side :is(.nav a:not(.on), .nav h6, .brandbar b, .brandbar span),:root:not([data-theme="light"])[data-color="pink"] .side-foot{text-shadow:0 1px 3px rgba(0,0,0,.6)} :root:not([data-theme="light"])[data-color="pink"] .side .nav a:not(.on) svg{filter:none} }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"])[data-color="pink"] .side .nav a:not(.on){color:#FFFFFF} :root:not([data-theme="light"])[data-color="pink"] .side .nav h6{color:#F3DDEA} :root:not([data-theme="light"])[data-color="pink"] .side .brandbar b{color:#FFFFFF} :root:not([data-theme="light"])[data-color="pink"] .side .brandbar span{color:#F3DDEA} :root:not([data-theme="light"])[data-color="pink"] .side-foot{color:#F3DDEA} }
.badge{margin-left:auto; background:var(--brand); color:#fff; font-size:11px; font-weight:800; min-width:20px; height:20px; border-radius:10px; display:grid; place-items:center; padding:0 6px; flex:none}
.nav a.on .badge{background:rgba(255,255,255,.3)}
/* green count badges (sidebar Messages / For my action, unread counts in the chat list): same green as the top bar message badge */
.badge.green,.nav a.on .badge.green{background:linear-gradient(180deg, #23A35A 0%, #138A44 55%, #0B6E34 100%); color:#fff; text-shadow:none; box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(19,138,68,.45)}
.dot{width:8px; height:8px; border-radius:50%; background:var(--leaf); flex:none}
.dot.off{background:#C9A13B}
.main{display:flex; flex-direction:column; min-width:0; height:100%; overflow:hidden}
.top{display:flex; align-items:center; gap:12px; padding:12px 24px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10}
.top h1{margin:0; font-size:18px; font-weight:800; letter-spacing:-.01em; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:12px; text-shadow:0 1px 3px rgba(255,255,255,.65), 0 0 10px rgba(255,255,255,.4)}
.top h1.has-badge{font-size:20px}
.module-badge.solid{display:inline-flex; align-items:center; justify-content:center; flex:none; height:38px; padding:0 18px; border-radius:12px; font-size:16px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; background:var(--brand);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 6px 18px color-mix(in srgb, var(--brand) 38%, transparent)}
.module-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; color:var(--muted); font-weight:700; font-size:15px; text-shadow:0 1px 3px rgba(255,255,255,.65)}
@media (max-width:640px){ .top h1.has-badge{font-size:17px; gap:9px} .module-badge.solid{height:32px; padding:0 13px; font-size:13px; border-radius:9px; letter-spacing:.02em} .module-name{font-size:13px} }
/* Phones: a long module name (e.g. "Chart of accounts") shrinks to fit beside the top-bar buttons, ending in "…" */
@media (max-width:640px){ .top{gap:8px} .module-badge.solid{display:block; flex:0 1 auto; min-width:0; line-height:32px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} }
@media (max-width:400px){ .module-badge.solid{padding:0 10px; font-size:12px; letter-spacing:0} }
.menu-btn{display:none}
.topbar-msg{position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface-2); cursor:pointer; flex:none; color:var(--ink)}
.topbar-msg:hover{background:color-mix(in srgb, var(--brand) 20%, transparent); color:var(--brand); border-color:color-mix(in srgb, var(--brand) 45%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent) inset, 0 4px 12px color-mix(in srgb, var(--brand) 18%, transparent)}
.topbar-msg svg{width:18px; height:18px}
.topbar-msg .msg-badge{position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:linear-gradient(180deg, #23A35A 0%, #138A44 55%, #0B6E34 100%); color:#fff; font-size:10px; font-weight:800; line-height:17px; text-align:center; box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(19,138,68,.45)}
.who{display:flex; align-items:center; gap:10px; padding:4px 6px 4px 4px; border-radius:24px; border:1px solid var(--line); background:var(--surface-2); cursor:pointer; transition:background .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease}
.who:hover{background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 60%, transparent) inset, 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 18px color-mix(in srgb, var(--brand) 45%, transparent)}
.who:hover span{color:#fff}
.who:hover .avatar{box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.who:hover .avatar.photo{box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.avatar{width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:800; font-size:12px; object-fit:cover; flex:none}
.avatar.photo{background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line-strong)}
.seg{display:inline-flex; padding:4px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); gap:4px}
.seg-btn{height:36px; padding:0 16px; border-radius:9px; border:none; background:transparent; color:var(--muted); font-weight:700; font-size:13.5px; cursor:pointer}
.seg-btn.on{background:var(--brand); color:#fff; box-shadow:0 4px 12px color-mix(in srgb, var(--brand) 35%, transparent)}
.seg-btn:not(.on):hover{background:var(--surface); color:var(--ink)}
.who span{font-weight:700; font-size:13px; padding-right:6px}
.content{flex:1; overflow-y:auto; padding:24px .25in}
.wrap{max-width:none; margin:0 auto}
.scrim{display:none}
.shell.collapsed{grid-template-columns:76px 1fr}
.shell.collapsed .side{width:76px}
.shell.collapsed .brandbar{padding:14px 10px; justify-content:center}
.shell.collapsed .brandbar .brand-text{display:none}
.shell.collapsed .brandbar img{display:none}
.shell.collapsed .side-toggle{margin-left:0}
.shell.collapsed .side-toggle svg{transform:rotate(180deg)}
.shell.collapsed .nav{padding:4px 12px}
.shell.collapsed .nav h6{display:none}
.shell.collapsed .nav a{justify-content:center; padding:11px 0; gap:0}
.shell.collapsed .nav a span:not(.badge):not(.nav-ab){display:none}
.shell.collapsed .nav a .badge{position:absolute; top:3px; right:14px; min-width:16px; height:16px; font-size:9px; padding:0 4px}
.shell.collapsed .side-foot{justify-content:center; padding:14px 10px}
.shell.collapsed .side-foot span:not(.dot){display:none}
@media (max-width:900px){
  .shell.collapsed{grid-template-columns:1fr}
  .shell.collapsed .side{width:272px}
  .shell.collapsed .brandbar{justify-content:flex-start; padding:18px 18px 16px}
  .shell.collapsed .brandbar .brand-text{display:block}
  .shell.collapsed .brandbar img{display:block}
  .shell.collapsed .nav{padding:4px 10px 18px}
  .shell.collapsed .nav h6{display:flex}
  .shell.collapsed .nav a{justify-content:flex-start; padding:8px 10px; gap:11px}
  .shell.collapsed .nav a span:not(.badge):not(.nav-ab){display:inline}
  .shell.collapsed .nav a .badge{position:static; min-width:20px; height:20px; font-size:11px; padding:0 6px}
  .shell.collapsed .side-foot{justify-content:flex-start; padding:14px 18px}
  .shell.collapsed .side-foot span:not(.dot){display:inline}
  .side-toggle{display:none}
  .shell{grid-template-columns:1fr}
  .side{position:fixed; inset:0 auto 0 0; width:272px; transform:translateX(-100%); transition:transform .2s ease; padding-top:env(safe-area-inset-top,0px)}
  .shell.open .side{transform:none}
  .shell.open .scrim{display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:20}
  .menu-btn{display:inline-flex}
  .top{padding:10px 14px}
  .content{padding:16px 12px}
  .who span{display:none}
}

/* ---------- panels ---------- */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow)}
.panel-h{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--line)}
.panel-h h2{margin:0; font-size:15px; font-weight:800; flex:1}
.panel-b{padding:18px}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px}
.toolbar .grow{flex:1}
@media (max-width:640px){ .toolbar label.grow{flex-basis:100%} }
.stack{display:flex; flex-direction:column; gap:18px}
.grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.tbl-wrap{overflow-x:auto}
/* Recent vouchers on the Dashboard gets its own vertical scrollbar, capped to a fixed height, so
   scrolling through the list never drags the ledger-strip (cash/revenue cards up top) or the
   Your modules panel on the side along with it — only this box scrolls. */
.dash-recent{max-height:420px; overflow-y:auto}
/* .tbl-wrap.dash-recent (two classes) outranks the plain "table.t th" background rules further
   down the sheet, so the frozen header row gets a genuinely opaque backing instead of their
   translucent one — otherwise rows scrolling underneath show through the header text. */
.tbl-wrap.dash-recent thead th{position:sticky; top:0; z-index:1; background:var(--surface-solid); -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%); box-shadow:0 1px 0 var(--line)}
table.t{width:100%; border-collapse:collapse; font-size:13.5px}
table.t th{font-size:12px; text-align:left; color:var(--muted); font-weight:700; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--surface-2); white-space:nowrap}
table.t th.num{text-align:right}
table.t td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
table.t td b{white-space:nowrap}
table.t tr:last-child td{border-bottom:none}
table.t tbody tr.click{cursor:pointer}
table.t tbody tr{transition:background .15s ease, color .15s ease, box-shadow .15s ease}
table.t tbody tr.click:hover td{background:color-mix(in srgb, var(--brand) 13%, transparent); color:var(--brand)}
table.t tbody tr.click:hover td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
table.t tbody tr.click:active td{background:color-mix(in srgb, var(--brand) 20%, transparent)}
table.t tfoot td{font-weight:800; border-top:2px solid var(--line-strong); background:var(--surface-2)}
table.list-t th, table.list-t td{padding-left:clamp(3px, calc(12px - (var(--cols,6) - 6) * 2.2px), 12px); padding-right:clamp(3px, calc(12px - (var(--cols,6) - 6) * 2.2px), 12px); padding-top:7px; padding-bottom:7px}
table.list-t{width:auto; min-width:100%; font-size:12px}
table.list-t th, table.list-t td{white-space:nowrap}
table.list-t th{font-size:11px}
/* column filter: funnel button in each list header + its popover */
.th-f{display:inline-flex; align-items:center; gap:4px}
.colf-btn{display:inline-grid; place-items:center; width:20px; height:20px; padding:0; border:1px solid transparent; border-radius:5px; background:none; color:inherit; opacity:.55; cursor:pointer; transition:opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease}
.colf-btn svg{width:12px; height:12px}
.colf-btn:hover{opacity:1; background:rgba(255,255,255,.7); border-color:var(--line-strong)}
.colf-btn.on{opacity:1; color:#fff; background:linear-gradient(180deg, #23A35A 0%, #138A44 55%, #0B6E34 100%); border-color:#0E7A3B; box-shadow:0 2px 6px rgba(19,138,68,.4)}
.colf-pop{position:fixed; z-index:200; width:250px; max-width:calc(100vw - 16px); padding:10px; border-radius:12px; background:var(--surface-solid); color:var(--ink); border:1px solid var(--line-strong); box-shadow:0 14px 36px rgba(0,0,0,.22); display:flex; flex-direction:column; gap:8px; font-size:13px}
.colf-h{font-weight:800; font-size:12.5px; color:var(--deep)}
.colf-q{height:34px}
.colf-list{max-height:240px; overflow-y:auto; border:1px solid var(--line); border-radius:8px; padding:4px; background:rgba(255,255,255,.5)}
.colf-item{display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:6px; cursor:pointer; font-weight:500}
.colf-item:hover{background:color-mix(in srgb, var(--brand) 10%, transparent)}
.colf-item span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.colf-all{padding-left:10px}
.colf-foot{display:flex; justify-content:flex-end; gap:8px}
:root[data-theme="dark"] .colf-list{background:rgba(255,255,255,.04)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .colf-list{background:rgba(255,255,255,.04)} }
table.list-t .pill{padding:2px 7px; font-size:10.5px; gap:4px}
.gj-table tbody tr.gj-sep td{border-top:2px solid var(--deep)}
.gj-table tbody tr:first-child td{border-top:none}
/* Transaction Journal and General Ledger tables keep every column on one line (dates, voucher
   numbers, amounts) rather than shrinking columns to fit — the wrapper scrolls horizontally
   instead of letting amounts get clipped. */
.gj-table, .gl-table{width:auto; min-width:100%}
.code{font-variant-numeric:tabular-nums; color:var(--muted); font-weight:600; white-space:nowrap}
.empty{padding:44px 20px; text-align:center; color:var(--muted)}
.empty b{display:block; color:var(--ink); font-size:15px; margin-bottom:4px}

/* status pills */
.pill{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700; white-space:nowrap}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.s-Draft{background:color-mix(in srgb, var(--info-soft) 55%, var(--status-neutral-soft)); color:var(--info); border:1px solid var(--status-line)}
.s-For-verification{background:var(--info-soft); color:var(--info)}
.s-Verified{background:var(--warn-soft); color:var(--warn)}
.s-Approved{background:var(--status-approved-soft); color:var(--status-approved)}
.s-Returned{background:var(--warn-soft); color:var(--warn)}
.s-Cancelled{background:var(--danger-soft); color:var(--danger)}
.s-Rejected{background:var(--danger-soft); color:var(--danger)}
.pill.pending{background:var(--warn-soft); color:var(--warn)}
.chip{display:inline-block; padding:2px 8px; border-radius:6px; background:var(--leaf-soft); color:var(--brand); font-size:11.5px; font-weight:700; margin:2px 3px 2px 0}
.chip.grey{background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}
.rpt-net-badge{font-family:inherit; cursor:pointer}
.rpt-net-badge:hover{border-color:var(--brand); color:var(--brand)}

/* dashboard */
.ledger-strip{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow); overflow:hidden}
.ledger-strip > div{padding:18px 20px; border-right:1px solid var(--line)}
.ledger-strip > div:last-child{border-right:none}
.ledger-strip .k{font-size:12.5px; color:var(--muted); font-weight:600}
.ledger-strip .v{font-size:24px; font-weight:800; letter-spacing:-.02em; margin-top:2px; font-variant-numeric:tabular-nums}
.ledger-strip .v small{font-size:13px; color:var(--muted); font-weight:600; margin-right:3px}
.ledger-strip > div.act{background:var(--deep); color:#fff; cursor:pointer}
.ledger-strip > div.act .k{color:#9BE8B2}
@media (max-width:900px){ .ledger-strip{grid-template-columns:1fr} .ledger-strip > div{border-right:none; border-bottom:1px solid var(--line)} .ledger-strip > div:last-child{border-bottom:none} }
.two{display:grid; grid-template-columns:1.6fr 1fr; gap:18px}
/* ---------- dashboard: KPI strip, monthly trend chart, voucher status ---------- */
.ledger-strip.dash-kpi{grid-template-columns:repeat(4,1fr)}
.kpi-sub{font-size:11.5px; color:var(--muted); margin-top:2px}
@media (max-width:900px){ .ledger-strip.dash-kpi{grid-template-columns:1fr} }
@media (max-width:1100px) and (min-width:901px){ .ledger-strip.dash-kpi{grid-template-columns:repeat(2,1fr)} .ledger-strip.dash-kpi > div:nth-child(2){border-right:none} .ledger-strip.dash-kpi > div:nth-child(-n+2){border-bottom:1px solid var(--line)} }
:root{--c-sales:#2a78d6; --c-exp:#eb6834; --c-ni:#1baf7a; --chart-surface:#fcfcfb}
:root[data-theme="dark"]{--c-sales:#3987e5; --c-exp:#d95926; --c-ni:#199e70; --chart-surface:#1a1a19}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--c-sales:#3987e5; --c-exp:#d95926; --c-ni:#199e70; --chart-surface:#1a1a19} }
.trend-legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; font-weight:600; color:var(--ink)}
.trend-legend span{display:inline-flex; align-items:center; gap:6px}
.sw{display:inline-block; width:10px; height:10px; border-radius:3px; flex:none}
.sw.sales{background:var(--c-sales)} .sw.exp{background:var(--c-exp)}
.sw.ni{height:3px; width:14px; border-radius:2px; background:var(--c-ni)}
.trend-wrap{position:relative; overflow-x:auto}
svg.trend{display:block; width:100%; min-width:540px; height:auto; font-family:inherit}
svg.trend .tg{stroke:var(--line); stroke-width:1}
svg.trend .t0{stroke:var(--line-strong); stroke-width:1}
svg.trend .tl{fill:var(--muted); font-size:11px; font-variant-numeric:tabular-nums}
svg.trend .t-band{fill:transparent}
svg.trend .t-band.on{fill:color-mix(in srgb, var(--ink) 6%, transparent)}
svg.trend .t-sales{fill:var(--c-sales)} svg.trend .t-exp{fill:var(--c-exp)}
svg.trend .t-ni{fill:none; stroke:var(--c-ni); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
svg.trend .t-ni-dot{fill:var(--c-ni); stroke:var(--chart-surface); stroke-width:2}
svg.trend .t-hit{fill:transparent; cursor:crosshair}
.trend-tip{position:absolute; top:4px; z-index:2; min-width:190px; padding:9px 11px; border-radius:10px; background:var(--surface-solid); color:var(--ink); border:1px solid var(--line-strong); box-shadow:0 10px 26px rgba(0,0,0,.18); font-size:12.5px; pointer-events:none}
.trend-tip b{display:block; margin-bottom:5px}
.trend-tip div{display:flex; align-items:center; gap:7px; padding:1px 0}
.trend-tip div span{margin-left:auto; padding-left:14px; font-weight:700; font-variant-numeric:tabular-nums}
.trend-tip .ni-row{border-top:1px solid var(--line); margin-top:4px; padding-top:5px}
.st-table td,.st-table th{white-space:nowrap}
.st-count{min-width:30px; height:26px; padding:0 9px; border-radius:13px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font-weight:800; font-size:12.5px; cursor:pointer; transition:background .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease}
.st-count:hover{background:var(--brand); border-color:var(--brand); color:#fff; transform:translateY(-1px); box-shadow:0 6px 14px color-mix(in srgb, var(--brand) 35%, transparent)}
.st-count.s-Returned{border-color:#F07F12; color:#C2610A}
.st-count.s-Returned:hover{background:#F07F12; border-color:#F07F12; color:#fff; box-shadow:0 6px 14px rgba(240,127,18,.4)}
.st-zero{color:var(--muted); opacity:.6}
@media (max-width:1000px){ .two{grid-template-columns:1fr} }
.vt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.vt{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); cursor:pointer; background:var(--surface); transition:background .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, transform .1s ease}
.vt:hover{border-color:transparent; color:var(--brand); background:color-mix(in srgb, var(--brand) 16%, transparent); -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%); box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 42%, transparent) inset, 0 1px 0 rgba(255,255,255,.5) inset, 0 6px 16px color-mix(in srgb, var(--brand) 20%, transparent)}
.vt:active{transform:scale(.98)}
.vt:hover b{color:var(--brand)}
.vt:hover span{color:color-mix(in srgb, var(--brand) 75%, var(--muted))}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .vt:hover{box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 42%, transparent) inset, 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 16px color-mix(in srgb, var(--brand) 25%, transparent)} }
:root[data-theme="dark"] .vt:hover{box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 42%, transparent) inset, 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 16px color-mix(in srgb, var(--brand) 25%, transparent)}
.vt b{font-size:13.5px}
.vt span{font-size:12px; color:var(--muted)}
@media (max-width:560px){ .vt-grid{grid-template-columns:1fr 1fr} }

/* voucher editor */
.vhead{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; padding:18px 20px; border-bottom:1px solid var(--line); position:relative; background:linear-gradient(120deg, color-mix(in srgb,var(--brand) 9%,transparent), transparent 65%); box-shadow:inset 4px 0 0 var(--brand)}
.vnew-bar{display:flex; justify-content:flex-end; padding:14px 20px 0}
.btn-newv{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 18px; border-radius:12px; border:none; font-family:inherit; font-size:14px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; color:#fff; background:var(--brand); cursor:pointer; box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 6px 18px color-mix(in srgb, var(--brand) 38%, transparent)}
.btn-newv:hover{background:var(--brand-hover)}
@media (max-width:640px){ .btn-newv{height:32px; padding:0 13px; font-size:12.5px; border-radius:9px} }
.vhead .ttl{flex:1; min-width:200px}
.vhead .ttl small{color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:11px}
.vhead .ttl h2{margin:2px 0 0; font-size:22px; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--deep)}
.fields{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; padding:18px 20px}
.fields .wide{grid-column:1/-1}
table.lines thead th{background:var(--leaf-soft); color:var(--deep); text-transform:uppercase; font-size:11px; letter-spacing:.03em}
table.lines td{padding:6px 8px}
table.lines td .in{height:36px}
table.lines .acct{min-width:260px}
table.lines .amt{width:150px}
table.lines .amt .in{text-align:right; font-variant-numeric:tabular-nums}
.acct-name{font-size:11.5px; color:var(--muted); padding:2px 2px 0; min-height:15px}
.acct-name.bad{color:var(--danger)}
.diff{font-size:12.5px; font-weight:700}
.diff.ok{color:var(--brand)} .diff.no{color:var(--danger)}
.actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; padding:16px 20px; border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg)}
.trail{list-style:none; margin:0; padding:0}
.trail li{display:grid; grid-template-columns:14px 1fr; gap:10px; padding:8px 0; position:relative}
.trail li::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--leaf); margin-top:5px}
.trail li div{font-size:13px}
.trail li small{display:block; color:var(--muted)}

/* chat */
.chat-shell{display:grid; grid-template-columns:300px 1fr; height:calc(100vh - 170px); min-height:420px; max-height:760px; overflow:hidden; padding:0}
.chat-list{overflow-y:auto; border-right:1px solid var(--line); padding:8px}
.chat-row{display:flex; align-items:center; gap:11px; padding:10px; border-radius:12px; cursor:pointer; position:relative}
.chat-row:hover{background:var(--surface-2)}
.chat-row.on{background:color-mix(in srgb, var(--brand) 14%, transparent)}
.chat-av{position:relative; flex:none}
.dot-status{position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:#9CA6A0; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line)}
.dot-status.on{background:#2EA84A}
.chat-meta{flex:1; min-width:0; display:flex; flex-direction:column}
.chat-meta b{font-size:13.5px}
.chat-meta span{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chat-row .badge{flex:none}
.chat-empty-pane{display:flex; align-items:center; justify-content:center; color:var(--muted); text-align:center}
.chat-empty-pane b{display:block; color:var(--ink); margin-bottom:4px}
.chat-thread{display:flex; flex-direction:column; min-width:0; min-height:0}
.chat-thread-h{display:flex; align-items:center; gap:11px; padding:14px 18px; border-bottom:1px solid var(--line)}
.chat-thread-h b{display:block; font-size:14px}
.chat-thread-h .note{font-size:12px}
.chat-msgs{flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:10px}
.bubble{max-width:72%; align-self:flex-start; display:flex; flex-direction:column; gap:3px}
.bubble.me{align-self:flex-end; align-items:flex-end}
.bubble-text{padding:9px 13px; border-radius:16px; background:var(--surface-2); color:var(--ink); font-size:13.5px; line-height:1.45; white-space:pre-wrap; word-break:break-word}
.bubble.me .bubble-text{background:var(--brand); color:#fff; border-bottom-right-radius:4px}
.bubble:not(.me) .bubble-text{border-bottom-left-radius:4px}
.bubble-time{font-size:10.5px; color:var(--muted); padding:0 4px}
.chat-compose{display:flex; gap:10px; padding:14px 18px; border-top:1px solid var(--line)}
.chat-compose .in{flex:1}
.chat-compose .btn{width:44px; padding:0; justify-content:center}
.show-mobile{display:none}
@media (max-width:760px){
  .chat-shell{grid-template-columns:1fr; height:calc(100vh - 150px)}
  .chat-list.hide-mobile{display:none}
  .chat-empty-pane{display:none}
  .show-mobile{display:inline-flex}
}
.sign-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:0 20px 18px}
.sign{background:var(--leaf-soft); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; border-top:2px solid var(--brand)}
.sign small{display:block; color:var(--muted); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.03em}
.sign b{font-size:13.5px; color:var(--deep)}
@media (max-width:640px){ .sign-row{grid-template-columns:1fr} }

/* coa */
table.coa tr.major td{background:var(--leaf-soft); font-weight:800; color:var(--deep); font-size:14px}
:root[data-theme="dark"] table.coa tr.major td{color:var(--ink)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) table.coa tr.major td{color:var(--ink)} }
/* account class header rows get a neutral grey band instead of the pink tint */
:root[data-color="pink"] :is(table.coa tr.major td, table.list-t thead th){background:rgba(110,110,118,.16)}
:root[data-theme="dark"][data-color="pink"] :is(table.coa tr.major td, table.list-t thead th){background:rgba(255,255,255,.08)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"])[data-color="pink"] :is(table.coa tr.major td, table.list-t thead th){background:rgba(255,255,255,.08)} }
:root[data-theme="dark"] .acct-pick-maj{color:var(--ink)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .acct-pick-maj{color:var(--ink)} }
table.coa td.acts{white-space:nowrap; text-align:right; width:1%}
.btn.plus{width:30px; padding:0; justify-content:center; color:var(--brand); border:1px solid color-mix(in srgb,var(--brand) 35%,transparent); background:var(--surface)}
.btn.plus:hover{background:var(--brand); color:#fff}
.plus-gap{display:inline-block; width:30px}
.coa-toggle{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0; margin:0 4px -3px 0; border:none; background:transparent; color:var(--muted); cursor:pointer; border-radius:5px; vertical-align:middle}
.coa-toggle svg{width:14px; height:14px; transition:transform .12s ease}
.coa-toggle:hover{background:var(--leaf-soft); color:var(--brand)}
.coa-toggle svg{transform:rotate(90deg)}
.coa-toggle.collapsed svg{transform:rotate(0deg)}
.coa-toggle-gap{display:inline-block; width:20px; margin-right:4px}
.acct-pick{display:flex; align-items:center; text-align:left; cursor:pointer; font-weight:500; background:var(--surface)}
.acct-pick:disabled{cursor:default; opacity:.7}
.acct-pick .ph{color:var(--muted); font-weight:400}
.acct-pick-list{max-height:min(50vh,420px); overflow-y:auto; margin:0 -20px; padding:0 20px}
.acct-pick-maj{padding:8px 10px; margin:4px 0 2px; font-size:11.5px; font-weight:800; color:var(--deep); text-transform:uppercase; letter-spacing:.02em; background:var(--leaf-soft); border-radius:var(--r-sm)}
.acct-pick-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 8px; border-radius:8px; cursor:pointer}
.acct-pick-row:hover{background:var(--surface-2)}
.acct-pick-row .nm{font-size:13.5px}
.acct-pick-row .nm small{display:block; color:var(--muted); font-weight:500; font-size:11.5px}
.acct-pick-row .cd{color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; flex:none}
.acct-pick-empty{padding:24px 4px; text-align:center; color:var(--muted); font-size:13px}
.kv{display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; font-size:13.5px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px}
.acct-choice{display:grid; gap:12px}
.acct-choice-card{display:flex; flex-direction:column; gap:5px; align-items:flex-start; text-align:left; width:100%; padding:16px 18px; border:1.5px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface); cursor:pointer; font-family:inherit}
.acct-choice-card:hover{border-color:var(--brand); background:var(--leaf-soft)}
.acct-choice-card b{font-size:15px; color:var(--deep)}
.acct-choice-card span{font-size:12.5px; color:var(--muted); font-weight:500; line-height:1.4}
.kv span{color:var(--muted); font-weight:600}
.lvl-1 td{font-weight:800; background:var(--surface-2)}
.lvl-2 td{font-weight:700}
.ind{display:inline-block}

/* reports */
.rpt{max-width:900px; margin:0 auto}
.rpt:has(table.t){max-width:none}
#rptBody table.t th, #rptBody table.t td{white-space:nowrap}
/* Description is the one open-ended column in these two tables — let it wrap within a capped
   width instead of stretching the table (and pushing Debit/Credit/Balance off screen). */
.rpt{overflow:hidden}
.rpt-head{text-align:center; padding:0 0 10px}
.rpt-head img.letterhead{display:block; width:100%; height:auto; margin:0 0 10px}
.rpt-head h4{margin:10px 0 0; font-size:23px; font-weight:800; letter-spacing:-.01em}
.rpt-head p{margin:3px 0 0; color:var(--muted); font-size:13px}
.gl-table tr.gl-acct-head th{background:var(--brand); color:#fff; text-align:left; font-size:14px; font-weight:800; padding:11px 14px; white-space:nowrap; border-bottom:none}
table.r{width:100%; border-collapse:collapse; font-size:13.5px}
table.r thead th{padding:4px 14px 10px; font-size:11.5px; font-weight:700; color:var(--muted); text-align:right; border-bottom:1px solid var(--line)}
table.r thead th:first-child{text-align:left}
.acct-link{color:inherit; text-decoration:none; cursor:pointer; border-radius:4px; transition:color .15s ease}
.acct-link:hover{color:var(--brand); text-decoration:underline; text-underline-offset:3px}
@media print{ .acct-link{color:inherit !important; text-decoration:none !important} }
table.r td{padding:6px 14px}
table.r tr.sec td{font-weight:800; font-size:14px; padding-top:16px; color:var(--brand)}
table.r tr.grp td{font-weight:700}
table.r tr.tot td{font-weight:800; border-top:1px solid var(--line-strong)}
table.r tr.gtot td{font-weight:800; border-top:1px solid var(--ink); border-bottom:3px double var(--ink); font-size:14.5px}
table.r tr.gtot td:first-child{text-transform:uppercase; letter-spacing:.02em}
table.r tr.chk td{color:var(--muted); font-size:12px}

/* modal & toast */
.modal-bg{position:fixed; inset:0; background:rgba(5,25,12,.45); display:grid; place-items:center; z-index:100; padding:16px}
:root[data-color="pink"] .modal-bg{background:rgba(24,4,14,.45)}
.modal{background:var(--surface); border-radius:var(--r-lg); width:100%; max-width:560px; max-height:calc(100vh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,.35)}
.modal-h,.modal-f{flex:none}
.modal.wide{max-width:720px}
.modal-h{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center}
.modal-h h3{margin:0; font-size:16px; font-weight:800; flex:1}
.modal-b{padding:18px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:14px}
.modal-f{padding:14px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px}
/* ---------- calendar notes page ---------- */
.cal-page{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:18px; align-items:start}
@media (max-width:1000px){ .cal-page{grid-template-columns:1fr} }
.cal-head h2{min-width:170px; text-align:center}
.cal-head .btn svg{width:16px; height:16px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.cal-wd{text-align:center; font-size:11.5px; font-weight:700; color:var(--muted); padding:2px 0 4px}
.cal-cell{position:relative; aspect-ratio:1.25; min-height:44px; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:600; font-size:14px; cursor:pointer; font-variant-numeric:tabular-nums; display:flex; align-items:flex-start; justify-content:flex-start; padding:7px 9px; transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease}
.cal-cell.blank{border:none; background:none; cursor:default}
.cal-cell:not(.blank):hover{border-color:var(--brand); background:color-mix(in srgb, var(--brand) 10%, var(--surface)); transform:translateY(-1px)}
.cal-cell.today{border:2px solid var(--brand); font-weight:800}
.cal-cell.sel{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 6px 16px color-mix(in srgb, var(--brand) 38%, transparent)}
.cal-count{position:absolute; right:6px; bottom:6px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; font-style:normal; font-size:10.5px; font-weight:800; line-height:18px; text-align:center; color:#fff; background:linear-gradient(180deg, #23A35A 0%, #138A44 55%, #0B6E34 100%); box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(19,138,68,.45)}
@media (max-width:560px){ .cal-cell{aspect-ratio:1; padding:5px; font-size:12.5px} .cal-count{right:3px; bottom:3px} }
.note-list{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px}
.note-list.scroll{overflow-y:auto; padding-right:6px; scroll-behavior:smooth; overscroll-behavior:contain}
.note-item{flex:none; display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; border:1px solid var(--line); background:var(--surface)}
.note-item.editing{border-color:var(--brand)}
.note-item.editing .in{flex:1; height:34px}
.note-no{flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff; background:var(--brand)}
.note-txt{flex:1; min-width:0; white-space:pre-wrap; word-break:break-word; font-weight:500}
.note-ic{flex:none; width:28px; height:28px; border-radius:7px; border:1px solid transparent; background:none; color:var(--muted); display:grid; place-items:center; cursor:pointer; opacity:.7; transition:opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease}
.note-ic svg{width:15px; height:15px}
.note-ic:hover{opacity:1; color:var(--brand); border-color:var(--line-strong); background:rgba(255,255,255,.7)}
.note-ic.del:hover{color:#C62F35; border-color:rgba(198,47,53,.35)}
.note-add{display:flex; gap:8px}
.note-add .in{flex:1}
.up-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.up-item{width:100%; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; text-align:left; transition:border-color .15s ease, background .15s ease}
.up-item:hover{border-color:var(--brand); background:color-mix(in srgb, var(--brand) 8%, var(--surface))}
.up-item span{margin-left:auto; font-size:12px; color:var(--muted); font-weight:600}
.note-alert{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:4px 0}
.note-alert-icon{width:58px; height:58px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(180deg, #23A35A 0%, #138A44 55%, #0B6E34 100%); box-shadow:0 8px 20px rgba(19,138,68,.4)}
.note-alert-icon svg{width:30px; height:30px}
.note-alert-date{margin:0; font-weight:800; font-size:15px}
.note-alert-list{width:100%; text-align:left; margin:0; padding:12px 14px 12px 34px; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface); max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:6px}
.note-alert-list li{white-space:pre-wrap; word-break:break-word; font-weight:500}
.note-alert-list li::marker{font-weight:800; color:var(--brand)}
.approved-pop{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:6px 0 2px}
.approved-pop-icon{width:112px; height:auto; flex:none; filter:drop-shadow(0 8px 14px rgba(200,120,0,.28)); animation:thumbs-pop .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes thumbs-pop{from{transform:scale(.4) rotate(-12deg); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){ .approved-pop-icon{animation:none} }
.approved-pop p{margin:0; font-size:15px; font-weight:700; color:var(--ink)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:520px){ .row2{grid-template-columns:1fr} }
fieldset.box{border:1px solid var(--line); border-radius:var(--r); padding:8px 14px 10px; margin:0}
fieldset.box legend{font-size:12.5px; font-weight:700; color:var(--muted); padding:0 6px}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
@media (max-width:520px){ .cols{grid-template-columns:1fr} }
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--deep); color:#fff; padding:11px 18px; border-radius:10px; font-weight:600; z-index:200; box-shadow:0 10px 30px rgba(0,0,0,.3); max-width:90vw}
.toast.bad{background:var(--danger); color:#fff}
.menu{position:absolute; right:24px; top:58px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:0 14px 40px rgba(0,0,0,.18); padding:6px; z-index:50; min-width:210px}
.menu button{display:block; width:100%; text-align:left; padding:9px 12px; border:none; background:none; border-radius:7px; cursor:pointer; font-weight:600; color:var(--deep); transition:background .15s ease, box-shadow .15s ease, color .15s ease}
.menu button:hover{background:color-mix(in srgb, var(--brand) 20%, transparent); color:var(--brand); box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent) inset}
.menu .meta{padding:8px 12px 10px; border-bottom:1px solid var(--line); margin-bottom:4px; font-size:12.5px; color:var(--muted)}
.menu .meta b{display:block; color:var(--ink); font-size:14px}
.loading{height:100%; display:grid; place-items:center; color:var(--muted)}
.loading img{width:84px; height:84px; border-radius:50%; display:block; margin:0 auto 12px; animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){ .loading img{animation:none} .side{transition:none} }

/* ---------- glass theme ---------- */
body{background:var(--bg-grad); background-color:var(--bg)}
.main{position:relative}
.main::after{content:""; position:fixed; inset:0; background:var(--bgart) center/cover no-repeat; opacity:1; pointer-events:none; z-index:0}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .main::after{opacity:.06} }
:root[data-theme="dark"] .main::after{opacity:.06}
.top,.content{position:relative; z-index:1}
.panel,.ledger-strip,.vt,.menu{background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-border); box-shadow:var(--shadow)}
.top,.side{-webkit-backdrop-filter:blur(26px) saturate(180%); backdrop-filter:blur(26px) saturate(180%); box-shadow:0 1px 0 rgba(255,255,255,.9) inset}
.top{background:var(--topart) center/cover no-repeat}
/* top bar art has saturated magenta waves at both ends — near-black title with a white halo, and solid white chips for the buttons */
:root[data-color="pink"] .top h1{color:#140309; text-shadow:0 0 2px #fff, 0 0 6px rgba(255,255,255,.95), 0 0 12px rgba(255,255,255,.7)}
:root[data-color="pink"] .top .menu-btn{color:#140309; background:rgba(255,255,255,.8); border-color:rgba(255,255,255,.95)}
:root[data-color="pink"] .topbar-msg{color:#140309; background:rgba(255,255,255,.8); border-color:rgba(255,255,255,.95); box-shadow:0 2px 8px rgba(90,10,45,.18)}
:root[data-color="pink"] .topbar-msg:hover{background:#fff; color:var(--brand)}
:root[data-color="pink"] .who{background:rgba(255,255,255,.8); border-color:rgba(255,255,255,.95); box-shadow:0 2px 8px rgba(90,10,45,.18)}
:root[data-color="pink"] .who span{color:#140309}
:root[data-color="pink"] .who:hover{background:var(--brand); border-color:var(--brand)}
:root[data-color="pink"] .who:hover span{color:#fff}
:root[data-theme="dark"][data-color="pink"] .top h1{color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6)}
:root[data-theme="dark"][data-color="pink"] :is(.top .menu-btn, .topbar-msg, .who){background:rgba(26,6,15,.55); border-color:rgba(255,255,255,.18); color:#fff}
:root[data-theme="dark"][data-color="pink"] .who span{color:#fff}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"])[data-color="pink"] .top h1{color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6)} :root:not([data-theme="light"])[data-color="pink"] :is(.top .menu-btn, .topbar-msg, .who){background:rgba(26,6,15,.55); border-color:rgba(255,255,255,.18); color:#fff} :root:not([data-theme="light"])[data-color="pink"] .who span{color:#fff} }
.side{background:var(--sidebart) center top/cover no-repeat}
.top{border-bottom:1px solid rgba(255,255,255,.8)}
.side{border-right:1px solid rgba(255,255,255,.8)}
.ledger-strip > div{border-color:var(--line)}
.ledger-strip > div.act{background:linear-gradient(150deg,rgba(14,110,52,.95),rgba(8,70,34,.95))}
.modal{background:var(--glass-strong); -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%); border:1px solid var(--glass-border)}
.modal-bg{background:rgba(4,20,10,.35); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.actions{background:transparent}
table.t th{background:rgba(255,255,255,.25)}
.btn{background:var(--surface); border-color:var(--line-strong)}
.btn.ghost{background:transparent}
.btn.primary{background:linear-gradient(180deg,#14963A,#0A7A26); border-color:transparent; box-shadow:0 4px 12px rgba(10,122,38,.25)}
.btn.primary:hover{background:linear-gradient(180deg,#119033,#086620)}
.who{background:rgba(255,255,255,.65); border-color:rgba(255,255,255,.9)}
.toast{background:rgba(10,58,26,.88); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.toast.bad{background:rgba(180,35,40,.92)}
:root[data-color="pink"] .ledger-strip > div.act{background:linear-gradient(150deg,rgba(166,0,88,.95),rgba(110,0,56,.95))}
:root[data-color="pink"] .modal-bg{background:rgba(24,4,14,.35)}
:root[data-color="pink"] .btn.primary{background:linear-gradient(180deg,#F0168A,#D6006F); box-shadow:0 4px 12px rgba(214,0,111,.25)}
:root[data-color="pink"] .btn.primary:hover{background:linear-gradient(180deg,#E6007E,#B8005F)}
:root[data-color="pink"] .auth-form .btn.primary{background:linear-gradient(115deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 32%), linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff) 0%, var(--brand) 48%, color-mix(in srgb, var(--brand) 78%, #000) 100%); box-shadow:0 10px 26px color-mix(in srgb, var(--brand) 48%, transparent), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 5px color-mix(in srgb, var(--brand) 40%, #000)}
:root[data-color="pink"] .auth-form .btn.primary:hover{background:linear-gradient(115deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 32%), linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff) 0%, var(--brand) 48%, color-mix(in srgb, var(--brand) 78%, #000) 100%); filter:brightness(1.07); box-shadow:0 14px 34px color-mix(in srgb, var(--brand) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 5px color-mix(in srgb, var(--brand) 40%, #000)}
:root[data-color="pink"] .toast{background:rgba(122,0,64,.88)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) table.t th{background:rgba(255,255,255,.03)} }
:root[data-theme="dark"] table.t th{background:rgba(255,255,255,.03)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .top,:root:not([data-theme="light"]) .side{box-shadow:0 1px 0 rgba(255,255,255,.06) inset} :root:not([data-theme="light"]) .top{background:linear-gradient(rgba(6,20,12,.68),rgba(6,20,12,.68)), var(--topart) center/cover no-repeat; border-bottom-color:rgba(255,255,255,.1)} :root:not([data-theme="light"]) .side{background:linear-gradient(rgba(6,20,12,.68),rgba(6,20,12,.68)), var(--sidebart) center top/cover no-repeat; border-right-color:rgba(255,255,255,.1)} }
:root[data-theme="dark"] .top,:root[data-theme="dark"] .side{box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
:root[data-theme="dark"] .top{background:linear-gradient(rgba(6,20,12,.68),rgba(6,20,12,.68)), var(--topart) center/cover no-repeat}
:root[data-theme="dark"] .side{background:linear-gradient(rgba(6,20,12,.68),rgba(6,20,12,.68)), var(--sidebart) center top/cover no-repeat}
:root[data-theme="dark"] .top{border-bottom-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] .side{border-right-color:rgba(255,255,255,.1)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"])[data-color="pink"] .top{background:linear-gradient(rgba(26,6,15,.68),rgba(26,6,15,.68)), var(--topart) center/cover no-repeat} :root:not([data-theme="light"])[data-color="pink"] .side{background:linear-gradient(rgba(26,6,15,.68),rgba(26,6,15,.68)), var(--sidebart) center top/cover no-repeat} }
:root[data-theme="dark"][data-color="pink"] .top{background:linear-gradient(rgba(26,6,15,.68),rgba(26,6,15,.68)), var(--topart) center/cover no-repeat}
:root[data-theme="dark"][data-color="pink"] .side{background:linear-gradient(rgba(26,6,15,.68),rgba(26,6,15,.68)), var(--sidebart) center top/cover no-repeat}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .panel,.ledger-strip,.vt,.menu,.top,.modal,.auth-form{background:var(--glass-strong)}
}

#print{display:none}
@media print{
  @page{margin:10mm}
  body{background:#fff; color:#000}
  #app,.toast,.modal-bg{display:none!important}
  #print{display:block}
  #print *{box-shadow:none!important}
  /* Reports stay plain black-and-white to save ink. A voucher print (#print.rich) keeps its
     real colors — the forced black/transparent above is skipped for it — and we force browsers
     to actually paint background colors/images instead of silently dropping them to save ink. */
  #print:not(.rich) *{color:#000!important; background:transparent!important}
  #print.rich, #print.rich *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  #print table.r td,#print table.t td,#print table.t th{padding:4px 8px}
}