/* ============================================================
   app.css — chrome + selektor + komponen (CSS polos, bebas purge Tailwind).
   Outlet color vars (--o-<key>/-soft) di-inject inline oleh layout.
   ============================================================ */
:root{
  --ground:#f5f7fb;--surface:#fff;--surface-2:#eef1f6;--ink:#1a2030;--muted:#586274;--faint:#8b94a4;--line:#e3e7ee;
  --accent:#6366f1;--accent-ink:#4348c9;--good:#12a274;--warn:#e08a10;--crit:#e0464a;--combined:#475569;
  --radius:14px;--shadow:0 1px 2px rgba(20,28,48,.05),0 6px 20px -10px rgba(20,28,48,.10);
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0e1117;--surface:#161b24;--surface-2:#1d232f;--ink:#e7eaf1;--muted:#9aa4b5;--faint:#6a7385;--line:#28303d;
  --accent-ink:#a5a9ff;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -12px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --ground:#0e1117;--surface:#161b24;--surface-2:#1d232f;--ink:#e7eaf1;--muted:#9aa4b5;--faint:#6a7385;--line:#28303d;
  --accent-ink:#a5a9ff;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -12px rgba(0,0,0,.6);
}
.an-body{margin:0;background:var(--ground);color:var(--ink);font-family:"IBM Plex Sans",Inter,system-ui,sans-serif;line-height:1.55}
.an-mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.tnum{font-variant-numeric:tabular-nums}

/* container ter-pusat — bar atas SEJAJAR dgn konten di layar lebar */
.an-inner{max-width:1200px;margin:0 auto;padding:0 18px;width:100%}

