/* same as v8 */ 
:root{
  --bg: #0b0b10;
  --card: #14141b;
  --text: #e8e8ef;
  --muted: #a0a1b3;
  --accent: #7c5cff;
  --live: #ff3b3b;
  --border: #242434;
  --ok: #22c55e;
  --danger: #ef4444;
  --white: #ffffff;

  --blue: #2563eb;
  --green: #22c55e;
  --purple: #8b5cf6;
  --brown: #8B4513;
  --red: #ef4444;
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0;
  background: var(--bg); color: var(--text);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
}

.container{ width:100%; max-width:1024px; padding:0 20px; margin:0 auto; }

.site-header{
  border-bottom:1px solid var(--border); position:sticky; top:0;
  backdrop-filter: blur(8px); background: color-mix(in oklab, var(--bg) 85%, transparent); z-index:110;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; }

.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; font-size:18px; }
.brand .dot{ width:14px; height:14px; border-radius:50%; background: linear-gradient(135deg, var(--accent), #a48bff); box-shadow:0 0 20px #7c5cff88; }
.brand-text{ color:var(--text); }

.header-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.badge-live{ font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:#191923; }
.badge-live::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--live); box-shadow:0 0 10px var(--live); vertical-align:middle; }

.status-badge{ font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); color:var(--white); user-select:none; transition:filter .2s ease; }
.status-badge.on{ background:var(--ok); }
.status-badge.off{ background:var(--danger); }
.status-badge:hover{ filter:brightness(1.05); }

.points-btn, .submit-btn{
  font-size:12px; padding:6px 12px; border-radius:999px; border:1px solid var(--border);
  background:#20202a; color:var(--white); cursor:pointer;
}
.points-btn.disabled, .points-btn:disabled, .submit-btn:disabled{ opacity:.6; cursor:not-allowed; }

.hero{ padding:40px 0 20px; }
h1{ margin:0 0 8px 0; font-size: clamp(24px, 3.5vw, 40px); }
.sub{ margin:0 0 20px 0; color: var(--muted); }

.video-wrap{ position:relative; width:100%; max-width:920px; margin:16px auto; background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; aspect-ratio:16/9; }
.video{ position:absolute; inset:0; width:100%; height:100%; display:block; border:0; }

/* Banner overlay */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:120; }
.overlay.hidden{ display:none; }
.banner{ width:300px; height:200px; position:relative; border-radius:16px; display:flex; align-items:center; justify-content:center; text-align:center; padding:10px; color:var(--white); font-size:40px; font-weight:700; }
.banner-v1{ background:var(--blue); } .banner-v2{ background:var(--green); } .banner-v3{ background:var(--purple); } .banner-v4{ background:var(--brown); } .banner-v5{ background:var(--red); }
.banner-close{ position:absolute; top:8px; right:10px; width:28px; height:28px; border-radius:6px; border:none; background:rgba(255,255,255,.2); color:var(--white); font-size:20px; line-height:26px; cursor:pointer; }
.banner-close:hover{ background:rgba(255,255,255,.3); }
.banner-title{ transform: translateY(-6px); }

.alt-link{ text-align:center; color:var(--muted); }
.alt-link a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }

.site-footer{ border-top:1px solid var(--border); margin-top:40px; }
.site-footer .container{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; font-size:14px; color:var(--muted); }
.sp-link{ color:var(--text); border:1px solid var(--border); padding:6px 10px; border-radius:8px; text-decoration:none; }

/* Login gate */
.login-overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(37,99,235,.25); backdrop-filter: blur(10px); z-index:200; }
.login-overlay.hidden{ display:none; }
.login-card{ width:min(420px, 92%); background:#0f1220; border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.login-card h2{ margin:0 0 6px; }
.login-sub{ margin:0 0 14px; color:var(--muted); }
.login-form{ display:flex; gap:10px; }
.login-form input{ flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#171a2a; color:var(--text); outline:none; }
.login-btn{ padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:var(--blue); color:var(--white); cursor:pointer; }
.login-msg{ margin:10px 0 0; color:var(--red); min-height:1.2em; }

@media (max-width: 640px){ .site-footer .container{ flex-direction:column; gap:8px; } }