*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#0f0f0f;color:#fff;min-height:100vh}#root{min-height:100vh}.video-grid{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.screen-share-container{position:relative;height:100%;background-color:#1a1a1a}.screen-share-video{width:100%;height:100%;object-fit:contain}.screen-share-label{position:absolute;top:10px;left:10px;padding:5px 15px;background-color:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;font-size:.85rem;color:#fff}.videos-container{flex:1;display:flex;position:relative;overflow:hidden;padding:15px}.videos-container.overlay-mode{position:absolute;top:0;left:0;right:0;bottom:0;flex:none;z-index:20}.video-wrapper-container{flex:1;position:relative}.video-wrapper-container.main-video{width:100%;height:100%}.video-wrapper-container.small-video{position:absolute;bottom:25px;right:25px;width:200px;height:112px;z-index:10;border-radius:8px;overflow:hidden;box-shadow:0 4px 20px #00000080;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.video-wrapper-container.small-video:hover{transform:scale(1.05);box-shadow:0 6px 30px #000000b3}.video-wrapper-container.small-video:nth-child(3){bottom:235px}.video-wrapper-container.small-video:nth-child(4){bottom:445px}.video-wrapper-container.small-video:nth-child(5){bottom:655px}.video-wrapper-container.small-video:nth-child(n+6){display:none}.video-wrapper{position:relative;background-color:#1a1a1a;border-radius:12px;overflow:hidden;width:100%;height:100%}.video{width:100%;height:100%;object-fit:cover}.video-off{background-color:#2a2a2a}.video-overlay{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:flex-start;align-items:flex-end;padding:5px 10px;background:linear-gradient(transparent,#000c)}.video-label{padding:5px 12px;background-color:#0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;font-size:.85rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.video-off-icon{font-size:1.5rem}.empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;justify-content:center;align-items:center;color:#666;pointer-events:none}.empty-icon{font-size:4rem;margin-bottom:20px}.empty-state p{font-size:1.1rem}.speaking-indicator{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:10px;padding:10px 20px;background-color:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:30px;z-index:30;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 #40e0d066}50%{box-shadow:0 0 20px 5px #40e0d033}}.speaking-icon{font-size:1.2rem;animation:bounce .5s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.speaking-name{font-size:.95rem;color:#fff;font-weight:500}.local-video{transform:scaleX(-1)}.local-video-container{flex:1;position:relative}.local-small-video{position:absolute;bottom:25px;right:25px;width:200px;height:112px;z-index:10;border-radius:8px;overflow:hidden;box-shadow:0 4px 20px #00000080;transition:transform .2s ease,box-shadow .2s ease}.local-small-video:hover{transform:scale(1.05);box-shadow:0 6px 30px #000000b3}.local-only-hint{color:#888;bottom:auto;top:80%}.local-only-hint p{font-size:1rem}@media (max-width: 768px){.videos-container{grid-template-columns:1fr;padding:10px;gap:10px}.screen-share-container{height:40%}.speaking-indicator{padding:8px 15px;font-size:.85rem}.local-small-video{width:120px;height:67px;bottom:15px;right:15px}}.chat-panel{width:320px;display:flex;flex-direction:column;background-color:#1a1a1a;border-left:1px solid #2a2a2a}.chat-tabs{display:flex;border-bottom:1px solid #2a2a2a}.tab{flex:1;padding:12px;background:none;border:none;color:#888;font-size:.9rem;cursor:pointer;transition:all .3s ease;border-bottom:2px solid transparent;position:relative}.unread-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;background-color:#ff4757;color:#fff;font-size:.7rem;font-weight:700;border-radius:9px;line-height:1}.tab.active{color:#667eea;border-bottom-color:#667eea}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #2a2a2a}.chat-header h3{font-size:1rem;color:#fff}.message-count{font-size:.85rem;color:#666}.participants-container{flex:1;overflow-y:auto;padding:10px}.participant-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;margin-bottom:5px;transition:background-color .2s ease}.participant-item:hover{background-color:#ffffff0d}.participant-item.self{background-color:#667eea1a}.participant-avatar{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:#3a3a3a;border-radius:50%;font-size:1.2rem}.participant-info{flex:1;display:flex;flex-direction:column}.participant-name{font-size:.9rem;color:#fff}.participant-role{font-size:.75rem;color:#667eea}.participant-actions{display:flex;gap:8px}.action-btn{padding:8px;background-color:#2a2a2a;border:none;border-radius:8px;cursor:pointer;font-size:1rem;transition:all .2s ease}.action-btn:hover{background-color:#3a3a3a}.action-btn.muted{background-color:#ff4757}.action-btn.kick{background-color:#ff475733;color:#ff4757}.action-btn.kick:hover{background-color:#ff4757;color:#fff}.messages-container{flex:1;overflow-y:auto;padding:15px}.message{margin-bottom:15px}.message-info{display:flex;align-items:center;gap:10px;margin-bottom:5px}.message-nickname{font-size:.85rem;font-weight:600;color:#667eea}.message-time{font-size:.75rem;color:#666}.message-content{padding:10px 15px;background-color:#2a2a2a;border-radius:15px;font-size:.9rem;color:#fff;word-break:break-word}.message.self .message-nickname{color:#764ba2}.message.self .message-content{background-color:#667eea;color:#fff}.chat-input-container{display:flex;gap:10px;padding:15px;border-top:1px solid #2a2a2a}.chat-input{flex:1;padding:12px 15px;background-color:#2a2a2a;border:none;border-radius:25px;font-size:.9rem;color:#fff;outline:none}.chat-input::placeholder{color:#666}.send-btn{min-width:70px;padding:12px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:25px;font-size:.9rem;font-weight:600;cursor:pointer;transition:transform .2s ease;white-space:nowrap}.send-btn:hover{transform:scale(1.05)}@media (max-width: 768px){.chat-panel{width:100%;border-left:none;border-top:1px solid #2a2a2a;height:300px}}.controls-container{display:flex;justify-content:center;align-items:center;gap:12px;padding:12px 20px;background:linear-gradient(180deg,#1a1a1a,#141414);border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -4px 15px #0003}.control-group{display:flex;align-items:center;gap:4px}.control-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:88px;padding:10px 12px;background:linear-gradient(135deg,#2a2a2a,#202020);border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;box-shadow:0 3px 10px #0003}.control-btn:hover{background:linear-gradient(135deg,#3a3a3a,#303030);transform:translateY(-2px);box-shadow:0 6px 25px #0006}.control-btn.active{background:linear-gradient(135deg,#2ed573,#1abc9c);box-shadow:0 4px 15px #2ed57366}.control-btn.active:hover{background:linear-gradient(135deg,#3ed583,#2abdac);box-shadow:0 6px 25px #2ed57380}.control-icon{font-size:1.3rem}.control-label{font-size:.75rem;color:#ccc;font-weight:500}.control-btn.active .control-label{color:#fff}.device-dropdown-container{position:relative}.device-dropdown-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:linear-gradient(135deg,#2a2a2a,#202020);border:none;border-radius:6px;cursor:pointer;color:#888;font-size:.7rem;transition:all .2s ease}.device-dropdown-btn:hover{background:linear-gradient(135deg,#3a3a3a,#303030);color:#fff}.device-dropdown-menu{position:absolute;bottom:100%;right:0;margin-bottom:8px;padding:4px;background-color:#2a2a2a;border-radius:8px;box-shadow:0 -8px 20px #0000004d;min-width:180px;z-index:100;overflow:hidden}.device-dropdown-item{display:block;width:100%;padding:8px 12px;background:none;border:none;border-radius:4px;cursor:pointer;color:#ccc;font-size:.85rem;text-align:left;transition:background-color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-dropdown-item:hover{background-color:#3a3a3a;color:#fff}.device-dropdown-item.selected{background-color:#4a4a4a;color:#fff}@media (max-width: 768px){.controls-container{padding:15px 20px;gap:12px}.control-btn{padding:12px 18px}.control-icon{font-size:1.4rem}.control-label{font-size:.75rem}.device-dropdown-btn{width:22px;height:22px;font-size:.65rem}.device-dropdown-menu{min-width:160px}}.room-container{display:flex;flex-direction:column;height:100vh;background-color:#0f0f0f}.room-header{display:flex;justify-content:space-between;align-items:center;padding:15px 25px;background-color:#1a1a1a;border-bottom:1px solid #2a2a2a}.room-info h2{font-size:.85rem;margin-bottom:3px;color:#aaa;font-weight:500}.room-info p{font-size:.9rem;color:#888}.btn-leave{padding:10px 25px;background-color:#ff4757;color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:background-color .3s ease}.btn-leave:hover{background-color:#e8384a}.room-content{display:flex;flex:1;overflow:hidden}.main-area{flex:1;display:flex;flex-direction:column;background-color:#0a0a0a}.connection-status{display:inline-block;padding:4px 10px;border-radius:12px;font-size:.8rem;font-weight:500;margin-top:8px}.connection-status.connecting{background-color:#f39c12;color:#fff}.connection-status.connected{background-color:#27ae60;color:#fff}.connection-status.failed{background-color:#e74c3c;color:#fff}@media (max-width: 768px){.room-content{flex-direction:column}.main-area{flex:1}}.landing-container{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding-top:12vh;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460)}.landing-content{text-align:center;padding:20px 40px;max-width:500px;width:100%}.title{font-size:3rem;font-weight:700;margin-bottom:10px;background:linear-gradient(90deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:#888;font-size:1.2rem;margin-bottom:40px}.conference-section{background:#ffffff0d;padding:0;border-radius:20px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden}.tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.1)}.tab{flex:1;padding:18px;background:none;border:none;color:#888;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;border-bottom:2px solid transparent}.tab:hover{color:#fff}.tab.active{color:#667eea;border-bottom-color:#667eea;background:#667eea1a}.tab-content{padding:30px}.form-container{display:flex;flex-direction:column;gap:15px}.input{padding:16px 20px;font-size:1rem;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:#ffffff0d;color:#fff;outline:none;transition:all .3s ease}.input:focus{border-color:#667eea;box-shadow:0 0 20px #667eea4d}.input::placeholder{color:#666}.btn{padding:16px;font-size:1.1rem;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:all .3s ease}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 15px #667eea66}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 25px #667eea80}.btn-secondary{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2)}.btn-secondary:hover:not(:disabled){background:#fff3;border-color:#fff6}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.features{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;margin-top:40px;max-width:320px;margin-left:auto;margin-right:auto}.feature{display:flex;flex-direction:column;align-items:center;gap:8px;width:calc(50% - 15px)}.feature .icon{font-size:2rem}.feature span:last-child{color:#888;font-size:.9rem}@media (max-width: 600px){.title{font-size:2rem}.features{gap:20px}.tab-content{padding:20px}}