/* Pantau Pindah — dasbor & halaman masuk. Tanpa pustaka luar (CSP 'self').
   Skala jarak tunggal: 4 · 8 · 12 · 16 · 20 · 24 · 32. Semua kartu memakai --pad yang sama. */
:root{
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --pad:22px; --celah:24px; --r:16px; --r-s:11px;

  --bg:#EDF1F7; --ink:#0F1E33; --ink-2:#3A4A5F; --muted:#627187; --faint:#95A2B3;
  --surface:#FFFFFF; --line:rgba(15,30,51,.09); --soft:rgba(15,30,51,.045); --soft-2:rgba(15,30,51,.08);
  --kaca:rgba(255,255,255,.66); --kaca-kuat:rgba(255,255,255,.80); --kaca-garis:rgba(255,255,255,.75);
  --kaca-bayang:0 1px 0 rgba(255,255,255,.6) inset,0 1px 2px rgba(15,30,51,.05),0 10px 30px -14px rgba(15,30,51,.18);
  --latar-1:rgba(42,108,181,.16); --latar-2:rgba(242,183,5,.13); --latar-3:rgba(107,81,186,.10);
  --navy:#17406A; --aksen:#F2B705; --di-navy:#FFFFFF;
  --ok:#1C8B57; --ok-soft:rgba(28,139,87,.12); --biru:#2A6CB5; --biru-soft:rgba(42,108,181,.12); --biru-muda:#9DC3EA;
  --kuning:#AD7500; --kuning-soft:rgba(242,183,5,.16); --merah:#C53A31; --merah-soft:rgba(197,58,49,.11);
  --ungu:#6B51BA; --ungu-soft:rgba(107,81,186,.12); --abu:rgba(15,30,51,.14); --grid:rgba(15,30,51,.07);
  --tirai:rgba(8,16,28,.35);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0A111A; --ink:#E9EFF6; --ink-2:#C4CEDA; --muted:#94A3B6; --faint:#66768A;
  --surface:#131E2B; --line:rgba(255,255,255,.08); --soft:rgba(255,255,255,.045); --soft-2:rgba(255,255,255,.08);
  --kaca:rgba(20,31,45,.58); --kaca-kuat:rgba(16,25,37,.80); --kaca-garis:rgba(255,255,255,.08);
  --kaca-bayang:0 1px 0 rgba(255,255,255,.04) inset,0 12px 32px -14px rgba(0,0,0,.6);
  --latar-1:rgba(56,120,200,.22); --latar-2:rgba(242,183,5,.08); --latar-3:rgba(120,90,210,.14);
  --navy:#A8CBF0; --aksen:#F5C542; --di-navy:#0A111A;
  --ok:#5CC690; --ok-soft:rgba(92,198,144,.14); --biru:#86B8EC; --biru-soft:rgba(134,184,236,.14); --biru-muda:#4F7BAA;
  --kuning:#EBB445; --kuning-soft:rgba(235,180,69,.14); --merah:#F2827A; --merah-soft:rgba(242,130,122,.14);
  --ungu:#B6A4F0; --ungu-soft:rgba(182,164,240,.14); --abu:rgba(255,255,255,.12); --grid:rgba(255,255,255,.06);
  --tirai:rgba(0,0,0,.5); color-scheme:dark; }}
:root[data-theme="dark"]{
  --bg:#0A111A; --ink:#E9EFF6; --ink-2:#C4CEDA; --muted:#94A3B6; --faint:#66768A;
  --surface:#131E2B; --line:rgba(255,255,255,.08); --soft:rgba(255,255,255,.045); --soft-2:rgba(255,255,255,.08);
  --kaca:rgba(20,31,45,.58); --kaca-kuat:rgba(16,25,37,.80); --kaca-garis:rgba(255,255,255,.08);
  --kaca-bayang:0 1px 0 rgba(255,255,255,.04) inset,0 12px 32px -14px rgba(0,0,0,.6);
  --latar-1:rgba(56,120,200,.22); --latar-2:rgba(242,183,5,.08); --latar-3:rgba(120,90,210,.14);
  --navy:#A8CBF0; --aksen:#F5C542; --di-navy:#0A111A;
  --ok:#5CC690; --ok-soft:rgba(92,198,144,.14); --biru:#86B8EC; --biru-soft:rgba(134,184,236,.14); --biru-muda:#4F7BAA;
  --kuning:#EBB445; --kuning-soft:rgba(235,180,69,.14); --merah:#F2827A; --merah-soft:rgba(242,130,122,.14);
  --ungu:#B6A4F0; --ungu-soft:rgba(182,164,240,.14); --abu:rgba(255,255,255,.12); --grid:rgba(255,255,255,.06);
  --tirai:rgba(0,0,0,.5); color-scheme:dark; }
