:root{
  --bg:#0b1020; --card:#121936; --muted:#A7B3CC; --fg:#e6e8f0;
  --accent1:#7C3AED; --accent2:#06B6D4; --accent3:#EC4899;
  --pill:#FF1744; --pill-twitch:#9146FF; --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 500px at 70% -10%, rgba(124,58,237,.15), transparent), var(--bg); color:var(--fg); font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:20px}
nav{position:sticky;top:0;background:rgba(11,16,32,.7); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,255,255,.08); z-index:10}
.nav-inner{display:flex;align-items:center;gap:16px;padding:12px 20px}
nav img{height:38px;border-radius:10px}
nav .grow{flex:1}
nav .links a{margin:0 10px;opacity:.9}
nav .cta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{padding:10px 14px;border-radius:14px;background:linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3)); color:white; box-shadow: var(--shadow); border:none; cursor:pointer; font-weight:700}
.btn.secondary{background:#1e264b}
.live-pill{display:inline-flex;align-items:center;gap:8px;background:var(--pill); color:#fff; padding:6px 10px;border-radius:999px;font-weight:800;letter-spacing:.5px;box-shadow:var(--shadow)}
.twitch-pill{display:inline-flex;align-items:center;gap:8px;background:var(--pill-twitch); color:#fff; padding:6px 10px;border-radius:999px;font-weight:800;letter-spacing:.5px;box-shadow:var(--shadow)}
.section{padding:48px 20px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero .card{background:linear-gradient(180deg, rgba(124,58,237,.14), rgba(6,182,212,.06)); border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:24px; box-shadow: var(--shadow)}
h1{font-size:clamp(34px, 3.8vw, 52px);margin:0 0 8px}
.subtitle{color:var(--muted);font-size:clamp(14px,1.6vw,18px)}
.grid{display:grid;gap:18px}
.episodes{grid-template-columns: repeat(auto-fit, minmax(280px,1fr))}
.card{background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:18px; box-shadow: var(--shadow)}
.card h3{margin:0 0 6px;font-size:20px}
.badge{display:inline-block;border:1px solid rgba(255,255,255,.2); padding:4px 8px; border-radius:999px; color:var(--muted); font-size:12px;margin-right:6px}
.topic-filter{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.topic-filter button{background:#1b2246;border:1px solid rgba(255,255,255,.1);color:#E5E7EB;border-radius:999px;padding:8px 12px;cursor:pointer}
.topic-filter button.active{outline:2px solid var(--accent2)}
.hosts{grid-template-columns: repeat(auto-fit, minmax(220px,1fr))}
.host{display:flex;gap:14px;align-items:flex-start}
.host img{width:56px;height:56px;border-radius:14px;background:#202a63;border:1px solid rgba(255,255,255,.08)}
.host .name{font-weight:800}
footer{border-top:1px solid rgba(255,255,255,.08); padding:24px 20px; color:var(--muted); font-size:14px}
form{display:grid;gap:12px}
input, textarea{background:#12193a;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;color:var(--fg);}
label{font-size:14px;color:var(--muted)}
small.muted{color:var(--muted); display:block; margin-top:6px}
.embed{border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.08)}
.schedule{display:grid; gap:8px}
.schedule .row{display:flex; justify-content:space-between; background:#12193a; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.08)}
@media (max-width: 900px){ .hero{grid-template-columns:1fr} nav .links{display:none} }

/* --- Twitch Modal --- */
.hidden{display:none !important}
.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter: blur(2px); display:flex; align-items:center; justify-content:center; z-index:50}
.modal{background:#0e1430; border:1px solid rgba(255,255,255,.12); border-radius:18px; width:min(960px, 92vw); box-shadow: 0 18px 60px rgba(0,0,0,.55); overflow:hidden}
.modal header{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08)}
.modal header h3{margin:0; font-size:18px}
.modal .modal-body{padding:0}
.modal .close-btn{background:#1e264b; color:#e6e8f0; border:none; border-radius:10px; padding:8px 10px; cursor:pointer}
.modal .player-wrap{width:100%; height:56.25vw; max-height:540px}
@media (min-width: 900px){ .modal .player-wrap{height:540px} }
.twitch-pill.buttony{cursor:pointer}