/* Survei Suara Murid - SMK Terpadu Sinros Dharma Bakti
   Warna maroon dengan aksen emas, mengikuti logo sekolah. */

:root{
  --bg:#F8F1F1; --surface:#FFFFFF; --ink:#2B1416; --muted:#6B4C4F; --line:#E6D3D4;
  --accent:#7B1E2B; --accent-ink:#FFFFFF; --sun:#F4B400; --sun-ink:#3A2A00; --danger:#B3261E;
  --s1:#D2553C; --s2:#E9A63A; --s3:#9BCF9A; --s4:#2F7D4F; --on-s:#2B1416; --on-s4:#FFFFFF;
  --font-display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body);
  font-size:16px; line-height:1.55;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:20px 56px;
}
h1,h2,h3{font-family:var(--font-display); line-height:1.15; margin:0; text-wrap:balance}
p{margin:0}
img{max-width:100%}
a{color:var(--accent)}
button,input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--sun); outline-offset:2px}

.wrap{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:18px}
.wrap.wide{max-width:1020px}
.top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand img{width:48px; height:auto; flex:none}
.brand .bt{display:flex; flex-direction:column; min-width:0}
.brand b{font-family:var(--font-display); font-size:1.5rem; line-height:1}
.brand span{color:var(--muted); font-size:.85rem; font-weight:600}

.hero{background:var(--accent); color:var(--accent-ink); border-radius:22px; padding:22px 20px; display:flex; flex-direction:column; gap:8px}
.hero h1{font-size:clamp(1.7rem,6vw,2.3rem)}
.hero p{font-weight:600; max-width:55ch}
.hero .pill{align-self:flex-start; background:var(--sun); color:var(--sun-ink); font-weight:800; font-size:.8rem; padding:3px 12px; border-radius:999px}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; display:flex; flex-direction:column; gap:14px; min-width:0}
.card h2{font-size:1.3rem}
.hint{color:var(--muted); font-size:.9rem}
.fl{font-weight:700; font-size:.9rem; color:var(--muted)}
.notice{border:2px dashed var(--sun); background:var(--surface); border-radius:var(--r); padding:12px 14px; font-weight:600}
.notice.err{border-color:var(--danger); color:var(--danger)}

.progress{position:relative; height:12px; border-radius:999px; background:var(--line); overflow:hidden}
.progress i{position:absolute; inset:0 auto 0 0; width:0; background:var(--sun); border-radius:999px; transition:width .25s}
@media (prefers-reduced-motion:reduce){.progress i{transition:none}}
.pcap{font-weight:700; font-size:.9rem}

