:root{
  --crimson:#8C1515; --crimson-d:#6b0f0f; --ivory:#F7F4EF; --charcoal:#2A2A28;
  --gold:#B08D3C; --line:#E4DDD1; --paper:#FFFFFF; --muted:#7A7268;
  --green:#2E7D46; --amber:#B7791F; --red:#B4232C;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ivory);color:var(--charcoal);font-family:Georgia,'Times New Roman',serif;line-height:1.5}
.wrap{display:flex;min-height:100vh}
.side{width:210px;background:var(--charcoal);color:var(--ivory);flex:none;padding:0 0 20px}
.side .brand{padding:18px 20px;border-bottom:1px solid #444;font-size:15px;letter-spacing:.5px}
.side .brand b{color:var(--gold)}
.side nav a{display:block;padding:11px 20px;color:#D9D2C7;text-decoration:none;font-size:14px;border-left:3px solid transparent}
.side nav a:hover{background:#33322f;color:#fff}
.side nav a.on{background:#3a1010;color:#fff;border-left-color:var(--gold)}
.side .foot{padding:16px 20px;font-size:11px;color:#8a8378;margin-top:20px}
.main{flex:1;padding:0 0 40px;min-width:0}
.top{background:var(--crimson);color:var(--ivory);padding:14px 28px;display:flex;justify-content:space-between;align-items:center}
.top h1{font-size:19px;font-weight:normal;letter-spacing:.5px}
.top .who{font-size:12px;opacity:.85}
.top a{color:var(--ivory);text-decoration:underline;font-size:12px}
.cont{padding:24px 28px;max-width:1200px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.kpi{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--crimson);border-radius:6px;padding:14px 16px}
.kpi .lbl{font-size:11px;letter-spacing:.6px;color:var(--muted);text-transform:uppercase;font-family:Arial,sans-serif}
.kpi .n{font-size:30px;font-weight:bold;line-height:1.2;margin-top:4px}
.kpi.gold{border-top-color:var(--gold)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:16px 18px;margin-bottom:18px}
.card h2{font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--crimson);font-family:Arial,sans-serif;margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.cmd{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #F0EBE1;font-size:14px}
.cmd:last-child{border:none}
.cmd .pri{font-family:Arial,sans-serif;font-size:10px;padding:2px 8px;border-radius:10px;color:#fff;flex:none}
.pri.Tinggi{background:var(--red)} .pri.Sedang{background:var(--amber)} .pri.Rendah{background:var(--muted)}
.cmd .t{flex:none;font-weight:bold;min-width:220px}
.cmd .d{color:var(--muted);flex:1}
.cmd .n{font-weight:bold;font-size:18px;color:var(--crimson)}
.cmd a{color:var(--crimson);font-size:12px;font-family:Arial,sans-serif}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{font-family:Arial,sans-serif;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
tr:hover td{background:#FBF8F2}
.tag{font-family:Arial,sans-serif;font-size:10px;padding:2px 7px;border-radius:4px;background:#EFE9DD;color:var(--charcoal)}
.tag.dnc{background:#F6DADA;color:var(--red)} .tag.rev{background:#FBECCB;color:var(--amber)}
.btn{background:var(--crimson);color:#fff;border:none;padding:8px 16px;border-radius:5px;font-family:Arial,sans-serif;font-size:13px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:var(--crimson-d)} .btn.ghost{background:#fff;color:var(--crimson);border:1px solid var(--crimson)}
.btn.gold{background:var(--gold)} .btn.sm{padding:4px 10px;font-size:12px}
.row{display:flex;gap:14px;flex-wrap:wrap} .row>*{flex:1;min-width:180px}
label{font-family:Arial,sans-serif;font-size:12px;color:var(--muted);display:block;margin-bottom:4px}
input,select{width:100%;padding:8px;border:1px solid var(--line);border-radius:5px;font-family:Arial,sans-serif;font-size:13px;background:#fff}
.muted{color:var(--muted);font-size:12px}
.pill{display:inline-block;padding:2px 8px;border-radius:10px;font-family:Arial,sans-serif;font-size:11px}
.ok{background:#DEF0E2;color:var(--green)} .warn{background:#FBECCB;color:var(--amber)} .bad{background:#F6DADA;color:var(--red)}
.stat-row{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0}
.stat-row .s{background:#FBF8F2;border:1px solid var(--line);border-radius:5px;padding:8px 14px;font-family:Arial,sans-serif;font-size:13px}
.stat-row .s b{font-size:20px;display:block;color:var(--crimson)}
.login{max-width:360px;margin:8vh auto;background:#fff;border:1px solid var(--line);border-top:4px solid var(--crimson);border-radius:8px;padding:28px}
.login h1{color:var(--crimson);font-size:20px;margin-bottom:4px}
.err{background:#F6DADA;color:var(--red);padding:8px 12px;border-radius:5px;font-family:Arial,sans-serif;font-size:13px;margin:10px 0}
code{font-family:Consolas,monospace;font-size:12px;background:#F0EBE1;padding:1px 5px;border-radius:3px}
@media(max-width:820px){.kpis{grid-template-columns:1fr 1fr}.side{width:64px}.side .brand,.side nav a span,.side .foot{display:none}}