:root,[data-theme='light']{color-scheme:light;--bg:#faf9f7;--panel:#ffffff;--panel2:#f6f4f1;--line:#e9e5df;--line2:#f0ece6;--txt:#1f1d1a;--mut:#77706a;--acc:#e8732c;--acc-txt:#ffffff;--acc-soft:#fdf0e7;--acc-soft-txt:#b4551c;--acc-soft-line:#f6d9c4;--ok:#e8732c;--warn:#d9481c;--bad:#c2261d;--track:#efebe5;--hover:#f3f1ed;--hover-line:#d6d0c8;--head:rgba(250,249,247,.92);--shadow:0 1px 2px rgba(31,29,26,.04);--pop:0 10px 30px rgba(0,0,0,.12);--warnbg:#fff6ef;--warnline:#f2d3bd;--warntxt:#9a3d12;--swring:rgba(0,0,0,.15);--claude:#c96442;--codex:#0f8a6c;--xai:#7c5cd6;--api:#3b6fd8}
/* Roze — factuurke [data-theme='pink'] (brand #d81b60, slate-50/100/200 roze tinten) */
[data-theme='pink']{color-scheme:light;--bg:#fdf2f8;--panel:#ffffff;--panel2:#fce7f3;--line:#f5dae8;--line2:#fce7f3;--txt:#1f1d1a;--mut:#7a6670;--acc:#d81b60;--acc-txt:#ffffff;--acc-soft:#fce4ec;--acc-soft-txt:#ad1457;--acc-soft-line:#f5dae8;--ok:#d81b60;--warn:#ad1457;--bad:#b91c1c;--track:#fce7f3;--hover:#fdf2f8;--hover-line:#f0c2d8;--head:rgba(253,242,248,.92);--shadow:0 1px 2px rgba(173,20,87,.05);--pop:0 10px 30px rgba(173,20,87,.12);--warnbg:#fff1f6;--warnline:#f5c6da;--warntxt:#ad1457;--swring:rgba(0,0,0,.15);--claude:#c96442;--codex:#0f8a6c;--xai:#7c5cd6;--api:#3b6fd8}
/* Donker — factuurke [data-theme='dark'] (slate-50 #0f172a, surface #1e293b, slate-100/200 #334155) */
[data-theme='dark']{color-scheme:dark;--bg:#0f172a;--panel:#1e293b;--panel2:#172033;--line:#334155;--line2:#334155;--txt:#e2e8f0;--mut:#9ca9bb;--acc:#f0883e;--acc-txt:#0f172a;--acc-soft:#3b2414;--acc-soft-txt:#fdba74;--acc-soft-line:#5b3a1e;--ok:#f0883e;--warn:#fb923c;--bad:#f87171;--track:#334155;--hover:#273449;--hover-line:#475569;--head:rgba(15,23,42,.92);--shadow:none;--pop:0 10px 30px rgba(0,0,0,.45);--warnbg:#2a1d10;--warnline:#5b3a1e;--warntxt:#fdba74;--swring:rgba(255,255,255,.25);--claude:#e07a52;--codex:#2bb38f;--xai:#a78bfa;--api:#60a5fa}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif}
.top{position:sticky;top:0;z-index:5;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:10px 20px;background:var(--head);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-weight:600;font-size:15px}.brand .logo{color:var(--acc)}.brand .sub{color:var(--mut);font-weight:400;margin-left:6px;font-size:13px}
.periods{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:2px}
.periods button{background:none;border:0;color:var(--mut);padding:5px 12px;border-radius:6px;cursor:pointer;font:inherit}
.periods button.on{background:var(--panel2);color:var(--txt);box-shadow:0 0 0 1px var(--line)}
main{max-width:1280px;margin:0 auto;padding:20px}
.login{max-width:420px;margin:12vh auto;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:36px}
.login h1{margin:0 0 6px}.login p{color:var(--mut)}.err{color:var(--bad)!important;min-height:1em}
.btn{display:inline-block;margin-top:10px;background:var(--acc);color:var(--acc-txt);text-decoration:none;font-weight:600;padding:10px 18px;border-radius:8px}
.grid{display:grid;gap:12px}.k4{grid-template-columns:repeat(4,1fr)}.k2{grid-template-columns:1fr 1fr}
@media(max-width:900px){.k4{grid-template-columns:repeat(2,1fr)}.k2{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;padding:14px 16px;min-width:0}
.card h2{font-size:13px;font-weight:600;color:var(--mut);margin:0 0 10px;text-transform:uppercase;letter-spacing:.04em}
.kpi .v{font-size:26px;font-weight:650;font-variant-numeric:tabular-nums}.kpi .l{color:var(--mut);font-size:12px}.kpi .s{color:var(--mut);font-size:12px;margin-top:4px}
section.blk{margin-top:14px}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}th{color:var(--mut);font-weight:500;font-size:12px}
tr:last-child td{border-bottom:0}td.n{color:var(--mut)}
.tag{display:inline-block;font-size:11px;padding:1px 6px;border-radius:4px;margin-right:6px;background:var(--panel2);border:1px solid var(--line)}
.tag.claude{color:var(--claude)}.tag.codex{color:var(--codex)}.tag.xai{color:var(--xai)}.tag.api{color:var(--api)}
.bar{height:8px;background:var(--track);border-radius:4px;overflow:hidden;margin:4px 0 2px}.bar i{display:block;height:100%;background:var(--ok)}
.bar i.warn{background:var(--warn)}.bar i.bad{background:var(--bad)}
.quota{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.quota .acc{font-weight:600;margin-bottom:6px}.quota .row{display:flex;justify-content:space-between;color:var(--mut);font-size:12px}
.chart{display:flex;align-items:flex-end;gap:3px;height:140px;padding-top:6px}
.chart .col{flex:1;display:flex;flex-direction:column-reverse;min-width:4px;position:relative}
.chart .col span{display:block}.chart .col:hover{outline:1px solid var(--line)}
.axis{display:flex;justify-content:space-between;color:var(--mut);font-size:11px;margin-top:4px}
.legend{display:flex;gap:12px;font-size:12px;color:var(--mut);margin-bottom:6px}.legend b{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.foot{color:var(--mut);font-size:12px;margin-top:18px;line-height:1.6}.warnbox{border-color:var(--warnline);background:var(--warnbg);color:var(--warntxt)}
.scroll{overflow-x:auto}
/* Accountmenu — patroon Amex/factuurke (light) */
.account{position:relative}
.accountknop{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 3px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--mut);cursor:pointer;transition:background-color 120ms ease,border-color 120ms ease}
.accountknop:hover,.accountknop.open{border-color:var(--hover-line);background:var(--hover)}
.accountknop:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.accountknop .chevron{transition:transform 150ms ease}.accountknop.open .chevron{transform:rotate(180deg)}
.avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;width:32px;height:32px;border-radius:999px;background:var(--acc);color:var(--acc-txt);font-size:13px;font-weight:600;letter-spacing:.02em;user-select:none}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}.avatar-groot{width:40px;height:40px;font-size:15px}
.accountmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:50;width:264px;padding:4px 0;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--pop);color:var(--txt);font-size:14px}
.accountkop{display:flex;align-items:center;gap:12px;padding:12px 16px}
.accountwie{min-width:0;flex:1}.accountwie p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.accountnaam{font-weight:600}.accountmail{color:var(--mut);font-size:13px}
.accountwie .tag.rol{margin:5px 0 0;background:var(--acc-soft);color:var(--acc-soft-txt);border-color:var(--acc-soft-line)}
.menuitem{display:flex;align-items:center;gap:10px;width:100%;padding:8px 16px;margin:0;border:0;background:none;color:var(--txt);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.menuitem svg{color:var(--mut)}.menuitem:hover,.menuitem:focus-visible{background:var(--hover);outline:none}.menuitem:disabled{opacity:.6;cursor:default}
.menulijn{border-top:1px solid var(--line2);margin:4px 0}
/* Themakeuze in het accountmenu — factuurke/BotControl: groep "Thema", 3 knoppen met ronde swatch + label */
.themagroep{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:10px 16px}
.themagroep p{margin:0 0 6px;font-size:12px;font-weight:500;color:var(--mut)}
.themaknoppen{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.themaknop{display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid var(--line);border-radius:8px;padding:6px 4px;background:none;color:var(--mut);font:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:background-color 120ms ease}
.themaknop:hover{background:var(--hover)}
.themaknop[aria-checked='true']{border-color:var(--acc);background:var(--acc-soft);color:var(--acc-soft-txt)}
.swatch{width:16px;height:16px;border-radius:999px;box-shadow:0 0 0 1px var(--swring)}
.sw-light{background:#ffffff}.sw-pink{background:#d81b60}.sw-dark{background:#0f172a}