.loading-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0b1120;display:flex;justify-content:center;align-items:center;z-index:9999;overflow:hidden}.loading-screen:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 80%,rgba(99,102,241,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(139,92,246,.1) 0%,transparent 50%),radial-gradient(circle at 50% 50%,rgba(6,182,212,.05) 0%,transparent 70%);animation:pulse 4s ease-in-out infinite alternate}@keyframes pulse{0%{opacity:.3}to{opacity:.8}}.loading-content{text-align:center;z-index:1;position:relative}.logo-svg{width:350px;height:100px;max-width:90vw}.letter{stroke-dasharray:0 200;filter:drop-shadow(0 0 8px currentColor)}.by-text{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;font-weight:300;color:#94a3b8;margin-top:20px;letter-spacing:2px;opacity:0;animation:fadeInByText .5s ease-in-out 3.5s forwards}@keyframes fadeInByText{to{opacity:1}}@media (max-width: 768px){.logo-svg{width:280px;height:80px}.by-text{font-size:14px}}@keyframes glow{0%,to{box-shadow:0 20px 40px #6366f14d}50%{box-shadow:0 20px 40px #6366f199,0 0 60px #8b5cf64d}}.whiteboard-overlay{position:fixed;top:80px;left:0;right:0;bottom:0;background:var(--bg-primary);z-index:1000;display:flex;flex-direction:column}.whiteboard-header{background:var(--bg-secondary);border-bottom:1px solid rgba(16,185,129,.2);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.whiteboard-header h3{color:var(--text-primary);font-size:1.2rem;font-weight:600;margin:0;display:flex;align-items:center;gap:.5rem}.minimize-btn,.minimize-whiteboard-btn{background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.3);padding:.5rem 1rem;border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.5rem;font-weight:500}.minimize-btn:hover,.minimize-whiteboard-btn:hover{background:#ef4444;color:#fff}.whiteboard-content{flex:1;padding:1rem;overflow:hidden}.whiteboard-container{height:100%;display:flex;flex-direction:column;background:var(--bg-secondary);border-radius:12px;border:1px solid rgba(16,185,129,.2);overflow:hidden}.whiteboard-container .whiteboard-header{background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(16,185,129,.05));border-bottom:1px solid rgba(16,185,129,.2);padding:1rem}.content-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;background:var(--bg-secondary);border-radius:12px;border:1px solid rgba(16,185,129,.1);padding:2rem}.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:100%;max-width:600px}.student-video-slot{aspect-ratio:16/9;background:var(--bg-primary);border:2px dashed rgba(16,185,129,.3);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:var(--text-secondary);transition:all .3s ease}.student-video-slot:hover{border-color:#10b981;background:rgba(16,185,129,.05)}.student-video-slot i{font-size:2rem;color:#10b981;opacity:.6}.student-video-slot span{font-size:.9rem;font-weight:500}.open-whiteboard-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:1rem 2rem;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.8rem;box-shadow:0 4px 20px #10b9814d}.open-whiteboard-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px #10b98166}.whiteboard-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--text-secondary);background:var(--bg-primary);border:2px dashed rgba(16,185,129,.3);border-radius:12px}.whiteboard-placeholder i{font-size:3rem;color:#10b981;opacity:.6}.whiteboard-placeholder span{font-size:1.2rem;font-weight:600;color:var(--text-primary)}.whiteboard-placeholder small{font-size:.9rem;opacity:.7}@media (max-width: 768px){.video-grid{grid-template-columns:1fr;max-width:300px}.whiteboard-header{padding:1rem}.whiteboard-header h3{font-size:1rem}.open-whiteboard-btn{padding:.8rem 1.5rem;font-size:1rem}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:2000}.modal-popup{background:var(--bg-secondary);border-radius:12px;padding:0;max-width:400px;width:90%;max-height:80vh;overflow:hidden;border:1px solid rgba(16,185,129,.2);box-shadow:0 20px 40px #0000004d}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid rgba(16,185,129,.1);background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(16,185,129,.05))}.modal-header h3{margin:0;color:var(--text-primary);font-size:1.1rem;font-weight:600}.close-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;border-radius:4px;transition:all .3s ease}.close-btn:hover{background:rgba(239,68,68,.1);color:#ef4444}.modal-body{padding:1rem;max-height:300px;overflow-y:auto}.student-list{display:flex;flex-direction:column;gap:.5rem}.student-row{display:flex;justify-content:space-between;align-items:center;padding:.8rem;background:var(--bg-primary);border-radius:8px;border-left:3px solid #10b981}.student-name{font-weight:500;color:var(--text-primary)}.join-time{font-size:.8rem;color:var(--text-secondary)}.empty-state{text-align:center;padding:2rem;color:var(--text-secondary)}.empty-state i{font-size:2rem;margin-bottom:.5rem;display:block;opacity:.5}.content-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:var(--bg-secondary);border-bottom:1px solid rgba(16,185,129,.1);border-radius:12px 12px 0 0}.content-header h3{margin:0;color:var(--text-primary);font-size:1.1rem;font-weight:600}.open-whiteboard-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:.6rem 1.2rem;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.5rem}.open-whiteboard-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #10b9814d}.empty-content{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--text-secondary);padding:3rem}.empty-content i{font-size:4rem;margin-bottom:1rem;color:#10b981;opacity:.6}.empty-content h4{color:var(--text-primary);margin-bottom:.5rem;font-size:1.3rem}.empty-content p{opacity:.8;max-width:300px}.control-btn.mic-btn,.control-btn.video-btn{background:#374151;color:#9ca3af;width:40px;height:40px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease}.control-btn.mic-btn:hover,.control-btn.video-btn:hover{background:#4b5563;transform:translateY(-1px)}.hand-raise-btn{background:var(--bg-secondary);color:var(--text-primary);border:1px solid rgba(16,185,129,.2);padding:.6rem 1rem;border-radius:8px;display:flex;align-items:center;gap:.5rem;font-weight:500;cursor:pointer;transition:all .3s ease}.hand-raise-btn.raised{background:linear-gradient(135deg,#ff6b6b,#ff8e8e);color:#fff;border-color:#ff6b6b}.control-btn.end-btn{background:#ef4444;color:#fff;width:40px;height:40px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease}.control-btn.end-btn:hover{background:#dc2626;transform:translateY(-1px)}.attendance-btn.marked{background:#10b981;color:#fff;cursor:not-allowed}.student-row{cursor:pointer;transition:all .3s ease}.student-row:hover{background:rgba(16,185,129,.1)}.info-icon{color:#6b7280;font-size:.8rem}.student-details{display:flex;flex-direction:column;gap:1rem}.detail-row{display:flex;justify-content:space-between;align-items:center;padding:.8rem;background:var(--bg-primary);border-radius:8px}.label{font-weight:600;color:var(--text-secondary)}.value{color:var(--text-primary)}.status-present{color:#10b981;font-weight:600}.reopen-whiteboard-btn{background:#10b981;color:#fff;border:none;padding:.6rem 1rem;border-radius:8px;cursor:pointer;margin-top:1rem;display:flex;align-items:center;gap:.5rem;font-weight:500;transition:all .3s ease}.reopen-whiteboard-btn:hover{background:#059669;transform:translateY(-1px)}.panel-actions{display:flex;align-items:center;gap:.8rem}.mute-all-btn{background:#ef4444;color:#fff;border:none;padding:.4rem .8rem;border-radius:6px;cursor:pointer;font-size:.8rem;display:flex;align-items:center;gap:.4rem;transition:all .3s ease}.mute-all-btn:hover{background:#dc2626}.control-btn:disabled{opacity:.5;cursor:not-allowed}.shared-screen-view{width:100%;height:100%;background:linear-gradient(135deg,#1e293b,#334155);display:flex;align-items:center;justify-content:center;border-radius:12px;position:relative;overflow:hidden}.screen-share-content{text-align:center;color:#fff;z-index:2}.screen-share-content i{font-size:3rem;margin-bottom:1rem;display:block;color:#10b981}.screen-share-content span{font-size:1.2rem;font-weight:600;display:block;margin-bottom:.8rem}.screen-active-indicator{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.9rem;color:#10b981}.active-dot{width:8px;height:8px;background:#10b981;border-radius:50%;animation:blink 1.5s infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:.3}}.local-video,.remote-video{width:100%;height:100%;object-fit:cover;border-radius:12px;background:var(--bg-primary)}.main-video-container{position:relative;height:200px}.teacher-video{width:100%;height:100%;position:relative}.teacher-preview{position:absolute;bottom:15px;right:15px;width:120px;height:80px;border-radius:8px;overflow:hidden;background:var(--bg-secondary);border:2px solid rgba(16,185,129,.3);z-index:10}.teacher-preview-video{width:100%;height:100%;object-fit:cover}.video-controls-container{padding:1rem 0;background:transparent}.local-video-preview{width:120px;height:80px;border-radius:8px;background:var(--bg-secondary);border:2px solid rgba(16,185,129,.3);object-fit:cover}.student-video-preview{position:absolute;bottom:20px;right:20px;width:120px;height:80px;border-radius:8px;overflow:hidden;background:var(--bg-secondary);border:2px solid rgba(16,185,129,.3);z-index:10}.preview-placeholder{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-secondary);font-size:.8rem}.preview-placeholder i{font-size:1.5rem;margin-bottom:.3rem;color:#10b981}.screen-share-badge{background:rgba(239,68,68,.9);color:#fff;padding:.3rem .8rem;border-radius:12px;font-size:.8rem;font-weight:500;display:flex;align-items:center;gap:.3rem;margin-left:1rem}.video-overlay{position:absolute;top:1rem;left:1rem;display:flex;align-items:center;gap:.5rem}.control-btn.muted{background:rgba(239,68,68,.1);color:var(--error-color);border-color:#ef44444d}.control-btn.off{background:rgba(156,163,175,.1);color:#9ca3af;border-color:#9ca3af4d}.control-btn.hand-raised{background:rgba(255,193,7,.1);color:#ffc107;border-color:#ffc1074d;animation:pulse-hand 2s infinite}@keyframes pulse-hand{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.sharing-indicator{position:absolute;bottom:-8px;left:50%;transform:translate(-50%);background:var(--error-color);color:#fff;padding:.2rem .5rem;border-radius:8px;font-size:.7rem;font-weight:500;white-space:nowrap}.control-btn.sharing{background:var(--error-color);color:#fff;border-color:var(--error-color);position:relative}.screen-share-display{width:100%;height:100%;position:relative;background:#000;border-radius:12px;overflow:hidden}.screen-share-indicator{position:absolute;top:1rem;left:50%;transform:translate(-50%);background:rgba(0,0,0,.8);color:#fff;padding:.5rem 1rem;border-radius:20px;display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:500;z-index:10}.remote-video.screen-share{background:#000}.remote-video.teacher-video{background:var(--bg-secondary)}.video-controls{display:flex;justify-content:center;gap:.8rem;padding:1rem;background:var(--bg-secondary);border-radius:12px;border:1px solid rgba(16,185,129,.1)}.video-controls .control-btn{width:50px;height:50px;border-radius:50%;border:2px solid rgba(16,185,129,.3);background:rgba(16,185,129,.1);color:#10b981;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;font-size:1.1rem;position:relative}.video-controls .control-btn:hover{transform:scale(1.1);border-color:#10b981;background:rgba(16,185,129,.2)}.video-controls .control-btn.active{background:#10b981;color:#fff;border-color:#10b981}.video-controls .control-btn.end{background:rgba(239,68,68,.1);color:var(--error-color);border-color:#ef44444d}.video-controls .control-btn.end:hover{background:var(--error-color);color:#fff;border-color:var(--error-color)}@media (max-width: 768px){.student-video-preview{width:100px;height:70px;bottom:15px;right:15px}.local-video-preview{width:100px;height:70px}.video-controls{gap:.5rem;padding:.8rem}.video-controls .control-btn{width:45px;height:45px;font-size:1rem}.screen-share-indicator{font-size:.8rem;padding:.4rem .8rem}}.video-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--text-secondary)}.video-loading .spinner{width:40px;height:40px;border:3px solid rgba(16,185,129,.3);border-top:3px solid #10b981;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.connection-status{position:absolute;top:1rem;right:1rem;display:flex;align-items:center;gap:.5rem;background:rgba(0,0,0,.7);color:#fff;padding:.3rem .8rem;border-radius:12px;font-size:.8rem;z-index:10}.connection-status.connected{background:rgba(16,185,129,.9)}.connection-status.connecting{background:rgba(255,193,7,.9)}.connection-status.disconnected{background:rgba(239,68,68,.9)}.connection-dot{width:8px;height:8px;border-radius:50%;background:currentColor}.preview-label{position:absolute;bottom:5px;left:5px;background:rgba(0,0,0,.7);color:#fff;padding:.2rem .5rem;border-radius:4px;font-size:.7rem;font-weight:500}.video-stream{width:100%;height:100%;position:relative;border-radius:12px;overflow:hidden;background:var(--bg-secondary)}.modern-teaching-interface{height:calc(100vh - 80px);background:var(--bg-primary);padding:1rem}.main-content-grid{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;height:100%}.video-main-section{display:flex;flex-direction:column;gap:1rem}.teacher-video-container{position:relative;height:400px;background:var(--bg-secondary);border-radius:16px;overflow:hidden;border:2px solid rgba(16,185,129,.2)}.teacher-main-video{width:100%;height:100%;object-fit:cover}.video-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--text-secondary)}.video-placeholder i{font-size:4rem;color:#10b981;margin-bottom:1rem;display:block}.video-overlay-info{position:absolute;top:1rem;left:1rem;display:flex;flex-direction:column;gap:.5rem}.teacher-badge{background:rgba(16,185,129,.9);color:#fff;padding:.5rem 1rem;border-radius:20px;display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:500}.screen-share-indicator{background:rgba(239,68,68,.9);color:#fff;padding:.5rem 1rem;border-radius:20px;display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:500}.quick-controls{position:absolute;bottom:1rem;right:1rem;display:flex;gap:.5rem}.quick-btn{width:45px;height:45px;border-radius:50%;border:none;background:rgba(0,0,0,.7);color:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.quick-btn.active{background:#10b981}.quick-btn.muted,.quick-btn.off{background:var(--error-color)}.main-controls-bar{display:flex;justify-content:space-between;align-items:center;background:var(--bg-secondary);padding:1.2rem 1.5rem;border-radius:16px;border:1px solid rgba(16,185,129,.1);box-shadow:0 4px 12px #0000001a}.control-group{display:flex;gap:1rem}.main-control-btn{display:flex;flex-direction:column;align-items:center;gap:.5rem;background:rgba(16,185,129,.1);border:2px solid rgba(16,185,129,.3);color:#10b981;padding:1rem;border-radius:12px;cursor:pointer;transition:all .3s ease;min-width:80px}.main-control-btn:hover{background:rgba(16,185,129,.2);transform:translateY(-2px)}.main-control-btn.active{background:#10b981;color:#fff;border-color:#10b981}.main-control-btn.muted,.main-control-btn.off{background:rgba(239,68,68,.1);border-color:#ef44444d;color:var(--error-color)}.main-control-btn.sharing{background:rgba(255,193,7,.1);border-color:#ffc1074d;color:#ffc107}.main-control-btn i{font-size:1.2rem}.main-control-btn span{font-size:.8rem;font-weight:500}.session-info-bar{display:flex;gap:1.5rem;align-items:center}.info-item{display:flex;align-items:center;gap:.5rem;color:var(--text-secondary);font-size:.9rem}.info-item.raised-hands{color:#ffc107;background:rgba(255,193,7,.1);padding:.5rem 1rem;border-radius:20px;animation:pulse 2s infinite}.end-session-btn{background:var(--error-color);color:#fff;border:none;padding:1rem 1.5rem;border-radius:12px;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-weight:600;transition:all .3s ease}.end-session-btn:hover{background:#dc2626;transform:translateY(-2px)}.teaching-content-area{background:var(--bg-secondary);border-radius:16px;border:1px solid rgba(16,185,129,.1);overflow:hidden;height:calc(100vh - 200px)}.content-dashboard{padding:1.5rem;height:100%}.dashboard-header{margin-bottom:2rem}.dashboard-header h3{color:var(--text-primary);font-size:1.5rem;margin-bottom:.5rem}.dashboard-header p{color:var(--text-secondary)}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;height:calc(100% - 100px)}.dashboard-card{background:var(--bg-primary);border-radius:12px;border:1px solid rgba(16,185,129,.1);overflow:hidden}.card-header{background:rgba(16,185,129,.05);padding:1rem;border-bottom:1px solid rgba(16,185,129,.1);display:flex;align-items:center;gap:.8rem}.card-header i{color:#10b981;font-size:1.1rem}.card-header h4{color:var(--text-primary);font-size:1rem;margin:0}.card-content{padding:1rem;height:calc(100% - 60px)}.student-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.student-mini{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.8rem;background:var(--bg-secondary);border-radius:8px;position:relative}.student-avatar{width:40px;height:40px;background:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;position:relative}.hand-icon{position:absolute;top:-5px;right:-5px;color:#ffc107;font-size:.8rem}.student-name{font-size:.8rem;color:var(--text-primary);text-align:center}.more-students{display:flex;align-items:center;justify-content:center;background:rgba(16,185,129,.1);border-radius:8px;color:#10b981;font-size:.8rem;font-weight:500}.attendance-stats{display:flex;justify-content:space-between;align-items:center}.stat .number{display:block;font-size:2rem;font-weight:700;color:#10b981}.stat .label{font-size:.8rem;color:var(--text-secondary)}.view-details-btn{background:#10b981;color:#fff;border:none;padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-size:.8rem}.recent-messages{display:flex;flex-direction:column;gap:.8rem}.message-preview{padding:.8rem;background:var(--bg-secondary);border-radius:8px;font-size:.8rem}.message-preview strong{color:#10b981}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.action-btn{display:flex;flex-direction:column;align-items:center;gap:.5rem;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);color:#10b981;padding:1rem;border-radius:8px;cursor:pointer;transition:all .3s ease;text-decoration:none}.action-btn:hover{background:rgba(16,185,129,.2)}.action-btn.recording{background:rgba(239,68,68,.1);border-color:#ef444433;color:var(--error-color)}.action-btn i{font-size:1.2rem}.action-btn span{font-size:.8rem;font-weight:500}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-secondary);text-align:center}.empty-state i{font-size:2rem;margin-bottom:.5rem;color:#10b981}.whiteboard-section{height:100%;display:flex;flex-direction:column}.whiteboard-header{background:rgba(16,185,129,.05);padding:1rem 1.5rem;border-bottom:1px solid rgba(16,185,129,.1);display:flex;justify-content:space-between;align-items:center}.whiteboard-header h3{color:var(--text-primary);margin:0;display:flex;align-items:center;gap:.5rem}.minimize-whiteboard{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;border-radius:4px}.minimize-whiteboard:hover{background:rgba(16,185,129,.1);color:#10b981}.whiteboard-container{flex:1;padding:1rem}@media (max-width: 1200px){.main-content-grid{grid-template-columns:1fr;grid-template-rows:auto 1fr}.dashboard-grid{grid-template-columns:1fr}.control-group{flex-wrap:wrap}.session-info-bar{flex-direction:column;gap:.5rem}}@media (max-width: 768px){.main-controls-bar{flex-direction:column;gap:1rem}.control-group{justify-content:center}.quick-actions,.student-grid{grid-template-columns:1fr}}.teacher-video-container{position:relative;width:100%;height:400px;background:#1a1a1a;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #0000004d}.teacher-main-video{width:100%;height:100%;object-fit:cover;background:#000}.video-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.video-placeholder i{font-size:4rem;margin-bottom:1rem;opacity:.8}.video-placeholder span{font-size:1.2rem;font-weight:500}.video-overlay-info{position:absolute;top:16px;left:16px;display:flex;gap:12px}.teacher-badge,.screen-share-indicator{background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:8px 12px;border-radius:20px;color:#fff;font-size:.85rem;display:flex;align-items:center;gap:6px}.teacher-badge{background:rgba(76,175,80,.9)}.screen-share-indicator{background:rgba(255,152,0,.9);animation:pulse 2s infinite}.quick-controls{position:absolute;bottom:16px;right:16px;display:flex;gap:8px}.quick-btn{width:40px;height:40px;border:none;border-radius:50%;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.quick-btn:hover{background:rgba(0,0,0,.9);transform:scale(1.1)}.quick-btn.active{background:rgba(76,175,80,.9)}.quick-btn.muted,.quick-btn.off{background:rgba(244,67,54,.9)}.main-controls-bar{display:flex;align-items:center;justify-content:space-between;padding:20px;background:white;border-radius:12px;margin-top:20px;box-shadow:0 4px 20px #0000001a}.control-group{display:flex;gap:12px}.main-control-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;border-radius:8px;background:#f5f5f5;color:#333;cursor:pointer;transition:all .3s ease;font-weight:500}.main-control-btn:hover{background:#e0e0e0;transform:translateY(-2px)}.main-control-btn.active{background:#4caf50;color:#fff}.main-control-btn.muted,.main-control-btn.off{background:#f44336;color:#fff}.main-control-btn.sharing{background:#ff9800;color:#fff}.session-info-bar{display:flex;gap:20px;align-items:center}.info-item{display:flex;align-items:center;gap:6px;color:#666;font-size:.9rem}.info-item.raised-hands{color:#ff9800;font-weight:600;animation:bounce 1s infinite}.end-session-btn{background:#f44336;color:#fff;border:none;padding:12px 20px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .3s ease}.end-session-btn:hover{background:#d32f2f;transform:translateY(-2px)}.main-screen{position:relative;width:100%;height:500px;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #0000004d}.screen-content{width:100%;height:100%;position:relative}.remote-video{width:100%;height:100%;object-fit:cover}.remote-video.screen-share{object-fit:contain;background:#000}.screen-share-display{width:100%;height:100%;position:relative;background:#000}.screen-share-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.screen-placeholder{text-align:center;color:#fff}.screen-placeholder i{font-size:4rem;margin-bottom:1rem;color:#ff9800}.screen-placeholder span{display:block;font-size:1.5rem;margin-bottom:.5rem}.screen-placeholder small{font-size:1rem;opacity:.7}.student-video-preview{position:absolute;bottom:20px;right:20px;width:200px;height:150px;border-radius:8px;overflow:hidden;border:3px solid white;box-shadow:0 4px 20px #0000004d}.local-video-preview{width:100%;height:100%;object-fit:cover}.preview-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}.preview-placeholder i{font-size:2rem;margin-bottom:.5rem}.preview-label{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.7);color:#fff;padding:4px 8px;border-radius:4px;font-size:.8rem}.video-controls{display:flex;justify-content:center;gap:12px;padding:20px;background:white;border-radius:12px;margin-top:20px;box-shadow:0 4px 20px #0000001a}.control-btn{width:50px;height:50px;border:none;border-radius:50%;background:#f5f5f5;color:#333;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;font-size:1.2rem}.control-btn:hover{background:#e0e0e0;transform:scale(1.1)}.control-btn.active{background:#4caf50;color:#fff}.control-btn.muted,.control-btn.off{background:#f44336;color:#fff}.control-btn.hand-raised{background:#ff9800;color:#fff;animation:bounce 1s infinite}.control-btn.whiteboard{background:#2196f3;color:#fff}.control-btn.end{background:#f44336;color:#fff}.connection-status{position:absolute;top:16px;right:16px}.connection-status.student{top:16px;left:16px}.status-indicator{background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:8px 12px;border-radius:20px;color:#fff;font-size:.85rem;display:flex;align-items:center;gap:6px}.status-indicator.connected{background:rgba(76,175,80,.9)}.status-indicator.connected i{animation:pulse 2s infinite}.webrtc-status{background:rgba(33,150,243,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:6px 10px;border-radius:16px;color:#fff;font-size:.8rem;display:flex;align-items:center;gap:4px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.connection-status-display{text-align:center;margin-bottom:20px}.status-indicator.connected{color:#4caf50}.status-indicator.disconnected{color:#f44336}.text-green{color:#4caf50}.text-red{color:#f44336}.join-btn:disabled{background:#ccc;cursor:not-allowed;opacity:.6}.reconnect-btn{background:#ff9800;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;margin-top:10px;display:flex;align-items:center;gap:6px;font-size:.9rem}.reconnect-btn:hover{background:#f57c00}.join-requests-btn{background:#ff9800;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:.9rem;animation:pulse 2s infinite}.join-requests-list{max-height:400px;overflow-y:auto}.join-request-item{display:flex;align-items:center;justify-content:space-between;padding:12px;border:1px solid #e0e0e0;border-radius:8px;margin-bottom:8px;background:white}.request-info{display:flex;align-items:center;gap:12px}.request-details{display:flex;flex-direction:column}.student-name{font-weight:500;color:#333}.request-time{font-size:.8rem;color:#666}.request-actions{display:flex;gap:8px}.approve-btn{background:#4caf50;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:4px;font-size:.8rem}.reject-btn{background:#f44336;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:4px;font-size:.8rem}.approve-btn:hover{background:#45a049}.reject-btn:hover{background:#da190b}@media (max-width: 768px){.teacher-video-container{height:300px}.main-screen{height:400px}.student-video-preview{width:150px;height:112px;bottom:15px;right:15px}.main-controls-bar{flex-direction:column;gap:15px}.control-group,.session-info-bar{justify-content:center}}.copy-success-popup{position:fixed;top:20px;right:20px;background:#10b981;color:#fff;padding:12px 20px;border-radius:8px;display:flex;align-items:center;gap:8px;z-index:10000;animation:slideIn .3s ease-out;box-shadow:0 4px 12px #10b9814d}.copy-success-popup i{font-size:16px}.join-status{margin-top:15px;padding:12px 16px;border-radius:8px;display:flex;align-items:center;gap:10px;font-size:14px;animation:fadeIn .3s ease-out}.join-status.pending{background:#fef3c7;color:#92400e;border:1px solid #fbbf24}.join-status.rejected{background:#fee2e2;color:#dc2626;border:1px solid #f87171}.join-status.not-found{background:#fef2f2;color:#b91c1c;border:1px solid #f87171}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.teaching-container{display:flex;height:calc(100vh - 80px);margin-top:80px;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%)}.main-video-area{flex:1;display:flex;flex-direction:column;padding:1rem;gap:1rem}.video-section{background:rgba(30,41,59,.8);border-radius:16px;border:1px solid rgba(148,163,184,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1rem;height:400px;display:flex;flex-direction:column;gap:1rem}.main-screen{flex:1;background:linear-gradient(135deg,#1e293b,#334155);border:2px solid rgba(16,185,129,.3);border-radius:12px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.screen-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:#94a3b8}.screen-sharing-active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.screen-sharing-active i{font-size:4rem;margin-bottom:1rem;display:block}.screen-sharing-active span{font-size:1.5rem;font-weight:600;display:block;margin-bottom:.5rem}.screen-sharing-active small{font-size:1rem;opacity:.8}.video-controls{display:flex;justify-content:center;gap:1rem;padding:1rem;background:rgba(15,23,42,.9);border-radius:12px}.control-btn{width:50px;height:50px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;font-size:1.2rem}.control-btn.mic{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.control-btn.video{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.control-btn.screen{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff}.control-btn.whiteboard{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.control-btn.end{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.control-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.tabbed-sidebar{width:400px;background:rgba(30,41,59,.8);border-radius:16px 0 0 16px;border:1px solid rgba(148,163,184,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column}.sidebar-tabs{display:flex;background:rgba(15,23,42,.9);border-bottom:1px solid rgba(148,163,184,.1);border-radius:16px 0 0}.sidebar-tab{flex:1;background:none;border:none;padding:1rem .5rem;color:#94a3b8;cursor:pointer;transition:all .3s ease;font-size:.9rem;font-weight:500;display:flex;flex-direction:column;align-items:center;gap:.5rem;position:relative}.sidebar-tab:hover{color:#f1f5f9;background:rgba(148,163,184,.1)}.sidebar-tab.active{color:#10b981;background:rgba(16,185,129,.1)}.sidebar-tab.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(135deg,#10b981,#059669);border-radius:3px 3px 0 0}.sidebar-tab i{font-size:1.3rem}.tab-content{flex:1;padding:1.5rem;overflow-y:auto}.chat-content{display:flex;flex-direction:column;height:100%}.chat-messages{flex:1;overflow-y:auto;margin-bottom:1rem;max-height:calc(100vh - 300px)}.message{margin-bottom:1rem;padding:1rem;border-radius:12px;background:rgba(15,23,42,.6);border:1px solid rgba(148,163,184,.1)}.message.host{background:rgba(16,185,129,.1);border-color:#10b98133}.message-header{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.85rem}.sender{font-weight:600;color:#f1f5f9}.time{color:#94a3b8}.message-content{color:#e2e8f0;line-height:1.4}.chat-input{display:flex;gap:.8rem}.chat-input input{flex:1;background:rgba(30,41,59,.8);border:1px solid rgba(148,163,184,.2);border-radius:8px;padding:.8rem;color:#f1f5f9}.chat-input input::placeholder{color:#94a3b8}.send-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:8px;padding:.8rem 1rem;cursor:pointer;transition:all .3s ease}.participants-content h3{color:#f1f5f9;margin-bottom:1.5rem;font-size:1.2rem}.participants-list{display:flex;flex-direction:column;gap:1rem}.participant-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:rgba(15,23,42,.6);border-radius:12px;border:1px solid rgba(148,163,184,.1)}.participant-avatar{width:45px;height:45px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;position:relative}.hand-raised-badge{position:absolute;top:-5px;right:-5px;width:20px;height:20px;background:linear-gradient(135deg,#f59e0b,#d97706);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;animation:bounce 1s infinite}.participant-info{flex:1}.participant-name{color:#f1f5f9;font-weight:600;margin-bottom:.2rem}.participant-status{color:#94a3b8;font-size:.9rem}.participant-controls{display:flex;gap:.5rem}.participant-controls button{width:35px;height:35px;border-radius:50%;border:none;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.mute-btn{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.lower-hand-btn{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.tools-content{display:flex;flex-direction:column;gap:2rem}.tool-section{background:rgba(15,23,42,.6);border-radius:12px;padding:1.5rem;border:1px solid rgba(148,163,184,.1)}.tool-section h4{color:#f1f5f9;margin-bottom:1rem;font-size:1.1rem}.tool-buttons{display:flex;flex-direction:column;gap:.8rem}.tool-btn{background:linear-gradient(135deg,#374151,#4b5563);color:#f1f5f9;border:none;padding:1rem;border-radius:10px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.8rem;font-weight:500}.tool-btn:hover{background:linear-gradient(135deg,#4b5563,#6b7280);transform:translateY(-1px)}.tool-btn.primary{background:linear-gradient(135deg,#10b981,#059669)}.tool-btn.warning{background:linear-gradient(135deg,#f59e0b,#d97706)}.tool-btn.danger{background:linear-gradient(135deg,#ef4444,#dc2626)}.notes-content h3{color:#f1f5f9;margin-bottom:1.5rem}.upload-section{margin-bottom:2rem}.upload-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:1rem 1.5rem;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:.8rem;font-weight:600;transition:all .3s ease}.upload-btn:hover{transform:translateY(-1px)}.notes-list{display:flex;flex-direction:column;gap:1rem}.note-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:rgba(15,23,42,.6);border-radius:10px;border:1px solid rgba(148,163,184,.1)}.note-item i{color:#10b981;font-size:1.2rem}.note-info{flex:1}.note-name{color:#f1f5f9;font-weight:600;margin-bottom:.2rem}.note-time{color:#94a3b8;font-size:.9rem}@media (max-width: 1200px){.teaching-container{flex-direction:column}.tabbed-sidebar{width:100%;max-height:400px;border-radius:16px;order:-1}.sidebar-tabs{border-radius:16px 16px 0 0}.video-section{height:300px}}.screen-share-display{width:100%;height:100%;display:flex;flex-direction:column;background:linear-gradient(135deg,#1e293b,#334155);border-radius:8px;overflow:hidden}.screen-share-indicator{background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:.8rem;display:flex;align-items:center;gap:.8rem;font-weight:600;font-size:.9rem}.screen-share-indicator i{font-size:1.2rem}.screen-share-content{flex:1;display:flex;align-items:center;justify-content:center;background:#000;position:relative}.screen-placeholder{text-align:center;color:#94a3b8}.screen-placeholder i{font-size:4rem;margin-bottom:1rem;display:block;color:#4b5563}.screen-placeholder span{font-size:1.2rem;font-weight:600;color:#f1f5f9}.screen-sharing-active{background:linear-gradient(135deg,#1e293b,#0f172a)!important}.video-stream video{border-radius:8px;background:#000}.video-overlay{position:absolute;top:1rem;left:1rem;background:rgba(16,185,129,.9);color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:600;z-index:10}.student-layout{display:flex;height:calc(100vh - 60px)}.fullscreen-video{flex:1;position:relative;background:#000}.student-video-overlay{position:absolute;bottom:20px;right:20px;width:200px;height:150px;border-radius:12px;overflow:hidden;border:2px solid #fff;box-shadow:0 4px 12px #0000004d}.student-video-overlay .local-video-preview{width:100%;height:100%;object-fit:cover}.student-video-overlay .preview-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#374151;color:#fff}.video-controls-overlay{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:12px;background:rgba(0,0,0,.7);padding:12px 20px;border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.video-controls-overlay .control-btn{width:48px;height:48px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;font-size:18px}.video-controls-overlay .control-btn.active{background:#10b981;color:#fff}.video-controls-overlay .control-btn.muted,.video-controls-overlay .control-btn.off{background:#ef4444;color:#fff}.video-controls-overlay .control-btn.hand-raised{background:#f59e0b;color:#fff;animation:pulse 2s infinite}.video-controls-overlay .control-btn.end{background:#dc2626;color:#fff}.video-controls-overlay .control-btn:hover{transform:scale(1.1)}.tabbed-sidebar{width:350px;background:#1f2937;border-left:1px solid #374151}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}:root{--primary-color: #6366f1;--secondary-color: #8b5cf6;--accent-color: #06b6d4;--success-color: #10b981;--warning-color: #f59e0b;--error-color: #ef4444;--border-radius: 12px;--shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--bg-primary: #0b1120;--bg-secondary: #172136;--text-primary: #f8fafc;--text-secondary: #94a3b8;--border-color: #334155}*{margin:0;padding:0;box-sizing:border-box}html,body{margin:0;padding:0;overflow-x:hidden}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6;color:var(--text-primary);background-color:var(--bg-primary);transition:background-color .3s ease,color .3s ease}#root{padding:0;margin:0;max-width:none}.container{max-width:1200px;margin:0 auto;padding:0 2rem}.section-title{text-align:center;font-size:2.8rem;font-weight:800;margin-bottom:4rem;color:var(--text-primary)}.section-subtitle{text-align:center;font-size:1.2rem;color:var(--text-secondary);margin-bottom:3rem;max-width:600px;margin-left:auto;margin-right:auto}.btn-primary,.btn-secondary{padding:1rem 2rem;border-radius:var(--border-radius);font-weight:600;transition:all .3s ease;cursor:pointer;border:none;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}.btn-large{padding:1.25rem 2.5rem;font-size:1.1rem}.btn-primary{background:var(--primary-color);color:#fff;box-shadow:0 0 20px color-mix(in srgb,var(--primary-color) 50%,transparent)}.btn-primary:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 10px 30px color-mix(in srgb,var(--primary-color) 60%,transparent)}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background-color:color-mix(in srgb,var(--bg-primary) 50%,var(--bg-secondary));border-color:var(--primary-color)}main{position:relative;z-index:1}section{min-height:400px;position:relative;padding:60px 0}.stats-section{background-color:var(--bg-secondary)!important}.solution-section{background-color:var(--bg-primary)!important}.zones-preview{background-color:var(--bg-secondary)!important}.key-features{background-color:var(--bg-primary)!important}section h1,section h2,section h3,section h4,section h5,section h6{color:var(--text-primary)}@keyframes pulse{0%{transform:scale(1);opacity:.7}50%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:.7}}@keyframes gridMove{0%{transform:translate(0)}to{transform:translate(50px,50px)}}@keyframes floatUp{0%{transform:translateY(100px);opacity:0}50%{opacity:1}to{transform:translateY(-100px);opacity:0}}@keyframes scroll-wheel{0%{transform:translate(-50%) translateY(0);opacity:0}50%{opacity:1}to{transform:translate(-50%) translateY(12px);opacity:0}}.animate-text{animation:fadeInUp 1s ease .5s both}.container:not(.is-visible){opacity:0;transform:translateY(50px);transition:all .8s ease}.container.is-visible{opacity:1;transform:translateY(0)}.navbar{position:fixed;top:0;left:0;right:0;background:rgba(11,17,32,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #334155;z-index:1001;transition:all .3s ease}.nav-container{max-width:1200px;margin:0 auto;padding:1rem clamp(1rem,4vw,2rem);display:flex;justify-content:space-between;align-items:center}.nav-logo h2{color:#06b6d4;font-weight:700;cursor:pointer;transition:transform .3s ease;font-size:clamp(1.2rem,4vw,1.5rem);margin:0}.nav-logo h2:hover{transform:scale(1.05);color:#6366f1}.desktop-menu{display:flex;gap:clamp(.5rem,2vw,1rem);align-items:center}.nav-link{background:none;border:none;color:#94a3b8;font-weight:500;cursor:pointer;padding:clamp(.4rem,1vw,.5rem) clamp(.75rem,2vw,1rem);border-radius:8px;transition:all .3s ease;font-size:clamp(.85rem,2vw,.95rem);text-decoration:none;white-space:nowrap}.nav-link:hover{color:#06b6d4;background-color:#06b6d41a}.nav-link.login-btn{background:#6366f1;color:#fff;padding:.75rem 1.5rem;border-radius:8px}.nav-link.login-btn:hover{background:#5855eb;color:#fff}.mobile-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;border-radius:4px}.hamburger{display:flex;flex-direction:column;gap:4px}.hamburger span{width:25px;height:3px;background-color:#f8fafc;border-radius:2px;transition:all .3s ease}.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.mobile-menu{position:absolute;top:100%;left:0;right:0;background:#0b1120;border:1px solid #334155;padding:1rem;display:flex;flex-direction:column;gap:.75rem;z-index:999;box-shadow:0 4px 20px #00000080}.mobile-menu button{background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);color:#f8fafc;padding:.75rem 1rem;border-radius:8px;cursor:pointer;font-size:1rem;transition:all .3s ease}.mobile-menu button:hover{background:rgba(99,102,241,.2)}.mobile-menu button:last-child{background:#6366f1;border-color:#6366f1}.mobile-menu button:last-child:hover{background:#5855eb}@media (max-width: 768px){.desktop-menu{display:none}.mobile-menu-btn{display:block}.nav-container{padding:.75rem 1rem}}.hero{position:relative;min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;padding-top:120px;box-sizing:border-box}@media (max-width: 768px){.hero{padding-top:100px;min-height:calc(100vh - 20px)}}.hero-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden}.hero-orb{position:absolute;border-radius:50%;filter:blur(40px);animation:float 6s ease-in-out infinite}.hero-orb-1{width:300px;height:300px;background:radial-gradient(circle,rgba(99,102,241,.3) 0%,transparent 70%);top:10%;left:-10%;animation-delay:0s}.hero-orb-2{width:200px;height:200px;background:radial-gradient(circle,rgba(6,182,212,.25) 0%,transparent 70%);top:60%;right:-5%;animation-delay:2s}.hero-orb-3{width:150px;height:150px;background:radial-gradient(circle,rgba(139,92,246,.2) 0%,transparent 70%);top:30%;right:20%;animation-delay:4s}.hero-shape{position:absolute;opacity:.1;animation:rotate 20s linear infinite}.hero-triangle{width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:52px solid #6366f1;top:20%;left:80%}.hero-square{width:40px;height:40px;background:linear-gradient(45deg,#06b6d4,#8b5cf6);top:70%;left:15%;animation-direction:reverse}.hero-circle{width:25px;height:25px;border:3px solid #6366f1;border-radius:50%;top:15%;left:25%}@keyframes float{0%,to{transform:translateY(0) rotate(0) scale(1)}33%{transform:translateY(-15px) rotate(120deg) scale(1.05)}66%{transform:translateY(-25px) rotate(240deg) scale(.95)}}@keyframes rotate{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.1)}to{transform:rotate(360deg) scale(1)}}@keyframes pulse{0%,to{opacity:.1;transform:scale(1)}50%{opacity:.3;transform:scale(1.2)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes glow{0%,to{box-shadow:0 0 20px #6366f14d}50%{box-shadow:0 0 40px #6366f199,0 0 60px #8b5cf64d}}@media (max-width: 768px){.hero-orb-1{width:200px;height:200px}.hero-orb-2{width:150px;height:150px}.hero-orb-3{width:100px;height:100px}.hero-triangle{border-left-width:20px;border-right-width:20px;border-bottom-width:35px}.hero-square{width:30px;height:30px}.hero-circle{width:20px;height:20px}}.hero-grid{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(99,102,241,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.1) 1px,transparent 1px);background-size:50px 50px;animation:gridMove 20s linear infinite}.hero-glow{position:absolute;top:50%;left:50%;width:800px;height:800px;background:radial-gradient(circle,rgba(99,102,241,.1) 0%,transparent 70%);transform:translate(-50%,-50%);animation:pulse 4s ease-in-out infinite}.hero-content{position:relative;z-index:2;text-align:center;max-width:900px;margin:0 auto;padding:clamp(1rem,4vw,2rem)}@media (max-width: 768px){.hero-content{padding:1rem;max-width:100%}}.hero-badge{display:inline-flex;align-items:center;padding:.5rem 1.5rem;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.3);border-radius:50px;margin-bottom:2rem;animation:fadeInDown 1s ease .2s both,glow 3s ease-in-out infinite 1s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .3s ease}.hero-badge:hover{transform:scale(1.05)}.badge-text{font-size:.9rem;font-weight:500;color:var(--primary-color)}.hero-title{font-size:clamp(2.5rem,8vw,4.5rem);font-weight:900;line-height:1.1;margin-bottom:1.5rem;color:var(--text-primary);text-shadow:0px 4px 20px rgba(0,0,0,.1);animation:slideInLeft 1s ease .4s both}.gradient-text{background:linear-gradient(135deg,#6366f1,#8b5cf6,#06b6d4);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:slideInRight 1s ease .6s both,gradientShift 4s ease-in-out infinite 2s}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.hero-description{font-size:clamp(1rem,2vw,1.3rem);color:var(--text-secondary);max-width:600px;margin:0 auto 3rem;line-height:1.7;animation:fadeInUp 1s ease .6s both}.hero-actions{display:flex;gap:clamp(.75rem,2vw,1rem);justify-content:center;flex-wrap:wrap;margin-bottom:clamp(2rem,6vw,4rem);animation:fadeInUp 1s ease .8s both}@media (max-width: 768px){.hero-actions{flex-direction:column;align-items:center;gap:1rem}}.btn-hero{padding:clamp(.8rem,2vw,1rem) clamp(1.5rem,4vw,2rem);font-size:clamp(1rem,2.5vw,1.1rem);border-radius:50px;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .3s ease;min-width:160px}@media (max-width: 768px){.btn-hero{width:100%;max-width:280px;padding:1rem 2rem;font-size:1rem}}.btn-hero:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 10px 30px #6366f166}.btn-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;position:relative;overflow:hidden}.btn-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn-primary:hover:before{left:100%}.btn-secondary{background:rgba(99,102,241,.1);color:#6366f1;border:2px solid rgba(99,102,241,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hero-stats{display:flex;justify-content:center;gap:clamp(1.5rem,5vw,3rem);margin-bottom:clamp(1rem,3vw,2rem);animation:fadeInUp 1s ease 1s both;flex-wrap:wrap}@media (max-width: 768px){.hero-stats{gap:2rem;justify-content:space-around}}@media (max-width: 480px){.hero-stats{flex-direction:column;gap:1.5rem;align-items:center}}.hero-stats .stat{text-align:center}.hero-stats .stat strong{display:block;font-size:clamp(1.4rem,4vw,1.8rem);font-weight:800;color:var(--primary-color);margin-bottom:.25rem}.hero-stats .stat span{font-size:clamp(.8rem,2vw,.9rem);color:var(--text-secondary)}.scroll-indicator{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);z-index:3;color:var(--text-secondary);display:flex;flex-direction:column;align-items:center;gap:.5rem;animation:fadeInUp 1s ease 1.2s both,bounce 2s ease-in-out 2s infinite}.scroll-mouse{width:24px;height:40px;border:2px solid var(--text-secondary);border-radius:12px;margin:0 auto .5rem;position:relative}.scroll-wheel{width:4px;height:8px;background:var(--text-secondary);border-radius:2px;position:absolute;top:6px;left:50%;transform:translate(-50%);animation:scroll-wheel 2s infinite}.scroll-indicator span{font-size:.8rem;text-transform:uppercase;letter-spacing:1px}.stats-section{padding:80px 0;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;text-align:center}.stat-item h3{font-size:3rem;font-weight:800;color:var(--primary-color);margin-bottom:.5rem}.stat-item p{font-size:1.1rem;color:var(--text-secondary);font-weight:500}.solution-section{padding:120px 0;background-color:var(--bg-primary)}.comparison-container{display:grid;grid-template-columns:1fr auto 1fr;gap:3rem;align-items:center;max-width:1000px;margin:0 auto}.comparison-item{background:var(--bg-secondary);border-radius:20px;padding:3rem;border:2px solid var(--border-color);transition:all .3s ease}.comparison-item.before{border-color:#ef44444d}.comparison-item.after{border-color:#10b9814d;box-shadow:0 20px 40px #10b9811a}.comparison-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;justify-content:center}.comparison-header i{font-size:2rem}.comparison-item.before .comparison-header i{color:var(--error-color)}.comparison-item.after .comparison-header i{color:var(--success-color)}.comparison-header h3{font-size:1.8rem;margin:0}.comparison-content{display:flex;flex-direction:column;gap:1.5rem}.problem-item,.solution-item{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:12px;background:var(--bg-primary)}.problem-item i{color:var(--error-color);font-size:1.2rem}.solution-item i{color:var(--success-color);font-size:1.2rem}.vs-divider{display:flex;align-items:center;justify-content:center}.vs-circle{width:60px;height:60px;border-radius:50%;background:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem}.zones-preview{padding:120px 0;background-color:var(--bg-primary);background-image:radial-gradient(circle at 25% 25%,rgba(99,102,241,.05) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(139,92,246,.05) 0%,transparent 50%)}.zones-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem;margin-bottom:4rem}.zone-card{background:var(--bg-secondary);border-radius:20px;border:1px solid rgba(99,102,241,.1);padding:2.5rem;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;cursor:pointer}.zone-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--primary-color),transparent);opacity:0;transition:opacity .3s ease}.zone-card:hover:before{opacity:1}.zone-card:hover{transform:translateY(-8px);border-color:#6366f14d;box-shadow:0 20px 40px #0000001a,0 0 0 1px #6366f11a}.zone-card.featured:before{opacity:1;background:linear-gradient(90deg,var(--primary-color),var(--accent-color))}.zone-card.coming-soon{opacity:.8;background:linear-gradient(135deg,var(--bg-secondary) 0%,rgba(245,158,11,.02) 100%)}.zone-card.coming-soon:hover{opacity:.9}.zone-icon{width:80px;height:80px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#fff;margin-bottom:1.5rem;position:relative;box-shadow:0 8px 20px #0000001a;transition:transform .3s ease}.zone-card:hover .zone-icon{transform:scale(1.05)}.zone-icon.workspace{background:linear-gradient(135deg,#6366f1,#4f46e5)}.zone-icon.education{background:linear-gradient(135deg,#10b981,#059669)}.zone-icon.events{background:linear-gradient(135deg,#f59e0b,#d97706)}.zone-icon.gaming{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.zone-icon.chill{background:linear-gradient(135deg,#06b6d4,#0891b2)}.zone-icon.medical{background:linear-gradient(135deg,#ef4444,#dc2626)}.zone-content{text-align:left}.zone-content h3{font-size:1.75rem;font-weight:700;margin-bottom:.75rem;color:var(--text-primary);letter-spacing:-.01em}.zone-content p{color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem;font-size:1rem}.zone-features{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}.zone-features span{padding:.4rem .9rem;background:rgba(99,102,241,.08);color:var(--primary-color);border-radius:20px;font-size:.8rem;font-weight:500;transition:all .2s ease}.zone-features span:hover{background:rgba(99,102,241,.12);transform:translateY(-1px)}.zone-badge{position:absolute;top:1.5rem;right:1.5rem;padding:.5rem 1rem;border-radius:20px;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;z-index:2}.zone-badge:not(.soon){background:var(--primary-color);color:#fff;box-shadow:0 4px 12px #6366f14d}.zone-badge.soon{background:var(--warning-color);color:#fff;box-shadow:0 4px 12px #f59e0b4d}.zones-cta{text-align:center;margin-top:3rem}.zones-cta .btn-primary{padding:1rem 2.5rem;font-size:1.1rem;border-radius:12px;box-shadow:0 4px 14px #6366f14d}.zones-cta .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #6366f166}@media (max-width: 1200px){.zones-grid{grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}}@media (max-width: 768px){.zones-preview{padding:80px 0}.zones-grid{grid-template-columns:1fr;gap:1.5rem}.zone-card{padding:2rem;text-align:center}.zone-content{text-align:center}.zone-content h3{font-size:1.5rem}.zone-features{justify-content:center}}@media (max-width: 480px){.zone-card{padding:1.5rem}.zone-icon{width:70px;height:70px;font-size:1.8rem;border-radius:16px}.zone-content h3{font-size:1.3rem}.zone-content p{font-size:.9rem}}@keyframes zoneFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.zone-card:nth-child(odd){animation:zoneFloat 6s ease-in-out infinite;animation-delay:0s}.zone-card:nth-child(2n){animation:zoneFloat 6s ease-in-out infinite;animation-delay:-3s}.key-features{padding:120px 0;background-color:var(--bg-primary);border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color)}.features-showcase{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;margin-bottom:4rem}.feature-visual{position:relative}.feature-mockup{background:var(--bg-secondary);border-radius:20px;padding:2rem;box-shadow:var(--shadow-lg);border:1px solid var(--border-color)}.mockup-screen{background:var(--bg-primary);border-radius:12px;padding:1.5rem;min-height:200px}.mockup-avatars{display:flex;gap:1rem;margin-bottom:1.5rem}.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary-color),var(--accent-color));animation:pulse 2s infinite}.avatar-2{background:linear-gradient(135deg,var(--secondary-color),var(--primary-color));animation-delay:.5s}.avatar-3{background:linear-gradient(135deg,var(--accent-color),var(--secondary-color));animation-delay:1s}.feature-content h3{font-size:2rem;margin-bottom:1rem;color:var(--text-primary)}.feature-content p{font-size:1.1rem;color:var(--text-secondary);margin-bottom:2rem;line-height:1.7}.feature-list{list-style:none;padding:0}.feature-list li{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;color:var(--text-secondary)}.feature-list i{color:var(--success-color);font-size:1.1rem}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.feature-card{background:var(--bg-secondary);padding:2rem;border-radius:var(--border-radius);border:1px solid var(--border-color);transition:all .3s ease;text-align:center}.feature-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:var(--primary-color)}.feature-icon{font-size:2rem;color:var(--primary-color);margin-bottom:1rem}.feature-card h3{font-size:1.5rem;margin-bottom:.5rem;color:var(--text-primary)}.feature-card p{color:var(--text-secondary)}.build-section{padding:120px 0;background-color:var(--bg-secondary)}.build-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}.build-card{background:var(--bg-primary);padding:2rem;border-radius:var(--border-radius);border:1px solid var(--border-color);text-align:center;transition:all .3s ease}.build-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--accent-color)}.build-card i{font-size:2.5rem;color:var(--accent-color);margin-bottom:1rem;display:block}.build-card h4{font-size:1.3rem;margin-bottom:1rem;color:var(--text-primary)}.build-card p{color:var(--text-secondary)}.use-cases{padding:120px 0;background-color:var(--bg-primary)}.use-case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;align-items:stretch}.use-case-card{border-radius:var(--border-radius);overflow:hidden;position:relative;border:1px solid var(--border-color);transition:transform .3s ease;height:100%;display:flex;flex-direction:column}.use-case-card:hover{transform:translateY(-5px);border-color:var(--primary-color);box-shadow:0 10px 30px #0003}.use-case-content{padding:2rem;background:var(--bg-secondary);flex:1;display:flex;flex-direction:column}.use-case-content h3{font-size:1.5rem;margin-bottom:1rem;color:var(--text-primary)}.use-case-content p{color:var(--text-secondary);margin-bottom:1.5rem;line-height:1.6;flex-grow:1}.use-case-content ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.75rem;margin-top:auto}.use-case-content ul li{display:flex;align-items:center;gap:.75rem;color:var(--text-secondary);font-size:.9rem}.use-case-content ul li i{color:var(--success-color);font-size:.8rem;flex-shrink:0}.how-it-works{padding:120px 0;background-color:var(--bg-secondary);border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color)}.steps-container{display:flex;align-items:center;justify-content:center;max-width:1000px;margin:0 auto;gap:2rem}.step-item{flex:1;text-align:center;position:relative}.step-visual{position:relative;margin-bottom:2rem}.step-icon{width:80px;height:80px;background:var(--primary-color);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:2rem;color:#fff;box-shadow:0 10px 30px #6366f14d;transition:transform .3s ease}.step-item:hover .step-icon{transform:scale(1.1)}.step-number{position:absolute;top:-10px;right:-10px;width:30px;height:30px;background:var(--accent-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem}.step-content h3{font-size:1.5rem;margin-bottom:1rem;color:var(--text-primary)}.step-content p{color:var(--text-secondary);line-height:1.6}.step-connector{height:2px;background:linear-gradient(90deg,var(--primary-color),var(--accent-color));flex:.5;margin:0 1rem}.cta-section{padding:120px 0;background:linear-gradient(45deg,var(--primary-color),var(--secondary-color));color:#fff;text-align:center}.cta-section h2{font-size:2.5rem;margin-bottom:1rem;color:#fff}.cta-section p{font-size:1.2rem;margin-bottom:2rem;opacity:.9}.cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.cta-section .btn-primary{background:white;color:var(--primary-color)}.cta-section .btn-primary:hover{background:rgba(255,255,255,.9);transform:translateY(-2px)}.cta-section .btn-secondary{background:transparent;color:#fff;border-color:#fff}.cta-section .btn-secondary:hover{background:rgba(255,255,255,.1);border-color:#fff}.footer{background-color:var(--bg-secondary);border-top:2px solid var(--border-color);padding:4rem 0 2rem;margin-top:4rem;min-height:200px}.footer-content{margin-bottom:3rem}.footer-main{text-align:center;padding:2rem 0}.footer-title{font-size:2.5rem;font-weight:800;margin-bottom:1rem;color:var(--text-primary)}.footer-description{font-size:1.2rem;color:var(--text-secondary);margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}.footer-actions{display:flex;justify-content:center;gap:1rem;margin-top:2rem}.footer-bottom{border-top:1px solid var(--border-color);padding-top:2rem;background-color:#0000000d}.footer-bottom-content{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}.footer-info p{color:var(--text-secondary);margin:0;font-weight:500}.social-links{display:flex;gap:1rem}.social-links a{width:40px;height:40px;background-color:var(--bg-primary);border:2px solid var(--border-color);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-primary);transition:all .3s ease;text-decoration:none;font-weight:700;font-size:.9rem}.social-links a:hover{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color);transform:translateY(-2px)}.social-links a span{color:inherit}@media (max-width: 768px){.footer-bottom-content{flex-direction:column;gap:1rem;text-align:center}.footer-title{font-size:2rem}.footer-description{font-size:1rem}}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:2rem}.login-card{background:var(--bg-secondary);border-radius:20px;padding:3rem;box-shadow:var(--shadow-lg);width:100%;max-width:400px;animation:fadeInUp .8s ease}.login-header{text-align:center;margin-bottom:2rem}.login-header h2{color:var(--text-primary)}.login-header p{color:var(--text-secondary)}.login-options{display:flex;flex-direction:column;gap:1rem}.login-option{display:flex;align-items:center;gap:1rem;padding:1rem;border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--bg-secondary);cursor:pointer;transition:all .3s ease;font-size:1rem;font-weight:500;color:var(--text-primary)}.login-option:hover{border-color:var(--primary-color);transform:translateY(-2px)}.skip-login{background:var(--warning-color)!important;border-color:var(--warning-color)!important;color:#fff!important}.dashboard-nav{position:fixed;top:0;left:0;right:0;background:linear-gradient(135deg,rgba(11,17,32,.98),rgba(23,33,54,.95));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(99,102,241,.2);box-shadow:0 4px 20px #0000001a;z-index:1001;transition:all .3s ease}.dashboard-nav .nav-container{max-width:1400px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.dashboard-nav .nav-logo{cursor:pointer}.dashboard-nav .nav-logo h2{background:linear-gradient(135deg,var(--accent-color),var(--primary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800;transition:all .3s ease;font-size:1.6rem;margin:0;letter-spacing:-.5px}.dashboard-nav .nav-logo h2:hover{transform:scale(1.05);filter:brightness(1.2)}.nav-center{display:flex;align-items:center}.nav-time{display:flex;align-items:center;gap:.5rem;background:rgba(99,102,241,.1);padding:.5rem 1rem;border-radius:20px;border:1px solid rgba(99,102,241,.2);color:var(--primary-color);font-weight:500;font-size:.9rem}.nav-user{display:flex;align-items:center;gap:1rem}.user-avatar{width:40px;height:40px;background:linear-gradient(135deg,var(--primary-color),var(--accent-color));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem}.user-info{display:flex;flex-direction:column;align-items:flex-start}.greeting{color:var(--text-secondary);font-size:.8rem;font-weight:400}.username{color:var(--text-primary);font-weight:600;font-size:.9rem}.logout-btn{background:rgba(239,68,68,.1);color:var(--error-color);border:1px solid rgba(239,68,68,.2);padding:.6rem;border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;width:40px;height:40px}.logout-btn:hover{background:var(--error-color);color:#fff;transform:translateY(-2px);box-shadow:0 4px 15px #ef44444d}.dashboard-container{padding-top:80px;min-height:100vh;background:var(--bg-primary)}.dashboard-hero{padding:4rem 2rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;max-width:1400px;margin:0 auto;align-items:center}.hero-content h1{font-size:3.5rem;font-weight:800;color:var(--text-primary);margin-bottom:1.5rem;line-height:1.1;background:linear-gradient(135deg,var(--text-primary),var(--primary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-content p{font-size:1.2rem;color:var(--text-secondary);margin-bottom:3rem;line-height:1.6}.hero-stats{display:flex;gap:2rem}.stat-number{display:block;font-size:2.5rem;font-weight:800;color:var(--primary-color);margin-bottom:.5rem}.stat-label{font-size:.9rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.hero-visual{position:relative;height:400px}.floating-elements{position:relative;width:100%;height:100%}.floating-card{position:absolute;background:var(--bg-secondary);border:1px solid rgba(99,102,241,.2);border-radius:16px;padding:1.5rem;display:flex;align-items:center;gap:1rem;box-shadow:0 10px 30px #0000001a;animation:float 6s ease-in-out infinite}.floating-card i{font-size:1.5rem;color:var(--primary-color)}.floating-card span{color:var(--text-primary);font-weight:600}.card-1{top:20%;left:10%;animation-delay:0s}.card-2{top:50%;right:20%;animation-delay:-2s}.card-3{bottom:20%;left:30%;animation-delay:-4s}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.dashboard-main{display:grid;grid-template-columns:1fr 350px;gap:3rem;max-width:1400px;margin:0 auto;padding:0 2rem 4rem}.section-header{text-align:center;margin-bottom:3rem}.section-header h2{font-size:2.5rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem}.section-header p{font-size:1.1rem;color:var(--text-secondary)}.zones-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem}.zone-card.modern{background:var(--bg-secondary);border:1px solid rgba(99,102,241,.1);border-radius:20px;padding:2rem;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.zone-card.modern:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--primary-color),transparent);opacity:0;transition:opacity .3s ease}.zone-card.modern:hover:before{opacity:1}.zone-card.modern:hover{transform:translateY(-8px);border-color:#6366f14d;box-shadow:0 20px 40px #0000001a}.zone-card.featured{border-color:#6366f14d;background:linear-gradient(135deg,var(--bg-secondary) 0%,rgba(99,102,241,.02) 100%)}.zone-card.featured:before{opacity:1}.zone-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.zone-icon{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;transition:transform .3s ease}.zone-card:hover .zone-icon{transform:scale(1.1)}.zone-card.emerald .zone-icon{background:linear-gradient(135deg,#10b981,#059669)}.zone-card.purple .zone-icon{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.zone-card.amber .zone-icon{background:linear-gradient(135deg,#f59e0b,#d97706)}.zone-card.cyan .zone-icon{background:linear-gradient(135deg,#06b6d4,#0891b2)}.zone-card.indigo .zone-icon{background:linear-gradient(135deg,#6366f1,#4f46e5)}.zone-stats{font-size:.8rem;color:var(--text-secondary);background:rgba(99,102,241,.1);padding:.3rem .8rem;border-radius:12px}.zone-content h3{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:.8rem}.zone-content p{color:var(--text-secondary);line-height:1.5;margin-bottom:1.5rem}.zone-features{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}.feature-tag{padding:.3rem .8rem;background:rgba(99,102,241,.08);color:var(--primary-color);border-radius:12px;font-size:.8rem;font-weight:500}.zone-footer{display:flex;justify-content:space-between;align-items:center}.enter-text{color:var(--primary-color);font-weight:600;font-size:.9rem}.zone-arrow{color:var(--primary-color);font-size:1.2rem;transition:transform .3s ease}.zone-card:hover .zone-arrow{transform:translate(5px)}.featured-badge{position:absolute;top:1rem;right:1rem;background:var(--primary-color);color:#fff;padding:.4rem .8rem;border-radius:12px;font-size:.7rem;font-weight:600;display:flex;align-items:center;gap:.3rem}.sidebar{display:flex;flex-direction:column;gap:2rem}.activity-panel,.quick-actions{background:var(--bg-secondary);border:1px solid rgba(99,102,241,.1);border-radius:16px;padding:1.5rem}.activity-panel h3,.quick-actions h3{display:flex;align-items:center;gap:.5rem;color:var(--text-primary);font-size:1.1rem;font-weight:600;margin-bottom:1.5rem}.activity-list{display:flex;flex-direction:column;gap:1rem}.activity-item{display:flex;align-items:flex-start;gap:1rem}.activity-icon{color:var(--primary-color);font-size:.6rem;margin-top:.5rem}.activity-content{display:flex;flex-direction:column;gap:.2rem}.activity-zone{color:var(--text-primary);font-weight:600;font-size:.9rem}.activity-action{color:var(--text-secondary);font-size:.8rem}.activity-time{color:var(--text-secondary);font-size:.7rem}.action-buttons{display:flex;flex-direction:column;gap:.8rem}.action-btn{background:var(--bg-primary);border:1px solid rgba(99,102,241,.2);color:var(--text-primary);padding:1rem;border-radius:12px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.8rem;font-weight:500}.action-btn:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color);transform:translateY(-2px)}.action-btn i{font-size:1rem}@media (max-width: 1200px){.dashboard-main{grid-template-columns:1fr}.dashboard-hero{grid-template-columns:1fr;text-align:center}}@media (max-width: 768px){.hero-content h1{font-size:2.5rem}.zones-grid{grid-template-columns:1fr}.nav-center,.user-info{display:none}}.zone-nav{position:fixed;top:0;left:0;right:0;background:linear-gradient(135deg,rgba(11,17,32,.98),rgba(23,33,54,.95));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(99,102,241,.2);z-index:1001}.zone-nav.teaching{background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(11,17,32,.98));border-bottom-color:#10b9814d}.zone-nav .nav-container{max-width:1400px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.nav-breadcrumb{display:flex;align-items:center;gap:.5rem;color:var(--text-secondary);font-weight:500}.nav-breadcrumb i{color:var(--primary-color)}.nav-info{display:flex;align-items:center;gap:1.5rem}.session-info{display:flex;flex-direction:column;align-items:center;gap:.2rem}.session-id{color:var(--text-primary);font-weight:600;font-size:.9rem}.session-time{color:var(--text-secondary);font-size:.8rem}.live-indicator{display:flex;align-items:center;gap:.5rem;background:rgba(239,68,68,.1);padding:.4rem .8rem;border-radius:20px;border:1px solid rgba(239,68,68,.3);color:var(--error-color);font-weight:600;font-size:.8rem}.pulse{width:8px;height:8px;background:var(--error-color);border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.nav-actions{display:flex;align-items:center;gap:1rem}.share-btn{background:rgba(16,185,129,.1);color:#10b981;border:1px solid rgba(16,185,129,.3);padding:.6rem 1rem;border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.5rem;font-weight:500}.share-btn:hover{background:#10b981;color:#fff}.nav-back-btn{background:rgba(99,102,241,.1);color:var(--primary-color);border:1px solid rgba(99,102,241,.2);padding:.6rem;border-radius:8px;cursor:pointer;transition:all .3s ease;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.nav-back-btn:hover{background:var(--primary-color);color:#fff}.zone-container{padding-top:80px;min-height:100vh;background:var(--bg-primary)}.teaching-zone{background:linear-gradient(135deg,var(--bg-primary) 0%,rgba(16,185,129,.02) 100%)}.zone-hero{padding:4rem 2rem;text-align:center;max-width:1200px;margin:0 auto}.hero-content h1{font-size:3.5rem;font-weight:800;color:var(--text-primary);margin-bottom:1.5rem;background:linear-gradient(135deg,var(--text-primary),#10b981);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-content p{font-size:1.2rem;color:var(--text-secondary);margin-bottom:3rem}.zone-stats{display:flex;justify-content:center;gap:3rem}.stat{text-align:center}.stat .number{display:block;font-size:2.5rem;font-weight:800;color:#10b981;margin-bottom:.5rem}.stat .label{color:var(--text-secondary);font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.role-selection.modern{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem;max-width:1000px;margin:0 auto;padding:0 2rem 4rem}.role-card{background:var(--bg-secondary);border:1px solid rgba(16,185,129,.1);border-radius:20px;padding:2.5rem;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.role-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#10b981,transparent);opacity:0;transition:opacity .3s ease}.role-card:hover:before{opacity:1}.role-card:hover{transform:translateY(-8px);border-color:#10b9814d;box-shadow:0 20px 40px #0000001a}.role-card.teacher .role-icon{background:linear-gradient(135deg,#10b981,#059669)}.role-card.student .role-icon{background:linear-gradient(135deg,#6366f1,#4f46e5)}.role-icon{width:80px;height:80px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#fff;margin-bottom:2rem;transition:transform .3s ease}.role-card:hover .role-icon{transform:scale(1.1)}.role-content h3{font-size:1.8rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem}.role-content p{color:var(--text-secondary);margin-bottom:2rem;line-height:1.6}.role-features{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:2rem}.role-features span{display:flex;align-items:center;gap:.5rem;color:var(--text-secondary);font-size:.9rem}.role-features i{color:#10b981;width:16px}.role-action{display:flex;justify-content:space-between;align-items:center;color:#10b981;font-weight:600}.role-action i{transition:transform .3s ease}.role-card:hover .role-action i{transform:translate(5px)}.teaching-container{padding-top:80px;min-height:100vh;background:var(--bg-primary)}.pre-session{padding:4rem 2rem;max-width:800px;margin:0 auto}.setup-header{text-align:center;margin-bottom:3rem}.setup-header h1{font-size:2.5rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem}.setup-header p{color:var(--text-secondary);font-size:1.1rem}.setup-card{background:var(--bg-secondary);border:1px solid rgba(16,185,129,.1);border-radius:20px;padding:2rem;margin-bottom:2rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem}.setup-preview{text-align:center}.preview-video{background:var(--bg-primary);border:2px dashed rgba(16,185,129,.3);border-radius:12px;padding:3rem 2rem;margin-bottom:1rem;display:flex;flex-direction:column;align-items:center;gap:1rem}.preview-video i{font-size:3rem;color:#10b981}.preview-video span{color:var(--text-secondary);font-weight:500}.preview-controls{display:flex;justify-content:center;gap:1rem}.control-btn{width:50px;height:50px;border-radius:50%;border:none;background:var(--bg-primary);color:var(--text-secondary);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.control-btn.active{background:#10b981;color:#fff}.control-btn:hover{transform:scale(1.1)}.setup-options h3{color:var(--text-primary);margin-bottom:1.5rem;font-size:1.2rem}.option-group{display:flex;flex-direction:column;gap:1rem}.option-group label{display:flex;align-items:center;gap:.8rem;color:var(--text-secondary);cursor:pointer}.option-group input[type=checkbox]{width:18px;height:18px;accent-color:#10b981}.start-session-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:1.2rem 3rem;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.8rem;margin:0 auto;box-shadow:0 4px 20px #10b9814d}.start-session-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px #10b98166}.teaching-interface{display:grid;grid-template-columns:1fr 350px;gap:1rem;height:calc(100vh - 80px);padding:1rem}.video-section{height:200px}.teacher-video{background:var(--bg-secondary);border:1px solid rgba(16,185,129,.2);border-radius:12px;height:100%;position:relative;overflow:hidden}.video-stream{height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(16,185,129,.05))}.video-placeholder{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--text-secondary)}.video-placeholder i{font-size:3rem;color:#10b981}.video-overlay{position:absolute;top:1rem;left:1rem}.teacher-label{background:rgba(16,185,129,.9);color:#fff;padding:.3rem .8rem;border-radius:12px;font-size:.8rem;font-weight:500}.video-controls{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:flex;gap:.5rem}.video-controls .control-btn{width:45px;height:45px;background:rgba(0,0,0,.7);color:#fff;border:none;border-radius:50%;cursor:pointer;transition:all .3s ease}.video-controls .control-btn.active{background:#10b981}.video-controls .control-btn.end-call{background:var(--error-color)}.video-controls .control-btn:hover{transform:scale(1.1)}.content-area{flex:1}.whiteboard{background:white;border-radius:12px;height:100%;border:1px solid rgba(16,185,129,.2);display:flex;flex-direction:column}.whiteboard-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid rgba(16,185,129,.1)}.whiteboard-tools{display:flex;gap:.5rem}.tool-btn{width:40px;height:40px;background:var(--bg-secondary);border:1px solid rgba(16,185,129,.2);color:var(--text-primary);border-radius:8px;cursor:pointer;transition:all .3s ease}.tool-btn.active,.tool-btn:hover{background:#10b981;color:#fff;border-color:#10b981}.action-btn{background:#10b981;color:#fff;border:none;padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-size:.9rem;display:flex;align-items:center;gap:.5rem}.whiteboard-canvas{flex:1;display:flex;align-items:center;justify-content:center}.canvas-placeholder{text-align:center;color:#666}.canvas-placeholder i{font-size:3rem;color:#10b981;margin-bottom:1rem}.canvas-placeholder span{display:block;font-size:1.2rem;font-weight:600;margin-bottom:.5rem}.canvas-placeholder p{color:#999;font-size:.9rem}.sidebar{display:flex;flex-direction:column;gap:1rem;overflow-y:auto}.participants-panel,.tools-panel,.chat-panel{background:var(--bg-secondary);border:1px solid rgba(16,185,129,.1);border-radius:12px;overflow:hidden}.panel-header{padding:1rem;border-bottom:1px solid rgba(16,185,129,.1);background:rgba(16,185,129,.05)}.panel-header h3{color:var(--text-primary);font-size:.9rem;font-weight:600;margin:0;display:flex;align-items:center;gap:.5rem}.participants-list{padding:1rem;display:flex;flex-direction:column;gap:.8rem}.participant-item{display:flex;align-items:center;gap:.8rem;padding:.8rem;background:var(--bg-primary);border-radius:8px}.participant-avatar{position:relative;width:35px;height:35px;background:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.8rem}.hand-raised{position:absolute;top:-5px;right:-5px;font-size:.8rem}.participant-controls{display:flex;gap:.3rem}.participant-controls .control-btn{width:30px;height:30px;font-size:.8rem}.participant-controls .control-btn.muted,.participant-controls .control-btn.off{background:rgba(239,68,68,.1);color:var(--error-color)}.tools-panel{padding:1rem}.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.tools-grid .tool-btn{width:auto;height:auto;padding:.8rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;background:var(--bg-primary);border:1px solid rgba(16,185,129,.2);color:var(--text-primary);border-radius:8px;cursor:pointer;transition:all .3s ease}.tools-grid .tool-btn:hover{background:#10b981;color:#fff}.tools-grid .tool-btn span{font-size:.8rem;font-weight:500}.chat-panel{flex:1;display:flex;flex-direction:column;min-height:300px}.chat-messages{flex:1;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.8rem}.message{background:var(--bg-primary);padding:.8rem;border-radius:8px}.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem}.sender{color:#10b981;font-weight:600;font-size:.8rem}.time{color:var(--text-secondary);font-size:.7rem}.message-content{color:var(--text-primary);font-size:.9rem;line-height:1.4}.chat-input{padding:1rem;border-top:1px solid rgba(16,185,129,.1);display:flex;gap:.5rem}.chat-input input{flex:1;background:var(--bg-primary);border:1px solid rgba(16,185,129,.2);color:var(--text-primary);padding:.8rem;border-radius:8px;font-size:.9rem}.send-btn{background:#10b981;color:#fff;border:none;padding:.8rem;border-radius:8px;cursor:pointer;transition:all .3s ease}.send-btn:hover{background:#059669}.join-session{padding:4rem 2rem;max-width:600px;margin:0 auto;text-align:center}.join-header h1{font-size:2.5rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem}.join-header p{color:var(--text-secondary);font-size:1.1rem;margin-bottom:3rem}.join-form{margin-bottom:3rem}.input-group{display:flex;gap:1rem;margin-bottom:2rem}.meeting-input{flex:1;background:var(--bg-secondary);border:1px solid rgba(99,102,241,.2);color:var(--text-primary);padding:1rem;border-radius:8px;font-size:1rem}.join-btn{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));color:#fff;border:none;padding:1rem 2rem;border-radius:8px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:.5rem;transition:all .3s ease}.join-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #6366f14d}.student-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.feature-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--bg-secondary);border-radius:8px;border:1px solid rgba(99,102,241,.1)}.feature-item i{color:var(--primary-color);font-size:1.2rem}.feature-item span{color:var(--text-secondary);font-size:.9rem}@media (max-width: 1200px){.teaching-interface{grid-template-columns:1fr;height:auto}.setup-card{grid-template-columns:1fr}}@media (max-width: 768px){.role-selection.modern{grid-template-columns:1fr}.hero-content h1{font-size:2.5rem}.zone-stats{flex-direction:column;gap:1.5rem}.input-group{flex-direction:column}.nav-info{display:none}}.tabs{display:flex;background:var(--bg-primary);border-radius:8px;padding:.3rem;margin-bottom:1rem}.tab{flex:1;background:transparent;border:none;color:var(--text-secondary);padding:.8rem 1rem;border-radius:6px;cursor:pointer;transition:all .3s ease;font-size:.8rem;font-weight:500;display:flex;align-items:center;justify-content:center;gap:.5rem}.tab.active{background:#10b981;color:#fff}.tab:hover:not(.active){background:rgba(16,185,129,.1);color:#10b981}.teaching-container.student-view{display:grid;grid-template-columns:1fr 350px;gap:1rem;height:calc(100vh - 80px);padding:1rem}.teacher-video.large{height:300px}.student-video-controls{display:flex;justify-content:center;gap:1rem;margin-top:1rem}.student-video-controls .control-btn{width:50px;height:50px;background:var(--bg-secondary);border:1px solid rgba(16,185,129,.2);color:var(--text-primary);border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.student-video-controls .control-btn:hover{background:#10b981;color:#fff;transform:scale(1.1)}.student-video-controls .control-btn.end-call{background:var(--error-color);color:#fff;border-color:var(--error-color)}.whiteboard.readonly{background:var(--bg-secondary)}.whiteboard.readonly .whiteboard-header{background:rgba(16,185,129,.1)}.hand-raised-count{background:rgba(255,193,7,.1);color:#ffc107;padding:.2rem .6rem;border-radius:12px;font-size:.7rem;font-weight:600}.hand-raised-indicator{position:absolute;top:-8px;right:-8px;background:#ffc107;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.7rem;animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.tool-section{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(16,185,129,.1)}.tool-section:last-child{border-bottom:none;margin-bottom:0}.tool-section h4{color:var(--text-primary);font-size:.9rem;font-weight:600;margin-bottom:.8rem}.attendance-summary{display:flex;justify-content:space-between;align-items:center;background:var(--bg-primary);padding:.8rem;border-radius:8px}.view-attendance-btn{background:#10b981;color:#fff;border:none;padding:.4rem .8rem;border-radius:6px;cursor:pointer;font-size:.8rem;display:flex;align-items:center;gap:.3rem}.file-upload{margin-bottom:1rem}.upload-btn{background:var(--bg-primary);border:2px dashed rgba(16,185,129,.3);color:#10b981;padding:1rem;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:500;transition:all .3s ease}.upload-btn:hover{background:rgba(16,185,129,.1);border-color:#10b981}.notes-list{display:flex;flex-direction:column;gap:.5rem}.note-item{display:flex;align-items:center;gap:.8rem;padding:.6rem;background:var(--bg-primary);border-radius:6px;font-size:.8rem}.note-item i{color:#10b981}.note-info{display:flex;align-items:center;gap:.8rem;flex:1}.note-name{color:var(--text-primary);font-weight:500}.note-time{color:var(--text-secondary);font-size:.7rem}.download-btn{background:#10b981;color:#fff;border:none;padding:.4rem;border-radius:4px;cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center}.assessment-tools{display:flex;flex-direction:column;gap:.5rem}.assessment-tools .tool-btn{width:100%;padding:.8rem;background:var(--bg-primary);border:1px solid rgba(16,185,129,.2);color:var(--text-primary);border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-size:.8rem;transition:all .3s ease}.assessment-tools .tool-btn:hover{background:#10b981;color:#fff}.tool-btn.recording{background:var(--error-color);color:#fff;border-color:var(--error-color)}.test-panel{background:var(--bg-secondary);border:1px solid rgba(16,185,129,.1);border-radius:12px;overflow:hidden}.test-timer{background:rgba(255,193,7,.1);color:#ffc107;padding:.3rem .8rem;border-radius:12px;font-size:.8rem;font-weight:600}.test-questions{padding:1rem;max-height:400px;overflow-y:auto}.question{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(16,185,129,.1)}.question:last-child{border-bottom:none;margin-bottom:0}.question h4{color:var(--text-primary);margin-bottom:.8rem;font-size:.9rem}.options{display:flex;flex-direction:column;gap:.5rem}.option{display:flex;align-items:center;gap:.8rem;padding:.6rem;background:var(--bg-primary);border-radius:6px;cursor:pointer;transition:all .3s ease}.option:hover{background:rgba(16,185,129,.1)}.option input[type=radio]{accent-color:#10b981}.submit-test-btn{background:#10b981;color:#fff;border:none;padding:1rem;width:100%;border-radius:0;cursor:pointer;font-weight:600;display:flex;align-items:center;justify-content:center;gap:.5rem}.leaderboard-panel{background:var(--bg-secondary);border:1px solid rgba(255,193,7,.2);border-radius:12px;overflow:hidden}.leaderboard-list{padding:1rem}.leaderboard-item{display:flex;align-items:center;gap:1rem;padding:.8rem;background:var(--bg-primary);border-radius:8px;margin-bottom:.5rem}.leaderboard-item.rank-1{background:linear-gradient(135deg,rgba(255,193,7,.1),rgba(255,193,7,.05));border:1px solid rgba(255,193,7,.3)}.leaderboard-item.rank-2{background:linear-gradient(135deg,rgba(156,163,175,.1),rgba(156,163,175,.05));border:1px solid rgba(156,163,175,.3)}.leaderboard-item.rank-3{background:linear-gradient(135deg,rgba(205,127,50,.1),rgba(205,127,50,.05));border:1px solid rgba(205,127,50,.3)}.rank{font-weight:700;color:#ffc107;min-width:30px}.leaderboard-item .name{flex:1;color:var(--text-primary);font-weight:500}.score{color:#10b981;font-weight:600}.feedback-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:2000}.modal-content{background:var(--bg-secondary);border-radius:16px;padding:2rem;max-width:500px;width:90%;border:1px solid rgba(16,185,129,.2)}.modal-content h3{color:var(--text-primary);font-size:1.5rem;margin-bottom:.5rem;text-align:center}.modal-content p{color:var(--text-secondary);text-align:center;margin-bottom:2rem}.rating-section{margin-bottom:1.5rem}.rating-section label{color:var(--text-primary);font-weight:500;margin-bottom:.8rem;display:block}.stars{display:flex;justify-content:center;gap:.5rem}.star{background:none;border:none;color:#ddd;font-size:1.5rem;cursor:pointer;transition:all .3s ease}.star.active{color:#ffc107}.star:hover{transform:scale(1.2)}.comment-section{margin-bottom:2rem}.comment-section label{color:var(--text-primary);font-weight:500;margin-bottom:.8rem;display:block}.comment-section textarea{width:100%;background:var(--bg-primary);border:1px solid rgba(16,185,129,.2);color:var(--text-primary);padding:1rem;border-radius:8px;resize:vertical;min-height:100px;font-family:inherit}.modal-actions{display:flex;gap:1rem;justify-content:center}.submit-feedback-btn{background:#10b981;color:#fff;border:none;padding:.8rem 2rem;border-radius:8px;cursor:pointer;font-weight:600}.skip-btn{background:transparent;color:var(--text-secondary);border:1px solid rgba(156,163,175,.3);padding:.8rem 2rem;border-radius:8px;cursor:pointer}.message.host{background:rgba(16,185,129,.1);border-left:3px solid #10b981}.message.student{background:var(--bg-primary)}.attendance-btn{background:rgba(16,185,129,.1);color:#10b981;border:1px solid rgba(16,185,129,.3);padding:.6rem 1rem;border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.5rem;font-weight:500;font-size:.9rem}.attendance-btn:hover{background:#10b981;color:#fff}canvas{border:1px solid rgba(16,185,129,.2);border-radius:8px;background:white}.student-container{display:grid;grid-template-columns:1fr 350px;gap:1rem;height:calc(100vh - 80px);padding:1rem}.video-area{height:250px}.teacher-screen{background:var(--bg-secondary);border:1px solid rgba(16,185,129,.2);border-radius:12px;height:100%;position:relative;overflow:hidden}.student-controls{display:flex;justify-content:space-between;align-items:center;margin-top:1rem}.my-video-small{width:120px;height:80px;background:var(--bg-secondary);border:1px solid rgba(16,185,129,.2);border-radius:8px;display:flex;align-items:center;justify-content:center}.my-video-small .video-placeholder{text-align:center;color:var(--text-secondary);font-size:.8rem}.my-video-small .video-placeholder i{font-size:1.5rem;margin-bottom:.3rem;display:block}.control-buttons{display:flex;gap:.8rem;align-items:center}.whiteboard-area{flex:1;min-height:300px}.student-sidebar{display:flex;flex-direction:column;gap:1rem;overflow-y:auto}.notes-panel{background:var(--bg-secondary);border:1px solid rgba(16,185,129,.1);border-radius:12px;overflow:hidden}@media (max-width: 1200px){.teaching-container.student-view,.student-container{grid-template-columns:1fr;height:auto}.sidebar,.student-sidebar{order:-1}}@media (max-width: 768px){.tabs{flex-direction:column}.tab{padding:1rem}.modal-content{padding:1.5rem}.modal-actions{flex-direction:column}.control-buttons{flex-wrap:wrap;justify-content:center}.student-controls{flex-direction:column;gap:1rem}}.color-picker{width:40px;height:40px;border:none;border-radius:8px;cursor:pointer;background:none}.line-width{width:80px;height:40px;cursor:pointer}.whiteboard canvas{border:1px solid rgba(16,185,129,.2);border-radius:8px;background:white;cursor:crosshair}.whiteboard-tools{display:flex;align-items:center;gap:.5rem}.whiteboard-tools .tool-btn{width:40px;height:40px;background:var(--bg-secondary);border:1px solid rgba(16,185,129,.2);color:var(--text-primary);border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.whiteboard-tools .tool-btn.active,.whiteboard-tools .tool-btn:hover{background:#10b981;color:#fff;border-color:#10b981}.meeting-details{margin:1.5rem 0}.detail-item{margin-bottom:1rem}.detail-item label{color:var(--text-primary);font-weight:500;margin-bottom:.5rem;display:block}.meeting-id-display{display:flex;align-items:center;gap:.5rem;background:var(--bg-primary);padding:.8rem;border-radius:8px;border:1px solid rgba(16,185,129,.2)}.meeting-id-display span{flex:1;color:var(--text-primary);font-family:monospace;font-weight:600}.meeting-id-display button{background:#10b981;color:#fff;border:none;padding:.4rem;border-radius:4px;cursor:pointer;transition:all .3s ease}.meeting-id-display button:hover{background:#059669}.student-controls-section{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding:1rem;background:var(--bg-secondary);border-radius:12px}.my-video{width:150px;height:100px;background:var(--bg-primary);border-radius:8px;border:1px solid rgba(16,185,129,.2)}.video-placeholder.small{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-secondary)}.video-placeholder.small i{font-size:1.5rem;color:#10b981;margin-bottom:.5rem}.video-placeholder.small span{font-size:.8rem}.student-video-controls{display:flex;gap:.5rem}.student-container{display:grid;grid-template-columns:1fr 350px;gap:1rem;height:calc(100vh - 80px);padding:1rem;background:var(--bg-primary)}.main-content{display:flex;flex-direction:column;gap:1rem}.video-area{background:var(--bg-secondary);border-radius:12px;padding:1rem;border:1px solid rgba(16,185,129,.1)}.teacher-screen{width:100%;height:300px;background:var(--bg-primary);border-radius:8px;border:2px solid rgba(16,185,129,.2);margin-bottom:1rem}.teacher-screen .video-stream{height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(16,185,129,.05));border-radius:6px}.teacher-screen .video-placeholder{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--text-secondary)}.teacher-screen .video-placeholder i{font-size:3rem;color:#10b981}.teacher-screen .video-placeholder span{font-size:1.1rem;font-weight:500}.student-controls{display:flex;justify-content:space-between;align-items:center;gap:1rem}.my-video-small{width:150px;height:100px;background:var(--bg-primary);border-radius:8px;border:1px solid rgba(16,185,129,.2);display:flex;align-items:center;justify-content:center}.my-video-small .video-placeholder{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--text-secondary);text-align:center}.my-video-small .video-placeholder i{font-size:1.5rem;color:#10b981}.my-video-small .video-placeholder span{font-size:.8rem}.control-buttons{display:flex;gap:.5rem}.control-buttons .control-btn{width:50px;height:50px;background:var(--bg-primary);border:1px solid rgba(16,185,129,.2);color:var(--text-primary);border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;font-size:.9rem}.control-buttons .control-btn:hover{background:#10b981;color:#fff;transform:scale(1.1)}.control-buttons .control-btn.active{background:#10b981;color:#fff;border-color:#10b981}.control-buttons .control-btn.end-call{background:var(--error-color);color:#fff;border-color:var(--error-color)}.whiteboard-area{flex:1;background:white;border-radius:12px;border:1px solid rgba(16,185,129,.2);overflow:hidden}.student-sidebar{display:flex;flex-direction:column;background:var(--bg-secondary);border-radius:12px;border:1px solid rgba(16,185,129,.1);overflow:hidden}.student-sidebar .tabs{display:flex;background:var(--bg-primary);border-radius:8px 8px 0 0}.student-sidebar .tab{flex:1;background:transparent;border:none;color:var(--text-secondary);padding:.8rem .5rem;cursor:pointer;transition:all .3s ease;font-size:.7rem;font-weight:500;display:flex;flex-direction:column;align-items:center;gap:.2rem}.student-sidebar .tab.active{background:#10b981;color:#fff}.student-sidebar .tab:hover:not(.active){background:rgba(16,185,129,.1);color:#10b981}.participants-panel{flex:1;padding:1rem}.participants-panel .panel-header h3{color:var(--text-primary);font-size:.9rem;margin-bottom:1rem}.participants-list{display:flex;flex-direction:column;gap:.5rem}.participant-item{display:flex;align-items:center;gap:.8rem;padding:.6rem;background:var(--bg-primary);border-radius:8px;transition:all .3s ease}.participant-item.teacher{border:1px solid rgba(16,185,129,.3);background:rgba(16,185,129,.05)}.participant-item.hand-raised{background:rgba(255,193,7,.1);border:1px solid rgba(255,193,7,.3)}.participant-avatar{position:relative;width:32px;height:32px;background:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.8rem}.participant-item.teacher .participant-avatar{background:linear-gradient(135deg,#10b981,#059669)}.hand-raised-indicator{position:absolute;top:-5px;right:-5px;font-size:.7rem;animation:bounce 2s infinite}.participant-info .name{color:var(--text-primary);font-weight:500;font-size:.8rem}.navbar.student{background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(11,17,32,.98));border-bottom-color:#6366f14d}@media (max-width: 1200px){.student-container{grid-template-columns:1fr;height:auto}.student-sidebar{order:-1;max-height:300px}.student-sidebar .tabs{flex-direction:row}}@media (max-width: 768px){.student-controls{flex-direction:column;gap:1rem}.control-buttons{justify-content:center;flex-wrap:wrap}.my-video-small{width:120px;height:80px}}.attendance-list{max-height:400px;overflow-y:auto;margin:1.5rem 0}.attendance-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:var(--bg-primary);border-radius:8px;margin-bottom:.5rem;border:1px solid rgba(16,185,129,.1)}.student-info{display:flex;align-items:center;gap:1rem}.student-avatar{width:40px;height:40px;background:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.9rem}.student-details{display:flex;flex-direction:column}.student-name{color:var(--text-primary);font-weight:500;margin-bottom:.2rem}.join-time{color:var(--text-secondary);font-size:.8rem}.attendance-status{display:flex;align-items:center;gap:.5rem;color:#10b981;font-weight:500;font-size:.9rem}.no-attendance{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;color:var(--text-secondary);text-align:center}.no-attendance i{font-size:2rem;color:var(--text-secondary)}.zone-nav.gaming{background:linear-gradient(135deg,rgba(139,92,246,.1),rgba(11,17,32,.98));border-bottom-color:#8b5cf64d}.gaming-zone{background:linear-gradient(135deg,var(--bg-primary) 0%,rgba(139,92,246,.02) 100%)}.role-card.host .role-icon{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.role-card.player .role-icon{background:linear-gradient(135deg,#6366f1,#4f46e5)}.gaming-container{padding-top:80px;min-height:100vh;background:var(--bg-primary)}.gaming-interface{display:grid;grid-template-columns:1fr 350px;gap:1rem;height:calc(100vh - 80px);padding:1rem}.video-grid{display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-start;align-items:flex-start}.participant-video{width:280px;height:240px;background:var(--bg-secondary);border:2px solid rgba(139,92,246,.3);border-radius:12px;overflow:visible;position:relative;flex-shrink:0;transition:all .3s ease;display:flex;flex-direction:column}.participant-video.screen-sharing{width:300px;height:225px;border-color:#10b981;box-shadow:0 0 20px #10b9814d}.video-stream{width:100%;height:200px;position:relative;background:#000;overflow:hidden;border-radius:12px 12px 0 0}.participant-video.screen-sharing .video-stream{height:185px}.video-element{width:100%;height:100%;object-fit:cover;background:#000;transform:scaleX(-1)}.video-element.screen-share{transform:scaleX(1)}.participant-video.local .video-element{transform:scaleX(-1)}.video-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--text-secondary)}.connecting-text{color:var(--text-secondary);font-size:.8rem;margin-top:.5rem;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.participant-avatar{width:60px;height:60px;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:1.2rem}.participant-name{color:var(--text-primary);font-weight:600;font-size:1rem}.host-badge{position:absolute;top:.5rem;left:.5rem;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:.3rem .6rem;border-radius:12px;font-size:.8rem;display:flex;align-items:center;gap:.3rem}.screen-badge{position:absolute;top:.5rem;right:.5rem;background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:.3rem .6rem;border-radius:12px;font-size:.8rem;z-index:10}.expand-btn{position:absolute;bottom:.5rem;right:.5rem;background:rgba(0,0,0,.7);color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:all .3s ease;z-index:10}.participant-video:hover .expand-btn{opacity:1}.expand-btn:hover{background:rgba(0,0,0,.9);transform:scale(1.1)}.video-name{padding:.5rem;text-align:center;background:rgba(139,92,246,.15);border-top:1px solid rgba(139,92,246,.3);min-height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:0 0 12px 12px}.video-name .participant-name{color:var(--text-primary);font-size:.9rem;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.participant-score{background:rgba(139,92,246,.9);color:#fff;padding:.3rem .8rem;border-radius:12px;font-size:.8rem;font-weight:600}.participant-controls{height:40px;padding:.5rem;display:flex;justify-content:center;gap:.5rem;background:rgba(139,92,246,.1);border-radius:0 0 12px 12px;align-items:center;flex-shrink:0}.control-indicator{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(139,92,246,.2);color:#8b5cf6;font-size:.7rem}.control-indicator.active{background:#8b5cf6;color:#fff}.control-indicator.muted{background:rgba(239,68,68,.1);color:var(--error-color)}.gaming-controls{display:flex;justify-content:center;gap:1rem;padding:1rem;background:var(--bg-secondary);border:1px solid rgba(139,92,246,.2);border-radius:12px;position:sticky;bottom:0;z-index:100}.gaming-controls .control-btn{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.2);color:#8b5cf6;border-radius:12px;cursor:pointer;transition:all .3s ease;min-width:80px}.gaming-controls .control-btn:hover,.gaming-controls .control-btn.active{background:#8b5cf6;color:#fff;border-color:#8b5cf6}.gaming-controls .control-btn.end-btn{background:rgba(239,68,68,.1);color:var(--error-color);border-color:#ef444433}.gaming-controls .control-btn.end-btn:hover{background:var(--error-color);color:#fff}.gaming-controls .control-btn span{font-size:.8rem;font-weight:500}.participants-panel{background:var(--bg-secondary);border:1px solid rgba(139,92,246,.1);border-radius:12px;overflow:hidden;margin-bottom:1rem}.participants-list{padding:1rem;display:flex;flex-direction:column;gap:.8rem;max-height:300px;overflow-y:auto}.participant-item{display:flex;align-items:center;gap:1rem;padding:.8rem;background:var(--bg-primary);border-radius:8px}.participant-item .participant-avatar{width:40px;height:40px;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.9rem}.participant-item .participant-info{flex:1;display:flex;flex-direction:column}.participant-item .name{color:var(--text-primary);font-weight:600;font-size:.9rem}.participant-item .host-label{color:#f59e0b;font-size:.7rem;font-weight:500;text-transform:uppercase}.participant-status{display:flex;gap:.3rem}.status-indicator{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(139,92,246,.1);color:#8b5cf6;font-size:.7rem}.status-indicator.active{background:#8b5cf6;color:#fff}.status-indicator.muted{background:rgba(239,68,68,.1);color:var(--error-color)}.leaderboard-panel{background:var(--bg-secondary);border:1px solid rgba(139,92,246,.1);border-radius:12px;overflow:hidden;margin-bottom:1rem}.leaderboard-list{padding:1rem;display:flex;flex-direction:column;gap:.8rem}.leaderboard-item{display:flex;align-items:center;gap:1rem;padding:.8rem;background:var(--bg-primary);border-radius:8px;position:relative}.leaderboard-item:first-child{background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(245,158,11,.05));border:1px solid rgba(245,158,11,.2)}.rank{width:30px;height:30px;background:#8b5cf6;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.9rem}.leaderboard-item:first-child .rank{background:linear-gradient(135deg,#f59e0b,#d97706)}.player-info{flex:1;display:flex;flex-direction:column}.player-info .name{color:var(--text-primary);font-weight:600;font-size:.9rem}.player-info .score{color:var(--text-secondary);font-size:.8rem}.winner{color:#f59e0b;font-size:1.2rem}.gaming-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin:2rem 0}.gaming-features .feature-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--bg-secondary);border-radius:8px;border:1px solid rgba(139,92,246,.1)}.gaming-features .feature-item i{color:#8b5cf6;font-size:1.2rem}.gaming-features .feature-item span{color:var(--text-secondary);font-size:.9rem}@media (max-width: 1200px){.gaming-interface{grid-template-columns:1fr;height:auto}.participant-video{width:240px;height:200px}.participant-video.screen-sharing{width:320px;height:240px}.video-stream{height:160px}.participant-video.screen-sharing .video-stream{height:200px}}@media (max-width: 768px){.gaming-controls{flex-wrap:wrap}.gaming-controls .control-btn{min-width:70px;padding:.8rem}.video-grid{justify-content:center}}.screen-share-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .3s ease}.modal-content{background:var(--bg-secondary);border-radius:12px;overflow:hidden;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;border:1px solid rgba(139,92,246,.2)}.modal-header{padding:1rem 1.5rem;background:var(--bg-primary);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(139,92,246,.1)}.modal-header h3{color:var(--text-primary);margin:0;font-size:1.1rem}.close-btn{background:none;border:none;color:var(--text-secondary);font-size:1.2rem;cursor:pointer;padding:.5rem;border-radius:50%;transition:all .3s ease}.close-btn:hover{background:rgba(239,68,68,.1);color:var(--error-color)}.modal-video{padding:1rem;display:flex;justify-content:center;align-items:center;min-height:400px}.expanded-video{width:100%;height:auto;max-width:800px;max-height:600px;border-radius:8px;background:#000}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.copy-success-popup{position:fixed;top:100px;right:20px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:1rem 1.5rem;border-radius:12px;display:flex;align-items:center;gap:.8rem;box-shadow:0 10px 25px #10b9814d;z-index:1000;animation:slideInRight .3s ease-out}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.join-form .input-group{display:flex;flex-direction:column;gap:1rem;max-width:500px;margin:0 auto}.user-info{padding:1rem;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.2);border-radius:12px;text-align:center;color:var(--text-secondary);font-size:.9rem}.user-info strong{color:var(--text-primary);font-weight:600}.join-form .meeting-input{padding:1rem;border:1px solid rgba(139,92,246,.2);border-radius:12px;background:var(--bg-secondary);color:var(--text-primary);font-size:1rem}.join-form .meeting-input:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.join-btn{padding:1rem 2rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.8rem}.join-btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px #8b5cf64d}.chat-messages::-webkit-scrollbar{width:4px}.chat-messages::-webkit-scrollbar-track{background:var(--bg-primary)}.chat-messages::-webkit-scrollbar-thumb{background:rgba(139,92,246,.3);border-radius:2px}.message-content{word-wrap:break-word}.chat-input input:focus{box-shadow:0 0 0 2px #8b5cf61a}.send-btn{min-width:40px;display:flex;align-items:center;justify-content:center}.send-btn:hover{transform:translateY(-1px)}.gaming-controls .control-btn:disabled{opacity:.5;cursor:not-allowed}.gaming-controls .control-btn:disabled:hover{transform:none;background:rgba(139,92,246,.1);color:#8b5cf6}@media (max-width: 768px){.sidebar{order:-1;margin-bottom:1rem}.participant-video{width:200px;height:170px}.participant-video.screen-sharing{width:260px;height:190px}.video-stream{height:130px}.participant-video.screen-sharing .video-stream{height:150px}.video-grid{justify-content:center}.gaming-interface{padding:.5rem;gap:.5rem}.join-form .input-group{padding:0 1rem}.copy-success-popup{left:10px;right:auto}.gaming-controls .control-btn{font-size:.8rem}.modal-content{max-width:95vw;max-height:95vh}.expanded-video{max-width:100%;max-height:300px}}.participant-name{font-size:.85rem;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-element{border-radius:8px}.participant-video.screen-sharing .video-element{object-fit:contain}.participant-video:not(.screen-sharing) .video-element{object-fit:cover}.share-btn{padding:.6rem 1rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:500}.share-btn:hover{background:linear-gradient(135deg,#7c3aed,#6d28d9);transform:translateY(-1px)}.zone-nav.events{background:linear-gradient(135deg,rgba(0,212,255,.1),rgba(11,17,32,.98));border-bottom-color:#00d4ff4d}.events-zone{background:linear-gradient(135deg,var(--bg-primary) 0%,rgba(0,212,255,.02) 100%)}.role-card.host .role-icon{background:linear-gradient(135deg,#00d4ff,#0099cc)}.role-card.attendee .role-icon{background:linear-gradient(135deg,#6366f1,#4f46e5)}.events-container{padding-top:80px;min-height:100vh;background:var(--bg-primary)}.events-interface{display:flex;height:calc(100vh - 80px);gap:20px;padding:20px;background:var(--bg-primary)}.main-stage{flex:1;display:flex;flex-direction:column;gap:20px}.presenter-area{background:var(--bg-secondary);border:1px solid rgba(0,212,255,.2);border-radius:12px;overflow:hidden;position:relative}.host-video{position:relative}.video-stream{position:relative;width:100%;height:400px;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center}.host-video-stream,.screen-share-video{width:100%;height:100%;object-fit:cover}.host-video-preview{width:200px;height:150px;border-radius:8px;object-fit:cover;background:var(--bg-tertiary)}.video-overlay{position:absolute;bottom:10px;left:10px;background:rgba(0,0,0,.8);color:#fff;padding:5px 10px;border-radius:5px;font-size:14px}.presenter-controls{display:flex;justify-content:center;gap:10px;padding:15px;background:var(--bg-tertiary)}.control-btn{width:50px;height:50px;border:none;border-radius:50%;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,212,255,.2)}.control-btn:hover{background:rgba(0,212,255,.1);transform:scale(1.05);border-color:#00d4ff}.control-btn.active{background:#00d4ff;color:#fff}.control-btn.end-btn{background:var(--error-color);color:#fff}.control-btn.end-btn:hover{background:#ff3742}.presentation-board{background:var(--bg-secondary);border:1px solid rgba(0,212,255,.2);border-radius:12px;overflow:hidden}.board-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:var(--bg-tertiary);border-bottom:1px solid rgba(0,212,255,.1)}.board-tools{display:flex;gap:10px;align-items:center}.tool-btn{width:40px;height:40px;border:1px solid rgba(0,212,255,.2);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.tool-btn:hover{background:rgba(0,212,255,.1);border-color:#00d4ff}.tool-btn.active{background:#00d4ff;color:#fff;border-color:#00d4ff}.color-picker{width:40px;height:40px;border:1px solid rgba(0,212,255,.2);border-radius:8px;cursor:pointer;background:var(--bg-secondary)}.board-actions{display:flex;gap:10px}.action-btn{padding:8px 16px;border:1px solid rgba(0,212,255,.2);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:5px}.action-btn:hover{background:rgba(0,212,255,.1);border-color:#00d4ff}.whiteboard-canvas{display:block;cursor:crosshair;background:var(--bg-primary);border-radius:8px}.attendee-whiteboard{width:100%;height:100%;border-radius:8px;background:var(--bg-primary)}.sidebar{width:350px;display:flex;flex-direction:column;gap:20px}.audience-panel,.host-tools,.chat-panel,.documents-panel,.poll-panel{background:var(--bg-secondary);border:1px solid rgba(0,212,255,.1);border-radius:12px;overflow:hidden}.panel-header{padding:15px 20px;background:var(--bg-tertiary);border-bottom:1px solid rgba(0,212,255,.1);display:flex;justify-content:space-between;align-items:center}.panel-header h3{margin:0;font-size:16px;color:var(--text-primary);display:flex;align-items:center;gap:8px}.audience-stats{display:flex;padding:15px 20px;gap:20px}.stat-item{text-align:center}.stat-item .number{display:block;font-size:24px;font-weight:700;color:#00d4ff}.stat-item .label{font-size:12px;color:var(--text-secondary)}.attendee-list{max-height:200px;overflow-y:auto;padding:10px}.attendee-item{display:flex;align-items:center;padding:10px;border-bottom:1px solid rgba(0,212,255,.1);transition:background .3s ease;border-radius:8px;margin-bottom:5px}.attendee-item:hover{background:rgba(0,212,255,.05)}.attendee-item.hand-raised{background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.3)}.attendee-avatar{width:35px;height:35px;border-radius:50%;background:#00d4ff;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;margin-right:10px}.attendee-info{flex:1}.attendee-info .name{display:block;font-weight:500;color:var(--text-primary)}.attendee-info .status{font-size:12px;color:var(--text-secondary)}.hand-icon{color:#00d4ff;animation:wave 1s ease-in-out infinite}@keyframes wave{0%,to{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:20px}.tools-grid .tool-btn{width:auto;height:60px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:5px;border-radius:8px;border:1px solid rgba(0,212,255,.2);background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;transition:all .3s ease}.tools-grid .tool-btn:hover{background:rgba(0,212,255,.1);border-color:#00d4ff;transform:translateY(-2px)}.tools-grid .tool-btn.danger{border-color:var(--error-color);color:var(--error-color)}.tools-grid .tool-btn.danger:hover{background:var(--error-color);color:#fff}.tools-grid .tool-btn i{font-size:18px}.tools-grid .tool-btn span{font-size:12px;font-weight:500}.chat-messages{height:200px;overflow-y:auto;padding:15px 20px}.message{margin-bottom:15px}.message-header{display:flex;justify-content:space-between;margin-bottom:5px}.sender{font-weight:500;color:var(--text-primary);font-size:14px}.time{font-size:12px;color:var(--text-secondary)}.message-content{color:var(--text-secondary);font-size:14px;line-height:1.4}.chat-input{display:flex;padding:15px 20px;border-top:1px solid rgba(0,212,255,.1);gap:10px}.chat-input input{flex:1;padding:10px 15px;border:1px solid rgba(0,212,255,.2);border-radius:20px;outline:none;font-size:14px;background:var(--bg-tertiary);color:var(--text-primary)}.chat-input input:focus{border-color:#00d4ff}.chat-input input::placeholder{color:var(--text-secondary)}.send-btn{width:40px;height:40px;border:none;border-radius:50%;background:#00d4ff;color:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.send-btn:hover{background:#00b8e6;transform:scale(1.05)}.chat-status{padding:4px 8px;border-radius:12px;font-size:12px;font-weight:500}.chat-status.enabled{background:rgba(16,185,129,.2);color:#10b981}.chat-status.disabled{background:rgba(239,68,68,.2);color:var(--error-color)}.chat-disabled{padding:40px 20px;text-align:center;color:var(--text-secondary)}.documents-list{padding:15px 20px}.document-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(0,212,255,.1)}.doc-info{display:flex;align-items:center;gap:10px;flex:1}.doc-name{font-weight:500;color:var(--text-primary)}.doc-size{font-size:12px;color:var(--text-secondary)}.download-btn{width:35px;height:35px;border:1px solid rgba(0,212,255,.2);border-radius:6px;background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.download-btn:hover{background:#00d4ff;color:#fff;border-color:#00d4ff}.poll-content{padding:15px 20px}.poll-content h4{margin:0 0 15px;color:var(--text-primary)}.poll-options{display:flex;flex-direction:column;gap:10px}.poll-option{display:flex;justify-content:space-between;align-items:center;padding:10px;background:var(--bg-tertiary);border-radius:6px}.poll-option-btn{width:100%;padding:12px;border:1px solid rgba(0,212,255,.2);border-radius:6px;background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;transition:all .3s ease;text-align:left}.poll-option-btn:hover{background:rgba(0,212,255,.1);border-color:#00d4ff}.vote-count{font-size:12px;color:var(--text-secondary);font-weight:500}.setup-form{padding:20px;flex:1}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:5px;font-weight:500;color:var(--text-primary)}.form-input,.form-textarea{width:100%;padding:12px 15px;border:1px solid rgba(0,212,255,.2);border-radius:8px;font-size:14px;outline:none;transition:border-color .3s ease;background:var(--bg-tertiary);color:var(--text-primary)}.form-input:focus,.form-textarea:focus{border-color:#00d4ff}.form-input::placeholder,.form-textarea::placeholder{color:var(--text-secondary)}.form-textarea{resize:vertical;min-height:80px}.attendee-interface{padding:20px;height:calc(100vh - 80px);display:flex;flex-direction:column;gap:20px;background:var(--bg-primary)}.event-header{text-align:center;padding:20px;background:var(--bg-secondary);border:1px solid rgba(0,212,255,.1);border-radius:12px}.event-header h1{margin:0 0 10px;color:var(--text-primary)}.event-header p{margin:0 0 20px;color:var(--text-secondary)}.event-controls{display:flex;justify-content:center;gap:15px}.event-content{display:flex;gap:20px;flex:1}.main-view{flex:1;display:flex;flex-direction:column;gap:20px}.host-stream{background:var(--bg-secondary);border:1px solid rgba(0,212,255,.2);border-radius:12px;height:400px;display:flex;align-items:center;justify-content:center;color:var(--text-primary)}.stream-placeholder{text-align:center}.stream-placeholder i{font-size:48px;margin-bottom:10px;display:block;color:var(--text-secondary)}.whiteboard-view{background:var(--bg-secondary);border:1px solid rgba(0,212,255,.1);border-radius:12px;padding:20px}.attendee-sidebar{width:300px;display:flex;flex-direction:column;gap:20px}.documents-section,.poll-section,.chat-section{background:var(--bg-secondary);border:1px solid rgba(0,212,255,.1);border-radius:12px;overflow:hidden}.documents-section h3,.poll-section h3,.chat-section h3{margin:0;padding:15px 20px;background:var(--bg-tertiary);border-bottom:1px solid rgba(0,212,255,.1);font-size:16px;color:var(--text-primary);display:flex;align-items:center;gap:8px}.setup-card{display:flex;gap:20px;background:var(--bg-secondary);border:1px solid rgba(0,212,255,.1);border-radius:12px;padding:20px;margin-bottom:30px}.setup-preview{flex:1;text-align:center}.preview-video{width:100%;height:200px;background:var(--bg-tertiary);border:1px solid rgba(0,212,255,.2);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-primary);margin-bottom:15px;position:relative;overflow:hidden}.preview-video i{font-size:48px;margin-bottom:10px;color:var(--text-secondary)}.preview-controls{display:flex;justify-content:center;gap:10px}.join-session{max-width:600px;margin:0 auto;padding:40px 20px;text-align:center}.join-header h1{color:var(--text-primary);margin-bottom:10px}.join-header p{color:var(--text-secondary);margin-bottom:30px}.join-form{margin-bottom:40px}.input-group{display:flex;gap:10px;max-width:500px;margin:0 auto}.meeting-input{flex:1;padding:15px 20px;border:1px solid rgba(0,212,255,.2);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:16px;outline:none}.meeting-input:focus{border-color:#00d4ff}.meeting-input::placeholder{color:var(--text-secondary)}.join-btn{padding:15px 25px;background:#00d4ff;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:500;transition:all .3s ease;display:flex;align-items:center;gap:8px}.join-btn:hover{background:#00b8e6;transform:translateY(-2px)}@media (max-width: 1200px){.events-interface{flex-direction:column}.sidebar{width:100%;flex-direction:row;overflow-x:auto}.sidebar>div{min-width:300px}}@media (max-width: 768px){.events-interface{padding:10px}.sidebar{flex-direction:column}.tools-grid{grid-template-columns:1fr}.event-content{flex-direction:column}.attendee-sidebar{width:100%}.setup-card,.input-group{flex-direction:column}}.zone-nav.chill{background:linear-gradient(135deg,rgba(6,182,212,.1),rgba(11,17,32,.98));border-bottom-color:#06b6d44d}.live-indicator.chill{background:rgba(6,182,212,.1);border-color:#06b6d44d;color:#06b6d4}.chill-zone{background:linear-gradient(135deg,var(--bg-primary) 0%,rgba(6,182,212,.02) 100%)}.role-card.host .role-icon{background:linear-gradient(135deg,#06b6d4,#0891b2)}.role-card.member .role-icon{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.chill-container{padding-top:80px;min-height:100vh;background:var(--bg-primary)}.chill-interface{display:grid;grid-template-columns:1fr 350px;gap:1rem;height:calc(100vh - 80px);padding:1rem}.main-area{display:flex;flex-direction:column;gap:1rem}.media-section{flex:1;background:var(--bg-secondary);border:1px solid rgba(6,182,212,.2);border-radius:12px;overflow:hidden}.media-tabs{display:flex;background:rgba(6,182,212,.05);border-bottom:1px solid rgba(6,182,212,.1)}.tab-btn{flex:1;padding:1rem;background:none;border:none;color:var(--text-secondary);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:500}.tab-btn.active,.tab-btn:hover{background:rgba(6,182,212,.1);color:#06b6d4}.media-player{padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.now-playing{background:var(--bg-primary);border:1px solid rgba(6,182,212,.2);border-radius:12px;padding:1.5rem}.media-display{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem}.music-visualizer{display:flex;align-items:end;gap:3px;height:40px}.bar{width:4px;background:linear-gradient(to top,#06b6d4,#0891b2);border-radius:2px;animation:musicBar 1.5s ease-in-out infinite}.bar:nth-child(1){animation-delay:0s;height:20px}.bar:nth-child(2){animation-delay:.2s;height:35px}.bar:nth-child(3){animation-delay:.4s;height:40px}.bar:nth-child(4){animation-delay:.6s;height:25px}.bar:nth-child(5){animation-delay:.8s;height:30px}@keyframes musicBar{0%,to{transform:scaleY(1)}50%{transform:scaleY(.5)}}.track-info h3{color:var(--text-primary);font-size:1.2rem;font-weight:600;margin-bottom:.3rem}.track-info p{color:var(--text-secondary);font-size:.9rem}.media-controls{display:flex;align-items:center;gap:1rem}.media-controls .control-btn{width:45px;height:45px;border-radius:50%;border:none;background:rgba(6,182,212,.1);color:#06b6d4;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.media-controls .control-btn:hover{background:#06b6d4;color:#fff;transform:scale(1.1)}.play-btn{width:55px!important;height:55px!important;background:linear-gradient(135deg,#06b6d4,#0891b2)!important;color:#fff!important}.volume-control{display:flex;align-items:center;gap:.8rem;margin-left:auto}.volume-control i{color:#06b6d4}.volume-slider{width:100px;accent-color:#06b6d4}.media-queue{background:var(--bg-primary);border:1px solid rgba(6,182,212,.2);border-radius:12px;padding:1rem}.media-queue h4{color:var(--text-primary);font-size:1rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.queue-list{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1rem}.queue-item{display:flex;justify-content:space-between;align-items:center;padding:.8rem;background:var(--bg-secondary);border-radius:8px;border:1px solid rgba(6,182,212,.1)}.queue-info{flex:1}.track-name{color:var(--text-primary);font-weight:500;font-size:.9rem;display:block;margin-bottom:.2rem}.queue-item small{color:var(--text-secondary);font-size:.8rem}.queue-action{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.3rem;border-radius:4px;transition:all .3s ease}.queue-action:hover{background:rgba(239,68,68,.1);color:var(--error-color)}.add-media{display:flex;gap:.5rem}.add-media input{flex:1;background:var(--bg-secondary);border:1px solid rgba(6,182,212,.2);color:var(--text-primary);padding:.8rem;border-radius:8px;font-size:.9rem}.add-btn{background:#06b6d4;color:#fff;border:none;padding:.8rem;border-radius:8px;cursor:pointer;transition:all .3s ease}.add-btn:hover{background:#0891b2}.activities-section{background:var(--bg-secondary);border:1px solid rgba(6,182,212,.2);border-radius:12px;padding:1.5rem}.activities-section h3{color:var(--text-primary);font-size:1.1rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.activity-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.activity-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;background:var(--bg-primary);border:1px solid rgba(6,182,212,.2);border-radius:8px;cursor:pointer;transition:all .3s ease}.activity-card:hover{background:rgba(6,182,212,.1);border-color:#06b6d4;transform:translateY(-2px)}.activity-card i{font-size:1.5rem;color:#06b6d4}.activity-card span{color:var(--text-primary);font-size:.8rem;font-weight:500;text-align:center}.participants-panel{background:var(--bg-secondary);border:1px solid rgba(6,182,212,.1);border-radius:12px;overflow:hidden;margin-bottom:1rem}.participants-grid{padding:1rem;display:flex;flex-direction:column;gap:.8rem}.participant-card{display:flex;align-items:center;gap:.8rem;padding:.8rem;background:var(--bg-primary);border-radius:8px;border:1px solid rgba(6,182,212,.1)}.participant-card .participant-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:var(--bg-secondary)}.participant-info{flex:1;display:flex;flex-direction:column}.participant-info .name{color:var(--text-primary);font-weight:500;font-size:.9rem}.participant-info .status{color:var(--text-secondary);font-size:.7rem}.participant-mood{font-size:1.2rem}.mood-board{background:var(--bg-secondary);border:1px solid rgba(6,182,212,.1);border-radius:12px;overflow:hidden;margin-bottom:1rem}.mood-reactions{padding:1rem;display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}.mood-btn{background:var(--bg-primary);border:1px solid rgba(6,182,212,.2);border-radius:8px;padding:.8rem;font-size:1.2rem;cursor:pointer;transition:all .3s ease}.mood-btn:hover{background:rgba(6,182,212,.1);border-color:#06b6d4;transform:scale(1.1)}.chill-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin:2rem 0}.chill-features .feature-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--bg-secondary);border-radius:8px;border:1px solid rgba(6,182,212,.1)}.chill-features .feature-item i{color:#06b6d4;font-size:1.2rem}.chill-features .feature-item span{color:var(--text-secondary);font-size:.9rem}@media (max-width: 1200px){.chill-interface{grid-template-columns:1fr;height:auto}.activity-grid{grid-template-columns:repeat(2,1fr)}.mood-reactions{grid-template-columns:repeat(4,1fr)}}@media (max-width: 768px){.media-display{flex-direction:column;text-align:center;gap:1rem}.media-controls{justify-content:center;flex-wrap:wrap}.volume-control{margin-left:0}.activity-grid{grid-template-columns:1fr 1fr}.add-media{flex-direction:column}}@media (max-width: 768px){.scroll-svg{display:none}.hero-stats{gap:2rem;flex-direction:column;align-items:center}.hero-actions{flex-direction:column;align-items:center}.comparison-container{grid-template-columns:1fr;gap:2rem}.vs-divider{order:2}.comparison-item.after{order:3}.features-showcase{grid-template-columns:1fr;gap:3rem}.steps-container{flex-direction:column;gap:3rem}.step-connector{width:2px;height:50px;margin:1rem 0}.zones-grid{grid-template-columns:1fr}.nav-menu{gap:.5rem}.nav-link{display:none}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.testimonials-grid,.features-grid,.build-grid{grid-template-columns:1fr}}@media (max-width: 480px){.container{padding:0 1rem}.nav-container{padding:1rem}.section-title{font-size:2.2rem}.hero-title{font-size:2.5rem}.hero-actions .btn-hero{width:100%;max-width:300px;justify-content:center}.zone-card{flex-direction:column;text-align:center}.zones-grid,.testimonials-grid{grid-template-columns:1fr}.cta-actions{flex-direction:column;align-items:center}.cta-actions .btn-large{width:100%;max-width:300px}}.section-title{color:var(--text-primary)!important}.section-subtitle{color:var(--text-secondary)!important}::-webkit-scrollbar{display:none}body{box-sizing:border-box;overflow-y:auto}