:root { --ink:#eef5ef; --muted:#a7b9aa; --bg:#0b120d; --panel:#122218; --panel2:#172c20; --line:#2b4432; --green:#b7f85e; --danger:#ff8477; --sans: ui-rounded, "Avenir Next", "Segoe UI", sans-serif; }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);min-height:100vh}.app-shell{max-width:1280px;margin:auto;padding:24px}.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:18px;font-weight:800;color:var(--ink);text-decoration:none;letter-spacing:-.03em}.brand-mark{color:var(--green);font-size:23px;vertical-align:-1px;margin-right:5px}.status{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px}.status span,.live-dot{width:8px;height:8px;border-radius:50%;background:#69766b}.status[data-state="online"] span,.live-dot{background:var(--green);box-shadow:0 0 0 4px #b7f85e18}.lobby{min-height:calc(100vh - 104px);display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(40px,9vw,150px);padding:52px 7%}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--green);margin:0 0 12px}.intro h1{font-size:clamp(46px,6.2vw,78px);line-height:.96;letter-spacing:-.065em;margin:0 0 24px}.intro>p:last-child{color:var(--muted);font-size:18px;line-height:1.55;max-width:510px}.join-card{background:var(--panel);border:1px solid var(--line);padding:28px;box-shadow:12px 12px 0 #1c352550}.join-card label{display:block;font-size:13px;font-weight:700;margin:18px 0 8px}.join-card label:first-child{margin-top:0}input{width:100%;height:48px;background:#0c1810;color:var(--ink);border:1px solid #36513d;border-radius:5px;padding:0 13px;font:inherit;outline:none}input:focus{border-color:var(--green);box-shadow:0 0 0 3px #b7f85e18}.room-input{display:flex;gap:8px}.room-input button{width:48px;border:1px solid #36513d;background:#0c1810;color:var(--ink);font-size:21px;cursor:pointer}.primary,.secondary,.danger{min-height:46px;border:0;border-radius:5px;padding:0 16px;font:700 14px var(--sans);cursor:pointer}.primary{width:100%;margin-top:24px;background:var(--green);color:#10200c}.primary span{font-size:20px;line-height:0;margin-left:7px}.primary:hover{background:#ceff87}.secondary{background:transparent;border:1px solid #46644b;color:var(--ink)}.danger{background:transparent;color:var(--danger);border:1px solid #70413b}.help{font-size:12px;line-height:1.45;color:var(--muted);margin:16px 0 0}.hidden{display:none!important}.room{padding:35px 0}.room-toolbar,.participants-header{display:flex;justify-content:space-between;align-items:center;gap:18px}.room-toolbar h2{font-size:28px;letter-spacing:-.04em;margin:0}.toolbar-actions{display:flex;gap:9px}.sharing-panel{background:var(--panel2);border:1px solid #355a3e;margin:30px 0 25px;padding:20px;display:flex;justify-content:space-between;align-items:center;gap:16px}.sharing-panel strong{font-size:17px}.sharing-panel p{margin:5px 0 0;color:var(--muted);font-size:14px}.sharing-panel .primary{width:auto;margin:0;white-space:nowrap}.participants-header{color:var(--muted);font-size:13px;margin-bottom:12px}.privacy-note{color:var(--green)}.streams{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px}.stream-card{background:#101a13;border:1px solid var(--line);overflow:hidden}.stream-media{aspect-ratio:16/9;background:#071009;display:grid;place-items:center}.stream-media video{width:100%;height:100%;object-fit:contain}.stream-meta{height:49px;padding:0 14px;display:flex;align-items:center;gap:8px}.stream-meta strong{font-size:14px}.stream-label{font-size:12px;color:var(--muted);margin-left:auto}.empty-state{border:1px dashed #36513d;min-height:280px;display:grid;place-content:center;text-align:center;color:var(--muted)}.empty-state h3{color:var(--ink);margin:10px 0 4px}.empty-state p{margin:0}.empty-icon{font-size:36px;color:var(--green)}.performance-panel{margin:0 0 12px;padding:14px;border:1px solid var(--line);background:#0e1b12;display:flex;align-items:end;gap:12px;flex-wrap:wrap}.performance-panel label{display:grid;gap:6px;font-weight:700;font-size:12px;color:var(--muted)}select{min-height:38px;background:#0c1810;color:var(--ink);border:1px solid #36513d;border-radius:4px;padding:0 8px;font:inherit}.performance-panel .secondary{min-height:38px}.quality-status{font-size:12px;color:var(--green);padding-bottom:10px}.network-stats{padding:10px 12px;margin:0 0 16px;background:#0a120d;border-left:3px solid var(--green);color:var(--muted);font:12px ui-monospace,SFMono-Regular,Menlo,monospace}.debug-panel{margin-top:16px;border:1px solid var(--line);background:#0a120d;color:var(--muted);font-size:12px}.debug-panel summary{padding:12px 14px;cursor:pointer;color:var(--ink);font-weight:700}.debug-panel pre{max-height:240px;overflow:auto;white-space:pre-wrap;word-break:break-word;line-height:1.45;margin:0;padding:0 14px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:#dfffc0;color:#13250f;padding:11px 16px;font-weight:700;font-size:13px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:720px){.app-shell{padding:16px}.lobby{display:block;padding:65px 3%}.intro{margin-bottom:40px}.sharing-panel,.room-toolbar{align-items:flex-start;flex-direction:column}.sharing-panel .primary{width:100%}.streams{grid-template-columns:1fr}.stream-label{display:none}.toolbar-actions{width:100%}.toolbar-actions>*{flex:1}}