/* Campus Election — light institutional theme. One stylesheet, no framework. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root {
  --bg: #eef2f9;
  --bg2: #e7edf6;
  --card: #ffffff;
  --card2: #f5f8fc;
  --ink: #0f1b3d;        /* navy text */
  --muted: #5d6b86;      /* slate */
  --line: #e3e9f2;
  --brand: #1e40af;      /* navy */
  --brand2: #3b82f6;     /* blue */
  --ok: #0f9d6e;
  --warn: #b45309;
  --bad: #dc2626;
  --radius: 16px;
  --shadow: 0 8px 28px rgba(15,27,61,.08);
  --shadow-hover: 0 14px 38px rgba(30,64,175,.16);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(800px 460px at -5% 108%, rgba(30,64,175,.08), transparent 55%),
    linear-gradient(180deg, #f6f9fd, var(--bg));
  background-attachment: fixed;
  min-height: 100vh;
}
a { color: var(--brand); text-decoration: none; font-weight: 600; }
h1, h2, .hero h1, .nav .brand { font-family: "Space Grotesk", "Inter", sans-serif; color: var(--ink); }

/* Top bar */
.nav {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.6rem; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.85); backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 10;
}
.nav .brand { font-weight: 700; letter-spacing: .2px; display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; }
.nav .brand .logo {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  display: grid; place-items: center; font-size: 1rem; color: #fff;
  box-shadow: 0 4px 12px rgba(30,64,175,.3);
}
.nav .spacer { flex: 1; }
.nav a.tab { color: var(--muted); padding: .4rem .8rem; border-radius: 10px; font-weight: 600; transition: background .15s, color .15s; }
.nav a.tab:hover { color: var(--ink); background: var(--card2); }
.nav a.tab.active { color: var(--brand); background: rgba(30,64,175,.08); }

.wrap { max-width: 960px; margin: 2.5rem auto; padding: 0 1.4rem; }
.hero { text-align: center; padding: 3rem 1rem 1.2rem; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: .3rem 0; letter-spacing: -.5px; }
.hero p { color: var(--muted); max-width: 580px; margin: .6rem auto; font-size: 1.05rem; }

