@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.rooms-page{height:100vh;height:100dvh;background:linear-gradient(180deg,#0a0a0a,#111);display:flex;flex-direction:column;overflow:hidden}.rooms-entry{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:2rem;overflow:hidden}.rooms-logo{font-size:3rem;font-weight:800;color:#fff;letter-spacing:-.05em}.rooms-logo span{background:linear-gradient(135deg,#8b5cf6,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.rooms-entry-card{width:100%;max-width:400px;background:#161616;border:1px solid #2a2a2a;border-radius:24px;overflow:hidden}.entry-tabs{display:flex;border-bottom:1px solid #2a2a2a}.entry-tab{flex:1;padding:1rem;background:transparent;border:none;color:#666;font-size:.9375rem;font-weight:500;cursor:pointer;transition:all .2s;position:relative}.entry-tab.active{color:#fff}.entry-tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:#8b5cf6}.entry-tab:hover:not(.active){color:#888}.entry-form{padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}.entry-field{display:flex;flex-direction:column;gap:.5rem}.entry-field label{font-size:.8125rem;color:#888;font-weight:500}.entry-field input{width:100%;padding:.875rem 1rem;background:#1e1e1e;border:1px solid #2a2a2a;border-radius:12px;color:#fff;font-size:1rem;outline:none;transition:border-color .2s}.entry-field input::placeholder{color:#555}.entry-field input:focus{border-color:#8b5cf6}.room-code-input{font-family:SF Mono,Fira Code,monospace;letter-spacing:.2em;text-transform:uppercase;text-align:center;font-size:1.25rem!important}.entry-submit{width:100%;padding:1rem;background:#8b5cf6;border:none;border-radius:12px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;margin-top:.5rem}.entry-submit:hover:not(:disabled){background:#7c4ddb;transform:translateY(-1px)}.entry-submit:disabled{background:#3a3a3a;color:#666;cursor:not-allowed}.entry-error{padding:.75rem;background:#ef444426;border:1px solid rgba(239,68,68,.3);border-radius:8px;color:#ef4444;font-size:.875rem;text-align:center}.rooms-footer{font-size:.8125rem;color:#555}.room-container{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}.room-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;margin:.75rem;margin-bottom:0;background:#161616;border:1px solid #2a2a2a;border-radius:16px;flex-shrink:0;position:relative;z-index:20}.room-info{display:flex;align-items:center;gap:1rem}.room-code-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem .875rem;background:#1e1e1e;border:1px solid #2a2a2a;border-radius:100px;cursor:pointer;transition:all .2s}.room-code-btn:hover{border-color:#8b5cf6}.room-code{font-family:SF Mono,Fira Code,monospace;font-size:.875rem;color:#fff;font-weight:600;letter-spacing:.1em}.room-code-btn svg{color:#666;transition:color .2s}.room-code-btn:hover svg{color:#8b5cf6}.room-participants-count{display:flex;align-items:center;gap:.375rem;font-size:.8125rem;color:#888}.room-actions{display:flex;align-items:center;gap:.5rem}.room-action-btn{display:flex;align-items:center;gap:.25rem;padding:.5rem .875rem;background:transparent;border:1px solid #2a2a2a;border-radius:100px;color:#888;cursor:pointer;transition:all .2s}.room-action-btn:hover,.room-action-btn.active{background:#1e1e1e;color:#fff}.room-leave-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:transparent;border:1px solid rgba(239,68,68,.3);border-radius:100px;color:#ef4444;cursor:pointer;transition:all .2s;font-size:.875rem;font-weight:500}.room-leave-btn:hover{background:#ef44441a;border-color:#ef4444}.participants-dropdown{position:absolute;top:calc(100% + .5rem);right:0;width:280px;background:#161616;border:1px solid #2a2a2a;border-radius:16px;box-shadow:0 8px 32px #0006;z-index:30;overflow:hidden}.participants-header{padding:.75rem 1rem;border-bottom:1px solid #2a2a2a;font-size:.8125rem;color:#888;font-weight:500}.participants-list{max-height:300px;overflow-y:auto;padding:.5rem}.participant-item{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:8px;transition:background .2s}.participant-item:hover{background:#1e1e1e}.participant-avatar{width:32px;height:32px;border-radius:50%;background:#8b5cf6;display:flex;align-items:center;justify-content:center;flex-shrink:0}.participant-avatar span{font-size:.875rem;color:#fff;font-weight:600}.participant-name{flex:1;font-size:.875rem;color:#fff;font-weight:500}.you-badge{color:#666;font-weight:400;margin-left:.25rem}.participant-status{display:flex;align-items:center;gap:.25rem;color:#ef4444}.participant-item{display:flex;flex-direction:column;gap:0}.participant-main{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:8px;cursor:pointer;transition:background .2s}.participant-main:hover{background:#1e1e1e}.participant-info{flex:1;display:flex;flex-direction:column;gap:.125rem;min-width:0}.participant-connection{font-size:.6875rem;color:#f59e0b}.participant-avatar.connecting{border:2px solid #f59e0b}.participant-avatar.disconnected{border:2px solid #ef4444;opacity:.5}.participant-volume{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem .5rem 3.25rem;background:#1a1a1a;border-radius:0 0 8px 8px;margin-top:-4px}.volume-btn{width:28px;height:28px;border-radius:6px;background:#2a2a2a;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#888;transition:all .2s;flex-shrink:0}.volume-btn:hover{background:#3a3a3a;color:#fff}.volume-btn.muted{color:#ef4444}.volume-slider{flex:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#2a2a2a;border-radius:2px;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#8b5cf6;cursor:pointer;transition:transform .15s}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-value{font-size:.75rem;color:#666;min-width:36px;text-align:right}.debug-panel{position:absolute;top:calc(100% + .5rem);right:0;width:260px;background:#161616;border:1px solid #2a2a2a;border-radius:16px;box-shadow:0 8px 32px #0006;z-index:30;overflow:hidden}.debug-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid #2a2a2a}.debug-header span{font-size:.8125rem;color:#888;font-weight:500}.debug-status{display:flex;align-items:center;gap:.375rem;font-size:.75rem;font-weight:500;padding:.25rem .5rem;border-radius:100px}.debug-status.connected{background:#22c55e26;color:#22c55e}.debug-status.checking{background:#f59e0b26;color:#f59e0b}.debug-status.disconnected{background:#ef444426;color:#ef4444}.debug-stats{padding:.75rem 1rem;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.debug-stat{display:flex;flex-direction:column;gap:.125rem}.debug-label{font-size:.6875rem;color:#555;text-transform:uppercase;letter-spacing:.05em}.debug-value{font-size:.8125rem;color:#fff;font-weight:500;font-family:SF Mono,Fira Code,monospace}.room-grid{flex:1;display:grid;gap:.5rem;padding:.5rem .5rem 6rem;min-height:0;align-content:center;justify-items:center;overflow:hidden}.room-grid.grid-1{grid-template-columns:minmax(0,500px);justify-content:center}.room-grid.grid-2{grid-template-columns:repeat(2,minmax(0,400px));justify-content:center}.room-grid.grid-4{grid-template-columns:repeat(2,minmax(0,350px));justify-content:center}.room-grid.grid-6{grid-template-columns:repeat(3,minmax(0,280px));justify-content:center}.room-grid.grid-9{grid-template-columns:repeat(3,minmax(0,250px));justify-content:center}.room-grid.grid-10{grid-template-columns:repeat(4,minmax(0,220px));justify-content:center}.room-tile{position:relative;width:100%;background:#1e1e1e;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:2px solid transparent;transition:border-color .2s;aspect-ratio:4 / 3}.room-tile.speaking{border-color:#22c55e}.room-tile.self{border-color:#8b5cf6}.tile-video{width:100%;height:100%}.tile-video-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#2a2a2a,#1e1e1e);display:flex;align-items:center;justify-content:center}.tile-video-placeholder span{font-size:2rem;color:#444;font-weight:600}.tile-avatar{display:flex;flex-direction:column;align-items:center;gap:.75rem}.tile-avatar-circle{width:56px;height:56px;border-radius:50%;background:#8b5cf6;display:flex;align-items:center;justify-content:center}.tile-avatar-circle span{font-size:1.5rem;color:#fff;font-weight:600}.tile-avatar-name{font-size:1rem;color:#fff;font-weight:500}.tile-label{position:absolute;bottom:.5rem;left:.5rem;display:flex;align-items:center;gap:.25rem;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:.25rem .625rem;border-radius:100px}.tile-label span{font-size:.75rem;color:#fff;font-weight:500}.you-label{color:#888!important}.tile-muted{position:absolute;top:.5rem;right:.5rem;width:28px;height:28px;background:#ef4444;border-radius:50%;display:flex;align-items:center;justify-content:center}.tile-muted svg{color:#fff}.tile-connecting{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#f59e0b}.screen-share-overlay{position:absolute;top:.75rem;right:.75rem;bottom:.75rem;left:.75rem;top:4.5rem;border-radius:20px;background:#0a0a0a;display:flex;flex-direction:column;z-index:15;overflow:hidden;border:1px solid #2a2a2a}.screen-share-header{position:absolute;top:.75rem;left:.75rem;display:flex;align-items:center;gap:.5rem;z-index:5}.screen-share-badge{display:flex;align-items:center;gap:.375rem;background:#22c55e;padding:.375rem .75rem;border-radius:100px}.screen-share-badge svg{width:14px;height:14px;color:#fff}.screen-share-badge span{font-size:.8125rem;color:#fff;font-weight:600}.screen-share-stop{display:flex;align-items:center;gap:.375rem;background:#ef4444;border:none;padding:.375rem .75rem;border-radius:100px;cursor:pointer;transition:background .15s}.screen-share-stop:hover{background:#dc2626}.screen-share-stop svg{width:14px;height:14px;color:#fff}.screen-share-stop span{font-size:.8125rem;color:#fff;font-weight:600}.screen-share-content{flex:1;display:flex;align-items:center;justify-content:center;background:#0a0a0a}.screen-share-content span{font-size:1rem;color:#444}.screen-share-pips{position:absolute;top:.75rem;right:.75rem;display:flex;flex-direction:column;gap:.5rem;z-index:5}.screen-pip{width:140px;height:90px;background:#1e1e1e;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;border:2px solid #2a2a2a;box-shadow:0 4px 16px #0006}.screen-pip.speaking{border-color:#22c55e}.screen-pip-avatar{width:40px;height:40px;border-radius:50%;background:#8b5cf6;display:flex;align-items:center;justify-content:center}.screen-pip-avatar span{font-size:1rem;color:#fff;font-weight:600}.screen-pip-name{font-size:.75rem;color:#fff;font-weight:500}.screen-pip.more{background:#2a2a2a}.screen-pip.more span{font-size:1rem;color:#888;font-weight:600}.room-controls{position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.75rem;background:#1e1e1ee6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:.75rem 1rem;border-radius:100px;border:1px solid #2a2a2a;box-shadow:0 8px 32px #0006;z-index:25}.room-ctrl-btn{width:56px;height:56px;border-radius:50%;background:#2a2a2a;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.room-ctrl-btn svg{width:24px;height:24px;color:#fff}.room-ctrl-btn:hover{background:#3a3a3a;transform:scale(1.05)}.room-ctrl-btn.muted{background:#ef4444}.room-ctrl-btn.muted:hover{background:#dc2626}.room-ctrl-btn.screen.active{background:#22c55e}.room-ctrl-btn.end{background:#ef4444;width:64px;border-radius:100px}.room-ctrl-btn.end:hover{background:#dc2626}.room-ctrl-divider{width:1px;height:32px;background:#3a3a3a;margin:0 .25rem}@media (max-width: 768px){.rooms-entry{padding:1.5rem}.rooms-logo{font-size:2.5rem}.rooms-entry-card{border-radius:20px}.entry-form{padding:1.25rem}.room-header{flex-wrap:wrap;gap:.5rem;margin:.5rem;padding:.625rem .75rem}.room-grid{padding:.5rem .5rem 5rem;gap:.375rem}.room-leave-btn span{display:none}.participants-dropdown{right:.5rem;width:calc(100% - 1rem);max-width:320px}.room-grid.grid-2,.room-grid.grid-4{grid-template-columns:repeat(2,1fr)}.room-grid.grid-6,.room-grid.grid-9{grid-template-columns:repeat(3,1fr)}.room-grid.grid-10{grid-template-columns:repeat(4,1fr)}.tile-avatar-circle{width:48px;height:48px}.tile-avatar-circle span{font-size:1.25rem}.tile-video-placeholder span{font-size:1.5rem}.room-controls{bottom:1rem;padding:.5rem .75rem;gap:.5rem}.room-ctrl-btn{width:48px;height:48px}.room-ctrl-btn svg{width:20px;height:20px}.room-ctrl-btn.end{width:56px}.room-ctrl-divider{height:24px}.screen-share-pips{flex-direction:row;top:auto;bottom:6rem;right:50%;transform:translate(50%)}.screen-pip{width:100px;height:70px}.screen-pip-avatar{width:32px;height:32px}.screen-pip-avatar span{font-size:.875rem}}@media (max-width: 480px){.room-grid.grid-6{grid-template-columns:repeat(2,1fr)}.room-grid.grid-9,.room-grid.grid-10{grid-template-columns:repeat(3,1fr)}.entry-tab{font-size:.8125rem;padding:.875rem}.room-tile{border-radius:12px}}:root{--bg-primary: #131212;--bg-secondary: #1a1919;--bg-tertiary: #222121;--bg-card: #1e1d1d;--accent-primary: #16BE00;--accent-secondary: #563062;--accent-tertiary: #f59e0b;--accent-danger: #ef4444;--text-primary: #ffffff;--text-secondary: #585858;--text-muted: #4D4D4D;--border-color: #4D4D4D;--border-accent: #563062;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 20px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .5);--shadow-glow: 0 0 30px rgba(0, 212, 170, .2);--font-display: "Inter", sans-serif;--font-mono: "JetBrains Mono", monospace;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease;--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--safe-area-left: env(safe-area-inset-left, 0px);--safe-area-right: env(safe-area-inset-right, 0px)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}@media (max-width: 380px){html{font-size:14px}}body{font-family:var(--font-display);font-weight:500;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6}#root{position:relative;z-index:1;min-height:100vh}button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:1rem;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{cursor:not-allowed;opacity:.6}input{font-family:inherit;font-size:1rem;-webkit-tap-highlight-color:transparent}a,button,input,select,textarea{touch-action:manipulation}a{color:var(--accent-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--text-primary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{background:var(--accent-primary);color:var(--bg-primary)}.spinner{display:inline-block;width:20px;height:20px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (hover: none){button:hover,a:hover{transform:none!important}}@supports (height: 100dvh){.full-height{height:100dvh}}.no-select{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}