:root{--g:#0f7b4f;--g2:#0a5c3b;--bg:#f2f6f4;--ink:#16231d;--mut:#66756d;--line:#dbe5df;--bad:#c0392b;--warn:#b7791f}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.45}
h1,h2,h3{margin:.2em 0 .4em}
.muted{color:var(--mut)}
.center-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.card-box{background:#fff;border-radius:16px;padding:28px;width:100%;max-width:440px;box-shadow:0 8px 30px rgba(0,0,0,.08);text-align:center}
.card-box form{text-align:left}
.logo{font-size:48px}
label{display:block;font-weight:600;margin:12px 0 4px;font-size:.92rem}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--g);border-color:var(--g)}
.big-input{font-size:1.4rem;text-align:center;letter-spacing:.05em;padding:16px;margin-bottom:12px}
.btn{display:inline-block;background:var(--g);color:#fff;border:0;padding:11px 20px;border-radius:10px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--g2)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.block{width:100%;padding:14px}
.btn.big{padding:16px 36px;font-size:1.15rem}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.danger{background:var(--bad)}
.btn.sm{padding:6px 12px;font-size:.85rem}
.alert{padding:12px 14px;border-radius:10px;margin:12px 0;text-align:left;font-weight:500}
.alert.ok{background:#e4f6ec;color:#0a5c3b}
.alert.bad{background:#fdeaea;color:var(--bad)}
.alert.warn{background:#fff4dc;color:#7a5200}
.alert.big{font-size:1.15rem;text-align:center;padding:18px}
.banner{background:#eefaf3;border:1px solid #bfe3cf;color:#0a5c3b;border-radius:10px;padding:8px 12px;margin:8px 0;font-size:.92rem}

/* ballot */
.ballot-page{padding-bottom:60px}
.topbar{background:var(--g);color:#fff;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:20}
.link-light{color:#fff;opacity:.85}
.progress{position:sticky;top:58px;z-index:19;background:#fff;border-bottom:1px solid var(--line);padding:8px 18px;font-size:.85rem;color:var(--mut)}
.progress .bar{position:absolute;left:0;bottom:0;height:3px;background:var(--g);width:0;transition:width .3s}
.wrap{max-width:1000px;margin:0 auto;padding:12px}
.pos{background:#fff;border-radius:16px;padding:16px 8px 12px;margin:16px 0;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.pos.err{outline:3px solid var(--bad)}
.pos-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 10px;flex-wrap:wrap}
.pos-head h2{color:var(--g2)}
.step{color:var(--mut);font-size:.85rem}
.hint{margin:0 10px 8px;color:var(--mut);font-size:.85rem}
.track-wrap{position:relative}
.track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.cand{position:relative;flex:0 0 min(230px,70vw);scroll-snap-align:center;cursor:pointer;display:block;margin:0}
.cand input{position:absolute;opacity:0;pointer-events:none}
.card{position:relative;border:2px solid var(--line);border-radius:14px;padding:18px 12px;text-align:center;height:100%;background:#fff;transition:.15s}
.cand:hover .card{border-color:#9bcdb5}
.cand input:checked + .card{border-color:var(--g);background:#eefaf3;box-shadow:0 0 0 3px rgba(15,123,79,.25)}
.cand input:focus-visible + .card{outline:3px solid #000}
.tick{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:var(--g);color:#fff;font-weight:700;display:none;align-items:center;justify-content:center}
.cand input:checked + .card .tick{display:flex}
.card img,.avatar{width:110px;height:110px;border-radius:50%;object-fit:cover;margin:0 auto 10px;display:block}
.avatar{background:linear-gradient(135deg,#0f7b4f,#3bb384);color:#fff;font-size:2rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.cname{font-weight:700;font-size:1.05rem}
.cclass{color:var(--mut);font-size:.85rem}
.cmotto{margin-top:6px;font-style:italic;font-size:.85rem;color:#3d4d44}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:40px;height:40px;border-radius:50%;border:0;background:rgba(15,123,79,.92);color:#fff;font-size:26px;cursor:pointer;line-height:1;display:none}
.arrow.left{left:2px}.arrow.right{right:2px}
@media(hover:hover) and (min-width:700px){.arrow{display:block}}
.submit-area{text-align:center;padding:20px 0 40px}
dialog{border:0;border-radius:16px;padding:22px;max-width:480px;width:92%;box-shadow:0 10px 40px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(0,0,0,.5)}
.summary{list-style:none;padding:0;margin:10px 0}
.summary li{padding:8px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}
.summary li span:first-child{color:var(--mut)}
.dlg-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}

/* admin / clerk */
.adm-nav{background:var(--g2);color:#fff;display:flex;gap:4px;align-items:center;padding:0 14px;flex-wrap:wrap}
.adm-nav .brand{font-weight:800;margin-right:14px;padding:14px 0}
.adm-nav a{color:#d6efe3;text-decoration:none;padding:14px 12px;font-weight:600}
.adm-nav a.on,.adm-nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.adm-nav .sp{flex:1}
.adm-wrap{max-width:1250px;margin:0 auto;padding:16px}
.panel{background:#fff;border-radius:14px;padding:18px;margin-bottom:18px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.8rem;text-transform:uppercase;color:var(--mut)}
.row-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:end}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.stat{background:#fff;border-radius:14px;padding:16px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.stat b{display:block;font-size:2rem;color:var(--g2)}
.stat span{color:var(--mut);font-size:.85rem}
.live{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--mut)}
.live i{width:10px;height:10px;border-radius:50%;background:#2ecc71;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.25}}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:18px}
@media(max-width:480px){.pos-grid{grid-template-columns:1fr}}
.rc{background:#fff;border-radius:14px;padding:18px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.rc h3{color:var(--g2);display:flex;justify-content:space-between;gap:8px}
.rc h3 small{font-weight:500;color:var(--mut);font-size:.8rem}
.rc-body{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}
.rc svg{width:190px;height:190px;flex:0 0 auto}
.legend{flex:1;min-width:190px}
.lg{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line)}
.dot{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
.lg .n{flex:1;font-weight:600;font-size:.92rem}
.lg .v{font-variant-numeric:tabular-nums;font-size:.9rem;text-align:right}
.lead{background:#fff8dc;border-radius:6px}
.thumb{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#dfe9e3;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--g2)}
.inline{display:inline}
.acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cred{border:2px dashed var(--g)}
@media print{.adm-nav,.btn,.panel:not(.cred),.alert,h1{display:none!important}.cred{border:0}}