:root{--green:#52AE30;--green-dark:#3D8A22;--green-light:#EEF7E9;--orange:#FF802B;--orange-dark:#E56B1A;--white:#FFFFFF;--bg:#F3F3F3;--border:#E8E8E8;--text:#1A1A1A;--text-2:#4A4A4A;--text-muted:#888888;--error:#C0392B;--warning:#D4710A;--shadow:0 2px 16px rgba(0,0,0,0.07);--shadow-sm:0 1px 4px rgba(0,0,0,0.06);--r-card:16px;--r-btn:100px;--font:"Source Sans 3",system-ui,sans-serif;--bg-top:#FBFBF9;--grid-line:rgba(0,0,0,0.025);--surface-glass:rgba(255,255,255,0.82);--focus-bg:#F5F5F5;--danger-bg:#FEE2E2;--warn-bg:#FFF8E6;--warn-border:#F0D060;--hl:#FEF9C3;--hl-strong:#FDE68A;color-scheme:light}[data-theme=dark]{--green:#63C23F;--green-dark:#52AE30;--green-light:#20301A;--orange:#FF8C42;--orange-dark:#E56B1A;--white:#1B1E20;--bg:#121415;--border:#2C3033;--text:#EAEAEA;--text-2:#BFC3C6;--text-muted:#868C90;--error:#F87171;--warning:#FBBF24;--shadow:0 2px 18px rgba(0,0,0,0.55);--shadow-sm:0 1px 4px rgba(0,0,0,0.45);--bg-top:#17191B;--grid-line:rgba(255,255,255,0.03);--surface-glass:rgba(28,31,33,0.82);--focus-bg:#24282A;--danger-bg:rgba(248,113,113,0.16);--warn-bg:rgba(251,191,36,0.12);--warn-border:rgba(251,191,36,0.35);--hl:rgba(250,204,21,0.28);--hl-strong:rgba(250,204,21,0.48);color-scheme:dark}*{margin:0;padding:0;box-sizing:border-box}body,html{background:var(--bg)}body{color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5;min-height:100vh}a{color:inherit}.topbar{background:var(--white);border-bottom:1px solid var(--border);padding:0 32px;height:68px;justify-content:space-between;position:-webkit-sticky;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm)}.otp-logo,.topbar{display:flex;align-items:center}.otp-logo{gap:10px;text-decoration:none;cursor:pointer}.otp-logo img{height:40px;width:auto;display:block}.otp-wordmark{font-size:22px;font-weight:700;font-style:italic;color:var(--green);letter-spacing:-.5px;line-height:1}.topbar-right{display:flex;align-items:center;gap:12px}.topbar-app{font-size:13px;color:var(--text-2);font-weight:500}.topbar-back{font-size:12px;font-weight:700;font-family:var(--font);color:var(--text-muted);background:none;border:1.5px solid var(--border);border-radius:var(--r-btn);padding:6px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:border-color .15s,color .15s}.topbar-back:hover{border-color:var(--green);color:var(--green)}.btn-pill-outline{font-size:12px;font-weight:700;font-family:var(--font);color:var(--green);background:none;border:2px solid var(--green);border-radius:var(--r-btn);padding:6px 18px;cursor:pointer;letter-spacing:.1px;transition:background .15s,color .15s}.btn-pill-outline:hover{background:var(--green);color:white}.status-strip{display:flex;align-items:center;gap:10px;padding:0 32px;height:36px;background:var(--white);border-bottom:1px solid var(--border);position:-webkit-sticky;position:sticky;top:68px;z-index:99}.status-dot{width:7px;height:7px;border-radius:50%;background:#CCCCCC;flex-shrink:0;transition:background .3s}.status-dot.loading{background:var(--warning);animation:pulse 1s infinite}.status-dot.ready{background:var(--green)}.status-dot.error,.status-dot.rec{background:var(--error)}.status-dot.rec{animation:pulse .6s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.status-text{font-size:12px;color:var(--text-muted)}.status-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex-shrink:0}.save-flash{font-size:11px;font-weight:600;color:var(--green);opacity:0;transition:opacity .5s;pointer-events:none;white-space:nowrap}.save-flash.show{opacity:1;transition:none}.progress-pill{width:120px;height:5px;background:var(--border);border-radius:100px;overflow:hidden}.progress-fill{height:100%;background:var(--green);width:0;transition:width .3s;border-radius:100px}.page{max-width:780px;margin:0 auto;padding:28px 20px 60px;transition:max-width .3s ease}.page.wide{max-width:1460px}.layout-grid{display:grid;grid-template-columns:1fr;grid-gap:0;gap:0;align-items:start}.page.wide .layout-grid{grid-template-columns:340px minmax(0,1fr);gap:20px}@media (max-width:900px){.page.wide{max-width:780px}.page.wide .layout-grid{grid-template-columns:1fr;gap:0}}.card{background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow);padding:24px;margin-bottom:16px;border:1px solid var(--border);transition:box-shadow .25s ease,border-color .25s ease}.card:hover{box-shadow:0 6px 26px rgba(0,0,0,.09)}.card-result:hover{box-shadow:var(--shadow)}.btn-cache-load,.btn-copy,.btn-diar,.btn-icon,.btn-outline,.btn-primary,.btn-restore,.chk-toggle{transition:background .15s,color .15s,box-shadow .15s,transform .08s ease}.btn-cache-load:active,.btn-copy:active,.btn-diar:active:not(:disabled),.btn-icon:active:not(:disabled),.btn-restore:active,.chk-toggle:active{transform:scale(.94)}.card-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:18px;display:flex;align-items:center;gap:9px}.card-title-icon{color:var(--green);flex-shrink:0;display:inline-flex}.field-label{font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:6px;display:block}.file-row{margin-bottom:14px}input[type=file]{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:9px 12px;color:var(--text);font-family:var(--font);font-size:13px;cursor:pointer;transition:border-color .15s;display:block}input[type=file]:focus,input[type=file]:hover{outline:none;border-color:var(--green)}input[type=file]::-webkit-file-upload-button{background:var(--green);border:none;color:white;font-family:var(--font);font-size:12px;font-weight:700;padding:5px 12px;border-radius:100px;cursor:pointer;margin-right:10px}input[type=file]::file-selector-button{background:var(--green);border:none;color:white;font-family:var(--font);font-size:12px;font-weight:700;padding:5px 12px;border-radius:100px;cursor:pointer;margin-right:10px}.file-status{font-size:12px;color:var(--text-muted);margin-top:5px}.file-status.ok{color:var(--green);font-weight:600}.btn-primary{width:100%;padding:12px 24px;background:var(--green);color:white;font-family:var(--font);font-size:14px;font-weight:700;border:none;border-radius:var(--r-btn);cursor:pointer;transition:background .15s,transform .1s,box-shadow .15s;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px}.btn-primary:hover:not(:disabled){background:var(--green-dark);box-shadow:0 4px 12px rgba(82,174,48,.25)}.btn-primary:active:not(:disabled){transform:scale(.99)}.btn-primary:disabled{opacity:.35;cursor:not-allowed}.btn-outline{flex:1 1;padding:12px 20px;background:var(--green);color:white;font-family:var(--font);font-size:14px;font-weight:700;border:2px solid var(--green);border-radius:var(--r-btn);cursor:pointer;transition:background .15s,box-shadow .15s;display:flex;align-items:center;justify-content:center;gap:6px}.btn-outline:hover:not(:disabled){background:var(--green-dark);border-color:var(--green-dark);box-shadow:0 4px 12px rgba(82,174,48,.25)}.btn-outline.recording{border-color:var(--error);color:white;background:var(--error)}.btn-outline:disabled{opacity:.35;cursor:not-allowed}.btn-orange{background:var(--orange)!important;box-shadow:none!important}.btn-orange:hover:not(:disabled){background:var(--orange-dark)!important;box-shadow:0 4px 12px rgba(255,128,43,.3)!important}.upload-zone{display:block;border:2px dashed var(--border);border-radius:12px;padding:28px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:var(--bg)}.upload-zone.dragover,.upload-zone:hover{border-color:var(--green);background:var(--green-light)}.upload-zone input{display:none}.upload-icon{color:var(--text-muted);margin-bottom:10px;display:flex;justify-content:center}.upload-label{font-size:14px;font-weight:600;color:var(--text-2);display:block;margin-bottom:4px}.upload-sub{font-size:12px;color:var(--text-muted)}.loaded-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--green-light);border:1px solid rgba(82,174,48,.25);border-radius:12px}.loaded-icon{color:var(--green);flex-shrink:0}.loaded-name{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.loaded-meta{margin-top:1px}.btn-replace,.loaded-meta{font-size:12px;color:var(--text-muted)}.btn-replace{margin-left:auto;flex-shrink:0;font-weight:600;font-family:var(--font);background:none;border:1.5px solid var(--border);border-radius:var(--r-btn);padding:5px 14px;cursor:pointer;transition:border-color .15s,color .15s}.btn-replace:hover{border-color:var(--text-muted);color:var(--text)}.cache-banner{display:flex;align-items:center;gap:10px;background:var(--green-light);border:1px solid rgba(82,174,48,.2);border-radius:10px;padding:10px 14px;margin-bottom:16px;flex-wrap:wrap}.cache-banner-icon{color:var(--green);flex-shrink:0}.cache-banner-text{font-size:13px;font-weight:600;color:var(--green);flex:1 1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cache-banner-sub{font-size:11px;font-weight:400;color:var(--green);opacity:.75}.cache-banner-actions{display:flex;gap:6px;margin-left:auto;flex-shrink:0}.btn-cache-load{font-size:12px;font-weight:700;padding:5px 14px;border-radius:var(--r-btn);cursor:pointer;font-family:var(--font);background:var(--green);color:white;border:none;transition:background .15s}.btn-cache-load:hover{background:var(--green-dark)}.btn-cache-clear{font-size:12px;font-weight:500;padding:5px 12px;border-radius:var(--r-btn);cursor:pointer;font-family:var(--font);background:none;color:var(--green);border:1.5px solid rgba(82,174,48,.3);transition:background .15s}.btn-cache-clear:hover{background:rgba(82,174,48,.08)}.accordion-toggle{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:16px;border-top:1px solid var(--border);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.accordion-label{font-size:13px;font-weight:600;color:var(--text-muted)}.accordion-chevron{color:var(--text-muted);transition:transform .2s ease;flex-shrink:0}.accordion-toggle.open .accordion-chevron{transform:rotate(180deg)}.accordion-body{overflow:hidden}.settings-controls{display:grid;grid-gap:10px;gap:10px}.settings-row{display:flex;align-items:center;gap:12px}.settings-row-label{font-size:12px;font-weight:600;color:var(--text-muted);width:100px;flex-shrink:0}.settings-val{font-size:13px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;color:var(--green);font-weight:700;width:44px;text-align:right;flex-shrink:0}input[type=range]{flex:1 1;accent-color:var(--green);cursor:pointer}.card-result{display:flex;flex-direction:column}.page.wide .layout-right .card-result{position:-webkit-sticky;position:sticky;top:calc(68px + 36px + 20px);max-height:calc(100vh - 68px - 36px - 40px);overflow:hidden}.page.wide .layout-right .result-text{flex:1 1;overflow-y:auto;min-height:0}@media (max-width:900px){.page.wide .layout-right .card-result{position:static;max-height:none}.page.wide .layout-right .result-text{overflow-y:visible}}.result-text{font-size:15px;color:var(--text);line-height:1.65;min-height:2.4em;white-space:pre-wrap}.result-text.placeholder{color:var(--text-muted);font-style:italic;font-size:14px}.result-footer{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}.metrics{display:flex;gap:18px;flex-wrap:wrap}.metric{font-size:12px;color:var(--text-muted)}.metric strong{font-weight:700;color:var(--green);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.btn-copy{font-size:12px;font-weight:700;color:var(--green);border:1.5px solid rgba(82,174,48,.2);border-radius:var(--r-btn);padding:5px 16px;cursor:pointer;font-family:var(--font);transition:background .15s}.btn-copy,.btn-copy:hover{background:var(--green-light)}.btn-copy:hover{filter:brightness(.97)}[data-theme=dark] .btn-copy:hover{filter:brightness(1.35)}.result-toolbar{gap:5px;flex-wrap:wrap;row-gap:6px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border)}.btn-icon,.result-toolbar{display:flex;align-items:center}.btn-icon{width:30px;height:30px;border:1.5px solid var(--border);background:none;border-radius:8px;cursor:pointer;font-size:14px;color:var(--text-muted);justify-content:center;transition:background .12s,color .12s;font-family:var(--font);flex-shrink:0}.btn-icon:hover:not(:disabled){background:var(--green-light);color:var(--green);border-color:var(--green)}.btn-icon:disabled{opacity:.3;cursor:default}.toolbar-sep{width:1px;height:22px;background:var(--border);margin:0 3px;flex-shrink:0}.toolbar-right{margin-left:auto;display:flex;align-items:center;gap:5px}.export-select{padding:0 8px;background:var(--white)}.chk-toggle,.export-select{font-size:12px;font-family:var(--font);border:1.5px solid var(--border);border-radius:8px;color:var(--text-2);cursor:pointer;height:30px}.chk-toggle{padding:0 12px;background:none;font-weight:600;white-space:nowrap;transition:background .12s,color .12s;flex-shrink:0}.chk-toggle:hover:not(:disabled){background:var(--green-light);color:var(--green);border-color:var(--green)}.chk-toggle.active{background:var(--green);color:white;border-color:var(--green)}.chk-toggle:disabled{opacity:.3;cursor:default}.footer-note{margin-top:24px;padding:16px 20px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);font-size:12px;color:var(--text-muted);line-height:1.6;display:flex;gap:10px;align-items:flex-start}.footer-note a{color:var(--green);text-decoration:none;font-weight:600}.footer-note a:hover{text-decoration:underline}.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:12px;font-size:13px;line-height:1.5;margin-top:12px}.notice.warn{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--text-2)}.notice.info{background:var(--green-light);border:1px solid rgba(82,174,48,.25);color:var(--text-2)}@media (max-width:640px){.topbar{gap:8px}.status-strip,.topbar{padding:0 14px}.topbar-right{gap:8px;min-width:0}.topbar-app{display:none}.otp-wordmark{font-size:19px}.otp-logo img{height:34px}.topbar-back{padding:7px 10px}.topbar-label{display:none}.page{padding:20px 14px 48px}}