@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0f0f11;--bg2:#16161a;--bg3:#1e1e24;--bg4:#26262e;
  --border:#2e2e38;--border2:#3a3a46;
  --text:#e8e6f0;--text2:#9896a8;--text3:#5e5c6e;
  --accent:#7c6aff;--accent2:#5b4de0;--accent-glow:rgba(124,106,255,0.15);
  --green:#3ecf8e;--green-bg:rgba(62,207,142,0.1);--green-b:rgba(62,207,142,0.3);
  --amber:#f59e0b;--amber-bg:rgba(245,158,11,0.1);--amber-b:rgba(245,158,11,0.3);
  --red:#ef4444;--red-bg:rgba(239,68,68,0.1);--red-b:rgba(239,68,68,0.3);
  --blue:#60a5fa;--blue-bg:rgba(96,165,250,0.1);--blue-b:rgba(96,165,250,0.3);
  --purple:#a78bfa;--purple-bg:rgba(167,139,250,0.1);--purple-b:rgba(167,139,250,0.3);
  --r:10px;--r-sm:6px;--r-lg:14px;
  font-family:'DM Sans',sans-serif;font-size:13px;
}

html,body{height:100%;background:var(--bg);color:var(--text);overflow:hidden}

/* ── LAYOUT ── */
.app{display:flex;height:calc(100vh - 0px);position:fixed;top:0;left:0;right:0;bottom:0}
.sidebar{width:226px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;height:100%}
.main{flex:1;overflow-y:auto;height:100%;background:var(--bg)}

/* ── SIDEBAR ── */
.s-logo{padding:18px 16px 10px;display:flex;align-items:center;gap:10px}
.s-mark{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.s-name{font-size:13px;font-weight:600;color:var(--text);letter-spacing:-.3px}
.s-sub{font-size:10px;color:var(--text3);margin-top:1px}
.s-sect{padding:8px 16px 3px;font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.09em;margin-top:4px}
.ni{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:6px;font-size:12px;color:var(--text2);cursor:pointer;transition:all .12s;margin:1px 6px;user-select:none;text-decoration:none}
.ni:hover{background:var(--bg3);color:var(--text)}
.ni.active{background:var(--accent-glow);color:var(--accent)}
.ni svg{width:14px;height:14px;flex-shrink:0;opacity:.7}
.ni.active svg{opacity:1}
.nbadge{margin-left:auto;font-size:9px;padding:1px 6px;border-radius:10px;font-weight:600}
.nb-r{background:var(--red-bg);color:var(--red)}
.nb-a{background:var(--amber-bg);color:var(--amber)}
.nb-g{background:var(--green-bg);color:var(--green)}
.nb-p{background:var(--purple-bg);color:var(--purple)}
.s-bottom{margin-top:auto;padding:10px 6px;border-top:1px solid var(--border)}

/* ── PAGES ── */
.page{display:none;padding:24px;min-height:100%}
.page.active{display:block}
.ph{margin-bottom:20px}
.ph-row{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px}
.page-title{font-size:20px;font-weight:600;color:var(--text);letter-spacing:-.4px}
.page-sub{font-size:12px;color:var(--text3);margin-top:3px}

/* ── CARDS ── */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:12px}
.card.no-pad{padding:0;overflow:hidden}
.card-t{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:12px}

/* ── STAT CARDS ── */
.sg{display:grid;gap:10px;margin-bottom:14px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.sc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px}
.sc.green{border-color:var(--green-b);background:var(--green-bg)}
.sc.amber{border-color:var(--amber-b);background:var(--amber-bg)}
.sc.red{border-color:var(--red-b);background:var(--red-bg)}
.sc.purple{border-color:var(--purple-b);background:var(--purple-bg)}
.sc.blue{border-color:var(--blue-b);background:var(--blue-bg)}
.sl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.sv{font-size:22px;font-weight:600;color:var(--text);letter-spacing:-.5px;font-family:'DM Mono',monospace;line-height:1.1}
.ss{font-size:11px;color:var(--text3);margin-top:3px}
.su{color:var(--green)}.sd{color:var(--red)}

/* ── TABLES ── */
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;padding:8px 12px;border-bottom:1px solid var(--border);font-weight:600;text-align:left;white-space:nowrap;background:var(--bg3)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--bg3);cursor:pointer}
.mono{font-family:'DM Mono',monospace;font-size:11px}

/* ── STATUS PILLS ── */
.pill{font-size:10px;padding:2px 8px;border-radius:20px;font-weight:600;white-space:nowrap;display:inline-block}
.p-paid{background:var(--green-bg);color:var(--green)}
.p-due{background:var(--amber-bg);color:var(--amber)}
.p-over{background:var(--red-bg);color:var(--red)}
.p-pend{background:var(--purple-bg);color:var(--purple)}
.p-part{background:var(--blue-bg);color:var(--blue)}
.p-draft{background:var(--bg4);color:var(--text3)}
.p-on{background:var(--green-bg);color:var(--green)}
.p-off{background:var(--red-bg);color:var(--red)}

