:root{--g:#1F5F3F;--g2:#174A31;--gl:#DCEBE2;--gx:#EEF5F0;--bg:#F4F6F5;--ink:#15221B;--mut:#5F6E66;--line:#E3E8E5;--am:#9A6408;--aml:#FCEFD6;--bl:#2B5C8A;--bll:#E3ECF6;--rd:#B42318;--rdl:#FDE2E1;--ok:#1F7A4A;--okl:#DCF1E4;--r:16px;--sh:0 1px 3px rgba(16,40,28,.08),0 1px 2px rgba(16,40,28,.04)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--g)}
.splash{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.splash img{width:84px;height:84px;object-fit:contain}
.spin{width:26px;height:26px;border:3px solid var(--gl);border-top-color:var(--g);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.wrap{max-width:560px;margin:0 auto;padding:0 14px 96px}
.wrap.wide{max-width:1180px}
.hdr{position:sticky;top:0;z-index:20;background:rgba(244,246,245,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent}
.hdr.sc{border-bottom-color:var(--line)}
.hdr-in{max-width:560px;margin:0 auto;padding:10px 14px;display:flex;align-items:center;gap:10px}
.wrap.wide~.x,.hdr.wide .hdr-in{max-width:1180px}
.hdr img{width:34px;height:34px;object-fit:contain}
.hdr .tt{flex:1;min-width:0}
.hdr .t1{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .t2{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{border:0;background:#fff;border-radius:12px;height:38px;min-width:38px;padding:0 12px;font-weight:700;font-size:14px;box-shadow:var(--sh);cursor:pointer;color:var(--ink)}
h1.big{font-size:26px;line-height:1.2;margin:14px 2px 4px}
.lead{color:var(--mut);margin:0 2px 14px;font-size:14.5px}
.eyb{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--g)}
.card{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:16px;margin:12px 0}
.card.warn{background:var(--aml)}
.card.okc{background:var(--okl)}
.card.acc{border:2px solid var(--g)}
.card h3{margin:0 0 8px;font-size:16px}
.lbl{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);margin:0 0 6px}
.sm{font-size:13px;color:var(--mut)}
.muted{color:var(--mut)}
.row{display:flex;align-items:center;gap:10px}
.sp{flex:1}
.btn{display:block;width:100%;border:0;border-radius:14px;background:var(--g);color:#fff;font-weight:700;font-size:16px;padding:15px 16px;cursor:pointer;text-align:center;text-decoration:none}
.btn:active{transform:scale(.99)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sec{background:#fff;color:var(--g);box-shadow:inset 0 0 0 1.5px var(--g)}
.btn.red{background:#fff;color:var(--rd);box-shadow:inset 0 0 0 1.5px var(--rd)}
.btn.sm2{padding:10px 12px;font-size:14px;border-radius:12px;width:auto;display:inline-block}
.btns{display:flex;gap:10px}.btns>*{flex:1}
.inp{width:100%;border:1.5px solid #D3DBD6;border-radius:12px;padding:12px 13px;font-size:16px;background:#fff;outline:none}
.inp:focus{border-color:var(--g);box-shadow:0 0 0 3px var(--gl)}
textarea.inp{min-height:76px;resize:vertical}
.fld{margin-bottom:12px}
.seg{display:flex;background:#EDF1EE;border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:transparent;border-radius:9px;padding:10px 4px;font-weight:700;color:var(--mut);cursor:pointer;font-size:15px}
.seg button.on{background:#fff;color:var(--g);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid #D3DBD6;background:#fff;border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer;min-width:52px;text-align:center}
.chip.on{background:var(--g);border-color:var(--g);color:#fff}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;background:#EEF1EF;color:var(--mut)}
.pill.g{background:var(--okl);color:var(--ok)}.pill.y{background:var(--aml);color:var(--am)}.pill.b{background:var(--bll);color:var(--bl)}.pill.r{background:var(--rdl);color:var(--rd)}
.list .it{display:flex;align-items:center;gap:10px;padding:12px 2px;border-top:1px solid #EEF2EF;cursor:pointer}
.list .it:first-child{border-top:0}
.it .nm{flex:1;min-width:0}
.it .nm b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it .pills{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.code{font-weight:800;font-size:15px;min-width:46px}
.pass{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 4px 18px rgba(16,40,28,.12);margin:12px 0}
.pass .top{background:var(--g);color:#fff;padding:16px 18px;position:relative}
.pass .top .k{font-size:44px;font-weight:800;letter-spacing:.02em;line-height:1}
.pass .top .lg{position:absolute;right:14px;top:14px;width:52px;height:52px;background:#fff;border-radius:14px;padding:6px}
.pass .perf{border-top:2px dashed #CDD5D0;margin:0 16px}
.pass .r3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 16px}
.pass .r3 .a{font-size:10.5px;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.pass .r3 .v{font-size:18px;font-weight:800;margin-top:2px}
.tl .st{display:flex;gap:12px;align-items:flex-start;padding:7px 0}
.tl .dot{width:24px;height:24px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff}
.tl .d1{background:var(--g)}.tl .d2{background:#E3A008;box-shadow:0 0 0 4px var(--aml)}.tl .d3{background:#fff;border:2px solid #C9D1CC}
.tl .sn{font-weight:700;font-size:14.5px}.tl .d3+div .sn{color:var(--mut)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#14241B;color:#fff;padding:12px 16px;border-radius:12px;font-size:14px;z-index:99;max-width:92vw;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast.err{background:var(--rd)}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:4px 0 2px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:#fff;border-radius:20px;padding:9px 14px;font-weight:700;font-size:14px;white-space:nowrap;box-shadow:var(--sh);cursor:pointer;color:var(--mut)}
.tabs button.on{background:var(--g);color:#fff}
.ex-top{position:sticky;top:0;z-index:20;background:var(--bg);padding:10px 0 8px}
.bar{height:6px;background:#E1E7E3;border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--g);border-radius:4px;transition:width .2s}
.q{font-size:20px;font-weight:700;line-height:1.38;margin:2px 0 12px}
.opt{display:flex;justify-content:space-between;align-items:center;width:100%;border:1.5px solid #D3DBD6;background:#fff;border-radius:14px;padding:15px 16px;font-size:16.5px;font-weight:700;margin-top:9px;cursor:pointer;text-align:left}
.opt.on{background:var(--gl);border-color:var(--g);color:var(--g2)}
.opt .rd{width:20px;height:20px;border-radius:50%;border:2px solid #B9C3BD;flex:none}
.opt.on .rd{border:6px solid var(--g)}
.timer{font-variant-numeric:tabular-nums;font-weight:800}
.mrow{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-top:1px solid #EEF2EF}
.mrow b{width:30px;font-size:16px}
.mrow .ab{display:flex;gap:8px}
.mrow .ab button{width:44px;height:44px;border-radius:50%;border:1.5px solid #C9D1CC;background:#fff;font-weight:800;color:var(--mut);cursor:pointer;font-size:15px}
.mrow .ab button.on{background:var(--g);border-color:var(--g);color:#fff}
.grid-no{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.grid-no button{border:0;border-radius:10px;padding:9px 0;font-weight:800;background:#EEF1EF;color:var(--mut);cursor:pointer}
.grid-no button.on{background:var(--g);color:#fff}
.grid-no button.cur{outline:2px solid var(--am)}
.token{font-size:46px;font-weight:800;letter-spacing:.18em;color:var(--g);font-variant-numeric:tabular-nums}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:12px 0}
.kpis div{background:#fff;border-radius:14px;padding:12px 14px;box-shadow:var(--sh)}
.kpis b{display:block;font-size:24px}
.kpis span{font-size:12px;color:var(--mut);font-weight:700}
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--sh);font-size:13.5px}
.tbl th{background:#EEF2EF;text-align:left;padding:9px 8px;font-size:12px;color:#4D5A53;white-space:nowrap}
.tbl td{padding:9px 8px;border-top:1px solid #EEF2EF;white-space:nowrap}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
.sheet-bg{position:fixed;inset:0;background:rgba(10,20,15,.42);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--bg);width:100%;max-width:560px;max-height:92vh;overflow-y:auto;border-radius:22px 22px 0 0;padding:8px 14px 26px;animation:up .18s ease-out}
@keyframes up{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
.grab{width:42px;height:5px;border-radius:3px;background:#CBD3CE;margin:6px auto 10px}
.asp{margin-top:6px}
.asp .rb{font-size:13px;color:var(--mut);margin-top:7px;min-height:18px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #EEF2EF;font-size:14.5px}
.kv:first-child{border-top:0}
.stepper{display:flex;align-items:center;border:1.5px solid #D3DBD6;border-radius:12px;background:#fff;overflow:hidden}
.stepper button{border:0;background:#fff;width:46px;height:44px;font-size:20px;font-weight:700;cursor:pointer;color:var(--g)}
.stepper span{flex:1;text-align:center;font-weight:800;font-size:17px}
.big-n{font-size:34px;font-weight:800;color:var(--g);line-height:1}
.empty{text-align:center;color:var(--mut);padding:26px 10px}
.off{position:fixed;top:0;left:0;right:0;background:var(--am);color:#fff;text-align:center;font-size:13px;font-weight:700;padding:5px;z-index:60}
.login-logo{display:block;width:112px;height:112px;object-fit:contain;margin:44px auto 10px}
.center{text-align:center}
.foot{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));z-index:15}
.foot .in{max-width:560px;margin:0 auto}
@media (min-width:900px){.sheet{border-radius:22px;margin-bottom:5vh}.sheet-bg{align-items:center}}
/* 1.1: umpan balik cepat */
#netbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--g);z-index:80;opacity:0;transition:opacity .2s}
#netbar.on{opacity:1;width:100%;background:linear-gradient(90deg,var(--gl) 0%,var(--g) 40%,var(--gl) 80%);background-size:200% 100%;animation:nb 1s linear infinite}
@keyframes nb{from{background-position:200% 0}to{background-position:0 0}}
.btn.busy,.btn.busy:disabled{opacity:.8;cursor:progress;position:relative;color:transparent!important}
.btn.busy::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
.btn.sec.busy::after,.btn.red.busy::after{border-color:rgba(31,95,63,.25);border-top-color:var(--g)}
/* kartu angket */
.kartu{background:#FFFBF2;border:1px solid #F1DFB8;border-radius:var(--r);padding:16px;margin:12px 0;box-shadow:var(--sh)}
.kartu.k1{background:#F4FAF6;border-color:#CFE6D8}.kartu.k3{background:#FFF6F5;border-color:#F3C7C3}
.kartu .kt{font-size:18px;font-weight:800;margin-top:2px}
.kartu .kd{font-size:14px;margin-top:6px;line-height:1.45}
.kartu .kl{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);margin:14px 0 6px}
.kartu .rn{margin-bottom:8px;font-size:14px}
.mb{height:6px;background:#E9EDEA;border-radius:6px;overflow:hidden;margin-top:5px}
.mb i{display:block;height:100%;border-radius:6px;background:var(--ok)}.mb i.y{background:#E3A008}.mb i.r{background:var(--rd)}.mb i.g{background:var(--ok)}
.kartu .kp{background:#fff;border-left:4px solid var(--bl);border-radius:10px;padding:10px 12px;margin-top:12px;font-size:14px}
.kartu .pm{background:#fff;border-radius:10px;padding:9px 12px;margin-bottom:6px;font-size:14px}
.prog{margin-top:10px}.prog .sm{margin-top:5px}

.card.lulus{background:linear-gradient(160deg,#1F5F3F,#2E7D55);color:#fff;text-align:center;padding:24px 18px}
.card.lulus .eyb{color:#F6D98B;letter-spacing:.12em}
.card.lulus .lt{font-size:21px;font-weight:700;line-height:1.3;margin:8px 0 10px}
.card.lulus .lt b{display:block;font-size:34px;letter-spacing:.06em;margin-top:4px;color:#F6D98B}
.card.lulus .ls{font-size:13.5px;opacity:.9}
.card.lulus .li{background:rgba(255,255,255,.14);border-radius:12px;padding:10px 12px;margin-top:14px;font-size:14px;text-align:left}
.it.kl{flex-wrap:wrap}.it.kl .nm b{white-space:normal}.it.kl .acts{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex:1 1 100%}