@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*, *::before, *::after { box-sizing: border-box; }
:root {
  --bg:#f7f6f3; --surface:#ffffff; --surface2:#f0ede8; --border:#e5e0d8; --border-light:#ede9e4;
  --primary:#c96442; --primary-bg:#fdf0eb;
  --text:#1c1917; --text-muted:#78716c; --text-light:#a8a29e;
  --success:#16a34a; --success-bg:#f0fdf4; --danger:#dc2626; --danger-bg:#fef2f2;
  --amber:#b7791f; --amber-bg:#fdf6e3;
  --shadow:0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --radius:14px; --radius-sm:8px;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:'Inter','Segoe UI',system-ui,sans-serif; font-size:14px; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button { cursor:pointer; }

/* header + nav (sama dengan halaman utama) */
header { background:var(--surface); border-bottom:1px solid var(--border-light); padding:0 24px; height:54px; display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:5; }
.logo { width:30px; height:30px; border-radius:8px; background:var(--primary); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:13px; letter-spacing:-.5px; text-decoration:none; }
.header-title { font-size:15px; font-weight:600; }
.header-sub { font-size:12px; color:var(--text-muted); margin-left:2px; }
nav { background:var(--surface); border-bottom:1px solid var(--border-light); display:flex; gap:2px; padding:0 20px; overflow-x:auto; position:sticky; top:54px; z-index:5; }
nav a { color:var(--text-muted); font-size:13px; font-weight:500; padding:11px 14px; border-bottom:2px solid transparent; text-decoration:none; white-space:nowrap; transition:color .15s,border-color .15s; }
nav a.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
nav a:hover:not(.active) { color:var(--text); }

.meta-box select { width:auto; min-width:230px; padding:5px 8px; font-weight:600; }
.loading { padding:80px 24px; text-align:center; color:var(--text-muted); }
.loading.err { color:var(--danger); }
[hidden] { display:none !important; }

.wrap { max-width:1500px; margin:0 auto; padding:28px 24px 70px; }
.kicker { font-size:11px; letter-spacing:2px; color:var(--text-muted); font-weight:700; }
h1 { font-size:30px; line-height:1.15; margin:12px 0 12px; letter-spacing:-.6px; font-weight:700; }
h1 .accent { color:var(--primary); }
.subtitle { max-width:900px; color:var(--text-muted); font-size:15px; line-height:1.6; }
.meta { display:flex; flex-wrap:wrap; gap:14px 28px; margin:22px 0; }
.meta-box { border-left:3px solid var(--primary); padding-left:12px; }
.meta-box b { display:block; font-size:10.5px; letter-spacing:1.5px; color:var(--text-light); margin-bottom:5px; font-weight:700; }
.meta-box span { font-weight:600; font-size:14px; }
.notice { border:1px solid #f0d9a8; background:var(--amber-bg); border-radius:var(--radius-sm); padding:14px 16px; color:#6b5316; display:flex; gap:14px; align-items:flex-start; line-height:1.55; font-size:13px; }
.notice strong { color:#4a3a0e; }
.notice .bang { color:var(--amber); font-weight:900; font-size:17px; line-height:1.2; }

label { display:block; color:var(--text-muted); font-size:11px; letter-spacing:1px; font-weight:600; margin-bottom:6px; text-transform:uppercase; }
select,input { width:100%; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 11px; outline:none; }
select:focus-visible,input:focus-visible,button:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
button { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 14px; font-weight:500; transition:border-color .15s,background .15s; }
button:hover:not([disabled]) { border-color:var(--text-light); }
.age-btn.active { background:var(--primary-bg); color:var(--primary); border-color:var(--primary); font-weight:600; }
.reset { color:var(--text-muted); white-space:nowrap; }
.controls { margin-top:22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; display:grid; grid-template-columns:1.1fr .7fr .8fr .7fr 1.25fr repeat(3,auto) auto; gap:10px; align-items:end; }

.kpis { display:grid; grid-template-columns:repeat(5,1fr); margin-top:22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.kpi { padding:22px 20px; border-right:1px solid var(--border-light); }
.kpi:last-child { border-right:0; }
.kpi-title { font-size:10.5px; color:var(--text-muted); letter-spacing:1.4px; font-weight:700; }
.kpi-value { font-size:28px; font-weight:700; margin:14px 0 8px; letter-spacing:-.3px; }
.kpi-value.green { color:var(--success); } .kpi-value.amber { color:var(--amber); } .kpi-value.red { color:var(--danger); }
.kpi-note { color:var(--text-light); font-size:12px; line-height:1.45; }

.section { margin-top:40px; }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; border-bottom:1px solid var(--border); padding-bottom:12px; margin-bottom:18px; flex-wrap:wrap; }
.section-head h2 { font-size:14px; margin:0; letter-spacing:1.2px; font-weight:700; }
.section-head span { color:var(--text-muted); font-size:12.5px; max-width:820px; line-height:1.5; }

.findings { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.finding { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 18px; }
.finding .num { color:var(--primary); font-size:11px; margin-bottom:10px; font-weight:700; letter-spacing:1.2px; }
.finding h3 { font-size:15px; line-height:1.35; margin:0 0 8px; font-weight:600; }
.finding p { color:var(--text-muted); font-size:13px; line-height:1.6; margin:0; }
.finding strong { color:var(--text); }

.unit-list { display:flex; flex-direction:column; gap:8px; }
.unit-row { display:grid; grid-template-columns:130px 1fr 320px; gap:22px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 20px; border-left:3px solid transparent; }
.unit-row.hot { border-left-color:var(--primary); }
.unit-name { font-size:18px; font-weight:700; }
.unit-loc { color:var(--text-muted); margin-top:4px; font-size:13px; }
.unitbar { height:30px; display:flex; position:relative; overflow:hidden; background:var(--surface2); border-radius:6px; }
.age { height:100%; min-width:1px; }
.age34 { background:#4a8fa8; } .age45 { background:#e0a030; } .age5 { background:#c96442; }
.unitbar .used-overlay { position:absolute; left:0; top:0; bottom:0; background:repeating-linear-gradient(-45deg,rgba(255,255,255,.7) 0 4px,rgba(255,255,255,0) 4px 8px); pointer-events:none; border-right:2px solid #fff; }
.unit-info { text-align:right; font-family:var(--mono); }
.unit-total { font-size:15px; font-weight:600; } .unit-gi { color:var(--success); font-size:12.5px; margin-top:5px; }
.unit-count { color:var(--text-light); font-size:11.5px; margin-top:5px; }
.unit-gi.nodata { color:var(--danger); }

.legend { display:flex; flex-wrap:wrap; gap:18px; color:var(--text-muted); margin:0 0 16px; font-size:12.5px; }
.legend i { width:13px; height:13px; display:inline-block; margin-right:6px; vertical-align:-2px; border-radius:3px; }
.legend .u { background:repeating-linear-gradient(-45deg,#fff 0 3px,transparent 3px 6px),#57534e; border:1px solid var(--border); }
.charts { display:grid; grid-template-columns:1.15fr .85fr; gap:16px; }
.charts2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.card { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); padding:20px; }
.card h3 { font-size:11.5px; letter-spacing:1.4px; color:var(--text); margin:0 0 6px; font-weight:700; }
.card .desc { color:var(--text-muted); margin-bottom:14px; font-size:12.5px; line-height:1.5; }
.chart-svg { width:100%; height:auto; aspect-ratio:900/400; display:block; }

.subgrid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.list { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); overflow:hidden; }
.list h4 { margin:0; padding:14px 18px; font-size:11px; letter-spacing:1.4px; color:var(--text-muted); border-bottom:1px solid var(--border-light); font-weight:700; background:var(--surface2); }
.li { display:flex; justify-content:space-between; gap:16px; padding:12px 18px; border-bottom:1px solid var(--border-light); font-size:13px; align-items:flex-start; }
.li:last-child { border-bottom:0; }
.li .l { min-width:0; }
.li .l b { display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:420px; }
.li .l small { color:var(--text-muted); display:block; margin-top:3px; }
.li .r { text-align:right; font-family:var(--mono); white-space:nowrap; }
.li .r small { display:block; color:var(--text-muted); margin-top:3px; }

.table-shell { overflow:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); max-height:720px; }
table { border-collapse:collapse; width:100%; font-size:13px; }
table.wide { min-width:1400px; }
th,td { padding:10px 12px; border-bottom:1px solid var(--border-light); white-space:nowrap; text-align:left; }
th { background:var(--surface2); color:var(--text-muted); font-size:10.5px; letter-spacing:.8px; position:sticky; top:0; z-index:1; font-weight:700; }
td.num { text-align:right; font-family:var(--mono); } th.num { text-align:right; }
td.green { color:var(--success); } td.dimc { color:var(--text-muted); } td.redc { color:var(--danger); }
tbody tr:hover { background:#faf8f5; }
tfoot td { font-weight:700; border-top:2px solid var(--border); background:var(--surface2); position:sticky; bottom:0; }
.pill { display:inline-block; border-radius:99px; padding:3px 9px; font-size:11px; font-weight:600; }
.pill.a { background:#e3f0f5; color:#1e5a70; } .pill.b { background:#fbefd2; color:#7a5410; } .pill.c { background:var(--primary-bg); color:#9a3f1f; }
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.tab { padding:8px 14px; background:var(--surface); border:1px solid var(--border); border-radius:99px; color:var(--text-muted); font-size:12.5px; font-weight:500; cursor:pointer; }
.tab.active { background:var(--primary-bg); border-color:var(--primary); color:var(--primary); font-weight:600; }
.searchrow { display:flex; gap:10px; align-items:center; padding:0 0 14px; flex-wrap:wrap; }
.searchrow input { max-width:460px; }
.searchrow select { max-width:90px; }
.count { color:var(--text-muted); font-size:13px; }
.export { white-space:nowrap; margin-left:auto; }
.pager { display:flex; gap:8px; align-items:center; padding:14px 0 0; color:var(--text-muted); font-size:13px; flex-wrap:wrap; }
.pager button[disabled] { opacity:.4; cursor:default; }

.quality { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.q { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; }
.q b { display:block; font-size:10.5px; letter-spacing:1.2px; color:var(--text-muted); margin-bottom:10px; font-weight:700; }
.q .v { font-size:24px; font-weight:700; margin-bottom:8px; }
.q .v.ok { color:var(--success); } .q .v.warn { color:var(--amber); } .q .v.bad { color:var(--danger); }
.q p { margin:0; color:var(--text-muted); font-size:12.5px; line-height:1.55; }
.source-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.src { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; font-size:12px; line-height:1.55; color:var(--text-muted); }
.src b { color:var(--text); display:block; margin-bottom:6px; font-size:14px; }
.src .amt { font-family:var(--mono); color:var(--success); display:block; margin-bottom:8px; font-size:12.5px; }
.src.nodata .amt { color:var(--danger); }
.footer p { margin:0 0 10px; }
.footer { margin-top:44px; border-top:1px solid var(--border); padding-top:20px; color:var(--text-muted); font-size:12.5px; line-height:1.7; max-width:1100px; }
.empty { padding:36px; text-align:center; color:var(--text-muted); }

@media (max-width:1300px) {
  .kpis,.findings { grid-template-columns:repeat(2,1fr); }
  .kpi { border-right:0; border-bottom:1px solid var(--border-light); }
  .charts,.charts2,.subgrid { grid-template-columns:1fr; }
  .controls { grid-template-columns:repeat(3,1fr); }
  .quality,.source-grid { grid-template-columns:repeat(2,1fr); }
  .unit-row { grid-template-columns:110px 1fr; row-gap:12px; }
  .unit-info { grid-column:1/-1; text-align:left; }
}
@media (max-width:760px) {
  .wrap { padding:20px 16px 50px; }
  h1 { font-size:24px; }
  header { padding:0 16px; }
  .kpis,.findings,.controls,.quality,.source-grid { grid-template-columns:1fr; }
  .export { margin-left:0; }
}
@media (prefers-reduced-motion:reduce) { *{ transition:none !important; animation:none !important; } }

/* ── halaman Kelola Data ── */
.toolbar { display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin:18px 0 14px; }
.toolbar > div { min-width:140px; }
.toolbar .grow { flex:1; min-width:200px; }
.toolbar select, .toolbar input { padding:8px 10px; }
.tabbar { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-top:22px; overflow-x:auto; }
.tabbar button { background:none; border:none; border-bottom:2px solid transparent; border-radius:0; padding:10px 14px; color:var(--text-muted); font-weight:500; white-space:nowrap; }
.tabbar button.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600; }
.btn-primary:hover:not([disabled]) { background:#b5573a; border-color:#b5573a; }
.btn-danger { color:var(--danger); }
.btn-sm { padding:4px 9px; font-size:12px; }
td.edit { cursor:text; }
td.edit:hover { background:var(--primary-bg); }
td.edit.saved { background:var(--success-bg); transition:background 1s; }
td input, td select { padding:4px 6px; min-width:90px; }
td input[type=checkbox] { width:auto; min-width:0; }
.truncate { max-width:260px; overflow:hidden; text-overflow:ellipsis; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.form-grid .full { grid-column:1/-1; }
.form-grid textarea { width:100%; min-height:90px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 11px; font:inherit; }
dialog { border:1px solid var(--border); border-radius:var(--radius); padding:22px; width:min(640px,calc(100vw - 32px)); box-shadow:0 12px 40px rgba(0,0,0,.2); }
dialog::backdrop { background:rgba(28,25,23,.4); }
dialog h3 { margin:0 0 14px; font-size:16px; }
dialog .actions { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-top:16px; }
.panel h3 { margin:0 0 4px; font-size:14px; }
.hint { color:var(--text-muted); font-size:12.5px; line-height:1.55; margin:0 0 12px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
.chip { background:var(--surface2); border-radius:99px; padding:3px 10px; font-size:12px; color:var(--text-muted); }
.chip.ok { background:var(--success-bg); color:var(--success); } .chip.bad { background:var(--danger-bg); color:var(--danger); }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--text); color:#fff; padding:10px 18px; border-radius:99px; font-size:13px; z-index:50; max-width:90vw; }
.toast.err { background:var(--danger); }
.cur { color:var(--success); font-weight:600; }