:root { --bg:#000; --card:#111; --text:#fff; --muted:#bbb; --border:#333; --brand:#7c3aed; --accent:#22d3ee; }
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 system-ui}
.wrap{max-width:1100px;margin:0 auto;padding:20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;color:var(--text)}
button,input,select,textarea{background:#1a1a1a;border:1px solid var(--border);border-radius:10px;padding:10px;color:var(--text)}
.muted{color:var(--muted)}
.grid{display:grid;grid-template-columns:1fr 360px;gap:16px}
.slot{display:flex;justify-content:space-between;padding:10px;border:1px solid var(--border);border-radius:10px;margin:8px 0}
.btn{cursor:pointer}
.primary{background:linear-gradient(90deg, rgba(124,58,237,.35), rgba(34,211,238,.2));border-color:#555}
stream{width:100%;height:100%}
/* Live grid */
.grid-live{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.thumb{position:relative;aspect-ratio:16/9;background:#000;display:grid;place-items:center;cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.live{position:absolute;top:8px;left:8px;background:#ef4444;color:#fff;border-radius:999px;padding:4px 8px;font-size:12px}
/* Group room */
.room{display:grid;grid-template-columns:1fr 320px;gap:14px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.tile{position:relative;background:#0d0d0d;border:1px solid #222;border-radius:12px;overflow:hidden;min-height:140px;display:grid;place-items:center}
.badge{position:absolute;top:8px;left:8px;background:#7c3aed;color:#fff;padding:3px 8px;border-radius:999px;font-size:12px}
.avatar{width:64px;height:64px;border-radius:50%;background:#1f1f1f;border:1px solid #333;display:grid;place-items:center;font-weight:700}
.label{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.5);padding:4px 8px;border-radius:8px;font-size:12px}
.chat{background:#0b0b0b;border:1px solid #222;border-radius:12px;display:flex;flex-direction:column;min-height:300px;max-height:70vh}
.chat-header{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid #1a1a1a}
.participants{display:flex;gap:6px;flex-wrap:wrap}
.part-pill{display:flex;gap:6px;align-items:center;background:#141414;border:1px solid #222;border-radius:999px;padding:4px 8px;font-size:12px}
.part-pill .ball{width:18px;height:18px;border-radius:50%;background:#1f1f1f;border:1px solid #333;display:grid;place-items:center}
.chat-log{flex:1;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.msg{display:flex;gap:8px;align-items:flex-start}
.msg .ball{width:28px;height:28px;border-radius:50%;background:#1f1f1f;border:1px solid #333;display:grid;place-items:center;font-size:12px}
.msg .bubble{background:#141414;border:1px solid #222;border-radius:12px;padding:8px 10px;max-width:220px}
.typing{padding:6px 10px;color:var(--muted);font-size:12px}
.chat-input{display:flex;gap:8px;padding:10px;border-top:1px solid #1a1a1a}