.file-transfer{background:#0a0a0a;border:1px solid #D4FF00;border-radius:8px;padding:1rem;margin-top:1rem}.file-transfer-header{margin-bottom:1rem}.file-transfer-header h3{color:#d4ff00;font-size:1.2rem;margin:0}.drop-zone{border:2px dashed #D4FF00;border-radius:8px;padding:2rem;text-align:center;cursor:pointer;transition:all .3s ease;background:#d4ff000d}.drop-zone:hover{background:#d4ff001a;border-color:#fff}.drop-zone.dragging{background:#d4ff0033;border-color:#fff;border-style:solid}.drop-zone-content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.drop-zone-icon{font-size:3rem}.drop-zone-text{color:#d4ff00;font-size:1rem;margin:0}.transfer-list{margin-top:1.5rem}.transfer-list h4{color:#d4ff00;font-size:1rem;margin:0 0 1rem}.transfer-item{background:#d4ff000d;border:1px solid rgba(212,255,0,.3);border-radius:6px;padding:.75rem;margin-bottom:.75rem}.transfer-item.complete{border-color:#00ff0080}.transfer-item.error{border-color:#ff000080}.transfer-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.transfer-name{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.transfer-icon{font-size:1.2rem;flex-shrink:0}.transfer-filename{color:#fff;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transfer-meta{display:flex;align-items:center;gap:.75rem;font-size:.85rem;color:#d4ff00;flex-shrink:0}.transfer-size{color:#d4ff00cc}.transfer-direction{font-size:1.2rem}.transfer-duration{color:#d4ff0099}.progress-bar{position:relative;width:100%;height:24px;background:#00000080;border-radius:12px;overflow:hidden;margin-top:.5rem}.progress-fill{height:100%;background:linear-gradient(90deg,#d4ff00,#a8cc00);transition:width .3s ease;border-radius:12px}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#0a0a0a;font-weight:700;font-size:.85rem;text-shadow:0 0 2px rgba(255,255,255,.5)}.transfer-error,.transfer-complete{margin-top:.5rem;padding:.5rem;border-radius:4px;font-size:.85rem}.transfer-error{background:#ff00001a;border:1px solid rgba(255,0,0,.3);color:#ff6b6b}.transfer-complete{background:#00ff001a;border:1px solid rgba(0,255,0,.3);color:#51cf66}@media (max-width: 768px){.file-transfer{padding:.75rem}.drop-zone{padding:1.5rem}.drop-zone-icon{font-size:2rem}.drop-zone-text{font-size:.9rem}.transfer-info{flex-direction:column;align-items:flex-start;gap:.5rem}.transfer-meta{width:100%;justify-content:space-between}}.chat-panel{display:flex;flex-direction:column;height:100%;width:100%}.chat-content{background:#0f0f0f;display:flex;flex-direction:column;height:100%;flex:1}.chat-header{padding:1.5rem 2rem;border-bottom:1px solid #1a1a1a;display:flex;justify-content:space-between;align-items:center;background:#0a0a0a}.chat-header h3{margin:0;font-size:1.1rem;font-weight:500;color:#d4ff00}.peer-count{font-size:.85rem;color:#888}.chat-messages{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track{background:#0a0a0a}.chat-messages::-webkit-scrollbar-thumb{background:#333;border-radius:3px}.chat-messages::-webkit-scrollbar-thumb:hover{background:#444}.no-messages{flex:1;display:flex;align-items:center;justify-content:center;color:#666;font-size:.9rem;text-align:center;padding:2rem}.message{display:flex;flex-direction:column;max-width:80%;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.self{align-self:flex-end}.message.other{align-self:flex-start}.message.system{align-self:center;max-width:100%;text-align:center}.system-message-text{padding:.625rem 1.25rem;background:#1a1a1a;border:1px solid #333;border-radius:20px;font-size:.8rem;color:#888;font-style:italic;cursor:default;-webkit-user-select:none;user-select:none}.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;gap:.75rem}.message-author{font-size:.75rem;font-weight:500;color:#d4ff00}.message.other .message-author{color:#888}.message-time{font-size:.7rem;color:#666}.message-text{padding:.875rem 1.125rem;border-radius:12px;font-size:.9rem;line-height:1.5;word-wrap:break-word;white-space:pre-wrap}.message.self .message-text{background:#d4ff00;color:#0a0a0a;border-bottom-right-radius:4px}.message.other .message-text{background:#1a1a1a;color:#fff;border-bottom-left-radius:4px}.chat-input-container{padding:1.5rem 2rem;border-top:1px solid #1a1a1a;background:#0a0a0a;display:flex;gap:.75rem;position:relative}.file-transfer-toggle{background:#1a1a1a;border:1px solid #333;border-radius:8px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.25rem;transition:all .2s ease;flex-shrink:0}.file-transfer-toggle:hover{background:#252525;border-color:#d4ff00;transform:translateY(-1px)}.file-transfer-toggle:active{transform:translateY(0)}.chat-input{flex:1;padding:.875rem 1.125rem;background:#0f0f0f;border:1px solid #1a1a1a;border-radius:12px;color:#fff;font-size:.9rem;font-family:inherit;resize:none;outline:none;transition:all .2s ease;max-height:120px;overflow-y:auto}.chat-input:focus{border-color:#d4ff00;background:#1a1a1a}.chat-input::placeholder{color:#666}.send-button{padding:.875rem 1.5rem;border:none;border-radius:12px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s ease;white-space:nowrap}.send-button:disabled{cursor:not-allowed;opacity:.5}.send-button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 12px #d4ff004d}.file-transfer-overlay{position:absolute;bottom:100%;left:2rem;right:2rem;max-height:400px;background:#0f0f0f;border:1px solid #1a1a1a;border-radius:12px 12px 0 0;box-shadow:0 -4px 20px #00000080;z-index:100;display:flex;flex-direction:column}.file-transfer-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid #1a1a1a;background:#0a0a0a;border-radius:12px 12px 0 0}.file-transfer-header h3{margin:0;font-size:1rem;font-weight:500;color:#d4ff00}.close-button{background:transparent;border:none;color:#888;font-size:1.5rem;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease}.close-button:hover{background:#1a1a1a;color:#fff}.file-transfer-content{flex:1;overflow-y:auto;padding:1rem}.peer-file-transfer{margin-bottom:1rem}.peer-file-transfer:last-child{margin-bottom:0}@media (max-width: 640px){.chat-header{padding:1rem 1.5rem}.message{max-width:90%}.file-transfer-overlay{left:1rem;right:1rem}}.call-container{display:flex;flex-direction:column;height:100vh;background:#0a0a0a;color:#fff;overflow:hidden}.call-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:#0f0f0f;border-bottom:1px solid #1a1a1a}.call-header h1{font-size:2rem;font-weight:300;color:#d4ff00;margin:0;text-transform:lowercase}.call-info{display:flex;gap:2rem;align-items:center;font-size:.9rem}.room-id{color:#888;font-family:Courier New,monospace}.status{padding:.25rem .75rem;border-radius:12px;font-size:.85rem;font-weight:500}.status.connected{background:#d4ff001a;color:#d4ff00;border:1px solid rgba(212,255,0,.3)}.status.disconnected{background:#ffffff0d;color:#666;border:1px solid #333}.error-banner{background:#ff000026;border:2px solid rgba(255,0,0,.5);color:#ff6b6b;padding:1rem 2rem;text-align:center;font-size:.9rem;font-weight:500;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.call-layout{display:flex;flex:1;overflow:hidden;position:relative}.video-grid-container{flex:1;display:flex;align-items:center;justify-content:center;background:#000;padding:1rem;transition:all .3s ease;overflow:hidden}.video-grid-container.chat-open,.video-grid-container.chat-closed{margin-right:0}.video-grid{display:grid;gap:1rem;width:100%;height:100%;max-width:100%;max-height:100%}.grid-video-container{position:relative;background:#000;border-radius:12px;overflow:hidden;border:2px solid #1a1a1a;transition:all .3s ease;min-height:0;display:flex;align-items:center;justify-content:center}.grid-video-container:hover{border-color:#d4ff00;box-shadow:0 0 20px #d4ff0033}.grid-video{width:100%;height:100%;object-fit:cover;background:#000}.no-call-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.placeholder-content{text-align:center;color:#666}.placeholder-content h2{font-size:2rem;margin-bottom:1rem;color:#999}.placeholder-content p{font-size:1.1rem;color:#666}.chat-sidebar{width:400px;background:#0a0a0a;border-left:1px solid #1a1a1a;display:flex;flex-direction:column;transition:all .3s ease;overflow:hidden}.chat-sidebar.closed{width:0;border-left:none}.chat-sidebar.open{width:400px}.video-overlays{position:fixed;top:5rem;right:2rem;display:flex;flex-direction:column;gap:1rem;z-index:100;max-height:calc(100vh - 12rem);overflow-y:auto}.screenshare-view{width:100%;height:100%;display:flex;flex-direction:column;gap:1rem;padding:1rem;background:#000;overflow-y:auto}.screenshare-container{position:relative;width:100%;flex:1;min-height:400px;background:#000;border-radius:12px;overflow:hidden;border:2px solid #D4FF00;box-shadow:0 0 30px #d4ff004d}.screenshare-video{width:100%;height:100%;object-fit:contain}.screenshare-label{position:absolute;top:1rem;left:1rem;background:#000c;padding:.5rem 1rem;border-radius:8px;font-size:.9rem;color:#d4ff00;font-weight:500}.view-toggle-btn{position:fixed;top:5.5rem;right:2rem;z-index:150;background:#d4ff00;color:#0a0a0a;border:none;border-radius:12px;padding:.75rem 1.5rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #d4ff004d}.view-toggle-btn:hover{background:#e5ff33;transform:translateY(-2px);box-shadow:0 6px 16px #d4ff0066}.view-toggle-btn:active{transform:translateY(0);background:#c5df00}.video-container{position:relative;background:#000;border-radius:12px;overflow:hidden;border:2px solid #1a1a1a;transition:all .3s ease;width:240px;height:180px}.video-overlays .video-container{width:240px;height:180px}.video-container:hover{border-color:#d4ff00;box-shadow:0 0 20px #d4ff0033}.video-container.speaking,.grid-video-container.speaking{border-color:#d4ff00;animation:speakingPulse 1.5s ease-in-out infinite;z-index:10}.video-container.speaking{transform:scale(1.05)}@keyframes speakingPulse{0%,to{box-shadow:0 0 20px #d4ff0099,0 0 40px #d4ff0066,inset 0 0 20px #d4ff001a;border-color:#d4ff00}50%{box-shadow:0 0 30px #d4ff00cc,0 0 60px #d4ff0099,inset 0 0 30px #d4ff0033;border-color:#e5ff33}}.video-container.peer.speaking{width:320px;height:240px}.video-container.local{border-color:#d4ff00;width:200px;height:150px;aspect-ratio:auto;flex-shrink:0;box-shadow:0 0 15px #d4ff004d}.video-overlays .video-container.peer{width:240px;height:180px}.video{width:100%;height:100%;object-fit:cover}.video-label{position:absolute;bottom:.75rem;left:.75rem;background:#000000b3;padding:.5rem 1rem;border-radius:8px;font-size:.85rem;font-weight:500;color:#d4ff00;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.video-container.speaking .video-label,.grid-video-container.speaking .video-label{background:#d4ff0033;color:#d4ff00;font-weight:600;animation:labelPulse 1.5s ease-in-out infinite}@keyframes labelPulse{0%,to{background:#d4ff0033}50%{background:#d4ff0066}}.call-controls{display:flex;justify-content:center;align-items:center;gap:1rem;padding:2rem;background:#0f0f0f;border-top:1px solid #1a1a1a}.btn-primary,.btn-control,.btn-danger{padding:1rem 2rem;border:none;border-radius:12px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;font-family:inherit}.btn-primary{background:#d4ff00;color:#0a0a0a;min-width:200px}.btn-primary:hover:not(:disabled){background:#e5ff33;transform:translateY(-2px);box-shadow:0 4px 12px #d4ff004d}.btn-primary:active:not(:disabled){transform:translateY(0);background:#c5df00}.btn-primary:disabled{background:#666;color:#333;cursor:not-allowed;opacity:.6}.chat-toggle-btn{position:fixed;top:50%;right:1rem;transform:translateY(-50%);background:#d4ff001a;border:2px solid #D4FF00;color:#d4ff00;padding:.75rem 1rem;border-radius:12px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:inherit}.chat-toggle-btn:hover{background:#d4ff0033;transform:translateY(-50%) scale(1.05);box-shadow:0 0 20px #d4ff004d}@media (max-width: 1200px){.chat-sidebar.open{width:350px}}@media (max-width: 900px){.chat-sidebar.open{width:300px}.video-grid{gap:.5rem}}@media (max-width: 768px){.chat-sidebar{position:absolute;right:0;top:0;bottom:0;width:100%!important;max-width:400px;z-index:1000;box-shadow:-4px 0 20px #00000080}.chat-sidebar.closed{transform:translate(100%)}.chat-sidebar.open{transform:translate(0)}.chat-toggle-btn{right:.5rem}}.btn-control{background:#1a1a1a;color:#fff;width:60px;height:60px;padding:0;font-size:1.5rem;border:2px solid #2a2a2a}.btn-control:hover:not(:disabled){background:#2a2a2a;border-color:#d4ff00}.btn-control:active:not(:disabled){transform:scale(.95)}.btn-control.disabled{background:#0f0f0f;color:#666;border-color:#1a1a1a}.btn-control.active{background:#d4ff00;color:#0a0a0a;border-color:#d4ff00}.btn-danger{background:#f44;color:#fff;min-width:150px}.btn-danger:hover:not(:disabled){background:#f66;transform:translateY(-2px);box-shadow:0 4px 12px #ff44444d}.btn-danger:active:not(:disabled){transform:translateY(0);background:#d33}@media (max-width: 1024px){.video-grid-main{grid-template-columns:1fr}.video-container.local-screen,.video-container.peer-screen{min-height:300px}}@media (max-width: 768px){.video-grid{padding:1rem}.video-grid-main{grid-template-columns:1fr}.video-container.local{width:120px;height:90px}.video-grid-thumbnails{gap:.5rem}.call-header{flex-direction:column;gap:1rem;padding:1rem}.call-info{flex-direction:column;gap:.5rem;font-size:.8rem}.call-controls{flex-wrap:wrap;padding:1rem;gap:.5rem}.btn-control{width:50px;height:50px;font-size:1.2rem}.btn-primary{min-width:150px;padding:.75rem 1.5rem}.btn-danger{min-width:120px;padding:.75rem 1.5rem}}.install-prompt{position:fixed;bottom:1rem;right:1rem;z-index:1000;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.install-prompt-content{background:#0a0a0a;border:2px solid #D4FF00;border-radius:12px;padding:1.5rem;max-width:320px;box-shadow:0 4px 20px #d4ff004d;position:relative}.install-prompt-close{position:absolute;top:.5rem;right:.5rem;background:none;border:none;color:#d4ff00;font-size:1.5rem;cursor:pointer;padding:.25rem .5rem;line-height:1;transition:color .2s ease}.install-prompt-close:hover{color:#fff}.install-prompt-icon{font-size:3rem;text-align:center;margin-bottom:1rem}.install-prompt-content h3{color:#d4ff00;font-size:1.3rem;margin:0 0 .5rem;text-align:center}.install-prompt-content p{color:#d4ff00cc;font-size:.9rem;margin:0 0 1rem;text-align:center}.install-prompt-content ul{list-style:none;padding:0;margin:0 0 1.5rem}.install-prompt-content li{color:#d4ff00b3;font-size:.85rem;padding:.25rem 0 .25rem 1.5rem;position:relative}.install-prompt-content li:before{content:"✓";position:absolute;left:0;color:#d4ff00;font-weight:700}.install-prompt-btn{width:100%;padding:.75rem 1.5rem;background:#d4ff00;color:#0a0a0a;border:none;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease}.install-prompt-btn:hover{background:#fff;transform:scale(1.02)}.install-prompt-btn:active{transform:scale(.98)}@media (max-width: 768px){.install-prompt{bottom:0;right:0;left:0;border-radius:0}.install-prompt-content{max-width:100%;border-radius:12px 12px 0 0;border-left:none;border-right:none;border-bottom:none}}.notification-settings{max-width:600px;margin:0 auto;padding:2rem;background:var(--bg-secondary, #1a1a1a);border-radius:8px}.notification-settings h2{margin-top:0;margin-bottom:2rem;color:var(--accent, #D4FF00);font-size:1.5rem}.notification-settings h3{margin-top:0;margin-bottom:1rem;color:var(--text-primary, #ffffff);font-size:1.1rem;font-weight:600}.settings-section{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--border, #333)}.settings-section:last-of-type{border-bottom:none}.permission-status{padding:1rem;background:var(--bg-tertiary, #0a0a0a);border-radius:4px;text-align:center}.status-granted{color:#4ade80;font-weight:600}.status-denied{color:#f87171;font-weight:600}.setting-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 0;cursor:pointer;-webkit-user-select:none;user-select:none}.setting-item.indent{padding-left:2rem}.setting-item input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:var(--accent, #D4FF00)}.setting-item input[type=range]{flex:1;margin-left:auto;max-width:200px;accent-color:var(--accent, #D4FF00)}.setting-item input[type=time]{padding:.5rem;background:var(--bg-tertiary, #0a0a0a);border:1px solid var(--border, #333);border-radius:4px;color:var(--text-primary, #ffffff);font-family:inherit;margin-left:auto}.setting-item input:disabled{opacity:.5;cursor:not-allowed}.setting-item span{flex:1;color:var(--text-primary, #ffffff)}.help-text{margin:.5rem 0 0 2rem;font-size:.875rem;color:var(--text-secondary, #999);font-style:italic}.settings-actions{display:flex;gap:1rem;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border, #333)}.btn-primary,.btn-secondary{flex:1;padding:.75rem 1.5rem;border:none;border-radius:4px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background:var(--accent, #D4FF00);color:var(--bg-primary, #0a0a0a)}.btn-primary:hover:not(:disabled){background:var(--accent-hover, #c4ef00);transform:translateY(-1px)}.btn-secondary{background:transparent;color:var(--text-primary, #ffffff);border:1px solid var(--border, #333)}.btn-secondary:hover:not(:disabled){background:var(--bg-tertiary, #0a0a0a);border-color:var(--accent, #D4FF00)}.btn-primary:disabled,.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.notification-settings.loading{text-align:center;padding:4rem 2rem;color:var(--text-secondary, #999)}.settings-container{min-height:100vh;background:linear-gradient(135deg,#0a0a0a,#0f0f0f,#0a0a0a);color:#fff;padding:2rem 1.5rem}.settings-content{max-width:900px;margin:0 auto}.settings-nav{margin-bottom:2rem}.back-link{display:inline-flex;align-items:center;gap:.5rem;color:#888;text-decoration:none;font-size:.9rem;font-weight:500;transition:all .2s ease}.back-link:hover{color:#d4ff00}.back-link svg{width:20px;height:20px;transition:transform .2s ease}.back-link:hover svg{transform:translate(-4px)}.settings-header{margin-bottom:3rem}.settings-title{font-size:3rem;font-weight:700;margin-bottom:.5rem;background:linear-gradient(135deg,#d4ff00,#a8cc00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.settings-subtitle{color:#888;font-size:1.1rem;font-weight:300}.settings-message{margin-bottom:1.5rem;padding:1rem 1.25rem;border-radius:12px;border:1px solid;display:flex;align-items:center;gap:.75rem;font-size:.95rem;font-weight:500}.settings-message.success{background:#00ff001a;border-color:#00ff004d;color:#0f0}.settings-message.error{background:#ff44441a;border-color:#ff44444d;color:#f44}.settings-message svg{width:20px;height:20px;flex-shrink:0}.settings-section{background:linear-gradient(135deg,#1a1a1a,#151515);border:1px solid rgba(212,255,0,.2);border-radius:16px;padding:2rem;margin-bottom:1.5rem;box-shadow:0 8px 32px #d4ff000d;transition:all .3s ease}.settings-section:hover{border-color:#d4ff0066;box-shadow:0 12px 48px #d4ff001a}.section-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}.section-icon{width:40px;height:40px;border-radius:50%;background:#d4ff001a;display:flex;align-items:center;justify-content:center;flex-shrink:0}.section-icon svg{width:24px;height:24px;color:#d4ff00}.section-title{font-size:1.5rem;font-weight:700;color:#d4ff00;margin:0}.form-group{margin-bottom:1.5rem}.form-label{display:block;font-size:.9rem;font-weight:500;color:#ccc;margin-bottom:.5rem}.input-row{display:flex;gap:.75rem}.settings-input{flex:1;padding:.875rem 1.125rem;background:#00000080;border:1px solid rgba(212,255,0,.3);border-radius:10px;color:#fff;font-size:.95rem;outline:none;transition:all .2s ease}.settings-input:focus{border-color:#d4ff00;background:#000000b3;box-shadow:0 0 0 3px #d4ff001a}.info-box{padding:1rem;background:#0000004d;border:1px solid rgba(255,255,255,.05);border-radius:10px}.info-label{font-size:.85rem;color:#888;margin-bottom:.25rem}.info-value{font-family:Courier New,monospace;font-size:.9rem;color:#fff}.btn{padding:.875rem 1.5rem;border:none;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#d4ff00;color:#0a0a0a;box-shadow:0 4px 16px #d4ff0033}.btn-primary:hover:not(:disabled){background:#e0ff33;transform:translateY(-2px);box-shadow:0 6px 24px #d4ff0066}.btn-danger{background:#ff4444e6;color:#fff;box-shadow:0 4px 16px #f443}.btn-danger:hover:not(:disabled){background:#f44;transform:translateY(-2px);box-shadow:0 6px 24px #f446}.divider{border-top:1px solid rgba(255,255,255,.1);margin:1.5rem 0}.status-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:20px;font-size:.85rem;font-weight:600}.status-badge.granted{background:#d4ff0026;color:#d4ff00;border:1px solid rgba(212,255,0,.3)}.status-badge.denied{background:#ff444426;color:#f44;border:1px solid rgba(255,68,68,.3)}.status-badge.default{background:#88888826;color:#888;border:1px solid rgba(136,136,136,.3)}@media (max-width: 768px){.settings-container{padding:1.5rem 1rem}.settings-title{font-size:2.25rem}.settings-subtitle{font-size:1rem}.settings-section{padding:1.5rem}.section-title{font-size:1.25rem}.input-row{flex-direction:column}.btn{width:100%}}.room-grid-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;min-height:100svh;padding:2rem;background:radial-gradient(circle at 50% -20%,#1a1a2e,#0a0a0f);color:#fff;overflow-y:auto}.room-grid-title{font-size:2.5rem;font-weight:700;margin-bottom:.5rem;background:linear-gradient(135deg,#00d4ff,#0f8,#d4ff00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 30px rgba(0,212,255,.3);text-align:center}.room-grid-subtitle{font-size:1.1rem;color:#889;margin-bottom:3rem;text-align:center;max-width:600px}.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;max-width:1200px;width:100%;padding:1rem}.room-card{position:relative;height:200px;background:#ffffff08;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.05);border-radius:20px;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;overflow:hidden;transition:all .4s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 10px 30px #0003}.room-card:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 20px 40px #0006;border-color:#ffffff1a;background:#ffffff0d}.room-card.idle:hover .card-glow{opacity:.5}.room-card.active{border-color:#ffa5004d;background:linear-gradient(145deg,#ffa5000d,#0003)}.room-card.active:hover{box-shadow:0 0 30px #ffa50033}.card-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(0,212,255,.1),transparent 70%);opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:0}.room-card-header{display:flex;justify-content:space-between;align-items:center;z-index:1}.room-number{font-family:Monaco,Menlo,monospace;font-size:.8rem;color:#666;letter-spacing:1px;text-transform:uppercase;background:#ffffff0d;padding:4px 8px;border-radius:6px}.status-badge{font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:12px;letter-spacing:.5px;text-transform:uppercase}.status-badge.open{background:#00ff881a;color:#0f8;border:1px solid rgba(0,255,136,.2);box-shadow:0 0 10px #00ff881a}.status-badge.busy{background:#ffa5001a;color:orange;border:1px solid rgba(255,165,0,.2);animation:pulse-orange 2s infinite}.room-card-body{display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;flex:1}.signal-viz{display:flex;gap:6px;height:24px;align-items:flex-end;margin-bottom:12px;opacity:.8}.signal-bar{width:6px;background:#333;border-radius:3px;transition:all .3s ease}.room-card:hover .signal-bar{background:#555;box-shadow:0 0 8px #ffffff1a}.signal-bar:nth-child(1){height:40%}.signal-bar:nth-child(2){height:70%}.signal-bar:nth-child(3){height:100%}.room-card.active .signal-bar{background:orange;box-shadow:0 0 10px #ffa50066}.room-card.active .signal-bar.animating{animation:signal-bounce 1s ease-in-out infinite}.signal-bar:nth-child(1){animation-delay:0s}.signal-bar:nth-child(2){animation-delay:.1s}.signal-bar:nth-child(3){animation-delay:.2s}.room-id-display{font-size:1.8rem;font-weight:700;color:#fff;letter-spacing:2px;font-family:Monaco,monospace;text-shadow:0 2px 10px rgba(0,0,0,.5)}.room-card-footer{display:flex;justify-content:center;z-index:1}.join-btn{width:100%;padding:12px;border:none;border-radius:12px;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s ease;background:#ffffff0d;color:#aaa;border:1px solid rgba(255,255,255,.05)}.room-card:hover .join-btn{background:#00d4ff26;border-color:#00d4ff4d;color:#00d4ff;box-shadow:0 0 20px #00d4ff33}.room-card.active:hover .join-btn{background:#ffa50033;border-color:#ffa5004d;color:orange;box-shadow:0 0 20px #ffa50033}.recent-rooms-section{width:100%;max-width:1000px;margin-bottom:3rem;padding:1.5rem;background:#ffffff08;border:1px solid rgba(255,255,255,.05);border-radius:20px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.section-title{font-size:1.1rem;font-weight:700;color:orange;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;text-transform:uppercase;letter-spacing:1px}.recent-rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.recent-room-card{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:#ffffff08;border:1px solid rgba(255,255,255,.05);border-radius:12px;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}.recent-room-card:hover{background:#ffffff14;border-color:#fff3;transform:translateY(-2px);box-shadow:0 5px 15px #0003}.recent-room-info{display:flex;flex-direction:column}.recent-room-id{font-family:Monaco,monospace;font-size:1rem;color:#00d4ff;font-weight:700;margin-bottom:2px}.recent-room-card:hover .recent-room-id{color:#fff;text-shadow:0 0 10px rgba(0,212,255,.5)}.recent-room-time{font-size:.75rem;color:#888}.recent-delete-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%;color:#666;cursor:pointer;transition:all .2s ease;opacity:.5}.recent-room-card:hover .recent-delete-btn{opacity:1}.recent-delete-btn:hover{background:#ff6b6b33;color:#ff6b6b}.room-grid-empty{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;padding:4rem;color:#666;background:#ffffff05;border-radius:20px;border:1px dashed rgba(255,255,255,.1);animation:fade-in .5s ease}.empty-state-icon{font-size:4rem;margin-bottom:1.5rem;opacity:.5}.refresh-btn{margin-top:2rem;padding:1rem 3rem;background:linear-gradient(90deg,#00d4ff1a,#00ff881a);border:1px solid #00d4ff4d;color:#00d4ff;border-radius:30px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.refresh-btn:hover{background:linear-gradient(90deg,#00d4ff33,#0f83);box-shadow:0 0 20px #00d4ff33;transform:translateY(-2px)}@keyframes pulse-orange{0%{box-shadow:0 0 #ffa50066}70%{box-shadow:0 0 0 10px #ffa50000}to{box-shadow:0 0 #ffa50000}}@keyframes signal-bounce{0%,to{transform:scaleY(1);opacity:.5}50%{transform:scaleY(.5);opacity:1}}@keyframes fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 600px){.room-grid{grid-template-columns:1fr;max-width:400px}.room-grid-title{font-size:1.8rem}}.chat-room{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;background:linear-gradient(180deg,#0a0a0f,#12121a);color:#fff}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#0006;border-bottom:1px solid rgba(255,255,255,.1);gap:1rem}.back-button{padding:.5rem 1rem;border-radius:8px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease;border:1px solid rgba(255,255,255,.2);background:#ffffff0d;color:#fff;flex-shrink:0}.back-button:hover{background:#ffffff1a;border-color:#ffffff4d}.chat-header-info{display:flex;flex-direction:column;gap:.25rem}.chat-status{display:flex;align-items:center;gap:.5rem;font-weight:500}.status-dot{width:8px;height:8px;border-radius:50%}.status-dot.connected{background:#0f8;box-shadow:0 0 8px #0f8}.status-dot.waiting{background:#ffc107;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.room-id{font-size:.75rem;color:#666;font-family:monospace}.chat-header-actions{display:flex;gap:.75rem}.header-btn{padding:.5rem 1rem;border-radius:8px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease;border:none;font-family:inherit}.invite-btn{background:#00d4ff26;color:#00d4ff;border:1px solid rgba(0,212,255,.3)}.invite-btn:hover{background:#00d4ff40}.live-btn{background:linear-gradient(135deg,#8b5cf6,#d946ef);color:#fff}.live-btn:hover{transform:scale(1.02);box-shadow:0 0 20px #8b5cf666}.floating-video-preview{position:relative;margin:.75rem 1rem 1rem;border-radius:12px;overflow:hidden;background:#0a0a0f;border:1px solid rgba(139,92,246,.5);box-shadow:0 4px 16px #8b5cf633}.floating-video-preview video{width:100%;aspect-ratio:16 / 9;object-fit:cover;display:block;background:#000}.floating-video-info{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:linear-gradient(transparent,#000c)}.floating-video-info span{font-size:.9rem;font-weight:500;color:#fff}.join-call-btn{padding:.5rem 1rem;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;border:none;background:linear-gradient(135deg,#8b5cf6,#d946ef);color:#fff;transition:all .2s ease}.join-call-btn:hover{transform:scale(1.05);box-shadow:0 0 16px #8b5cf680}.live-mode{position:fixed;inset:0;background:#000;display:flex;flex-direction:column;z-index:100}.main-video-container{flex:1;position:relative;display:flex;align-items:center;justify-content:center;background:#0a0a0f}.main-video{width:100%;height:100%;object-fit:contain}.waiting-overlay{display:flex;flex-direction:column;align-items:center;gap:1rem;color:#666}.waiting-icon{font-size:4rem;opacity:.5}.video-thumbnails{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:10}.thumbnail-video{position:relative;width:140px;height:100px;border-radius:12px;overflow:hidden;background:#1a1a2e;border:2px solid rgba(255,255,255,.2);box-shadow:0 4px 20px #00000080}.thumbnail-video video{width:100%;height:100%;object-fit:cover}.thumbnail-label{position:absolute;bottom:4px;left:8px;font-size:.65rem;background:#0009;padding:2px 6px;border-radius:4px;color:#fff}.thumbnail-video.local{border-color:#00d4ff}.thumbnail-video.remote{border-color:#ff6b6b}.control-bar{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;gap:12px;padding:12px 20px;background:#000000b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:50px;border:1px solid rgba(255,255,255,.1);z-index:20}.control-btn{width:52px;height:52px;border-radius:50%;border:none;background:#ffffff1a;color:#fff;font-size:1.4rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;position:relative}.control-btn:hover{background:#fff3;transform:scale(1.08)}.control-btn.active{background:#00d4ff4d;border:2px solid #00d4ff}.control-btn.muted{background:#ff47574d;border:2px solid #ff4757}.control-btn.end-call{background:#ff4757}.control-btn.end-call:hover{background:#f34}.control-btn .badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;background:#ff4757;border-radius:9px;font-size:.65rem;display:flex;align-items:center;justify-content:center;padding:0 4px}.chat-panel{position:absolute;top:0;right:0;width:350px;height:100%;background:#0a0a0ff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-left:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;transform:translate(100%);transition:transform .3s ease;z-index:30}.chat-panel.open{transform:translate(0)}.chat-panel-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid rgba(255,255,255,.1);font-weight:600;font-size:1.1rem}.close-chat{width:32px;height:32px;border-radius:50%;border:none;background:#ffffff1a;color:#fff;font-size:1rem;cursor:pointer}.close-chat:hover{background:#fff3}.chat-panel-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem}.empty-chat-panel{flex:1;display:flex;align-items:center;justify-content:center;color:#555}.chat-msg{display:flex;max-width:90%}.chat-msg.own{align-self:flex-end}.chat-msg.peer{align-self:flex-start}.chat-msg-bubble{padding:.5rem .75rem;border-radius:12px;font-size:.9rem}.chat-msg.own .chat-msg-bubble{background:linear-gradient(135deg,#00d4ff,#0f8);color:#000}.chat-msg.peer .chat-msg-bubble{background:#ffffff1a}.chat-msg-time{font-size:.6rem;opacity:.6;margin-top:2px;text-align:right}.chat-panel-input{display:flex;gap:.5rem;padding:1rem;border-top:1px solid rgba(255,255,255,.1)}.panel-attach-btn,.panel-send-btn{width:36px;height:36px;border-radius:50%;border:none;background:#ffffff1a;color:#fff;font-size:1rem;cursor:pointer;flex-shrink:0}.panel-attach-btn:hover,.panel-send-btn:hover:not(:disabled){background:#fff3}.panel-send-btn:disabled{opacity:.3;cursor:not-allowed}.panel-input{flex:1;background:#ffffff1a;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:.5rem 1rem;color:#fff;font-size:.9rem;outline:none}.panel-input:focus{border-color:#00d4ff}.panel-input::placeholder{color:#555}.messages-container{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.empty-chat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#555;gap:.5rem}.empty-icon{font-size:3rem;opacity:.5}.empty-text{font-size:.9rem}.message{display:flex;max-width:75%}.message.own{align-self:flex-end}.message.peer{align-self:flex-start}.message-bubble{padding:.75rem 1rem;border-radius:16px}.message.own .message-bubble{background:linear-gradient(135deg,#00d4ff,#0f8);color:#000;border-bottom-right-radius:4px}.message.peer .message-bubble{background:#ffffff1a;border-bottom-left-radius:4px}.message-content{word-break:break-word;line-height:1.4}.message-time{font-size:.65rem;opacity:.6;margin-top:.25rem;text-align:right}.chat-input-container{display:flex;gap:.5rem;padding:1rem;background:#0006;border-top:1px solid rgba(255,255,255,.1);align-items:flex-end}.attach-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;font-size:1.25rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.attach-btn:hover:not(:disabled){background:#ffffff1a;border-color:#00d4ff}.attach-btn:disabled{opacity:.5;cursor:not-allowed}.chat-input{flex:1;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.75rem 1rem;color:#fff;font-size:.95rem;font-family:inherit;resize:none;outline:none;min-height:44px;max-height:120px}.chat-input:focus{border-color:#00d4ff}.chat-input::placeholder{color:#555}.send-btn{width:44px;height:44px;border-radius:50%;border:none;background:linear-gradient(135deg,#00d4ff,#0f8);color:#000;font-size:1.25rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.send-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 0 20px #00d4ff66}.send-btn:disabled{opacity:.3;cursor:not-allowed}.attachment-preview{margin-top:.5rem;border-radius:8px;overflow:hidden;cursor:pointer}.image-preview img{max-width:200px;max-height:200px;border-radius:8px;display:block}.video-preview{position:relative;max-width:200px}.video-preview video{max-width:200px;max-height:150px;border-radius:8px;display:block}.video-preview .play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0006;font-size:2rem;color:#fff}.audio-preview{display:flex;flex-direction:column;gap:.25rem;background:#0000004d;padding:.5rem;border-radius:8px}.audio-preview audio{max-width:200px;height:32px}.audio-name{font-size:.75rem;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-preview{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:#0000004d;border-radius:8px;text-decoration:none;color:inherit}.file-preview:hover{background:#00000080}.file-icon{font-size:1.5rem}.file-info{display:flex;flex-direction:column;gap:.125rem}.file-name{font-size:.85rem;color:#fff;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:.7rem;color:#666}.media-viewer-overlay{position:fixed;inset:0;background:#000000f2;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.media-viewer-content{position:relative;max-width:90vw;max-height:90vh}.media-viewer-content img,.media-viewer-content video{max-width:90vw;max-height:90vh;border-radius:8px}.media-viewer-close{position:absolute;top:-40px;right:0;width:36px;height:36px;border-radius:50%;border:none;background:#fff3;color:#fff;font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center}.media-viewer-close:hover{background:#ffffff4d}.messages-container::-webkit-scrollbar,.chat-panel-messages::-webkit-scrollbar{width:6px}.messages-container::-webkit-scrollbar-track,.chat-panel-messages::-webkit-scrollbar-track{background:transparent}.messages-container::-webkit-scrollbar-thumb,.chat-panel-messages::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}@media (max-width: 768px){.chat-header{padding:.75rem 1rem}.message{max-width:85%}.image-preview img,.video-preview video{max-width:150px}.chat-panel{width:100%}.video-thumbnails{top:8px;right:8px}.thumbnail-video{width:100px;height:70px}.control-bar{bottom:16px;padding:10px 16px;gap:10px}.control-btn{width:46px;height:46px;font-size:1.2rem}}.node-app{min-height:100vh;background:linear-gradient(135deg,#0a0a0f,#1a1a2e)}.contacts-panel{position:fixed;right:0;top:0;bottom:0;width:280px;background:#141423f2;border-left:1px solid rgba(255,255,255,.1);padding:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.contacts-panel h3{color:#888;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}.contacts-list{display:flex;flex-direction:column;gap:.5rem}.contact-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;cursor:pointer;transition:all .2s ease;font-family:inherit;font-size:.9rem;text-align:left}.contact-item:hover{background:#00d4ff1a;border-color:#00d4ff}.contact-icon{font-size:1.25rem}.contact-id{font-family:monospace;color:#aaa}@media (max-width: 768px){.contacts-panel{display:none}}.debug-panel{position:fixed;top:10px;right:10px;background:#000000e6;border:1px solid #444;border-radius:8px;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,monospace;font-size:12px;z-index:10000;min-width:280px;max-width:350px;box-shadow:0 4px 20px #00000080}.debug-panel.collapsed{min-width:auto}.debug-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#1a1a1a;border-radius:8px 8px 0 0;cursor:pointer;-webkit-user-select:none;user-select:none}.debug-panel.collapsed .debug-header{border-radius:8px}.debug-close{background:none;border:none;color:#888;cursor:pointer;font-size:14px;padding:0 4px}.debug-close:hover{color:#fff}.debug-content{padding:8px 12px}.debug-section{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #333}.debug-section:last-of-type{border-bottom:none;margin-bottom:0}.debug-label{color:#888;font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.debug-value{color:#fff}.debug-value.state{font-size:14px;font-weight:600}.debug-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center}.debug-grid span:first-child{color:#888}.debug-streams{display:flex;flex-direction:column;gap:4px}.stream-row{display:flex;gap:8px;align-items:flex-start}.stream-label{color:#888;min-width:80px}.mono{font-family:Monaco,Menlo,monospace;font-size:11px}.ok{color:#4ade80}.warn{color:#fbbf24}.error{color:#f87171}.dim{color:#666}.debug-hint{text-align:center;color:#555;font-size:10px;margin-top:8px;padding-top:8px;border-top:1px solid #333}.audio-section{background:#8b5cf61a;border-radius:6px;padding:8px!important;margin:0 -4px 10px}.handshake-status{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}.handshake-item{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:4px;font-size:11px}.handshake-item.confirmed{background:#4ade8026;color:#4ade80}.handshake-item.pending{background:#fbbf2426;color:#fbbf24}.audio-levels{display:flex;flex-direction:column;gap:4px}.audio-level-row{display:flex;align-items:center;gap:8px}.audio-label{width:45px;font-size:10px;color:#888}.audio-bar-container{flex:1;height:8px;background:#222;border-radius:4px;overflow:hidden}.audio-bar{height:100%;background:#444;border-radius:4px;transition:width .05s ease-out}.audio-bar.active{background:linear-gradient(90deg,#4ade80,#22c55e)}.audio-bar.loud{background:linear-gradient(90deg,#fbbf24,#f59e0b)}.audio-value{width:30px;font-size:10px;color:#666;text-align:right}.app{min-height:100vh;display:flex;flex-direction:column}.header{padding:2.5rem 2rem;text-align:center;border-bottom:1px solid #1a1a1a}.header h1{font-size:3.5rem;margin-bottom:.5rem;font-weight:300;letter-spacing:-.03em;color:#d4ff00;text-transform:lowercase}.header p{color:#666;font-size:.85rem;font-weight:300;letter-spacing:.02em}.main{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.home-section{max-width:600px;width:100%;text-align:center}.hero{margin-bottom:3rem}.hero h2{font-size:2rem;font-weight:400;margin-bottom:1rem;letter-spacing:-.02em}.subtitle{color:#888;font-size:.95rem;font-weight:300}.actions{margin-bottom:3rem}.btn-large{padding:1.25rem 3rem;font-size:1.1rem;width:100%;margin-bottom:2rem}.divider{display:flex;align-items:center;gap:1rem;margin:2rem 0;color:#666;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em}.divider:before,.divider:after{content:"";flex:1;height:1px;background:#1a1a1a}.join-section{text-align:center}.join-section h3{margin-bottom:1rem;font-size:1.1rem;font-weight:400;letter-spacing:-.01em;color:#888}.user-info{display:flex;justify-content:center;align-items:center;gap:.75rem;padding:1rem;background:#0f0f0f;border:1px solid #1a1a1a;border-radius:12px;font-size:.85rem}.user-info .label{color:#666}.user-info .value{font-family:Courier New,monospace;color:#d4ff00}.input-group{display:flex;gap:.5rem}.room-input{flex:1;padding:.875rem 1.25rem;font-size:1rem;background:#0f0f0f;border:1px solid #1a1a1a;border-radius:12px;color:#fff;outline:none;transition:all .2s ease;font-weight:300}.room-input:focus{border-color:#d4ff00;background:#1a1a1a}.btn-primary,.btn-secondary{padding:.875rem 2rem;font-size:.95rem;font-weight:500;border:none;border-radius:12px;cursor:pointer;transition:all .2s ease;letter-spacing:-.01em}.btn-primary{background:#d4ff00;color:#0a0a0a}.btn-primary:hover{background:#e0ff33;transform:translateY(-1px);box-shadow:0 4px 16px #d4ff004d}.btn-secondary{background:#1a1a1a;color:#fff;border:1px solid #333}.btn-secondary:hover{background:#222;border-color:#d4ff00}.room-section{max-width:800px;width:100%}.room-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1.25rem;border-bottom:1px solid #1a1a1a}.room-header h2{font-size:1.5rem;font-weight:400;letter-spacing:-.02em}.connection-status{display:flex;align-items:center;gap:.75rem;margin-bottom:2rem;padding:1.25rem 1.5rem;background:#0f0f0f;border:1px solid #1a1a1a;border-radius:12px}.status-indicator{width:12px;height:12px;border-radius:50%;animation:pulse 2s infinite}.status-indicator.connected{background:#d4ff00;box-shadow:0 0 8px #d4ff0066}.status-indicator.disconnected{background:#666}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.peers-section{background:#0f0f0f;border:1px solid #1a1a1a;border-radius:12px;padding:2rem}.peers-section h3{margin-bottom:1.25rem;font-size:1.1rem;font-weight:500;letter-spacing:-.01em}.no-peers{color:#888;text-align:center;padding:2rem}.peers-list{list-style:none}.peer-item{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;margin-bottom:.75rem;background:#0a0a0a;border-radius:10px;border:1px solid #1a1a1a;transition:border-color .2s ease}.peer-item:hover{border-color:#d4ff00}.peer-id{font-family:Courier New,monospace;color:#d4ff00;font-size:.9rem;letter-spacing:.02em}.peer-status{color:#d4ff00;font-size:.85rem;font-weight:500}.footer{padding:2rem 1.5rem;text-align:center;border-top:1px solid #1a1a1a;color:#555;font-size:.8rem;font-weight:300;letter-spacing:.02em}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0a0a0a;color:#fff;font-weight:400;letter-spacing:-.01em}#root{min-height:100vh;display:flex;flex-direction:column}