:root{--bg:#111418;--panel:#1c2128;--line:#313843;--text:#e8ecf1;--muted:#9aa5b1;--accent:#3d8bfd;--danger:#d9534f;--warn:#f0ad4e;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--text);margin:0}.boundary{display:contents}.page{place-items:center;min-height:100%;padding:16px;display:grid}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-direction:column;gap:14px;width:100%;max-width:460px;padding:20px;display:flex}.panel h1{overflow-wrap:anywhere;margin:0;font-size:1.35rem}label{color:var(--muted);flex-direction:column;gap:6px;font-size:.95rem;display:flex}input{font:inherit;border:1px solid var(--line);color:var(--text);background:#0d1014;border-radius:8px;min-width:0;padding:10px 12px}button,.button{font:inherit;border:1px solid var(--line);color:var(--text);cursor:pointer;text-align:center;background:#2a313b;border-radius:8px;padding:10px 16px;text-decoration:none}button:disabled{opacity:.6;cursor:default}button.primary,.button.primary{color:#fff;background:var(--accent);border-color:var(--accent)}button.danger{color:#fff;background:var(--danger);border-color:var(--danger)}.row{flex-wrap:wrap;gap:10px;display:flex}.error{color:#ff8a80;margin:0}.hint{color:var(--muted);margin:0;font-size:.9rem}.error-panel{margin:16px auto}.copy-link{flex-wrap:wrap;gap:8px;display:flex}.copy-link input{flex:220px}.conference{flex-direction:column;height:100%;display:flex;position:relative;overflow:hidden}.conf-header{align-items:center;gap:12px;min-height:40px;padding:8px 12px;display:flex}.room-name{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.status{color:var(--muted);font-size:.9rem}.status.warn{color:var(--warn)}.notice{color:#ffe2a8;background:#3a3220;border-radius:8px;margin:0 12px 8px;padding:8px 12px}.notice-button{color:#fff;background:var(--accent);margin:0 12px 8px}.tiles{flex:1;gap:6px;min-height:0;padding:6px;display:grid}.waiting{color:var(--muted);place-items:center;display:grid}.tiles[data-count="1"]{grid-template:1fr/1fr}.tiles[data-count="2"]{grid-template:1fr 1fr/1fr}.tiles[data-count="3"]{grid-template:2fr 1fr/1fr 1fr}.tiles[data-count="3"]>:first-child{grid-column:1/span 2}.tiles[data-count="4"]{grid-template:1fr 1fr/1fr 1fr}@media (orientation:landscape){.tiles[data-count="2"]{grid-template:1fr/1fr 1fr}.tiles[data-count="3"]{grid-template:1fr/1fr 1fr 1fr}.tiles[data-count="3"]>:first-child{grid-column:auto}}.tile{background:#000;border:2px solid #0000;border-radius:10px;place-items:center;min-height:0;display:grid;position:relative;overflow:hidden}.tile.speaking{border-color:var(--accent)}.tile video{object-fit:cover;width:100%;height:100%}.tile video.mirror{transform:scaleX(-1)}.avatar{aspect-ratio:1;background:#2f3a48;border-radius:50%;place-items:center;width:30%;max-width:120px;font-size:clamp(1rem,5vw,2.6rem);font-weight:600;display:grid}.tile-name{text-overflow:ellipsis;white-space:nowrap;background:#0000008c;border-radius:6px;max-width:calc(100% - 16px);padding:2px 8px;font-size:.85rem;position:absolute;bottom:8px;left:8px;overflow:hidden}.self-view{aspect-ratio:3/4;width:28vw;max-width:200px;position:absolute;bottom:76px;right:12px}@media (orientation:landscape){.self-view{aspect-ratio:4/3}}.self-view .tile{width:100%;height:100%;box-shadow:0 2px 10px #0009}.self-view .tile-name{font-size:.75rem}.controls{padding:10px 12px calc(10px + env(safe-area-inset-bottom));flex-wrap:wrap;justify-content:center;gap:8px;display:flex}
