:root{--ink:#1b2a3a;--ink2:#26394d;--brass:#a67c1a;--brass-l:#f4ead2;--teal:#2b7a78;--paper:#f3f5f7;--card:#fff;--line:#dfe3e8;--txt:#1f2933;--mute:#66727f;--up:#1e7a53;--down:#b23a3a;--r:8px}
*{box-sizing:border-box}
html{font-size:15px}
body{margin:0;background:var(--paper);color:var(--txt);font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;line-height:1.45;font-variant-numeric:tabular-nums}
a{color:var(--brass)}
h1{font-size:1.35rem;margin:0;font-weight:650}
h2{font-size:1.02rem;margin:0 0 .25rem;font-weight:650}
.sub,.muted{color:var(--mute);font-size:.85rem;margin:.1rem 0 .6rem}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* layout */
.side{position:fixed;inset:0 auto 0 0;width:220px;background:var(--ink);color:#d7dee6;display:flex;flex-direction:column;padding:18px 12px;z-index:20}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;padding:0 8px 18px;color:#fff}
.brand .mark{display:grid;place-items:center;width:32px;height:32px;border-radius:6px;background:var(--brass);color:#fff;font-weight:700;font-size:.85rem}
.brand.dark{color:var(--ink)}
.side nav{display:flex;flex-direction:column;gap:2px;flex:1}
.side nav a{color:#c3ccd6;text-decoration:none;padding:9px 12px;border-radius:6px}
.side nav a:hover{background:var(--ink2);color:#fff}
.side nav a.on{background:var(--brass-l);color:var(--ink);font-weight:600}
.who{display:flex;justify-content:space-between;gap:8px;font-size:.85rem;padding:12px 8px 0;border-top:1px solid #34485c}
.who a{color:#e6c877}
.main{margin-left:220px;padding:22px 28px 60px;max-width:1500px}
.top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.burger{display:none;padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer}

/* filter */
.filters{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:end;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:12px}
label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--mute);font-weight:600}
input,select{font:inherit;color:var(--txt);padding:7px 9px;border:1px solid #c9d0d8;border-radius:6px;background:#fff;min-height:36px}
input[type=file]{display:none}
[hidden]{display:none!important}
.range-info{margin-left:auto;font-weight:650;color:var(--ink);align-self:center}
.note{background:var(--brass-l);border-left:3px solid var(--brass);padding:8px 12px;border-radius:4px;font-size:.87rem;margin:0 0 14px;color:#4d3d10}
.lead{color:var(--mute);margin:-6px 0 14px}

/* kartu */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.kl{font-size:.8rem;color:var(--mute);font-weight:600}
.kv{font-size:1.45rem;font-weight:700;color:var(--ink);margin-top:2px;overflow-wrap:anywhere}
.ks{font-size:.8rem;color:var(--mute);margin-top:2px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:14px;position:relative}
.panel.loading::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.6);border-radius:var(--r)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid2 .panel{margin-bottom:0}
.grid2{margin-bottom:14px}
.grid2.ms{grid-template-columns:minmax(260px,340px) 1fr;align-items:start}
.chart{position:relative;height:280px}
.chart.tall{height:340px}

/* tabel */
.tablewrap{overflow-x:auto}
.tall-scroll{max-height:70vh;overflow:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
td:first-child,td:nth-child(2){white-space:normal}
th{font-size:.8rem;color:var(--mute);font-weight:650;background:#fafbfc;position:sticky;top:0}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink)}
th[aria-sort=descending]::after{content:" ▾"}th[aria-sort=ascending]::after{content:" ▴"}
.n{text-align:right}
tbody tr:hover{background:#fafbfc}
tfoot td{font-weight:700;background:var(--brass-l);border-bottom:0}
td.empty{text-align:center;color:var(--mute);padding:26px}
td .sub{margin:0}
.tag{display:inline-block;padding:2px 8px;border-radius:99px;font-size:.75rem;font-weight:600;background:#e4eef0;color:var(--teal)}
.tag.luar{background:#f1e6d3;color:#8a5d0b}.tag.err{background:#f6dcdc;color:var(--down)}
.delta{font-weight:650;font-size:.85rem}.delta.up{color:var(--up)}.delta.down{color:var(--down)}
.kpi .delta.up::before{content:"▲ "}.kpi .delta.down::before{content:"▼ "}
.kelas{display:inline-block;width:24px;text-align:center;border-radius:4px;font-weight:700;font-size:.8rem}
.kA{background:var(--brass);color:#fff}.kB{background:#e6d5a3;color:#5a4410}.kC{background:#e9edf1;color:var(--mute)}
.bar{display:inline-block;min-width:88px;padding:1px 6px;background:linear-gradient(90deg,#efe0b8 var(--w),transparent var(--w));border-radius:3px}

/* tombol & form */
.btn{font:inherit;padding:8px 14px;border:1px solid #c0c8d1;background:#fff;border-radius:6px;cursor:pointer;color:var(--txt)}
.btn:hover{background:#f3f5f7}.btn.sm{padding:3px 9px;font-size:.8rem}
.btn.primary{background:var(--brass);border-color:var(--brass);color:#fff;font-weight:600}.btn.primary:hover{background:#8f6a14}
.btn.danger{color:var(--down)}.btn:disabled{opacity:.5;cursor:not-allowed}
.stack{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row.between{justify-content:space-between}
.tampil-bar label{font-size:.78rem}.tampil-bar select{min-height:32px;padding:5px 7px}
tr.pinned td{background:#fafbfc;font-style:italic;color:var(--mute)}
tr.pinned td:first-child{font-style:normal}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:.82rem;border:1px dashed var(--brass);background:#fffaf0;border-radius:99px;padding:3px 10px;cursor:pointer}
.chip small{color:var(--mute)}
.sub-panel{background:var(--paper);border-color:var(--line);padding:12px 14px;margin:2px 0 14px}
label.inline{flex-direction:row;align-items:center;gap:6px;font-weight:500}
label.inline input{width:auto;min-height:auto}
table.dense th,table.dense td{padding:5px 7px;font-size:.82rem}
table.dense td .sub{font-size:.72rem;color:var(--mute)}
.drop{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px dashed #c0c8d1;border-radius:var(--r);padding:34px 16px;text-align:center;cursor:pointer;color:var(--txt);font-size:1rem}
.drop.over,.drop:hover{border-color:var(--brass);background:#fffaf0}
.filelist{list-style:none;padding:0;margin:10px 0}.filelist li{padding:4px 0}.filelist small{color:var(--mute)}
progress{width:200px}

/* toast & alert */
#toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:6px;opacity:0;pointer-events:none;transition:.2s;z-index:50;max-width:90vw}
#toast.show{opacity:1;transform:translate(-50%,0)}#toast.err{background:var(--down)}
.alert{padding:10px 12px;border-radius:6px;font-size:.9rem;margin-bottom:12px}.alert.err{background:#f6dcdc;color:#7d2323}.alert.ok{background:#dcefe5;color:#175a3d}

/* login */
.login-body{display:grid;place-items:center;min-height:100vh;padding:16px}
.login-card{width:100%;max-width:380px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px;display:flex;flex-direction:column;gap:14px}
.login-card h1{font-size:1.4rem}.login-card .brand{padding:0}

@media(max-width:900px){
  .side{transform:translateX(-100%);transition:transform .2s}
  .navtoggle:checked~.side{transform:none}
  .main{margin-left:0;padding:16px 14px 50px}
  .burger{display:block}
  .grid2,.grid2.ms{grid-template-columns:1fr}
  .range-info{margin-left:0;width:100%}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}