:root{--bg:#0F0F11;--s1:#1C1C1E;--s2:#2C2C2E;--line:#2C2C2E;--hair:rgba(255,255,255,.06);--text:#F2F2F5;--soft:#DCD8E4;--sub:#98989F;--faint:#636367;--accent:#4B6BFF;--soft2:#8AA0FF;--abg:#232C4C;--navy:#191B29;--green:#79CBA8;--amber:#E8BE7C;--red:#FF8A6B}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 'Plus Jakarta Sans',system-ui,sans-serif}
a{color:var(--soft2)}
.shell{display:flex;min-height:100vh}
nav.side{width:220px;flex:0 0 220px;border-right:1px solid var(--hair);padding:18px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px}
nav.side .brand{font-weight:800;font-size:17px;padding:4px 10px 16px;letter-spacing:-.2px}
nav.side .brand small{display:block;color:var(--faint);font-weight:600;font-size:11px;letter-spacing:.4px}
.nav{display:block;width:100%;text-align:left;background:none;border:0;color:var(--sub);font:600 13.5px inherit;font-family:inherit;padding:9px 10px;border-radius:10px;cursor:pointer}
.nav:hover{background:var(--s1);color:var(--text)}.nav.on{background:#F2F2F5;color:#0F0F11}
nav.side .foot{margin-top:auto;padding:10px;color:var(--faint);font-size:12px}
main{flex:1;min-width:0;padding:22px 28px 60px;max-width:1240px}
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
h1{font-size:26px;font-weight:700;margin:0;letter-spacing:-.03em}h2{font-size:13px;margin:0 0 14px;font-weight:700;color:var(--sub)}h3{font-size:12px;margin:0 0 8px;color:var(--faint);font-weight:700}
.mtabs{display:none}
@media (max-width:900px){nav.side{display:none}.mtabs{display:flex;gap:6px;overflow-x:auto;padding:12px 16px 4px;position:sticky;top:0;background:var(--bg);z-index:5}main{padding:14px 16px 60px}}
.mtabs .nav{white-space:nowrap;width:auto;border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.card{background:var(--s1);border-radius:22px;padding:20px 22px;margin-bottom:12px;min-width:0}
.grid{display:grid;gap:12px;margin-bottom:12px}.grid>.card{margin-bottom:0}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3{grid-template-columns:minmax(0,1fr)}}
.tile{background:var(--s1);border-radius:20px;padding:18px 20px;min-width:0}
.tile .l{color:var(--sub);font-size:12.5px}.tile .v{font-size:28px;font-weight:700;letter-spacing:-.04em;margin:6px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.d{font-size:12px;font-weight:700}.up{color:var(--green)}.down{color:var(--red)}.flat{color:var(--sub)}
.sub{color:var(--sub);font-size:12.5px}.faint{color:var(--faint)}
.seg{display:inline-flex;gap:8px}
.seg button{background:var(--s1);border:0;color:var(--sub);font:600 12.5px inherit;font-family:inherit;padding:9px 15px;border-radius:999px;cursor:pointer}.seg button.on{background:#F2F2F5;color:#0F0F11}
input,select,textarea{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:11px 14px;font:inherit;outline:none;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}textarea{min-height:90px;resize:vertical;width:100%}
label{display:block;font-size:12px;color:var(--sub);margin:10px 0 4px;font-weight:600}
.b{background:var(--accent);color:#fff;border:0;border-radius:14px;padding:11px 16px;font:700 13px inherit;font-family:inherit;cursor:pointer;white-space:nowrap}
.b.dark{background:var(--s2);color:var(--soft)}.b.white{background:#F2F2F5;color:#0F0F11}.b.red{background:#3A2733;color:var(--red)}.b:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}.row>.grow{flex:1;min-width:160px}
.pill{display:inline-block;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:700;background:var(--s2);color:var(--sub);white-space:nowrap}
.pill.sent,.pill.active,.pill.paid{background:#1E3630;color:var(--green)}.pill.trial{background:var(--abg);color:var(--soft2)}
.pill.handed,.pill.grace,.pill.no_budget,.pill.created{background:#3a3122;color:var(--amber)}.pill.blocked,.pill.error,.pill.expired{background:#3a2733;color:var(--red)}
table{width:100%;border-collapse:collapse;font-size:13px}td,th{text-align:left;padding:9px 8px;border-top:1px solid var(--hair);vertical-align:top}
th{color:var(--faint);font-weight:600;font-size:12px;border-top:0;white-space:nowrap}th.s{cursor:pointer}th.s:hover{color:var(--text)}td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tr.click{cursor:pointer}tr.click:hover td{background:#18181b}
.scroll{overflow-x:auto}
pre{white-space:pre-wrap;word-break:break-word;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;font:12px/1.5 ui-monospace,Menlo,monospace;color:#cfd0d6;max-height:420px;overflow:auto;margin:6px 0 0}
details summary{cursor:pointer;color:var(--soft2);font-weight:600;font-size:12.5px;margin-top:6px}
.bubble{background:var(--s2);border-radius:16px;padding:9px 13px;max-width:560px;margin:6px 0;width:fit-content}.bubble.me{background:var(--accent);margin-left:auto}
.note{font-size:12.5px;margin-top:8px}.ok{color:var(--green)}.bad{color:var(--red)}.warn{color:var(--amber)}
.hide{display:none!important}
.chart{position:relative}.chart svg{display:block;width:100%;overflow:visible}
.chart .bar{fill:var(--accent);opacity:.7;pointer-events:none}.chart .hit{cursor:crosshair;outline:none}.chart .bar.hl,.chart .hit:hover+.bar{opacity:1;fill:var(--soft2)}
.chart .axis{fill:var(--faint);font-size:10px}.chart .grid{stroke:var(--hair)}
.tip{position:absolute;pointer-events:none;background:#2C2C2E;border:0;color:#F2F2F5;border-radius:10px;padding:6px 10px;font-size:12px;white-space:nowrap;transform:translate(-50%,-110%);z-index:3}
.tip b{display:block;font-size:13.5px}
.hbar{height:8px;background:var(--s2);border-radius:4px}.hbar i{display:block;height:8px;background:var(--accent);border-radius:4px}
.drawer{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:20;display:flex;justify-content:flex-end}
.drawer .panel{width:min(760px,100%);height:100%;overflow:auto;background:var(--bg);border-left:1px solid var(--line);padding:20px}
.login{max-width:420px;margin:12vh auto;padding:0 16px}
.vendor{border:1px solid transparent}.vendor.on{border-color:var(--accent)}
.hero{background:#F2F2F5;color:#0F0F11;border-radius:24px;padding:22px 24px;margin-bottom:12px}.hero .l{color:#6E6E73;font-size:12.5px}.hero .v{font-size:36px;font-weight:700;letter-spacing:-.04em;margin:8px 0 2px;font-variant-numeric:tabular-nums}
.hero .chart .bar{fill:#0F0F11}.hero .chart .axis{fill:#6E6E73}.hero .chart .grid{stroke:rgba(0,0,0,.06)}
.navy{background:var(--navy)!important}
.label{font-size:13px;font-weight:700;color:var(--sub);margin:22px 4px 10px}
.empty{color:var(--sub);padding:18px 4px;text-align:center}
.cnt{display:inline-block;min-width:18px;padding:0 6px;margin-left:6px;border-radius:999px;background:var(--coral,#FF8A6B);color:#0F0F11;font-size:11px;line-height:18px;text-align:center}.nav.on .cnt{background:#0F0F11;color:#F2F2F5}.cnt.hide{display:none}