@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;600;800&display=swap");
:root, [data-theme="blackblue"] { --bg:#05070d; --panel:#0c1222; --fg:#e8eeff; --muted:#7f8db0; --accent:#2f6bff; --border:#1c2742; --mine:#2f6bff; }
[data-theme="chicken"] { --bg:#fff7e0; --panel:#fff; --fg:#3b2a10; --muted:#8a6d3b; --accent:#f5a524; --border:#f0dca8; --mine:#e2581f; }
[data-theme="hunter"] { --bg:#120a1f; --panel:#1d1030; --fg:#ffe9fb; --muted:#b58ac8; --accent:#ff3ea5; --border:#3a1d55; --mine:#8f3cff; }
[data-theme="spy"] { --bg:#0b0d0b; --panel:#141814; --fg:#d8e6d8; --muted:#6f8a6f; --accent:#3ddc84; --border:#233023; --mine:#256b45; }
[data-theme="reaper"] { --bg:#050505; --panel:#111; --fg:#e5e5e5; --muted:#777; --accent:#9a9a9a; --border:#222; --mine:#3a0d0d; }
[data-theme="ironman"] { --bg:#1a0505; --panel:#2a0808; --fg:#fff3d6; --muted:#d0a060; --accent:#f5c518; --border:#4a1212; --mine:#b3121b; }
[data-theme="blackflash"] { --bg:#000; --panel:#0d0d0d; --fg:#fff; --muted:#ff6b6b; --accent:#e00000; --border:#2a0000; --mine:#5c0000; }
* { box-sizing:border-box; }
body { margin:0; font-family:Sora,sans-serif; background:var(--bg); color:var(--fg); }
button { font:inherit; color:inherit; cursor:pointer; }
.muted { color:var(--muted); } .small { font-size:.85rem; }
.input { width:100%; padding:.7rem .9rem; border-radius:12px; border:1px solid var(--border); background:var(--bg); color:var(--fg); font:inherit; }
.field { display:grid; gap:.3rem; font-size:.85rem; color:var(--muted); }
.btn { background:var(--accent); color:#fff; border:0; border-radius:12px; padding:.7rem 1.1rem; font-weight:700; }
.btn.ghost { background:transparent; border:1px solid var(--border); padding:.4rem .7rem; font-size:.8rem; }
.link { background:none; border:0; color:var(--accent); font-size:.9rem; text-align:center; }
.alert { padding:.6rem .9rem; border-radius:10px; margin:.5rem; } .alert-error { background:#5a1020; color:#ffd7de; }
.spinner { width:36px; height:36px; border-radius:50%; border:4px solid var(--border); border-top-color:var(--accent); animation:s 1s linear infinite; }
@keyframes s { to { transform:rotate(360deg); } }
.signin { min-height:100vh; display:grid; place-items:center; padding:1rem;
  background:radial-gradient(circle at 30% 20%, color-mix(in srgb,var(--accent) 35%,transparent), transparent 60%), var(--bg); }
.signin-card { width:100%; max-width:380px; display:grid; gap:1rem; justify-items:center; background:var(--panel); padding:2rem;
  border-radius:24px; border:1px solid var(--border); box-shadow:0 30px 80px #0008; }
.signin-card label, .signin-card .btn { width:100%; } .signin-card h1 { margin:0; letter-spacing:-.02em; }
.app { display:grid; grid-template-columns:300px 1fr; height:100vh; }
.side { background:var(--panel); border-right:1px solid var(--border); padding:1rem; display:flex; flex-direction:column; gap:.3rem; overflow:auto; }
.brand { display:flex; align-items:center; gap:.6rem; font-size:1.2rem; margin-bottom:.5rem; }
.label { text-transform:uppercase; font-size:.7rem; letter-spacing:.1em; color:var(--muted); margin:.8rem 0 .2rem; }
.chan { display:flex; align-items:center; gap:.6rem; width:100%; padding:.45rem; border-radius:12px; background:none; border:0; text-align:left; }
.chan.on, .chan:hover { background:color-mix(in srgb,var(--accent) 18%,transparent); }
.chan-main { display:flex; align-items:center; gap:.6rem; flex:1; background:none; border:0; text-align:left; padding:0; }
.grow { flex:1; min-width:0; }
.tools button { background:none; border:0; opacity:.7; }
.avatar { position:relative; display:inline-grid; place-items:center; flex:none; border-radius:50%; color:#fff; font-weight:800; background:var(--accent); }
.avatar.eyes { box-shadow:0 0 0 2px #7fd4ff, 0 0 14px #2fa8ff; }
.dot { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:#22c55e; border:2px solid var(--panel); }
.av-wrap { position:relative; }
.count { background:#ff3b30; color:#fff; font-size:.7rem; font-weight:800; border-radius:99px; padding:.1rem .45rem; }
.on-av { position:absolute; top:-6px; right:-8px; }
.rank { font-style:normal; font-size:.62rem; margin-left:.4rem; padding:.1rem .4rem; border-radius:6px; background:var(--border); }
.rank.owner { background:gold; color:#000; } .rank.head_admin { background:#ff5a5a; color:#fff; } .rank.admin { background:#3b82f6; color:#fff; }
.side-foot { margin-top:auto; display:grid; gap:.6rem; padding-top:1rem; }
.me { display:flex; align-items:center; gap:.5rem; }
.chat { display:flex; flex-direction:column; min-width:0; height:100vh; }
.chat-head { display:flex; align-items:center; gap:.6rem; padding:1rem 1.2rem; border-bottom:1px solid var(--border); }
.chat-head h2 { margin:0; font-size:1.1rem; }
.menu { display:none; background:none; border:0; font-size:1.4rem; }
.msgs { flex:1; overflow:auto; padding:1rem; display:flex; flex-direction:column; gap:.8rem; }
.empty { margin:auto; display:grid; gap:.3rem; text-align:center; }
.msg { display:flex; gap:.6rem; align-items:flex-end; max-width:80%; }
.msg.mine { align-self:flex-end; flex-direction:row-reverse; }
.bubble { background:var(--panel); border:1px solid var(--border); padding:.55rem .8rem; border-radius:16px; min-width:0; }
.msg.mine .bubble { background:var(--mine); color:#fff; border-color:transparent; }
.bubble p { margin:.2rem 0 0; overflow-wrap:anywhere; }
.bubble img, .bubble video { max-width:100%; max-height:300px; border-radius:10px; margin-top:.4rem; display:block; }
.meta { display:flex; align-items:center; gap:.3rem; font-size:.75rem; flex-wrap:wrap; }
.meta time { opacity:.6; } .x { background:none; border:0; opacity:.6; }
.composer { display:flex; gap:.5rem; padding:.8rem; border-top:1px solid var(--border); }
.attach { display:grid; place-items:center; width:44px; flex:none; border-radius:12px; background:var(--panel); border:1px solid var(--border); cursor:pointer; }
@media (max-width:760px) {
  .app { grid-template-columns:1fr; }
  .side { position:fixed; inset:0 20% 0 0; z-index:5; transform:translateX(-105%); transition:.25s; }
  .side.open { transform:none; }
  .menu { display:block; }
  .msg { max-width:92%; }
}
.tile { cursor:pointer; }
.tile.screen video { object-fit:contain !important; background:#000; transform:none !important; }
.tiles.has-focus .tile.big { grid-column:1 / -1; order:-1; min-height:55vh; }
.tiles.has-focus .tile:not(.big) { min-height:90px; max-height:140px; }
.alert .btn { margin-left:8px; display:inline-block; }
.meetings { padding:16px; overflow:auto; display:flex; flex-direction:column; gap:14px; flex:1; }
.meet-new { display:flex; flex-direction:column; gap:10px; }
.bg-pick { display:flex; flex-wrap:wrap; gap:8px; }
.bg-swatch { width:40px; height:40px; border-radius:10px; border:2px solid transparent; cursor:pointer; }
.bg-swatch.on { border-color:var(--accent); box-shadow:0 0 12px var(--accent); }
.meet-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.meet-card { border-radius:16px; padding:16px; min-height:130px; display:flex; flex-direction:column; justify-content:space-between; gap:10px; color:#fff; }
.meet-info { display:flex; flex-direction:column; gap:4px; text-shadow:0 1px 4px #000; }
.mbg-vault { background:radial-gradient(circle at 30% 20%,#f5c84a,#7a5310 60%,#1a1206); }
.mbg-city { background:linear-gradient(180deg,#0b1030,#1d2a6b 60%,#f5a52455); }
.mbg-office { background:linear-gradient(135deg,#2b1a10,#5a3a22 50%,#120a05); }
.mbg-neon { background:linear-gradient(135deg,#ff2bd6,#3a0ca3 50%,#00e5ff); }
.mbg-ocean { background:radial-gradient(circle at 50% 0%,#1fb6ff,#023e8a 55%,#03045e); }
.mbg-sunset { background:linear-gradient(180deg,#ff7e5f,#feb47b 50%,#6a3093); }
.mbg-plain { background:#111318; }
.room { flex:1; display:flex; flex-direction:column; gap:10px; padding:12px; min-height:0; color:#fff; }
.room-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px; text-shadow:0 1px 4px #000; }
.room-bg { width:auto; margin-left:auto; }
.tiles { flex:1; display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); align-content:center; }
.tile { position:relative; aspect-ratio:16/10; border-radius:16px; overflow:hidden; background:#0008; box-shadow:0 8px 30px #0007; display:grid; place-items:center; }
.tile video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tile video.mirror { transform:scaleX(-1); }
.tile-av { width:72px; height:72px; border-radius:50%; display:grid; place-items:center; font-size:30px; font-weight:800; }
.tile-name { position:absolute; left:10px; bottom:8px; background:#000a; padding:3px 10px; border-radius:99px; font-size:13px; }
.room-bar { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.rb { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:70px; padding:10px; border:0; border-radius:14px; background:#000a; color:#fff; cursor:pointer; font-size:20px; }
.rb span { font-size:11px; }
.rb.off { background:#555c; }
.rb.live { background:var(--accent); }
.rb.leave { background:#e5484d; }