:root{
  --bg:#F2F5F8; --surface:#FFFFFF; --ink:#14243A; --muted:#51647A; --line:#D3DCE6;
  --seal:#1F5FA8; --seal-soft:#E4EEF9; --ok:#1E7B5C; --ok-soft:#E3F3EC;
  --bad:#B3363B; --bad-soft:#FBE7E8; --warn:#9A5A0B; --warn-soft:#FBF0DD;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1926; --surface:#152332; --ink:#E4ECF3; --muted:#9BB0C5; --line:#2A3C50;
    --seal:#6FA8E8; --seal-soft:#1A2E45; --ok:#5CC49B; --ok-soft:#153327;
    --bad:#F08084; --bad-soft:#3D1D20; --warn:#E5A657; --warn-soft:#3A2B14;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1926; --surface:#152332; --ink:#E4ECF3; --muted:#9BB0C5; --line:#2A3C50;
  --seal:#6FA8E8; --seal-soft:#1A2E45; --ok:#5CC49B; --ok-soft:#153327;
  --bad:#F08084; --bad-soft:#3D1D20; --warn:#E5A657; --warn-soft:#3A2B14;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:"Vazirmatn","Vazir",Tahoma,"Segoe UI",sans-serif; font-size:16px; line-height:1.9;
  display:flex; align-items:flex-start; justify-content:center; padding:24px 14px;
}
.card{
  width:100%; max-width:600px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:26px 22px 20px; box-shadow:0 8px 30px rgba(20,36,58,.08);
}
header.top{
  position:relative; margin:-26px -22px 16px; padding:22px 20px 16px; text-align:center; color:#fff;
  background:linear-gradient(135deg,#0F2A4A,#1F5FA8); border-radius:16px 16px 0 0;
}
.theme-toggle{
  position:absolute; top:10px; inset-inline-end:10px; width:32px; height:32px; padding:0;
  border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.theme-toggle:hover{background:rgba(255,255,255,.24);}
.theme-toggle:focus-visible{outline:2px solid #fff; outline-offset:2px;}
.theme-toggle svg{width:16px; height:16px;}
.theme-toggle .i-sun{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none;}
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:block;}
}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none;}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block;}
:root[data-theme="light"] .theme-toggle .i-sun{display:none;}
:root[data-theme="light"] .theme-toggle .i-moon{display:block;}
h1{font-size:1.22rem; line-height:1.75; margin:0 0 6px; font-weight:800;}
h2{font-size:1.1rem; margin:0 0 6px;}
.sub{color:var(--muted); font-size:.92rem; margin:0;}
header.top .sub{color:rgba(255,255,255,.85); font-size:.85rem; display:flex; align-items:center; justify-content:center; gap:6px;}
.deadline{display:block; text-align:center; margin:0 auto 14px; width:fit-content; padding:2px 14px; border-radius:999px; background:var(--seal-soft); color:var(--seal); font-size:.88rem; font-weight:700;}
.deadline.soon{background:var(--warn-soft); color:var(--warn);}
.muted{color:var(--muted); text-align:center;}
.state[hidden],[hidden]{display:none !important;}
.instruction{margin:0 0 12px;}