@media (max-width:600px){:root{--pad:16px;--celah:16px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font:14.5px/1.55 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 600px at -5% -10%,var(--latar-1),transparent 60%),
    radial-gradient(800px 560px at 105% 0%,var(--latar-3),transparent 60%),
    radial-gradient(900px 600px at 80% 110%,var(--latar-2),transparent 60%),
    var(--bg);
  background-attachment:fixed}
b,strong{font-weight:650}
code{font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;font-size:.88em;background:var(--soft-2);padding:1px 6px;border-radius:6px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--aksen);outline-offset:2px}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ik{width:16px;height:16px;flex:none}

/* Permukaan kaca — dipakai semua kartu. Tanpa dukungan backdrop-filter: permukaan padat. */
.kartu,.guna,.kpi-item,.atas,.laci,.masuk-kartu{background:var(--kaca);border:1px solid var(--kaca-garis);box-shadow:var(--kaca-bayang);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .kartu,.guna,.kpi-item,.atas,.laci,.masuk-kartu{background:var(--surface)}}

/* ── Kepala ── */
.atas{position:sticky;top:0;z-index:5;background:var(--kaca-kuat);border-width:0 0 1px;border-color:var(--line);border-radius:0;box-shadow:none;padding-inline:var(--celah);padding-top:env(safe-area-inset-top,0px)}
.atas-isi{max-width:1280px;margin:0 auto;min-height:64px;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s6)}
.merek{display:flex;align-items:center;gap:var(--s3);margin-right:auto;color:inherit;text-decoration:none}
.merek img{border-radius:9px;display:block}
.merek b{display:block;font-size:15.5px;line-height:1.2;letter-spacing:-.01em}
.merek small{display:block;font-size:12px;color:var(--muted)}
.tab{display:flex;gap:var(--s1);background:var(--soft);padding:var(--s1);border-radius:12px;border:1px solid var(--line)}
.tab button{background:none;border:0;height:32px;padding:0 var(--s4);border-radius:9px;font-weight:600;font-size:13.5px;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s,color .15s}
.tab button:hover{color:var(--ink)}
.tab button[aria-selected="true"]{background:var(--kaca-kuat);color:var(--ink);box-shadow:0 1px 3px rgba(15,30,51,.14)}
.hitung{font-size:11px;font-weight:700;background:var(--soft-2);color:var(--muted);border-radius:99px;padding:0 7px;font-variant-numeric:tabular-nums}
.hitung:empty{display:none}
.alat{display:flex;align-items:center;gap:var(--s3)}
.waktu{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.saklar{display:inline-flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--muted);cursor:pointer;user-select:none}
.saklar input{position:absolute;opacity:0;width:1px;height:1px}
.saklar-jalur{width:32px;height:19px;border-radius:99px;background:var(--abu);position:relative;transition:background .2s}
.saklar-jalur::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.saklar input:checked+.saklar-jalur{background:var(--biru)}
.saklar input:checked+.saklar-jalur::after{transform:translateX(13px)}
.saklar input:focus-visible+.saklar-jalur{outline:3px solid var(--aksen);outline-offset:2px}
.tombol-ikon{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--soft);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:background .15s}
.tombol-ikon:hover{background:var(--soft-2)}
.tombol-ikon .ik{width:18px;height:18px;display:none}
/* Ikon = tema yang sedang aktif (matahari = terang, bulan = gelap). */
html:not([data-tema="gelap"]) .tombol-ikon .t-terang,html[data-tema="gelap"] .tombol-ikon .t-gelap{display:block}
.keluar{margin:0}
.tombol{appearance:none;border:1px solid transparent;background:var(--navy);color:var(--di-navy);border-radius:10px;height:36px;padding:0 var(--s4);font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1;transition:filter .15s,background .15s}
.tombol:hover{filter:brightness(1.08)}
.tombol.hantu{background:var(--soft);color:var(--ink);border-color:var(--line)}
.tombol.hantu:hover{background:var(--soft-2);filter:none}
.tombol.kecil{padding:0 var(--s3);font-size:13px}
@media (max-width:860px){.alat .waktu{display:none}.tab{order:3;width:100%}.tab button{flex:1;justify-content:center}.atas-isi{padding-block:var(--s3)}}

