*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0f0f12;color:#e4e4e7;min-height:100vh}#app{max-width:960px;margin:0 auto;padding:1.5rem}.header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}.header h1{margin:0;font-size:1.5rem;font-weight:700}.subtitle{width:100%;margin:0 0 .25rem;font-size:.875rem;color:#71717a}.subtitle code{background:#27272a;padding:.15rem .4rem;border-radius:4px;font-size:.8rem}.leave{padding:.5rem 1rem;background:#3f3f46;color:#fff;border:none;border-radius:8px;font-size:.875rem;cursor:pointer}.leave:hover{background:#52525b}.join-section{display:flex;flex-direction:column;gap:1rem}.join-section #roomId{padding:.75rem 1rem;font-size:1rem;border:1px solid #3f3f46;border-radius:8px;background:#18181b;color:#e4e4e7;max-width:280px}.join-section #roomId:focus{outline:none;border-color:#6366f1}.role-buttons{display:flex;gap:.75rem;flex-wrap:wrap}.role-buttons button{padding:.75rem 1.25rem;font-size:.9375rem;font-weight:500;border:none;border-radius:8px;cursor:pointer}.role-buttons #btnHost{background:#6366f1;color:#fff}.role-buttons #btnHost:hover{background:#4f46e5}.role-buttons #btnViewer{background:#27272a;color:#e4e4e7}.role-buttons #btnViewer:hover{background:#3f3f46}.error{margin:0;font-size:.875rem;color:#f87171}.status{margin:.5rem 0 0;font-size:.875rem;color:#a1a1aa}.host-section{margin-top:1rem}.preview-row{display:flex;flex-direction:column;gap:1rem}#localVideo{width:100%;max-width:480px;aspect-ratio:16 / 10;background:#18181b;border-radius:12px;object-fit:cover}.host-actions{display:flex;gap:.5rem;flex-wrap:wrap}.host-actions button{padding:.5rem 1rem;font-size:.875rem;border:none;border-radius:8px;cursor:pointer;background:#27272a;color:#e4e4e7}.host-actions button:hover:not(:disabled){background:#3f3f46}.host-actions button:disabled{opacity:.5;cursor:not-allowed}.host-actions #btnCamera{background:#6366f1;color:#fff}.host-actions #btnCamera:hover:not(:disabled){background:#4f46e5}.viewer-section{margin-top:1rem}.remote-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}.remote-video-wrap{background:#18181b;border-radius:12px;overflow:hidden;min-height:240px;border:1px solid #3f3f46}.remote-video-label{padding:.35rem .75rem;font-size:.75rem;font-weight:600;color:#a1a1aa;background:#27272a}.remote-video{width:100%;min-height:200px;aspect-ratio:16 / 9;background:#000;object-fit:contain;display:block;vertical-align:top}.remote-videos audio{display:none}.unmute-btn{margin-top:.5rem;padding:.5rem 1rem;font-size:.875rem;background:#3f3f46;color:#e4e4e7;border:none;border-radius:8px;cursor:pointer}.unmute-btn:hover:not(:disabled){background:#52525b}