:root { color-scheme:dark; font-family:Inter,ui-sans-serif,system-ui,sans-serif; background:#08101f; color:#f6f8fc; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:radial-gradient(circle at 15% 0%,#153a68 0,transparent 34rem),radial-gradient(circle at 100% 90%,#123d45 0,transparent 30rem),#08101f; } button,input { font:inherit; } button { cursor:pointer; } .hidden { display:none!important; }
.shell { width:min(100% - 32px,1380px); margin:30px auto; }.card { background:rgba(14,24,43,.88); border:1px solid #263957; box-shadow:0 20px 60px rgba(0,0,0,.24); border-radius:20px; }.brand { display:flex; gap:10px; align-items:center; font-weight:800; letter-spacing:-.035em; }.brand span { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:#5eead4; color:#062a37; font-size:21px; }
.lobby { max-width:960px; padding:38px; margin:5vh auto; }.lobby h1 { margin:40px 0 12px; font-size:clamp(2.2rem,6vw,3.45rem); line-height:.98; letter-spacing:-.07em; }.lobby em { color:#5eead4; font-style:normal; }.lobby>p { color:#a9b8cf; line-height:1.55; margin:0 0 24px; } form { display:grid; gap:15px; } label { display:grid; gap:7px; color:#b8c5d7; font-size:.82rem; font-weight:750; } label small { color:#8294ad; font-weight:600; } input { min-width:0; width:100%; padding:13px 14px; border-radius:11px; border:1px solid #2c405e; background:#091426; color:#f8fafc; outline:none; } input:focus { border-color:#5eead4; box-shadow:0 0 0 3px rgba(94,234,212,.13); }.your-name { max-width:420px; margin-bottom:20px; }.lobby-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); gap:22px; }.room-browser,.create-room-form { border:1px solid #263957; border-radius:14px; padding:17px; background:#0a1527; }.section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }.section-heading h2,.create-room-form h2 { margin:0; font-size:1rem; }.icon-button { border:1px solid #315779; background:#183451; color:#e2edf8; border-radius:8px; padding:5px 9px; }.room-list { display:grid; gap:9px; margin-top:13px; max-height:340px; overflow:auto; }.rooms-empty { color:#8294ad; font-size:.86rem; padding:12px 0; margin:0; }.room-item { display:flex; align-items:center; gap:11px; padding:11px; border:1px solid #243a57; border-radius:10px; background:#0d1b31; }.room-item > div { min-width:0; flex:1; }.room-item strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem; }.room-item small { color:#8da0ba; }.room-item button { padding:8px 10px; font-size:.78rem; }.room-lock { color:#f3cd79; font-size:.9rem; }.create-room-form { align-content:start; }.invite-panel { margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid #315779; border-radius:11px; background:#10243c; }.invite-panel strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.password-dialog { color:#f6f8fc; width:min(420px,calc(100% - 24px)); border:1px solid #365274; border-radius:15px; background:#0d1a2e; box-shadow:0 22px 70px #000; }.password-dialog::backdrop { background:rgba(0,0,0,.65); }.password-dialog form { gap:14px; }.password-dialog h2 { margin:0; }.password-dialog p { margin:0; color:#9caec7; }.password-dialog form>div { display:flex; justify-content:flex-end; gap:8px; }
.primary,.secondary,.danger { border-radius:11px; padding:12px 15px; font-weight:800; border:1px solid transparent; }.primary { color:#06333a; background:#5eead4; }.primary:hover { background:#99f6e4; }.primary b { float:right; font-size:1.15rem; }.secondary { color:#e2edf8; background:#183451; border-color:#315779; }.secondary:hover { background:#214565; }.danger { color:#ffe8e8; background:#6e2027; border-color:#9d3440; }.danger:hover { background:#842932; }.lobby small { display:block; margin-top:21px; color:#6f829e; text-align:center; }
.topbar { min-height:70px; padding:13px 17px; display:flex; align-items:center; gap:24px; }.room-title { margin-right:auto; }.room-title small { display:block; color:#8292aa; font-size:.65rem; letter-spacing:.13em; }.room-title strong { font-size:.98rem; }.top-actions { display:flex; gap:8px; }.top-actions button { padding:9px 11px; font-size:.86rem; }
.layout { display:grid; grid-template-columns:minmax(0,1fr) 275px; gap:14px; margin-top:14px; }.content { min-height:600px; padding:20px; }.content-head,.people-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }.content h2,.people h2 { margin:0; font-size:1.05rem; letter-spacing:-.025em; }.content-head p { margin:5px 0 16px; color:#91a4bf; font-size:.88rem; }.badge { white-space:nowrap; border-radius:999px; padding:5px 9px; font-size:.75rem; color:#a7f3e9; background:#12434a; }
.notice { margin:0 0 15px; padding:11px 13px; border:1px solid #966c24; border-radius:10px; color:#fde9b1; background:#3b2c13; font-size:.82rem; line-height:1.5; }.notice code { color:#fff4ce; font-weight:800; }
.share-compatibility { color:#f3cd79; font-size:.8rem; line-height:1.45; margin:11px 0 0; }.audio-toggle { color:#fff; background:rgba(5,15,30,.66); border:1px solid rgba(255,255,255,.35); border-radius:7px; padding:4px 7px; margin-right:5px; }
.streams { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; align-content:start; min-height:440px; }.empty { grid-column:1/-1; min-height:440px; display:grid; place-content:center; text-align:center; color:#92a4be; }.empty span { font-size:2.8rem; color:#4e708f; }.empty h3 { color:#e5edf8; margin:15px 0 4px; }.empty p { margin:0; }.stream-card { position:relative; min-height:195px; overflow:hidden; border:1px solid #2b405f; border-radius:13px; background:#03070e; }.stream-card video { width:100%; height:100%; min-height:195px; display:block; object-fit:contain; }.stream-card:fullscreen { width:100vw; height:100vh; border:0; border-radius:0; }.stream-card:fullscreen video { height:100vh; max-height:none; }.stream-label { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:13px; background:linear-gradient(transparent,rgba(0,0,0,.82)); font-size:.83rem; font-weight:750; }.fullscreen { color:#fff; background:rgba(5,15,30,.66); border:1px solid rgba(255,255,255,.35); border-radius:7px; padding:4px 7px; }.controls { margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }.controls button { width:auto; }
.people { padding:18px; }.people-head { align-items:center; }.people ul { list-style:none; padding:0; margin:18px 0; display:grid; gap:6px; }.people li { display:flex; align-items:center; gap:9px; min-width:0; padding:8px 4px; }.avatar { display:grid; place-items:center; flex:0 0 29px; width:29px; height:29px; border-radius:50%; background:#24486b; color:#cbeeff; font-size:.78rem; font-weight:800; }.person-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.person-name small { color:#7f94b0; }.live-dot { margin-left:auto; color:#85f3e2; font-size:.67rem; font-weight:800; }.help { margin:20px 0 0; padding-top:16px; border-top:1px solid #263957; color:#8294ad; font-size:.78rem; line-height:1.45; }.toast { position:fixed; z-index:3; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#e3fff9; color:#063a3a; padding:11px 15px; border-radius:10px; font-weight:750; transition:.2s; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:840px) { .layout,.lobby-grid { grid-template-columns:1fr; }.people { order:-1; }.people ul { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); }.content { min-height:0; }.streams,.empty { min-height:360px; } } @media (max-width:560px) { .shell { width:min(100% - 20px,1380px); margin:10px auto; }.lobby { padding:26px 21px; }.topbar { flex-wrap:wrap; gap:12px; }.room-title { order:3; width:100%; }.top-actions { margin-left:auto; }.content { padding:14px; }.streams { grid-template-columns:1fr; }.stream-card,.stream-card video { min-height:180px; }.room-item { align-items:flex-start; flex-wrap:wrap; }.room-item button { margin-left:auto; }.invite-panel { align-items:flex-start; flex-direction:column; } }