/* ── ALERTS ── */
.alert{border-radius:var(--r);padding:13px 14px;margin-bottom:10px;display:flex;align-items:flex-start;gap:12px}
.a-over{background:var(--red-bg);border:1px solid var(--red-b)}
.a-due{background:var(--amber-bg);border:1px solid var(--amber-b)}
.a-new{background:var(--blue-bg);border:1px solid var(--blue-b)}
.a-pend{background:var(--purple-bg);border:1px solid var(--purple-b)}
.a-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px}
.a-over .a-icon{background:var(--red);color:#fff}
.a-due .a-icon{background:var(--amber);color:#000}
.a-new .a-icon{background:var(--blue);color:#fff}
.a-pend .a-icon{background:var(--purple);color:#fff}
.a-body{flex:1}
.a-title{font-size:13px;font-weight:600;margin-bottom:3px}
.a-over .a-title{color:var(--red)}.a-due .a-title{color:var(--amber)}.a-new .a-title{color:var(--blue)}.a-pend .a-title{color:var(--purple)}
.a-sub{font-size:11px;color:var(--text2);line-height:1.5}
.a-btns{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.ab{font-size:11px;padding:4px 10px;border-radius:20px;cursor:pointer;border:1px solid;font-weight:500;transition:all .12s;font-family:'DM Sans',sans-serif;background:transparent}
.ab-pay{background:var(--green) !important;color:#000 !important;border-color:var(--green) !important}
.ab-v{color:var(--text2);border-color:var(--border2)}
.ab-over{color:var(--red);border-color:var(--red-b)}
.ab-due{color:var(--amber);border-color:var(--amber-b)}
.ab-blue{color:var(--blue);border-color:var(--blue-b)}
.ab-purple{color:var(--purple);border-color:var(--purple-b)}

/* ── BUTTONS ── */
.btn{font-size:12px;padding:7px 14px;border-radius:var(--r-sm);border:1px solid var(--border2);background:transparent;color:var(--text);cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:500;transition:all .12s;white-space:nowrap}
.btn:hover{background:var(--bg3)}.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-p{background:var(--accent) !important;color:#fff !important;border-color:var(--accent) !important}
.btn-g{background:var(--green-bg) !important;color:var(--green) !important;border-color:var(--green-b) !important}
.btn-r{background:var(--red-bg) !important;color:var(--red) !important;border-color:var(--red-b) !important}
.btn-sm{font-size:11px;padding:4px 10px}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text3)}
.btn-ghost:hover{background:var(--bg3);color:var(--text2)}

/* ── FORMS ── */
input,select,textarea{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:'DM Sans',sans-serif;font-size:12px;padding:7px 10px;outline:none;transition:border-color .12s;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input::placeholder{color:var(--text3)}
label{font-size:11px;color:var(--text3);margin-bottom:4px;display:block}
.fg{margin-bottom:10px}.fg:last-child{margin-bottom:0}
.g2f{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g3f{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

/* ── LOGIN ── */
.login-wrap{display:flex;height:100vh;align-items:center;justify-content:center;background:var(--bg)}
.login-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:36px 32px;width:100%;max-width:380px}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.login-title{font-size:22px;font-weight:600;color:var(--text);letter-spacing:-.5px}
.login-sub{font-size:12px;color:var(--text3);margin-top:4px}
.login-error{background:var(--red-bg);border:1px solid var(--red-b);color:var(--red);font-size:11px;padding:8px 12px;border-radius:var(--r-sm);margin-bottom:14px;display:none}

/* ── BAR CHART ── */
.bc{display:flex;flex-direction:column;gap:6px}
.br{display:flex;align-items:center;gap:8px;font-size:11px}
.bl{min-width:90px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt{flex:1;height:5px;background:var(--bg4);border-radius:3px;overflow:hidden}
.bf{height:5px;border-radius:3px}
.bv{min-width:52px;text-align:right;color:var(--text2);font-family:'DM Mono',monospace;font-size:11px}

/* ── BALANCE BAR ── */
.bb{height:6px;background:var(--bg4);border-radius:3px;overflow:hidden;display:flex;margin:5px 0}
.bb-g{background:var(--green)}.bb-p{background:var(--purple)}.bb-a{background:var(--amber)}.bb-r{background:var(--red)}

/* ── SPARKLINE ── */
.spark{height:44px;display:flex;align-items:flex-end;gap:2px}
.spk{border-radius:2px 2px 0 0;background:var(--accent);opacity:.5;flex:1;min-height:2px}

/* ── TOGGLE ── */
.tog{width:32px;height:18px;border-radius:9px;background:var(--bg4);cursor:pointer;position:relative;flex-shrink:0;transition:background .15s}
.tog.on{background:var(--green)}
.tok{position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:white;transition:transform .15s}
.tog.on .tok{transform:translateX(14px)}

/* ── MISC ── */
.sdiv{height:1px;background:var(--border);margin:14px 0}
.pr{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px}
.pr:last-child{border-bottom:none}
.pc{width:20px;height:20px;border-radius:50%;background:var(--green-bg);border:1px solid var(--green-b);display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--green);flex-shrink:0}
.ftag{font-size:10px;padding:1px 6px;border-radius:10px;background:var(--blue-bg);color:var(--blue);font-weight:500}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{padding:4px 12px;border-radius:20px;font-size:11px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text3);transition:all .12s;font-family:inherit}
.chip:hover{background:var(--bg3);color:var(--text2)}
.chip.active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent)}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

@keyframes slideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}