:root{--color-primary:#5761f2;--color-primary-light:#7984ff;--color-success:#27ae60;--color-danger:#eb5757;--color-danger-light:#f26767;--color-dark:#1e1e2e;--color-dark-lighter:#2a2a3a;--color-dark-tertiary:#353545;--color-light:#f5f5f7;--color-light-darker:#e5e5ea;--color-gray:#8b8b9b;--color-gray-light:#a0a0a0;--color-gray-text:#888;--text-dark:#333340;--text-light:#f5f5f5;--bg-primary:var(--color-dark);--bg-secondary:var(--color-dark-lighter);--bg-tertiary:var(--color-dark-tertiary);--text:var(--text-light);--text-primary:var(--text-light);--text-secondary:var(--color-gray);--accent:var(--color-primary);--accent-hover:var(--color-primary-light);--danger:var(--color-danger);--danger-hover:var(--color-danger-light);--success:var(--color-success);--border:#ffffff1a;--border-color:#ffffff1a;--hover-bg:#ffffff0d;--active-bg:#5761f233;--input-bg:#ffffff0d;--input-border:#ffffff1a;--input-focus-bg:#ffffff12;--shadow:#0003;--modal-overlay:#0009;--radius:.5rem;--radius-s:.25rem;--radius-circle:50%;--space-xxs:2px;--space-xs:.25rem;--space-s:.5rem;--space-m:.75rem;--space-l:1rem;--space-xl:1.5rem;--space-xxl:3rem;--header-height:3.5rem;--input-height:3rem;--avatar-size-s:2rem;--avatar-size-m:2.25rem;--icon-size-s:1rem;--icon-size-m:1.25rem;--icon-size-l:1.5rem;--font-size-xs:.75rem;--font-size-s:.875rem;--transition:.2s ease;--border-width:1px;--white-10:#ffffff1a;--white-05:#ffffff0d;--black-60:#0009;--black-20:#0003}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;overflow:hidden}.screen{min-height:100vh;padding:var(--space-l);flex-direction:column;justify-content:center;align-items:center;display:flex}.hidden{display:none!important}.container{text-align:center;width:100%;max-width:480px}h1{margin-bottom:var(--space-s);background:linear-gradient(135deg, var(--accent), var(--color-primary-light));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:3rem;font-weight:700}.subtitle{color:var(--text-secondary);margin-bottom:var(--space-xl);font-size:1.1rem}.join-form{background:var(--bg-secondary);padding:var(--space-xl);border-radius:var(--radius);border:var(--border-width) solid var(--border);box-shadow:0 .5rem 1rem var(--shadow)}.form-group{margin-bottom:var(--space-l);text-align:left}.form-group label{margin-bottom:var(--space-s);color:var(--text-secondary);font-weight:500;font-size:var(--font-size-s);display:block}.form-group input[type=text],.form-group input[type=password]{width:100%;height:var(--input-height);padding:0 var(--space-l);background:var(--input-bg);border:var(--border-width) solid var(--input-border);border-radius:var(--radius);color:var(--text);transition:var(--transition);font-size:1rem}.form-group input[type=text]:focus,.form-group input[type=password]:focus{border-color:var(--accent);background:var(--input-focus-bg);outline:none}.form-group.options{gap:var(--space-xl);justify-content:center;display:flex}.checkbox{align-items:center;gap:var(--space-s);cursor:pointer;color:var(--text-secondary);display:flex}.checkbox input{cursor:pointer;width:18px;height:18px}.btn{width:100%;height:var(--input-height);background-color:var(--accent);color:var(--text-light);border-radius:var(--radius);cursor:pointer;transition:var(--transition);border:none;font-size:1rem;font-weight:600}.btn:hover{background-color:var(--accent-hover);transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--accent);color:var(--text-light)}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:var(--bg-tertiary);color:var(--text);border:var(--border-width) solid var(--border)}.btn-secondary:hover{background:var(--border-color)}.btn-icon{color:var(--text-secondary);cursor:pointer;padding:var(--space-xs);font-size:var(--icon-size-l);transition:color var(--transition);background:0 0;border:none;line-height:1}.btn-icon:hover{color:var(--text)}.spinner{border:3px solid var(--bg-tertiary);border-top-color:var(--accent);width:50px;height:50px;margin-bottom:var(--space-l);border-radius:50%;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#meeting{flex-direction:column;justify-content:flex-start;align-items:stretch;height:100dvh;padding:0;display:flex;overflow:hidden}.meeting-header{padding:var(--space-m) var(--space-l);padding-top:max(var(--space-m), env(safe-area-inset-top));padding-left:max(var(--space-l), env(safe-area-inset-left));padding-right:max(var(--space-l), env(safe-area-inset-right));background:var(--bg-secondary);border-bottom:var(--border-width) solid var(--border);z-index:100;flex-grow:0;flex-shrink:0;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.meeting-header h2{font-size:1.1rem;font-weight:600}.header-left{align-items:center;gap:var(--space-m);display:flex}.participant-count{color:var(--text-secondary);font-size:.9rem}.status-indicators{gap:var(--space-s);align-items:center;display:flex}.status-badge{padding:var(--space-xs) var(--space-s);border-radius:var(--radius-s);font-size:var(--font-size-xs);font-weight:600}.status-badge.recording{color:var(--danger);background:#eb575733}.status-badge.locked{color:#ffc107;background:#ffc10733}.connection-quality{font-size:var(--font-size-xs)}.connection-quality.good{color:var(--success)}.connection-quality.fair{color:#ffc107}.connection-quality.poor{color:var(--danger)}.connection-quality.unknown{color:var(--text-secondary)}.video-item{background:var(--bg-secondary);border-radius:var(--radius);aspect-ratio:16/9;position:relative;overflow:hidden}.video-item video{object-fit:cover;width:100%;height:100%}.video-item.local video{transform:scaleX(-1)}.video-label{padding:var(--space-m) var(--space-l);background:linear-gradient(#0000,#000c);justify-content:space-between;align-items:center;display:flex;position:absolute;bottom:0;left:0;right:0}.video-label span{font-weight:500}.video-label .status-icons{gap:var(--space-xs);align-items:center;display:flex}.muted-indicator,.hand-indicator,.video-off-indicator,.muted-icon,.hand-icon,.video-off-icon{opacity:0;transition:opacity var(--transition)}.muted-indicator.visible,.hand-indicator.visible,.video-off-indicator.visible,.muted-icon.visible,.hand-icon.visible,.video-off-icon.visible{opacity:1}.moderator-icon{color:var(--color-primary-light)}.video-container{flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden}.video-nav-btn{color:#fff;cursor:pointer;z-index:5;opacity:0;width:48px;height:48px;transition:opacity var(--transition);background:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.video-container:hover .video-nav-btn,.video-nav-btn.visible{opacity:1}.video-nav-btn:hover{background:#000000b3}.video-nav-btn.hidden{display:none!important}.video-nav-prev{left:var(--space-m)}.video-nav-next{right:var(--space-m)}.video-pagination{bottom:var(--space-m);padding:var(--space-xs) var(--space-m);border-radius:var(--radius);z-index:5;background:#0009;font-size:.875rem;position:absolute;left:50%;transform:translate(-50%)}.video-pagination.hidden{display:none!important}.video-grid{gap:var(--space-l);padding:var(--space-l);flex:1;place-content:center;width:100%;height:100%;min-height:0;max-height:100%;display:grid}.video-grid.single{grid-template-columns:1fr;max-width:min(1200px,100%)}.video-grid.pair{grid-template-columns:repeat(2,1fr);max-width:min(1400px,100%)}.video-grid.triple{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr);max-width:min(1400px,100%)}.video-grid.triple .video-item:first-child{grid-column:1/-1}.video-grid.quad{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr);max-width:min(1400px,100%)}.video-grid.page-9{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);max-width:min(1800px,100%)}.video-grid.many{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.chat-panel{background:var(--bg-secondary);border-left:var(--border-width) solid var(--border);flex-direction:column;width:320px;display:flex}.chat-panel.hidden,.participants-panel.hidden{display:none!important}.chat-panel.visible,.participants-panel.visible{display:flex!important}.chat-header{padding:var(--space-l);border-bottom:var(--border-width) solid var(--border);justify-content:space-between;align-items:center;display:flex}.chat-header h3{font-size:1rem;font-weight:600}.chat-messages{padding:var(--space-l);gap:var(--space-m);flex-direction:column;flex:1;display:flex;overflow-y:auto}.chat-message{max-width:85%;padding:var(--space-m);border-radius:var(--radius);background:var(--bg-tertiary)}.chat-message.me{background:var(--accent);align-self:flex-end}.chat-message-header{justify-content:space-between;gap:var(--space-s);margin-bottom:var(--space-xs);font-size:var(--font-size-xs);display:flex}.chat-message.me .chat-message-header{color:#fffc}.chat-message:not(.me) .chat-message-header{color:var(--text-secondary)}.chat-message-text{word-break:break-word}.chat-input-container{gap:var(--space-s);padding:var(--space-l);border-top:var(--border-width) solid var(--border);display:flex}.chat-input-container input{padding:var(--space-s) var(--space-m);background:var(--input-bg);border:var(--border-width) solid var(--input-border);border-radius:var(--radius);color:var(--text);flex:1;font-size:.875rem}.chat-input-container input:focus{border-color:var(--accent);outline:none}.participants-panel{background:var(--bg-secondary);border-left:var(--border-width) solid var(--border);flex-direction:column;width:280px;display:flex}.participants-header{padding:var(--space-l);border-bottom:var(--border-width) solid var(--border);justify-content:space-between;align-items:center;display:flex}.participants-header h3{font-size:1rem;font-weight:600}.participants-list{padding:var(--space-s);flex:1;overflow-y:auto}.participant-item{padding:var(--space-m);border-radius:var(--radius);margin-bottom:var(--space-s);justify-content:space-between;align-items:center;display:flex}.participant-item:hover{background:var(--hover-bg)}.participant-info{align-items:center;gap:var(--space-s);flex-wrap:wrap;display:flex}.participant-info .name{font-weight:500}.badge{padding:var(--space-xxs) .375rem;border-radius:var(--radius-s);font-size:.625rem;font-weight:600}.badge.moderator{color:var(--color-primary-light);background:#7984ff33}.badge.hand{color:#ffc107;background:#ffc10733}.badge.muted{color:var(--danger);background:#eb575733}.participant-actions{gap:var(--space-xs);display:flex}.participant-actions .btn-icon{padding:var(--space-xs);font-size:1rem}.waiting-room-section{border-top:var(--border-width) solid var(--border);padding:var(--space-l)}.waiting-room-section.hidden{display:none}.waiting-room-section h4{color:var(--text-secondary);margin-bottom:var(--space-m);font-size:.875rem}.waiting-room-list{gap:var(--space-s);flex-direction:column;display:flex}.waiting-item{padding:var(--space-s);background:var(--bg-tertiary);border-radius:var(--radius);justify-content:space-between;align-items:center;display:flex}.waiting-item .name{font-weight:500}.waiting-item .actions{gap:var(--space-s);display:flex}.btn-admit,.btn-reject{padding:var(--space-xs) var(--space-s);border-radius:var(--radius-s);cursor:pointer;transition:opacity var(--transition);border:none;font-size:.75rem}.btn-admit{background:var(--success);color:var(--text-light)}.btn-reject{background:var(--danger);color:var(--text-light)}.btn-admit:hover,.btn-reject:hover{opacity:.8}.file-transfer-panel{bottom:100px;right:var(--space-l);background:var(--bg-secondary);border:var(--border-width) solid var(--border);border-radius:var(--radius);width:300px;padding:var(--space-l);box-shadow:0 .5rem 1rem var(--shadow);max-height:300px;position:absolute;overflow-y:auto}.file-transfer-panel.hidden{display:none!important}.file-transfer-panel h4{margin-bottom:var(--space-m);font-size:.875rem}.file-transfer-item{padding:var(--space-m);background:var(--bg-tertiary);border-radius:var(--radius);margin-bottom:var(--space-s)}.file-info{margin-bottom:var(--space-s)}.file-name{font-size:.875rem;font-weight:500;display:block}.file-size,.file-sender{color:var(--text-secondary);font-size:.75rem}.progress-bar{background:var(--bg-secondary);height:4px;margin:var(--space-s) 0;border-radius:2px;overflow:hidden}.progress-fill{background:var(--accent);height:100%;transition:width .3s}.file-actions{gap:var(--space-s);display:flex}.file-actions button{padding:var(--space-xs) var(--space-s);border-radius:var(--radius-s);cursor:pointer;background:var(--accent);color:var(--text-light);border:none;font-size:.75rem}.controls{justify-content:center;align-items:center;gap:var(--space-l);padding:var(--space-l);background:var(--bg-secondary);border-top:var(--border-width) solid var(--border);flex-wrap:wrap;display:flex}.control-group{gap:var(--space-m);display:flex}.control-group.secondary,.control-group.danger{padding-left:var(--space-l);border-left:var(--border-width) solid var(--border)}.control-btn{background:var(--bg-tertiary);width:56px;height:56px;color:var(--text);cursor:pointer;justify-content:center;align-items:center;gap:var(--space-xs);transition:var(--transition);border:none;border-radius:50%;flex-direction:column;display:flex}.control-btn:hover{background:var(--border-color);transform:scale(1.05)}.control-btn:active{transform:scale(.95)}.control-btn.off{background:var(--danger)}.control-btn.active{color:var(--text-dark);background:#ffc107}.control-btn.recording{background:var(--danger);animation:2s infinite pulse}.control-btn.locked{color:var(--text-dark);background:#ffc107}.control-btn .icon{fill:currentColor;width:24px;height:24px}.control-btn .label{text-transform:uppercase;font-size:.625rem}.icon{fill:currentColor;vertical-align:middle;width:20px;height:20px}.status-icons .icon{width:16px;height:16px}.status-badge .icon{width:12px;height:12px}.btn-icon .icon,.file-btn .icon{width:20px;height:20px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}#error .container{padding:var(--space-xl);background:var(--bg-secondary);border-radius:var(--radius);border:var(--border-width) solid var(--border)}#error h1{color:var(--danger);-webkit-text-fill-color:var(--danger);margin-bottom:var(--space-l);background:0 0}#error-message{color:var(--text-secondary);margin-bottom:var(--space-xl)}.info{margin-top:var(--space-xl);color:var(--text-secondary);font-size:.875rem}#waiting .container{align-items:center;gap:var(--space-l);flex-direction:column;display:flex}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#444}.progress-width-0{width:0%}.progress-width-25{width:25%}.progress-width-50{width:50%}.progress-width-75{width:75%}.progress-width-100{width:100%}@media (width<=768px){h1{font-size:2rem}#meeting{height:100dvh;position:fixed;inset:0}.meeting-header{width:100%;position:fixed;top:0;left:0;right:0}.video-container{margin-top:calc(var(--header-height) + env(safe-area-inset-top));height:calc(100vh - var(--header-height) - 80px - env(safe-area-inset-top));height:calc(100dvh - var(--header-height) - 80px - env(safe-area-inset-top));margin-bottom:80px}.video-grid{gap:var(--space-s);padding:var(--space-s);max-height:calc(100dvh - var(--header-height) - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.video-grid.pair,.video-grid.triple,.video-grid.quad{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr)}.video-grid.triple .video-item:first-child{grid-column:auto}.video-grid.page-9{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr)}.video-item{aspect-ratio:4/3;min-height:120px}.video-nav-btn{display:none!important}.meeting-header h2{font-size:.9rem}.participant-count{font-size:.8rem}.status-indicators{display:none}.controls{padding:var(--space-s) var(--space-m);padding-bottom:max(var(--space-s), env(safe-area-inset-bottom));gap:var(--space-s);-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;z-index:100;flex-wrap:nowrap;position:fixed;bottom:0;left:0;right:0;overflow-x:auto}.controls::-webkit-scrollbar{display:none}.control-group.secondary{display:none}.control-btn{width:52px;min-width:52px;height:52px}.control-btn .label{display:none}.chat-panel,.participants-panel{z-index:1000;width:100%;position:fixed;inset:0}.chat-header,.participants-header{padding-top:max(var(--space-l), env(safe-area-inset-top))}.chat-header h3,.participants-header h3{font-size:1.1rem}.file-transfer-panel{width:calc(100% - var(--space-xl));right:var(--space-s);left:var(--space-s);bottom:calc(80px + env(safe-area-inset-bottom))}}@media (width<=480px){.control-group.main{gap:var(--space-s)}.control-btn{width:56px;min-width:56px;height:56px}.control-btn .icon{width:24px;height:24px}}.mobile-only{display:none!important}@media (width<=768px){.mobile-only{display:flex!important}.desktop-only{display:none!important}}.mobile-menu{background:var(--bg-secondary);border-top:var(--border-width) solid var(--border);border-radius:var(--radius) var(--radius) 0 0;z-index:1000;flex-direction:column;max-height:70vh;display:flex;position:fixed;bottom:0;left:0;right:0}.mobile-menu.hidden{display:none!important}.mobile-menu-header{padding:var(--space-m) var(--space-l);border-bottom:var(--border-width) solid var(--border);justify-content:space-between;align-items:center;display:flex}.mobile-menu-header h3{font-size:1rem;font-weight:600}.mobile-menu-content{padding:var(--space-m);gap:var(--space-xs);flex-direction:column;display:flex;overflow-y:auto}.mobile-menu-item{align-items:center;gap:var(--space-m);padding:var(--space-m) var(--space-l);background:var(--bg-tertiary);border-radius:var(--radius);color:var(--text);cursor:pointer;transition:var(--transition);border:none;font-size:1rem;display:flex}.mobile-menu-item:hover{background:var(--border-color)}.mobile-menu-item .icon{fill:currentColor;width:24px;height:24px}.mobile-backdrop{background:var(--modal-overlay);z-index:999;position:fixed;inset:0}.mobile-backdrop.hidden{display:none!important}@media (pointer:coarse){.control-btn{min-width:64px;min-height:64px}.btn-icon{padding:var(--space-s)}}@keyframes messageAppear{0%{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:translateY(0)}}