@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Manrope:wght@400;600;700;800&display=swap";:root{--color-bg:#0e1116;--color-panel:#141922;--color-panel-2:#1a212c;--color-hairline:#222c39;--color-ink:#e8eef5;--color-ink-2:#c3d0dd;--color-muted:#7b8ca0;--color-live:#3fe08c;--color-paused:#ffcf70;--color-danger:#ff9d96;--color-input-bg:#0b0e13;--color-input-border:#2c3a4d;--color-live-btn:#35d07f;--color-live-btn-ink:#07130d;--color-blue-btn:#357fd0;--color-secondary-bg:#1b2330;--color-secondary-border:#2c3a4d;--color-secondary-ink:#dbe6f2;--color-danger-soft-bg:#3a1518;--color-danger-soft-border:#6c2a2f;--color-danger-soft-ink:#ff9d96;--color-danger-solid:#c62f35;--font-mono:"IBM Plex Mono", monospace}*{box-sizing:border-box}body{background-color:var(--color-bg);min-width:320px;min-height:100vh;color:var(--color-ink);margin:0;font-family:Manrope,Arial,sans-serif}button,select,input{font:inherit}.login-container{box-sizing:border-box;width:100%;max-width:400px;min-height:100vh;margin:0 auto;padding:80px 20px}.login-logo-wrap{text-align:center;flex-direction:column;align-items:center;margin-bottom:32px;display:flex}.login-logo-box{background-color:var(--color-live);border-radius:8px;width:26px;height:26px;margin-bottom:16px}.login-title{letter-spacing:-.3px;color:var(--color-ink);margin:0 0 4px;font-size:24px;font-weight:800}.login-subtitle{color:var(--color-muted);margin:0;font-size:13.5px}.login-field:first-of-type{margin-top:20px}.login-field{margin-bottom:16px}.login-eye-btn{cursor:pointer;color:var(--color-muted);background:0 0;border:none;align-items:center;padding:0;display:flex}.login-error{color:var(--color-danger);margin-bottom:12px;font-size:13px}.ui-button{cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:9px;width:100%;min-height:44px;padding:13px 0;font-family:inherit;font-size:14.5px;font-weight:800;transition:filter .15s;display:flex}.ui-button:focus-visible{outline:2px solid var(--color-live);outline-offset:2px}.ui-button:hover:not(:disabled){filter:brightness(1.06)}.ui-button:disabled{opacity:.35;cursor:default;filter:none}.ui-button-icon{align-items:center;display:flex}.ui-button--primary{background-color:var(--color-ink);color:var(--color-bg)}.ui-button--live{background-color:var(--color-live-btn);color:var(--color-live-btn-ink)}.ui-button--secondary{background-color:var(--color-secondary-bg);border:1px solid var(--color-secondary-border);color:var(--color-secondary-ink)}.ui-button--danger{background-color:var(--color-danger-soft-bg);border:1px solid var(--color-danger-soft-border);color:var(--color-danger-soft-ink)}.ui-button--danger-solid{background-color:var(--color-danger-solid);color:#fff}.ui-formfield{flex-direction:column;gap:7px;display:flex}.ui-formfield-label{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--color-muted);font-size:11px;font-weight:500}.ui-formfield-input-wrap{position:relative}.ui-formfield-input{border:1px solid var(--color-input-border);background-color:var(--color-input-bg);width:100%;color:var(--color-ink);box-sizing:border-box;border-radius:10px;outline:none;padding:13px 16px;font-family:inherit;font-size:15px;font-weight:600}.ui-formfield-input::-ms-reveal{display:none}.ui-formfield-input::-webkit-contacts-auto-fill-button{display:none}.ui-formfield-input::-webkit-credentials-auto-fill-button{display:none}.ui-formfield-input:focus{border-color:var(--color-live)}.ui-formfield-input-wrap:has(.ui-formfield-right) .ui-formfield-input{padding-right:44px}.ui-formfield-right{align-items:center;display:flex;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.ui-panel{background-color:var(--color-panel);border:1px solid var(--color-hairline);box-sizing:border-box;border-radius:16px;flex-direction:column;gap:16px;padding:24px;display:flex}.language-selector-search{width:100%;color:var(--color-ink);border:1px solid var(--color-input-border);background-color:var(--color-input-bg);box-sizing:border-box;border-radius:12px;outline:none;padding:12px 14px;font-family:inherit;font-size:14px;font-weight:600}.language-selector-search:focus{border-color:var(--color-live)}.language-selector-list{background-color:var(--color-input-bg);border:1px solid var(--color-hairline);border-radius:12px;max-height:250px;overflow:hidden auto}.language-selector-item{width:100%;color:var(--color-ink-2);border:none;border-bottom:1px solid var(--color-hairline);cursor:pointer;text-align:left;background:0 0;justify-content:space-between;align-items:center;padding:11px 13px;font-family:inherit;font-size:13.5px;font-weight:700;display:flex}.language-selector-item:last-child{border-bottom:none}.language-selector-item:hover,.language-selector-item:focus-visible{color:var(--color-ink);background-color:#35d07f1f;outline:none}.language-selector-item.selected{color:var(--color-ink);background-color:#35d07f12}.qr-container{box-sizing:border-box;width:100%;max-width:400px;min-height:100vh;margin:0 auto;padding:80px 20px}.qr-header{text-align:center;margin-bottom:32px}.qr-title{letter-spacing:-.3px;color:var(--color-ink);margin:0 0 4px;font-size:24px;font-weight:800}.qr-subtitle{color:var(--color-muted);margin:0;font-size:13.5px}.qr-code-box{background-color:#fff;border-radius:12px;justify-content:center;padding:20px;display:flex}.qr-link-field{background-color:var(--color-input-bg);border:1px solid var(--color-input-border);font-family:var(--font-mono);color:var(--color-ink-2);text-align:center;word-break:break-all;overflow-wrap:break-word;border-radius:10px;padding:12px 14px;font-size:13px}.active-container{box-sizing:border-box;background-color:var(--color-bg);width:100%;max-width:960px;min-height:100vh;margin:0 auto;padding:10px;font-family:Manrope,Arial,sans-serif}.active-layout{flex-flow:wrap;justify-content:center;align-items:center;gap:12px 50px;display:flex}.active-mic-wrap{background-color:var(--color-panel);border-radius:15px;flex-direction:column;align-items:center;gap:8px;min-width:300px;margin-top:15px;margin-bottom:10px;padding:20px;display:flex}.active-mic-circle{width:120px;height:120px;font:inherit;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;margin-bottom:10px;padding:0;animation:2s infinite pulse;display:flex}.active-mic-circle.active{background-color:var(--color-live)}.active-mic-circle.muted{background-color:var(--color-danger);animation:none}.active-mic-circle.paused{background-color:var(--color-muted);animation:none}.active-mic-label{color:var(--color-live);align-items:center;gap:6px;margin-bottom:15px;font-size:14px;font-weight:500;display:flex}.active-mic-label.inactive{color:var(--color-muted)}.active-mic-label.muted{color:var(--color-danger)}.active-dot{background-color:var(--color-live);border-radius:50%;width:8px;height:8px}.active-dot.inactive{background-color:var(--color-muted)}.active-dot.muted{background-color:var(--color-danger)}.active-timer{color:var(--color-ink);letter-spacing:.05em;font-size:24px;font-weight:500}.active-btn-row{gap:10px;margin-bottom:24px;display:flex}.active-btn{cursor:pointer;border:none;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:6px;width:120px;padding:10px 12px;font-size:13px;font-weight:500;display:flex}.active-btn-pause{background-color:var(--color-live-btn);color:var(--color-live-btn-ink)}.active-btn-pause.paused{background-color:var(--color-paused);color:var(--color-bg)}.active-btn-end{background-color:var(--color-danger-solid);color:var(--color-ink)}@keyframes pulse{0%{box-shadow:0 0 #3fe08c66,0 0 #3fe08c33}to{box-shadow:0 0 0 20px #3fe08c00,0 0 0 40px #3fe08c00}}.active-qr-panel{background-color:var(--color-panel);box-sizing:border-box;border-radius:14px;padding:5%}.active-qr-title{color:var(--color-ink);margin-bottom:6px;font-size:18px;font-weight:600}.active-qr-subtitle{color:var(--color-ink-2);margin:0 0 20px;font-size:13px}.active-qr-code-box{background-color:var(--color-panel-2);border-radius:10px;justify-content:center;margin-bottom:12px;padding:16px;display:flex}.active-qr-link{color:var(--color-muted);text-align:center;word-break:break-all;overflow-wrap:break-word;margin-bottom:12px;font-size:13px}.active-qr-actions{flex-direction:column;justify-content:center;gap:10px;margin-bottom:14px;display:flex}.active-qr-copy-button,.active-qr-fullscreen-button{cursor:pointer;border-radius:10px;flex:1;max-height:50px;padding:12px;font-size:14px;font-weight:500}.active-qr-copy-button{background-color:var(--color-secondary-bg);color:var(--color-secondary-ink);border:1px solid var(--color-secondary-border)}.active-qr-fullscreen-button{color:var(--color-secondary-ink);border:1px solid var(--color-secondary-border);background-color:#0000}.active-qr-joined{color:var(--color-muted);text-align:center;font-size:12px}.active-qr-topbox{justify-content:center;display:flex}.active-qr-modal-backdrop{z-index:1000;background-color:#0009;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.active-qr-modal{background-color:var(--color-panel);border-radius:16px;flex-direction:column;align-items:center;gap:16px;padding:32px;display:flex;position:relative}.active-qr-modal-close{background-color:var(--color-panel-2);width:32px;height:32px;color:var(--color-ink);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:12px;right:12px}.active-participants-section{background-color:var(--color-panel);border-radius:14px;width:90%;padding:20px}.active-section-label{letter-spacing:.06em;color:var(--color-muted);margin-bottom:8px;font-size:11px;font-weight:500}.active-participant-list{background-color:var(--color-panel-2);border:.5px solid var(--color-hairline);border-radius:10px;grid-template-columns:1fr;display:grid}@media (width>=769px){.active-participant-list{grid-template-columns:1fr 1fr;max-height:200px;overflow-y:auto}}.active-participant-item{border-bottom:.5px solid var(--color-hairline);justify-content:space-between;align-items:center;padding:12px 14px;display:flex}.active-participant-item:nth-child(2n){border-left:.5px solid var(--color-hairline)}.active-participant-item:last-child{border-bottom:none}.active-participant-info{align-items:center;gap:10px;display:flex}.active-avatar{background-color:var(--color-panel);width:32px;height:32px;color:var(--color-live);border-radius:50%;justify-content:center;align-items:center;font-size:11px;font-weight:500;display:flex}.active-participant-name{color:var(--color-ink);font-size:14px}.active-participant-lang{color:var(--color-muted);font-size:12px}.active-lang-chip{background-color:var(--color-secondary-bg);color:var(--color-secondary-ink);border-radius:99px;padding:3px 10px;font-size:11px}.active-mic-level-track{background-color:var(--color-hairline);border-radius:99px;width:100%;max-width:220px;height:6px;margin:4px 0 10px;overflow:hidden}.active-mic-level-fill{background-color:var(--color-live);border-radius:99px;width:0%;height:100%;transition:width 30ms linear}.active-mic-level-track.paused .active-mic-level-fill{background-color:var(--color-muted)}.active-mic-level-track.muted .active-mic-level-fill{background-color:var(--color-danger)}.active-qr-icon-button{border:1px solid var(--color-secondary-border);background-color:var(--color-secondary-bg);width:100%;color:var(--color-secondary-ink);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:10px 0;font-family:inherit;font-size:13px;font-weight:700;display:flex}.active-qr-icon-button:hover{filter:brightness(1.1)}.active-transcript-panel{flex-direction:column;min-width:260px;min-height:140px;max-height:240px;display:flex}.active-transcript{min-height:0;color:var(--color-ink-2);flex:1;margin-top:8px;font-size:14px;line-height:1.6;overflow-y:auto}.active-mic-error{color:var(--color-danger);text-align:center;margin:-4px 0 8px;font-size:12px}.active-speaking-language{color:var(--color-ink-2);margin-bottom:4px;font-size:13px}.active-transcript-line{margin:0 0 8px}.active-transcript-line:last-child{margin-bottom:0}.active-confirm-modal{background-color:var(--color-panel);border-radius:16px;flex-direction:column;gap:8px;max-width:320px;padding:24px;display:flex;position:relative}.active-confirm-title{color:var(--color-ink);margin:0;font-size:17px;font-weight:700}.active-confirm-text{color:var(--color-ink-2);margin:0 0 12px;font-size:13.5px;line-height:1.5}.active-confirm-actions{gap:10px;display:flex}.active-confirm-cancel,.active-confirm-end{cursor:pointer;border-radius:10px;flex:1;padding:12px;font-size:13.5px;font-weight:600}.active-confirm-cancel{background-color:var(--color-secondary-bg);color:var(--color-secondary-ink);border:1px solid var(--color-secondary-border)}.active-confirm-end{background-color:var(--color-danger-solid);color:#fff;border:none}.join-container{box-sizing:border-box;width:100%;max-width:400px;min-height:100vh;margin:0 auto;padding:40px 20px}.join-header{text-align:center;margin-bottom:32px}.join-title{letter-spacing:-.3px;color:var(--color-ink);margin:0;font-size:24px;font-weight:800}.join-label{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--color-muted);margin-bottom:7px;font-size:11px;font-weight:500;display:block}.join-error{color:var(--color-danger);margin:0;font-size:13px}.join-headphones-note{text-align:center;color:var(--color-muted);margin:0;font-size:12px}.listening-modal-overlay{z-index:100;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.listening-modal{background-color:var(--color-panel);border:.5px solid var(--color-hairline);text-align:center;border-radius:12px;flex-direction:column;gap:16px;width:90%;max-width:320px;padding:28px 24px;display:flex}.listening-modal-text{color:var(--color-ink);font-size:17px;font-weight:600}.listening-modal-btn{background-color:var(--color-danger-solid);width:100%;color:var(--color-ink);cursor:pointer;border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:500}.listening-container{background-color:var(--color-bg);box-sizing:border-box;flex-direction:column;gap:20px;width:100%;max-width:600px;min-height:100vh;margin:0 auto;padding:24px 20px;font-family:Manrope,Arial,sans-serif;display:flex}.listening-status-wrap{align-items:center;gap:8px;display:flex}.listening-dot{border-radius:50%;width:10px;height:10px}.listening-dot.connected{background-color:var(--color-live)}.listening-dot.disconnected{background-color:var(--color-muted)}.listening-status-text{color:var(--color-ink-2);font-size:14px;font-weight:500}.listening-text-box{background-color:var(--color-panel);border:.5px solid var(--color-hairline);border-radius:12px;flex:1;max-height:70vh;padding:20px;overflow-y:auto}.listening-text-label{letter-spacing:.06em;color:var(--color-muted);margin-bottom:12px;font-size:10px;font-weight:500}.listening-text-content{color:var(--color-ink);font-size:18px;line-height:1.6}.listening-leave-btn{background-color:var(--color-danger-solid);width:100%;color:var(--color-ink);cursor:pointer;border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:500}.listening-paused-banner{color:var(--color-bg);background-color:var(--color-paused);border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:12px 16px;font-size:14px;font-weight:600;display:flex}.listening-text-box.paused{opacity:.6}.listening-ended-wrap{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;padding:40px 20px;display:flex}.listening-ended-title{color:var(--color-ink);margin:0;font-size:18px;font-weight:700}.listening-ended-text{color:var(--color-ink-2);margin:0 0 16px;font-size:14px}.rooms-container{box-sizing:border-box;width:100%;max-width:640px;min-height:100vh;margin:0 auto;padding:60px 20px}.rooms-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.rooms-logo-wrap{align-items:center;gap:12px;display:flex}.rooms-logo-box{background-color:var(--color-live);border-radius:8px;flex-shrink:0;width:26px;height:26px}.rooms-title{letter-spacing:-.3px;color:var(--color-ink);margin:0;font-size:20px;font-weight:800}.rooms-subtitle{color:var(--color-muted);margin:2px 0 0;font-size:13px}.rooms-header-actions{gap:8px;display:flex}.rooms-error{color:var(--color-danger);background:var(--color-danger-soft-bg);border:1px solid var(--color-danger-soft-border);border-radius:8px;margin-bottom:12px;padding:10px 14px;font-size:13px}.rooms-empty{color:var(--color-muted);text-align:center;padding:24px 0;font-size:13.5px}.rooms-list{margin:0;padding:0;list-style:none}.room-row{border-bottom:1px solid var(--color-hairline);justify-content:space-between;align-items:center;padding:16px 4px;display:flex}.room-row:last-child{border-bottom:none}.room-info{align-items:center;gap:14px;display:flex}.room-status{text-transform:uppercase;letter-spacing:.4px;background:var(--color-secondary-bg);color:var(--color-muted);border:1px solid var(--color-secondary-border);white-space:nowrap;border-radius:6px;padding:4px 9px;font-size:10.5px;font-weight:600}.room-status--active{color:var(--color-live);background:#3fe08c1f;border-color:#3fe08c4d}.room-status--paused{color:var(--color-paused);background:#ffcf701f;border-color:#ffcf704d}.room-status--ended{background:var(--color-danger-soft-bg);color:var(--color-danger);border-color:var(--color-danger-soft-border)}.room-meta{flex-direction:column;gap:3px;display:flex}.room-id{color:var(--color-ink-2);font-size:13px}.room-created{color:var(--color-muted);font-size:12px}.room-actions{flex-shrink:0;gap:8px;display:flex}.room-actions button,.rooms-header-actions button{cursor:pointer;border:1px solid #0000;border-radius:7px;padding:8px 14px;font-size:12.5px;font-weight:600;transition:background-color .15s,border-color .15s,opacity .15s}.room-actions button:disabled,.rooms-header-actions button:disabled{opacity:.55;cursor:not-allowed}.room-actions button.btn-join{background:var(--color-blue-btn);color:var(--color-white)}.room-actions button.btn-start{background:var(--color-live-btn);color:var(--color-live-btn-ink);border-color:var(--color-live-btn)}.room-actions button.btn-join:hover:not(:disabled){filter:brightness(1.08)}.room-actions button.btn-danger{background:var(--color-danger-soft-bg);color:var(--color-danger-soft-ink);border-color:var(--color-danger-soft-border)}.room-actions button.btn-danger:hover:not(:disabled){background:var(--color-danger-solid);color:var(--color-ink);border-color:var(--color-danger-solid)}.rooms-header-actions button.btn-secondary{background:var(--color-secondary-bg);color:var(--color-secondary-ink);border-color:var(--color-secondary-border)}.rooms-header-actions button.btn-secondary:hover:not(:disabled){border-color:var(--color-live)}.rooms-header-actions button.btn-primary{background:var(--color-live-btn);color:var(--color-live-btn-ink);border-color:var(--color-live-btn)}.rooms-header-actions button.btn-primary:hover:not(:disabled){filter:brightness(1.08)}.rooms-section-title{text-transform:uppercase;letter-spacing:.4px;color:var(--color-muted);margin:24px 4px 10px;font-size:13px;font-weight:700}.rooms-section-title:first-of-type{margin-top:0}.btn-delete-all{border:1px solid var(--color-secondary-border);background:var(--color-secondary-bg);width:fit-content;color:var(--color-secondary-ink);cursor:pointer;border-radius:7px;margin:0 10px 0 auto;padding:6px 12px;font-size:13px;font-weight:600;display:block}.sender-container{box-sizing:border-box;width:100%;max-width:400px;min-height:100vh;margin:0 auto;padding:40px 20px}.sender-header{text-align:center;margin-bottom:32px}.sender-title{letter-spacing:-.3px;color:var(--color-ink);margin:0 0 4px;font-size:24px;font-weight:800}.sender-subtitle{color:var(--color-muted);margin:0;font-size:13.5px}.sender-label{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--color-muted);font-size:11px;font-weight:500}.sender-error{color:var(--color-danger);margin:0;font-size:13px}.sender-logout-btn{margin-top:16px}