/* ── Tata letak ── */
.wadah{max-width:1280px;margin:0 auto;padding-inline:var(--celah);padding-block:var(--s8) 56px}
.panel-tab{display:flex;flex-direction:column;gap:var(--celah)}
.judul-bagian{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s3)}
.judul-bagian h1{margin:0 0 var(--s1)}
h1{font-size:22px;line-height:1.25;font-weight:700;margin:0;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:15px;line-height:1.35;font-weight:700;margin:0;letter-spacing:-.005em}
.ket{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0}
.catatan{max-width:110ch}
.kartu{border-radius:var(--r);padding:var(--pad)}
.kartu-kepala{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4);margin-bottom:var(--s4)}
.dua{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--celah)}
@media (max-width:940px){.dua{grid-template-columns:1fr}}
.legenda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:12.5px;color:var(--muted)}
.legenda li{display:flex;align-items:center;gap:6px}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px}
.sw.selesai,.sw.pakai{background:var(--ok)} .sw.berjalan{background:var(--biru)} .sw.belum{background:var(--abu)} .sw.sisa{background:var(--soft-2);box-shadow:inset 0 0 0 1px var(--abu)} .sw.mulai{background:var(--navy)} .sw.daftar{background:var(--biru-muda)}
.batang{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--soft-2)}
.batang i{display:block;height:100%;transition:flex-grow .6s ease,width .6s ease}
.batang .selesai,.batang .pakai{background:var(--ok)} .batang .berjalan{background:var(--biru)} .batang .belum{background:var(--abu)} .batang .sisa{background:transparent} .batang .daftar{background:var(--biru-muda)}
.kosong{color:var(--faint);font-size:13.5px;padding:var(--s6) 0;text-align:center;list-style:none;margin:0}

