:root{--bg:#0b0e14;--card:#141926;--line:#232c40;--fg:#e8ecf6;--mut:#8b95ad;--acc:#4f7cff;--ok:#2ecc71;--bad:#ff5d5d}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;display:flex;flex-direction:column}
.screen{flex:1;display:flex;flex-direction:column;padding:24px 16px;max-width:520px;margin:0 auto;width:100%}
.hidden{display:none !important}
h1{font-size:28px;margin-bottom:4px}
.sub{color:var(--mut);margin-bottom:20px;font-size:14px}
input{background:var(--card);border:1px solid var(--line);color:var(--fg);border-radius:12px;padding:12px 14px;font-size:16px;width:100%;outline:none}
input:focus{border-color:var(--acc)}
.row{display:flex;gap:8px;margin-top:10px}
.row.join input{flex:1}
button{background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:12px 18px;font-size:16px;cursor:pointer}
button:active{transform:scale(.97)}
.primary{background:var(--acc);border-color:var(--acc);font-weight:600}
.hint{color:var(--mut);font-size:13px;margin-top:16px}
#live{margin-top:12px}
.room{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.room b{display:block}
.room span{color:var(--mut);font-size:13px}
#call{max-width:none;padding:0}
#call header{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-weight:600}
#call header button{padding:4px 12px;font-size:20px}
#stage{flex:1;display:grid;gap:8px;padding:10px;min-height:0;grid-auto-rows:1fr}
#stage.n1{grid-template-columns:1fr}
#stage.n2{grid-template-columns:1fr 1fr}
.tile{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-height:0}
.tile video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.tile.me video{transform:scaleX(-1)}
.tile .label{position:absolute;left:8px;bottom:6px;background:rgba(0,0,0,.55);padding:2px 8px;border-radius:8px;font-size:12px;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .st{position:absolute;left:8px;top:8px;font-size:12px;background:rgba(0,0,0,.55);padding:2px 8px;border-radius:8px;color:#9fb4d8}
footer{display:flex;justify-content:center;gap:12px;padding:14px 0 calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.ctl{width:52px;height:52px;border-radius:50%;font-size:20px;display:flex;align-items:center;justify-content:center}
.ctl.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.ctl.off{opacity:.45;border-color:var(--bad)}
.ctl.danger{border-color:var(--bad);color:var(--bad)}
#toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:#1f2740;color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;opacity:0;transition:opacity .25s;pointer-events:none;max-width:90%;z-index:5}
#toast.show{opacity:1}