:root {
  --ink: #102a43;
  --muted: #66788a;
  --paper: #f5faf9;
  --white: #ffffff;
  --line: #dce8e6;
  --teal: #0ab99d;
  --teal-dark: #087c70;
  --coral: #ff725e;
  --violet: #725cff;
  --navy: #071b2a;
  --yellow: #ffd166;
  --shadow: 0 18px 50px rgba(16, 42, 67, .10);
  --radius: 24px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--paper); }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow, .kicker { margin: 0 0 8px; color: var(--teal-dark); font-size: 12px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.kicker { color: var(--coral); font-size: 13px; }
.kicker.light { color: #73ead6; }

.site-header {
  position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between;
  height: 74px; padding: 0 max(22px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid rgba(220, 232, 230, .8);
  background: rgba(245, 250, 249, .9); backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px 4px 12px 4px; color: white; background: var(--ink); font-size: 13px; font-weight: 900; letter-spacing: -.03em; }
.brand b, .brand small { display: block; }
.brand b { font-size: 14px; }
.brand small { margin-top: 2px; color: #8294a4; font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.brand-light { color: white; }
.brand-light .brand-mark { color: var(--navy); background: #74e7d4; }
.brand-light small { color: #8aa8b8; }
.live-pill, .admin-live-pill { display: flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid #cce3df; border-radius: 999px; color: var(--teal-dark); background: #ecf9f6; font-size: 12px; font-weight: 750; }
.live-pill i, .display-status i { width: 7px; height: 7px; border-radius: 50%; background: #a8b6c0; }
.live-pill.is-live i, .display-status.is-live i { background: var(--coral); box-shadow: 0 0 0 5px rgba(255, 114, 94, .16); animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(255, 114, 94, 0); } }

.vote-hero { position: relative; display: grid; grid-template-columns: 1fr auto; min-height: 440px; padding: 72px max(28px, calc((100vw - 1120px) / 2)); overflow: hidden; background: linear-gradient(135deg, #e5f7f2 0%, #f7f8ee 55%, #fff0ed 100%); }
.vote-hero::after { content: ''; position: absolute; inset: 0; opacity: .4; background-image: radial-gradient(#4fbba8 1px, transparent 1px); background-size: 23px 23px; mask-image: linear-gradient(90deg, transparent 20%, black); }
.hero-copy { position: relative; z-index: 2; align-self: center; }
.hero-copy h1 { margin: 0; max-width: 720px; font-size: clamp(42px, 7vw, 76px); line-height: 1.02; letter-spacing: -.065em; }
.hero-copy h1 em { color: var(--teal-dark); font-style: normal; }
.hero-subtitle { margin: 24px 0 30px; color: #476174; font-size: clamp(16px, 2vw, 20px); letter-spacing: .08em; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-meta span { padding: 9px 14px; border: 1px solid rgba(8, 124, 112, .16); border-radius: 999px; background: rgba(255, 255, 255, .58); color: #456273; font-size: 13px; }
.hero-meta b { color: var(--ink); font-size: 15px; }
.hero-badge { position: relative; z-index: 2; align-self: center; display: flex; flex-direction: column; width: 190px; height: 190px; align-items: center; justify-content: center; transform: rotate(5deg); border: 2px solid rgba(16, 42, 67, .9); border-radius: 50%; background: rgba(255,255,255,.38); box-shadow: 12px 14px 0 rgba(10,185,157,.18); }
.hero-badge::before, .hero-badge::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--coral); }
.hero-badge::before { top: 18px; right: 25px; }.hero-badge::after { bottom: 20px; left: 20px; background: var(--teal); }
.hero-badge span, .hero-badge small { font-size: 12px; font-weight: 900; letter-spacing: .2em; }
.hero-badge strong { font-size: 42px; line-height: 1; letter-spacing: -.06em; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.hero-orb-one { top: -100px; right: 20%; width: 270px; height: 270px; border: 55px solid rgba(114,92,255,.09); }
.hero-orb-two { bottom: -100px; left: -80px; width: 250px; height: 250px; background: rgba(255,209,102,.14); }

.voting-shell, .narrow-state { width: min(1120px, calc(100% - 40px)); margin: 48px auto 120px; }
.narrow-state { width: min(720px, calc(100% - 40px)); }
.state-card { padding: 62px 32px; border: 1px solid var(--line); border-radius: var(--radius); background: white; text-align: center; box-shadow: var(--shadow); }
.state-card h2 { margin: 18px 0 8px; font-size: 30px; letter-spacing: -.04em; }.state-card p { color: var(--muted); }
.state-icon { display: grid; width: 64px; height: 64px; margin: auto; place-items: center; border-radius: 50%; color: var(--teal-dark); background: #e6f7f3; font-size: 28px; font-weight: 900; }
.spinner { width: 38px; height: 38px; margin: auto; border: 4px solid #dfece9; border-top-color: var(--teal); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.instruction-card { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 28px 32px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 10px 30px rgba(16,42,67,.06); }
.instruction-number { color: #d7e4e3; font-size: 58px; font-weight: 900; letter-spacing: -.08em; }
.instruction-card h2 { margin: 0 0 5px; font-size: 22px; letter-spacing: -.03em; }.instruction-card p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.7; }
.privacy-note { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--teal-dark); font-size: 12px; font-weight: 750; }.privacy-note span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #e8f8f4; }
.award-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 32px 0 22px; }
.award-tab { position: relative; display: flex; gap: 12px; align-items: center; padding: 17px 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.7); cursor: pointer; text-align: left; transition: .2s ease; }
.award-tab:hover { transform: translateY(-2px); border-color: #bbd7d2; }.award-tab.active { border-color: var(--ink); background: white; box-shadow: 5px 6px 0 var(--ink); }.award-tab.done::after { content: '✓'; position: absolute; top: 9px; right: 10px; color: var(--teal); font-weight: 900; }
.tab-number { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: white; background: var(--ink); font-size: 11px; font-weight: 900; }.award-tab b, .award-tab small { display: block; }.award-tab b { font-size: 14px; }.award-tab small { margin-top: 2px; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.award-panel { min-height: 500px; }
.award-heading { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-bottom: 24px; padding: 27px 30px; border-radius: 20px; color: white; background: var(--ink); }
.award-heading.award-tone-1 { background: #d95548; }.award-heading.award-tone-2 { background: #5e4bd7; }.award-heading.award-tone-3 { background: #087d70; }
.award-index { opacity: .3; font-size: 57px; font-weight: 900; letter-spacing: -.08em; }.award-heading .eyebrow { margin-bottom: 5px; color: rgba(255,255,255,.65); }.award-heading h2 { margin: 0 0 6px; font-size: clamp(22px, 3vw, 32px); letter-spacing: -.035em; }.award-heading p:last-child { margin: 0; opacity: .77; line-height: 1.6; }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.team-option { position: relative; display: grid; grid-template-columns: 58px 1fr auto; gap: 15px; align-items: start; min-height: 128px; padding: 22px; border: 1.5px solid var(--line); border-radius: 18px; background: white; cursor: pointer; text-align: left; transition: .18s ease; }
.team-option:hover { transform: translateY(-2px); border-color: #9dcac2; box-shadow: 0 10px 22px rgba(16,42,67,.07); }.team-option.selected { border-color: var(--teal-dark); background: #f1fbf8; box-shadow: inset 0 0 0 1px var(--teal-dark); }
.team-number { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 14px; color: var(--teal-dark); background: #e9f7f4; font-size: 19px; font-weight: 900; }.team-option.selected .team-number { color: white; background: var(--teal-dark); }
.team-content { min-width: 0; }.team-school { display: block; margin: 1px 0 5px; color: var(--teal-dark); font-size: 11px; font-weight: 800; letter-spacing: .06em; }.team-name { display: block; font-size: 16px; line-height: 1.35; }.team-summary { display: -webkit-box; overflow: hidden; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.choice-dot { display: grid; width: 25px; height: 25px; margin-top: 2px; place-items: center; border: 2px solid #c5d5d3; border-radius: 50%; color: white; }.team-option.selected .choice-dot { border-color: var(--teal); background: var(--teal); }.team-option.selected .choice-dot::after { content: '✓'; font-size: 13px; font-weight: 900; }
.sticky-actions { position: sticky; z-index: 10; bottom: 16px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 26px; padding: 13px 14px; border: 1px solid rgba(220,232,230,.85); border-radius: 18px; background: rgba(255,255,255,.93); box-shadow: 0 14px 40px rgba(16,42,67,.14); backdrop-filter: blur(15px); }.selection-status { margin-right: auto; padding-left: 10px; color: var(--muted); font-size: 13px; }.selection-status span:first-child { color: var(--ink); font-size: 19px; font-weight: 900; }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 9px; padding: 0 19px; border: 0; border-radius: 13px; cursor: pointer; font-size: 13px; font-weight: 800; text-decoration: none; transition: .18s ease; }.button:hover:not(:disabled) { transform: translateY(-1px); }.button:disabled { cursor: not-allowed; opacity: .42; }.button-primary { color: white; background: var(--ink); box-shadow: 0 7px 18px rgba(16,42,67,.18); }.button-primary:hover:not(:disabled) { background: #183d59; }.button-secondary { color: var(--teal-dark); background: #e7f6f3; }.button-ghost { border: 1px solid var(--line); background: white; }.button-danger { color: #b53228; background: #fff0ee; }.button-small { min-height: 36px; padding: 0 13px; border: 1px solid var(--line); background: white; }.button.wide { width: 100%; }
.review-dialog, .confirm-dialog { width: min(600px, calc(100% - 28px)); max-height: 90vh; padding: 0; overflow: auto; border: 0; border-radius: 24px; background: white; box-shadow: 0 25px 80px rgba(3,20,34,.28); }.review-dialog::backdrop, .confirm-dialog::backdrop { background: rgba(3,20,34,.63); backdrop-filter: blur(4px); }.review-dialog > *, .confirm-dialog > * { margin-left: 28px; margin-right: 28px; }.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 28px; }.dialog-head h2, .confirm-dialog h2 { margin: 0; font-size: 29px; letter-spacing: -.04em; }.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: white; cursor: pointer; font-size: 23px; }.dialog-intro, .confirm-dialog p { color: var(--muted); line-height: 1.6; }.review-list { display: grid; gap: 10px; }.review-item { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; }.review-item-index { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: white; background: var(--ink); font-size: 11px; font-weight: 900; }.review-item small, .review-item b { display: block; }.review-item small { color: var(--muted); }.review-item b { margin-top: 3px; }.confirm-check { display: flex; gap: 10px; align-items: center; margin-top: 20px; padding: 15px; border-radius: 13px; background: #f1f7f6; font-size: 13px; font-weight: 700; }.confirm-check input { width: 19px; height: 19px; accent-color: var(--teal-dark); }.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px !important; margin-bottom: 28px !important; }.confirm-dialog { padding-top: 28px; }.toast { position: fixed; z-index: 100; left: 50%; bottom: 28px; transform: translate(-50%, 18px); min-width: 230px; padding: 13px 18px; border-radius: 12px; color: white; background: var(--ink); box-shadow: var(--shadow); opacity: 0; pointer-events: none; text-align: center; transition: .2s ease; }.toast.show { transform: translate(-50%, 0); opacity: 1; }.toast.error { background: #b83d32; }
.site-footer { display: flex; justify-content: center; gap: 9px; padding: 25px; color: #8a9aa6; font-size: 11px; letter-spacing: .08em; }

/* Stage display */
.display-page { overflow: hidden; color: white; background: var(--navy); }
.display-shell { position: relative; display: grid; grid-template-rows: 92px 1fr 54px; width: 100vw; height: 100vh; min-height: 650px; overflow: hidden; background: radial-gradient(circle at 70% 10%, rgba(10,185,157,.18), transparent 33%), radial-gradient(circle at 15% 90%, rgba(114,92,255,.16), transparent 38%), var(--navy); }
.display-shell::before { content: ''; position: absolute; inset: 0; opacity: .1; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 30px 30px; }
.display-header, .display-footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; border-bottom: 1px solid rgba(255,255,255,.1); }.display-footer { border-top: 1px solid rgba(255,255,255,.1); border-bottom: 0; color: #7593a3; font-size: 10px; font-weight: 750; letter-spacing: .17em; }
.display-status { display: flex; gap: 10px; align-items: center; padding: 10px 17px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #b9cad3; font-size: 12px; letter-spacing: .08em; }.display-status i { flex: 0 0 auto; }
.display-voting { position: relative; z-index: 2; display: grid; grid-template-columns: 1.25fr .72fr .72fr; gap: 4vw; align-items: center; padding: 3vh 5vw; }
.display-copy h1 { margin: 0; font-size: clamp(48px, 6.2vw, 104px); line-height: .98; letter-spacing: -.065em; }.display-copy h1 em { color: #73ead6; font-style: normal; }.display-copy > p:not(.kicker) { margin: 28px 0; color: #a9bdc8; font-size: clamp(16px, 1.4vw, 24px); letter-spacing: .08em; }.display-steps { display: flex; gap: 14px; color: #7e9aab; font-size: 12px; font-weight: 750; letter-spacing: .08em; }.display-steps b { color: #3b596b; }
.qr-stage { position: relative; padding: 24px; border: 1px solid rgba(255,255,255,.14); border-radius: 28px; background: rgba(255,255,255,.055); text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,.18); }.qr-stage::before { content: ''; position: absolute; inset: -7px; border: 1px solid rgba(115,234,214,.24); border-radius: 33px; }.qr-frame { position: relative; padding: 12px; border-radius: 18px; background: white; }.qr-frame img { display: block; width: 100%; }.qr-stage strong, .qr-stage small { display: block; }.qr-stage strong { margin-top: 18px; color: #e5f1f4; font-size: clamp(13px, 1.2vw, 18px); }.qr-stage small { min-height: 16px; margin-top: 6px; overflow: hidden; color: #7893a2; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.live-metrics { padding-left: 3.2vw; border-left: 1px solid rgba(255,255,255,.12); }.live-metrics p { margin: 0 0 5px; color: #8aa3b1; font-size: clamp(12px, 1vw, 16px); letter-spacing: .12em; }.live-metrics strong { font-size: clamp(78px, 10vw, 170px); line-height: .9; letter-spacing: -.075em; }.live-metrics span { margin-left: 6px; color: #73ead6; font-size: 22px; font-weight: 800; }.metric-rule { width: 100%; height: 1px; margin: 5vh 0; background: rgba(255,255,255,.12); }.live-metrics time { display: block; color: #f2f7f8; font-size: clamp(42px, 5vw, 82px); font-weight: 850; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.display-results { position: relative; z-index: 2; display: grid; grid-template-rows: auto 1fr; padding: 2vh 5vw 3vh; }.results-heading { text-align: center; }.results-heading h1 { margin: 0; font-size: clamp(44px, 5vw, 78px); letter-spacing: -.055em; }.results-heading > p:last-child { margin: 8px; color: #8fa8b6; }.winner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; align-items: stretch; margin-top: 2vh; }.winner-card { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; padding: clamp(18px, 2vw, 34px); overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 28px; background: rgba(255,255,255,.06); }.winner-card::before { content: ''; position: absolute; top: -55px; right: -55px; width: 145px; height: 145px; border: 28px solid rgba(115,234,214,.09); border-radius: 50%; }.winner-award { color: #73ead6; font-size: clamp(15px, 1.5vw, 24px); font-weight: 850; }.winner-number { margin: 2vh 0; color: rgba(255,255,255,.14); font-size: clamp(48px, 6vw, 96px); font-weight: 900; letter-spacing: -.08em; }.winner-school { color: #7ee4d2; font-size: clamp(12px, 1vw, 17px); font-weight: 750; }.winner-name { margin: 7px 0; font-size: clamp(22px, 2.2vw, 38px); line-height: 1.15; letter-spacing: -.035em; }.winner-votes { margin-top: 2vh; color: #91aab7; font-size: 12px; }.winner-votes b { color: white; font-size: 22px; }

/* Admin */
.admin-page { background: #f3f7f6; }.login-view { display: grid; min-height: 100vh; padding: 25px; place-items: center; background: radial-gradient(circle at 20% 10%, rgba(10,185,157,.15), transparent 32%), radial-gradient(circle at 90% 80%, rgba(255,114,94,.12), transparent 35%), #edf5f3; }.login-card { width: min(440px, 100%); padding: 38px; border: 1px solid var(--line); border-radius: 26px; background: white; box-shadow: var(--shadow); }.login-copy { margin: 42px 0 26px; }.login-copy h1 { margin: 0 0 8px; font-size: 34px; letter-spacing: -.05em; }.login-copy p:last-child { color: var(--muted); line-height: 1.6; }.field { display: grid; gap: 8px; }.field > span { color: #415b6c; font-size: 12px; font-weight: 750; }.field input, .field textarea { width: 100%; border: 1px solid #cfdedc; border-radius: 11px; outline: 0; background: white; color: var(--ink); transition: .15s; }.field input { height: 46px; padding: 0 13px; }.field textarea { padding: 12px 13px; resize: vertical; }.field input:focus, .field textarea:focus { border-color: var(--teal-dark); box-shadow: 0 0 0 3px rgba(10,185,157,.12); }.login-card .button { margin-top: 18px; }.text-link { display: block; margin-top: 20px; color: var(--muted); font-size: 12px; text-align: center; }.form-error { margin: 12px 0 -6px; color: #ba382f; font-size: 12px; }
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }.admin-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 28px 22px; color: white; background: var(--navy); }.admin-nav { display: grid; gap: 6px; margin-top: 50px; }.nav-item { display: flex; gap: 12px; align-items: center; padding: 13px 14px; border: 0; border-radius: 11px; color: #829dac; background: transparent; cursor: pointer; font-size: 13px; font-weight: 700; text-align: left; }.nav-item span { width: 20px; color: #688595; font-size: 17px; text-align: center; }.nav-item:hover, .nav-item.active { color: white; background: rgba(255,255,255,.08); }.nav-item.active span { color: #73ead6; }.sidebar-links { display: grid; gap: 11px; margin-top: auto; padding: 18px 10px 0; border-top: 1px solid rgba(255,255,255,.1); }.sidebar-links a, .sidebar-links button { padding: 0; border: 0; color: #809ba9; background: none; cursor: pointer; font-size: 11px; text-align: left; text-decoration: none; }.sidebar-links a:hover, .sidebar-links button:hover { color: white; }
.admin-main { min-width: 0; padding: 0 36px 60px; }.admin-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 108px; border-bottom: 1px solid var(--line); }.admin-topbar h1 { margin: 0; font-size: 25px; letter-spacing: -.035em; }.admin-live-pill { color: #687d8b; background: white; }.admin-live-pill.open { color: #087d70; background: #dff7f1; }.admin-live-pill.revealed { color: #5e4bd7; background: #eeeaff; }
.admin-panel { padding-top: 30px; }.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.stat-card { min-height: 145px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: white; }.stat-card p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }.stat-card strong { display: block; margin: 13px 0 2px; font-size: 43px; line-height: 1; letter-spacing: -.06em; }.stat-card span { color: #8797a2; font-size: 11px; }.stat-card.stat-feature { color: white; border-color: var(--ink); background: var(--ink); }.stat-card.stat-feature p, .stat-card.stat-feature span { color: #9ab0bd; }.stat-card.stat-feature strong { color: #73ead6; }.stat-word { padding-top: 6px; font-size: 27px !important; letter-spacing: -.04em !important; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .8fr); gap: 16px; margin-top: 16px; }.admin-card { padding: 25px; border: 1px solid var(--line); border-radius: 19px; background: white; }.card-heading, .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; }.card-heading h2, .section-heading h2, .danger-card h2 { margin: 0; font-size: 21px; letter-spacing: -.035em; }.safe-note { padding: 6px 9px; border-radius: 8px; color: var(--teal-dark); background: #e8f7f4; font-size: 10px; font-weight: 750; }.control-card > .muted { margin-bottom: 25px; font-size: 12px; }.status-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 8px; align-items: center; }.status-flow > i { color: #aab9c0; font-style: normal; }.status-flow button { min-width: 0; padding: 15px 8px; border: 1px solid var(--line); border-radius: 13px; background: #f9fbfb; cursor: pointer; }.status-flow button.active { color: white; border-color: var(--teal-dark); background: var(--teal-dark); box-shadow: 0 6px 17px rgba(8,124,112,.18); }.status-flow button span, .status-flow button b, .status-flow button small { display: block; }.status-flow button span { margin-bottom: 8px; color: #a0b0b9; font-size: 10px; }.status-flow button.active span, .status-flow button.active small { color: rgba(255,255,255,.7); }.status-flow button b { font-size: 12px; }.status-flow button small { margin-top: 4px; color: #8a9ba5; font-size: 9px; }.deadline-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); }
.result-tabs { display: flex; gap: 6px; margin: 18px 0 14px; overflow-x: auto; }.result-tabs button { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: white; cursor: pointer; font-size: 10px; font-weight: 750; }.result-tabs button.active { color: white; border-color: var(--ink); background: var(--ink); }.result-ranking { display: grid; gap: 8px; }.ranking-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 9px; border-radius: 10px; background: #f5f8f7; }.ranking-row .rank { color: #8a9da8; font-size: 11px; font-weight: 850; text-align: center; }.ranking-row:first-child .rank { color: var(--coral); }.ranking-info { min-width: 0; }.ranking-info b, .ranking-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.ranking-info b { font-size: 11px; }.ranking-info small { margin-top: 2px; color: var(--muted); font-size: 9px; }.ranking-votes { font-size: 11px; }.ranking-votes b { font-size: 17px; }
.section-heading { margin-bottom: 22px; }.section-heading > div > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 12px; }.team-editor { display: grid; gap: 10px; }.team-edit-row { display: grid; grid-template-columns: 54px minmax(150px,.85fr) minmax(230px,1.3fr) minmax(250px,1.5fr) 58px; gap: 10px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: white; }.team-edit-row input { width: 100%; height: 39px; padding: 0 10px; border: 1px solid #d8e4e2; border-radius: 9px; outline: 0; }.team-edit-row input:focus { border-color: var(--teal); }.team-edit-number { color: var(--teal-dark); font-weight: 900; text-align: center; }.mini-toggle { display: grid; place-items: center; }.mini-toggle input { width: 19px; height: 19px; accent-color: var(--teal-dark); }.editor-labels { color: #82929d; font-size: 9px; font-weight: 750; }.award-editor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.award-edit-card { display: grid; gap: 13px; padding: 22px; border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: 16px; background: white; }.award-edit-card:nth-child(1) { border-top-color: var(--coral); }.award-edit-card:nth-child(2) { border-top-color: var(--violet); }.settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.field-full { grid-column: 1 / -1; }.toggle-row { display: flex; gap: 13px; padding: 15px; border-radius: 13px; background: #f2f7f6; cursor: pointer; }.toggle-row input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--teal-dark); }.toggle-row b, .toggle-row small { display: block; }.toggle-row b { font-size: 13px; }.toggle-row small { margin-top: 4px; color: var(--muted); font-size: 11px; }.form-actions { display: flex; justify-content: flex-end; }.danger-card { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 20px; border-color: #f0d1cd; background: #fffafa; }.danger-card p:last-child { margin-bottom: 0; color: var(--muted); font-size: 12px; }

@media (max-width: 1050px) {
  .display-voting { grid-template-columns: 1.15fr .75fr; }.live-metrics { display: grid; grid-column: 1 / -1; grid-template-columns: auto auto auto 1px auto auto; gap: 12px; align-items: end; padding: 2vh 0 0; border: 0; }.live-metrics p { margin: 0; }.live-metrics strong { font-size: 55px; }.live-metrics .metric-rule { width: 1px; height: 50px; margin: 0 2vw; }.live-metrics time { font-size: 48px; }
  .admin-grid { grid-template-columns: 1fr; }.stats-grid { grid-template-columns: repeat(2,1fr); }.award-editor { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .site-header { height: 66px; padding: 0 18px; }.site-header .brand b { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.live-pill { padding: 7px 10px; }
  .vote-hero { grid-template-columns: 1fr; min-height: 380px; padding: 55px 22px; }.hero-copy h1 { font-size: 48px; }.hero-badge { display: none; }.hero-subtitle { font-size: 15px; }.hero-meta { gap: 6px; }.hero-meta span { padding: 7px 10px; font-size: 11px; }
  .voting-shell { width: min(100% - 24px, 680px); margin-top: 24px; }.instruction-card { grid-template-columns: auto 1fr; gap: 14px; padding: 20px; }.instruction-number { font-size: 40px; }.instruction-card h2 { font-size: 18px; }.instruction-card p:not(.eyebrow) { font-size: 12px; }.privacy-note { grid-column: 1 / -1; padding-top: 13px; border-top: 1px solid var(--line); }
  .award-tabs { position: sticky; z-index: 9; top: 66px; gap: 6px; margin: 18px 0; padding: 8px 0; background: var(--paper); }.award-tab { justify-content: center; padding: 11px 6px; }.award-tab .tab-number { width: 27px; height: 27px; }.award-tab > span:last-of-type { display: none; }.award-tab.active { box-shadow: 3px 4px 0 var(--ink); }
  .award-heading { grid-template-columns: 1fr; padding: 23px; }.award-index { display: none; }.award-heading h2 { font-size: 22px; }.award-heading p:last-child { font-size: 12px; }.team-grid { grid-template-columns: 1fr; }.team-option { grid-template-columns: 48px 1fr auto; min-height: 112px; padding: 17px; }.team-number { width: 45px; height: 45px; }.team-name { font-size: 15px; }.sticky-actions { bottom: 8px; }.selection-status { display: none; }.sticky-actions .button { flex: 1; padding: 0 10px; }.review-dialog > * { margin-left: 20px; margin-right: 20px; }
  .display-page { overflow: auto; }.display-shell { min-width: 760px; }
  .admin-shell { grid-template-columns: 1fr; }.admin-sidebar { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: 1fr; height: auto; padding: 14px 18px; }.admin-sidebar .brand { display: none; }.admin-nav { display: flex; gap: 4px; margin: 0; overflow-x: auto; }.nav-item { flex: 0 0 auto; padding: 10px; font-size: 11px; }.nav-item span { display: none; }.sidebar-links { display: none; }.admin-main { padding: 0 15px 45px; }.admin-topbar { min-height: 90px; }.admin-topbar h1 { max-width: 230px; overflow: hidden; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }.stats-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.stat-card { min-height: 120px; padding: 17px; }.stat-card strong { font-size: 35px; }.admin-card { padding: 18px; }.status-flow { grid-template-columns: 1fr 1fr; }.status-flow > i { display: none; }.deadline-row { grid-template-columns: 1fr; }.section-heading { align-items: flex-end; }.team-edit-row { grid-template-columns: 42px 1fr 42px; }.team-edit-row .edit-school, .team-edit-row .edit-name, .team-edit-row .edit-summary { grid-column: 2 / 3; }.team-edit-row .mini-toggle { grid-column: 3; grid-row: 1; }.editor-labels { display: none; }.settings-form { grid-template-columns: 1fr; }.settings-form > * { grid-column: 1; }.danger-card { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* v2.0 visual language — adapted from the event key visual */
:root {
  --ink: #151a41;
  --muted: #687097;
  --paper: #f4f4fb;
  --white: #ffffff;
  --line: #d9daf0;
  --teal: #21c6ee;
  --teal-dark: #176da4;
  --coral: #eb6fae;
  --violet: #7448c8;
  --navy: #0b0d2d;
  --yellow: #f1b7dc;
  --shadow: 0 18px 52px rgba(16, 14, 62, .13);
}

.vote-hero {
  color: white;
  background:
    radial-gradient(circle at 78% 18%, rgba(109, 70, 202, .9), transparent 34%),
    radial-gradient(circle at 12% 100%, rgba(35, 93, 178, .58), transparent 42%),
    linear-gradient(126deg, #111633 0%, #17153f 55%, #382481 100%);
}

.vote-hero::before {
  content: '';
  position: absolute;
  inset: -26% -10%;
  border: 1px solid rgba(244, 183, 220, .38);
  border-radius: 50%;
  transform: rotate(-10deg);
  box-shadow: 0 0 0 7vw rgba(255,255,255,.035), 0 0 0 15vw rgba(126,112,171,.08), 0 0 0 26vw rgba(255,255,255,.025);
  pointer-events: none;
}

.vote-hero::after {
  opacity: .25;
  background-image: radial-gradient(rgba(255,255,255,.86) 1px, transparent 1px);
  mask-image: linear-gradient(90deg, transparent 8%, black);
}

.hero-copy h1 em { color: #81dff3; }
.hero-subtitle { color: #c8cbe7; }
.hero-meta span {
  border-color: rgba(129, 223, 243, .24);
  color: #dfe1f3;
  background: rgba(15, 16, 51, .32);
  backdrop-filter: blur(10px);
}
.hero-meta b { color: white; }
.hero-badge {
  border-color: rgba(255,255,255,.9);
  background: linear-gradient(145deg, rgba(130,223,243,.17), rgba(235,111,174,.14));
  box-shadow: 12px 14px 0 rgba(33,198,238,.17), inset 0 0 40px rgba(255,255,255,.06);
}
.hero-badge::before { background: #ef8fbd; }
.hero-badge::after { background: #56d5ef; }
.hero-orb-one { border-color: rgba(129,223,243,.13); }
.hero-orb-two { background: rgba(235,111,174,.14); }

body.vote-page {
  background:
    radial-gradient(circle at 4% 18%, rgba(65, 116, 214, .09), transparent 24rem),
    radial-gradient(circle at 96% 62%, rgba(205, 77, 161, .08), transparent 26rem),
    var(--paper);
}

.site-header {
  border-bottom-color: rgba(76, 69, 146, .14);
  background: rgba(247, 247, 253, .9);
}
.brand-mark {
  background: linear-gradient(145deg, #30266f, #7047bd 58%, #2abedc);
  box-shadow: 0 8px 18px rgba(50, 37, 113, .2);
}
.brand small { color: #777aa1; }
.brand-light .brand-mark {
  color: white;
  background: linear-gradient(145deg, #7047bd, #23b9de);
}
.brand-light small { color: #a9add4; }
.eyebrow { color: #356f9f; }
.kicker { color: #b63d7e; }
.vote-hero .kicker { color: #f4a1cc; }
.kicker.light { color: #7de2f5; }
.live-pill, .admin-live-pill {
  border-color: #d7d2ec;
  color: #4d3d91;
  background: #f0edfb;
}
.live-pill.is-live i, .display-status.is-live i {
  background: #ed73ad;
  box-shadow: 0 0 0 5px rgba(237, 115, 173, .18);
}

.state-card, .instruction-card, .award-tab, .team-option, .sticky-actions,
.review-dialog, .confirm-dialog, .admin-card, .stat-card, .team-edit-row, .award-edit-card {
  border-color: var(--line);
}
.state-icon, .privacy-note span, .team-number {
  color: #3b3a8c;
  background: #eceafa;
}
.spinner { border-color: #dfdff0; border-top-color: #7448c8; }
.instruction-card {
  box-shadow: 0 14px 36px rgba(35, 27, 99, .08);
}
.instruction-number { color: #dddaf1; }
.privacy-note { color: #426fa5; }
.award-tab:hover { border-color: #9990cf; }
.award-tab.active {
  border-color: #2a245d;
  box-shadow: 5px 6px 0 #2a245d;
}
.tab-number, .review-item-index { background: linear-gradient(145deg, #322872, #6641a9); }
.award-tab.done::after { color: #b63d7e; }
.award-heading.award-tone-1 { background: linear-gradient(112deg, #b5448c, #6a3fae); }
.award-heading.award-tone-2 { background: linear-gradient(112deg, #4d3c9a, #3b6fbe); }
.award-heading.award-tone-3 { background: linear-gradient(112deg, #235895, #1598bd); }
.team-option:hover {
  border-color: #9e94cf;
  box-shadow: 0 12px 26px rgba(38, 30, 103, .09);
}
.team-option.selected {
  border-color: #6650b5;
  background: #f1effb;
  box-shadow: inset 0 0 0 1px #6650b5;
}
.team-school { color: #426a9a; }
.team-option.selected .team-number {
  color: white;
  background: linear-gradient(145deg, #5b43a9, #287fb0);
}
.choice-dot { border-color: #c5c4dd; }
.team-option.selected .choice-dot {
  border-color: #bd4c91;
  background: #bd4c91;
}
.sticky-actions {
  border-color: rgba(93, 82, 158, .2);
  box-shadow: 0 14px 42px rgba(31, 24, 88, .15);
}
.button-primary {
  background: linear-gradient(110deg, #31286e, #6945b2);
  box-shadow: 0 8px 20px rgba(57, 39, 125, .24);
}
.button-primary:hover:not(:disabled) { background: linear-gradient(110deg, #28215d, #59379c); }
.button-secondary { color: #3d4e93; background: #eceafa; }
.button-danger { color: #a83269; background: #fcecf5; }
.confirm-check, .toggle-row { background: #f2f1fa; }
.confirm-check input, .toggle-row input, .mini-toggle input { accent-color: #6945b2; }
.toast { background: #201b52; }

.display-page { background: #080a27; }
.display-shell {
  background:
    radial-gradient(circle at 78% 12%, rgba(111, 70, 197, .46), transparent 36%),
    radial-gradient(circle at 11% 92%, rgba(40, 93, 185, .36), transparent 40%),
    linear-gradient(132deg, #090c27 0%, #15133a 62%, #281a69 100%);
}
.display-shell::before {
  opacity: .36;
  background-image:
    radial-gradient(rgba(255,255,255,.72) 1px, transparent 1px),
    repeating-radial-gradient(ellipse at 58% 54%, transparent 0 8.4vw, rgba(184, 173, 219, .22) 8.45vw 8.53vw);
  background-size: 30px 30px, 100% 100%;
}
.display-shell::after {
  content: '';
  position: absolute;
  inset: 10% 15% 7% 23%;
  border: 2px solid rgba(239, 126, 184, .72);
  border-left-color: #28c5eb;
  border-radius: 50%;
  transform: rotate(-17deg);
  pointer-events: none;
}
.display-header, .display-footer { border-color: rgba(188, 183, 224, .16); }
.display-footer { color: #888bb5; }
.display-status { color: #c0c2df; }
.display-copy h1 em, .live-metrics span { color: #77def2; }
.display-copy > p:not(.kicker) { color: #b2b5d1; }
.display-steps { color: #9699bd; }
.display-steps b { color: #ef8aba; }
.qr-stage {
  border-color: rgba(130, 218, 239, .24);
  background: linear-gradient(145deg, rgba(91, 72, 157, .19), rgba(255,255,255,.055));
}
.qr-stage::before { border-color: rgba(239, 126, 184, .34); }
.qr-stage strong { color: #f1effb; }
.qr-stage small, .live-metrics p { color: #999dc3; }
.live-metrics { border-left-color: rgba(188, 183, 224, .2); }
.metric-rule { background: rgba(188, 183, 224, .18); }
.winner-card {
  border-color: rgba(188, 183, 224, .2);
  background: linear-gradient(145deg, rgba(112, 72, 184, .18), rgba(255,255,255,.045));
}
.winner-card::before { border-color: rgba(112, 218, 240, .13); }
.winner-award, .winner-school { color: #77def2; }
.winner-votes { color: #a8aac8; }
.results-heading > p:last-child { color: #a5a8c6; }

.admin-page { background: #f3f2fa; }
.login-view {
  background:
    radial-gradient(circle at 18% 10%, rgba(38, 188, 220, .16), transparent 32%),
    radial-gradient(circle at 88% 82%, rgba(190, 70, 143, .15), transparent 35%),
    linear-gradient(135deg, #eeeff9, #f7f5fb);
}
.login-card { box-shadow: 0 28px 70px rgba(27, 20, 85, .17); }
.field > span { color: #53577d; }
.field input, .field textarea, .team-edit-row input { border-color: #d4d3e6; }
.field input:focus, .field textarea:focus, .team-edit-row input:focus {
  border-color: #6a53b7;
  box-shadow: 0 0 0 3px rgba(106, 83, 183, .13);
}
.admin-sidebar {
  background:
    radial-gradient(circle at 110% 4%, rgba(122, 73, 193, .45), transparent 36%),
    radial-gradient(circle at -10% 80%, rgba(32, 173, 207, .24), transparent 32%),
    #0c0e31;
}
.nav-item { color: #989bc2; }
.nav-item span { color: #7d80ae; }
.nav-item:hover, .nav-item.active { background: rgba(126, 105, 196, .2); }
.nav-item.active span { color: #78dff2; }
.sidebar-links { border-top-color: rgba(194, 190, 224, .15); }
.sidebar-links a, .sidebar-links button { color: #9497ba; }
.admin-live-pill.open { color: #226c87; background: #def5fa; }
.admin-live-pill.revealed { color: #6a3ca1; background: #efe8f9; }
.stat-card.stat-feature {
  border-color: #32266f;
  background: linear-gradient(130deg, #201b55, #5d3da0);
}
.stat-card.stat-feature p, .stat-card.stat-feature span { color: #babbd8; }
.stat-card.stat-feature strong { color: #7ae0f2; }
.safe-note { color: #4a428d; background: #eeecfa; }
.status-flow button { background: #f8f7fc; }
.status-flow button.active {
  border-color: #5e45ab;
  background: linear-gradient(135deg, #4d3a9a, #297fae);
  box-shadow: 0 7px 18px rgba(64, 50, 142, .23);
}
.result-tabs button.active { border-color: #4d3a93; background: #4d3a93; }
.ranking-row { background: #f3f2f9; }
.ranking-row:first-child .rank { color: #bd4c91; }
.team-edit-number { color: #4d4a98; }
.award-edit-card { border-top-color: #25b4da; }
.award-edit-card:nth-child(1) { border-top-color: #c65096; }
.award-edit-card:nth-child(2) { border-top-color: #6b4bb5; }
.danger-card { border-color: #ebcbdc; background: #fffafd; }

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(38, 176, 213, .45);
  outline-offset: 3px;
}