:root {
  --bg: #06100d;
  --surface: rgba(11, 25, 21, 0.74);
  --surface-2: rgba(15, 31, 27, 0.86);
  --surface-3: rgba(20, 39, 34, 0.94);
  --line: rgba(130, 255, 210, 0.1);
  --text: #effcf7;
  --muted: #9db6ae;
  --primary: #18c48a;
  --primary-2: #58f2ae;
  --accent: #7de2c5;
  --danger: #ff7b7b;
  --radius: 28px;
  --shadow: 0 24px 60px rgba(0,0,0,.34);
  --glow: 0 0 0 1px rgba(88,242,174,.12), 0 0 44px rgba(24,196,138,.12);
  --grid: rgba(125, 226, 197, 0.06);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Satoshi', sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(24,196,138,.2), transparent 22%),
    radial-gradient(circle at 85% 0%, rgba(88,242,174,.16), transparent 20%),
    linear-gradient(180deg, #06100d 0%, #081512 45%, #07110e 100%);
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: radial-gradient(circle at center, black 40%, transparent 90%); opacity: .6;
}
.preloader {
  position: fixed; inset: 0; z-index: 999; display:grid; place-items:center;
  background: radial-gradient(circle at center, rgba(24,196,138,.08), transparent 30%), linear-gradient(180deg,#06100d,#081512);
  transition: opacity .6s ease, visibility .6s ease;
}
.preloader.is-hidden { opacity: 0; visibility: hidden; }
.preloader-core {
  display:grid; gap:18px; justify-items:center; text-align:center;
}
.preloader-ring {
  width:84px; height:84px; border-radius:50%; border:1px solid rgba(88,242,174,.16); position:relative;
  box-shadow: 0 0 0 8px rgba(24,196,138,.04), 0 0 40px rgba(24,196,138,.12);
}
.preloader-ring::before, .preloader-ring::after {
  content:""; position:absolute; inset:8px; border-radius:50%; border-top:2px solid var(--primary-2); animation: spin 1.2s linear infinite;
}
.preloader-ring::after { inset:18px; border-top-color: var(--accent); animation-direction: reverse; animation-duration: 1.8s; }
@keyframes spin { to { transform: rotate(360deg); } }
a { color: inherit; text-decoration: none; }
img { display:block; max-width:100%; }
.container { width: min(1260px, calc(100% - 32px)); margin: 0 auto; position: relative; z-index: 1; }
.orb { position: fixed; width: 34vw; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .13; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(88,242,174,.9), rgba(24,196,138,.28), transparent 65%); transform: translate3d(var(--tx, 0), var(--ty, 0), 0); transition: transform 240ms ease-out; }
.orb.one { top: -12vw; left: -8vw; }
.orb.two { right: -10vw; top: 18vh; background: radial-gradient(circle, rgba(125,226,197,.8), rgba(24,196,138,.2), transparent 68%); }
.site-nav { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding: 20px 0 10px; position: sticky; top: 0; z-index: 40; background: linear-gradient(180deg, rgba(6,16,13,.88), rgba(6,16,13,.52)); backdrop-filter: blur(18px); }
.brand { display:flex; align-items:center; gap:14px; }
.brand-mark { width:58px; height:58px; border-radius:20px; display:grid; place-items:center; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:#032018; box-shadow: 0 16px 34px rgba(24,196,138,.22); transform: translateZ(0); }
.brand-mark svg { width:30px; height:30px; }
.brand small { display:block; color: var(--muted); letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; }
.brand strong { font-size:1.02rem; }
.nav-links, .nav-actions, .hero-actions, .button-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.nav-links a, .viewer-chip { padding: 11px 16px; border-radius: 999px; border:1px solid var(--line); background: rgba(255,255,255,.02); transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.nav-links a:hover, .nav-links a.is-active { transform: translateY(-2px); background: rgba(24,196,138,.12); border-color: rgba(88,242,174,.35); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 18px; border-radius:999px; font-weight:700; border:1px solid transparent; cursor:pointer; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.btn:hover { transform: translateY(-2px) scale(1.01); }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:#04231a; box-shadow: 0 16px 32px rgba(24,196,138,.18); }
.btn-secondary { background: rgba(255,255,255,.02); border-color: var(--line); color: var(--text); }
.btn-danger { background: rgba(255,123,123,.14); border-color: rgba(255,123,123,.24); color:#ffd0d0; }
.hero, .hero-stack { display:grid; grid-template-columns: 1.08fr .92fr; gap:22px; align-items:stretch; padding: 34px 0 24px; }
.card, .panel, .feature, .suggestion-card, .search-result, .admin-item, .program-card, .social-card { background: linear-gradient(180deg, rgba(17, 35, 30, 0.78), rgba(9, 22, 19, 0.8)); border:1px solid var(--line); backdrop-filter: blur(18px); box-shadow: var(--shadow), var(--glow); border-radius: var(--radius); }
.card, .panel, .feature, .social-card, .program-card, .admin-item { padding: 30px; }
.eyebrow { color:#bdfae2; text-transform:uppercase; letter-spacing:.18em; font-size:.75rem; }
.hero-title { margin:12px 0 14px; font-family:'Cabinet Grotesk', sans-serif; font-size: clamp(3rem, 6vw, 6.1rem); line-height:.92; }
.hero-title .accent { color: var(--primary-2); text-shadow: 0 0 18px rgba(88,242,174,.15); }
.section-title { margin:10px 0 0; font-family:'Cabinet Grotesk', sans-serif; font-size: clamp(1.85rem, 3vw, 2.8rem); }
.muted { color: var(--muted); }
.grid-3, .social-grid, .community-grid, .about-grid, .admin-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; padding: 10px 0 38px; }
.vote-layout, .program-grid { display:grid; grid-template-columns: 410px 1fr; gap:22px; padding-bottom: 42px; }
.sticky-col { position: sticky; top: 92px; align-self:start; }
.field, .search-box, .search-results, .suggestion-list, .timeline, .lane, .spotlight { display:grid; gap:14px; }
.field input, .field textarea { width:100%; border:1px solid var(--line); background: rgba(255,255,255,.03); color:var(--text); padding:14px 16px; border-radius:18px; outline:none; transition: border-color .25s ease, box-shadow .25s ease; }
.field input:focus, .field textarea:focus { border-color: rgba(88,242,174,.45); box-shadow: 0 0 0 4px rgba(24,196,138,.1); }
.field textarea { min-height:120px; resize:vertical; }
.search-results { max-height: 430px; overflow:auto; }
.search-result { display:grid; grid-template-columns:76px 1fr auto; gap:14px; padding:12px; transition: transform .28s ease, border-color .28s ease; }
.search-result:hover, .suggestion-card:hover, .feature:hover, .social-card:hover, .program-card:hover, .admin-item:hover { transform: translateY(-4px); border-color: rgba(88,242,174,.28); }
.search-result img, .suggestion-card img { object-fit:cover; border-radius:16px; background:#102521; }
.search-result img { width:76px; height:96px; }
.suggestion-card img { width:116px; height:150px; }
.pick-btn, .submit-btn, .vote-btn { border:none; border-radius:16px; padding:12px 16px; font-weight:800; cursor:pointer; background:#ecfdf5; color:#052e23; transition: transform .25s ease, box-shadow .25s ease; }
.pick-btn:hover, .submit-btn:hover, .vote-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(24,196,138,.16); }
.pick-btn[disabled], .submit-btn[disabled], .vote-btn[disabled] { opacity:.55; cursor:not-allowed; }
.selected-box, .status-box, .empty-box { margin-top:14px; padding:14px; border-radius:18px; border:1px solid rgba(52,211,153,.18); background: rgba(19,185,129,.08); }
.status-box { display:none; }
.status-box.show { display:block; animation: fadeUp .4s ease; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.suggestion-card { padding:18px; display:grid; grid-template-columns:116px 1fr auto; gap:18px; }
.vote-col { min-width:132px; text-align:right; }
.tag, .pill, .live-dot { display:inline-flex; padding:8px 12px; border-radius:999px; background: rgba(19,185,129,.12); border:1px solid rgba(19,185,129,.22); color:#d1fae5; font-size:.9rem; }
.live-dot { align-items:center; gap:10px; }
.live-dot::before { content:""; width:10px; height:10px; border-radius:50%; background:#58f2ae; box-shadow:0 0 0 0 rgba(88,242,174,.6); animation: pulse 1.8s infinite; }
.meta { color: var(--muted); font-size:.94rem; }
.footer { padding: 24px 0 42px; color: var(--muted); }
.slot, .embed-box { display:grid; gap:10px; padding:18px; border-radius:22px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05); }
.reveal { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: translateY(0) scale(1); }
.floaty { animation: floaty 7s ease-in-out infinite; }
.glowline { position: relative; overflow: hidden; }
.glowline::after { content:""; position:absolute; inset:auto -30% 0; height:1px; background: linear-gradient(90deg, transparent, rgba(88,242,174,.7), transparent); animation: sweep 5.5s linear infinite; }
.live-shell { position: relative; min-height: 460px; overflow: hidden; }
.live-shell::before { content:""; position:absolute; inset:auto -10% 20% auto; width:220px; height:220px; border-radius:50%; background: radial-gradient(circle, rgba(88,242,174,.18), transparent 70%); filter: blur(12px); }
.live-header { display:flex; justify-content:space-between; gap:14px; align-items:center; flex-wrap:wrap; }
.twitch-frame { margin-top:16px; border-radius:24px; overflow:hidden; border:1px solid rgba(88,242,174,.14); background:#0a1412; min-height:320px; }
.twitch-frame iframe { width:100%; height:100%; min-height:320px; border:0; display:block; }
.live-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.live-metric { padding:14px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05); }
.nav-progress { position: fixed; inset: 0 auto auto 0; height: 3px; width: var(--scroll, 0%); background: linear-gradient(90deg, var(--primary), var(--primary-2)); z-index: 60; box-shadow: 0 0 20px rgba(24,196,138,.4); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(88,242,174,.55)} 70%{box-shadow:0 0 0 10px rgba(88,242,174,0)} 100%{box-shadow:0 0 0 0 rgba(88,242,174,0)} }
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }
@keyframes sweep { from{ transform: translateX(-20%);} to{ transform: translateX(120%);} }
@keyframes fadeUp { from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform: translateY(0);} }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } }
@media (max-width: 1040px) { .hero, .hero-stack, .vote-layout, .program-grid, .grid-3, .social-grid, .community-grid, .about-grid, .admin-grid, .suggestion-card, .live-strip { grid-template-columns:1fr; } .sticky-col { position: static; } .vote-col { text-align:left; } }