:root, [data-theme="dark"]{--bg:#0f1216;--panel:#171c22;--panel2:#1e242c;--text:#eef2f5;--muted:#9fb0bc;--line:#2a333d;--card:#171c22}
[data-theme="light"]{--bg:#f6f3ee;--panel:#ffffff;--panel2:#fbf8f3;--text:#1d252c;--muted:#5d6d78;--line:#e2ddd3;--card:#ffffff}
*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--accent)} .hidden{display:none!important}
.topbar{position:sticky;top:0;z-index:20;display:flex;gap:16px;align-items:center;padding:12px max(20px,calc((100% - 1320px)/2 + 22px));background:var(--panel);border-bottom:1px solid var(--line)}
.brand{font-size:24px;font-weight:800;white-space:nowrap}.brand em{color:var(--accent);font-style:normal}.logo{margin-right:4px}
.search{flex:1;max-width:520px}.search input{width:100%;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--text)}
.topnav{display:flex;gap:12px;align-items:center}.topnav a{color:var(--muted);text-decoration:none;font-weight:600}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:10px;padding:9px 14px;font-weight:700}
button.primary{background:var(--accent);color:#14100a;border-color:transparent} button.block{width:100%;margin-top:14px}
.user-pill{background:var(--accent2);color:#fff;padding:8px 12px;border-radius:999px;font-weight:800}
.layout{display:grid;grid-template-columns:270px 1fr;min-height:calc(100vh - 60px);max-width:1320px;margin:0 auto;width:100%}
.sidebar{padding:20px;border-right:1px solid var(--line);background:var(--panel)}
.sidebar h3{margin:0 0 10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:12px}
.cats{list-style:none;margin:0;padding:0;display:grid;gap:4px}.cats li{padding:9px 11px;border-radius:10px;cursor:pointer;display:flex;justify-content:space-between;gap:8px}
.cats li:hover,.cats li.active{background:var(--panel2);outline:1px solid var(--line)} .cats small{color:var(--muted)}
.sponsor-card{margin-top:20px;padding:16px;border:1px dashed var(--accent);border-radius:14px;background:var(--panel2)} .sponsor-tag{font-size:11px;letter-spacing:.1em;color:var(--accent);font-weight:800}
.side-note{color:var(--muted);font-size:13px}
.main{padding:26px;max-width:1150px}
.hero h1{font-size:42px;line-height:1.05;margin:0 0 10px}.hero h1 span{color:var(--accent)} .hero p{color:var(--muted);font-size:18px;max-width:680px}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.stats span{background:var(--panel);border:1px solid var(--line);padding:7px 12px;border-radius:999px;font-weight:700}
.featured{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}.featured-card{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)} .featured-card strong{display:block;font-size:19px;margin:4px 0}.featured-card small{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:16px}
.room-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:transform .08s ease,border-color .08s ease}
.room-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.room-card h3{margin:2px 0;font-size:19px}.room-card p{color:var(--muted);margin:0;flex:1}
.cat-tag{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent2)}
.live{font-size:12px;font-weight:800;color:#ff5d5d}.live::before{content:"● "}
.meta{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}.tags{color:var(--muted);font-size:12px}
.join{width:100%}
.empty{color:var(--muted)} .rules{margin-top:34px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.chat{position:fixed;inset:0;z-index:30;background:var(--bg);display:flex;flex-direction:column}
.chat-head{display:flex;gap:16px;align-items:center;padding:14px 18px;background:var(--panel);border-bottom:1px solid var(--line)} .chat-head h2{margin:0}
.members{margin-left:auto;color:var(--muted);font-size:13px;max-width:40%;text-align:right}
.video-bar{padding:14px 18px;background:var(--panel2);border-bottom:1px solid var(--line);flex:1 1 auto;overflow-y:auto;min-height:0}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,300px));gap:12px;justify-content:center}
.video-tile{position:relative;background:#000;border:1px solid var(--line);border-radius:14px;overflow:hidden;aspect-ratio:16/9;display:grid;place-items:center;color:var(--muted);text-align:center;padding:10px}
.video-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-label{position:absolute;left:10px;bottom:8px;background:rgba(0,0,0,.65);color:#fff;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700}
.video-controls{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}.video-note{color:var(--muted);font-size:13px}
.messages{flex:0 1 auto;height:30vh;min-height:140px;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:10px}
.msg{background:var(--panel);border:1px solid var(--line);padding:10px 13px;border-radius:12px;max-width:760px}.msg b{color:var(--accent)} .msg small{color:var(--muted);margin-left:8px}
.chat-form{display:flex;gap:10px;padding:14px;background:var(--panel);border-top:1px solid var(--line)} .chat-form input{flex:1;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--text)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:40}.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;width:min(460px,92vw)} .modal-box input,.modal-box select{width:100%;padding:11px;margin:7px 0 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--text)} .error{color:#ff7a7a;min-height:18px}
footer{padding:22px max(22px,calc((100% - 1320px)/2 + 22px));text-align:center;color:var(--muted);border-top:1px solid var(--line)}
@media(max-width:820px){.layout{grid-template-columns:1fr}.sidebar{border-right:0}.cats{display:flex;overflow:auto}.cats li{white-space:nowrap}.featured{grid-template-columns:1fr}.hero h1{font-size:32px}.search{display:none}}

.plus{margin-top:34px;background:var(--panel);border:1px dashed var(--accent);border-radius:16px;padding:20px}
.plus h2{margin:6px 0 8px}.plus p{color:var(--muted)} .plus p strong{color:var(--text)}
.plus-perks{list-style:none;margin:14px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.plus-perks li{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.plus-form{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.plus-form input{flex:1;min-width:220px;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--text)}
.plus-msg{margin-top:10px;min-height:18px;color:var(--accent2);font-weight:700}
@media(max-width:820px){.plus-perks{grid-template-columns:1fr}}

/* Accent palettes — user-selectable, persisted. --accent: primary; --accent2: secondary */
[data-theme="dark"][data-accent="forest"]{--accent:#43b968;--accent2:#d98e4a}
[data-theme="light"][data-accent="forest"]{--accent:#1d8a44;--accent2:#b06f28}
[data-theme="dark"][data-accent="ocean"]{--accent:#38a1d6;--accent2:#43b968}
[data-theme="light"][data-accent="ocean"]{--accent:#1668a0;--accent2:#1d8a44}
[data-theme="dark"][data-accent="ember"]{--accent:#e06428;--accent2:#38a1d6}
[data-theme="light"][data-accent="ember"]{--accent:#b84a14;--accent2:#1668a0}
[data-theme="dark"][data-accent="plum"]{--accent:#9b6dd6;--accent2:#35b5b5}
[data-theme="light"][data-accent="plum"]{--accent:#7440b8;--accent2:#0f7d7d}
[data-theme="dark"][data-accent="slate"]{--accent:#7d94a8;--accent2:#43b968}
[data-theme="light"][data-accent="slate"]{--accent:#47657c;--accent2:#1d8a44}
[data-theme="dark"][data-accent="amber"]{--accent:#f0a840;--accent2:#3fb96f}
[data-theme="light"][data-accent="amber"]{--accent:#d97706;--accent2:#16834a}
.swatches{display:inline-flex;gap:6px;align-items:center}
.swatch{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);padding:0;cursor:pointer}
.swatch.active{border-color:var(--text);transform:scale(1.15)}
.gate{position:fixed;inset:0;background:rgba(0,0,0,.78);display:grid;place-items:center;z-index:60}
.gate-box{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;width:min(520px,94vw);max-height:92vh;overflow:auto}
.gate-box h2{margin-top:0}.gate-rules{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:14px 0;max-height:210px;overflow:auto;font-size:14px}
.gate-rules li{margin:5px 0}
.gate-check{display:flex;gap:10px;align-items:flex-start;background:var(--panel2);border:1px solid var(--accent);border-radius:12px;padding:12px;margin:12px 0;cursor:pointer}
.gate-actions{display:flex;gap:10px}.gate-actions .primary{flex:1}
button:disabled{opacity:.45;cursor:not-allowed}
.age-badge{background:#8c2b2b;color:#fff;border-radius:999px;padding:2px 9px;font-weight:800;font-size:12px}

.modal-box{position:relative}
.modal-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;padding:0;font-size:15px;line-height:1}
.btn-row{display:flex;gap:10px;margin-top:14px}.btn-row .primary{flex:1}.btn-row button[type="button"]{padding:9px 16px}
.lock-badge{font-size:12px;font-weight:800;color:var(--accent)}

.video-tile{cursor:pointer}
.video-grid.spotlight{grid-template-columns:repeat(auto-fill,minmax(120px,160px));justify-content:center}
.video-grid.spotlight .video-tile.stage{grid-column:1/-1;height:min(50vh,480px);aspect-ratio:auto;outline:2px solid var(--accent)}
.fs-btn{position:absolute;top:8px;right:8px;z-index:5;background:rgba(0,0,0,.62);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:8px;padding:4px 10px;cursor:pointer;font-size:14px}