/* SPMB Madrasah — tampilan utama (HP terlebih dahulu) */
:root{
  --g:#0b5d3b; --g2:#0e7a4d; --g-soft:#e6f2ec; --gold:#c8962b;
  --ink:#1c2621; --mut:#5f6b65; --line:#dde3df; --bg:#f5f4ef; --card:#fff;
  --red:#b42318; --red-s:#fdecea; --amb:#9a6500; --amb-s:#fff4dd; --blue:#1d5fae; --blue-s:#e8f0fb;
  --r:14px; --sh:0 1px 2px rgba(20,40,30,.06),0 4px 16px rgba(20,40,30,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--g2)}
h1{font-size:1.45rem;line-height:1.25;margin:.2em 0 .4em}
h2{font-size:1.1rem;margin:0 0 .7em}
h3{font-size:1rem}
small{font-size:.82rem}
.muted{color:var(--mut)} .small{font-size:.85rem} .danger{color:var(--red);display:block}
.req{color:var(--red)}
.wrap{max-width:760px;margin:0 auto;padding:16px 16px 40px}
.narrow{max-width:420px;margin-left:auto;margin-right:auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:0 0 14px;box-shadow:var(--sh)}
.center-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.center-page .card{width:100%}

/* Tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:44px;padding:.55em 1.1em;border-radius:10px;border:1px solid var(--g);background:var(--g);color:#fff;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(1px)}
.btn-outline{background:#fff;color:var(--g)}
.btn-light{background:#fff;color:var(--g);border-color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-wa{background:#1f9d55;border-color:#1f9d55}
.btn-warn{background:var(--amb);border-color:var(--amb)}
.btn-danger{background:#fff;color:var(--red);border-color:#e6b4ae}
.btn-sm{min-height:36px;padding:.35em .8em;font-size:.9rem}
.btn-lg{min-height:52px;padding:.7em 1.4em;font-size:1.05rem}
.btn-block{width:100%}
.row-btn{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.row-btn form{margin:0}
.wrap-btn .btn{flex:1 1 auto}

/* Notifikasi */
.alert{border-radius:10px;padding:12px 14px;margin:0 0 12px;border:1px solid}
.alert ul{margin:.3em 0 0;padding-left:1.2em}
.alert-ok{background:var(--g-soft);border-color:#b9dcc9;color:#0a4a2f}
.alert-err{background:var(--red-s);border-color:#f2c4bf;color:var(--red)}
.alert-warn{background:var(--amb-s);border-color:#f0d8a6;color:#7a5000}
.alert-info{background:var(--blue-s);border-color:#c5d7f0;color:#174a87}
.alert.big{font-size:1.05rem}
.badge{display:inline-block;padding:.2em .65em;border-radius:999px;font-size:.78rem;font-weight:600;white-space:nowrap}
.badge.lg{font-size:.9rem;padding:.35em .9em}
.b-gray{background:#eceeed;color:#4a544f}.b-green{background:var(--g-soft);color:var(--g)}.b-amber{background:var(--amb-s);color:var(--amb)}.b-red{background:var(--red-s);color:var(--red)}.b-blue{background:var(--blue-s);color:var(--blue)}

/* Beranda pendaftar */
.hero{background:radial-gradient(120% 90% at 100% 0,#13875a 0,var(--g) 45%,#073f28 100%);color:#fff;padding:36px 16px 44px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:auto -60px -80px auto;width:240px;height:240px;border-radius:50%;border:28px solid rgba(200,150,43,.22)}
.hero-in{max-width:760px;margin:0 auto;position:relative;z-index:1}
.hero-logo{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:16px;padding:6px;margin-bottom:10px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:700;color:#f3d48a;margin:0}
.eyebrow.dark{color:var(--gold)}
.hero h1{font-size:1.75rem;margin:.15em 0}
.hero-sub{margin:0 0 14px;opacity:.9}
.hero-status{display:inline-block;padding:.3em .8em;border-radius:999px;font-size:.85rem;font-weight:600;margin-bottom:18px}
.hero-status.on{background:#f3d48a;color:#3d2c00}.hero-status.off{background:rgba(255,255,255,.18)}
.hero-act{display:flex;flex-wrap:wrap;gap:10px}
.hero-act .btn{flex:1 1 200px}
.public .wrap{margin-top:-20px;position:relative;z-index:2}
.steps{margin:0;padding-left:1.3em}.steps li{margin:.35em 0}
.jadwal{margin:0;display:grid;gap:10px}
.jadwal div{display:flex;flex-direction:column;border-left:3px solid var(--gold);padding:2px 0 2px 12px}
.jadwal dt{font-size:.8rem;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}.jadwal dd{margin:0;font-weight:600}
.check{list-style:none;margin:0;padding:0}.check li{padding:.35em 0 .35em 1.7em;position:relative;border-bottom:1px dashed var(--line)}
.check li:before{content:"✓";position:absolute;left:.2em;color:var(--g2);font-weight:700}
.foot-note{text-align:center;color:var(--mut);font-size:.85rem}

/* Bilah atas formulir */
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--g);color:#fff;padding-top:max(10px,env(safe-area-inset-top))}
.topbar b{display:block}.topbar small{opacity:.85}
.topbar .back{color:#fff;text-decoration:none;font-size:1.4rem;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.12)}
.topbar-r{margin-left:auto;color:#fff}
.form-page .wrap,.public .topbar~.wrap{margin-top:0}

/* Formulir */
.form fieldset{border:1px solid var(--line);border-radius:10px;margin:0 0 14px;padding:12px}
.form label,.field{display:block;margin:0 0 12px}
.lbl{display:block;font-weight:600;font-size:.92rem;margin-bottom:5px}
.field small{display:block;color:var(--mut);margin-top:3px}
input,select,textarea{width:100%;font:inherit;font-size:16px;padding:.65em .75em;border:1.5px solid #cfd8d3;border-radius:10px;background:#fff;color:var(--ink);min-height:46px}
textarea{min-height:auto}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--g2);box-shadow:0 0 0 3px rgba(14,122,77,.15)}
input[type=checkbox],input[type=radio]{width:auto;min-height:auto}
input[type=file]{padding:.5em;border-style:dashed;background:#fafbfa}
.form .invalid,.form input:user-invalid,.form select:user-invalid{border-color:var(--red)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.grid>*{grid-column:1/-1}.grid>.half{grid-column:auto}
.grid h3.sub{margin:.6em 0 .5em}
h3.sub{font-size:.95rem;color:var(--g);border-bottom:1px solid var(--line);padding-bottom:4px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{margin:0!important;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;padding:.55em .95em;border:1.5px solid #cfd8d3;border-radius:999px;background:#fff;font-size:.95rem}
.chip input:checked+span{background:var(--g);border-color:var(--g);color:#fff}
.chip input:focus-visible+span{box-shadow:0 0 0 3px rgba(14,122,77,.25)}
.check-line{display:flex!important;gap:10px;align-items:flex-start}
.check-line input{margin-top:.3em;width:20px;height:20px;flex:none}
.berkas-list .upl{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fbfcfb}
.upl .badge{margin-left:4px}
.upl-preview img{max-height:90px;margin-top:6px;border-radius:6px;border:1px solid var(--line)}
.upl-preview em{display:block;font-size:.8rem;color:var(--mut)}

/* Wizard */
.progress{display:flex;list-style:none;padding:0;margin:0 0 14px;gap:4px}
.progress li{flex:1;text-align:center;font-size:.7rem;color:var(--mut)}
.progress span{display:grid;place-items:center;width:28px;height:28px;margin:0 auto 3px;border-radius:50%;background:#e3e8e5;font-weight:700;font-size:.8rem;color:var(--mut)}
.progress em{font-style:normal;display:none}
.progress li.on span{background:var(--g);color:#fff}.progress li.on em{display:block;color:var(--g);font-weight:600}
.progress li.done span{background:var(--g-soft);color:var(--g)}
.js .wizard .step{display:none}.js .wizard .step.on{display:block}
.wizard-nav{position:sticky;bottom:0;display:flex;gap:10px;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 30%)}
.wizard-nav .btn{flex:1}
.js .wizard-nav [data-submit]{display:none}.js .wizard-nav.last [data-submit]{display:inline-flex}.js .wizard-nav.last [data-next]{display:none}
.js .wizard-nav.first [data-prev]{visibility:hidden;flex:0;padding:0;border:0;min-width:0;width:0}
html:not(.js) .wizard-nav [data-next],html:not(.js) .wizard-nav [data-prev]{display:none}
.ringkasan h4{margin:.8em 0 .3em;display:flex;justify-content:space-between;color:var(--g)}
.ringkasan h4 button{font:inherit;font-size:.85rem;background:none;border:0;color:var(--g2);text-decoration:underline;cursor:pointer}
.ringkasan dl{margin:0;display:grid;grid-template-columns:42% 1fr;gap:2px 10px;font-size:.92rem}
.ringkasan dt{color:var(--mut)}.ringkasan dd{margin:0;word-break:break-word}

/* Status */
.success{text-align:center}
.tick{width:56px;height:56px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;font-size:1.8rem;margin:0 auto}
.kode-box{display:flex;gap:10px;margin:12px 0}
.kode-box div{flex:1;border:2px dashed var(--g2);border-radius:12px;padding:10px;background:var(--g-soft)}
.kode-box b{display:block;font-size:1.25rem;white-space:nowrap;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.success .row-btn{justify-content:center}
.pd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pd-head h1{margin:.1em 0}
.timeline{list-style:none;padding:0;margin:16px 0;display:flex;gap:4px}
.timeline li{flex:1;font-size:.72rem;text-align:center;color:var(--mut);position:relative;padding-top:20px}
.timeline li:before{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:#d7ddd9;box-shadow:0 0 0 3px #fff}
.timeline li:after{content:"";position:absolute;top:9px;left:-50%;width:100%;height:2px;background:#d7ddd9;z-index:-1}
.timeline li:first-child:after{display:none}
.timeline li.done{color:var(--g);font-weight:600}.timeline li.done:before,.timeline li.done:after{background:var(--g2)}
.info-tes{background:var(--blue-s);border-radius:12px;padding:12px 14px;margin:10px 0}
.info-tes h3{margin:0 0 4px}
.hasil{border-radius:12px;padding:14px;margin:10px 0}
.hasil h2{margin:0 0 6px}
.hasil-lulus{background:var(--g-soft);border:2px solid var(--g2)}.hasil-cadangan{background:var(--amb-s)}.hasil-tidak{background:#f1f2f1}

/* Panel panitia */
.adm{min-height:100vh}
.side{background:var(--g);color:#fff;position:fixed;z-index:20;left:0;right:0;bottom:0;padding-bottom:env(safe-area-inset-bottom)}
.brand{display:none}
.nav{display:flex}
.nav>a,.nav summary{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;color:rgba(255,255,255,.75);text-decoration:none;font-size:.68rem;cursor:pointer;list-style:none}
.nav summary::-webkit-details-marker{display:none}
.nav i{font-style:normal;font-size:1.2rem;line-height:1}
.nav>a.on,.nav .more.on summary{color:#fff;background:rgba(255,255,255,.12)}
.more{flex:1;position:relative}
.more-menu{position:absolute;bottom:100%;right:6px;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.2);min-width:210px;padding:6px;margin-bottom:6px}
.more-menu a{display:block;padding:10px 12px;color:var(--ink);text-decoration:none;border-radius:8px}
.more-menu a:hover{background:var(--g-soft)}
.adm-main{padding:16px 14px 90px;max-width:1100px;margin:0 auto}
.adm-title{font-size:1.35rem}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;text-decoration:none;color:inherit;box-shadow:var(--sh)}
.stat small{color:var(--mut);display:block}.stat b{font-size:1.6rem;display:block;line-height:1.2;font-variant-numeric:tabular-nums}.stat em{font-style:normal;font-size:.78rem;color:var(--mut)}
.stat.warn{border-left:4px solid var(--gold)}.stat.ok{border-left:4px solid var(--g2)}
.cols{display:grid;gap:14px}.cols .card{margin:0}
.bars{display:flex;align-items:flex-end;gap:4px;height:130px;padding-top:16px}
.bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.bar span{display:block;width:100%;background:var(--g2);border-radius:4px 4px 0 0;min-height:2px}
.bar em{font-style:normal;font-size:.68rem;color:var(--mut)}
.bar small{font-size:.65rem;color:var(--mut);margin-top:3px}
.rank{list-style:none;margin:0;padding:0}.rank li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.share{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
#qr{width:140px;height:140px;flex:none;background:#fff}
#qr svg,#qr img{width:100%;height:100%}
.share>div:last-child{flex:1;min-width:200px}
.copy{font-size:.85rem}
.toolbar-f{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.toolbar-f input{flex:1 1 200px}.toolbar-f select{flex:0 1 200px}
table.list{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.list th{background:#f0f2f1;text-align:left;font-size:.8rem;color:var(--mut);padding:10px}
.list td{padding:10px;border-top:1px solid var(--line);font-size:.92rem}
.list tbody tr{cursor:pointer}.list tbody tr:hover{background:#f7faf8}
.pager{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.pager a{padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;text-decoration:none}.pager a.on{background:var(--g);color:#fff}
.berkas-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px}
.bk{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fbfcfb}
.bk.st-ok{border-color:#9fd0b6;background:#f3faf6}.bk.st-tolak{border-color:#f0b8b1;background:#fff6f5}.bk.kosong{opacity:.85}
.bk-h{margin-bottom:6px}
.bk-thumb{display:block;height:150px;border-radius:8px;overflow:hidden;background:#e9edeb;margin-bottom:8px}
.bk-thumb img{width:100%;height:100%;object-fit:cover}.bk-thumb span{display:grid;place-items:center;height:100%;font-weight:700;color:var(--mut)}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:6px}
.seg label{flex:1;margin:0!important;text-align:center;cursor:pointer}
.seg input{position:absolute;opacity:0}
.seg span{display:block;padding:8px 4px;font-size:.85rem;background:#fff}
.seg label+label span{border-left:1px solid var(--line)}
.seg input:checked+span{background:var(--g);color:#fff}
.seg label:last-child input:checked+span{background:var(--red)}
.bk-note{min-height:38px;padding:.4em .6em;font-size:.9rem;margin-bottom:6px}
.kvlist{margin:0 0 8px;display:grid;grid-template-columns:1fr;gap:0}
.kvlist div{display:grid;grid-template-columns:44% 1fr;gap:8px;padding:5px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.kvlist dt{color:var(--mut)}.kvlist dd{margin:0;word-break:break-word}
.log{list-style:none;padding:0;margin:0}.log li{padding:6px 0;border-bottom:1px solid var(--line);font-size:.9rem}.log small{color:var(--mut);display:block}
.danger-zone details{margin-top:10px}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.sec-head select{width:auto;min-height:38px;padding:.3em .6em}
details.card>summary{list-style:none;cursor:pointer}details.card>summary::-webkit-details-marker{display:none}
details.card>summary h2{display:inline;margin:0}details.card>summary:after{content:"▾";float:right;color:var(--mut)}
details.card[open]>summary{margin-bottom:12px}
.komp{display:grid;gap:6px;margin-bottom:12px}.komp-row{display:grid;grid-template-columns:1fr 90px;gap:8px}
.tbl-scroll{overflow-x:auto;margin:0 -18px;padding:0 18px}
table.nilai{border-collapse:collapse;width:100%;min-width:560px}
.nilai th{font-size:.78rem;text-align:left;color:var(--mut);padding:6px 4px;border-bottom:2px solid var(--line);vertical-align:bottom}
.nilai td{padding:6px 4px;border-bottom:1px solid var(--line);vertical-align:middle}
.nilai .nm small{display:block;color:var(--mut)}
.nilai input,.nilai select{min-height:40px;padding:.35em .45em}
.w-num{width:64px}.w-ruang{width:90px}.c{text-align:center}
.nilai select.h-lulus{background:var(--g-soft)}.nilai select.h-tidak{background:#f1f1f1}.nilai select.h-cadangan{background:var(--amb-s)}
.sticky-act{position:sticky;bottom:64px;background:linear-gradient(transparent,var(--bg) 35%);padding:10px 0;z-index:5}
.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px}
.tabs a{white-space:nowrap;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--ink);font-size:.9rem}.tabs a.on{background:var(--g);color:#fff;border-color:var(--g)}
.du-list{display:grid;gap:8px}
.du{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:12px 14px}
.du small{display:block;color:var(--mut)}.ok-t{color:var(--g)!important}
.du .row-btn{margin:0}
.inline{display:inline-flex;gap:6px;align-items:center}
.w-pw{width:150px;min-height:36px;padding:.3em .6em}
.cards3{display:grid;gap:14px}
.linkcard{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.linkcard .btn{margin-top:auto;align-self:flex-start}
.logo-up img{height:56px;display:block;margin-bottom:6px}
.inline-form textarea{margin-bottom:8px}

@media (max-width:720px){
  .list thead{display:none}
  table.list,.list tbody,.list tr,.list td{display:block;width:100%}
  table.list{background:none;border:0}
  .list tr{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;padding:8px 12px}
  .list td{border:0;padding:2px 0;display:flex;gap:8px}
  .list td:before{content:attr(data-l);color:var(--mut);font-size:.8rem;min-width:70px}
}
@media (min-width:721px){
  .progress em{display:block}
  .berkas-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .kvlist{grid-template-columns:1fr 1fr;column-gap:24px}
  .stats{grid-template-columns:repeat(4,1fr)}
  .cols{grid-template-columns:1fr 1fr}
  .cards3{grid-template-columns:repeat(3,1fr)}
  .hero{padding:56px 16px 64px}.hero h1{font-size:2.3rem}
  .jadwal{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
  .side{top:0;bottom:0;right:auto;width:220px;padding:18px 10px;display:flex;flex-direction:column}
  .brand{display:block;padding:0 10px 18px}.brand b{display:block;font-size:1.3rem;letter-spacing:.06em}.brand small{display:block;opacity:.8}
  .nav{flex-direction:column;gap:2px}
  .nav>a,.nav summary{flex-direction:row;font-size:.95rem;gap:10px;padding:10px 12px;border-radius:10px}
  .more-menu{position:static;box-shadow:none;background:rgba(255,255,255,.08);margin:4px 0 0}
  .more-menu a{color:#fff}.more-menu a:hover{background:rgba(255,255,255,.12)}
  .adm-main{margin-left:220px;padding:24px 28px 40px}
  .sticky-act{bottom:0}
}