/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */:root{--brand-primary: #699fca;--brand-secondary: #901935;--brand-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));--background: #fdfdfd;--surface: #ffffff;--text: #202124;--text-light: #5f6368;--border-stroke: #e0e0e0;--gray-100: #f5f5f5;--accent-blue: #0b57d0;--accent-green: #188038;--accent-red: #d93025;--radius: 16px;font-family:Google Sans Display,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{background:var(--background);color:var(--text);-webkit-font-smoothing:antialiased}h1,h2,h3,h4{font-weight:500}li{list-style:none}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}.material-symbols-outlined{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24;line-height:1}.app{display:flex;flex-direction:column;height:100%}.app-header{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--brand-gradient);color:#fff;flex-shrink:0;box-shadow:0 2px 12px #0000001f;z-index:10}.header-left{display:flex;align-items:center;gap:14px}.logo{width:44px;height:44px;border-radius:50%;background:#fff}.header-text h1{font-size:20px}.header-text p{font-size:13px;color:#ffffffd9}.header-right{display:flex;align-items:center;gap:12px}.session-timer{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;font-size:14px;background:#ffffff26;padding:5px 10px;border-radius:99px}.session-timer .material-symbols-outlined{font-size:18px}.status-dot{width:10px;height:10px;border-radius:50%;background:#ffffff80}.status-dot.connected{background:#34d399;box-shadow:0 0 0 4px #34d3994d}.status-dot.connecting{background:#fbbf24}.status-dot.reconnecting{background:#fb923c;animation:pulse-dot 1s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.35}}.icon-button{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;color:#fff;background:transparent;transition:background .2s}.icon-button:hover{background:#ffffff26}.icon-button .material-symbols-outlined{font-size:26px}.main-area{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}.transcription-container{position:absolute;top:0;right:0;left:0;bottom:150px;display:flex;justify-content:center}.transcription-inner{width:100%;max-width:1100px;display:flex;flex-direction:column;min-height:0;padding:18px 24px 0}.system-banner{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-shrink:0;background:#e8f0fe;border:1px solid #aecbfa;color:#174ea6;padding:10px 16px;border-radius:12px;font-size:14px;font-weight:500}.system-banner .material-symbols-outlined{font-size:20px}.system-banner.hymn{background:#fef7e0;border-color:#fdd663;color:#7a5b00}.transcription-split{width:100%;padding:0 0 18px;flex:1;display:grid;grid-template-columns:1fr 1fr;gap:18px;min-height:0}.pane{display:flex;flex-direction:column;min-height:0;background:var(--surface);border:1px solid var(--border-stroke);border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 10px #0000000a}.pane-header{display:flex;align-items:center;gap:8px;padding:12px 18px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--border-stroke);flex-shrink:0}.pane-header .material-symbols-outlined{font-size:18px}.pane.translation .pane-header{color:var(--brand-secondary);background:color-mix(in srgb,var(--brand-secondary) 5%,transparent)}.pane.source .pane-header{color:var(--accent-blue);background:color-mix(in srgb,var(--accent-blue) 5%,transparent)}.pane-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}.line{white-space:pre-wrap;overflow-wrap:break-word;line-height:1.5}.pane.translation .line{font-size:1.4rem;color:var(--text);font-weight:500}.pane.source .line{font-size:1.05rem;color:var(--text-light)}.line.interim{opacity:.55}@media(max-width:720px){.transcription-split{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.pane.translation .line{font-size:1.2rem}}.welcome{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:24px;color:var(--text-light)}.welcome-icon{font-size:64px;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}.welcome h2{color:var(--text);font-size:28px}.welcome p{font-size:16px}.welcome-steps{text-align:left;max-width:460px;line-height:1.9;margin-top:10px}.welcome-steps li{list-style:decimal inside}.control-tray{position:absolute;left:50%;bottom:22px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;width:max-content;max-width:92vw;z-index:12}.control-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border-stroke);border-radius:99px;padding:10px 14px;box-shadow:0 6px 22px #0000001f}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 28px;border-radius:99px;background:var(--brand-primary);color:#fff;font-size:16px;font-weight:600;transition:background .2s,box-shadow .2s,transform .05s}.primary-button:hover{box-shadow:0 0 18px 3px color-mix(in srgb,var(--brand-primary) 35%,transparent)}.primary-button:active{transform:translateY(1px)}.primary-button.connected{background:var(--brand-secondary)}.primary-button.connected:hover{box-shadow:0 0 18px 3px color-mix(in srgb,var(--brand-secondary) 35%,transparent)}.primary-button.connecting{background:var(--gray-100);color:var(--text-light)}.primary-button.reconnecting{background:#fef3c7;color:#92400e}.primary-button:disabled{cursor:default}.primary-button .material-symbols-outlined{font-size:22px}.tray-icon-button{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--border-stroke);background:var(--surface);color:var(--text-light);transition:all .2s}.tray-icon-button:hover{color:var(--text);background:var(--gray-100);transform:translateY(-1px)}.tray-secondary{display:flex;justify-content:center}.original-volume{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border-stroke);border-radius:99px;padding:6px 16px 6px 6px;box-shadow:0 4px 16px #0000001a}.original-volume input[type=range]{width:160px}.original-volume .orig-label{color:var(--text-light);font-size:18px}.meters{display:flex;flex-direction:column;gap:6px;width:96px}.meter{display:flex;align-items:center;gap:6px;color:var(--text-light)}.meter .material-symbols-outlined{font-size:18px}.meter-bar{flex:1;height:6px;background:var(--gray-100);border-radius:4px;overflow:hidden}.meter-fill{height:100%;width:0;transition:width .08s linear}.meter-fill.in{background:var(--brand-secondary)}.meter-fill.out{background:var(--brand-primary)}.error-banner{display:flex;align-items:center;gap:10px;max-width:560px;background:#fce8e6;border:1px solid #f3b9b3;color:#a50e0e;padding:10px 14px;border-radius:12px;font-size:14px;box-shadow:0 4px 14px #0000001a}.error-banner>span:nth-child(2){flex:1}.error-banner .icon-button{color:#a50e0e;width:32px;height:32px}.error-banner .icon-button .material-symbols-outlined{font-size:20px}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;opacity:0;pointer-events:none;transition:opacity .2s;z-index:20}.scrim.open{opacity:1;pointer-events:auto}.sidebar{position:fixed;top:0;right:0;height:100%;width:380px;max-width:92vw;background:var(--background);border-left:1px solid var(--border-stroke);transform:translate(100%);transition:transform .28s ease;z-index:21;display:flex;flex-direction:column;box-shadow:-6px 0 26px #00000014}.sidebar.open{transform:translate(0)}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border-stroke)}.sidebar-header h3{font-size:19px}.sidebar-header .icon-button{color:var(--text-light)}.sidebar-content{padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:22px;flex:1}.sidebar fieldset{border:none;display:flex;flex-direction:column;gap:22px}.sidebar fieldset:disabled{opacity:.55}.field{display:flex;flex-direction:column;gap:8px}.field>span{font-size:14px;font-weight:600}.field small,.field-row small{display:block;font-weight:400;color:var(--text-light);font-size:12px;margin-top:3px;line-height:1.4}.field small.warn{color:#b06000}.field-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.field-row>span{font-size:14px;font-weight:600}select{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--surface);color:var(--text);border:1px solid var(--border-stroke);border-radius:8px;padding:11px 30px 11px 12px;font-size:14px;cursor:pointer;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2380868b' 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-repeat:no-repeat;background-position:right 10px center;background-size:1em}select:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-primary) 20%,transparent)}input[type=range]{width:100%;accent-color:var(--brand-primary)}.glossary-editor{width:100%;resize:vertical;font-family:Roboto Mono,monospace;font-size:12.5px;border:1px solid var(--border-stroke);border-radius:8px;padding:10px 12px;color:var(--text)}.glossary-editor:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-primary) 20%,transparent)}input[type=checkbox]{width:20px;height:20px;accent-color:var(--brand-primary);flex-shrink:0}.segmented{display:flex;gap:10px}.segmented button{flex:1;display:inline-flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:12px;border:1px solid var(--border-stroke);background:var(--surface);color:var(--text-light);font-size:13px;font-weight:500;transition:all .2s}.segmented button:hover{background:var(--gray-100)}.segmented button.active{border-color:var(--brand-primary);color:var(--brand-primary);background:color-mix(in srgb,var(--brand-primary) 8%,transparent)}.segmented .material-symbols-outlined{font-size:24px}.sidebar-footer{padding:16px 20px;border-top:1px solid var(--border-stroke);color:var(--text-light);font-size:12px;text-align:center}.password-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:var(--brand-gradient);padding:20px}.password-box{background:var(--surface);border-radius:20px;padding:36px;width:380px;max-width:100%;text-align:center;box-shadow:0 20px 60px #0000004d}.password-logo{width:72px;height:72px;border-radius:50%}.password-box h2{margin:16px 0 4px;font-size:24px}.password-box p{color:var(--text-light);margin-bottom:20px;font-size:14px}.password-box form{display:flex;flex-direction:column;gap:12px}.password-box input{border:1px solid var(--border-stroke);border-radius:10px;padding:13px;font-size:15px;text-align:center}.password-box input:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-primary) 20%,transparent)}.password-box button[type=submit]{height:48px;border-radius:10px;background:var(--brand-primary);color:#fff;font-weight:600;font-size:15px;transition:background .2s}.password-box button[type=submit]:hover:not(:disabled){background:color-mix(in srgb,var(--brand-primary) 88%,black)}.password-box button[disabled]{opacity:.6;cursor:default}.password-error{color:var(--accent-red);font-size:13px;margin-top:12px}@media(max-width:560px){.meters{display:none}.subtitle.translation .subtitle-text{font-size:1.3rem}.header-text p{display:none}}