/* topbar */
.an-top{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line)}
.an-top .an-inner{display:flex;align-items:center;gap:14px;height:58px}
.an-top .bd{display:flex;align-items:center;gap:9px;font-family:"Bricolage Grotesque","IBM Plex Sans",sans-serif;font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.an-top .bd .dd{display:flex;gap:3px}.an-top .bd .dd i{width:8px;height:8px;border-radius:50%}
.an-top .pt{color:var(--muted);font-weight:500;font-size:14px}
.an-top .sp{margin-left:auto}
.an-top .rng{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink);background:var(--surface-2);padding:6px 11px;border-radius:8px;border:1px solid var(--line);cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.an-top .lang{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:2px}
.an-top .lang button{border:0;background:transparent;color:var(--faint);font:600 11px "IBM Plex Sans";padding:4px 9px;border-radius:999px;cursor:pointer}
.an-top .lang button.on{background:var(--ink);color:var(--surface)}
.an-top .u{font-size:12.5px;color:var(--muted)}
.an-top a.lo{color:var(--muted);text-decoration:none;font-size:12.5px;border:1px solid var(--line);padding:5px 10px;border-radius:8px}

/* selector sub-bar */
.an-sel{position:sticky;top:58px;z-index:29;background:var(--surface);border-bottom:1px solid var(--line)}
.an-sel .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 18px;max-width:1200px;margin:0 auto}
.an-sel .lab{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);width:46px;flex:none}
.chip{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);text-decoration:none;padding:5px 12px 5px 10px;border-radius:999px;font-size:13px;font-weight:500;transition:.12s;cursor:pointer}
.chip .d{width:10px;height:10px;border-radius:50%;background:var(--oc,#94a3b8)}
.chip.on{border-color:var(--oc);color:var(--ink);background:var(--oc-soft)}
.chip.on .d{box-shadow:0 0 0 3px color-mix(in srgb,var(--oc) 20%,transparent)}
.chip.all{border-style:dashed;color:var(--muted)}
.chip:hover{border-color:var(--oc,#cbd5e1)}
.chip.locked{cursor:default}
.chip .rad{width:13px;height:13px;border-radius:50%;border:2px solid var(--faint);position:relative;flex:none;box-sizing:border-box}
.chip.radio.on{border-color:var(--oc);color:var(--ink);background:var(--oc-soft)}
.chip.radio.on .rad{border-color:var(--oc)}
.chip.radio.on .rad::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--oc)}
.mode{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:8px;background:var(--surface-2);color:var(--ink)}
.mode .pel{width:8px;height:8px;border-radius:50%}
.an-basis{display:flex;align-items:center;gap:8px;padding:7px 18px;border-top:1px dashed var(--line);flex-wrap:wrap;max-width:1200px;margin:0 auto}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg a{padding:6px 11px;font-size:12.5px;color:var(--muted);text-decoration:none}
.seg a.on{background:var(--accent);color:#fff}
.an-hint{font-size:11.5px;color:var(--faint)}
.an-nav{display:flex;gap:5px;flex-wrap:wrap;padding:8px 18px 9px;overflow-x:auto;max-width:1200px;margin:0 auto}
.an-nav a{font-size:13px;color:var(--muted);text-decoration:none;padding:6px 11px;border-radius:8px;display:inline-flex;gap:7px;align-items:center;white-space:nowrap}
.an-nav a:hover{background:var(--surface-2);color:var(--ink)}
.an-nav a.on{background:var(--ink);color:var(--surface);font-weight:600}
.an-nav a i{font-size:12px;width:15px;text-align:center;opacity:.8}

/* main */
.an-main{max-width:1200px;margin:0 auto;padding:20px 18px 60px}
.an-foot{text-align:center;font-size:11px;color:var(--faint);padding:16px}

/* generic components (dipakai overview & halaman baru) */
.kgrid{display:grid;gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.kpi .t{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.kpi .v{font-family:"Bricolage Grotesque","IBM Plex Sans",sans-serif;font-size:25px;font-weight:700;margin-top:3px;letter-spacing:-.01em}
.kpi .v small{font-size:13px;color:var(--muted);font-weight:500}
.kpi .dlt{font-size:12px;margin-top:2px;font-weight:600}
.dlt.up{color:var(--good)} .dlt.down{color:var(--crit)} .dlt.flat{color:var(--faint)}
.sec-h{font-family:"Bricolage Grotesque","IBM Plex Sans";font-size:15px;font-weight:600;margin:22px 0 12px;color:var(--muted)}
.mtxwrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
table.mtx{border-collapse:collapse;width:100%;font-size:14px;min-width:560px}
table.mtx th,table.mtx td{padding:11px 14px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
table.mtx th{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:600}
table.mtx td:first-child,table.mtx th:first-child{text-align:left}
table.mtx tr:last-child td{border-bottom:0}
.oname{display:inline-flex;align-items:center;gap:9px;font-weight:600}
.oname .d{width:11px;height:11px;border-radius:50%;background:var(--oc,#94a3b8)}
tr.comb td{font-weight:700;background:var(--surface-2)}
.rank{font-size:12px}
.ocards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-top:14px}
.oc{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--oc,#94a3b8);border-radius:12px;padding:14px 15px;box-shadow:var(--shadow)}
.oc h3{font-family:"Bricolage Grotesque","IBM Plex Sans";font-size:16px;margin:0 0 4px;display:flex;align-items:center;gap:8px}
.oc h3 .d{width:10px;height:10px;border-radius:50%;background:var(--oc)}
.oc h3 .hb{margin-left:auto;font-size:11px}
.oc .g2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.oc .m .t{font-size:10.5px;color:var(--faint);font-family:"IBM Plex Mono"}
.oc .m .v{font-size:17px;font-weight:600;font-family:"Bricolage Grotesque","IBM Plex Sans"}
.fbo{display:flex;height:10px;border-radius:5px;overflow:hidden;margin-top:10px}
.spark{display:block;margin-top:8px}
.notice{background:color-mix(in srgb,var(--warn) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);color:var(--ink);padding:10px 13px;border-radius:10px;font-size:13px;margin-bottom:16px;display:flex;gap:9px;align-items:center}
.notice .pills{margin-left:auto;display:flex;gap:6px}
.notice .pills a{font-size:12px;text-decoration:none;border:1px solid var(--line);padding:3px 9px;border-radius:999px;color:var(--muted)}
.notice .pills a.on{background:var(--oc,var(--accent));color:#fff;border-color:transparent}
.wip{display:grid;place-items:center;min-height:40vh;text-align:center;color:var(--muted)}
.wip .ic{font-size:34px;margin-bottom:10px;opacity:.5}
.smx{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.smx .cell{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--oc);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.smx .cell h3{font-family:"Bricolage Grotesque","IBM Plex Sans";font-size:14.5px;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.smx .cell h3 .d{width:10px;height:10px;border-radius:50%;background:var(--oc)}
@media(max-width:640px){.an-top .rng .lbl,.an-sel .lab{display:none}}
</style>