@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,700;1,700;1,900&display=swap');

:root{
  --bg:#050b15; --bg2:#091321; --surface:#0b1728; --surface2:#102239;
  --text:#eef6ff; --muted:#94a8bf; --muted2:#6f8299; --line:rgba(151,190,226,.16);
  --accent:#73dcff; --accent2:#8e80ff; --gold:#f3c76a; --good:#65e6a2;
  --shadow:0 24px 70px rgba(0,0,0,.32); --shadow-sm:0 12px 32px rgba(0,0,0,.2);
  --ease:cubic-bezier(.22,1,.36,1); --radius:22px; --radius-sm:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;line-height:1.6}
a{color:inherit}
body::selection{background:rgba(115,220,255,.24);color:#fff}
::selection{background:rgba(115,220,255,.24);color:#fff}

/* ---------- global chrome ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:11px clamp(18px,4vw,64px);background:rgba(5,11,21,.78);border-bottom:1px solid rgba(151,190,226,.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 35px rgba(0,0,0,.16);transition:background .25s ease,box-shadow .25s ease}
.topbar.scrolled{background:rgba(5,11,21,.92);box-shadow:0 14px 36px rgba(0,0,0,.26)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:800;letter-spacing:.09em;font-size:12px;white-space:nowrap}
.brand img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.28))}
.brand b{display:block;color:var(--accent);font-size:8px;letter-spacing:.2em;margin-top:2px}
.topbar nav{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}
.topbar nav a{position:relative;text-decoration:none;color:#b8c9dc;font-size:11px;font-weight:700;padding:9px 10px;border-radius:10px;transition:color .2s ease,background .2s ease,transform .2s var(--ease)}
.topbar nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:5px;height:2px;border-radius:999px;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform .2s var(--ease)}
.topbar nav a:hover,.topbar nav a.active{color:#fff;background:rgba(115,220,255,.06);transform:translateY(-1px)}
.topbar nav a.active::after{transform:scaleX(1)}

.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;background:transparent;pointer-events:none}.scroll-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent2),var(--accent));box-shadow:0 0 14px rgba(115,220,255,.4)}

/* ---------- page loader ---------- */
.page-loader{position:fixed;inset:0;z-index:200;background:#030814;display:grid;place-items:center;overflow:hidden;transition:opacity .55s ease,visibility .55s ease}
.page-loader::before{content:"";position:absolute;width:58vmin;height:58vmin;border-radius:50%;background:radial-gradient(circle,rgba(115,220,255,.11),transparent 68%);transform:translateZ(0)}
.page-loader.loaded{opacity:0;visibility:hidden;pointer-events:none}
.loader-orbit{position:absolute;border:1px solid rgba(115,220,255,.2);border-radius:50%;transform:rotate(20deg);will-change:transform}.orbit-a{width:230px;height:230px}.orbit-b{width:310px;height:170px;transform:rotate(-30deg);border-color:rgba(142,128,255,.17)}
.site-loading .orbit-a{animation:orbit 4s linear infinite}.site-loading .orbit-b{animation:orbitReverse 5s linear infinite}
.loader-core{position:relative;width:84px;height:84px;border-radius:24px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#0e2945,#0a1526);border:1px solid rgba(115,220,255,.3);box-shadow:0 20px 70px rgba(0,0,0,.45)}
.loader-core img{position:absolute;width:70px;height:70px;object-fit:contain;opacity:.24}.loader-core span{position:relative;font-weight:800;letter-spacing:.14em;color:#fff;font-size:13px}
.loader-copy{position:absolute;margin-top:155px;text-align:center;display:grid;gap:4px}.loader-copy strong{font-size:12px;letter-spacing:.18em}.loader-copy span{font-size:11px;color:#7187a3}.loader-progress{position:absolute;margin-top:235px;width:min(260px,55vw);height:3px;border-radius:99px;background:#142337;overflow:hidden}.loader-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));transform:scaleX(0);transform-origin:left center}.site-loading .loader-progress i{transform:scaleX(1);transition:transform 4s linear}

/* ---------- ambient but performance-safe hero ---------- */
.hero{position:relative;min-height:calc(100vh - 68px);display:grid;grid-template-columns:minmax(250px,420px) minmax(0,1fr);align-items:center;gap:clamp(38px,6vw,92px);padding:80px clamp(24px,8vw,120px);isolation:isolate;background:radial-gradient(circle at 82% 20%,rgba(115,220,255,.09),transparent 23%),radial-gradient(circle at 55% 90%,rgba(142,128,255,.07),transparent 26%),linear-gradient(145deg,#06101d,#091525 55%,#06101d)}
.hero::after{content:"";position:absolute;inset:auto -80px -160px auto;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(115,220,255,.1),transparent 65%);z-index:-1;pointer-events:none}
.hero-logo{position:relative;display:grid;place-items:center;animation:heroIn .8s var(--ease) both}.hero-logo::before{content:"";position:absolute;width:76%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(115,220,255,.15);box-shadow:0 0 80px rgba(115,220,255,.08),inset 0 0 50px rgba(142,128,255,.05)}
.hero-logo img{position:relative;width:min(100%,390px);display:block;filter:drop-shadow(0 26px 34px rgba(0,0,0,.42));transition:transform .4s var(--ease),filter .4s ease}.hero-logo:hover img{transform:translateY(-7px) scale(1.015);filter:drop-shadow(0 34px 44px rgba(0,0,0,.5))}
.hero-copy{animation:heroCopyIn .75s .08s var(--ease) both}.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--accent);margin-bottom:18px;padding:7px 11px;border:1px solid rgba(115,220,255,.18);border-radius:999px;background:rgba(115,220,255,.055)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(115,220,255,.6)}
.hero h1,.section h2,.golden,.recent-heading h3,.credit-grid h3{font-family:"Playfair Display",serif;line-height:1.02;letter-spacing:-.03em}
.hero h1{font-size:clamp(52px,7vw,104px);max-width:900px;margin:0;color:#f5f9ff}.hero h1 em{font-style:italic;background:linear-gradient(90deg,#eef7ff 0%,#73dcff 65%,#a499ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:690px;font-size:17px;color:#a6b7cb;margin:28px 0 30px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-note{display:flex;align-items:center;gap:7px;margin-top:30px;font-size:12px;color:#90a5bd}.hero-note strong{color:#d6e5f4}

/* ---------- premium buttons ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 19px;border-radius:12px;border:1px solid transparent;text-decoration:none;font:700 12px "DM Sans",sans-serif;cursor:pointer;transition:transform .22s var(--ease),box-shadow .22s ease,background .22s ease,border-color .22s ease,color .22s ease}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.16) 50%,transparent 75%);transform:translateX(-120%);transition:transform .55s var(--ease);pointer-events:none}.btn:hover::before{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(0,0,0,.23)}.btn:active{transform:translateY(0) scale(.985)}
.btn.primary{color:#04111e;background:linear-gradient(135deg,#8be7ff,#5dceff);border-color:#86e4ff;box-shadow:0 10px 28px rgba(115,220,255,.17)}.btn.primary:hover{background:linear-gradient(135deg,#a8edff,#70d9ff)}
.btn.ghost{color:#eaf4ff;background:rgba(255,255,255,.025);border-color:rgba(151,190,226,.24)}.btn.ghost:hover{background:rgba(115,220,255,.065);border-color:rgba(115,220,255,.34)}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.3);pointer-events:none;transform:scale(0);animation:ripple .5s ease-out both;z-index:-1}

/* ---------- stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:#07111f;border-block:1px solid var(--line)}.stats div{position:relative;padding:24px 16px;text-align:center;border-right:1px solid var(--line)}.stats div:last-child{border-right:0}.stats strong{display:block;color:#f7fbff;font-family:"Playfair Display",serif;font-size:34px;line-height:1;margin-bottom:6px}.stats span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:var(--muted2)}

/* ---------- sections ---------- */
.section{position:relative;padding:105px clamp(24px,8vw,120px);background:#050b15}.section::before{content:"";position:absolute;left:clamp(24px,8vw,120px);right:clamp(24px,8vw,120px);top:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.section h2{font-size:clamp(42px,5.5vw,72px);margin:0;color:#f5f9ff}.section .lead,.section>p{max-width:760px;color:#99acc2;margin-top:18px}
.split,.register-layout,.status-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:55px;align-items:start}.register-layout{grid-template-columns:minmax(0,1fr) minmax(390px,600px)}

/* ---------- cards / forms ---------- */
.card,.registered-panel,.comrade,.teacher-card,.credit-grid>div,.vote-block,.comrade-total,.status-card,.callout{background:linear-gradient(145deg,rgba(13,29,49,.93),rgba(8,19,33,.96));border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.card,.status-card{border-radius:var(--radius);padding:28px}.card,.registered-panel,.status-card,.vote-block,.credit-grid>div,.teacher-card,.comrade{transition:transform .25s var(--ease),border-color .25s ease,box-shadow .25s ease}.card:hover,.registered-panel:hover,.status-card:hover,.vote-block:hover,.credit-grid>div:hover,.teacher-card:hover,.comrade:hover{transform:translateY(-3px);border-color:rgba(115,220,255,.28);box-shadow:var(--shadow)}
.form{display:grid;gap:15px}.form label,.status-card label{display:grid;gap:7px;color:#e7f1fc;font-size:11px;font-weight:800}.form input,.form select,.status-card input,.vote-form input,.vote-form select,.wide-input{width:100%;padding:13px 14px;border-radius:11px;border:1px solid rgba(151,190,226,.18);outline:none;background:#071525;color:#edf5ff;font:inherit;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.form input::placeholder,.status-card input::placeholder,.vote-form input::placeholder{color:#62788f}.form input:focus,.form select:focus,.status-card input:focus,.vote-form input:focus,.vote-form select:focus,.wide-input:focus{border-color:rgba(115,220,255,.7);box-shadow:0 0 0 3px rgba(115,220,255,.1);background:#0a1a2e}.form small{color:#70869f;font-size:10px}.pref-head{padding-top:15px;border-top:1px solid var(--line)}.mini-label{font-size:9px;letter-spacing:.15em;color:var(--accent);font-weight:800}.pref-head p{font-size:10px;color:#71859c;margin:5px 0 0}
.callout{padding:14px 16px;margin-top:22px;border-radius:14px;border-left:3px solid var(--accent);font-size:12px;color:#a7b8ca}.callout.title-nudge{display:block;text-decoration:none}.callout strong{color:#edf7ff}

/* ---------- registration boards ---------- */
.register-section{padding-top:90px}.registered-panel{padding:23px;border-radius:var(--radius);position:sticky;top:88px;max-height:630px;display:flex;flex-direction:column}.recent-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding-bottom:15px;border-bottom:1px solid var(--line)}.recent-heading h3{margin:0;font-size:30px;color:#f5f9ff}.live-count,.comrade-total{display:grid;place-items:center}.live-count{min-width:40px;height:40px;border-radius:12px;background:rgba(115,220,255,.11);border:1px solid rgba(115,220,255,.25);color:var(--accent);font-weight:800}.registered-note,.registered-footer,.student-meta{font-size:10px;color:#70859c}.registered-list{overflow:auto;min-height:120px;max-height:398px;padding-right:5px}.registered-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 3px;border-bottom:1px solid rgba(151,190,226,.09)}.student-name,.comrade-name{font-weight:800;font-size:12px}.student-badge,.status{font-size:8px;letter-spacing:.1em;text-transform:uppercase;padding:5px 7px;border:1px solid rgba(151,190,226,.18);border-radius:999px;color:#9eb1c7;white-space:nowrap}.empty-registered,.empty-comrades,.empty-votes{text-align:center;padding:50px 16px;border:1px dashed rgba(151,190,226,.16);border-radius:16px;color:#6f8299;font-size:12px}.empty-registered span,.empty-votes span{font-size:10px;color:#53687d}.registered-footer{padding-top:13px;margin-top:15px;border-top:1px solid var(--line);letter-spacing:.05em}

/* ---------- comrades ---------- */
.section-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:25px}.comrade-total{min-width:125px;padding:16px 20px;border-radius:18px}.comrade-total strong{display:block;font:700 42px/1 "Playfair Display",serif;color:#fff}.comrade-total span{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#70869f}.comrades-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:40px}.comrade{display:flex;align-items:center;gap:13px;padding:17px 18px;border-radius:16px}.comrade-num{width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:11px;background:linear-gradient(135deg,#8be7ff,#5dceff);color:#04111e;font-size:10px;font-weight:900}

/* ---------- status ---------- */
.status-section,.rules{background:linear-gradient(180deg,#091423,#07111f)}.status-card{display:grid;gap:15px}.status-result{display:flex;gap:13px;align-items:center;min-height:74px;padding:14px;border-radius:14px;background:#0d2137;border:1px solid rgba(115,220,255,.15);color:#edf5ff}.status-result strong{font-size:13px}.status-result p{margin:3px 0 0;color:#88a0ba;font-size:10px}.status-result-icon{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;background:#15314a;color:var(--accent);border:1px solid rgba(115,220,255,.16);font-weight:900}.status-result-icon.pending{background:#2c291b;color:#f4cf62}.status-result-icon.verify{background:#30251b;color:#ffb45c}.status-result-icon.confirmed{background:#173226;color:#65e6a2}.status-result-icon.approved{background:#15314a;color:var(--accent)}.status-legend{display:flex;flex-wrap:wrap;gap:7px;margin-top:25px}.status-legend span{display:inline-flex;padding:7px 9px;border:1px solid var(--line);border-radius:999px;font-size:9px;color:#8aa0b7;background:rgba(255,255,255,.02)}

/* ---------- title grids ---------- */
.dark{background:#06101c}.title-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:42px}.title-grid article{position:relative;min-height:225px;padding:22px;border-radius:17px;border:1px solid rgba(151,190,226,.14);background:linear-gradient(145deg,#0c1a2c,#091525);transition:transform .23s var(--ease),border-color .23s ease,box-shadow .23s ease,background .23s ease}.title-grid article::after{content:"";position:absolute;top:0;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,rgba(115,220,255,.36),transparent)}.title-grid article:hover{transform:translateY(-4px);border-color:rgba(115,220,255,.3);box-shadow:0 16px 34px rgba(0,0,0,.24);background:linear-gradient(145deg,#0e2036,#091525)}.title-grid span{display:block;font:700 11px/1 "DM Sans",sans-serif;color:#5e748b;letter-spacing:.1em}.title-grid h3{margin:18px 0 12px;color:#eef7ff;font-size:15px;line-height:1.22;letter-spacing:.04em}.title-grid p{margin:0;color:#7f95ab;font-size:11px;line-height:1.65}.title-grid .placeholder{border-style:dashed}
.teacher-title-grid{margin-top:28px;display:grid;gap:12px}.teacher-card{grid-template-columns:52px minmax(0,1fr) auto;align-items:center;padding:19px 20px;border-radius:16px}.teacher-icon{font-size:25px}.title-number{font-size:9px;color:#5f748a;letter-spacing:.1em}.teacher-card h3{font-family:"Playfair Display",serif;font-size:22px;margin:3px 0;color:#f2f7ff}.teacher-card p{margin:0;color:#7f95ab;font-size:11px}

/* ---------- voting ---------- */
.voting-section{background:radial-gradient(circle at 90% 15%,rgba(142,128,255,.065),transparent 25%),#07111f}.public-polls{display:grid;gap:16px;margin-top:35px}.public-poll{padding:23px;border-radius:18px;background:#0b182a;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .24s var(--ease),border-color .24s ease}.public-poll:hover{transform:translateY(-3px);border-color:rgba(115,220,255,.23)}.poll-kicker{font-size:9px;font-weight:800;letter-spacing:.15em;color:var(--accent);margin-bottom:8px}.public-poll h3{font:700 25px/1.15 "Playfair Display",serif;margin:0 0 18px}.public-poll>label{display:grid;gap:6px;font-size:10px;font-weight:800;color:#dbe8f5}.candidate-radios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:15px 0}.candidate-radios label{display:flex;align-items:center;gap:8px;padding:11px;border:1px solid var(--line);border-radius:11px;background:#081526;color:#a7bbcf;font-size:10px;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease}.candidate-radios label:has(input:checked){border-color:rgba(115,220,255,.45);background:rgba(115,220,255,.08);color:#eefaff}.candidate-radios input{accent-color:#73dcff}.poll-msg{margin-top:8px;min-height:18px;color:#85e2b0;font-size:10px}.voting-reminder{margin-top:18px}

/* ---------- rules + credits ---------- */
.rules{background:linear-gradient(160deg,#0b1726,#07111f)}.rule-list{max-width:900px;margin-top:42px}.rule-list p{padding:17px 0;border-bottom:1px solid var(--line);margin:0;color:#9ab0c6;font-size:12px}.rule-list b{display:inline-block;width:44px;color:var(--accent)}.golden{text-align:center;font-size:28px;color:#e8f3ff;margin-top:64px;letter-spacing:.01em}.credits{background:#050b15}.credit-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:13px;margin-top:38px}.credit-grid>div{padding:26px;border-radius:17px}.credit-grid span{font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--accent)}.credit-grid h3{font-size:24px;margin:12px 0;color:#eef5fd}.credit-grid p{font-size:10px;color:#748aa1}.copyright{font-size:9px;color:#5f7389;border-top:1px solid var(--line);padding-top:22px;margin-top:42px;max-width:950px}footer{display:flex;justify-content:space-between;gap:20px;padding:22px clamp(24px,8vw,120px);border-top:1px solid var(--line);color:#60758d;font-size:9px;letter-spacing:.05em}

/* ---------- modal / toast ---------- */
.modal{display:none;position:fixed;inset:0;z-index:150;align-items:center;justify-content:center;padding:20px;background:rgba(1,6,14,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.modal.open{display:flex}.modal-card{position:relative;width:min(520px,100%);padding:42px 34px;text-align:center;border-radius:26px;background:linear-gradient(145deg,#10243a,#081424);border:1px solid rgba(115,220,255,.2);box-shadow:0 35px 90px rgba(0,0,0,.55)}.modal.open .modal-card{animation:modalIn .45s var(--ease) both}.modal-close{position:absolute;right:12px;top:10px;width:35px;height:35px;border:0;border-radius:10px;background:transparent;color:#8aa0b7;font-size:25px;cursor:pointer;transition:background .2s ease,color .2s ease}.modal-close:hover{background:rgba(255,255,255,.05);color:#fff}.modal-mark{width:50px;height:50px;margin:0 auto 16px;border-radius:15px;display:grid;place-items:center;background:rgba(115,220,255,.13);border:1px solid rgba(115,220,255,.24);color:var(--accent);font-weight:900;font-size:22px}.modal-card h2{font-size:42px;margin:0}.registration-id{margin:20px auto;padding:17px;border:1px dashed rgba(115,220,255,.42);border-radius:14px;background:#071525;color:#dff7ff;font:700 28px/1.2 monospace;letter-spacing:.1em}.modal-card p,.modal-card small{color:#7f95ab;font-size:10px}.copy-status{min-height:22px;font-size:10px;color:var(--accent);margin-top:7px}.toast{position:fixed;right:22px;bottom:22px;z-index:180;display:none;padding:13px 16px;border-radius:12px;background:#0d2137;border:1px solid rgba(115,220,255,.18);box-shadow:var(--shadow-sm);color:#e8f3ff;font-size:10px}.toast.show{display:block;animation:toastIn .3s var(--ease) both}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s var(--ease)}.reveal.is-visible{opacity:1;transform:none}.reveal[data-delay="1"]{transition-delay:.06s}.reveal[data-delay="2"]{transition-delay:.12s}.reveal[data-delay="3"]{transition-delay:.18s}
.count-bump{animation:countBump .35s var(--ease)}
@keyframes heroIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
@keyframes heroCopyIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes orbit{to{transform:rotate(380deg)}}@keyframes orbitReverse{to{transform:rotate(-390deg)}}
@keyframes ripple{to{transform:scale(1);opacity:0}}@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes countBump{50%{transform:scale(1.05)}to{transform:none}}

/* ---------- responsive ---------- */
@media(max-width:1120px){.topbar nav{gap:0}.topbar nav a{padding-inline:7px}.hero{grid-template-columns:minmax(220px,320px) 1fr}.title-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.register-layout{grid-template-columns:1fr}.registered-panel{position:relative;top:auto}.comrades-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.credit-grid{grid-template-columns:1fr 1fr}.credit-grid>div:first-child{grid-column:1/-1}}
@media(max-width:860px){.topbar{align-items:flex-start}.topbar nav{display:none}.hero{grid-template-columns:1fr;text-align:center;padding-top:65px}.hero-logo img{width:min(62vw,310px)}.hero p{margin-left:auto;margin-right:auto}.hero-actions{justify-content:center}.hero-note{justify-content:center}.split,.status-layout{grid-template-columns:1fr}.section-head-row{align-items:flex-start;flex-direction:column}.title-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.credit-grid{grid-template-columns:1fr}.credit-grid>div:first-child{grid-column:auto}}
@media(max-width:600px){.topbar{padding:9px 14px}.brand{font-size:10px}.brand img{width:39px;height:39px}.hero{min-height:auto;padding:54px 20px 70px}.hero h1{font-size:50px}.hero p{font-size:14px}.section{padding:78px 20px}.section::before{left:20px;right:20px}.section h2{font-size:41px}.stats{grid-template-columns:1fr 1fr}.stats div{padding:20px 10px}.stats strong{font-size:28px}.title-grid,.comrades-grid{grid-template-columns:1fr}.teacher-card{grid-template-columns:42px 1fr}.teacher-card h3{font-size:19px}.candidate-radios{grid-template-columns:1fr}.modal-card{padding:36px 20px}.modal-card h2{font-size:34px}.registration-id{font-size:22px}.footer,footer{display:block}footer span{display:block;margin-top:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.page-loader .loader-progress i{transition:none!important;transform:scaleX(1)!important}.reveal{opacity:1!important;transform:none!important}}

/* ===== PRO MOTION PACK v5.1 ===== */
:root{
  --motion-fast:.18s;
  --motion-med:.42s;
  --motion-slow:.75s;
  --glow:rgba(115,220,255,.18);
}
body{background:
  radial-gradient(900px 420px at var(--mx,50%) var(--my,8%),rgba(115,220,255,.055),transparent 62%),
  var(--bg);
  transition:background .45s ease;
}
body::before,body::after{content:"";position:fixed;inset:auto;pointer-events:none;z-index:-2}
body::before{width:46vw;height:46vw;right:-18vw;top:16vh;border-radius:50%;background:radial-gradient(circle,rgba(142,128,255,.07),transparent 67%);filter:blur(8px);animation:ambientDrift 18s ease-in-out infinite alternate}
body::after{width:38vw;height:38vw;left:-16vw;bottom:8vh;border-radius:50%;background:radial-gradient(circle,rgba(115,220,255,.055),transparent 68%);filter:blur(8px);animation:ambientDrift2 22s ease-in-out infinite alternate}
.topbar{transition:padding .35s var(--ease),background .35s ease,box-shadow .35s ease,border-color .35s ease}
.topbar.scrolled{padding-top:7px;padding-bottom:7px;border-color:rgba(115,220,255,.18)}
.topbar nav a{transition:color var(--motion-fast) ease,background var(--motion-fast) ease,transform var(--motion-fast) var(--ease),box-shadow var(--motion-fast) ease}
.topbar nav a:hover{box-shadow:0 8px 22px rgba(0,0,0,.16),inset 0 0 0 1px rgba(115,220,255,.08)}
.topbar nav a.active{box-shadow:inset 0 0 0 1px rgba(115,220,255,.09),0 8px 20px rgba(0,0,0,.12)}
.hero{overflow:hidden}
.hero::before{content:"";position:absolute;inset:-25%;background:conic-gradient(from 40deg at 70% 45%,transparent 0 28%,rgba(115,220,255,.05) 35%,transparent 43% 68%,rgba(142,128,255,.045) 75%,transparent 82%);filter:blur(24px);animation:heroAurora 16s linear infinite;z-index:-1;pointer-events:none}
.hero-logo::after{content:"";position:absolute;width:112%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 90deg,transparent,rgba(115,220,255,.18),transparent 38%,rgba(142,128,255,.16),transparent 76%);mask:radial-gradient(circle,transparent 63%,#000 64% 65%,transparent 66%);-webkit-mask:radial-gradient(circle,transparent 63%,#000 64% 65%,transparent 66%);animation:haloSpin 14s linear infinite;pointer-events:none}
.hero-copy>*{transition:transform .45s var(--ease),opacity .45s ease}
.hero-copy:hover h1{transform:translateX(3px)}
.btn{transition:transform .28s var(--ease),box-shadow .28s ease,background .28s ease,border-color .28s ease,color .28s ease,filter .28s ease}
.btn:hover{filter:saturate(1.06)}
.btn:focus-visible,.topbar nav a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid rgba(115,220,255,.75);outline-offset:3px}
.btn.primary{box-shadow:0 10px 28px rgba(115,220,255,.16),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.primary:hover{box-shadow:0 18px 38px rgba(115,220,255,.22),inset 0 1px 0 rgba(255,255,255,.45)}
.btn.ghost:hover{box-shadow:0 14px 30px rgba(0,0,0,.22),inset 0 0 28px rgba(115,220,255,.045)}
.card,.registered-panel,.comrade,.teacher-card,.credit-grid>div,.vote-block,.callout,.status-card,.public-poll,.title-grid article{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .42s var(--ease),border-color .32s ease,box-shadow .42s ease,background .42s ease;
}
.card::before,.registered-panel::before,.comrade::before,.teacher-card::before,.credit-grid>div::before,.vote-block::before,.callout::before,.status-card::before,.public-poll::before,.title-grid article::before{
  content:"";position:absolute;inset:0;background:radial-gradient(280px 140px at var(--cx,50%) var(--cy,0%),rgba(115,220,255,.08),transparent 65%);opacity:0;transition:opacity .32s ease;pointer-events:none;z-index:-1}
.card:hover,.registered-panel:hover,.comrade:hover,.teacher-card:hover,.credit-grid>div:hover,.vote-block:hover,.callout:hover,.status-card:hover,.public-poll:hover,.title-grid article:hover{transform:translateY(-6px);border-color:rgba(115,220,255,.28);box-shadow:0 22px 48px rgba(0,0,0,.28),0 0 0 1px rgba(115,220,255,.035)}
.card:hover::before,.registered-panel:hover::before,.comrade:hover::before,.teacher-card:hover::before,.credit-grid>div:hover::before,.vote-block:hover::before,.callout:hover::before,.status-card:hover::before,.public-poll:hover::before,.title-grid article:hover::before{opacity:1}
.section{background:linear-gradient(180deg,rgba(5,11,21,.98),rgba(5,11,21,.94));}
.section:nth-of-type(even)::after{content:"";position:absolute;inset:20% 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(115,220,255,.08),transparent);pointer-events:none}
.stats div{transition:background .3s ease,transform .3s var(--ease)}
.stats div:hover{background:rgba(115,220,255,.025);transform:translateY(-2px)}
.stats strong{transition:transform .3s var(--ease),text-shadow .3s ease}.stats div:hover strong{transform:translateY(-2px);text-shadow:0 0 20px rgba(115,220,255,.18)}
input,select,textarea{transition:border-color .28s ease,box-shadow .28s ease,background .28s ease,transform .28s var(--ease)}
input:hover,select:hover,textarea:hover{border-color:rgba(151,190,226,.3);background:#0b1b2e}
input:focus,select:focus,textarea:focus{transform:translateY(-1px);border-color:rgba(115,220,255,.5)!important;box-shadow:0 0 0 4px rgba(115,220,255,.07),0 12px 26px rgba(0,0,0,.18)}
.candidate-radios label{transition:transform .24s var(--ease),border-color .24s ease,background .24s ease,box-shadow .24s ease;color:#a7bbcf}
.candidate-radios label:hover{transform:translateY(-2px);border-color:rgba(115,220,255,.3);box-shadow:0 10px 22px rgba(0,0,0,.18)}
.candidate-radios label:has(input:checked){box-shadow:0 0 0 1px rgba(115,220,255,.08),0 10px 24px rgba(115,220,255,.08)}
.reveal{opacity:0;transform:translateY(26px) scale(.985);filter:blur(3px);transition:opacity .72s ease,transform .72s var(--ease),filter .72s ease}
.reveal.is-visible{opacity:1;transform:none;filter:none}
.reveal[data-delay="1"]{transition-delay:.08s}.reveal[data-delay="2"]{transition-delay:.16s}.reveal[data-delay="3"]{transition-delay:.24s}
.modal{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease,backdrop-filter .35s ease}
.modal.open{display:flex;opacity:1;visibility:visible}
.modal-card{transform:translateY(26px) scale(.965);transition:transform .48s var(--ease),box-shadow .48s ease}
.modal.open .modal-card{transform:none;box-shadow:0 45px 110px rgba(0,0,0,.6),0 0 0 1px rgba(115,220,255,.05)}
.modal-close{transition:transform .24s var(--ease),background .2s ease,color .2s ease}.modal-close:hover{transform:rotate(90deg) scale(1.06)}
.toast{opacity:0;transform:translateY(15px) scale(.97);transition:opacity .3s ease,transform .42s var(--ease)}
.toast.show{display:block;opacity:1;transform:none}
.page-loader{transition:opacity .75s ease,visibility .75s ease,filter .75s ease}.page-loader.loaded{filter:blur(5px)}
.loader-core{animation:loaderPulse 2.2s ease-in-out infinite}.loader-core img{animation:logoFloat 2.8s ease-in-out infinite}
.loader-progress i{box-shadow:0 0 18px rgba(115,220,255,.35)}
.scroll-progress i{transition:width .08s linear;}
@keyframes ambientDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-7vw,3vh,0) scale(1.08)}}
@keyframes ambientDrift2{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(6vw,-4vh,0) scale(1.1)}}
@keyframes heroAurora{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.08)}100%{transform:rotate(360deg) scale(1)}}
@keyframes haloSpin{to{transform:rotate(360deg)}}
@keyframes loaderPulse{0%,100%{transform:scale(1);box-shadow:0 20px 70px rgba(0,0,0,.45)}50%{transform:scale(1.035);box-shadow:0 24px 82px rgba(0,0,0,.52),0 0 30px rgba(115,220,255,.08)}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

@media(max-width:860px){
  body::before,body::after{opacity:.65}
  .hero::before{animation-duration:22s}
  .hero-logo::after{animation-duration:19s}
}
@media(prefers-reduced-motion:reduce){
  body::before,body::after,.hero::before,.hero-logo::after,.loader-core,.loader-core img{animation:none!important}
  .reveal{opacity:1!important;transform:none!important;filter:none!important}
}

/* ===== BUTTER MOTION v5.2 ===== */
:root{
  --butter:cubic-bezier(.16,1,.3,1);
  --butter-soft:cubic-bezier(.2,.75,.2,1);
  --smooth-fast:220ms;
  --smooth:520ms;
  --smooth-slow:760ms;
}
html{scroll-behavior:smooth}
body{transition:none!important}
/* Keep ambient layers isolated so they stay on their own compositing surfaces. */
body::before,body::after,.hero::before,.hero::after,.hero-logo::after{will-change:transform;contain:paint}
body::before,body::after{filter:blur(4px)}
.topbar{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background var(--smooth) var(--butter),box-shadow var(--smooth) var(--butter),padding var(--smooth) var(--butter),border-color var(--smooth) var(--butter)}
.topbar nav a{transition:color var(--smooth-fast) var(--butter),background var(--smooth-fast) var(--butter),transform var(--smooth-fast) var(--butter),box-shadow var(--smooth-fast) var(--butter)}
.topbar nav a::after{transition:transform 360ms var(--butter)}
.btn{transition:transform 360ms var(--butter),box-shadow 420ms var(--butter),background 420ms var(--butter),border-color 360ms var(--butter),color 280ms var(--butter),filter 420ms var(--butter)}
.btn:hover{transform:translate3d(0,-3px,0)}
.btn:active{transform:translate3d(0,0,0) scale(.975);transition-duration:100ms}
.btn::before{transition:transform 800ms var(--butter)}
.card,.registered-panel,.comrade,.teacher-card,.credit-grid>div,.vote-block,.callout,.status-card,.public-poll,.title-grid article{transition:transform 600ms var(--butter),border-color 480ms var(--butter),box-shadow 600ms var(--butter),background 600ms var(--butter)}
.card:hover,.registered-panel:hover,.comrade:hover,.teacher-card:hover,.credit-grid>div:hover,.vote-block:hover,.callout:hover,.status-card:hover,.public-poll:hover,.title-grid article:hover{transform:translate3d(0,-7px,0)}
.card::before,.registered-panel::before,.comrade::before,.teacher-card::before,.credit-grid>div::before,.vote-block::before,.callout::before,.status-card::before,.public-poll::before,.title-grid article::before{transition:opacity 520ms var(--butter)}
.stats div{transition:transform 420ms var(--butter),background 420ms var(--butter)}
.stats strong{transition:transform 420ms var(--butter),text-shadow 420ms var(--butter)}
input,select,textarea{transition:transform 320ms var(--butter),border-color 360ms var(--butter),box-shadow 420ms var(--butter),background 420ms var(--butter)}
input:focus,select:focus,textarea:focus{transform:translate3d(0,-1px,0)}
.candidate-radios label{transition:transform 360ms var(--butter),border-color 360ms var(--butter),background 420ms var(--butter),box-shadow 420ms var(--butter),color 360ms var(--butter)}
.reveal{filter:none!important;transform:translate3d(0,30px,0) scale(.988);opacity:0;transition:opacity 680ms var(--butter),transform 760ms var(--butter)}
.reveal.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}
.reveal[data-delay="1"]{transition-delay:80ms}.reveal[data-delay="2"]{transition-delay:150ms}.reveal[data-delay="3"]{transition-delay:220ms}
.modal{transition:opacity 420ms var(--butter),visibility 420ms var(--butter),backdrop-filter 420ms var(--butter)}
.modal-card{transition:transform 620ms var(--butter),box-shadow 620ms var(--butter);will-change:transform}
.modal.open .modal-card{transform:translate3d(0,0,0) scale(1)}
.modal-close{transition:transform 420ms var(--butter),background 300ms var(--butter),color 300ms var(--butter)}
.toast{transition:opacity 420ms var(--butter),transform 560ms var(--butter)}
.scroll-progress i{transition:width 80ms linear}
.hero-logo img{transition:transform 650ms var(--butter),filter 650ms var(--butter)}
.hero-logo:hover img{transform:translate3d(0,-6px,0) scale(1.012)}
/* Gentle depth without animating large blur filters. */
.hero-logo::before{transition:transform 1000ms var(--butter),box-shadow 1000ms var(--butter)}
.hero-logo:hover::before{transform:scale(1.035);box-shadow:0 0 100px rgba(115,220,255,.1),inset 0 0 60px rgba(142,128,255,.07)}
/* View transitions for same-document navigation where supported. */
@supports(view-transition-name:auto){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:420ms;animation-timing-function:var(--butter)}
}
@media(max-width:860px){
  body::before,body::after{opacity:.48}
  .hero::before{animation-duration:26s}
  .hero-logo::after{animation-duration:22s}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::before,body::after,.hero::before,.hero::after,.hero-logo::after{animation:none!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ============================================================
   V4.1-INSPIRED BUTTER MOTION — v5.3
   Smoothness concept borrowed from the reference build:
   long ease-out curves, staggered reveals, soft sheen, gentle
   lift, and restrained ambient motion. Kept transform/opacity-first.
   ============================================================ */
:root{
  --butter-ease:cubic-bezier(.16,1,.3,1);
  --butter-ease-soft:cubic-bezier(.22,1,.36,1);
  --butter-fast:.24s;
  --butter-med:.55s;
  --butter-slow:.9s;
}

/* Global micro-interactions */
.topbar{transition:padding .55s var(--butter-ease-soft),background .55s ease,box-shadow .55s ease,border-color .55s ease}
.topbar nav a{transition:color .32s ease,background .35s ease,transform .45s var(--butter-ease),box-shadow .45s ease,letter-spacing .45s ease}
.topbar nav a:hover{transform:translateY(-2px);letter-spacing:.025em}
.topbar nav a::after{transition:transform .45s var(--butter-ease)}

.scroll-progress i{transition:width .16s linear;will-change:width}

/* Hero: soft light movement instead of hard motion */
.hero{--mx:50%;--my:50%;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-24%;z-index:-1;pointer-events:none;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.08),transparent 20%),conic-gradient(from 28deg at 72% 46%,transparent 0 30%,rgba(115,220,255,.055) 38%,transparent 47% 68%,rgba(142,128,255,.045) 76%,transparent 84%);filter:blur(26px);animation:butterAurora 22s ease-in-out infinite alternate}
.hero-logo::before{transition:transform 1s var(--butter-ease),box-shadow 1s ease,border-color .8s ease}
.hero-logo:hover::before{transform:scale(1.04);box-shadow:0 0 100px rgba(115,220,255,.11),inset 0 0 60px rgba(142,128,255,.06);border-color:rgba(115,220,255,.22)}
.hero-logo img{transition:transform .7s var(--butter-ease),filter .7s ease}
.hero-logo:hover img{transform:translate3d(0,-8px,0) scale(1.012);filter:drop-shadow(0 32px 40px rgba(0,0,0,.46))}
.hero-copy>*{transition:transform .65s var(--butter-ease),opacity .65s ease}
.hero-copy:hover h1{transform:translate3d(4px,0,0)}

/* Buttons: smooth lift + sheen, no abrupt snap */
.btn{transition:transform .42s var(--butter-ease),box-shadow .48s var(--butter-ease),background .48s ease,border-color .42s ease,color .42s ease}
.btn::before{transition:transform .72s var(--butter-ease);opacity:.8}
.btn:hover{transform:translate3d(0,-3px,0);box-shadow:0 16px 34px rgba(0,0,0,.23)}
.btn:active{transform:translate3d(0,0,0) scale(.985);transition-duration:.14s}
.btn.ghost{background-image:linear-gradient(120deg,rgba(115,220,255,.03),rgba(142,128,255,.06),rgba(115,220,255,.03));background-size:220% 220%;animation:butterButtonFlow 10s ease-in-out infinite}

/* Soft surface sheen inspired by v4.1 */
.card,.registered-panel,.comrade,.teacher-card,.credit-grid>div,.vote-block,.callout,.status-card,.public-poll,.title-grid article{position:relative;overflow:hidden;isolation:isolate}
.card::after,.registered-panel::after,.status-card::after,.vote-block::after,.public-poll::after,.title-grid article::after,.teacher-card::after,.credit-grid>div::after,.callout::after,.comrade::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.075) 48%,transparent 62%);
  transform:translate3d(-145%,0,0);animation:butterSheen 11s var(--butter-ease) infinite;
  z-index:2;
}
.comrade::after{animation-delay:1.7s}.teacher-card::after{animation-delay:3.2s}.status-card::after{animation-delay:2.4s}.vote-block::after{animation-delay:4.1s}.public-poll::after{animation-delay:2.8s}.title-grid article::after{animation-delay:1.2s}.callout::after{animation-delay:5.1s}.credit-grid>div::after{animation-delay:3.8s}

/* Butter-smooth surface lift */
.card,.registered-panel,.comrade,.teacher-card,.credit-grid>div,.vote-block,.callout,.status-card,.public-poll,.title-grid article{
  transition:transform .58s var(--butter-ease),box-shadow .58s var(--butter-ease),border-color .45s ease,background-color .5s ease;
  will-change:transform;
}
.card:hover,.registered-panel:hover,.comrade:hover,.teacher-card:hover,.credit-grid>div:hover,.vote-block:hover,.callout:hover,.status-card:hover,.public-poll:hover,.title-grid article:hover{
  transform:translate3d(0,-5px,0);
  box-shadow:0 24px 52px rgba(0,0,0,.26),0 0 0 1px rgba(115,220,255,.04);
}
.card::before,.registered-panel::before,.comrade::before,.teacher-card::before,.credit-grid>div::before,.vote-block::before,.callout::before,.status-card::before,.public-poll::before,.title-grid article::before{
  transition:opacity .5s ease,transform .7s var(--butter-ease);
}

/* Stats and form controls */
.stats div{transition:background .45s ease,transform .5s var(--butter-ease)}
.stats div:hover{transform:translate3d(0,-2px,0)}
.stats strong{transition:transform .5s var(--butter-ease),text-shadow .5s ease}
.stats div:hover strong{transform:translate3d(0,-2px,0)}
input,select,textarea{transition:transform .45s var(--butter-ease),border-color .45s ease,box-shadow .45s ease,background-color .45s ease}
input:focus,select:focus,textarea:focus{transform:translate3d(0,-2px,0)}
.candidate-radios label{transition:transform .46s var(--butter-ease),border-color .45s ease,background .45s ease,box-shadow .45s ease,color .4s ease}
.candidate-radios label:hover{transform:translate3d(0,-3px,0)}

/* Staggered reveal — opacity + transform only for the buttery feel */
.reveal{opacity:0;transform:translate3d(0,28px,0) scale(.992);filter:none!important;transition:opacity .9s ease,transform .9s var(--butter-ease)}
.reveal.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}
.reveal[data-delay="1"]{transition-delay:.08s}.reveal[data-delay="2"]{transition-delay:.16s}.reveal[data-delay="3"]{transition-delay:.24s}

/* Modal and toast */
.modal{transition:opacity .48s ease,visibility .48s ease}
.modal-card{transition:transform .7s var(--butter-ease),box-shadow .7s ease,opacity .5s ease}
.modal.open .modal-card{transform:none}
.modal-close{transition:transform .5s var(--butter-ease),background .35s ease,color .35s ease}
.modal-close:hover{transform:rotate(90deg) scale(1.06)}
.toast{transition:opacity .5s ease,transform .6s var(--butter-ease)}

/* Ambient motion stays deliberately slow */
body::before,body::after{animation-duration:24s!important;animation-timing-function:var(--butter-ease-soft)!important}
.ambient-orbs .orb{animation-timing-function:var(--butter-ease-soft)!important}

@keyframes butterAurora{0%,100%{transform:translate3d(-1%,0,0) rotate(0deg) scale(1)}50%{transform:translate3d(2%,-1%,0) rotate(3deg) scale(1.035)}}
@keyframes butterSheen{0%,14%{transform:translate3d(-145%,0,0)}30%,100%{transform:translate3d(145%,0,0)}}
@keyframes butterButtonFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

@media(max-width:600px){
  .hero::before{filter:blur(18px);animation-duration:28s}
  .card::after,.registered-panel::after,.status-card::after,.vote-block::after,.public-poll::after,.title-grid article::after,.teacher-card::after,.credit-grid>div::after,.callout::after,.comrade::after{animation-duration:14s;opacity:.55}
}

@media(prefers-reduced-motion:reduce){
  .hero::before,.btn.ghost,.card::after,.registered-panel::after,.status-card::after,.vote-block::after,.public-poll::after,.title-grid article::after,.teacher-card::after,.credit-grid>div::after,.callout::after,.comrade::after{animation:none!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .hero-logo img,.hero-logo::before,.hero-copy>*{transition:none!important}
}

/* v5.3 marker */


/* Payment verification flow */
.upi-notice{display:flex;align-items:center;gap:12px;margin:4px 0 2px;padding:13px 14px;border:1px solid rgba(120,180,255,.16);border-radius:16px;background:rgba(80,130,210,.07)}
.upi-notice-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.08);font-weight:800}
.upi-notice strong,.upi-notice span{display:block}.upi-notice span{margin-top:3px;font-size:12px;line-height:1.45;opacity:.7}
.payment-panel{margin-top:18px;padding:18px;border-radius:22px;border:1px solid rgba(120,180,255,.18);background:linear-gradient(145deg,rgba(35,55,95,.28),rgba(12,18,35,.56));box-shadow:0 20px 60px rgba(0,0,0,.18)}
.payment-panel-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.payment-panel-head h3{margin:4px 0 0;font-size:20px}.payment-badge{padding:7px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.08em;background:rgba(80,150,255,.12);border:1px solid rgba(100,170,255,.18)}
.payment-help{font-size:13px;line-height:1.55;opacity:.75}.qr-wrap{display:grid;justify-items:center;gap:9px;margin:15px auto;width:max-content}.qr-wrap>div{padding:10px;border-radius:18px;background:#fff;box-shadow:0 16px 40px rgba(0,0,0,.28)}.qr-wrap canvas,.qr-wrap img{display:block;max-width:min(78vw,420px);height:auto}.qr-wrap>span{font-size:12px;opacity:.7}.qr-unconfigured{width:190px;height:190px;display:grid;place-items:center;text-align:center;color:#222;font-weight:800}.qr-unconfigured small{font-weight:500}.upi-details{display:flex;justify-content:space-between;gap:12px;padding:11px 13px;border-radius:12px;background:rgba(255,255,255,.04);font-size:12px}.upi-details strong{font-family:ui-monospace,monospace;overflow-wrap:anywhere}.utr-form{margin-top:14px}.cash-payment-panel{margin-top:18px;padding:18px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035)}.cash-payment-panel strong,.cash-payment-panel p{display:block;margin-top:5px}.cash-payment-panel p{font-size:13px;opacity:.7;line-height:1.5}

/* v5.7 — compact registration/payment screen */
@media (max-width: 600px){
  .modal{padding:8px;align-items:center}
  .modal-card{
    width:min(100%,360px);
    max-height:calc(100vh - 16px);
    overflow-y:auto;
    padding:22px 12px 16px;
    border-radius:20px;
  }
  .modal-card h2{font-size:28px;line-height:1.08;margin:2px 0 8px}
  .modal-mark{width:38px;height:38px;margin:0 auto 8px;border-radius:12px;font-size:17px}
  .registration-id{margin:10px auto;padding:10px 8px;font-size:18px;border-radius:11px}
  .modal-card p{font-size:8px;line-height:1.35;margin:6px 0}
  .copy-status{min-height:15px;font-size:8px;margin-top:3px}
  .modal-card .btn{min-height:34px;padding:8px 14px;font-size:9px}

  .payment-panel{margin-top:10px;padding:11px;border-radius:15px}
  .payment-panel-head{gap:8px;align-items:center}
  .payment-panel-head h3{font-size:14px;line-height:1.35;margin:2px 0 0}
  .payment-badge{padding:5px 7px;font-size:8px}
  .payment-help{font-size:8px;line-height:1.35;margin:6px 0}
  .qr-wrap{gap:5px;margin:8px auto}
  .qr-wrap>div{padding:7px;border-radius:12px}
  .qr-wrap canvas,.qr-wrap img{width:210px!important;height:210px!important;max-width:210px!important}
  .qr-wrap>span{font-size:8px}
  .upi-details{padding:7px 9px;border-radius:9px;font-size:8px;gap:7px}
  .upi-details strong{font-size:8px}
  .utr-form{margin-top:8px}
  .utr-form label{font-size:8px}
  .utr-form input{height:32px;padding:7px 9px;font-size:9px}
  .utr-form .btn{margin-top:6px}
  .cash-payment-panel{margin-top:10px;padding:11px;border-radius:14px}
  .cash-payment-panel p{font-size:8px;line-height:1.35}
  .modal-card>small{display:block;margin-top:7px;font-size:7px;line-height:1.3}
}

/* v5.8 — true one-screen payment modal + compact organiser QR */
.modal{padding:10px;overflow:hidden}
.modal-card{
  width:min(560px,calc(100vw - 20px));
  max-height:calc(100vh - 20px);
  overflow:hidden;
  padding:22px 24px 16px;
}
.modal-mark{width:38px;height:38px;margin:0 auto 7px;border-radius:11px;font-size:17px}
.modal-card h2{font-size:30px;line-height:1.05;margin:1px 0 7px}
.registration-id{margin:9px auto;padding:9px 10px;font-size:20px;border-radius:11px}
.modal-card>p{font-size:8px;line-height:1.25;margin:5px 0}
.modal-card>.btn{min-height:32px;padding:7px 13px;font-size:9px}
.copy-status{min-height:14px;font-size:8px;margin-top:2px}
.payment-panel{margin-top:8px;padding:12px;border-radius:16px}
.payment-panel-head{gap:10px;align-items:center}
.payment-panel-head h3{font-size:16px;line-height:1.2;margin:2px 0 0}
.payment-badge{padding:5px 8px;font-size:8px}
.payment-help{font-size:8px;line-height:1.25;margin:5px 0}
.qr-wrap{gap:4px;margin:6px auto}
.qr-wrap>div{padding:5px;border-radius:11px;box-shadow:0 8px 22px rgba(0,0,0,.22)}
.qr-wrap canvas,.qr-wrap img{width:178px!important;height:178px!important;max-width:178px!important}
.qr-wrap>span{font-size:8px}
.upi-details{padding:7px 9px;border-radius:8px;font-size:8px;line-height:1.1}
.upi-details strong{font-size:8px}
.utr-form{margin-top:7px}
.utr-form label{font-size:8px}
.utr-form input{height:30px;padding:6px 8px;font-size:9px}
.utr-form .btn{margin-top:5px;min-height:31px;padding:7px 12px;font-size:8px}
.modal-card>small{display:block;margin-top:5px;font-size:7px;line-height:1.2}

@media(max-width:600px){
  .modal{padding:6px}
  .modal-card{width:min(360px,calc(100vw - 12px));max-height:calc(100vh - 12px);padding:16px 10px 11px;border-radius:18px}
  .modal-card h2{font-size:25px;margin:1px 0 6px}
  .registration-id{margin:7px auto;padding:8px;font-size:17px}
  .payment-panel{margin-top:7px;padding:9px;border-radius:14px}
  .payment-panel-head h3{font-size:13px}
  .payment-help{font-size:7px;margin:4px 0;line-height:1.2}
  .qr-wrap{margin:5px auto;gap:3px}
  .qr-wrap>div{padding:4px;border-radius:9px}
  .qr-wrap canvas,.qr-wrap img{width:150px!important;height:150px!important;max-width:150px!important}
  .upi-details{padding:6px 8px;font-size:7px}
  .upi-details strong{font-size:7px}
  .utr-form{margin-top:5px}
  .utr-form label{font-size:7px}
  .utr-form input{height:28px;font-size:8px}
  .utr-form .btn{min-height:29px;font-size:7px;margin-top:4px}
  .modal-card>small{font-size:6px;margin-top:4px}
}
.registration-id.pending-generation{font-size:18px;letter-spacing:.06em;color:#8fa8bd;border-style:dashed}


/* Email OTP verification */
.email-verification-block{display:grid;gap:10px;padding:16px;border:1px solid rgba(127,127,127,.18);border-radius:18px;background:rgba(127,127,127,.045)}
.email-otp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.email-otp-row .btn{margin:0}
.otp-step{display:grid;gap:10px}
.otp-step[hidden]{display:none}
.otp-timer{font-size:.82rem;opacity:.72}
#emailVerificationMsg.verified{font-weight:700}
.email-verification-block input:focus{box-shadow:0 0 0 3px rgba(120,180,255,.12)}
.email-verified-state{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid rgba(101,230,162,.24);border-radius:15px;background:linear-gradient(135deg,rgba(101,230,162,.08),rgba(101,230,162,.025));animation:emailVerifiedIn .42s var(--butter) both}.email-verified-state[hidden],#emailOtpControls[hidden]{display:none!important}
.email-verified-icon{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:rgba(101,230,162,.16);border:1px solid rgba(101,230,162,.35);color:#8ff0bc;font-weight:900;box-shadow:0 0 18px rgba(101,230,162,.12)}
.email-verified-state strong{display:block;color:#dfffee;font-size:10px;line-height:1.3;letter-spacing:.02em}
.email-verified-state span:last-child{display:block;margin-top:3px;color:#779a88;font-size:8px;line-height:1.4}
.email-verification-block input[readonly]{cursor:not-allowed;opacity:.88;border-color:rgba(101,230,162,.2);background:rgba(101,230,162,.025)}
@keyframes emailVerifiedIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

/* v6.3 — private participant accounts + email OTP login */
.nav-login-btn{margin-left:5px;border:1px solid rgba(115,220,255,.24);background:rgba(115,220,255,.08);color:#dff7ff;border-radius:999px;padding:9px 14px;font:700 9px/1.1 inherit;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform .36s var(--butter),background .42s var(--butter),border-color .36s var(--butter),box-shadow .42s var(--butter)}
.nav-login-btn:hover{transform:translateY(-2px);background:rgba(115,220,255,.13);border-color:rgba(115,220,255,.4);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.nav-login-btn.logged-in{background:rgba(120,245,186,.08);border-color:rgba(120,245,186,.26);color:#c7ffe2}
.profile-lock{width:60px;height:60px;margin:0 auto 16px;display:grid;place-items:center;border-radius:18px;background:rgba(115,220,255,.09);border:1px solid rgba(115,220,255,.18);font-size:24px}
#loggedOutProfile>strong{display:block;font-size:19px;color:#eef7ff;margin-bottom:6px}.status-card #loggedOutProfile>p{max-width:380px;margin:8px auto 18px}
.profile-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.profile-header h3{margin:5px 0 0;font-size:31px;color:#f7fbff}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.profile-grid>div{padding:14px;border:1px solid rgba(151,190,226,.1);border-radius:14px;background:rgba(151,190,226,.035)}.profile-grid span{display:block;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#6f839a;margin-bottom:5px}.profile-grid strong{display:block;color:#eff8ff;font-size:12px;line-height:1.35;word-break:break-word}
.private-vote-note{padding:11px 13px;margin:12px 0 15px;border:1px solid rgba(115,220,255,.12);border-radius:12px;background:rgba(115,220,255,.045);font-size:9px;line-height:1.5;color:#8398ad}.login-form{display:grid;gap:11px;text-align:left;margin-top:20px}.login-form .email-otp-row{display:flex;align-items:center;gap:10px}.login-form .email-otp-row .btn{flex:none}.login-modal-card>p{max-width:430px;margin:0 auto}.login-modal-card .copy-status{text-align:center}
@media(max-width:860px){.nav-login-btn{display:none}.profile-grid{grid-template-columns:1fr}.profile-header{align-items:center}.profile-header h3{font-size:25px}}
@media(max-width:600px){.login-form .email-otp-row{flex-direction:column;align-items:stretch}.login-form .email-otp-row .btn{width:100%}.profile-grid{grid-template-columns:1fr}.profile-header .btn{padding:8px 11px}}

/* v6.4 — compact private profile trigger + profile modal */
.profile-trigger{position:relative;display:inline-flex;align-items:center;gap:8px;flex:none;border:1px solid rgba(115,220,255,.2);background:rgba(115,220,255,.06);color:#dff7ff;border-radius:999px;padding:7px 10px 7px 7px;cursor:pointer;font:700 9px/1 inherit;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 24px rgba(0,0,0,.12);transition:transform .45s var(--butter),background .4s var(--butter),border-color .4s var(--butter),box-shadow .45s var(--butter)}
.profile-trigger:hover{transform:translateY(-2px) scale(1.02);background:rgba(115,220,255,.11);border-color:rgba(115,220,255,.38);box-shadow:0 14px 30px rgba(0,0,0,.2),0 0 28px rgba(115,220,255,.07)}
.profile-trigger.logged-in{background:rgba(101,230,162,.075);border-color:rgba(101,230,162,.28);color:#d8ffe8}
.profile-trigger-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#16324a,#0b192a);border:1px solid rgba(115,220,255,.2);box-shadow:inset 0 0 0 4px rgba(255,255,255,.025)}
.profile-trigger-icon svg{width:17px;height:17px}.profile-online-dot{position:absolute;right:6px;bottom:5px;width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px #081525,0 0 12px rgba(101,230,162,.75);animation:profilePulse 2.3s ease-in-out infinite}.profile-online-dot[hidden]{display:none}
.profile-modal-card{width:min(690px,100%);text-align:left;padding:30px}.profile-modal-top{display:flex;align-items:center;gap:18px;margin-bottom:22px;padding:2px 4px}.profile-avatar{width:64px;height:64px;flex:none;display:grid;place-items:center;border-radius:20px;color:var(--accent);background:linear-gradient(145deg,rgba(115,220,255,.16),rgba(142,128,255,.12));border:1px solid rgba(115,220,255,.23);box-shadow:0 16px 35px rgba(0,0,0,.25)}.profile-avatar svg{width:32px;height:32px}.profile-modal-top h2{font-size:36px;line-height:1.05;margin:4px 0 2px}.profile-modal-top p{margin:0;color:#7f95ab;font-size:10px;line-height:1.5}.profile-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.profile-detail-grid>div{padding:14px 15px;border:1px solid rgba(151,190,226,.1);border-radius:14px;background:linear-gradient(145deg,rgba(151,190,226,.045),rgba(151,190,226,.02));min-width:0}.profile-detail-grid span{display:block;margin-bottom:6px;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#6f839a}.profile-detail-grid strong{display:block;color:#eff8ff;font-size:11px;line-height:1.4;word-break:break-word}.profile-detail-highlight{grid-column:1/-1;background:linear-gradient(135deg,rgba(115,220,255,.08),rgba(142,128,255,.06))!important;border-color:rgba(115,220,255,.2)!important}.profile-detail-highlight strong{font:800 20px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;color:#e8fbff}.profile-modal-actions{display:flex;justify-content:flex-end;margin-top:17px}.profile-modal-actions .btn{min-width:100px}
@keyframes profilePulse{50%{transform:scale(.78);opacity:.72}to{transform:scale(1);opacity:1}}
@media(max-width:860px){.profile-trigger{margin-left:auto}.profile-trigger #profileTriggerLabel{display:none}.profile-trigger{padding:6px}.profile-trigger-icon{width:34px;height:34px}.profile-modal-card{padding:24px 18px}.profile-detail-grid{grid-template-columns:1fr}.profile-detail-highlight{grid-column:auto}.profile-modal-top h2{font-size:30px}}
@media(max-width:560px){.profile-modal-top{align-items:flex-start;gap:12px}.profile-avatar{width:52px;height:52px;border-radius:16px}.profile-avatar svg{width:26px;height:26px}.profile-modal-top h2{font-size:27px}.profile-detail-highlight strong{font-size:16px}.profile-modal-card{max-height:calc(100vh - 24px);overflow:auto}}


/* v6.5 — premium secure login experience */
.login-modal-card{width:min(900px,calc(100vw - 30px));padding:0;overflow:hidden;text-align:left;background:#091524;border:1px solid rgba(129,203,255,.18);box-shadow:0 48px 120px rgba(0,0,0,.62),0 0 0 1px rgba(129,203,255,.04);border-radius:28px}
.login-modal-card .modal-close{z-index:4;right:14px;top:14px;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.045);backdrop-filter:blur(10px);font-size:24px;color:#a9bfd2}
.login-shell{display:grid;grid-template-columns:36% 64%;min-height:530px}
.login-rail{position:relative;overflow:hidden;padding:38px 34px;background:radial-gradient(circle at 20% 10%,rgba(89,195,255,.18),transparent 34%),linear-gradient(160deg,#102b45 0%,#0a1a2c 58%,#081321 100%);border-right:1px solid rgba(129,203,255,.12)}
.login-rail::after{content:"";position:absolute;inset:auto -60px -80px auto;width:230px;height:230px;border-radius:50%;border:1px solid rgba(129,203,255,.12);box-shadow:0 0 0 28px rgba(129,203,255,.028),0 0 0 58px rgba(129,203,255,.02)}
.login-brand-mark{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:rgba(5,15,27,.34);border:1px solid rgba(151,222,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px rgba(0,0,0,.22);margin-bottom:23px}
.login-brand-mark img{width:40px;height:40px;object-fit:contain}
.login-rail-kicker{display:block;color:#74d8ff;font-size:8px;letter-spacing:.18em;font-weight:800}
.login-rail h3{font-size:31px;line-height:1.06;color:#f3f9ff;margin:18px 0 10px;letter-spacing:-.025em}
.login-rail h3 em{color:#70d9ff;font-style:normal}
.login-rail>p{max-width:250px;margin:0;color:#86a0b6;font-size:10px;line-height:1.65}
.login-trust-list{display:grid;gap:11px;margin-top:34px;font-size:9px;color:#b9cedf}
.login-trust-list span{display:flex;align-items:center;gap:9px}
.login-trust-list i{width:20px;height:20px;border-radius:7px;display:grid;place-items:center;background:rgba(102,226,178,.09);border:1px solid rgba(102,226,178,.18);color:#76e8b7;font-style:normal;font-size:10px}
.login-panel{padding:46px 48px 34px;background:linear-gradient(180deg,rgba(13,29,46,.98),rgba(8,18,31,.98))}
.login-panel-head{padding-right:25px}
.login-kicker{display:inline-flex;align-items:center;gap:8px;color:#71d8ff;font-size:9px;font-weight:800;letter-spacing:.14em}
.login-kicker i{width:6px;height:6px;border-radius:50%;background:#76dcff;box-shadow:0 0 14px rgba(118,220,255,.7)}
.login-panel h2{font-size:42px;line-height:1;margin:14px 0 10px;letter-spacing:-.04em;color:#f6fbff}
.login-panel-head p{max-width:490px;margin:0;color:#8198ad;font-size:10px;line-height:1.65}
.login-steps{position:relative;display:flex;align-items:center;gap:8px;margin:30px 0 24px;color:#61778c;font-size:8px;font-weight:800;letter-spacing:.14em}
.login-steps span{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(137,181,211,.16);background:rgba(255,255,255,.025)}
.login-steps span.active{color:#06111d;border-color:#77dcff;background:#77dcff;box-shadow:0 0 18px rgba(119,220,255,.2)}
.login-steps b{width:34px;height:1px;background:linear-gradient(90deg,rgba(119,220,255,.45),rgba(119,220,255,.08))}
.login-steps em{font-style:normal;margin-left:2px;color:#62798d}
.login-steps strong{color:#88dfff;font-weight:700;margin:0 3px}
.login-form{display:grid;gap:14px;text-align:left;margin-top:0}
.login-field{display:grid;gap:8px}
.login-field>span{font-size:9px;text-transform:uppercase;letter-spacing:.11em;color:#a8bdd0;font-weight:800}
.login-input-wrap{height:54px;position:relative;display:flex;align-items:center;border-radius:15px;border:1px solid rgba(138,184,214,.15);background:rgba(255,255,255,.035);transition:border-color .35s var(--butter),box-shadow .35s var(--butter),background .35s var(--butter),transform .35s var(--butter)}
.login-input-wrap:focus-within{border-color:rgba(112,216,255,.58);background:rgba(112,216,255,.045);box-shadow:0 0 0 4px rgba(112,216,255,.065),0 14px 34px rgba(0,0,0,.16)}
.login-input-wrap svg{width:18px;height:18px;margin-left:16px;color:#6e8aa0;flex:none}
.login-input-wrap:focus-within svg{color:#72dcff}
.login-input-wrap input{width:100%;height:100%;border:0;outline:0;background:transparent;color:#f0f7fd;font:600 13px/1 inherit;padding:0 16px 0 11px}
.login-input-wrap input::placeholder{color:#5f7489}
.login-send-row{display:flex;align-items:center;gap:12px}
.login-send-btn,.verify-login-btn{min-height:52px;border-radius:15px;flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 17px;font-size:10px;letter-spacing:.04em}
.login-send-btn b,.verify-login-btn b{font-size:19px;font-weight:500;transition:transform .3s var(--butter)}
.login-send-btn:hover b,.verify-login-btn:hover b{transform:translateX(4px)}
.login-send-row .otp-timer{min-width:88px;text-align:right;color:#71879b;font-size:9px}
.login-security-note{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:12px;border:1px solid rgba(126,166,194,.1);background:rgba(126,166,194,.028);color:#6d8498;font-size:8px;line-height:1.5}
.login-security-note i{width:17px;height:17px;border-radius:6px;display:grid;place-items:center;flex:none;background:rgba(111,216,255,.08);border:1px solid rgba(111,216,255,.13);color:#77dcff;font-style:normal}
.login-otp-step{gap:12px;padding-top:4px;animation:loginStepIn .5s var(--butter) both}
.otp-input-wrap input{text-align:left;letter-spacing:.32em;font-size:15px;font-variant-numeric:tabular-nums}
.login-panel .copy-status{min-height:18px;font-size:9px;line-height:1.45;color:#79dfff;text-align:left;margin-top:2px}
.login-panel-foot{display:flex;align-items:flex-start;gap:9px;margin-top:24px;padding-top:18px;border-top:1px solid rgba(138,184,214,.09);color:#5f7589;font-size:8px;line-height:1.5}
.shield-mini{width:19px;height:19px;border-radius:7px;display:grid;place-items:center;flex:none;background:rgba(102,226,178,.07);border:1px solid rgba(102,226,178,.13);color:#71d7ac}
@keyframes loginStepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:760px){.login-shell{grid-template-columns:1fr}.login-rail{display:none}.login-panel{padding:36px 24px 24px}.login-panel h2{font-size:35px}.login-modal-card{width:min(520px,calc(100vw - 18px));border-radius:23px}.login-send-row{flex-direction:column;align-items:stretch}.login-send-row .otp-timer{text-align:left;min-width:0;padding-left:2px}.login-panel-foot{margin-top:18px}}
@media(max-width:430px){.login-panel{padding:31px 18px 20px}.login-panel h2{font-size:31px}.login-panel-head p{font-size:9px}.login-steps{margin:24px 0 20px}.login-input-wrap{height:50px}.login-send-btn,.verify-login-btn{min-height:49px}.login-modal-card .modal-close{top:9px;right:9px;width:34px;height:34px}}