:root{
  color-scheme: light;
  --bg:#f7f5f0; --surface:#fff; --surface-2:#fbfaf6; --border:rgba(30,26,16,.10); --border-strong:rgba(30,26,16,.16);
  --text:#1b1810; --text-2:#5a5546; --text-muted:#8b8574; --accent:#b3781f; --accent-ink:#7a4f0f; --accent-soft:#f3e4c7;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
  --s1-soft:rgba(42,120,214,.16);
  --good:#0ca30c; --good-text:#006300; --critical:#d03b3b; --grid:#e6e2d6; --axis:#c9c4b3;
  --font-display:"Manrope",system-ui,sans-serif; --font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  color-scheme: dark;
  --bg:#14120c; --surface:#1c1a13; --surface-2:#211f17; --border:rgba(255,250,235,.10); --border-strong:rgba(255,250,235,.18);
  --text:#f3efe3; --text-2:#c7c0ac; --text-muted:#948d78; --accent:#e0a83e; --accent-ink:#f4cd80; --accent-soft:#3a2f16;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
  --s1-soft:rgba(57,135,229,.22); --good-text:#24c224; --critical:#e66767; --grid:#2c2a20; --axis:#423e2e;
}}
*{box-sizing:border-box} [hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;padding:0 16px 64px}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto}
.muted{color:var(--text-muted)}
.c-s1{color:var(--s1)} .c-s2{color:var(--s2)}
.c-bg-s1{background:var(--s1)} .c-bg-s2{background:var(--s2)} .c-bg-s3{background:var(--s3)} .c-bg-s4{background:var(--s4)}
.c-bg-s5{background:var(--s5)} .c-bg-s6{background:var(--s6)} .c-bg-s7{background:var(--s7)} .c-bg-text-muted{background:var(--text-muted)}

header.top{padding:28px 0 18px;border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:flex-end}
.brand{display:flex;gap:14px;align-items:center}
.brand .mark{width:44px;height:44px;border-radius:11px;background:linear-gradient(155deg,var(--accent-soft),var(--accent));display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:inset 0 0 0 1px var(--border-strong)}
.brand-title{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.01em}
.brand .sub{font-size:13px;color:var(--text-2);margin-top:2px}
.userbox{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2)}
.role-chip{font-size:11px;font-weight:700;padding:3px 8px;border-radius:100px;background:var(--accent-soft);color:var(--accent-ink);text-transform:uppercase}
.link-btn{background:none;border:none;color:var(--accent-ink);font:inherit;cursor:pointer;text-decoration:underline}

.view-tabs{display:flex;gap:6px;margin-top:6px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.view-tab{font-size:13.5px;font-weight:700;color:var(--text-muted);padding:11px 6px;margin-right:14px;border-bottom:2px solid transparent;display:flex;align-items:center;gap:8px}
.view-tab.active{color:var(--text);border-bottom-color:var(--accent)}
.view-tab:hover:not(.active){color:var(--text-2)}
.view-tab-badge{font-size:11px;font-weight:700;background:var(--accent-soft);color:var(--accent-ink);border-radius:100px;padding:2px 8px}

.section{margin-top:30px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.section-head h2{font-family:var(--font-display);font-size:19px;font-weight:800;margin:0}
.section-head p{margin:4px 0 0;color:var(--text-2);font-size:13.5px;max-width:70ch}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px 16px}
.panel-title{font-weight:700;font-size:13.5px;margin-bottom:8px}
.note{font-size:12px;color:var(--text-muted);margin-top:10px}
.empty{padding:24px 0;text-align:center;color:var(--text-muted)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px}
.kpi .label{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.kpi .value{font-size:22px;font-weight:700;margin-top:8px;font-variant-numeric:tabular-nums}
.kpi .value.pos{color:var(--good-text)} .kpi .value.neg{color:var(--critical)}

.chart-box{position:relative;width:100%} .chart-box.tall{height:320px} .chart-box.donut{height:230px;width:230px;margin:0 auto}

.period-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px}
.period-bar .lbl{font-size:12.5px;font-weight:700;color:var(--text-2)}
.ctl,select.ctl,input.ctl{font:inherit;font-size:13px;color:var(--text);background:var(--surface-2);border:1px solid var(--border-strong);border-radius:9px;padding:8px 12px}
.btn{font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;border-radius:9px;padding:8px 14px;border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text)}
.btn.accent{background:var(--accent-soft);color:var(--accent-ink)}
.btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.btn.good{background:var(--good);color:#fff;border-color:transparent}
.btn.sm{padding:5px 10px;font-size:11.5px}
.btn:disabled{opacity:.45;cursor:default}

.tabs{display:flex;gap:6px;background:var(--surface-2);border:1px solid var(--border);padding:4px;border-radius:11px;width:max-content}
.tabs button{font:inherit;font-size:13px;font-weight:600;color:var(--text-2);background:transparent;border:none;padding:7px 14px;border-radius:8px;cursor:pointer}
.tabs button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}

