@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap";:root{font-family:Plus Jakarta Sans,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#f8fafc;background-color:#0b0f19;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(135deg,#090d16,#111827);overflow:hidden}.app-container{display:flex;flex-direction:column;width:100vw;height:100vh}.lobby-container{display:flex;align-items:center;justify-content:center;min-height:100vh;width:100%;padding:24px;background:radial-gradient(circle at 50% 50%,rgba(37,99,235,.1) 0%,transparent 80%)}.lobby-card{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;width:100%;max-width:1000px;background:#1e293b73;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:40px;box-shadow:0 20px 40px #0006}@media (max-width: 768px){.lobby-card{grid-template-columns:1fr;padding:24px}}.lobby-preview-column{display:flex;flex-direction:column;gap:20px}.lobby-preview-wrapper{position:relative;width:100%;aspect-ratio:16/9;background:#0f172a;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 4px 12px #00000080}.lobby-preview-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.lobby-preview-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;color:#64748b;gap:12px}.lobby-preview-placeholder svg{animation:pulse-placeholder 2s infinite ease-in-out}@keyframes pulse-placeholder{0%,to{opacity:.6;transform:scale(1)}50%{opacity:.9;transform:scale(1.05)}}.lobby-preview-controls{position:absolute;bottom:16px;left:50%;transform:translate(-50%);display:flex;gap:12px;background:#0f172ab3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 16px;border-radius:30px;border:1px solid rgba(255,255,255,.1);z-index:10}.lobby-form-column{display:flex;flex-direction:column;justify-content:center;gap:24px}.lobby-header h2{font-size:28px;font-weight:700;letter-spacing:-.5px;background:linear-gradient(90deg,#f8fafc,#94a3b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}.lobby-header p{color:#94a3b8;font-size:14px}.input-group{display:flex;flex-direction:column;gap:8px}.input-label{font-size:13px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px}.input-field{width:100%;padding:14px 18px;background:#0f172a99;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#f8fafc;font-size:15px;font-family:inherit;transition:all .2s ease}.input-field:focus{outline:none;border-color:#2563eb;background:#0f172acc;box-shadow:0 0 0 3px #2563eb33}.device-selectors{display:flex;flex-direction:column;gap:12px}.select-field{width:100%;padding:10px 14px;background:#0f172a99;border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#f8fafc;font-size:13px;font-family:inherit;cursor:pointer}.select-field:focus{outline:none;border-color:#2563eb}.btn-primary{width:100%;padding:16px;background:#2563eb;color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #2563eb4d}.btn-primary:hover{background:#3b82f6;transform:translateY(-1px)}.btn-primary:active{transform:translateY(1px)}.meeting-container{display:flex;flex-direction:column;height:100vh;width:100vw;background:#0f172a}.meeting-body{display:flex;flex:1;width:100%;height:calc(100vh - 84px);overflow:hidden;position:relative}.grid-workspace{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;height:100%;position:relative}.video-grid{display:grid;gap:16px;width:100%;height:100%;max-width:1200px;max-height:80vh;margin:auto;align-items:center;justify-content:center}.grid-1{grid-template-columns:1fr}.grid-2{grid-template-columns:repeat(2,1fr)}@media (max-width: 640px){.grid-2{grid-template-columns:1fr;grid-template-rows:repeat(2,1fr)}}.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.grid-5,.grid-6{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.participant-card{position:relative;width:100%;height:100%;aspect-ratio:16/9;background:#1e293b;border-radius:16px;overflow:hidden;border:2px solid transparent;box-shadow:0 10px 20px #00000040;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.participant-card.active-speaker{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb4d,0 12px 24px #0006}.participant-video{width:100%;height:100%;object-fit:cover;border-radius:14px}.participant-video.mirrored{transform:scaleX(-1)}.participant-avatar-fallback{display:flex;align-items:center;justify-content:center;width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;font-size:32px;font-weight:700;box-shadow:0 8px 16px #0000004d;text-transform:uppercase}.participant-info-badge{position:absolute;bottom:12px;left:12px;background:#0f172abf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);padding:6px 12px;border-radius:20px;display:flex;align-items:center;gap:8px;z-index:5}.participant-name{font-size:13px;font-weight:600;color:#f8fafc}.mic-badge-status{display:flex;align-items:center;justify-content:center;color:#94a3b8}.mic-badge-status.muted{color:#ef4444}.screenshare-badge{position:absolute;top:12px;right:12px;background:#2563ebe6;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:6px;color:#fff}.control-bar-wrapper{height:84px;width:100%;background:#0b0f19;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;padding:0 32px;z-index:20}.control-bar-left{display:flex;flex-direction:column;justify-content:center}.room-title-info{font-size:15px;font-weight:700;color:#f1f5f9}.room-meta-info{font-size:12px;color:#64748b;margin-top:2px}.control-bar-center{display:flex;align-items:center;gap:16px}.control-bar-right{display:flex;align-items:center;gap:12px}.btn-control{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.08);background:#1e293b99;color:#e2e8f0;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.btn-control:hover{background:#1e293be6;color:#fff;border-color:#fff3;transform:translateY(-1px)}.btn-control:active{transform:translateY(1px)}.btn-control.active-blue{background:#2563eb;border-color:#2563eb;color:#fff}.btn-control.active-blue:hover{background:#3b82f6}.btn-control.muted-red{background:#ef4444;border-color:#ef4444;color:#fff}.btn-control.muted-red:hover{background:#f87171}.btn-control.leave-red{background:#dc2626;border-color:#dc2626;color:#fff;width:56px;height:48px;border-radius:24px}.btn-control.leave-red:hover{background:#ef4444}.sidebar-panel{width:360px;height:100%;background:#0f172ad9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.4,0,.2,1);position:absolute;top:0;right:0;bottom:0;z-index:15;box-shadow:-10px 0 30px #0000004d}.sidebar-header{padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between}.sidebar-header h3{font-size:17px;font-weight:700;color:#f1f5f9}.btn-close{background:transparent;border:none;color:#94a3b8;cursor:pointer;display:flex;align-items:center;justify-content:center}.btn-close:hover{color:#fff}.chat-messages{flex:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#fff3}.chat-bubble{max-width:85%;padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.4}.chat-bubble.local{align-self:flex-end;background:#2563eb;color:#fff;border-bottom-right-radius:4px}.chat-bubble.remote{align-self:flex-start;background:#1e293b;color:#e2e8f0;border-bottom-left-radius:4px;border:1px solid rgba(255,255,255,.06)}.chat-bubble-meta{font-size:10px;color:#94a3b8;margin-bottom:4px;font-weight:600}.chat-bubble.local .chat-bubble-meta{color:#93c5fd;text-align:right}.chat-input-wrapper{padding:16px 20px;border-top:1px solid rgba(255,255,255,.06);display:flex;gap:10px;background:#0f172a73}.chat-input{flex:1;padding:10px 14px;background:#0f172acc;border:1px solid rgba(255,255,255,.06);border-radius:20px;color:#fff;font-size:13px;font-family:inherit}.chat-input:focus{outline:none;border-color:#2563eb}.btn-send{background:#2563eb;border:none;color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}.btn-send:hover{background:#3b82f6}.participants-list{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.participant-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background:#1e293b66;border-radius:12px;border:1px solid rgba(255,255,255,.04)}.participant-item-left{display:flex;align-items:center;gap:12px}.participant-item-avatar{width:32px;height:32px;border-radius:50%;background:#2563eb;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;text-transform:uppercase}.participant-item-name{font-size:13px;font-weight:600;color:#f1f5f9}.participant-item-right{display:flex;align-items:center;gap:8px;color:#64748b}.participant-item-right svg.muted{color:#ef4444}.modal-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100}.modal-card{width:100%;max-width:480px;background:#1e293b;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:24px;box-shadow:0 20px 25px -5px #00000080;display:flex;flex-direction:column;gap:20px}.modal-header{display:flex;align-items:center;justify-content:space-between}.modal-header h3{font-size:18px;font-weight:700;color:#f1f5f9}.modal-body{display:flex;flex-direction:column;gap:16px}.modal-footer{display:flex;justify-content:flex-end}.btn-modal-close{padding:10px 20px;background:#2563eb;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}.btn-modal-close:hover{background:#3b82f6}.pinned-layout-container{display:flex;width:100%;height:100%;gap:16px;padding:8px;overflow:hidden}.pinned-main-view{flex:3;display:flex;align-items:center;justify-content:center;height:100%;background:#0f172a66;border-radius:18px;padding:4px}.pinned-main-view .participant-card{width:100%;height:100%;max-height:100%;aspect-ratio:auto;border-radius:16px}.pinned-sidebar-view{flex:1;max-width:300px;min-width:200px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;padding-right:4px;height:100%}.pinned-sidebar-view .participant-card{flex-shrink:0;width:100%;height:140px;aspect-ratio:auto}@media (max-width: 900px){.pinned-layout-container{flex-direction:column}.pinned-main-view{flex:2}.pinned-sidebar-view{flex:1;max-width:100%;min-width:100%;flex-direction:row;overflow-x:auto;overflow-y:hidden;height:110px;padding-bottom:4px}.pinned-sidebar-view .participant-card{width:160px;height:100%}}@media (max-width: 768px){.control-bar-wrapper{padding:0 12px;height:72px}.control-bar-left{display:none}.control-bar-center{gap:10px}.btn-control{width:42px;height:42px}.btn-control.leave-red{width:50px;height:42px}.lobby-card{grid-template-columns:1fr;padding:20px;gap:20px}.lobby-container{padding:12px}.lobby-header h2{font-size:22px}.btn-primary{padding:12px;font-size:15px}}@media (max-width: 480px){.sidebar-panel{width:100%;height:calc(100vh - 72px);border-left:none}.meeting-body{height:calc(100vh - 72px)}}