:root{--p500: #3d8b88;--p600: #2b7270;--p700: #1e5e5c;--p100: #e0f4f3;--p200: #87d1ce;--n0: #ffffff;--n50: #f7f8f8;--n100: #f1f3f3;--n200: #e5e8e8;--n300: #d1d5d6;--n400: #9aa0a2;--n500: #6f7577;--n600: #4a4f52;--n700: #2e3336;--n800: #1e2224;--n900: #141618;--success: #4caf50;--warning: #f5a623;--error: #d64545;--info: #3a7bd5;--bg-page: #e8e4dc;--bg-card: #f9f8f6;--bg-input: #ffffff;--bg-input-focus: #eef3fb;--bg-header: var(--n900);--text-primary: #1a1d1e;--text-secondary: #4a4f52;--text-muted: #9aa0a2;--border: #d8d4cc;--border-focus: var(--p500);--shadow-card: 0px 2px 6px rgba(0, 0, 0, .05), 0px 6px 18px rgba(0, 0, 0, .07);--shadow-hover: 0px 6px 22px rgba(0, 0, 0, .11);--r-sm: 6px;--r-md: 10px;--r-lg: 16px;--sp1: 4px;--sp2: 8px;--sp3: 12px;--sp4: 16px;--sp5: 24px;--sp6: 32px;--sp7: 48px;--header-h: 52px;--tf: .15s ease;--font-ui: "Space Grotesk", "Inter", sans-serif;--font-body: "Inter", sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace}[data-theme=dark]{--bg-page: #181c1e;--bg-card: #1e2224;--bg-input: #252a2d;--bg-input-focus: #1e2530;--bg-header: #0f1214;--text-primary: #e8ecec;--text-secondary: #9aa0a2;--text-muted: #6f7577;--border: #2e3336;--shadow-card: 0px 2px 6px rgba(0, 0, 0, .3), 0px 6px 18px rgba(0, 0, 0, .4);--shadow-hover: 0px 6px 22px rgba(0, 0, 0, .5);--n50: #1a1e21;--n100: #1e2224}*{box-sizing:border-box;margin:0}html{font-size:16px}body{background:var(--bg-page);color:var(--text-primary);font-family:var(--font-body);font-size:14px;line-height:1.6}h1,h2,h3,h4{font-family:var(--font-ui)}a{color:var(--p500);text-decoration:none}a:hover{text-decoration:underline}button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-ui);font-size:.875rem;font-weight:500;padding:10px 16px;border:none;border-radius:var(--r-md);background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border);cursor:pointer;transition:background var(--tf),box-shadow var(--tf),transform var(--tf)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{background:var(--n200);color:var(--n400);border-color:transparent;cursor:not-allowed}[data-theme=dark] button:disabled{background:var(--n700);color:var(--n500)}button.primary,button.active{background:var(--p500);color:#fff;border-color:transparent}button.primary:hover:not(:disabled),button.active:hover:not(:disabled){background:var(--p600);box-shadow:var(--shadow-hover);transform:translateY(-1px)}button.danger{background:var(--error);color:#fff;border-color:transparent}button.danger:hover:not(:disabled){background:#c03d3d}button.ghost{background:transparent;color:var(--p500);border:1px solid var(--p500)}button.ghost:hover:not(:disabled){background:#3d8b8814}button.small{padding:5px 12px;font-size:.8rem;border-radius:var(--r-sm)}input{width:100%;font-family:var(--font-body);font-size:.9rem;color:var(--text-primary);padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-input);transition:border-color var(--tf),box-shadow var(--tf),background var(--tf)}input:focus{outline:none;border-color:var(--p500);box-shadow:0 0 0 3px #3d8b8833;background:var(--bg-input-focus)}input::placeholder{color:var(--text-muted)}.card{background:var(--bg-card);border-radius:var(--r-lg);padding:var(--sp5);box-shadow:var(--shadow-card);border:1px solid var(--border)}.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-ui);font-size:.72rem;font-weight:500;padding:2px 10px;border-radius:99px;border:1px solid var(--border);background:var(--n100);color:var(--text-secondary)}.chip-primary{background:#3d8b881f;border-color:var(--p500);color:var(--p700)}[data-theme=dark] .chip-primary{color:var(--p200)}.chip-success{background:#4caf501f;border-color:var(--success);color:var(--success)}.chip-warning{background:#f5a6231f;border-color:var(--warning);color:var(--warning)}.chip-error{background:#d645451f;border-color:var(--error);color:var(--error)}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--n500)}.status-dot.connected{background:var(--success);animation:pulse-dot 2.2s infinite}.status-dot.degraded{background:var(--warning)}.status-dot.error{background:var(--error)}@keyframes pulse-dot{0%,to{box-shadow:0 0 #4caf5080}50%{box-shadow:0 0 0 5px #4caf5000}}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.table-wrap{border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--shadow-card);overflow:hidden}.di-table{width:100%;border-collapse:collapse}.di-table th{background:var(--n900);color:var(--n400);font-family:var(--font-ui);font-weight:500;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:var(--sp3) var(--sp4)}.di-table td{padding:var(--sp3) var(--sp4);border-bottom:1px solid var(--border);background:var(--bg-card)}.di-table tbody tr:nth-child(2n) td{background:var(--n50)}.di-table tbody tr:hover td{background:var(--n100)}.app-header{position:sticky;top:0;z-index:200;height:var(--header-h);display:flex;align-items:center;gap:var(--sp4);padding:0 var(--sp4);background:var(--bg-header);border-bottom:1px solid rgba(255,255,255,.06);color:#fff}.header-brand{display:flex;align-items:center;gap:10px;min-width:0}.header-logo{width:28px;height:28px;flex:none;border-radius:7px;display:grid;place-items:center;background:linear-gradient(135deg,var(--p500) 0%,var(--p700) 100%);color:#fff;font-family:var(--font-ui);font-weight:700;font-size:.95rem}.header-appname{font-family:var(--font-ui);font-weight:600;font-size:.95rem;color:#fff;white-space:nowrap}.header-appname span{color:var(--p500)}.header-spacer{flex:1}.app-header button.ghost{border-color:#ffffff2e;color:#ffffffd9}.app-header button.ghost:hover:not(:disabled){background:#ffffff14}.theme-toggle{width:32px;height:32px;padding:0;border-radius:var(--r-sm);background:transparent;border:1px solid rgba(255,255,255,.18);color:#ffffffd9;font-size:.9rem}.theme-toggle:hover:not(:disabled){background:#ffffff14}.user-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--p500) 0%,var(--p700) 100%);color:#fff;font-family:var(--font-ui);font-weight:600;font-size:.7rem}.muted{color:var(--text-muted)}.brand-logo{height:36px;width:auto;align-self:center}.centered-page{min-height:100vh;display:grid;place-items:center;padding:1rem;background:radial-gradient(1100px 600px at 70% -10%,rgba(61,139,136,.1),transparent 60%),var(--bg-page)}.centered-page .card{width:min(420px,100%);display:flex;flex-direction:column;gap:var(--sp4);text-align:center}.centered-page .card form{display:flex;gap:var(--sp2)}.join-card{width:min(560px,100%)!important}.divider{color:var(--text-muted);font-size:.85rem}.room-code{font-family:var(--font-mono);font-size:.85em;background:#3d8b881f;border:1px solid var(--p500);color:var(--p700);padding:.1rem .55rem;border-radius:99px}[data-theme=dark] .room-code,.app-header .room-code{color:var(--p200)}.preview{aspect-ratio:16 / 9;background:var(--n900);border-radius:var(--r-md);overflow:hidden;display:grid;place-items:center}.preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.preview-placeholder{color:var(--n400);padding:1rem;font-size:.85rem}.room-layout{height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--bg-page)}.room-main{flex:1;display:flex;min-height:0;gap:var(--sp2);padding:var(--sp2)}.grid-area{position:relative;flex:1;display:flex;min-width:0}.video-grid{flex:1;display:grid;gap:var(--sp2);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-auto-rows:1fr;align-content:center}.tile{position:relative;background:var(--n800);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-card);overflow:hidden;min-height:180px;display:grid;place-items:center;cursor:pointer}.stage-wrap{flex:1;display:flex;flex-direction:column;gap:var(--sp2);min-width:0;min-height:0}.stage-area{flex:1;display:flex;min-height:0}.stage-area .tile{flex:1;min-height:0}.stage-area .tile video{object-fit:contain;background:#000}.thumb-strip{display:flex;gap:var(--sp2);overflow-x:auto;flex:none;padding-bottom:2px}.thumb-strip .tile{width:168px;height:96px;min-height:0;flex:none}.thumb-strip .tile-label{font-size:.68rem;padding:.1rem .4rem;max-width:calc(100% - 8px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.thumb-strip .tile-avatar{width:44px;height:44px;font-size:.9rem}.tile video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.tile video.contain{object-fit:contain;background:#000}.tile video.hidden{display:none}.tile.speaking{border-color:var(--p500);box-shadow:0 0 0 2px var(--p500),var(--shadow-card)}.quality-dot{width:8px;height:8px;border-radius:50%;flex:none}.q-good{background:var(--success)}.q-fair{background:var(--warning)}.q-poor{background:var(--error)}.tile-avatar{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,var(--p500) 0%,var(--p700) 100%);color:#fff;display:grid;place-items:center;font-family:var(--font-ui);font-weight:600;font-size:1.5rem}.tile-label{position:absolute;left:var(--sp2);bottom:var(--sp2);background:#141618b8;color:#fff;border-radius:var(--r-sm);padding:.2rem .6rem;font-family:var(--font-ui);font-size:.8rem;display:flex;gap:.4rem;align-items:center}.badge{font-family:var(--font-ui);font-size:.68rem;font-weight:500;border-radius:99px;padding:.05rem .5rem}.muted-badge{background:#d6454533;border:1px solid var(--error);color:#f0a0a0}.controls{display:flex;justify-content:center;gap:var(--sp2);padding:var(--sp3) var(--sp4) var(--sp4);flex-wrap:wrap}.join-form{flex-direction:column}.announcement-banner{display:flex;align-items:center;justify-content:center;gap:var(--sp3);background:#3d8b8826;border-bottom:1px solid var(--p500);color:var(--text-primary);font-family:var(--font-ui);font-size:.9rem;padding:8px}.join-requests{position:fixed;top:calc(var(--header-h) + 8px);left:50%;transform:translate(-50%);z-index:60;background:var(--bg-card);border:1px solid var(--p500);border-radius:var(--r-md);box-shadow:var(--shadow-hover);padding:var(--sp3);min-width:300px}.join-request-row{display:flex;align-items:center;gap:var(--sp2);padding:4px 0}.join-request-row span{flex:1;font-weight:500}.reconnect-banner{background:var(--warning);color:#1a1d1e;font-family:var(--font-ui);font-weight:500;font-size:.85rem;text-align:center;padding:6px}.reactions-layer{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:30}.reaction-float{position:absolute;bottom:0;display:flex;flex-direction:column;align-items:center;gap:2px;animation:reaction-up 3s ease-out forwards}.reaction-emoji{font-size:2rem}.reaction-name{font-family:var(--font-ui);font-size:.68rem;background:#141618b3;color:#fff;border-radius:99px;padding:0 8px}@keyframes reaction-up{0%{transform:translateY(0) scale(.6);opacity:0}12%{opacity:1;transform:translateY(-8vh) scale(1.1)}to{transform:translateY(-55vh) scale(1);opacity:0}}.reaction-control{position:relative}.reaction-picker{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);display:flex;gap:4px;background:var(--bg-card);border:1px solid var(--border);border-radius:99px;box-shadow:var(--shadow-hover);padding:6px 10px;z-index:40}.reaction-btn{background:transparent;border:none;font-size:1.3rem;padding:2px 6px;border-radius:99px}.reaction-btn:hover{background:var(--n100);transform:scale(1.2)}.hand-badge{font-size:.9rem}.hands-queue{position:absolute;top:var(--sp2);right:var(--sp2);z-index:25;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:var(--sp2) var(--sp3);min-width:150px}.hands-queue-title{font-family:var(--font-ui);font-weight:600;font-size:.78rem;margin-bottom:4px}.hands-queue-item{font-size:.82rem;padding:2px 0;border-top:1px solid var(--border)}.chat-panel{width:300px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-card);display:flex;flex-direction:column}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp2) var(--sp3);border-bottom:1px solid var(--border);font-family:var(--font-ui);font-weight:600;font-size:.85rem}.chat-messages{flex:1;overflow-y:auto;padding:var(--sp3);display:flex;flex-direction:column;gap:var(--sp2)}.chat-message{background:var(--n100);border:1px solid var(--border);border-radius:var(--r-sm);padding:.4rem .6rem;font-size:.85rem;display:flex;flex-direction:column;gap:.1rem}.chat-message.own{background:#3d8b881f;border-color:var(--p500)}.chat-author{font-family:var(--font-ui);font-size:.72rem;font-weight:500;color:var(--text-muted)}.chat-input{display:flex;gap:var(--sp2);padding:var(--sp2);border-top:1px solid var(--border)}@media(max-width:760px){.controls{gap:6px;padding:var(--sp2) var(--sp2) calc(var(--sp2) + env(safe-area-inset-bottom));flex-wrap:nowrap}.controls button{padding:10px 12px;font-size:1rem}.btn-label,.header-appname{display:none}.app-header{gap:var(--sp2);padding:0 var(--sp2)}.room-main{position:relative}.chat-panel{position:absolute;top:0;right:0;bottom:0;left:0;width:auto;z-index:80;border-radius:var(--r-md)}.video-grid{grid-template-columns:1fr;grid-auto-rows:minmax(160px,1fr);align-content:start;overflow-y:auto}.tile{min-height:140px}.thumb-strip .tile{width:120px;height:72px}.hands-queue{top:auto;bottom:var(--sp2);right:var(--sp2);min-width:120px}.join-requests{width:calc(100vw - 16px);min-width:0}}