:root{--ink:#172033;--muted:#657085;--line:#dbe3ef;--bg:#f6f8fb;--panel:#fff;--soft:#eef6f5;--primary:#0f766e;--primary-dark:#164e48;--accent:#f59e0b;--accent-soft:#fff7e6;--danger:#b42318}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--ink)}a{color:inherit;text-decoration:none}button,.button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;padding:.72rem 1rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:42px;text-align:center}button.primary,.button.primary{background:var(--primary);border-color:var(--primary);color:#fff}.topbar{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid var(--line);display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.9rem clamp(1rem,4vw,3rem)}.brand{font-weight:900;color:var(--primary);letter-spacing:.04em}.topbar nav{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}.topbar nav a{font-weight:700;color:#334155}.topbar form{margin:0}.container{width:min(1120px,calc(100% - 2rem));margin:2rem auto}.narrow{width:min(560px,calc(100% - 2rem))}.landing-hero{min-height:calc(100vh - 74px);display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:2rem;align-items:center;width:min(1120px,calc(100% - 2rem));margin:0 auto;padding:3rem 0}.hero-copy h1{font-size:clamp(2.4rem,6vw,5.4rem);line-height:.98;margin:.2rem 0 1rem;letter-spacing:0}.hero-copy h1 span{display:block;color:var(--primary-dark);font-size:clamp(1.45rem,3vw,2.25rem);line-height:1.1;margin-top:.35rem}.lead{font-size:1.15rem;color:var(--muted);max-width:690px}.eyebrow{font-weight:900;color:var(--primary);text-transform:uppercase}.actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}.statusbox,.panel,.metrics>div,.candidate-card,.step-grid article{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 34px rgba(15,23,42,.06)}.statusbox{padding:1.5rem}.statusbox span,.metrics span{display:block;color:var(--muted);font-weight:700}.statusbox strong{font-size:2rem;color:var(--primary)}.election-status{border-top:5px solid var(--accent)}.identity-strip{width:min(1120px,calc(100% - 2rem));margin:0 auto 2rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}.identity-strip div{padding:1rem;border-right:1px solid var(--line)}.identity-strip div:last-child{border-right:0}.identity-strip span,.step-grid span,.profile-block span,.candidate-names span{display:block;color:var(--muted);font-size:.78rem;font-weight:900;text-transform:uppercase}.identity-strip strong{display:block;margin-top:.2rem;color:var(--primary-dark)}.landing-section{width:min(1120px,calc(100% - 2rem));margin:0 auto 2rem}.motto-section{background:var(--primary-dark);color:#fff;border-radius:8px;padding:1.5rem}.motto-section .eyebrow,.motto-section p{color:#d7fffa}.motto-section h2{margin:.25rem 0;font-size:clamp(1.5rem,3vw,2.35rem)}.section-heading{margin-bottom:1rem}.section-heading h1,.section-heading h2{margin:.2rem 0 0}.section-heading.split{display:flex;align-items:center;justify-content:space-between;gap:1rem}.step-grid,.candidate-preview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.step-grid article{padding:1rem}.step-grid strong{display:block;margin:.45rem 0 .2rem;font-size:1.05rem}.step-grid p{margin:0;color:var(--muted)}.panel{padding:1.4rem}.form,.grid-form{display:grid;gap:1rem}.grid-form{grid-template-columns:repeat(2,minmax(0,1fr))}label{display:grid;gap:.35rem;font-weight:700}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:.72rem;font:inherit;background:#fff}textarea{min-height:96px}.check{display:flex;align-items:center;gap:.5rem}.check input{width:auto}.flash{width:min(1120px,calc(100% - 2rem));margin:1rem auto 0;padding:.9rem 1rem;border-radius:8px;font-weight:700}.flash.error{background:#fee4e2;color:var(--danger)}.flash.info{background:#e0f2fe;color:#075985}.candidate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.candidate-card{padding:1.2rem;display:grid;gap:.85rem;align-content:start}.candidate-topline{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.number{font-size:2.6rem;font-weight:900;color:var(--accent);line-height:1}.class-badge,.election-pill{background:var(--accent-soft);border:1px solid #fde7b0;color:#8a5600;border-radius:999px;padding:.35rem .65rem;font-size:.82rem;font-weight:900}.avatar{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,var(--primary-dark),var(--primary) 55%,#38bdf8);color:#fff;border-radius:8px;display:grid;place-items:center;font-size:4rem;font-weight:900}.candidate-card h2,.candidate-card h3{margin:0;font-size:1.35rem}.candidate-card p{margin:.1rem 0;color:var(--muted)}.candidate-names p{color:var(--ink)}.profile-block,.mission-details{border-top:1px solid var(--line);padding-top:.75rem}.profile-block p,.mission-details p{white-space:pre-line}.mission-details summary{cursor:pointer;font-weight:900;color:var(--primary-dark)}.vision-snippet{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.preview-card .button{margin-top:auto}.chosen{font-size:1.25rem}.success{border-color:#99f6e4}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.metrics>div{padding:1rem}.metrics strong{font-size:1.8rem}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:8px;margin-top:1rem}table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:.8rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{background:#eef6f5;color:#164e48}td form{margin:0}
@media(max-width:960px){.candidate-grid,.candidate-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.step-grid,.identity-strip,.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.identity-strip div:nth-child(2){border-right:0}.identity-strip div{border-bottom:1px solid var(--line)}.identity-strip div:nth-child(n+3){border-bottom:0}}
@media(max-width:800px){.landing-hero{grid-template-columns:1fr;min-height:auto;padding:2rem 0}.candidate-grid,.candidate-preview-grid,.step-grid,.identity-strip,.metrics,.grid-form{grid-template-columns:1fr}.section-heading.split{align-items:flex-start;flex-direction:column}.identity-strip div{border-right:0}.identity-strip div:nth-child(n+3){border-bottom:1px solid var(--line)}.identity-strip div:last-child{border-bottom:0}.topbar{align-items:flex-start;flex-direction:column}.topbar nav{gap:.45rem}.topbar nav a,.topbar button{font-size:.9rem;padding:.55rem .7rem}.container{margin:1rem auto}.hero-copy h1{font-size:clamp(2.35rem,14vw,4rem)}}
.candidate-photo{width:100%;aspect-ratio:16/9;display:block;object-fit:cover;border:1px solid var(--line);border-radius:8px;background:#eef6f5}.admin-thumb{width:96px;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);border-radius:8px;display:block;margin-bottom:.5rem}.muted{color:var(--muted);font-weight:700}
.countdown-card{border-top:5px solid var(--accent)!important}.dashboard-summary{margin-top:1rem}.dashboard-summary p{margin:.35rem 0;color:var(--muted)}
.participation-chart{margin-top:1rem}.participation-chart .section-heading p{margin:.25rem 0 0;color:var(--muted)}.bar-row{display:grid;grid-template-columns:180px minmax(0,1fr) 64px;gap:.8rem;align-items:center;padding:.7rem 0;border-top:1px solid var(--line)}.bar-label{display:grid;gap:.15rem}.bar-label span{color:var(--muted);font-size:.9rem}.bar-track{height:14px;background:#e6edf5;border-radius:999px;overflow:hidden}.bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),#38bdf8);border-radius:999px}.bar-value{text-align:right;font-weight:900;color:var(--primary-dark)}
@media(max-width:800px){.bar-row{grid-template-columns:1fr}.bar-value{text-align:left}}

/* Mockup-inspired landing and admin dashboard */
.mock-landing{background:#f4f7fb}.mock-hero{position:relative;min-height:560px;color:#fff;background:linear-gradient(90deg,rgba(7,56,103,.96),rgba(9,86,148,.72)),linear-gradient(135deg,#0d4f88,#0f766e);overflow:hidden}.mock-hero:after{content:"";position:absolute;right:-80px;bottom:-80px;width:55%;height:72%;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.04));border-radius:8px;transform:skewX(-10deg)}.mock-hero-nav{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:min(1180px,calc(100% - 2rem));margin:0 auto;padding:1rem 0}.mock-school-brand{display:flex;align-items:center;gap:.7rem;font-weight:900}.mock-school-brand img{width:44px;height:44px;border-radius:8px;background:#fff;object-fit:cover}.mock-school-brand span{line-height:1.05}.mock-hero-nav nav{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}.mock-hero-nav nav a{font-weight:800;color:rgba(255,255,255,.86)}.mock-hero-content{position:relative;z-index:1;width:min(1180px,calc(100% - 2rem));margin:0 auto;padding:4.2rem 0 5rem}.mock-hero-content h1{font-size:clamp(2.4rem,6vw,4.8rem);line-height:1.02;max-width:760px;margin:.25rem 0 1rem}.mock-hero-content .lead{color:rgba(255,255,255,.86);max-width:650px}.hero-note{font-weight:800;color:#dbeafe}.gold-cta{background:#f5c542!important;border-color:#f5c542!important;color:#172033!important;box-shadow:0 12px 24px rgba(245,197,66,.28)}.glass-button{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}.mock-status-card{position:absolute;z-index:2;right:clamp(1rem,6vw,6rem);bottom:2rem;background:rgba(255,255,255,.94);color:var(--ink);border-radius:8px;padding:1rem 1.2rem;width:min(300px,calc(100% - 2rem));box-shadow:0 20px 50px rgba(2,6,23,.22)}.mock-status-card span{display:block;color:var(--muted);font-weight:900;text-transform:uppercase;font-size:.78rem}.mock-status-card strong{display:block;color:#0d5797;font-size:1.7rem;margin:.25rem 0}.mock-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;background:#fff;border:1px solid var(--line);border-radius:8px;padding:1rem;box-shadow:0 12px 34px rgba(15,23,42,.06)}.mock-steps div{display:grid;place-items:center;gap:.45rem;min-height:90px;border-right:1px solid var(--line)}.mock-steps div:last-child{border-right:0}.mock-steps span{display:grid;place-items:center;width:42px;height:42px;border-radius:8px;background:#eaf4ff;color:#0d5797;font-weight:900}.candidate-actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.admin-mock-shell{display:grid;grid-template-columns:160px minmax(0,1fr);width:min(1180px,calc(100% - 2rem));margin:2rem auto;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 20px 60px rgba(15,23,42,.14)}.admin-mock-sidebar{background:#f8fbff;border-right:1px solid var(--line);padding:1rem;display:grid;align-content:start;gap:.35rem}.osis-mark{background:#0d5797;color:#fff;border-radius:8px;padding:.75rem;text-align:center;margin-bottom:.8rem}.osis-mark strong{display:block;color:#f5c542;font-size:1.15rem}.osis-mark span{font-size:.72rem;font-weight:900}.admin-mock-sidebar a{padding:.72rem .8rem;border-radius:8px;font-weight:800;color:#536173}.admin-mock-sidebar a.active,.admin-mock-sidebar a:hover{background:#eaf4ff;color:#0d5797}.admin-mock-content{min-width:0;background:#f4f7fb;padding:1rem}.admin-mock-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:8px;padding:.85rem 1rem;margin-bottom:1rem}.admin-mock-header h1{font-size:1.15rem;margin:0}.admin-mock-header p{margin:.2rem 0 0;color:var(--muted);font-weight:700}.admin-profile{display:flex;align-items:center;gap:.6rem;font-weight:900}.admin-profile img{width:38px;height:38px;border-radius:50%;object-fit:cover}.mock-dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.mock-widget{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1rem;box-shadow:0 10px 26px rgba(15,23,42,.06)}.mock-widget h2{font-size:1rem;margin:0 0 .8rem}.turnout-widget{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:1rem}.donut{width:140px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#1aa7ec calc(var(--pct)*1%),#f5c542 0);position:relative}.donut:after{content:"";position:absolute;inset:24px;background:#fff;border-radius:50%}.donut span{position:relative;z-index:1;text-align:center;font-weight:800;color:var(--muted)}.donut strong{font-size:1.45rem;color:var(--ink)}.turnout-widget ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-weight:800;color:#425166}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.4rem}.dot.blue{background:#1aa7ec}.dot.teal{background:#0f766e}.dot.yellow{background:#f5c542}.line-chart{height:160px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(#fff,#eff8ff);position:relative;overflow:hidden}.line-chart span{position:absolute;inset:20px;background:linear-gradient(135deg,transparent 8%,#1a8ccf 9%,transparent 10%,transparent 30%,#1a8ccf 31%,transparent 32%,transparent 55%,#1a8ccf 56%,transparent 57%,transparent 80%,#1a8ccf 81%,transparent 82%);border-bottom:3px solid rgba(26,140,207,.35)}.realtime-widget,.candidate-management{grid-column:1/-1}.progress-row{display:grid;grid-template-columns:160px minmax(0,1fr) 52px;align-items:center;gap:.8rem;margin:.65rem 0}.progress-row label{display:block;font-weight:900}.progress-row small{display:block;color:var(--muted)}.progress-track{height:16px;background:#e6ebf2;border-radius:999px;overflow:hidden}.progress-track span{display:block;height:100%;background:#0d5797;border-radius:999px}.candidate-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}.candidate-mini-grid article{display:grid;grid-template-columns:50px minmax(0,1fr);gap:.6rem;align-items:center;border:1px solid var(--line);border-radius:8px;padding:.7rem;background:#fff}.candidate-mini-grid img,.mini-avatar{width:50px;height:50px;border-radius:50%;object-fit:cover}.mini-avatar{display:grid;place-items:center;background:#eaf4ff;color:#0d5797;font-weight:900}.candidate-mini-grid strong,.candidate-mini-grid span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.candidate-mini-grid span{color:var(--muted);font-size:.82rem;font-weight:700}.candidate-mini-grid article div:last-child{grid-column:2}.candidate-mini-grid .button{min-height:32px;padding:.35rem .7rem;background:#0d5797;color:#fff}.compact-metrics{margin-top:1rem}
@media(max-width:900px){.mock-hero-nav{align-items:flex-start;flex-direction:column}.mock-status-card{position:relative;right:auto;bottom:auto;margin:0 auto 1.5rem}.mock-steps,.candidate-mini-grid{grid-template-columns:1fr 1fr}.mock-steps div:nth-child(2){border-right:0}.admin-mock-shell{grid-template-columns:1fr}.admin-mock-sidebar{grid-template-columns:repeat(3,minmax(0,1fr))}.osis-mark{grid-column:1/-1}.mock-dashboard-grid,.turnout-widget{grid-template-columns:1fr}}@media(max-width:640px){.mock-hero-content{padding:2.5rem 0}.mock-steps,.candidate-actions,.candidate-mini-grid,.progress-row{grid-template-columns:1fr}.mock-steps div{border-right:0;border-bottom:1px solid var(--line)}.mock-steps div:last-child{border-bottom:0}.admin-mock-sidebar{grid-template-columns:1fr}.admin-mock-header{align-items:flex-start;flex-direction:column}}
.landing-qr{display:grid;gap:.35rem;justify-items:center;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);text-align:center}.landing-qr img{width:128px;height:128px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:.35rem}.landing-qr small{font-weight:900;color:#0d5797}.landing-qr a{max-width:100%;overflow-wrap:anywhere;color:var(--muted);font-size:.78rem;font-weight:700}.role-pill{border:1px solid var(--line);border-radius:999px;padding:.4rem .65rem;color:var(--muted);font-size:.82rem;font-weight:800;background:#f8fafc}
.form-wide{grid-column:1/-1}.settings-logo-preview{display:flex;align-items:center;gap:.8rem;color:var(--muted);font-weight:800}.settings-logo-preview img{width:72px;height:72px;border:1px solid var(--line);border-radius:8px;background:#fff;object-fit:cover}.settings-page .panel{margin-bottom:1rem}.settings-page code{background:#eef6f5;border:1px solid var(--line);border-radius:6px;padding:.15rem .35rem}
html{scroll-behavior:smooth}.mock-hero-content>*{opacity:0;transform:translateY(18px);animation:fadeSlideUp .72s ease forwards}.mock-hero-content .eyebrow{animation-delay:.05s}.mock-hero-content h1{animation-delay:.14s}.mock-hero-content .lead{animation-delay:.24s}.mock-hero-content .actions{animation-delay:.34s}.mock-hero-content .hero-note{animation-delay:.44s}@keyframes fadeSlideUp{to{opacity:1;transform:translateY(0)}}.button,.candidate-card,.mock-steps div{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background-color .22s ease}.button:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,23,42,.14)}.gold-cta:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(245,197,66,.38)}.preview-card:hover{transform:translateY(-6px);border-color:#9ad8ef;box-shadow:0 18px 42px rgba(13,87,151,.16)}.status-badge{display:inline-flex!important;align-items:center;gap:.45rem}.status-badge i{display:inline-block;width:10px;height:10px;border-radius:50%;background:#94a3b8}.status-badge.is-open i{background:#22c55e;box-shadow:0 0 0 rgba(34,197,94,.6);animation:statusPulse 1.45s ease-out infinite}@keyframes statusPulse{70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}.candidate-photo-placeholder{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:4/3;border:1px solid #c8d9e8;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,#eaf4ff,#f8fbff);color:#0d5797}.candidate-photo-placeholder:before{content:"";position:absolute;bottom:0;width:56%;height:62%;border-radius:999px 999px 0 0;background:linear-gradient(180deg,#0d5797,#0f766e)}.candidate-photo-placeholder:after{content:"";position:absolute;top:20%;width:64px;height:64px;border-radius:50%;background:#d7e8f7;border:4px solid #fff;box-shadow:0 10px 24px rgba(13,87,151,.18)}.candidate-photo-placeholder span{position:relative;z-index:1;margin-top:1.3rem;color:#fff;font-size:2.8rem;font-weight:900}.candidate-photo-placeholder small{position:absolute;left:.65rem;right:.65rem;bottom:.55rem;z-index:1;background:rgba(255,255,255,.9);border:1px solid rgba(13,87,151,.16);border-radius:999px;padding:.25rem .45rem;color:#0d5797;font-size:.72rem;font-weight:900;text-align:center}.mock-steps div{opacity:0;animation:fadeSlideUp .62s ease forwards}.mock-steps div:nth-child(1){animation-delay:.08s}.mock-steps div:nth-child(2){animation-delay:.18s}.mock-steps div:nth-child(3){animation-delay:.28s}.mock-steps div:nth-child(4){animation-delay:.38s}.mock-steps div:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(15,23,42,.1)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mock-hero-content>*,.mock-steps div,.status-badge.is-open i{animation:none;opacity:1;transform:none}.button:hover,.gold-cta:hover,.preview-card:hover,.mock-steps div:hover{transform:none}}