.cat-wrap{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;margin-top:16px}
.cat-pie-block{flex:0 0 240px;display:flex;flex-direction:column;align-items:center;gap:14px}
.pie-legend{width:100%;display:flex;flex-direction:column;gap:6px}
.pl-row{display:flex;align-items:center;gap:8px;font-size:12px}
.pl-sw{width:9px;height:9px;border-radius:2px;flex:none;display:inline-block;margin-right:6px}
.pl-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)} .pl-pct{color:var(--text-muted);font-variant-numeric:tabular-nums}
.catgrid{flex:1 1 420px;min-width:280px;display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.cat-row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.cat-row .name{font-size:13.5px} .cat-row .name .n{color:var(--text-muted);font-size:11.5px;margin-left:5px}
.cat-row .amt{font-variant-numeric:tabular-nums;font-weight:700;font-size:13.5px;white-space:nowrap}
.cat-bar-track{grid-column:1/-1;height:7px;border-radius:4px;background:var(--grid);overflow:hidden;margin-top:1px}
.cat-bar-fill{height:100%;border-radius:4px;width:100%}

.my-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.my-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px}
.my-head{display:flex;justify-content:space-between;align-items:center}
.my-title{font-family:var(--font-display);font-weight:800;font-size:16px}
.my-badge{font-size:11px;font-weight:700;padding:4px 9px;border-radius:100px;background:var(--accent-soft);color:var(--accent-ink)}
.my-nums{display:flex;gap:22px;margin-top:16px;flex-wrap:wrap}
.my-num .l{font-size:11.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.my-num .v{font-size:19px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.my-num .v.neg{color:var(--critical)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:100px;margin-top:14px}
.pill.good{background:color-mix(in oklab,var(--good) 16%,transparent);color:var(--good-text)}
.pill.bad{background:color-mix(in oklab,var(--critical) 16%,transparent);color:var(--critical)}

.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--border-strong);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:top}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th a{color:inherit} th.active{color:var(--accent-ink)}
.cp-tables{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.purpose-cell{max-width:380px;white-space:normal;color:var(--text-2);font-size:12.5px}
.name-cell{max-width:220px;white-space:normal;font-weight:600}
.cat-chip{display:inline-block;font-size:11px;padding:3px 8px;border-radius:100px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);white-space:nowrap}
.flow-in{color:var(--good-text);font-weight:700} .flow-out{color:var(--critical);font-weight:700}
.status-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:100px;white-space:nowrap}
.status-badge.confirmed{background:color-mix(in oklab,var(--good) 16%,transparent);color:var(--good-text)}
.status-badge.unconfirmed{background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border-strong)}

.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;align-items:center}
.filters input[type=search]{flex:1 1 220px;min-width:0}
.pager{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-top:14px;font-size:12.5px;color:var(--text-2);flex-wrap:wrap}
.pager .pbtns{display:flex;gap:6px}
details.ms{position:relative} details.ms>summary{list-style:none;cursor:pointer} details.ms>summary::-webkit-details-marker{display:none}
.ms-pop{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:300px;background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.2);padding:10px}
.ms-options{max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.ms-option{display:flex;align-items:center;gap:8px;padding:6px;border-radius:6px;font-size:12.5px;cursor:pointer}
.ms-option:hover{background:var(--surface-2)} .ms-option .ms-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-option .ms-amt{color:var(--text-muted);font-size:11px;font-variant-numeric:tabular-nums}
.ms-count{background:var(--accent);color:#fff;font-size:11px;font-weight:700;border-radius:100px;padding:1px 7px;margin-left:6px}

.bulkbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--accent-soft);border:1px solid var(--border-strong);border-radius:11px;padding:11px 14px;margin-bottom:14px}
.audit-cat-select{width:100%;font:inherit;font-size:12.5px;color:var(--text);background:var(--surface-2);border:1px solid var(--border-strong);border-radius:7px;padding:6px 8px}
.progress-track{height:9px;border-radius:5px;background:var(--grid);overflow:hidden;margin-top:10px}
.progress-fill{height:100%;background:var(--good);transition:width .3s}
.hint-1c{font-size:11.5px;color:var(--text-muted)}

.form-col{display:flex;flex-direction:column;gap:12px} .form-col label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--text-2)}
.form-col input,.form-col select{font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface-2);color:var(--text)}
.login-card{max-width:380px;margin:60px auto;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px}
.login-card h1{font-family:var(--font-display);margin:0 0 16px}
.alert{padding:10px 12px;border-radius:9px;font-size:13px;margin-bottom:12px} .alert.error{background:color-mix(in oklab,var(--critical) 14%,transparent);color:var(--critical)}
.alert.ok{background:color-mix(in oklab,var(--good) 14%,transparent);color:var(--good-text)}
.alert.warn{background:var(--accent-soft);color:var(--accent-ink)}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border-strong);border-radius:11px;padding:12px 18px;font-size:13px;color:var(--text);box-shadow:0 10px 30px rgba(0,0,0,.22);z-index:500;max-width:min(92vw,560px);opacity:0;transition:opacity .18s}
.toast.show{opacity:1} .toast.error{border-color:var(--critical);color:var(--critical)} .toast.success{border-color:var(--good)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:600;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{background:var(--surface);border:1px solid var(--border-strong);border-radius:14px;padding:22px;max-width:440px;width:100%;box-shadow:0 24px 64px rgba(0,0,0,.3)}
.modal-box h3{margin:0 0 10px;font-family:var(--font-display)} .modal-box p{margin:0 0 18px;font-size:13.5px;color:var(--text-2);line-height:1.55}
.modal-actions{display:flex;justify-content:flex-end;gap:10px}

footer{margin-top:56px;padding-top:18px;border-top:1px solid var(--border);color:var(--text-muted);font-size:12px;line-height:1.7}
@media (max-width:860px){.kpis{grid-template-columns:repeat(2,1fr)}.catgrid{grid-template-columns:1fr}.my-grid,.cp-tables{grid-template-columns:1fr}.cat-wrap{flex-direction:column;align-items:stretch}.cat-pie-block{flex:none;width:100%}}
@media (max-width:480px){.kpis{grid-template-columns:1fr 1fr}.brand-title{font-size:20px}}