*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none}button{font:inherit;color:inherit;border:none;background:none;cursor:pointer}input,select,textarea{font:inherit;color:inherit}:root{--bg: #0e1014;--surface: #16191f;--surface-2: #1d2129;--surface-3: #262b35;--border: #2c313b;--text: #eef1f6;--text-dim: #9aa3b2;--text-faint: #6b7382;--accent: #2d8cff;--accent-hover: #4a9dff;--danger: #e8503a;--danger-hover: #f26350;--success: #22c55e;--warn: #f59e0b;--radius: 12px;--radius-sm: 8px;--shadow: 0 8px 32px rgb(0 0 0 / 45%);--control-h: 44px}.app{display:flex;flex-direction:column;height:100%;min-height:0}.center-page{display:grid;place-items:center;min-height:100%;padding:24px}.card{width:min(460px,100%);background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px;box-shadow:var(--shadow)}.card h1{margin:0 0 6px;font-size:26px;letter-spacing:-.02em}.card .subtitle{margin:0 0 22px;color:var(--text-dim);font-size:14px;line-height:1.5}.brand{display:flex;align-items:center;gap:10px;margin-bottom:20px;font-size:20px;font-weight:650;letter-spacing:-.02em}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff}.field{margin-bottom:14px}.field label{display:block;margin-bottom:6px;font-size:13px;font-weight:550;color:var(--text-dim)}.input,.select{width:100%;height:var(--control-h);padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);outline:none;transition:border-color .12s ease,box-shadow .12s ease}.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa3b2' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}.input:focus,.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #2d8cff33}.input::placeholder{color:var(--text-faint)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-h);padding:0 18px;border-radius:var(--radius-sm);background:var(--surface-3);font-weight:550;transition:background .12s ease,opacity .12s ease,transform 60ms ease;white-space:nowrap}.btn:hover:not(:disabled){background:#313846}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background:var(--danger-hover)}.btn-ghost{background:transparent;border:1px solid var(--border)}.btn-block{width:100%}.btn-sm{height:32px;padding:0 12px;font-size:13px;border-radius:6px}.divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--text-faint);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.error-text{margin:10px 0 0;padding:10px 12px;border-radius:var(--radius-sm);background:#e8503a1f;border:1px solid rgb(232 80 58 / 30%);color:#ffb3a7;font-size:13px;line-height:1.45}.hint{margin-top:10px;color:var(--text-faint);font-size:12.5px;line-height:1.5}.prejoin{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:28px;align-items:center;width:min(940px,100%)}.preview{position:relative;aspect-ratio:16 / 9;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--border)}.preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.preview-placeholder{position:absolute;inset:0;display:grid;place-items:center;gap:10px;color:var(--text-dim);background:var(--surface)}.preview-controls{position:absolute;left:50%;bottom:16px;transform:translate(-50%);display:flex;gap:10px}@media(max-width:860px){.prejoin{grid-template-columns:1fr}}.room{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--bg)}.room-header{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0}.room-title{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.room-meta{color:var(--text-faint);font-size:12.5px;font-variant-numeric:tabular-nums}.spacer{flex:1}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:var(--surface-3);font-size:12px;font-weight:550}.badge-rec{background:#e8503a2e;color:#ff9a8a}.badge-rec .dot{width:7px;height:7px;border-radius:50%;background:var(--danger);animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.25}}.room-body{display:flex;flex:1;min-height:0}.stage{position:relative;flex:1;min-width:0;padding:12px;overflow:hidden}.grid{display:grid;gap:10px;width:100%;height:100%;grid-auto-rows:minmax(0,1fr);align-content:stretch;justify-content:stretch}.tile{position:relative;background:var(--surface-2);border-radius:var(--radius);overflow:hidden;aspect-ratio:16 / 9;min-width:0;border:2px solid transparent;transition:border-color .15s ease}.grid .tile{aspect-ratio:auto;width:100%;height:100%;min-height:0}.tile.speaking{border-color:var(--accent)}.tile video{width:100%;height:100%;object-fit:cover;display:block;background:#000}.tile.mirrored video{transform:scaleX(-1)}.tile-avatar{position:absolute;inset:0;display:grid;place-items:center}.avatar{display:grid;place-items:center;border-radius:50%;color:#fff;font-weight:600;letter-spacing:.02em;user-select:none}.tile-footer{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:6px;pointer-events:none}.tile-name{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 8px;border-radius:6px;background:#0000009e;backdrop-filter:blur(6px);font-size:12.5px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile-badges{position:absolute;top:8px;right:8px;display:flex;gap:6px}.pip{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:#0000009e;backdrop-filter:blur(6px)}.pip.muted{background:#e8503ad9}.tile-actions{position:absolute;top:8px;left:8px;opacity:0;transition:opacity .12s ease}.tile:hover .tile-actions{opacity:1}.level-ring{width:14px;height:14px;border-radius:50%;background:var(--success);transform-origin:center;transition:transform 90ms linear}.share-layout{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:10px;height:100%}.share-layout.no-strip{grid-template-columns:minmax(0,1fr)}.share-stage{position:relative;background:#000;border-radius:var(--radius);overflow:hidden;display:grid;place-items:center}.share-stage video{width:100%;height:100%;object-fit:contain;background:#000}.share-stage>.tile{width:100%;height:auto;max-width:100%;max-height:100%}.filmstrip{display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding-right:2px;scrollbar-width:thin}.filmstrip .tile{flex-shrink:0}@media(max-width:720px){.share-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 92px}.filmstrip{flex-direction:row;overflow-x:auto;overflow-y:hidden}.filmstrip .tile{width:150px}}.share-banner{position:absolute;top:12px;left:50%;transform:translate(-50%);z-index:5;display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:#2d8cffeb;color:#fff;font-size:13px;font-weight:550;box-shadow:var(--shadow)}.controls{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}.control{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:66px;padding:7px 10px;border-radius:var(--radius-sm);font-size:11.5px;color:var(--text-dim);transition:background .12s ease,color .12s ease}.control:hover:not(:disabled){background:var(--surface-2);color:var(--text)}.control:disabled{opacity:.4;cursor:not-allowed}.control.active{color:var(--accent)}.control.danger{color:#ff9a8a}.control.off .icon-wrap{background:var(--danger);color:#fff}.control.on-accent .icon-wrap{background:var(--accent);color:#fff}.icon-wrap{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--surface-2);color:var(--text);position:relative}.control-count{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:650;display:grid;place-items:center}.leave-btn{height:40px;padding:0 18px;border-radius:10px;background:var(--danger);color:#fff;font-weight:600;margin-left:6px}.leave-btn:hover{background:var(--danger-hover)}.panel{width:320px;flex-shrink:0;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--border);min-height:0}.panel-header{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border);font-weight:600;font-size:14px;flex-shrink:0}.panel-body{flex:1;overflow-y:auto;padding:10px;min-height:0;scrollbar-width:thin}.panel-footer{padding:10px;border-top:1px solid var(--border);flex-shrink:0}.icon-btn{display:grid;place-items:center;width:30px;height:30px;border-radius:6px;color:var(--text-dim)}.icon-btn:hover{background:var(--surface-2);color:var(--text)}@media(max-width:700px){.panel{position:absolute;inset:0;width:100%;z-index:30}}@media(max-width:560px){.room-header{gap:8px;padding:8px 10px}.room-title{font-size:14px}.room-header .btn-sm{padding:0 9px;gap:5px}.center-page{padding:16px}.card{padding:22px 18px}}.participant{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--radius-sm)}.participant:hover{background:var(--surface-2)}.participant-name{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.participant-role{color:var(--text-faint);font-size:11.5px}.participant-actions{display:flex;gap:2px;opacity:0}.participant:hover .participant-actions,.participant-actions.open{opacity:1}.section-label{padding:12px 8px 6px;color:var(--text-faint);font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase}.chat-list{display:flex;flex-direction:column;gap:12px}.chat-msg-head{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}.chat-author{font-size:12.5px;font-weight:600}.chat-time{color:var(--text-faint);font-size:11px;font-variant-numeric:tabular-nums}.chat-text{font-size:13.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}.chat-private{color:var(--warn);font-size:11px;font-weight:600}.chat-input-row{display:flex;gap:8px}.chat-input{flex:1;min-height:40px;max-height:120px;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);outline:none;resize:none;font-size:13.5px;line-height:1.4}.chat-input:focus{border-color:var(--accent)}.empty-state{display:grid;place-items:center;align-content:center;gap:8px;height:100%;color:var(--text-faint);font-size:13px;text-align:center;padding:24px}.toasts{position:fixed;bottom:90px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:100;pointer-events:none;width:min(440px,calc(100% - 32px))}.toast{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--radius-sm);background:var(--surface-3);border:1px solid var(--border);box-shadow:var(--shadow);font-size:13.5px;pointer-events:auto;animation:toast-in .18s ease-out}.toast.error{background:#3a1d19;border-color:#e8503a73}.toast.success{background:#142e1f;border-color:#22c55e66}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.reaction-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:20}.floating-reaction{position:absolute;bottom:0;font-size:34px;animation:float-up 3s ease-out forwards;text-align:center}.floating-reaction span{display:block;font-size:11px;color:var(--text-dim);background:#0000008c;border-radius:4px;padding:1px 5px;margin-top:2px}@keyframes float-up{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1;transform:translateY(-30px) scale(1)}to{opacity:0;transform:translateY(-260px) scale(1.1)}}.reaction-bar{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:10px;display:flex;gap:4px;padding:8px;border-radius:999px;background:var(--surface-3);border:1px solid var(--border);box-shadow:var(--shadow);z-index:40}.reaction-bar button{width:38px;height:38px;border-radius:50%;font-size:21px;transition:transform .1s ease,background .1s ease}.reaction-bar button:hover{background:var(--surface-2);transform:scale(1.15)}.popover{position:absolute;bottom:100%;margin-bottom:10px;min-width:240px;padding:6px;border-radius:var(--radius);background:var(--surface-3);border:1px solid var(--border);box-shadow:var(--shadow);z-index:40}.popover-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:6px;font-size:13.5px;text-align:left}.popover-item:hover{background:var(--surface-2)}.popover-item.danger{color:#ff9a8a}.control-wrap{position:relative}.quality-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.quality-excellent{background:var(--success)}.quality-good{background:#86c440}.quality-poor{background:var(--warn)}.quality-critical{background:var(--danger)}.quality-disconnected{background:var(--text-faint)}.copy-row{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);font-size:13px}.copy-row code{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 8px;font-size:13.5px}.switch{position:relative;width:40px;height:23px;border-radius:999px;background:var(--surface-3);transition:background .14s ease;flex-shrink:0}.switch.on{background:var(--accent)}.switch:after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .14s ease}.switch.on:after{transform:translate(17px)}.lang-toggle{display:inline-flex;align-items:center;gap:2px;flex-shrink:0;padding:3px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border)}.lang-icon{display:grid;place-items:center;padding:0 4px 0 6px;color:var(--text-faint)}.lang-option{padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:550;line-height:1.2;color:var(--text-dim);white-space:nowrap;transition:background .12s ease,color .12s ease}.lang-option:hover:not(.active){color:var(--text);background:var(--surface-3)}.lang-option.active{background:var(--accent);color:#fff}.lang-option .lang-short{display:none}.lang-toggle.compact .lang-option{padding:5px 9px}.lang-toggle.compact .lang-option .lang-full{display:none}.lang-toggle.compact .lang-option .lang-short{display:inline}@media(max-width:460px){.lang-icon{display:none}.lang-option{padding:5px 10px}.lang-option .lang-full{display:none}.lang-option .lang-short{display:inline}}.card-topbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}.card-topbar .brand{margin-bottom:0}.spinner{width:22px;height:22px;border:2.5px solid var(--surface-3);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}