/* ── Kartu berisi daftar (kepala · tabel/daftar · kaki) ── */
.daftar-kartu{padding:0;overflow:hidden}
.daftar-kartu-kepala{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s4);padding:var(--pad);border-bottom:1px solid var(--line)}
.judul-kecil{display:flex;flex-direction:column;gap:2px;min-width:220px}
.daftar-kartu-kaki{padding:var(--s3) var(--pad);border-top:1px solid var(--line)}
.daftar-kartu-kaki:empty{display:none}
.daftar-kartu .tabel-bungkus{border:0;border-radius:0}
.alat-daftar{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.alat-daftar input[type=search],.alat-daftar select{font:inherit;font-size:13.5px;height:36px;padding:0 var(--s3);border:1px solid var(--line);border-radius:10px;background:var(--kaca-kuat);color:var(--ink);min-width:0}
.alat-daftar select{padding-right:var(--s6)}
.cari{position:relative;display:flex;align-items:center;flex:1 1 220px;max-width:300px}
.cari .ik{position:absolute;left:11px;color:var(--faint);pointer-events:none}
.cari input{width:100%;padding-left:34px!important}

/* ── Penggunaan ── */
.pahlawan{display:flex;flex-direction:column;gap:var(--s5)}
.angka-duo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s6)}
@media (max-width:760px){.angka-duo{grid-template-columns:1fr}}
.angka{display:flex;flex-direction:column;gap:2px;padding-left:var(--s4);border-left:3px solid var(--line)}
.angka b{margin:var(--s1) 0}
.angka.utama{border-left-color:var(--ok)}
.angka .label{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650;color:var(--muted)}
.angka b{font-size:34px;line-height:1.1;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.angka.utama b{color:var(--ok)}
.angka small{font-size:12.5px;line-height:1.45;color:var(--muted)}
.angka small.pct{font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pahlawan .batang{height:12px}
.pahlawan .legenda{margin-top:calc(var(--s2) * -1)}
.guna-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--celah)}
@media (max-width:1160px){.guna-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.guna-grid{grid-template-columns:1fr}}
.guna{border-radius:var(--r);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);transition:transform .2s}
.guna:hover{transform:translateY(-2px)}
.guna-kepala{display:flex;align-items:center;gap:var(--s3)}
.guna-kepala>div{min-width:0}
.lyn-ikon{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center}
.lyn-ikon svg{width:20px;height:20px}
.lyn-zimbra{background:var(--biru-soft);color:var(--biru)} .lyn-drive{background:var(--ok-soft);color:var(--ok)}
.lyn-office{background:var(--kuning-soft);color:var(--kuning)} .lyn-zoom{background:var(--ungu-soft);color:var(--ungu)}
.guna-kepala b{display:block;font-size:14.5px;line-height:1.25}
.guna-kepala small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.titik-status{margin-left:auto;width:9px;height:9px;border-radius:50%;background:var(--abu);flex:none}
.titik-status.ok{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)} .titik-status.gagal{background:var(--merah);box-shadow:0 0 0 3px var(--merah-soft)}
.metrik{display:flex;flex-direction:column;gap:6px}
.metrik-baris{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.metrik-baris span{font-size:12.5px;font-weight:600;color:var(--muted)}
.metrik-baris b{font-size:22px;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums}
.metrik-baris em{font-style:normal;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;margin-left:6px}
.metrik .batang{height:6px}
.metrik.pakai b{color:var(--ok)}
.guna-kaki{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s1) var(--s2);font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:var(--s3);margin-top:auto;font-variant-numeric:tabular-nums}
.guna-kaki b{color:var(--ink)}
.guna-status{font-size:11.5px;line-height:1.45;color:var(--faint)}
.guna-status.gagal{color:var(--merah)}
.guna.mati .metrik-baris b{color:var(--faint)}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap}
.st i{width:8px;height:8px;border-radius:50%;flex:none}
.st.pakai i{background:var(--ok)} .st.daftar i{background:var(--biru-muda)} .st.tidak i{background:transparent;border:1.5px solid var(--abu)}
.st.pakai{color:var(--ink)} .st.daftar{color:var(--ink-2)} .st.tidak{color:var(--faint)}

