@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--color-bg-primary:#1c1c1e;--color-bg-secondary:#2c2c2e;--color-bg-tertiary:#3a3a3c;--color-text-primary:#f5f5f7;--color-text-secondary:#ebebf599;--color-text-tertiary:#8e8e93;--color-text-muted:#636366;--color-text-placeholder:#48484a;--color-accent:#0a84ff;--color-accent-hover:#409cff;--color-accent-soft:#0a84ff1f;--color-indigo-200:#a1a1a6;--color-indigo-400:#0a84ff;--color-indigo-500:#0a84ff;--color-indigo-600:#0077ed;--color-purple-500:#bf5af2;--color-success:#30d158;--color-success-light:#63e388;--color-success-soft:#30d1581f;--color-emerald-400:#30d158;--color-warning:#ffd60a;--color-warning-soft:#ffd60a1f;--color-error:#ff453a;--color-error-text:#ff6961;--color-error-soft:#ff453a1a;--color-border:#ffffff14;--color-border-subtle:#ffffff0a;--ease-apple:cubic-bezier(.2, .8, .2, 1);--duration-fast:.15s;--duration-normal:.2s;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--shadow-md:0 4px 12px #0000004d;--shadow-lg:0 12px 40px #0006;--shadow-xl:0 25px 50px #00000080;color:var(--color-text-primary);background:var(--color-bg-primary);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,BlinkMacSystemFont,system-ui,Segoe UI,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;overflow-x:hidden}.page{justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.card{-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-xl);width:100%;max-width:480px;box-shadow:var(--shadow-xl);background:#2c2c2eeb;border:.5px solid #ffffff1a;padding:2.5rem}.card-wide{max-width:600px}.title{color:var(--color-text-primary);text-align:center;letter-spacing:-.02em;margin:0 0 .25rem;font-size:1.5rem;font-weight:700}.subtitle{color:var(--color-text-tertiary);text-align:center;margin:0 0 2rem;font-size:.875rem}.form-group{flex-direction:column;gap:.5rem;margin-bottom:1.25rem;display:flex}.form-label{color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.06em;font-size:.75rem;font-weight:500}.form-input{border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary);transition:border-color var(--duration-normal), background var(--duration-normal);background:#ffffff0f;outline:none;padding:.625rem .875rem;font-family:inherit;font-size:.9rem}.form-input:focus{border-color:var(--color-accent);background:#ffffff14;box-shadow:0 0 0 3px #0a84ff26}.form-input::placeholder{color:var(--color-text-placeholder)}select.form-input{cursor:pointer}.room-code-input{letter-spacing:.2em;text-align:center;text-transform:uppercase;font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:700}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-normal) var(--ease-apple);border:none;outline:none;width:100%;padding:.625rem 1.25rem;font-family:inherit;font-size:.9rem;font-weight:600}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--color-accent);color:#fff;box-shadow:0 2px 8px #0a84ff4d}.btn-primary:hover:not(:disabled){background:var(--color-accent-hover);box-shadow:0 4px 14px #0a84ff66}.btn-secondary{color:var(--color-text-secondary);background:#ffffff14;border:none}.btn-secondary:hover{background:#ffffff1f}.btn-small{width:auto;padding:.5rem 1rem;font-size:.85rem}.status-area{flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem 0;display:flex}.status-area p{color:var(--color-text-secondary);font-size:.875rem}.error-area{flex-direction:column;align-items:center;gap:.75rem;padding:1rem 0;display:flex}.error-area p{color:var(--color-error-text);text-align:center;font-size:.875rem}.inline-error{color:var(--color-error-text);margin-top:.5rem;font-size:.8rem}.spinner{border:2.5px solid #ffffff14;border-top-color:var(--color-accent);border-radius:50%;width:24px;height:24px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.setup-steps{flex-direction:column;gap:1.5rem;margin-bottom:2rem;display:flex}.setup-step{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:#ffffff08;padding:1.25rem}.step-header{align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.step-number{background:var(--color-accent);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;font-size:.75rem;font-weight:700;display:flex}.step-title{font-size:.9rem;font-weight:600}#display-preview,#session-display-preview{border-radius:var(--radius-sm);background:#000;width:100%;margin-top:.75rem}.audio-warning{background:var(--color-warning-soft);border-radius:var(--radius-sm);color:var(--color-warning);border:1px solid #ffd60a26;margin-bottom:1rem;padding:.75rem 1rem;font-size:.8rem}.audio-level-bar{background:#ffffff0f;border-radius:2px;height:4px;margin-top:.75rem;overflow:hidden}.audio-level-fill{background:var(--color-success);border-radius:2px;width:0%;height:100%;transition:width 50ms}.audio-hint{color:var(--color-text-muted);margin-top:.25rem;font-size:.7rem}.session-page{flex-direction:column;gap:1.5rem}.session-header{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.peer-status-bar,.self-status-bar{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#ffffff0a;align-items:center;gap:6px;padding:3px 10px;font-size:13px;display:flex}.peer-status-label{color:var(--color-text-muted);letter-spacing:.3px;font-size:10px;font-weight:600}.status-icon{transition:all var(--duration-normal) var(--ease-apple);font-size:14px;position:relative}.status-icon.status-on{opacity:1}.status-icon.status-off{opacity:.35}.share-count{background:var(--color-accent);color:#fff;text-align:center;border-radius:8px;min-width:14px;padding:0 4px;font-size:9px;line-height:14px;position:absolute;top:-6px;right:-8px}.connection-indicator{border:1px solid var(--color-border);color:var(--color-text-secondary);background:#ffffff0a;border-radius:20px;align-items:center;gap:.5rem;padding:.4rem 1rem;font-size:.8rem;display:flex}.dot{border-radius:50%;width:7px;height:7px}.dot-connected{background:var(--color-success);box-shadow:0 0 5px #30d15866}.dot-connecting{background:var(--color-warning);animation:1.5s ease-in-out infinite pulse-dot;box-shadow:0 0 5px #ffd60a4d}.dot-disconnected{background:var(--color-error);box-shadow:0 0 5px #ff453a66}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.35}}.session-content{width:100%;max-width:800px}.display-preview-large video{border-radius:var(--radius-md);background:#000;width:100%}.session-controls{gap:.75rem;margin-top:1rem;display:flex}.session-controls .btn{flex:1;width:auto}.session-hint{text-align:center;color:var(--color-text-muted);margin-top:1rem;font-size:.8rem}.ended-page .card{text-align:center}.ended-hint{color:var(--color-text-muted);margin-top:1rem;font-size:.8rem}.signal-toast{-webkit-backdrop-filter:blur(16px);border-radius:var(--radius-md);color:#fff;box-shadow:var(--shadow-lg);z-index:9999;animation:toast-in .3s var(--ease-apple);background:#2c2c2eeb;border:.5px solid #ffffff1a;align-items:center;gap:.75rem;padding:.625rem 1.25rem;font-size:.9rem;font-weight:600;display:flex;position:fixed;top:1.5rem;left:50%;transform:translate(-50%)}.signal-emoji{font-size:1.3rem}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(-10px)scale(.96)}to{opacity:1;transform:translate(-50%)translateY(0)scale(1)}}.session-controls-panel{border-radius:var(--radius-md);border:1px solid var(--color-border);background:#ffffff08;flex-direction:column;gap:.75rem;padding:1rem;display:flex}.controls-row{align-items:center;gap:.5rem;display:flex}.ctrl-btn{border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary);cursor:pointer;transition:all var(--duration-normal) var(--ease-apple);background:#ffffff0a;flex:1;padding:.5rem .875rem;font-size:.8rem;font-weight:500}.ctrl-btn:hover{background:#ffffff14}.ctrl-btn.active{background:var(--color-error-soft);color:var(--color-error-text);border-color:#ff453a4d}.ctrl-btn-accent{background:var(--color-accent-soft);color:var(--color-accent);border-color:#0a84ff33}.ctrl-btn-accent:hover{background:#0a84ff33}.volume-row{gap:.75rem}.volume-label{color:var(--color-text-secondary);white-space:nowrap;min-width:5rem;font-size:.75rem}.volume-slider{appearance:none;cursor:pointer;background:#ffffff1a;border-radius:2px;flex:1;height:4px}.volume-slider::-webkit-slider-thumb{appearance:none;background:var(--color-accent);cursor:pointer;width:14px;height:14px;transition:transform var(--duration-fast) var(--ease-apple);border-radius:50%;box-shadow:0 1px 3px #0000004d}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.volume-display{color:var(--color-text-secondary);text-align:right;min-width:2.5rem;font-size:.75rem}.no-display-placeholder{height:100%;min-height:200px;color:var(--color-text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.no-display-placeholder p{margin:.25rem 0;font-size:1.1rem}.placeholder-hint{color:var(--color-text-placeholder)!important;font-size:.8rem!important}.se-buttons-area{border-top:1px solid var(--color-border);padding-top:.75rem}.se-buttons-header{color:var(--color-text-muted);margin-bottom:.5rem;font-size:.75rem;font-weight:500}.se-buttons-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem;display:grid}.se-btn{border-radius:var(--radius-sm);background:var(--color-warning-soft);color:var(--color-warning);cursor:pointer;transition:all var(--duration-fast) var(--ease-apple);text-align:center;text-overflow:ellipsis;white-space:nowrap;border:1px solid #ffd60a26;padding:.5rem .75rem;font-size:.8rem;font-weight:500;overflow:hidden}.se-btn:hover{background:#ffd60a33}.se-btn-active{background:#ffd60a4d!important;transform:scale(.97)!important}.screen-share-list{flex-direction:column;gap:4px;display:flex}.screen-share-item{background:var(--color-success-soft);border-radius:var(--radius-sm);border:1px solid #30d1581f;justify-content:space-between;align-items:center;padding:4px 8px;font-size:12px;display:flex}.share-label{color:var(--color-success);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.btn-share-stop{background:var(--color-error-soft);color:var(--color-error-text);cursor:pointer;transition:all var(--duration-fast);border:1px solid #ff453a40;border-radius:4px;flex-shrink:0;padding:2px 8px;font-size:11px}.btn-share-stop:hover{background:#ff453a2e}.share-list-header{color:var(--color-text-muted);letter-spacing:.3px;padding:2px 4px;font-size:10px;font-weight:600}.visibility-badge{font-size:13px}.visibility-badge.visible{opacity:1}.visibility-badge.hidden{opacity:.45}.btn-visibility-toggle{cursor:pointer;transition:all var(--duration-fast);border-radius:4px;flex-shrink:0;padding:2px 8px;font-size:11px}.btn-visibility-toggle.showing{background:var(--color-success-soft);color:var(--color-success);border:1px solid #30d15840}.btn-visibility-toggle.hiding{border:1px solid var(--color-border);color:var(--color-text-muted);background:#ffffff0a}.btn-visibility-toggle:hover{opacity:.8}.received-shares{border-top:1px solid var(--color-border-subtle);margin-top:4px;padding-top:4px}.session-fullpage{flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}.session-header-bar{border-bottom:.5px solid var(--color-border);background:#1c1c1ed9;flex-shrink:0;justify-content:space-between;align-items:center;gap:16px;padding:8px 16px;display:flex}.header-left,.header-right{flex:none}.header-center{flex:1;justify-content:center;align-items:center;gap:16px;display:flex}.session-main{flex:1;display:flex;overflow:hidden}.session-video-area{flex-direction:column;flex:1;gap:8px;padding:12px;display:flex;overflow-y:auto}.session-sidebar{border-left:.5px solid var(--color-border);background:#1c1c1e99;flex-direction:column;width:320px;min-width:280px;display:flex}.sidebar-tabs{border-bottom:.5px solid var(--color-border-subtle);background:#ffffff05;flex-shrink:0;gap:2px;padding:8px 10px;display:flex}.tab-btn{border-radius:var(--radius-sm);color:var(--color-text-muted);cursor:pointer;transition:all var(--duration-normal) var(--ease-apple);background:0 0;border:none;flex:1;padding:6px 0;font-family:inherit;font-size:.8rem;font-weight:500}.tab-btn:hover{color:var(--color-text-tertiary)}.tab-btn.active{color:var(--color-text-primary);background:#ffffff1a;box-shadow:0 1px 3px #0003}.chat-panel{flex-direction:column;flex:1;display:flex;overflow:hidden}.chat-messages{flex-direction:column;flex:1;gap:4px;padding:8px 12px;display:flex;overflow-y:auto}.chat-msg{border-radius:var(--radius-sm);word-break:break-word;max-width:85%;padding:5px 10px;font-size:.8rem}.chat-msg.host{background:var(--color-accent-soft);border-bottom-left-radius:2px;align-self:flex-start}.chat-msg.guest{background:var(--color-success-soft);border-bottom-right-radius:2px;align-self:flex-end}.chat-time{color:var(--color-text-muted);margin-right:6px;font-size:.65rem}.chat-input-form{border-top:.5px solid var(--color-border-subtle);gap:6px;padding:8px;display:flex}.chat-input{border:1px solid var(--color-border);border-radius:var(--radius-sm);color:inherit;transition:border-color var(--duration-normal);background:#ffffff0a;outline:none;flex:1;padding:7px 10px;font-family:inherit;font-size:.8rem}.chat-input:focus{border-color:var(--color-accent)}.btn-chat-send{background:var(--color-accent);border-radius:var(--radius-sm);color:#fff;cursor:pointer;transition:background var(--duration-fast);border:none;padding:7px 14px;font-family:inherit;font-size:.8rem;font-weight:500}.btn-chat-send:hover{background:var(--color-accent-hover)}.notes-panel{flex-direction:column;flex:1;padding:8px;display:flex}.notes-textarea{border:1px solid var(--color-border);border-radius:var(--radius-sm);color:inherit;resize:none;transition:border-color var(--duration-normal);background:#ffffff0a;outline:none;flex:1;padding:10px;font-family:inherit;font-size:.8rem;line-height:1.6}.notes-textarea:focus{border-color:var(--color-accent)}.signal-buttons-section{margin-top:4px}.signal-buttons-header{color:var(--color-text-muted);padding:4px 0;font-size:.7rem;font-weight:600}.signal-buttons{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.btn-signal{border:1px solid var(--color-border);border-radius:var(--radius-sm);color:inherit;cursor:pointer;transition:all var(--duration-fast) var(--ease-apple);background:#ffffff08;flex-direction:column;align-items:center;gap:2px;padding:7px 5px;font-family:inherit;font-size:.7rem;display:flex}.btn-signal:hover{background:#ffffff14}.btn-signal.sent{background:var(--color-success-soft);border-color:#30d15833}.signal-btn-emoji{font-size:1.1rem}.signal-btn-label{color:var(--color-text-muted);font-size:.6rem}.marker-controls{gap:6px;margin-top:4px;display:flex}.marker-input{border:1px solid var(--color-border);border-radius:var(--radius-sm);color:inherit;transition:border-color var(--duration-normal);background:#ffffff0a;outline:none;flex:1;padding:6px 10px;font-family:inherit;font-size:.75rem}.marker-input:focus{border-color:var(--color-accent)}.btn-marker{background:var(--color-warning-soft);border-radius:var(--radius-sm);color:var(--color-warning);cursor:pointer;white-space:nowrap;transition:all var(--duration-fast);border:1px solid #ffd60a33;padding:6px 12px;font-family:inherit;font-size:.75rem}.btn-marker:hover{background:#ffd60a33}@media (width<=768px){.session-main{flex-direction:column}.session-sidebar{border-left:none;border-top:.5px solid var(--color-border);width:100%;min-width:0;max-height:40vh}}