:root{--bg: #0b1220;--panel: #121a2b;--panel-2: #182236;--line: rgba(255, 255, 255, .08);--text: #e8eefc;--muted: #93a0b8;--accent: #1f6fff;--accent-2: #3d8bff;--danger: #e5484d;--ok: #30a46c;--warn: #f5a524;--shadow: 0 18px 50px rgba(0, 0, 0, .35);font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;color:var(--text);background:var(--bg)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{background:radial-gradient(1200px 600px at 10% -10%,rgba(31,111,255,.28),transparent 55%),radial-gradient(900px 500px at 100% 0%,rgba(61,139,255,.18),transparent 50%),var(--bg)}.page{min-height:100vh;padding:24px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.brand{display:flex;align-items:center;gap:14px}.brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,var(--accent),#79b8ff);box-shadow:0 8px 24px #1f6fff73}.brand h1{margin:0;font-size:22px;font-weight:650;letter-spacing:.2px}.brand p{margin:4px 0 0;color:var(--muted);font-size:13px}.room-meta{display:flex;flex-wrap:wrap;gap:10px 16px;color:var(--muted);font-size:13px}.layout{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;min-height:calc(100vh - 120px)}.layout.in-room{grid-template-columns:1fr 1.2fr}.preview-panel,.form-panel,.remote-panel{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px}.panel-title{font-size:15px;font-weight:600;margin-bottom:12px}.hint{margin:0 0 16px;color:var(--muted);font-size:12px;line-height:1.6}.video-stage{position:relative;width:100%;aspect-ratio:16 / 10;border-radius:14px;overflow:hidden;background:#050911;border:1px solid var(--line)}.video-stage :global(video),.video-stage video{width:100%;height:100%;object-fit:cover;background:#000}.placeholder,.empty-remote{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--muted);padding:24px;text-align:center;font-size:14px}.empty-remote{position:static;min-height:220px;border:1px dashed var(--line);border-radius:14px}.device-bar{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}button{border:0;border-radius:10px;padding:10px 14px;font-size:13px;cursor:pointer;color:#fff;background:#2a364f;transition:transform .15s ease,background .15s ease,opacity .15s ease}button:hover{transform:translateY(-1px)}button:disabled{opacity:.6;cursor:not-allowed;transform:none}button.on{background:#25467d}button.off{background:#3a4254}button.danger{background:var(--danger)}button.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));font-weight:600}.join-btn{width:100%;margin-top:8px;padding:12px 14px}label{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;color:var(--muted);font-size:12px}input{width:100%;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);border-radius:10px;padding:11px 12px;font-size:14px;outline:none}input:focus{border-color:#3d8bffb3;box-shadow:0 0 0 3px #1f6fff2e}.remote-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}.remote-card{position:relative}.remote-label{position:absolute;left:10px;bottom:10px;padding:4px 8px;border-radius:8px;background:rgba(0,0,0,.55);font-size:12px}.toast-stack{position:fixed;top:18px;left:50%;transform:translate(-50%);z-index:50;display:flex;flex-direction:column;gap:8px;width:min(520px,calc(100vw - 32px))}.toast{padding:10px 14px;border-radius:10px;text-align:center;font-size:13px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fade-in .2s ease}.toast.success{background:rgba(48,164,108,.18);border:1px solid rgba(48,164,108,.45);color:#9fe7c1}.toast.error{background:rgba(229,72,77,.18);border:1px solid rgba(229,72,77,.45);color:#ffb4b4}.toast.info{background:rgba(31,111,255,.18);border:1px solid rgba(61,139,255,.45);color:#b8d4ff}@keyframes fade-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 960px){.layout,.layout.in-room{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:flex-start}}