/* ── KPI migrasi ── */
.kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--celah)}
.kpi-item{border-radius:var(--r);padding:var(--s4) var(--s5);display:flex;gap:var(--s3);align-items:flex-start}
.kpi-item>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ikon-kpi{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--soft-2);color:var(--navy)}
.ikon-kpi svg{width:20px;height:20px}
.ikon-kpi.biru{background:var(--biru-soft);color:var(--biru)} .ikon-kpi.hijau{background:var(--ok-soft);color:var(--ok)} .ikon-kpi.merah{background:var(--merah-soft);color:var(--merah)}
.kpi-item span{font-size:12.5px;font-weight:600;color:var(--muted)}
.kpi-item b{font-size:28px;line-height:1.15;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi-item small{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
@media (max-width:860px){.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Progres per fase ── */
.fase-daftar{display:flex;flex-direction:column;gap:var(--s4)}
.fase-baris{display:grid;grid-template-columns:200px minmax(0,1fr) 230px;gap:var(--s4);align-items:center}
.fase-nama{display:flex;align-items:center;gap:var(--s3);min-width:0}
.fase-nama>div{min-width:0}
.huruf{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:750;font-size:13px;background:var(--soft-2);color:var(--navy)}
.fase-nama b{display:block;font-size:14px}
.fase-nama small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fase-angka{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.fase-angka b{color:var(--ink)}
@media (max-width:780px){.fase-baris{grid-template-columns:1fr;gap:var(--s2)}.fase-angka{text-align:left}}

/* ── Grafik & berhenti ── */
.grafik{width:100%;overflow-x:auto}
.grafik svg{display:block;width:100%;min-width:460px;height:auto}
.grafik text{fill:var(--faint);font-size:11px;font-family:inherit}
.grafik .garis-grid{stroke:var(--grid);stroke-width:1}
.grafik .b-mulai{fill:var(--navy)} .grafik .b-selesai{fill:var(--ok)}
.grafik .garis{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.grafik .garis.tebal{stroke-width:3.2}
.grafik+.ket{margin-top:var(--s3)}
.grafik .kosong{padding:var(--s8) 0}
.berhenti{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.berhenti li{display:grid;grid-template-columns:44px minmax(0,1fr) 36px;gap:var(--s3);align-items:center}
.berhenti li.kosong{display:block}
.kode{font-weight:700;font-size:12px;background:var(--soft-2);color:var(--navy);border-radius:7px;text-align:center;padding:3px 0;font-variant-numeric:tabular-nums}
.berhenti .judul{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.berhenti .bar{height:5px;background:var(--soft-2);border-radius:99px;margin-top:5px;overflow:hidden}
.berhenti .bar i{display:block;height:100%;background:var(--biru);border-radius:99px}
.berhenti em{font-style:normal;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}

/* ── Daftar pengguna migrasi ── */
.segmen{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.segmen button{border:0;background:none;height:28px;padding:0 11px;border-radius:7px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.segmen button[aria-pressed="true"]{background:var(--kaca-kuat);color:var(--ink);box-shadow:0 1px 3px rgba(15,30,51,.14)}
.daftar-kepala,.baris-pegawai{display:grid;grid-template-columns:minmax(200px,1.5fr) 150px minmax(200px,1.6fr) 130px 96px;gap:var(--s4);align-items:center;padding-inline:var(--pad)}
.daftar-kepala{padding-block:var(--s3);background:var(--soft);border-bottom:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.daftar{list-style:none;margin:0;padding:0}
.daftar>li+li{border-top:1px solid var(--line)}
.daftar>li.kosong{padding:var(--s6) var(--pad)}
.baris-pegawai{width:100%;border:0;background:none;text-align:left;padding-block:var(--s3);cursor:pointer;transition:background .12s}
.baris-pegawai:hover{background:var(--soft)}
.orang{display:flex;align-items:center;gap:var(--s3);min-width:0}
.orang>div{min-width:0}
.avatar{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;background:var(--biru-soft);color:var(--biru)}
.avatar.besar{width:44px;height:44px;font-size:15px}
.orang b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orang small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jejak{display:flex;gap:var(--s1)}
.jejak span{position:relative;width:30px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:11.5px;font-weight:750;overflow:hidden;border:1px solid transparent}
.jejak .tidak{color:var(--faint);border:1px dashed var(--abu);background:none}
.jejak .belum{background:var(--soft-2);color:var(--muted)}
.jejak .berjalan{background:var(--biru-soft);color:var(--biru);border-color:var(--biru)}
.jejak .berjalan i{position:absolute;left:0;bottom:0;height:3px;background:var(--biru)}
.jejak .selesai{background:var(--ok);color:#fff}
.posisi{min-width:0}
.posisi b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.posisi small{display:block;font-size:12px;color:var(--muted)}
.pil{display:inline-block;border-radius:99px;padding:2px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.p-tervalidasi{background:var(--ok-soft);color:var(--ok)} .p-selesai-mandiri{background:var(--biru-soft);color:var(--biru)}
.p-berjalan{background:var(--kuning-soft);color:var(--kuning)} .p-macet{background:var(--merah-soft);color:var(--merah)}
.aktif{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:1000px){
  .daftar-kepala{display:none}
  .baris-pegawai{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"orang status" "jejak aktif" "posisi posisi";gap:var(--s2) var(--s3)}
  .baris-pegawai .orang{grid-area:orang} .baris-pegawai .jejak{grid-area:jejak} .baris-pegawai .posisi{grid-area:posisi}
  .baris-pegawai .status{grid-area:status;justify-self:end} .baris-pegawai .aktif{grid-area:aktif;justify-self:end}
}

/* ── Tabel ── */
.tabel-bungkus{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-s)}
.tabel{border-collapse:collapse;width:100%;font-size:13.5px}
.tabel th,.tabel td{text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.tabel th{background:var(--soft);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.daftar-kartu .tabel th:first-child,.daftar-kartu .tabel td:first-child{padding-left:var(--pad)}
.daftar-kartu .tabel th:last-child,.daftar-kartu .tabel td:last-child{padding-right:var(--pad)}
.tabel tr:last-child td{border-bottom:0}
.tabel tbody tr:hover{background:var(--soft)}
.tabel td.n{text-align:right;font-variant-numeric:tabular-nums}
.tabel td.kosong{white-space:normal}

/* ── Laci detail ── */
.tirai{position:fixed;inset:0;background:var(--tirai);z-index:20;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.laci{position:fixed;top:0;right:0;bottom:0;width:min(540px,100%);background:var(--kaca-kuat);border-width:0 0 0 1px;border-color:var(--line);border-radius:0;z-index:21;display:flex;flex-direction:column;animation:masuk .22s ease}
@keyframes masuk{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.laci-kepala{display:flex;align-items:center;gap:var(--s3);padding:var(--s5) var(--pad);padding-top:calc(var(--s5) + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line)}
.laci-id{min-width:0;flex:1}
.laci-id b{display:block;font-size:16px}
.laci-id small{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tutup{border:1px solid var(--line);background:var(--soft);width:34px;height:34px;border-radius:9px;font-size:20px;line-height:1;cursor:pointer;color:var(--muted)}
.laci-isi{overflow-y:auto;padding:var(--pad);padding-bottom:calc(var(--s8) + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:var(--s6)}
.sorot{border-radius:var(--r-s);padding:var(--s4);background:var(--biru-soft);display:flex;flex-direction:column;gap:3px}
.sorot span{font-size:12px;font-weight:650;color:var(--biru)}
.sorot b{font-size:15px}
.sorot small{font-size:12.5px;color:var(--muted)}
.sorot.selesai{background:var(--ok-soft)} .sorot.selesai span{color:var(--ok)}
.sorot.macet{background:var(--merah-soft)} .sorot.macet span{color:var(--merah)}
.laci h3{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s3)}
.fase-blok{border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.fase-blok+.fase-blok{margin-top:var(--s3)}
.fase-blok-kepala{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--soft)}
.fase-blok-kepala b{flex:1;font-size:14px}
.fase-blok.tidak .fase-blok-kepala{background:none;color:var(--faint)}
.tahap{list-style:none;margin:0;padding:var(--s3) var(--s4)}
.tahap li{position:relative;display:flex;gap:var(--s3);padding:5px 0;font-size:13px;color:var(--muted)}
.tahap li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--abu);margin-top:1px;background:var(--surface)}
.tahap li:not(:last-child)::after{content:"";position:absolute;left:7px;top:23px;bottom:-5px;width:2px;background:var(--line)}
.tahap li.sudah{color:var(--ink)}
.tahap li.sudah::before{background:var(--ok);border-color:var(--ok)}
.tahap li.sudah::after{background:var(--ok)}
.tahap li.kini{color:var(--ink);font-weight:650}
.tahap li.kini::before{border-color:var(--biru);box-shadow:inset 0 0 0 3px var(--surface);background:var(--biru)}
.tahap .kd{font-variant-numeric:tabular-nums;color:var(--faint);font-weight:600;min-width:28px}
.tahap em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--biru);background:var(--biru-soft);border-radius:99px;padding:0 var(--s2);margin-left:auto;align-self:center}
.bukti{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.bukti div{border:1px solid var(--line);border-radius:var(--r-s);padding:var(--s3) var(--s4)}
.bukti span{display:block;font-size:12px;color:var(--muted)}
.bukti b{display:block;font-size:17px;font-variant-numeric:tabular-nums}
.riwayat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.riwayat li{display:grid;grid-template-columns:100px minmax(0,1fr);gap:var(--s3);padding:var(--s2) 0;font-size:13px;border-top:1px solid var(--line)}
.riwayat li:first-child{border-top:0}
.riwayat time{color:var(--faint);font-variant-numeric:tabular-nums;font-size:12px}
.riwayat .penting{color:var(--ok);font-weight:650}
.layanan-daftar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.layanan-daftar li{border:1px solid var(--line);border-radius:var(--r-s);padding:var(--s3);display:flex;flex-direction:column;gap:2px}
.layanan-daftar b{font-size:13px}
.layanan-daftar span{font-size:12px;color:var(--muted)}
.layanan-daftar .ya{color:var(--ok);font-weight:650}

/* ── Halaman masuk ── */
.hal-masuk{display:flex;align-items:center;justify-content:center;padding-inline:var(--s4);padding-block:var(--s8)}
.masuk{width:100%;max-width:420px}
.masuk-kartu{border-radius:20px;padding:var(--s8) 30px var(--s6)}
.masuk-merek{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.masuk-merek img{border-radius:11px;display:block}
.masuk-kartu .alis{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.masuk-kartu h1{font-size:24px;line-height:1.2;margin:2px 0 0}
.masuk-kartu .sub{font-size:13.5px;margin:0 0 var(--s5);color:var(--muted)}
.masuk-form{display:flex;flex-direction:column;gap:6px}
.masuk-form label{font-size:13px;font-weight:650;margin-top:var(--s2)}
.masuk-form input{font:inherit;font-size:15px;height:44px;padding:0 var(--s3);border:1px solid var(--line);border-radius:11px;background:var(--kaca-kuat);color:var(--ink);width:100%;transition:border-color .15s,box-shadow .15s}
.masuk-form input:focus{outline:none;border-color:var(--biru);box-shadow:0 0 0 4px var(--biru-soft)}
.tombol.besar{margin-top:var(--s5);height:46px;font-size:15px;width:100%}
.masuk-pesan{margin:0 0 6px;padding:10px var(--s3);border-radius:10px;font-size:13.5px;border-left:4px solid}
.masuk-pesan.galat{background:var(--merah-soft);color:var(--merah);border-color:var(--merah)}
.masuk-pesan.info{background:var(--biru-soft);color:var(--biru);border-color:var(--biru)}
.masuk-kaki{margin:var(--s5) 0 0;font-size:12px;color:var(--muted);text-align:center}
.masuk-tema{position:fixed;top:calc(var(--s4) + env(safe-area-inset-top,0px));right:var(--s4)}

/* ── Akun (chip & menu di kepala) ── */
.akun-menu{position:relative}
.akun-chip{display:flex;align-items:center;gap:var(--s2);height:40px;padding:0 var(--s2) 0 4px;border:1px solid var(--line);border-radius:99px;background:var(--soft);cursor:pointer;max-width:220px;transition:background .15s}
.akun-chip:hover{background:var(--soft-2)}
.akun-chip .ik{color:var(--muted)}
.avatar.kecil{width:30px;height:30px;font-size:11.5px}
.akun-teks{display:flex;flex-direction:column;min-width:0;text-align:left;line-height:1.2}
.akun-teks b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.akun-teks small{font-size:11px;color:var(--muted)}
.akun-panel{position:absolute;right:0;top:calc(100% + 8px);width:264px;z-index:12;border-radius:var(--r-s);padding:var(--s2);display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 40px -12px rgba(8,16,28,.28)}
.akun-panel-kepala{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:var(--s2) var(--s3) var(--s3)}
.akun-panel-kepala b{font-size:14px}
.akun-panel-kepala small{font-size:12px;color:var(--muted);margin-bottom:var(--s1)}
.akun-panel-izin{margin:0;padding:var(--s2) var(--s3) var(--s3);font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
.akun-panel form{margin:0}
.akun-panel-item{display:block;width:100%;text-align:left;border:0;background:none;padding:var(--s2) var(--s3);border-radius:8px;font-size:13.5px;color:var(--ink);text-decoration:none;cursor:pointer}
.akun-panel-item:hover{background:var(--soft-2)}
.akun-panel>a.akun-panel-item{margin-top:var(--s1)}
@media (max-width:860px){.akun-teks{display:none}.akun-chip{padding-right:var(--s1)}}

/* ── Peran ── */
.peran-pil{display:inline-block;border-radius:99px;padding:2px 10px;font-size:11.5px;font-weight:700;white-space:nowrap;background:var(--soft-2);color:var(--ink-2)}
.peran-pil.p-admin{background:var(--ungu-soft);color:var(--ungu)}
.peran-pil.p-pendamping{background:var(--biru-soft);color:var(--biru)}
.peran-pil.p-pemantau{background:var(--ok-soft);color:var(--ok)}
.peran-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--celah)}
@media (max-width:860px){.peran-grid{grid-template-columns:1fr}}
.peran-kartu{border:1px solid var(--line);border-radius:var(--r-s);padding:var(--s4);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);background:var(--soft)}
.peran-kartu p{margin:0;font-size:13px;color:var(--ink-2)}

/* ── Tab Akses ── */
.akun-form{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 180px auto;gap:var(--s3) var(--s4);align-items:end;padding:var(--pad);border-bottom:1px solid var(--line);background:var(--soft)}
.akun-form .bidang{display:flex;flex-direction:column;gap:6px;min-width:0}
.akun-form label{font-size:12.5px;font-weight:650;color:var(--ink-2)}
.akun-form input,.akun-form select,.pilih-peran{font:inherit;font-size:13.5px;height:36px;padding:0 var(--s3);border:1px solid var(--line);border-radius:10px;background:var(--kaca-kuat);color:var(--ink);min-width:0;width:100%}
.akun-form input:focus,.akun-form select:focus{outline:none;border-color:var(--biru);box-shadow:0 0 0 4px var(--biru-soft)}
.akun-form .aksi{flex-direction:row}
.akun-form-ket{grid-column:1/-1}
@media (max-width:900px){.akun-form{grid-template-columns:1fr 1fr}.akun-form .aksi{grid-column:1/-1}}
@media (max-width:520px){.akun-form{grid-template-columns:1fr}}
.pilih-peran{width:auto;height:32px;padding-right:var(--s6)}
.pilih-peran:disabled{opacity:.65}
.tabel tr.redup td{opacity:.6}
.anda{margin-left:var(--s2);font-size:11px;font-weight:700;color:var(--muted);background:var(--soft-2);border-radius:99px;padding:0 7px;vertical-align:1px}
.aksi-sel{width:1%}
.aksi-baris{display:flex;gap:6px;justify-content:flex-end}
.tombol.kecil{height:32px}
.bahaya-teks{color:var(--merah)!important}
.tombol.bahaya{background:var(--merah);color:#fff}
.st.kunci i{background:var(--kuning)} .st.kunci{color:var(--kuning)}
.galat-teks{color:var(--merah)}
.aksi-pil{display:inline-block;border-radius:7px;padding:1px 8px;font-size:12px;font-weight:650;background:var(--soft-2);color:var(--ink-2)}
.aksi-pil.buruk{background:var(--merah-soft);color:var(--merah)}
.aksi-pil.kelola{background:var(--ungu-soft);color:var(--ungu)}
.tabel td.lembut{color:var(--muted);font-size:12.5px}
.tabel td.n-kiri{font-variant-numeric:tabular-nums}

/* ── Dialog ── */
.dialog-tirai{position:fixed;inset:0;z-index:30;background:var(--tirai);display:grid;place-items:center;padding:var(--s4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dialog{width:min(440px,100%);border-radius:var(--r);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3);background:var(--surface);border:1px solid var(--line);box-shadow:0 24px 60px -18px rgba(8,16,28,.45);animation:muncul .18s ease}
@keyframes muncul{from{transform:translateY(8px);opacity:.5}to{transform:none;opacity:1}}
.dialog-aksi{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:var(--s2)}
.sandi-kotak{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border:1px dashed var(--abu);border-radius:var(--r-s);background:var(--soft)}
.sandi-kotak code{flex:1;background:none;padding:0;font-size:17px;letter-spacing:.04em;user-select:all;word-break:break-all}

/* ── Halaman ganti sandi ── */
.syarat{margin:var(--s1) 0 0;font-size:12px;color:var(--muted)}
.tautan{border:0;background:none;padding:0;font:inherit;font-size:13px;color:var(--biru);cursor:pointer;text-decoration:none}
.tautan:hover{text-decoration:underline}
.masuk-kaki:has(.batal:empty){display:none}
form.masuk-kaki{margin-top:var(--s3)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}