/* progress */
.steps{list-style:none; display:flex; gap:8px; padding:0; margin:0 0 16px; justify-content:center;}
.steps li{display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--muted); padding:2px 12px 2px 8px; border-radius:999px; border:1px solid var(--line); margin:0;}
.steps li span{width:22px; height:22px; border-radius:50%; background:var(--line); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700;}
.steps li.on{color:var(--seal); border-color:var(--seal); font-weight:700;}
.steps li.on span{background:var(--seal); color:#fff;}
.steps li.done span{background:var(--ok); color:#fff;}

/* nominee cards */
.cands,.review{list-style:none; padding:0; margin:0 0 10px;}
.cand{margin-bottom:10px; border:1.5px solid var(--line); border-radius:14px; transition:border-color .15s, background .15s; overflow:hidden;}
.cand.on{border-color:var(--seal); background:var(--seal-soft);}
.cand.off{opacity:.5;}
.pick{display:flex; align-items:center; gap:12px; padding:13px 14px; cursor:pointer;}
.cand.off .pick{cursor:not-allowed;}
.pick input{position:absolute; opacity:0; width:1px; height:1px;}
.tick{flex:0 0 26px; height:26px; border:2px solid var(--muted); border-radius:8px; display:flex; align-items:center; justify-content:center; color:transparent; transition:all .15s; background:var(--surface);}
.cand.on .tick{background:var(--seal); border-color:var(--seal); color:#fff;}
.pick input:focus-visible + .tick{outline:3px solid var(--seal); outline-offset:2px;}
.who{font-weight:700; font-size:1.05rem; line-height:1.6;}
.more{border-top:1px dashed var(--line); padding:0 14px;}
.more summary{cursor:pointer; padding:8px 0; font-size:.88rem; color:var(--seal); font-weight:700; list-style:none;}
.more summary::-webkit-details-marker{display:none;}
.more summary::before{content:"◂ "; display:inline-block; transition:transform .15s;}
.more[open] summary::before{transform:rotate(-90deg);}
.sec{margin:0 0 4px; font-size:.78rem; font-weight:700; color:var(--muted);}
.bio{margin:0 0 10px; font-size:.93rem; color:var(--ink); white-space:pre-line; line-height:1.95;}
.search{width:100%; font:inherit; padding:11px 14px; margin:0 0 10px; border:1.5px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink);}
.search:focus-visible{outline:3px solid var(--seal); outline-offset:2px;}
.cand.hide{display:none;}
.link{display:inline-block; margin:0 0 6px; padding:8px 0; min-height:44px; line-height:28px; font-size:.92rem; color:var(--seal);}

/* sticky action bar */
.bar{position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 4px 4px; margin-top:6px; background:linear-gradient(to top, var(--surface) 75%, transparent);}
.counter{color:var(--muted); font-size:.92rem; white-space:nowrap;}
.counter b{color:var(--ink); font-size:1.1rem;}
.bar .btn{flex:0 1 220px;}

.review li{padding:10px 14px; margin-bottom:6px; border-radius:10px; background:var(--seal-soft); font-weight:700;}
.review li.empty{background:var(--warn-soft); color:var(--warn); font-weight:500;}
.row{display:flex; gap:10px;}
.btn{
  font:inherit; font-weight:700; padding:12px 18px; border-radius:12px; cursor:pointer; flex:1;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink);
}
.btn.primary{background:var(--seal); border-color:var(--seal); color:#fff;}
.btn:disabled{opacity:.55; cursor:wait;}
.btn:focus-visible{outline:3px solid var(--seal); outline-offset:2px;}
.notice{padding:16px 18px; border-radius:12px; background:var(--seal-soft); border-inline-start:5px solid var(--seal);}
.notice.ok{background:var(--ok-soft); border-color:var(--ok);}
.notice.bad{background:var(--bad-soft); border-color:var(--bad);}
.notice.warn{background:var(--warn-soft); border-color:var(--warn);}
.notice strong{display:block; margin-bottom:2px;}
.field{display:block; margin:14px 0 6px; font-weight:700; font-size:.92rem;}
.code{width:100%; font:inherit; font-family:ui-monospace,Consolas,monospace; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); margin-bottom:10px; text-align:left;}
.code:focus-visible{outline:3px solid var(--seal); outline-offset:2px;}
.err{color:var(--bad); font-size:.9rem; margin:0 0 10px;}
footer{margin-top:20px; padding-top:12px; border-top:1px solid var(--line); text-align:center;}
footer p{margin:0 0 2px; color:var(--muted); font-size:.82rem;}
@media (max-width:420px){ body{padding:10px 8px;} .card{padding:20px 14px 16px;} header.top{margin:-20px -14px 14px;} .steps li{font-size:.78rem;} }