/* Layout: sticky green bar with lembaga switch, tab nav, then summary-first panels on a quiet sage ground */
:root{
  --bg:#f3f5f1; --surface:#ffffff; --sunk:#eaeee8; --ink:#16241c; --muted:#5b6a61; --line:#d9e0d8;
  --green:#0e5a3a; --green-ink:#ffffff; --green-soft:#e1eee6; --gold:#a8791f; --gold-soft:#f6ecd6;
  --ula:#a8791f; --mts:#0e5a3a; --ma:#2c6584;
  --ok:#1f7a4a; --ok-soft:#e0f1e7; --warn:#a96a08; --warn-soft:#fbefd9; --bad:#b0392e; --bad-soft:#f8e3e0;
  --f-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-ar:"Amiri","Traditional Arabic",serif;
  --r:10px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e1411; --surface:#151d18; --sunk:#1b2520; --ink:#e4ebe6; --muted:#93a399; --line:#28352e;
  --green:#3fae7a; --green-ink:#08130d; --green-soft:#17301f; --gold:#d6aa52; --gold-soft:#2f2614;
  --ula:#d6aa52; --mts:#3fae7a; --ma:#5aa6cc;
  --ok:#55c48a; --ok-soft:#163222; --warn:#e2a548; --warn-soft:#33270f; --bad:#ec7b6f; --bad-soft:#3a1d19;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e1411; --surface:#151d18; --sunk:#1b2520; --ink:#e4ebe6; --muted:#93a399; --line:#28352e;
  --green:#3fae7a; --green-ink:#08130d; --green-soft:#17301f; --gold:#d6aa52; --gold-soft:#2f2614;
  --ula:#d6aa52; --mts:#3fae7a; --ma:#5aa6cc;
  --ok:#55c48a; --ok-soft:#163222; --warn:#e2a548; --warn-soft:#33270f; --bad:#ec7b6f; --bad-soft:#3a1d19;
  color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1,h2,h3{margin:0;text-wrap:balance}

.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.mark{width:40px;height:40px;flex:none}
.brand h1{font-size:17px;font-weight:800;letter-spacing:-.01em}
.brand p{margin:0;font-size:12px;color:var(--muted)}
.ar{font-family:var(--f-ar);color:var(--gold);font-size:15px;margin-left:6px}
.ctrl{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.proto{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);background:var(--gold-soft);padding:4px 8px;border-radius:99px}
select.lb{appearance:none;background:var(--sunk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23889'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid var(--line);border-radius:8px;padding:8px 32px 8px 12px;font-weight:600}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav button{background:none;border:0;padding:10px 14px;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap;cursor:pointer}
.nav button[aria-current="page"]{color:var(--green);border-bottom-color:var(--green)}
.nav button:hover{color:var(--ink)}

main{padding-block:24px 64px}
.view{display:grid;gap:20px}
.vhead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.vhead h2{font-size:22px;font-weight:800;letter-spacing:-.02em}
.vhead p{margin:2px 0 0;color:var(--muted)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0}
.panel h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:14px;display:flex;justify-content:space-between;gap:8px}
.grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g21{grid-template-columns:2fr 1fr}
@media (max-width:900px){.g3,.g21{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}

.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:grid;gap:2px}
.tile .k{font-size:12px;color:var(--muted);font-weight:600}
.tile .v{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.tile .s{font-size:12px;color:var(--muted)}
.tile.warn .v{color:var(--warn)} .tile.ok .v{color:var(--ok)} .tile.hero{background:var(--green);border-color:var(--green);color:var(--green-ink)}
.tile.hero .k,.tile.hero .s{color:inherit;opacity:.85}

.funnel{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
@media (max-width:700px){.funnel{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fstep{display:grid;gap:6px}
.fstep .lab{font-size:12px;color:var(--muted);font-weight:600}
.fstep .num{font-size:18px;font-weight:800}
.track{height:8px;border-radius:99px;background:var(--sunk);overflow:hidden}
.track i{display:block;height:100%;border-radius:inherit;background:var(--green)}

.kuota{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);border-top:4px solid var(--c)}
.kuota .nm{font-weight:800;font-size:15px}
.kuota .row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.kuota .big{font-size:26px;font-weight:800;color:var(--ink)}
.kuota .track i{background:var(--c)}
.mini{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.mini b{color:var(--ink)}

.hbar{display:grid;grid-template-columns:110px 1fr 36px;gap:10px;align-items:center;font-size:13px;margin-bottom:8px}
.hbar .track{height:10px}
.hbar span:last-child{text-align:right;font-weight:700}
.split{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--sunk);margin:6px 0 4px}
.split i:first-child{background:var(--green)} .split i:last-child{background:var(--gold)}
.legend{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.legend b{color:var(--ink)}
.dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:1px}

ol.rank{list-style:none;margin:0;padding:0;display:grid;gap:8px}
ol.rank li{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
ol.rank li:last-child{border:0;padding:0}
ol.rank b{font-weight:700}

.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;background:var(--sunk);padding:10px 12px;white-space:nowrap}
td{padding:9px 12px;border-top:1px solid var(--line);white-space:nowrap}
td.num,th.num{text-align:right}
tr.cut td{border-top:2px solid var(--gold)}
.mono{font-size:12px;color:var(--muted);letter-spacing:.02em}
.panel .tbl{border:0;border-radius:0;margin:0 -18px -18px}

.pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--sunk);color:var(--muted)}
.p0{background:var(--warn-soft);color:var(--warn)} .p1{background:var(--green-soft);color:var(--green)}
.p2,.p3{background:var(--sunk);color:var(--ink)} .pok{background:var(--ok-soft);color:var(--ok)}
.pcad{background:var(--gold-soft);color:var(--gold)} .pbad{background:var(--bad-soft);color:var(--bad)}
.lbt{font-size:11px;font-weight:700;color:var(--c)}
.lb-ula{--c:var(--ula)} .lb-mts{--c:var(--mts)} .lb-ma{--c:var(--ma)}

.btn{border:1px solid var(--line);background:var(--surface);padding:8px 14px;border-radius:8px;font-weight:700;cursor:pointer}
.btn:hover{border-color:var(--green)}
.btn.pri{background:var(--green);border-color:var(--green);color:var(--green-ink)}
.btn.sm{padding:4px 10px;font-size:12px}
.seg{display:inline-flex;background:var(--sunk);border-radius:8px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:6px 12px;border-radius:6px;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.inp{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 12px;min-width:0}
.inp.search{flex:1;min-width:200px}

.task{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.task:last-child{border:0}
.task b{font-size:20px}
.task small{display:block;color:var(--muted)}

/* Tes */
.uji{display:grid;gap:8px}
.uji li{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.uji ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cbt{display:grid;gap:14px}
.cbt-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.timer{font-weight:800;font-size:20px;color:var(--green)}
.qnav{display:flex;gap:6px;flex-wrap:wrap}
.qnav button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-weight:700;cursor:pointer}
.qnav button.done{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.qnav button.cur{outline:2px solid var(--gold)}
.q{font-size:16px;font-weight:600}
.opts{display:grid;gap:8px}
.opts label{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.opts label:has(input:checked){border-color:var(--green);background:var(--green-soft)}
.opts .arab{font-family:var(--f-ar);font-size:22px;line-height:1}
.rub{display:grid;gap:10px}
.rub label{display:grid;grid-template-columns:1fr 84px;gap:10px;align-items:center;font-size:13px}
.rub input{text-align:right}

/* Wawancara */
.who{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.ava{width:48px;height:48px;border-radius:12px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-weight:800;font-size:17px;flex:none}
.who .meta{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.who .meta b{color:var(--ink);font-weight:600}
.asp{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:6px 14px;padding:14px 0;border-top:1px solid var(--line);align-items:start}
.asp .n{font-weight:800;color:var(--gold)}
.asp .t{font-weight:700}
.asp .h{font-size:12px;color:var(--muted);font-style:italic}
.asp .note{grid-column:2/4}
@media (max-width:640px){.asp{grid-template-columns:24px minmax(0,1fr)}.asp .scale{grid-column:2}.asp .note{grid-column:2}}
.scale{display:flex;gap:4px}
.scale label{position:relative}
.scale input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.scale span{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--line);font-weight:800;color:var(--muted)}
.scale input:checked+span{background:var(--green);border-color:var(--green);color:var(--green-ink)}
.scale input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.note input{width:100%}
.concl{display:flex;gap:8px;flex-wrap:wrap}
.concl label{position:relative}
.concl input{position:absolute;opacity:0;inset:0;margin:0}
.concl span{display:block;padding:8px 12px;border-radius:8px;border:1px solid var(--line);font-weight:700;font-size:13px;cursor:pointer}
.concl input:checked+span{border-color:var(--green);background:var(--green-soft);color:var(--green)}
.sumbar{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin-bottom:env(safe-area-inset-bottom,0px)}
.sumbar .sc{font-size:22px;font-weight:800}
.fieldrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:700px){.fieldrow{grid-template-columns:1fr}}
.fieldrow label{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.bobot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:12px;align-items:end}
@media (max-width:700px){.bobot{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bobot label{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.bobot .tot{font-weight:800;padding:8px 0}
.bobot .tot.bad{color:var(--bad)}
td select{background:var(--sunk);border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-size:12px;font-weight:700}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:99px;font-weight:700;z-index:20;transition:opacity .2s}
.chart text{fill:var(--muted);font-size:11px;font-family:var(--f-body)}
.chart .vl{fill:var(--ink);font-weight:700}
.chart .b{fill:var(--green)} .chart .b.now{fill:var(--gold)} .chart .gl{stroke:var(--line)}
.foot{font-size:12px;color:var(--muted);text-align:center}
/* Instrumen */
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.danger{background:var(--bad);border-color:var(--bad);color:var(--surface)}
.inp:disabled{background:var(--sunk);color:var(--muted)}
.soals{display:grid;gap:12px}
.soal{border:1px solid var(--line);border-radius:8px;padding:12px 14px;display:grid;gap:8px}
.soal-h{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center}
.soal .q{margin:0;font-size:14px}
.ops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;font-size:13px}
@media (max-width:600px){.ops{grid-template-columns:1fr}}
.ops li.key{color:var(--ok);font-weight:600}
.ops .arab,.opts .arab{font-family:var(--f-ar);font-size:20px}
.sf{display:grid;gap:12px}
.sf>label{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.sf textarea{resize:vertical;color:var(--ink)}
.sf label.chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
fieldset{border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:grid;gap:8px;margin:0;min-width:0}
legend{font-size:12px;font-weight:600;color:var(--muted);padding:0 4px}
.opt-ed{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}
.kk{display:flex;gap:6px;align-items:center;font-weight:800}
.ver{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border-radius:8px;background:var(--green-soft);color:var(--green);font-size:13px;margin-bottom:6px}
.ver.lock{background:var(--warn-soft);color:var(--warn)}
.aed{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.aed .n{font-weight:800;color:var(--gold)}
.aed-f{display:grid;gap:6px;min-width:0}
.aed-f .inp{width:100%}
.aed-f .sub{font-size:12px}
.aed-a{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.aed.off .aed-f{opacity:.5}
.sw{display:flex;gap:6px;align-items:center;font-size:12px;font-weight:600;margin-right:4px}
@media (max-width:640px){.aed{grid-template-columns:24px minmax(0,1fr)}.aed-a{grid-column:2}}
.labels{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.labels label{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
/* Logo */
:root{--plate:#ffffff}
.emb{display:block;flex:none;background:url(emblem.webp) center/contain no-repeat;aspect-ratio:301/96;max-width:100%}
.emb.hdr{height:44px}
.emb.ftr{height:56px}
.emb.kc{height:34px}
.logo-full{background:var(--plate) url(logo.webp) center/88% no-repeat;aspect-ratio:640/420;border-radius:16px;max-width:100%}
@media (max-width:560px){.emb.hdr{height:32px}.brand h1{font-size:15px}}
.proto select{background:transparent;border:0;font:inherit;color:inherit;font-weight:800;cursor:pointer;padding:0 2px}
.foot-band{border-top:1px solid var(--line);background:var(--surface)}
.foot-in{display:flex;gap:16px 24px;align-items:center;flex-wrap:wrap;padding-block:20px;font-size:12px;color:var(--muted)}
.foot-in b{color:var(--ink)} .foot-in>div{flex:1;min-width:220px}

/* Pengunjung */
.hero{background:var(--green);color:var(--green-ink);border-radius:16px;padding:28px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center}
@media (max-width:800px){.hero{grid-template-columns:1fr;padding:22px}}
.hero .eye{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.hero h2{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:8px 0 10px}
.hero p{margin:0 0 18px;opacity:.9;max-width:52ch}
.facts{display:flex;gap:24px;flex-wrap:wrap;margin-top:20px;font-size:12px;opacity:.9}
.facts b{display:block;font-size:22px;font-weight:800}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--green-ink)}
.btn.ghost{background:transparent;border-color:currentColor;color:inherit}
.sec{scroll-margin-top:140px;display:grid;gap:14px}
.sec h2{font-size:20px;font-weight:800;letter-spacing:-.01em}
.dsc{margin:0;color:var(--muted);font-size:13px}
.kv{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}
.kv li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line);padding-bottom:6px}
.kv li:last-child{border:0;padding:0}
.kv span{color:var(--muted)} .kv b{text-align:right;font-weight:600}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.tl li:last-child{border:0}
.tl .d{width:12px;height:12px;border-radius:50%;border:2px solid var(--line);background:var(--surface)}
.tl li.now .d{background:var(--gold);border-color:var(--gold)}
.tl small{display:block;color:var(--muted)}
.alur{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;counter-reset:a}
.alur li{counter-increment:a;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:4px;align-content:start;font-size:13px;color:var(--muted)}
.alur li::before{content:counter(a);width:26px;height:26px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-weight:800}
.alur b{color:var(--ink);font-size:14px}
details{border-bottom:1px solid var(--line);padding:12px 0}
details:last-child{border:0}
summary{font-weight:700;cursor:pointer}
details p{margin:8px 0 0;color:var(--muted)}
.err{margin:0;padding:10px 12px;border-radius:8px;background:var(--bad-soft);color:var(--bad);font-weight:600;font-size:13px}
.okm{margin:0;padding:10px 12px;border-radius:8px;background:var(--ok-soft);color:var(--ok);font-weight:600;font-size:13px}
.info{margin:0;padding:10px 12px;border-radius:8px;background:var(--sunk);font-size:13px}
.form{display:grid;gap:16px;max-width:720px;margin-inline:auto;width:100%}
.form .fieldrow{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:600px){.form .fieldrow{grid-template-columns:1fr}}
.fieldrow .inp{width:100%;color:var(--ink);font-weight:400}
.concl.wide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.concl.wide span{height:100%}
.concl.wide small{display:block;font-weight:500;color:var(--muted)}
@media (max-width:600px){.concl.wide{grid-template-columns:1fr}}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13px}
.demo{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.demo button{text-align:left;display:grid;gap:2px;padding:10px 12px}
.demo small{font-weight:500;color:var(--muted)}

/* Calon santri */
.scen{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px dashed var(--gold);border-radius:var(--r);padding:8px 12px;font-size:12px;color:var(--muted)}
.prog{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(84px,1fr));gap:4px;overflow-x:auto}
.prog li{display:grid;justify-items:center;gap:6px;text-align:center;font-size:12px;color:var(--muted);position:relative;padding-bottom:2px}
.prog li::after{content:"";position:absolute;top:14px;left:calc(50% + 18px);right:calc(-50% + 18px);height:2px;background:var(--line)}
.prog li:last-child::after{display:none}
.prog li.done::after{background:var(--green)}
.prog .c{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;border:2px solid var(--line);background:var(--surface)}
.prog li.done .c{background:var(--green);border-color:var(--green);color:var(--green-ink)}
.prog li.cur .c{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}
.prog li.cur{color:var(--ink);font-weight:700}
.todo{display:grid;gap:8px}
.todo button{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:8px;border:1px solid var(--line);background:var(--surface);cursor:pointer;width:100%}
.todo button:hover{border-color:var(--green)}
.todo button.w{border-left:4px solid var(--warn)}
.todo button.i{border-left:4px solid var(--green)}
.todo small{display:block;color:var(--muted);font-weight:500}
.todo b{font-weight:700}
.locked{display:grid;gap:8px;justify-items:start;padding:28px;text-align:left}
.locked .ic{width:40px;height:40px;border-radius:10px;background:var(--sunk);display:grid;place-items:center;color:var(--muted)}
.bk{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.bk:first-of-type{border-top:0}
.bk .nt{grid-column:1/4;font-size:12px}
.bk .fn{display:block;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
@media (max-width:600px){.bk{grid-template-columns:minmax(0,1fr) auto}.bk .act{grid-column:1/3}}
.up{position:relative;display:inline-block}
.up input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.up input:disabled{cursor:not-allowed}
.up input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.kartu{border:2px solid var(--green);border-radius:12px;overflow:hidden;background:var(--surface);max-width:560px}
.k-h{display:flex;gap:12px;align-items:center;padding:12px 16px;background:var(--plate);color:#123323;border-bottom:2px solid var(--green);font-size:12px}
.k-h b{font-size:14px;letter-spacing:.04em}
.k-b{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:16px}
.foto{aspect-ratio:3/4;border:1px dashed var(--line);border-radius:6px;display:grid;place-items:center;font-size:11px;color:var(--muted);text-align:center;background:var(--sunk)}
.kartu dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:13px}
.kartu dt{color:var(--muted)} .kartu dd{margin:0;font-weight:600}
.kartu .kf{padding:0 16px 14px;font-size:12px;color:var(--muted)}
.hasil{background:var(--ok-soft);border:1px solid var(--ok);border-radius:var(--r);padding:24px;display:grid;gap:10px}
.hasil .eye{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ok)}
.hasil h3{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0;text-transform:none;color:var(--ink)}
.du{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.du:first-of-type{border-top:0}
.du .ck{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:13px;font-weight:800}
.du.ok .ck{background:var(--green);border-color:var(--green);color:var(--green-ink)}
.du small{display:block;color:var(--muted)}
@media (max-width:600px){.du{grid-template-columns:28px minmax(0,1fr)}.du>:last-child{grid-column:2}}
.msg{display:grid;gap:2px;padding:12px 0;border-top:1px solid var(--line)}
.msg:first-child{border:0}
.msg small{color:var(--muted)}
/* Brosur & pengaturan */
.bros{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;align-items:start}
.bro{display:grid;gap:8px;padding:0;border:0;background:none;text-align:left;cursor:zoom-in;color:inherit;font:inherit}
.bro img{width:100%;border-radius:10px;border:1px solid var(--line);display:block}
.bro .cap{font-weight:700;font-size:13px}
.bgen{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:grid;font-size:12px;color:var(--ink)}
.bgen .logo-full{border-radius:0;aspect-ratio:640/330}
.bg-band{background:var(--green);color:var(--green-ink);padding:10px 16px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.bg-band b{font-size:16px;letter-spacing:.02em}
.bg-body{padding:14px 16px;display:grid;gap:6px}
.bg-lead{margin:0;font-size:15px;font-weight:800;line-height:1.25;text-wrap:balance}
.bg-lbs{display:grid;gap:6px;margin:4px 0}
.bg-lbs>div{border-left:4px solid var(--c);padding:2px 0 2px 8px;display:grid}
.bg-lbs span{color:var(--muted)}
.bgen h4{margin:6px 0 0;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--gold)}
.bgen p{margin:0}
.bgen ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.bgen li{display:flex;justify-content:space-between;gap:8px}
.bgen li span{color:var(--muted)}
.bg-cta{margin-top:6px;background:var(--gold-soft);border-radius:8px;padding:8px 10px;display:grid;gap:1px}
.bg-cta b{color:var(--gold)}
.bg-addr{color:var(--muted);font-size:11px}
.lbx{position:fixed;inset:0;z-index:30;background:rgba(8,14,10,.82);display:grid;justify-items:center;align-content:start;gap:12px;overflow:auto;padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lbx[hidden]{display:none!important}
.lbx>.btn{justify-self:end}
#lbxIn{width:100%;max-width:900px}
#lbxIn img{display:block;max-width:100%;margin:auto;border-radius:8px}
.tpbig{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tpbig b{font-size:30px;font-weight:800;letter-spacing:-.02em}
.tpbig .mono{flex-basis:100%}
.thumb{width:56px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- tambahan aplikasi ---------- */
body.busy{cursor:progress}
body.busy .btn.pri{opacity:.7}
a{color:var(--green)}
.clk{cursor:pointer}
.clk:hover td{background:var(--green-soft)}
.linkish{background:none;border:0;padding:0;text-align:left;color:var(--green);text-decoration:underline;cursor:pointer;font:inherit;font-size:12px}
.vb{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.vb:first-of-type{border-top:0}
.vb-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.vb-img{padding:0;border:1px solid var(--line);border-radius:8px;background:var(--sunk);cursor:zoom-in;max-width:220px;overflow:hidden}
.vb-img img{display:block;width:100%;max-height:160px;object-fit:cover}
.foto img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.panel.locked{max-width:640px;margin-inline:auto;width:100%}
#lbxIn .panel{max-width:420px;margin:auto}
@media print{
  body.print-kartu .top,body.print-kartu .foot-band,body.print-kartu .noprint,body.print-kartu .toast{display:none!important}
  body.print-kartu main{padding:0}
  body.print-kartu .grid{display:block}
  .top,.foot-band,.toast,.nav,#ctrl2{display:none!important}
  body{background:#fff;color:#000}
  .panel,.kartu{break-inside:avoid}
}