:root {
  --blue: #075aa9;
  --blue-dark: #063f78;
  --blue-soft: #eaf4ff;
  --red: #d71920;
  --red-soft: #fff0f0;
  --gold: #f2c94c;
  --ink: #16243a;
  --muted: #65758b;
  --line: #dbe4ef;
  --surface: #ffffff;
  --bg: #f4f8fc;
  --success: #138a5b;
  --shadow: 0 18px 50px rgba(17, 45, 80, .11);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(7, 90, 169, .10), transparent 28rem),
    radial-gradient(circle at 100% 100%, rgba(215, 25, 32, .06), transparent 30rem),
    var(--bg);
}
button, input { font: inherit; }
button { cursor: pointer; }

.page-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 24px; }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:22px; }
.brand-wrap { display:flex; align-items:center; gap:16px; }
.logo { width:78px; height:78px; object-fit:contain; border-radius:18px; background:#fff; box-shadow:0 8px 26px rgba(18,57,96,.10); padding:5px; }
.eyebrow, .section-label { font-size:.75rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--blue); margin:0 0 6px; }
h1 { font-size:2rem; line-height:1; margin:0; color:var(--red); }
.tagline { margin:7px 0 0; color:var(--muted); font-size:.92rem; }
.status-pill { display:inline-flex; gap:8px; align-items:center; padding:10px 14px; border:1px solid #d8e5f2; border-radius:999px; background:#fff; font-size:.86rem; font-weight:700; }
.status-pill span { width:9px; height:9px; border-radius:50%; background:#19a36b; box-shadow:0 0 0 4px rgba(25,163,107,.12); }

.main-card { background:var(--surface); border:1px solid rgba(7,90,169,.10); border-radius:26px; box-shadow:var(--shadow); overflow:hidden; }
.view { display:none; padding:38px; }
.view.active { display:block; animation:fade .22s ease-out; }
@keyframes fade { from {opacity:.2; transform:translateY(4px)} to {opacity:1; transform:none} }
.intro-grid { display:grid; grid-template-columns:1.6fr 1fr; gap:24px; align-items:start; }
h2 { margin:0 0 8px; font-size:clamp(1.55rem, 2.8vw, 2.3rem); letter-spacing:-.025em; }
.muted { color:var(--muted); line-height:1.65; margin:0; }
.security-note { border-left:4px solid var(--gold); background:#fffaf0; border-radius:14px; padding:17px 18px; display:grid; gap:5px; }
.security-note strong { font-size:.92rem; }
.security-note span { color:#78653a; font-size:.86rem; line-height:1.5; }
.verify-form { margin-top:34px; padding-top:28px; border-top:1px solid var(--line); }
.verify-form label { display:block; font-weight:750; margin-bottom:9px; }
.input-row { display:grid; grid-template-columns:1fr auto; gap:12px; }
input[type=text], #admission { width:100%; border:1px solid #cfdbe7; background:#fbfdff; border-radius:14px; padding:15px 16px; outline:none; transition:.2s; text-transform:uppercase; }
#admission:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(7,90,169,.09); }
.primary-btn, .ghost-btn { border-radius:13px; padding:14px 18px; font-weight:800; border:0; transition:.18s; }
.primary-btn { color:#fff; background:linear-gradient(135deg, var(--blue), var(--blue-dark)); box-shadow:0 8px 18px rgba(7,90,169,.18); }
.primary-btn:hover { transform:translateY(-1px); box-shadow:0 10px 22px rgba(7,90,169,.24); }
.primary-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.ghost-btn { color:var(--blue); background:var(--blue-soft); }
.wide { width:100%; margin-top:16px; }
.form-message { min-height:22px; margin:11px 0 0; font-size:.9rem; font-weight:650; }
.form-message.error { color:#b42318; }
.form-message.success { color:var(--success); }

.ballot-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:26px; }
.positions { display:grid; gap:20px; }
.position-card { border:1px solid var(--line); border-radius:18px; padding:20px; background:#fff; }
.position-title { display:flex; align-items:center; gap:11px; margin-bottom:15px; }
.position-number { width:31px; height:31px; border-radius:9px; display:grid; place-items:center; background:var(--blue-soft); color:var(--blue); font-size:.82rem; font-weight:800; }
.position-title h3 { margin:0; font-size:1.06rem; }
.candidate-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.candidate-option { position:relative; display:block; }
.candidate-option input { position:absolute; opacity:0; pointer-events:none; }
.candidate-box { min-height:94px; border:1px solid #d7e1ec; border-radius:15px; padding:15px; transition:.18s; background:#fbfdff; }
.candidate-option:hover .candidate-box { border-color:#a9c8e6; }
.candidate-option input:checked + .candidate-box { border:2px solid var(--blue); background:#f2f8ff; box-shadow:0 6px 16px rgba(7,90,169,.10); }
.candidate-top { display:flex; justify-content:space-between; gap:10px; }
.candidate-name { font-weight:800; line-height:1.35; }
.radio-dot { width:18px; height:18px; flex:0 0 18px; border-radius:50%; border:2px solid #a9b8c7; position:relative; }
.candidate-option input:checked + .candidate-box .radio-dot { border-color:var(--blue); }
.candidate-option input:checked + .candidate-box .radio-dot:after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--blue); }
.candidate-meta { margin-top:9px; font-size:.8rem; color:var(--muted); line-height:1.45; }
.candidate-subtitle { color:var(--blue-dark); font-weight:650; margin-top:5px; font-size:.83rem; }
.ballot-footer { margin-top:26px; padding-top:24px; border-top:1px solid var(--line); }
.confirm-check { display:flex; align-items:flex-start; gap:10px; color:#4f6177; font-size:.9rem; line-height:1.55; }
.confirm-check input { margin-top:4px; accent-color:var(--blue); }

.review-list { display:grid; gap:10px; margin:26px 0; }
.review-item { display:flex; justify-content:space-between; gap:20px; padding:15px 17px; border:1px solid var(--line); border-radius:13px; background:#fbfdff; }
.review-position { color:var(--muted); font-size:.86rem; }
.review-choice { text-align:right; font-weight:800; }
.review-choice small { display:block; margin-top:4px; color:var(--muted); font-weight:550; }
.review-actions { display:flex; justify-content:flex-end; gap:10px; }
.success-icon { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:#eaf9f2; color:var(--success); font-size:1.9rem; font-weight:900; margin-bottom:20px; }
#lockedView { text-align:center; }
#lockedView .review-list { text-align:left; max-width:760px; margin-left:auto; margin-right:auto; }

.modal { position:fixed; inset:0; background:rgba(9,25,44,.48); backdrop-filter:blur(5px); display:none; place-items:center; padding:20px; z-index:50; }
.modal.open { display:grid; }
.modal-card { width:min(460px,100%); background:#fff; border-radius:22px; padding:28px; text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.22); }
.modal-icon { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; margin:0 auto 14px; background:var(--red-soft); color:var(--red); font-weight:900; }
.modal-card h3 { margin:0 0 8px; }
.modal-card p { color:var(--muted); line-height:1.6; }
.modal-actions { display:flex; justify-content:center; gap:10px; margin-top:20px; }
footer { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:18px; color:#75859a; font-size:.78rem; }

@media (max-width:760px) {
  .page-shell { width:min(100% - 20px, 1120px); padding-top:16px; }
  .site-header { align-items:flex-start; }
  .status-pill { display:none; }
  .logo { width:62px; height:62px; }
  h1 { font-size:1.55rem; }
  .eyebrow { font-size:.63rem; }
  .view { padding:24px 18px; }
  .intro-grid, .candidate-grid { grid-template-columns:1fr; }
  .input-row { grid-template-columns:1fr; }
  .ballot-head { flex-direction:column; }
  .review-item { flex-direction:column; gap:6px; }
  .review-choice { text-align:left; }
  .review-actions { display:grid; grid-template-columns:1fr 1fr; }
}