:root{
  --paper:#ffffff; --tint:#eef3f6; --tint-2:#f6f9fa;
  --ink:#10242f; --ink-2:#4c6675; --ink-3:#7a91a0;
  --rule:#d3dee4; --rule-2:#e6edf1;
  --teal:#0089a0; --amber:#ce7a22; --signal:#b23a26; --verified:#1f6f5c;
  --surround:#dfe6ea;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0f1c24; --tint:#16262f; --tint-2:#13222a;
    --ink:#e8eef1; --ink-2:#a7bcc7; --ink-3:#7d94a1;
    --rule:#2a3f4a; --rule-2:#1f3139;
    --teal:#3fb6cb; --amber:#e39a4b; --signal:#e2715a; --verified:#4fa98f;
    --surround:#0a1419;
  }
}
:root[data-theme="dark"]{
  --paper:#0f1c24; --tint:#16262f; --tint-2:#13222a;
  --ink:#e8eef1; --ink-2:#a7bcc7; --ink-3:#7d94a1;
  --rule:#2a3f4a; --rule-2:#1f3139;
  --teal:#3fb6cb; --amber:#e39a4b; --signal:#e2715a; --verified:#4fa98f;
  --surround:#0a1419;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--surround); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5;
}
h1,h2,h3{font-family:"IBM Plex Serif",Georgia,serif; margin:0; font-weight:600;}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;}
.num{font-variant-numeric:tabular-nums; text-align:right;}

.shell{max-width:1560px; margin:0 auto; padding:20px 16px 40px;}

/* ---------- kepala ---------- */
.kepala{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; flex-wrap:wrap;
  background:var(--paper); border:1px solid var(--rule-2);
  border-radius:3px; padding:18px 22px; margin-bottom:14px;
}
.merek{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.merek h1{font-size:28px; letter-spacing:-.015em;}
.merek .exp{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--teal);
}
.kepala .sub{font-size:13.5px; color:var(--ink-2); margin-top:5px; max-width:76ch;}
.kepala-kanan{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}

.lencana{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.09em; text-transform:uppercase;
  padding:4px 9px; border-radius:2px; border:1px solid currentColor;
}
.l-sintetis{color:var(--verified);} .l-tier-A{color:var(--signal);}
.l-tier-B{color:var(--amber);} .l-tier-C{color:var(--ink-3);}

