@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";
:root{--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", "SF Mono", monospace;--bg:#0a0b0e;--bg-surface:#12151c;--bg-surface-elevated:#181c26;--bg-surface-hover:#1f2432;--bg-inset:#0f1218;--border:#ffffff14;--border-subtle:#ffffff0d;--border-focus:#3b82f699;--border-active:#ffffff2e;--fg:#f8fafc;--fg-secondary:#94a3b8;--fg-tertiary:#64748b;--fg-muted:#475569;--primary:#3b82f6;--primary-hover:#2563eb;--primary-soft:#3b82f61f;--success:#10b981;--success-soft:#10b9811f;--warning:#f59e0b;--warning-soft:#f59e0b1f;--danger:#ef4444;--danger-hover:#dc2626;--danger-soft:#ef44441f;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;--radius-pill:9999px;--shadow-sm:0 1px 2px 0 #0006;--shadow-md:0 4px 16px -2px #00000080;--shadow-lg:0 12px 32px -4px #0009;--shadow-dock:0 10px 40px -4px #000c, 0 0 0 1px #ffffff14}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;background:var(--bg);color:var(--fg)}body{font-family:var(--font-sans);background:var(--bg);color:var(--fg);min-height:100vh;font-size:15px;line-height:1.6;overflow-x:hidden}.brand-title{font-family:var(--font-sans);letter-spacing:-.03em;color:#fff;font-weight:700}.brand-badge{font-family:var(--font-sans);letter-spacing:.04em;text-transform:uppercase;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);border:1px solid #3b82f640;align-items:center;gap:5px;padding:3px 8px;font-size:11px;font-weight:600;display:inline-flex}.btn{font-family:var(--font-sans);border-radius:var(--radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s cubic-bezier(.16,1,.3,1);display:inline-flex}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{color:#0a0b0e;background:#fff;font-weight:600}.btn-primary:hover:not(:disabled){background:#e2e8f0;transform:translateY(-1px)}.btn-secondary{background:var(--bg-surface-elevated);color:var(--fg);border-color:var(--border)}.btn-secondary:hover:not(:disabled){background:var(--bg-surface-hover);border-color:var(--border-active)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background:var(--danger-hover)}.input-field{font-family:var(--font-sans);color:var(--fg);background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--radius-md);outline:none;width:100%;padding:11px 16px;font-size:14px;transition:all .2s}.input-field:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.select-field{appearance:none;font-family:var(--font-sans);color:var(--fg);background:var(--bg-surface-elevated);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;outline:none;padding:10px 36px 10px 14px;font-size:14px;font-weight:500;transition:all .2s}.select-field:hover{border-color:var(--border-active)}.select-field:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.landing-shell{background:radial-gradient(ellipse 80% 50% at 50% -20%, #3b82f614, transparent 70%), var(--bg);flex-direction:column;min-height:100vh;display:flex}.landing-nav{justify-content:space-between;align-items:center;width:100%;max-width:1200px;margin:0 auto;padding:24px 36px;display:flex}.landing-hero{text-align:center;max-width:820px;margin:40px auto 48px;padding:0 20px}.hero-headline{letter-spacing:-.03em;color:#fff;margin-bottom:18px;font-size:clamp(34px,5.5vw,54px);font-weight:700;line-height:1.15}.hero-subheadline{color:var(--fg-secondary);max-width:600px;margin:0 auto 32px;font-size:clamp(16px,2vw,18px);line-height:1.6}.hero-lang-bar{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);align-items:center;gap:12px;margin-bottom:40px;padding:8px 16px;display:inline-flex}.modes-grid{grid-template-columns:repeat(3,1fr);gap:20px;width:100%;max-width:1100px;margin:0 auto 60px;padding:0 24px;display:grid}.mode-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-xl);flex-direction:column;padding:28px 24px;transition:all .25s cubic-bezier(.16,1,.3,1);display:flex;position:relative}.mode-card--active{background:linear-gradient(180deg, #3b82f60a 0%, var(--bg-surface) 100%);border-color:#3b82f64d;box-shadow:0 8px 30px -8px #00000080}.mode-card--active:hover{border-color:#3b82f680;transform:translateY(-2px);box-shadow:0 12px 36px -6px #0009}.mode-card--disabled{opacity:.65;background:var(--bg-inset);border-style:dashed}.card-top{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.card-icon{border-radius:var(--radius-md);background:var(--bg-surface-elevated);border:1px solid var(--border);color:#fff;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.card-status-badge{border-radius:var(--radius-pill);padding:3px 10px;font-size:11px;font-weight:600}.card-status-badge.available{background:var(--success-soft);color:var(--success);border:1px solid #10b98140}.card-status-badge.coming-soon{color:var(--fg-tertiary);background:#ffffff0d;border:1px solid #ffffff14}.card-title{color:#fff;margin-bottom:8px;font-size:20px;font-weight:600}.card-desc{color:var(--fg-secondary);flex-grow:1;margin-bottom:24px;font-size:13.5px;line-height:1.55}.lobby-shell{background:var(--bg);flex-direction:column;min-height:100vh;display:flex}.lobby-nav{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:20px 32px;display:flex}.lobby-container{grid-template-columns:1.15fr 1fr;align-items:start;gap:36px;width:100%;max-width:980px;margin:40px auto;padding:0 24px;display:grid}.preview-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden}.preview-viewport{aspect-ratio:16/9;background:var(--bg-inset);justify-content:center;align-items:center;display:flex;position:relative}.preview-video{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.preview-avatar{background:var(--bg-surface-elevated);border:1px solid var(--border);width:80px;height:80px;color:var(--fg-secondary);border-radius:50%;justify-content:center;align-items:center;font-size:32px;font-weight:600;display:flex}.preview-bar{background:var(--bg-surface-elevated);border-top:1px solid var(--border-subtle);justify-content:center;gap:12px;padding:16px;display:flex}.preview-toggle-btn{background:var(--bg-surface);border:1px solid var(--border);width:44px;height:44px;color:var(--fg);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.preview-toggle-btn.off{background:var(--danger-soft);color:var(--danger);border-color:#ef44444d}.preview-toggle-btn:hover{border-color:var(--border-active);transform:scale(1.05)}.lobby-form-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:32px}.lobby-title{letter-spacing:-.02em;color:#fff;margin-bottom:6px;font-size:24px;font-weight:700}.lobby-desc{color:var(--fg-secondary);margin-bottom:24px;font-size:14px}.lobby-field-group{flex-direction:column;gap:18px;margin-bottom:28px;display:flex}.field-label{text-transform:uppercase;letter-spacing:.05em;color:var(--fg-tertiary);margin-bottom:6px;font-size:12px;font-weight:600;display:block}.room-shell{background:var(--bg);width:100vw;height:100vh;display:flex;position:relative;overflow:hidden}.room{flex-direction:column;flex:1;height:100%;display:flex;position:relative;overflow:hidden}.room-chrome{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle);z-index:20;background:#0a0b0ed9;justify-content:space-between;align-items:center;padding:14px 24px;display:flex}.chrome-left{align-items:center;gap:14px;display:flex}.chrome-center{align-items:center;gap:10px;display:flex}.chrome-right{align-items:center;gap:12px;display:flex}.room-code-pill{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--fg-secondary);cursor:pointer;align-items:center;gap:8px;padding:5px 12px;font-size:13px;transition:all .2s;display:inline-flex}.room-code-pill:hover{background:var(--bg-surface-elevated);color:#fff}.status-active-pill{border-radius:var(--radius-pill);background:var(--success-soft);color:var(--success);border:1px solid #10b98140;align-items:center;gap:6px;padding:4px 10px;font-size:11.5px;font-weight:600;display:inline-flex}.status-dot{background:var(--success);width:7px;height:7px;box-shadow:0 0 8px var(--success);border-radius:50%}.room-stage{flex:1;justify-content:center;align-items:center;padding:20px;display:flex;position:relative;overflow:hidden}.tile-grid{place-content:center;gap:16px;width:100%;max-width:1300px;height:100%;margin:0 auto;display:grid}.tile-grid:has(>:first-child:last-child){grid-template-rows:minmax(0,520px);grid-template-columns:minmax(0,850px)}.tile-grid:has(>:nth-child(2):last-child){grid-template-rows:minmax(0,420px);grid-template-columns:repeat(2,minmax(0,600px))}:is(.tile-grid:has(>:nth-child(3):last-child),.tile-grid:has(>:nth-child(4):last-child)){grid-template-rows:repeat(2,minmax(0,320px));grid-template-columns:repeat(2,minmax(0,560px))}:is(.tile-grid:has(>:nth-child(5)),.tile-grid:has(>:nth-child(6))){grid-template-rows:repeat(2,minmax(0,260px));grid-template-columns:repeat(3,minmax(0,420px))}.tile{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-xl);width:100%;height:100%;box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s;position:relative;overflow:hidden}.tile.tile-speaking{border-color:var(--success);box-shadow:0 0 0 2px #10b98166}.tile-video{object-fit:cover;width:100%;height:100%;display:block}.tile-placeholder{background:var(--bg-surface);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.tile-avatar-circle{background:var(--bg-surface-elevated);border:1px solid var(--border);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;font-size:28px;font-weight:600;display:flex}.tile-overlay-bottom{pointer-events:none;background:linear-gradient(#0000 0%,#0a0b0ed9 100%);justify-content:space-between;align-items:center;padding:12px 16px;display:flex;position:absolute;bottom:0;left:0;right:0}.tile-participant-info{align-items:center;gap:10px;display:flex}.tile-name-label{color:#fff;text-shadow:0 1px 3px #0009;font-size:14px;font-weight:600}.tile-lang-tag{border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;background:#ffffff1f;align-items:center;gap:4px;padding:2px 8px;font-size:11.5px;font-weight:500;display:inline-flex}.tile-speaking-status{text-transform:uppercase;letter-spacing:.04em;border-radius:var(--radius-pill);padding:2px 7px;font-size:11px;font-weight:600}.tile-speaking-status.speaking{background:var(--success-soft);color:var(--success);border:1px solid #10b9814d}.tile-speaking-status.listening{color:var(--fg-tertiary)}.self-view{aspect-ratio:16/9;background:var(--bg-surface);border-radius:var(--radius-lg);width:190px;box-shadow:var(--shadow-lg);z-index:30;border:1px solid #ffffff1f;transition:all .2s;position:absolute;bottom:96px;right:28px;overflow:hidden}.self-view:hover{border-color:#ffffff40;transform:scale(1.03)}.self-view-video{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.self-view-fallback{background:var(--bg-surface-elevated);width:100%;height:100%;color:var(--fg-secondary);justify-content:center;align-items:center;font-size:13px;font-weight:500;display:flex}.control-bar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--radius-pill);box-shadow:var(--shadow-dock);z-index:40;background:#12151ce6;align-items:center;gap:10px;padding:8px 14px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.ctrl-btn{border-radius:var(--radius-pill);color:var(--fg-secondary);font-family:var(--font-sans);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;align-items:center;gap:7px;padding:10px 14px;font-size:13px;font-weight:500;transition:all .18s;display:flex}.ctrl-btn:hover{background:var(--bg-surface-hover);color:#fff}.ctrl-btn.ctrl--active{color:#fff;background:#ffffff1a}.ctrl-btn.ctrl--off{background:var(--danger-soft);color:var(--danger)}.ctrl-btn.ctrl-leave{background:var(--danger);color:#fff;padding:10px 18px;font-weight:600}.ctrl-btn.ctrl-leave:hover{background:var(--danger-hover)}.captions-drawer{background:var(--bg-surface);border-left:1px solid var(--border);z-index:35;flex-direction:column;width:360px;height:100%;display:flex}.captions-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:18px 20px;display:flex}.captions-title{color:#fff;font-size:15px;font-weight:600}.captions-subtitle{color:var(--fg-secondary);font-size:12px}.captions-body{flex-direction:column;flex:1;gap:14px;padding:18px;display:flex;overflow-y:auto}.caption-card{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:12px 14px}.caption-meta{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.caption-speaker{color:#fff;font-size:12.5px;font-weight:600}.caption-lang-badge{color:var(--fg-tertiary);font-size:11px}.caption-text{color:var(--fg);font-size:13.5px;line-height:1.5}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#000000b3;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-xl);width:100%;max-width:440px;box-shadow:var(--shadow-lg);padding:32px;position:relative}.modal-close-btn{color:var(--fg-tertiary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:6px;display:flex;position:absolute;top:20px;right:20px}.modal-close-btn:hover{color:var(--fg);background:var(--bg-surface-elevated)}.empty-stage{text-align:center;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-xl);max-width:440px;box-shadow:var(--shadow-md);padding:32px}@media (max-width:900px){.modes-grid{grid-template-columns:1fr;max-width:480px}.lobby-container{grid-template-columns:1fr;max-width:520px}.self-view{width:130px;bottom:84px;right:16px}.control-bar{gap:6px;padding:6px 10px}.ctrl-btn{padding:8px 10px;font-size:12px}.ctrl-btn span{display:none}.ctrl-btn.ctrl-leave span{display:inline}}