:root{font-family:Space Grotesk,system-ui,sans-serif;line-height:1.5;font-weight:400;color:#0f172a;background-color:#f8fafc;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#fff,#f1f5f9 60%,#e2e8f0)}:root{color-scheme:light}#root{min-height:100vh}.page{max-width:960px;margin:0 auto;padding:40px 20px 64px}.hero h1{font-size:36px;margin-bottom:8px}.hero p{color:#4b5563}.card{margin-top:28px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:24px;box-shadow:0 8px 24px #0f172a0f}.actions{display:flex;flex-direction:column;gap:16px}.join{display:flex;gap:12px;flex-wrap:wrap}.hint{margin-top:16px;color:#6b7280}.error{color:#b91c1c;font-size:14px}.room-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.room-id{color:#6b7280}.status{padding:6px 12px;background:#f3f4f6;border-radius:999px;font-size:14px}.video-grid{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.video-tile{position:relative;background:#0f172a;border-radius:16px;aspect-ratio:16 / 10;overflow:hidden;display:flex;align-items:center;justify-content:center}.video-tile video{width:100%;height:100%;object-fit:cover;background:#0f172a}.label{position:absolute;left:12px;bottom:12px;font-size:12px;color:#f8fafc;background:#0f172a99;padding:4px 8px;border-radius:999px}.badge-row{position:absolute;right:12px;bottom:12px;display:flex;gap:6px;flex-wrap:wrap}.badge{font-size:11px;padding:4px 8px;border-radius:999px;background:#0f172a99;color:#f8fafc}.badge.on{background:#22c55eb3}.badge.off{background:#ef4444bf}.controls{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}button{border:none;padding:10px 16px;border-radius:10px;background:#e5e7eb;color:#111827;cursor:pointer;font-weight:600}button:disabled{opacity:.6;cursor:not-allowed}button.primary{background:#111827;color:#f9fafb}button.danger{background:#dc2626;color:#fef2f2}button.active{background:#111827;color:#f9fafb}button.inactive{background:#fca5a5;color:#7f1d1d}input{flex:1;min-width:200px;padding:10px 12px;border-radius:10px;border:1px solid #d1d5db;outline:none}input:focus{border-color:#111827}