:root{--bg-abyss: #04070f;--bg-deep: #070c1a;--bg-base: #0a1121;--surface-1: rgba(20, 32, 58, .66);--surface-2: rgba(28, 43, 74, .72);--surface-3: rgba(38, 56, 94, .6);--surface-solid: #111a2e;--border-subtle: rgba(96, 132, 196, .16);--border-strong: rgba(110, 158, 235, .34);--border-focus: rgba(96, 165, 250, .85);--blue-500: #2f6bff;--blue-400: #4d84ff;--blue-300: #7ea6ff;--blue-glow: rgba(64, 124, 255, .42);--cyan-400: #35d6f2;--cyan-300: #6fe6fb;--cyan-glow: rgba(53, 214, 242, .34);--success: #34d399;--warning: #fbbf24;--danger: #f87171;--text-primary: #eef4ff;--text-secondary: #9fb2d4;--text-muted: #6b80a6;--text-inverse: #04070f;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, monospace;--text-xs: .6875rem;--text-sm: .8125rem;--text-base: .9375rem;--text-lg: 1.125rem;--text-xl: 1.5rem;--text-2xl: 2rem;--text-3xl: 2.75rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 3rem;--space-8: 4rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 18px;--radius-xl: 26px;--radius-pill: 999px;--shadow-sm: 0 2px 10px rgba(2, 6, 18, .4);--shadow-md: 0 12px 34px rgba(2, 6, 18, .5);--shadow-lg: 0 28px 70px rgba(2, 6, 18, .62);--shadow-glow: 0 0 0 1px rgba(96, 165, 250, .28), 0 14px 44px rgba(47, 107, 255, .28);--transition-fast: .13s cubic-bezier(.4, 0, .2, 1);--transition-base: .22s cubic-bezier(.4, 0, .2, 1);--transition-slow: .42s cubic-bezier(.16, 1, .3, 1);--content-max: 1180px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);line-height:1.55;color:var(--text-primary);background:var(--bg-abyss);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.app-shell{min-height:100%;display:flex;flex-direction:column;background:radial-gradient(1100px 620px at 12% -8%,rgba(47,107,255,.2),transparent 62%),radial-gradient(900px 540px at 92% 4%,rgba(53,214,242,.12),transparent 58%),radial-gradient(760px 700px at 50% 108%,rgba(47,107,255,.11),transparent 62%),linear-gradient(180deg,var(--bg-deep) 0%,var(--bg-abyss) 100%)}h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.2}p{margin:0}button{font:inherit;color:inherit;cursor:pointer}input,select{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--border-focus);outline-offset:3px;border-radius:var(--radius-sm)}::selection{background:var(--blue-glow);color:var(--text-primary)}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:#6084c438;border-radius:var(--radius-pill);border:3px solid transparent;background-clip:content-box}*::-webkit-scrollbar-thumb:hover{background:#6084c466;background-clip:content-box}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.brand{display:flex;align-items:center;gap:var(--space-3);font-weight:600;letter-spacing:-.01em}.brand__mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(140deg,var(--blue-500),var(--cyan-400));box-shadow:0 6px 22px var(--blue-glow);flex-shrink:0}.brand__pulse{width:15px;height:15px;border-radius:50%;border:2.5px solid rgba(255,255,255,.92);border-right-color:transparent;animation:brand-spin 3.6s linear infinite}@keyframes brand-spin{to{transform:rotate(360deg)}}.brand__name{font-size:var(--text-lg)}.brand__name span{color:var(--cyan-300);font-weight:500}.card{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);border:1px solid transparent;font-size:var(--text-base);font-weight:550;transition:transform var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast);white-space:nowrap}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{background:linear-gradient(135deg,var(--blue-500),var(--blue-400));color:#fff;box-shadow:0 8px 26px var(--blue-glow)}.btn--primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 34px var(--blue-glow)}.btn--primary:active:not(:disabled){transform:translateY(0)}.btn--ghost{background:var(--surface-2);border-color:var(--border-subtle);color:var(--text-secondary)}.btn--ghost:hover:not(:disabled){border-color:var(--border-strong);color:var(--text-primary)}.btn--danger{background:#f871711f;border-color:#f8717159;color:var(--danger)}.btn--danger:hover:not(:disabled){background:#f8717133}.btn--block{width:100%}.field{display:flex;flex-direction:column;gap:var(--space-2)}.field__label{font-size:var(--text-sm);font-weight:550;color:var(--text-secondary)}.field__hint{font-size:var(--text-sm);color:var(--text-muted);line-height:1.5}.input{width:100%;padding:var(--space-3) var(--space-4);background:#060c1a9e;border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input::placeholder{color:var(--text-muted)}.input:hover{border-color:var(--border-strong)}.input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px #60a5fa29}.input--code{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;font-size:var(--text-lg)}.centered{flex:1;display:grid;place-items:center;padding:var(--space-6) var(--space-4)}.welcome{width:min(460px,100%);padding:var(--space-7) var(--space-6);text-align:center;box-shadow:var(--shadow-lg);animation:rise var(--transition-slow) both}@keyframes rise{0%{opacity:0;transform:translateY(14px)}}.welcome__brand{justify-content:center;margin-bottom:var(--space-5)}.welcome__title{font-size:var(--text-2xl);margin-bottom:var(--space-3)}.welcome__subtitle{color:var(--text-secondary);margin-bottom:var(--space-6);line-height:1.6}.welcome__form{display:flex;flex-direction:column;gap:var(--space-4);text-align:left}.welcome__note{margin-top:var(--space-5);font-size:var(--text-sm);color:var(--text-muted)}.lobby{width:min(660px,100%);padding:var(--space-6);box-shadow:var(--shadow-lg);animation:rise var(--transition-slow) both}.lobby__header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap}.lobby__title{font-size:var(--text-xl)}.lobby__who{font-size:var(--text-sm);color:var(--text-secondary)}.lobby__who strong{color:var(--text-primary);font-weight:600}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1);padding:var(--space-1);background:#060c1a8c;border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:var(--space-5)}.tabs__tab{padding:var(--space-3);border:none;background:transparent;border-radius:var(--radius-sm);color:var(--text-secondary);font-weight:550;transition:background var(--transition-fast),color var(--transition-fast)}.tabs__tab[aria-selected=true]{background:var(--surface-3);color:var(--text-primary);box-shadow:var(--shadow-sm)}.lobby__body{display:flex;flex-direction:column;gap:var(--space-5)}.languages{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:var(--space-3)}.language{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:#060c1a80;border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-align:left;transition:border-color var(--transition-fast),background var(--transition-fast),transform var(--transition-fast)}.language:hover{border-color:var(--border-strong);transform:translateY(-1px)}.language[aria-pressed=true]{border-color:var(--blue-400);background:#2f6bff24;box-shadow:var(--shadow-glow)}.language__flag{font-size:1.4rem;line-height:1}.language__text{display:flex;flex-direction:column;min-width:0}.language__name{font-weight:550;font-size:var(--text-sm)}.language__native{font-size:var(--text-xs);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.language__badge{margin-left:auto;font-size:.625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-300);background:#35d6f21f;border-radius:var(--radius-pill);padding:2px 7px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-subtle);background:#070c1ab8;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);position:sticky;top:0;z-index:10;flex-wrap:wrap}.topbar__right{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}.room-chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);font-size:var(--text-sm)}.room-chip__code{font-family:var(--font-mono);letter-spacing:.1em;color:var(--text-primary)}.room-chip__label{color:var(--text-muted)}.status{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:550}.status__dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);flex-shrink:0}.status--connected .status__dot{background:var(--success);box-shadow:0 0 0 4px #34d39929;animation:breathe 2.4s ease-in-out infinite}.status--connecting .status__dot,.status--reconnecting .status__dot{background:var(--warning);animation:breathe 1s ease-in-out infinite}.status--disconnected .status__dot{background:var(--danger)}.status--connected{color:var(--success)}.status--connecting,.status--reconnecting{color:var(--warning)}.status--disconnected{color:var(--danger)}@keyframes breathe{50%{opacity:.45}}.conference{flex:1;width:100%;max-width:var(--content-max);margin:0 auto;padding:var(--space-6) var(--space-5) var(--space-8);display:flex;flex-direction:column;gap:var(--space-5)}.conference__heading{display:flex;flex-direction:column;gap:var(--space-2)}.conference__title{font-size:var(--text-xl)}.participants{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-4)}.participant{position:relative;padding:var(--space-5);overflow:hidden;transition:border-color var(--transition-base)}.participant--speaking{border-color:var(--blue-400);box-shadow:var(--shadow-glow)}.participant--empty{border-style:dashed}.participant__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}.participant__role{font-size:var(--text-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}.participant--you .participant__role{color:var(--blue-300)}.participant__name{font-size:var(--text-lg);font-weight:600;margin-top:var(--space-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.participant__lang{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);font-size:var(--text-sm);color:var(--text-secondary)}.participant__state{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--surface-3);color:var(--text-secondary);white-space:nowrap}.participant__state--speaking{background:#2f6bff2e;color:var(--blue-300)}.participant__state--waiting{background:#fbbf2424;color:var(--warning)}.participant__state--offline{background:#f871711f;color:var(--danger)}.waveform{display:flex;align-items:center;justify-content:center;gap:3px;height:46px;margin-top:var(--space-4)}.waveform__bar{width:3px;min-height:3px;border-radius:var(--radius-pill);background:linear-gradient(180deg,var(--cyan-400),var(--blue-500));transition:height 90ms linear,opacity var(--transition-base);opacity:.28}.waveform--active .waveform__bar{opacity:1}.waiting{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-7) var(--space-5);text-align:center}.waiting__pulse{position:relative;width:62px;height:62px;display:grid;place-items:center}.waiting__pulse:before,.waiting__pulse:after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--blue-400);animation:ripple 2.4s ease-out infinite}.waiting__pulse:after{animation-delay:1.2s}.waiting__pulse span{width:15px;height:15px;border-radius:50%;background:var(--blue-400);box-shadow:0 0 18px var(--blue-glow)}@keyframes ripple{0%{transform:scale(.42);opacity:.85}to{transform:scale(1);opacity:0}}.waiting__title{font-size:var(--text-lg)}.waiting__body{color:var(--text-secondary);max-width:46ch}.roomcode{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);margin-top:var(--space-3);padding:var(--space-5) var(--space-6);background:#060c1a99;border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}.roomcode__value{font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:600;letter-spacing:.2em;color:var(--text-primary);text-shadow:0 0 26px var(--blue-glow)}.transcript{display:flex;flex-direction:column;min-height:260px}.transcript__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-subtle)}.transcript__list{flex:1;overflow-y:auto;max-height:44vh;padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);scroll-behavior:smooth}.transcript__empty{display:grid;place-items:center;min-height:190px;text-align:center;color:var(--text-muted);gap:var(--space-2);padding:var(--space-5)}.utterance{display:flex;flex-direction:column;gap:var(--space-2);padding-left:var(--space-4);border-left:2px solid var(--border-subtle);animation:rise var(--transition-base) both}.utterance--mine{border-left-color:var(--blue-400)}.utterance--theirs{border-left-color:var(--cyan-400)}.utterance--pending{border-left-style:dashed}.utterance__who{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}.utterance__original{font-size:var(--text-base);color:var(--text-primary)}.utterance--pending .utterance__original{color:var(--text-secondary);font-style:italic;opacity:.78}.utterance__translated{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--text-base);color:var(--cyan-300)}.utterance__arrow{color:var(--text-muted);flex-shrink:0}.utterance__meta{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-xs);color:var(--text-muted);font-family:var(--font-mono)}.latency-pill{display:inline-flex;align-items:center;gap:var(--space-1);padding:1px 8px;border-radius:var(--radius-pill);font-weight:600;border:1px solid transparent}.latency-pill--excellent{color:var(--success);background:#34d3991a;border-color:#34d3993d}.latency-pill--good{color:var(--cyan-300);background:#35d6f21a;border-color:#35d6f23d}.latency-pill--high{color:var(--warning);background:#fbbf241a;border-color:#fbbf243d}.typing-dots{display:inline-flex;gap:3px}.typing-dots span{width:4px;height:4px;border-radius:50%;background:currentColor;animation:typing 1.3s ease-in-out infinite}.typing-dots span:nth-child(2){animation-delay:.16s}.typing-dots span:nth-child(3){animation-delay:.32s}@keyframes typing{0%,60%,to{opacity:.25}30%{opacity:1}}.latencybar{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-4) var(--space-5);flex-wrap:wrap}.latencybar__stage{display:flex;flex-direction:column;gap:2px;min-width:78px}.latencybar__label{font-size:var(--text-xs);color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase}.latencybar__value{font-family:var(--font-mono);font-size:var(--text-base);font-weight:600}.latencybar__stage--total .latencybar__value{font-size:var(--text-lg);color:var(--cyan-300)}.latencybar__spacer{flex:1}.controls{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5);flex-wrap:wrap}.mic-button{display:inline-flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--surface-2);font-weight:550;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}.mic-button:hover:not(:disabled){transform:translateY(-1px)}.mic-button--live{border-color:#34d39980;background:#34d3991f;color:var(--success)}.mic-button--muted{border-color:#f8717173;background:#f871711a;color:var(--danger)}.mic-button__ring{width:10px;height:10px;border-radius:50%;background:currentColor}.mic-button--live .mic-button__ring{animation:breathe 1.8s ease-in-out infinite}.notices{display:flex;flex-direction:column;gap:var(--space-2)}.notice{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid;font-size:var(--text-sm);animation:rise var(--transition-base) both}.notice--error{background:#f871711a;border-color:#f871714d;color:#fecaca}.notice--warning{background:#fbbf241a;border-color:#fbbf2447;color:#fde68a}.notice--info{background:#35d6f214;border-color:#35d6f23d;color:var(--cyan-300)}.notice__text{flex:1}.notice__close{background:none;border:none;color:inherit;opacity:.65;padding:0 var(--space-1);line-height:1;font-size:var(--text-lg)}.notice__close:hover{opacity:1}.panel{overflow:hidden}.panel__toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;padding:var(--space-4) var(--space-5);background:none;border:none;text-align:left;color:var(--text-secondary);font-weight:550}.panel__toggle:hover{color:var(--text-primary)}.panel__chevron{transition:transform var(--transition-base);color:var(--text-muted)}.panel__toggle[aria-expanded=true] .panel__chevron{transform:rotate(180deg)}.panel__body{padding:0 var(--space-5) var(--space-5);border-top:1px solid var(--border-subtle);padding-top:var(--space-4)}.metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-4)}.metric{display:flex;flex-direction:column;gap:2px}.metric__label{font-size:var(--text-xs);color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase}.metric__value{font-family:var(--font-mono);font-size:var(--text-base);color:var(--text-primary)}.metric__value--absent{color:var(--text-muted)}.metrics__group-title{grid-column:1 / -1;font-size:var(--text-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-300);margin-top:var(--space-2)}.metrics__group-title:first-child{margin-top:0}.metrics__note{grid-column:1 / -1;font-size:var(--text-sm);color:var(--text-muted);line-height:1.5}.profiles{display:flex;flex-direction:column;gap:var(--space-2)}.profile{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:#060c1a80;border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-align:left;transition:border-color var(--transition-fast),background var(--transition-fast)}.profile:hover{border-color:var(--border-strong)}.profile[aria-pressed=true]{border-color:var(--blue-400);background:#2f6bff1f}.profile__radio{width:15px;height:15px;border-radius:50%;border:2px solid var(--border-strong);margin-top:3px;flex-shrink:0;transition:border-color var(--transition-fast)}.profile[aria-pressed=true] .profile__radio{border-color:var(--blue-400);background:radial-gradient(circle,var(--blue-400) 0 42%,transparent 46%)}.profile__text{display:flex;flex-direction:column;gap:2px;min-width:0}.profile__name{font-weight:550;font-size:var(--text-sm)}.profile__desc{font-size:var(--text-xs);color:var(--text-muted);line-height:1.45}.headphones-hint{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--cyan-300);background:#35d6f214;border:1px solid rgba(53,214,242,.2);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}@media(max-width:720px){.conference{padding:var(--space-5) var(--space-4) var(--space-7);gap:var(--space-4)}.topbar{padding:var(--space-3) var(--space-4)}.latencybar{gap:var(--space-4)}.transcript__list{max-height:50vh}.roomcode__value{font-size:var(--text-xl)}}.language--textonly{opacity:.72}.language__badge--warn{background:color-mix(in srgb,var(--warn, #b45309) 18%,transparent);color:var(--warn, #b45309)}