.grid { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card {
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; box-shadow: var(--shadow);
}
.card h2 { margin: 0 0 .2rem; font-size: 1.2rem; }
.card .sub { color: var(--muted); font-size: .92rem; margin-bottom: 1.1rem; }
.card.link { display: block; transition: transform .15s ease, box-shadow .15s, border-color .15s; }
.card.link:hover { transform: translateY(-4px); border-color: var(--brand2); box-shadow: var(--shadow-hover); }
.card .ic { font-size: 1.8rem; }

label { display: block; font-size: .82rem; color: var(--muted); font-weight: 600; margin: .9rem 0 .3rem; text-transform: uppercase; letter-spacing: .4px; }
input, textarea, button, select {
  font: inherit; color: var(--ink);
  background: var(--card2); border: 1px solid var(--line);
  border-radius: 11px; padding: .65rem .85rem; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand2); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
textarea { min-height: 120px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #9aa6bd; }
button {
  width: auto; cursor: pointer; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border: none; padding: .7rem 1.3rem; box-shadow: 0 4px 12px rgba(30,64,175,.22);
}
button:hover { filter: brightness(1.05); }
button.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
button.ghost:hover { border-color: var(--brand2); color: var(--brand); }
button.danger { background: linear-gradient(135deg, #ef4444, #f97316); box-shadow: 0 4px 12px rgba(220,38,38,.22); }
button:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; }

.msg { padding: .65rem .9rem; border-radius: 11px; margin-top: .9rem; display: none; font-weight: 500; }
.msg.show { display: block; }
.msg.ok { background: rgba(15,157,110,.1); color: var(--ok); border: 1px solid rgba(15,157,110,.3); }
.msg.err { background: rgba(220,38,38,.08); color: var(--bad); border: 1px solid rgba(220,38,38,.28); }

/* Candidate ballot */
.ballot { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ballot button {
  background: var(--card); border: 1.5px solid var(--line); color: var(--ink);
  text-align: left; padding: 1.1rem 1.2rem; font-weight: 600; border-radius: 14px; box-shadow: var(--shadow);
}
.ballot button:hover { border-color: var(--brand2); background: #fff; filter: none; }
.ballot button .sub { color: var(--muted); font-weight: 400; }

/* Stats */
.stats { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat { background: var(--card2); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem; }
.stat .n { font-size: 2.1rem; font-weight: 800; line-height: 1; }
.stat .l { color: var(--muted); font-size: .85rem; margin-top: .4rem; font-weight: 600; }

/* Bar chart */
.bars { display: grid; gap: .65rem; margin-top: .6rem; }
.bar-row { display: grid; grid-template-columns: 170px 1fr 56px; align-items: center; gap: .7rem; }
.bar-row .name { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: var(--bg2); border-radius: 9px; height: 26px; overflow: hidden; border: 1px solid var(--line); }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand2)); border-radius: 9px 0 0 9px; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.bar-row.win .bar-fill { background: linear-gradient(90deg, #0f9d6e, #34d399); }
.bar-row .v { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 700; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.badge.ok { background: rgba(15,157,110,.12); color: var(--ok); }
.badge.bad { background: rgba(220,38,38,.1); color: var(--bad); }
.badge.warn { background: rgba(180,83,9,.12); color: var(--warn); }
.badge.open { background: rgba(30,64,175,.1); color: var(--brand); }

.foot { text-align: center; color: var(--muted); font-size: .82rem; padding: 2.5rem 1rem; }
.center { text-align: center; }
.mono { font-family: ui-monospace, "Cascadia Code", monospace; font-size: .8rem; color: var(--muted); word-break: break-all; background: var(--card2); padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--line); }

/* ---- motion & polish ---- */
.nav-clock { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .9rem; font-weight: 600; letter-spacing: .3px; }

.card, .hero, .stat { animation: fadeUp .5s cubic-bezier(.2,.7,.2,1) both; }
.grid .card:nth-child(2) { animation-delay: .06s; }
.grid .card:nth-child(3) { animation-delay: .12s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

button { transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; }
button:not(.ghost):not(.danger):hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
button:active { transform: translateY(1px) scale(.98); }

.ballot button { transition: transform .15s ease, border-color .15s, box-shadow .15s; position: relative; overflow: hidden; }
.ballot button:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.ballot button::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(120deg, transparent, rgba(59,130,246,.12), transparent);
  transform: translateX(-120%); transition: transform .55s ease;
}
.ballot button:hover::after { transform: translateX(120%); }

.bar-fill { position: relative; overflow: hidden; }
.bar-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(-100%); animation: sheen 2.4s ease-in-out infinite;
}
@keyframes sheen { 60%, 100% { transform: translateX(100%); } }

.stat .n { background: linear-gradient(135deg, var(--brand), var(--brand2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.hero .ic { display: inline-block; animation: pop .6s cubic-bezier(.2,1.4,.3,1) both; }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }

.badge.pulse { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }

.confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
.card[id] { transition: opacity .25s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::after, *::before { animation: none !important; transition: none !important; }
}
/* Unified campus design */
:root{--bg:#f6f8fa;--bg2:#e9eef2;--ink:#172c3d;--muted:#60717f;--line:#dde5e9;--brand:#126d66;--brand2:#23877d;--card2:#f6f9fa;--radius:16px;--shadow:0 3px 12px #172c3d04;--shadow-hover:0 12px 30px #172c3d0d}
body{background:var(--bg);font-size:15px}h1,h2,h3{letter-spacing:-.035em}a,button,input,textarea,select{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #d18b27;outline-offset:5px}input,textarea,select{min-width:0}button{background:var(--brand);box-shadow:none;min-height:44px}button.danger{background:#b83434;box-shadow:none}input:focus,textarea:focus,select:focus{box-shadow:0 0 0 3px #126d661a;border-color:var(--brand)}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:white;padding:12px 20px}.skip-link:focus{top:12px}.nav{padding:18px max(24px,calc((100vw - 1180px)/2));gap:10px;background:#fff;backdrop-filter:none}.nav .brand{font-size:17px;letter-spacing:-.4px;gap:10px}.nav .brand .logo{background:var(--brand);box-shadow:none;border-radius:9px;font-size:22px;width:36px;height:36px}.nav a.tab{font-size:13px;padding:8px 15px;border-radius:7px}.nav a.tab.active{background:#e9f3ef;color:#126058}.nav-clock{font-size:12px;margin-left:18px;min-width:90px}.home-wrap{max-width:1180px;margin:auto;padding:38px 24px 0}.welcome{display:grid;grid-template-columns:1.35fr 1fr;min-height:398px;border-radius:22px;overflow:hidden;background:#eaf2ef;border:1px solid #dbe8e2}.welcome-copy{padding:48px 0 44px 46px;z-index:1}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:var(--brand)}.welcome h1{font-size:clamp(32px,3.7vw,49px);line-height:1.16;margin:20px 0;letter-spacing:-2px;font-weight:600}.welcome h1 em{font-style:normal;color:var(--brand)}.welcome-copy>p{max-width:410px;color:var(--muted);font-size:14px;line-height:1.8}.primary-link{display:inline-flex;gap:30px;background:var(--brand);color:white;padding:12px 20px;border-radius:8px;font-size:13px;margin-top:14px}.primary-link:hover{background:#0c5751}.hero-note{font-size:11px;color:#526e63;margin-top:17px}.ballot-art{position:relative;min-height:370px;overflow:hidden}.art-orbit{position:absolute;border:1px solid #cbded4;border-radius:50%;width:340px;height:340px;top:35px;left:20px}.art-orbit:after{content:'';position:absolute;inset:28px;border-radius:50%;border:1px dashed #cbded4}.art-caption{position:absolute;top:40px;left:90px;color:#668174;font-size:9px;letter-spacing:3px;transform:rotate(-8deg)}.ballot-box{position:absolute;top:204px;left:70px;width:245px;height:154px;background:#187469;border-radius:10px 10px 17px 17px;box-shadow:12px 18px 0 #12605215;text-align:center;color:#cce3da;font-size:9px;letter-spacing:2px;transform:rotate(-7deg);border-bottom:12px solid #106258}.box-slot{height:8px;width:130px;background:#0c453e;border-radius:50%;margin:15px auto}.box-symbol{font-size:40px;line-height:60px;color:white}.paper{position:absolute;left:130px;top:96px;width:129px;height:131px;background:#fffdf4;border-radius:5px;transform:rotate(9deg);box-shadow:0 4px 10px #172c3d15;padding:22px}.paper>span{display:block;height:5px;background:#dce5de;margin-bottom:9px}.paper>span:nth-child(2){width:65%}.paper-choice{font-size:25px;color:var(--brand);display:flex;align-items:center;gap:9px}.paper-choice i{display:block;width:45px;height:5px;background:#dce5de}.art-spark{position:absolute;top:120px;left:310px;color:#c29a48;font-size:40px}.portal-section{padding:36px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:20px}.section-heading h2{font-size:25px;margin:4px 0 0;font-weight:600}.section-heading>p{font-size:12px;color:var(--muted);margin:0 0 5px}.portal-grid{grid-template-columns:repeat(3,1fr);gap:18px}.portal-grid .card{padding:24px;display:flex;flex-direction:column}.portal-top{display:flex;align-items:center;gap:12px;margin-bottom:21px}.portal-icon{display:grid;place-items:center;width:37px;height:37px;background:#eef5f2;color:var(--brand);border-radius:10px;font-size:22px}.portal-role{font-size:8px;letter-spacing:1px;color:var(--muted)}.portal-grid h2{font-size:19px}.portal-grid .sub{font-size:12px;line-height:1.85;font-weight:400;margin:10px 0 23px}.card-action{display:flex;justify-content:space-between;font-size:12px;margin-top:auto;padding-top:15px;border-top:1px solid var(--line)}.privacy-panel{display:grid;grid-template-columns:1fr 1.25fr;gap:55px;background:white;border:1px solid var(--line);border-radius:16px;padding:32px 38px}.privacy-intro h2{font-size:27px;margin:8px 0}.privacy-intro p{font-size:13px;max-width:300px;color:var(--muted)}.privacy-intro a{font-size:12px}.privacy-steps{display:grid;gap:17px}.privacy-steps>div{display:flex;gap:16px}.privacy-steps>div>span{font-size:11px;color:var(--brand);background:#edf5f1;border-radius:50%;width:29px;height:29px;display:grid;place-items:center;flex-shrink:0}.privacy-steps h3{font-size:13px;margin:0;font-weight:600;letter-spacing:0}.privacy-steps p{font-size:12px;color:var(--muted);margin:3px 0 0}.foot{max-width:1180px;margin:auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px 24px;font-size:11px}.foot>span:first-child{font-weight:700;color:var(--ink)}.wrap{max-width:1080px;margin:40px auto}.page-heading{margin-bottom:28px}.page-heading h1{font-size:34px;margin:9px 0 5px;font-weight:600}.page-heading p{color:var(--muted);margin:0;font-size:14px}.wrap>.card,#console>.card,#content>.card{margin-bottom:20px}.card{padding:28px}.card h2{font-weight:600}.card .sub{line-height:1.8}#checkinCard,#registerCard,#gate{max-width:680px}#checkinCard,#gate{border-top:3px solid var(--brand)}#content>.center{padding:60px 28px}#content>.center .sub{max-width:530px;margin:12px auto}.stat .n{background:none;-webkit-text-fill-color:var(--brand);color:var(--brand)}.bar-fill,.bar-row.win .bar-fill{background:var(--brand)}.bar-fill::after,.ballot button::after{display:none}.ballot button{min-height:100px;box-shadow:none}.ballot button:hover{background:#edf5f1}.row{gap:12px}label{font-size:11px;letter-spacing:.6px}.hero{padding:24px}.nav .brand [data-title]{max-width:280px;overflow-wrap:anywhere}
@media(max-width:900px){.nav-clock{display:none}.welcome{grid-template-columns:1.4fr 1fr}.welcome-copy{padding-left:28px}.ballot-art{transform:scale(.85);transform-origin:left center}.portal-grid{gap:12px}.portal-grid .card{padding:18px}.portal-top{align-items:start;flex-direction:column}.privacy-panel{gap:25px;padding:28px}}
@media(max-width:640px){.nav{padding:14px 18px;gap:5px;position:relative}.nav .brand{flex-basis:100%;margin-bottom:6px}.nav .spacer{display:none}.nav a.tab{flex:1;text-align:center;padding:8px}.nav .brand [data-title]{max-width:calc(100vw - 90px)}.home-wrap{padding:22px 18px 0}.welcome{grid-template-columns:1fr}.welcome-copy{padding:30px 25px}.welcome h1{font-size:35px;letter-spacing:-1.4px}.ballot-art{display:none}.section-heading{align-items:start;gap:12px}.section-heading>p{max-width:120px}.portal-grid{grid-template-columns:1fr}.portal-top{flex-direction:row;align-items:center;margin-bottom:14px}.portal-grid .card{padding:22px}.privacy-panel{grid-template-columns:1fr;padding:25px;gap:24px}.wrap{margin:26px auto;padding:0 18px}.page-heading h1{font-size:28px}.card{padding:22px}.bar-row{grid-template-columns:90px 1fr 38px;font-size:12px;gap:8px}.row>input{flex-basis:100%!important}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.grid{min-width:0}.foot{padding:24px 18px}.foot>span:nth-child(2){display:none}.badge{max-width:100%;white-space:normal}.mono{overflow-wrap:anywhere}.nav #countdown{margin-top:5px}.card .row button{max-width:100%}}

/* Shared local SVG icons; decorative icons retain adjacent text labels. */
.icon { width: 1.15em; height: 1.15em; display: inline-block; flex-shrink: 0; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nav .logo .icon { width: 23px; height: 23px; }
.portal-icon .icon { width: 23px; height: 23px; }
.card h2 > .icon { color: var(--brand); margin-right: .3em; }
.ic > .icon { width: 44px; height: 44px; color: var(--brand); }
.box-symbol .icon { width: 40px; height: 40px; vertical-align: middle; }
.paper-choice > .icon { width: 25px; height: 25px; }
.art-spark .icon { width: 40px; height: 40px; }
.primary-link { align-items: center; }
.badge .icon { width: 14px; height: 14px; }

/* Election management and candidate portraits */
.portrait { display:inline-grid; place-items:center; position:relative; overflow:hidden; width:52px; height:52px; border-radius:14px; background:#e8f1ed; color:var(--brand); font-weight:700; flex-shrink:0; vertical-align:middle; }
.portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ballot button .portrait { width:90px; height:90px; margin-bottom:16px; }
.ballot button .candidate-name,.ballot button .sub,.selection-label { display:block; }
.ballot button[aria-pressed="true"] { border-color:var(--brand); background:#edf5f1; box-shadow:0 0 0 2px var(--brand); }
.selection-label { margin-top:16px; color:var(--brand); font-size:12px; }
.ballot-actions { margin-top:24px; }
[hidden] { display:none !important; }
.review-panel { margin-top:24px; padding:24px; border:2px solid var(--brand); border-radius:12px; background:#f4f9f6; }
.review-panel .portrait { margin-right:12px; }
.admin-toolbar,.result-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.result-toolbar .primary-link { margin-top:0; }
.field { flex:1; min-width:180px; }
.table-scroll { overflow-x:auto; margin:18px 0; }
table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; }
th { font-weight:600; color:var(--muted); background:var(--card2); }
th,td { padding:12px; border-bottom:1px solid var(--line); vertical-align:middle; }
td { overflow-wrap:anywhere; }
.candidate-cell { display:flex; align-items:center; gap:12px; min-width:180px; }
.candidate-cell .sub { margin:3px 0 0; }
.result-outcome .portrait { width:104px; height:104px; font-size:30px; }
.result-outcome h2 { font-size:32px; margin:12px 0 4px; }
.photo-preview { width:110px; height:110px; object-fit:cover; border-radius:14px; margin-top:12px; }
.check-label { display:flex; gap:10px; align-items:center; text-transform:none; letter-spacing:0; font-size:13px; margin:18px 0; }
.check-label input { width:18px; height:18px; flex-shrink:0; }
.reset-card { border-color:#e4c7c7; }
dialog { width:min(560px,calc(100% - 32px)); max-height:90vh; overflow-y:auto; border:1px solid var(--line); padding:28px; border-radius:16px; color:var(--ink); }
dialog::backdrop { background:#132c3d80; }
dialog .row { margin-top:20px; }
.error-text { color:var(--bad); }
@media(max-width:640px) { .admin-toolbar .row { flex-wrap:wrap; } th,td { padding:10px 8px; } .result-toolbar { align-items:flex-start; } .ballot { grid-template-columns:1fr; } }
@media print { .nav,.skip-link,.foot,.result-toolbar .row,.confetti-canvas,#resultmsg { display:none!important; } body { background:white; color:black; } .wrap { max-width:none; margin:0; padding:0; } .card { box-shadow:none; break-inside:avoid; } .table-scroll { overflow:visible; } .portrait img { print-color-adjust:exact; } .result-outcome { padding:12px; } a { color:inherit; } }

fieldset.card { min-inline-size: 0; margin: 0 0 20px; }
.editor-fields { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
fieldset:disabled input, fieldset:disabled textarea, fieldset:disabled button { cursor: not-allowed; opacity: .65; }
#closedNotice { background: #fff6e5; border: 1px solid #e6cc99; color: #715019; margin-bottom: 20px; }
#resetSection { scroll-margin-top: 100px; }