button{
  font-family:inherit; font-size:13px; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule);
  border-radius:2px; padding:7px 13px; cursor:pointer;
}
button:hover{background:var(--tint);}
button.utama{background:var(--teal); border-color:var(--teal); color:#fff;}
button.utama:hover{filter:brightness(1.08);}
button:disabled{opacity:.5; cursor:default;}

/* ---------- kpi ---------- */
.kpi{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:1px;
  background:var(--rule-2); border:1px solid var(--rule-2);
  border-radius:3px; overflow:hidden; margin-bottom:14px;
}
.kpi .sel{background:var(--paper); padding:14px 18px;}
.kpi .v{
  font-family:"IBM Plex Serif",Georgia,serif; font-size:30px; font-weight:600;
  line-height:1.05; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.kpi .k{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:6px;
}
.kpi .n{font-size:11.5px; color:var(--ink-2); margin-top:4px; line-height:1.35;}

/* ---------- cakupan ---------- */
.cakupan{
  background:var(--paper); border:1px solid var(--rule-2); border-radius:3px;
  padding:16px 22px; margin-bottom:14px;
  display:grid; grid-template-columns:minmax(260px,1fr) auto; gap:20px 28px; align-items:center;
}
.cakupan .judul{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px;
}
input[type=range]{width:100%; accent-color:var(--teal);}
.cakupan .hasil{display:flex; gap:26px; flex-wrap:wrap;}
.cakupan .hasil .sel .v{
  font-family:"IBM Plex Serif",Georgia,serif; font-size:21px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.cakupan .hasil .sel .k{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-top:3px;
}

/* ---------- kerja ---------- */
.kerja{display:grid; grid-template-columns:minmax(0,1.62fr) minmax(350px,0.95fr); gap:14px; align-items:start;}
.kartu{background:var(--paper); border:1px solid var(--rule-2); border-radius:3px; overflow:hidden;}
.kartu > .bar{
  display:flex; gap:9px; align-items:center; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--rule-2); background:var(--tint-2);
}
.kartu > .bar{padding:11px 14px;}
.kartu > .bar .tt{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-right:auto;
}
input[type=search], select{
  font-family:inherit; font-size:13px; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:2px; padding:6px 9px;
}
input[type=search]{min-width:112px;}

/* ---------- tabel ---------- */
.gulir{max-height:min(66vh,760px); overflow:auto;}
table{border-collapse:collapse; width:100%; font-size:13.5px;}
thead th{
  position:sticky; top:0; z-index:2; background:var(--paper);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  text-align:left; padding:9px 10px; border-bottom:1px solid var(--rule); white-space:nowrap;
}
thead th.num{text-align:right;}
tbody td{padding:8px 10px; border-bottom:1px solid var(--rule-2); vertical-align:middle;}
tbody td.num{white-space:nowrap;}
tbody td:nth-child(2),tbody td:nth-child(6),tbody td:nth-child(7){white-space:nowrap;}
tbody tr{cursor:pointer;}
tbody tr:hover{background:var(--tint-2);}
tbody tr.aktif{background:var(--tint); box-shadow:inset 2px 0 0 var(--teal);}
tbody tr.luar{opacity:.4;}
tbody tr.luar td{color:var(--ink-2);}
.pita{display:flex; align-items:center; gap:8px; min-width:104px;}
.pita .alur{flex:1; height:5px; background:var(--rule-2); border-radius:9px; overflow:hidden;}
.pita .isi{height:100%; background:var(--teal);}
.pita .ag{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; min-width:34px; text-align:right;}
.chip{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9.5px;
  letter-spacing:.07em; padding:2px 6px; border-radius:2px;
  border:1px solid var(--rule); color:var(--ink-2); white-space:nowrap;
}
.garis-potong td{
  background:var(--tint); border-bottom:1px solid var(--teal); border-top:1px solid var(--teal);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--teal);
  padding:6px 10px; cursor:default;
}
.garis-potong:hover td{background:var(--tint);}

/* ---------- detail ---------- */
.detail{position:sticky; top:16px;}
.detail .isi{padding:18px 20px 22px;}
.kosong{padding:54px 24px; text-align:center; color:var(--ink-3); font-size:13.5px;}
.d-kepala{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:4px;}
.d-kepala h2{font-size:24px; letter-spacing:-.01em;}
.d-kepala .pr{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}
.d-skor{text-align:right;}
.d-skor .v{font-family:"IBM Plex Serif",Georgia,serif; font-size:34px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums;}
.d-meta{font-size:13px; color:var(--ink-2); margin:8px 0 16px;}
.seksi{margin-top:18px;}
.seksi > .st{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  padding-bottom:6px; border-bottom:1px solid var(--rule); margin-bottom:11px;
}
.modus-baris{display:grid; grid-template-columns:1fr 46px; gap:10px; align-items:center; margin-bottom:9px;}
.modus-baris .nm{font-size:12.5px;}
.modus-baris .nm .bb{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px; color:var(--ink-3); margin-left:5px;}
.modus-baris .alur{height:6px; background:var(--rule-2); border-radius:9px; overflow:hidden; margin-top:4px;}
.modus-baris .isi{height:100%; background:var(--teal);}
.modus-baris .ag{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; text-align:right;}

.aturan-baris{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--rule-2);}
.aturan-baris:last-child{border-bottom:none;}
.aturan-baris .kd{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; font-weight:500; min-width:26px; color:var(--teal);}
.aturan-baris .ket{flex:1; min-width:0;}
.aturan-baris .jd{font-size:12.8px; line-height:1.4;}
.aturan-baris .sm{font-size:11px; color:var(--ink-3); margin-top:3px;}

.panel{background:var(--tint-2); border:1px solid var(--rule-2); border-radius:3px; padding:13px 15px;}
.panel .bsr{font-family:"IBM Plex Serif",Georgia,serif; font-size:22px; font-weight:600; font-variant-numeric:tabular-nums;}
.kecil{font-size:11.5px; color:var(--ink-3); line-height:1.45;}
.nota{font-size:13.2px; line-height:1.62; white-space:pre-wrap;}
.nota p{margin:0 0 11px;}
.memuat{display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); font-size:13px;}
.titik{width:6px; height:6px; border-radius:50%; background:var(--teal); animation:denyut 1.1s infinite;}
@keyframes denyut{0%,100%{opacity:.25;} 50%{opacity:1;}}

.kaki{
  margin-top:16px; padding:14px 20px; background:var(--paper);
  border:1px solid var(--rule-2); border-radius:3px;
  font-size:11.5px; color:var(--ink-3); line-height:1.5;
}

@media (max-width:1100px){
  .kerja{grid-template-columns:1fr;}
  .detail{position:static;}
  .cakupan{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .shell{padding:14px 16px 32px;}
  .merek h1{font-size:23px;}
  .kpi .v{font-size:25px;}
  .col-opsional{display:none;}
}