.opts{display:flex; flex-wrap:wrap; gap:8px}
.opts input{position:absolute; opacity:0; width:1px; height:1px}
.opts label{display:flex; align-items:center; gap:8px; border:2px solid var(--line); border-radius:12px; padding:10px 14px; cursor:pointer; font-weight:700; min-height:48px; background:var(--bg)}
.opts input:checked + label{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.opts input:focus-visible + label{outline:3px solid var(--sun); outline-offset:2px}
.opts.kelas label{min-width:84px; justify-content:center; font-size:1rem}
.opts.pilihan label{min-height:40px; padding:6px 12px; font-size:.9rem; font-weight:600}
.opts.pilihan input:checked + label::before{content:"\2713"; font-weight:800}

.q{display:flex; flex-direction:column; gap:10px; padding-top:14px; border-top:1px solid var(--line)}
.q.first{border-top:0; padding-top:0}
.q.missing{outline:2px solid var(--danger); outline-offset:6px; border-radius:6px}
.q.missing .qt{color:var(--danger)}
.qt{font-weight:700}
.skala{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.skala label{flex-direction:column; justify-content:center; text-align:center; gap:2px; padding:8px 4px; font-size:.82rem; min-height:48px}
.skala .em{font-size:1.5rem; line-height:1}
.dk label{min-height:36px; padding:6px 12px; font-size:.85rem; font-weight:600}

input[type="text"],input[type="password"],textarea,select{
  width:100%; border:2px solid var(--line); border-radius:12px; padding:12px;
  background:var(--bg); font-weight:600;
}
textarea{min-height:90px; resize:vertical}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.btn{border:0; background:var(--accent); color:var(--accent-ink); font-weight:800; border-radius:999px; padding:14px 26px; cursor:pointer; font-size:1.05rem; text-decoration:none; display:inline-block; text-align:center}
.btn.ghost{background:transparent; color:var(--accent); border:2px solid var(--accent)}
.btn.sm{padding:9px 18px; font-size:.9rem}
.link{background:transparent; border:2px solid var(--line); color:var(--muted); font-weight:800; font-size:.85rem; border-radius:999px; padding:7px 16px; cursor:pointer; text-decoration:none; display:inline-block}
.link:hover{border-color:var(--accent); color:var(--accent)}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}

.done{text-align:center; align-items:center; padding:36px 20px}
.done h2{font-size:1.9rem}
.rolehead{display:flex; flex-direction:column; gap:2px}
.rolehead .who{font-size:.8rem; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.06em}

/* Halaman masuk dashboard */
.gate{max-width:440px; margin:40px auto 0}

/* Dashboard */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:2px solid var(--line); background:var(--surface); padding:6px 16px; border-radius:999px; font-weight:800; cursor:pointer; text-decoration:none; color:inherit; display:inline-block}
.chip.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column; gap:2px}
.stat .n{font-family:var(--font-display); font-size:2.2rem; line-height:1; font-variant-numeric:tabular-nums}
.stat .l{color:var(--muted); font-weight:700; font-size:.85rem}
.grid2{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:18px}
.grid2.even{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.grid2,.grid2.even{grid-template-columns:minmax(0,1fr)}}
.track{position:relative; height:10px; border-radius:999px; background:var(--line)}
.track i{position:absolute; inset:0 auto 0 0; background:var(--accent); border-radius:999px}
.rolebtn{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; text-align:left; border:2px solid var(--line); background:var(--bg); border-radius:12px; padding:12px 14px; width:100%; text-decoration:none; color:inherit}
.rolebtn.on{border-color:var(--accent); background:var(--surface)}
.rolebtn .nm{font-weight:800}
.rolebtn .mv{font-family:var(--font-display); font-size:1.4rem; line-height:1; font-variant-numeric:tabular-nums}
.rolebtn .track{grid-column:1 / -1}
.rolebtn .meta{grid-column:1 / -1; color:var(--muted); font-size:.82rem; font-weight:600}
.tag{display:inline-block; font-size:.78rem; font-weight:800; padding:1px 10px; border-radius:999px; border:1.5px solid currentColor; margin-right:6px}
.dist{display:flex; height:26px; border-radius:8px; overflow:hidden; background:var(--line)}
.dist span{display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:800; min-width:0; color:var(--on-s)}
.dist .c1{background:var(--s1)} .dist .c2{background:var(--s2)} .dist .c3{background:var(--s3)} .dist .c4{background:var(--s4); color:var(--on-s4)}
.dq{display:flex; flex-direction:column; gap:6px; padding-top:12px; border-top:1px solid var(--line)}
.dq.first{border-top:0; padding-top:0}
.dq .hd{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.dq .m{font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap}
.legend{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.82rem; font-weight:700; color:var(--muted)}
.legend b{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.kbar{display:grid; grid-template-columns:104px minmax(0,1fr) 40px; gap:10px; align-items:center; font-weight:700; font-size:.92rem}
.kbar span:last-child{text-align:right; font-variant-numeric:tabular-nums}
.rank{display:flex; flex-direction:column; gap:6px; padding-top:10px; border-top:1px solid var(--line)}
.rank.first{border-top:0; padding-top:0}
.rank .hd{display:flex; justify-content:space-between; gap:12px; font-weight:800; overflow-wrap:anywhere}
.rank .hd span:last-child{font-variant-numeric:tabular-nums; white-space:nowrap}
.rank .why{font-size:.82rem; color:var(--muted); font-weight:600}
.rsn{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 32px; gap:10px; align-items:center; font-size:.9rem; font-weight:600}
.rsn span:last-child{text-align:right; font-variant-numeric:tabular-nums; font-weight:800}
.list{display:flex; flex-direction:column; gap:10px; max-height:380px; overflow-y:auto}
.sr{border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--bg); overflow-wrap:anywhere}
.sr small{display:block; color:var(--muted); font-weight:700; margin-bottom:2px}
.empty{padding:28px 12px; text-align:center; color:var(--muted); font-weight:700}
h3.sec{font-size:1.3rem; margin-top:6px}
.foot{color:var(--muted); font-size:.82rem; text-align:center; padding-top:10px}