:root{--bg: #0e1621;--panel: #17212b;--panel2: #1c2733;--input: #242f3d;--border: #2b3a4a;--text: #ffffff;--muted: #7d8e9e;--accent: #5eb5f7;--accent2: #71a6f0;--danger: #f26d6d;--ok: #4ade80}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:15px}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}.landing{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:24px;text-align:center}.landing .logo{font-size:34px;font-weight:700;letter-spacing:-.5px}.landing .logo span{color:var(--accent)}.landing .tagline{color:var(--muted);max-width:480px;line-height:1.5}.btn{padding:12px 28px;border-radius:14px;background:var(--accent);color:#0b1a28;font-weight:600;transition:background .15s,transform .1s}.btn:hover{background:var(--accent2)}.btn:active{transform:scale(.97)}.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--border)}.btn.small{padding:8px 16px;border-radius:10px;font-size:14px}.btn.danger{background:var(--danger);color:#fff}.join-row{display:flex;gap:10px}.join-row input{width:220px;padding:12px 16px;border-radius:14px;border:1px solid var(--border);background:var(--input);color:var(--text);font:inherit;text-transform:lowercase}.join-row input:focus{outline:none;border-color:var(--accent)}.landing .features{display:flex;gap:18px;color:var(--muted);font-size:13px;flex-wrap:wrap;justify-content:center}.room{display:flex;flex-direction:column;height:100%}.room-header{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border);flex-shrink:0}.room-header .title{font-weight:600}.room-header .code{color:var(--muted);font-size:13px}.room-header .spacer{flex:1}.room-header .online{color:var(--ok);font-size:13px}.controls .mutebtn{width:36px;height:36px;border-radius:50%;color:var(--text);display:flex;align-items:center;justify-content:center;flex-shrink:0}.controls .mutebtn:hover{background:var(--panel2)}.controls .mutebtn.glow{background:#5eb5f740;color:var(--accent)}.nick{background:var(--input);border:1px solid var(--border);border-radius:8px;padding:6px 10px;color:var(--text);font-size:14px;width:140px}.nick:focus{outline:none;border-color:var(--accent)}.room-body{flex:1;display:flex;min-height:0}.stage{flex:1;display:flex;flex-direction:column;min-width:0;padding:12px;gap:10px}.video-wrap{position:relative;flex:1;min-height:200px;background:#000;border-radius:14px;overflow:hidden}.video-wrap video,.video-wrap iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0}.video-wrap object{pointer-events:none}.video-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted)}.video-placeholder .big{font-size:44px}.join-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;background:#0a1018e0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}.join-overlay input{padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:var(--input);color:var(--text);font:inherit;width:240px;text-align:center}.source-bar{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}.source-bar input[type=text]{flex:1;min-width:180px;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--input);color:var(--text);font:inherit;font-size:14px}.source-bar input[type=text]:focus{outline:none;border-color:var(--accent)}.controls{display:flex;align-items:center;gap:10px;flex-shrink:0}.controls .play{width:42px;height:42px;border-radius:50%;background:var(--accent);color:#0b1a28;display:flex;align-items:center;justify-content:center;flex-shrink:0}.controls .play:hover{background:var(--accent2)}.controls .time{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}.seek{flex:1;min-width:100px;accent-color:var(--accent);height:4px}.badge{font-size:12px;padding:3px 10px;border-radius:999px;white-space:nowrap}.badge.ok{color:var(--ok);background:#4ade801a}.badge.wait{color:#facc15;background:#facc151a}.badge.live{color:var(--danger);background:#f26d6d1f;font-weight:600}.chat{width:300px;flex-shrink:0;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0}.chat-header{padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted);font-size:13px}.chat-messages{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px}.chat-msg{line-height:1.4;word-wrap:break-word}.chat-msg .who{color:var(--accent);margin-right:6px;font-size:13px}.chat-msg .txt{font-size:14px}.chat-msg.system{color:var(--muted);font-size:13px;font-style:italic}.chat-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border)}.chat-input input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--input);color:var(--text);font:inherit;font-size:14px}.chat-input input:focus{outline:none;border-color:var(--accent)}.error-toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--danger);color:#fff;padding:10px 20px;border-radius:12px;z-index:100;font-size:14px}@media (max-width: 800px){.room-body{flex-direction:column}.chat{width:auto;border-left:none;border-top:1px solid var(--border);height:220px}.stage{padding:8px}}