:root{color-scheme:light;--canvas:#f7f8fb;--toolbar:#f1f3f8;--surface:#fff;--surface-hover:#f4f5f7;--text:#242424;--muted:#696969;--faint:#919191;--border:#dedfe2;--accent:#0067c0;--accent-soft:#e6f1fa;--on-accent:#fff;--shadow:0 18px 60px #17264026;--success:#168324}
:root[data-theme=dark]{color-scheme:dark;--canvas:#202020;--toolbar:#202020;--surface:#272727;--surface-hover:#303030;--text:#f3f3f3;--muted:#bcbcbc;--faint:#979797;--border:#3c3c3c;--accent:#5acafa;--accent-soft:#233b48;--on-accent:#092736;--shadow:0 18px 60px #0008;--success:#71cc61}
*{box-sizing:border-box}html,body{margin:0;min-width:0;width:100%;min-height:100%;font-family:"Segoe UI","Microsoft YaHei UI","Microsoft YaHei",sans-serif;font-size:14px;color:var(--text);background:var(--canvas)}body{cursor:auto}button,select,input,textarea{font:inherit;color:inherit}button,select{border:1px solid var(--border);border-radius:5px;background:var(--surface);min-height:34px}button{padding:6px 12px;cursor:pointer;white-space:nowrap}button:hover:not(:disabled),select:hover:not(:disabled){background:var(--surface-hover)}button:active:not(:disabled){transform:translateY(1px)}button:disabled,select:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}select{padding:5px 28px 5px 11px;max-width:100%;cursor:pointer}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button svg{vertical-align:middle}[hidden]{display:none!important}.app{width:100%;max-width:1680px;margin:auto;min-height:760px}.titlebar{height:35px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;background:var(--toolbar);font-size:12px}.app-name{display:flex;align-items:center;gap:7px}.app-name img{object-fit:contain}.version{color:var(--muted);font-size:11px}.demo-label{color:var(--muted);display:flex;align-items:center;gap:6px;font-size:11px}.demo-dot{width:5px;height:5px;background:var(--accent);border-radius:50%}.toolbar {
  display:grid;
  grid-template-areas:"new modes divider input type engine pin space settings";
  grid-template-columns:66px 58px 1px 26px 64px minmax(104px,150px) 26px minmax(0,1fr) 26px;
  align-items:center; gap:5px; padding:10px 12px;
  background:var(--toolbar); border-bottom:1px solid var(--border);
  min-height:53px; flex-shrink:0;
}
.toolbar > * { min-width:0; margin:0; }
.toolbar #new-button { grid-area:new; width:100%; height:32px; min-height:32px; padding:3px 6px; font-size:13px; gap:3px; justify-content:center; }
.toolbar .plus { font-size:20px; }
.toolbar .mode-switch { grid-area:modes; height:32px; width:100%; }
.toolbar .mode-switch .icon-button { flex:1; width:26px; min-width:0; height:28px; min-height:28px; padding:3px; }
.toolbar .mode-switch .active:after { left:6px; right:6px; }
.toolbar svg { width:18px; height:18px; }
.toolbar .translate-glyph { font-size:14px; }
.toolbar .text-glyph { font-size:21px; }
.toolbar .toolbar-divider { grid-area:divider; width:1px; height:23px; margin:0; }
.toolbar #input-button { grid-area:input; }
.toolbar #recognition-type { grid-area:type; }
.toolbar #engine { grid-area:engine; }
.toolbar #pin-button { grid-area:pin; }
.toolbar #settings-button { grid-area:settings; margin:0; }
.toolbar > .icon-button { width:26px; height:32px; min-width:0; min-height:32px; padding:3px; }
.toolbar #recognition-type, .toolbar #engine { width:100%; height:32px; min-height:32px; min-width:0; font-size:13px; padding:4px 3px 4px 7px; }
.new-button{display:flex;align-items:center;gap:5px;font-size:15px;padding:4px 12px}.plus{font-size:24px;font-weight:300;line-height:24px}.mode-switch{display:flex;background:var(--surface-hover);border:1px solid var(--border);border-radius:5px;padding:1px}.icon-button{display:inline-flex;align-items:center;justify-content:center;padding:6px;width:35px;min-width:35px;border-color:transparent;background:transparent;font-size:22px;line-height:20px;position:relative}.mode-switch .icon-button{height:32px;min-height:32px;width:35px}.mode-switch .active{background:var(--surface)}.mode-switch .active:after{content:"";position:absolute;bottom:1px;left:10px;right:10px;height:3px;background:var(--accent);border-radius:2px}.translate-glyph{font-size:16px;position:relative;display:inline-flex;align-items:center;font-weight:500}.translate-glyph span{font-size:11px;margin-left:-3px;margin-top:8px}.toolbar-divider{height:27px;width:1px;background:var(--border);margin:0 2px}.text-glyph{font:24px Georgia,serif;color:var(--muted);line-height:1}.settings-button{margin-left:auto}.icon-button[aria-pressed=true]:not(.mode-switch .icon-button),.settings-button.active{background:var(--accent-soft);color:var(--accent)}#recognition-type{width:83px}#engine{width:148px}.workspace{padding:16px 24px 12px}.example-strip{display:flex;align-items:center;gap:13px;margin-bottom:17px;min-height:33px}.example-caption{font-size:12px;color:var(--muted)}.example-buttons{display:flex;gap:5px}.example-button{font-size:12px;min-height:28px;padding:4px 10px;border-color:transparent;background:transparent;color:var(--muted)}.example-button.active{color:var(--accent);background:var(--accent-soft)}.reset-button{margin-left:auto}.quiet-button{border:0;background:transparent;color:var(--muted);padding:4px 7px;font-size:12px;min-height:28px}.content-tabs{display:none;gap:7px;margin:0 0 13px}.content-tab{border-color:transparent;background:transparent;color:var(--muted);padding:7px 12px}.content-tab.active{background:var(--surface);border-color:var(--border);color:var(--accent)}.text-panels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}.text-panel{min-width:0;display:flex;flex-direction:column;height:524px;border:1px solid var(--border);border-radius:9px;background:var(--surface);overflow:hidden}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 17px;border-bottom:1px solid var(--border);flex-shrink:0;min-height:61px}.panel-heading h1,.panel-heading h2{margin:0;display:flex;gap:11px;align-items:center;font-size:17px;font-weight:600}.panel-heading select{font-size:14px;min-width:115px}.panel-heading .text-glyph{font-size:22px}.panel-heading .translate-glyph{color:var(--muted)}textarea{display:block;resize:none;border:0;border-radius:0;background:transparent;line-height:1.78;font-size:15px;width:100%;min-height:0;padding:17px 18px;flex:1;tab-size:12;scrollbar-color:var(--border) transparent}textarea:focus-visible{outline-offset:-3px}textarea:disabled{opacity:1;color:var(--muted)}textarea.monospace{font-family:Consolas,"Cascadia Code","Microsoft YaHei",monospace;font-size:14px;tab-size:9;line-height:1.9}.panel-footer{display:flex;align-items:center;gap:9px;border-top:1px solid var(--border);padding:9px 13px;min-height:52px;flex-shrink:0}.character-count{font-size:11px;color:var(--faint);margin-right:auto}.clear-button{font-size:23px;color:var(--muted);width:28px;min-width:28px}.copy-button{border:0;display:flex;align-items:center;gap:7px;padding:5px 7px;background:transparent}.copy-button svg{width:18px;height:18px}.translation-footer{gap:6px;padding-left:11px;padding-right:9px}.translation-footer select{max-width:105px;min-width:0;flex-shrink:1}.primary-button{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.primary-button:hover:not(:disabled){background:var(--accent);filter:brightness(1.06)}.translate-button{margin-left:auto;padding:5px 11px;display:flex;align-items:center;gap:7px}.translate-button>span{font-size:19px;line-height:20px}.status-row{display:flex;align-items:center;gap:9px;min-height:38px;margin-top:8px}.status-dot{width:6px;height:6px;flex-shrink:0;border-radius:50%;background:var(--success)}.status-dot.waiting{width:11px;height:11px;border:2px solid var(--border);border-top-color:var(--accent);background:transparent;animation:spin .8s linear infinite}.status-dot.neutral{background:var(--faint)}.status-text{font-size:12px;color:var(--muted);line-height:1.6}.cancel-task{margin-left:auto;padding:4px 11px;min-height:29px;font-size:12px}.demo-note{font-size:11px;color:var(--faint);line-height:1.5;margin:3px 0 0 15px}.stale-note{font-size:11px;color:var(--muted);margin:0;padding:7px 17px;background:var(--accent-soft)}
.settings-view{padding:26px 24px 18px;min-height:654px;display:flex;flex-direction:column}.settings-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.settings-tabs{display:flex;gap:14px;min-width:0}.settings-tab{border:0;background:transparent;color:var(--muted);position:relative;border-radius:0;font-size:15px;padding:8px 7px 12px;min-width:38px}.settings-tab.active{color:var(--text);font-weight:600}.settings-tab.active:after{content:"";position:absolute;bottom:1px;height:3px;background:var(--accent);width:23px;left:50%;transform:translateX(-50%);border-radius:2px}.back-button{padding:4px 10px;display:flex;align-items:center;gap:7px;font-size:16px}.settings-body{flex:1;min-height:444px}.setting-card{border:1px solid var(--border);background:var(--surface);border-radius:9px;padding:21px 19px;margin-bottom:16px;font-size:15px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:0}.setting-row>div{min-width:0}.setting-card label{font-size:15px;font-weight:500}.setting-card p{font-size:12px;color:var(--muted);line-height:1.8;margin:5px 0 0}.setting-card h2{font-size:17px;font-weight:600;margin:0 0 10px}.setting-row select{width:178px;flex-shrink:0}.setting-row .switch{appearance:none;-webkit-appearance:none;width:40px;min-width:40px;height:21px;border-radius:14px;border:1px solid var(--muted);background:var(--canvas);margin:0;cursor:pointer;position:relative}.switch:before{content:"";display:block;width:12px;height:12px;position:absolute;left:3px;top:3px;background:var(--muted);border-radius:50%;transition:transform .15s}.switch:checked{background:var(--accent);border-color:var(--accent)}.switch:checked:before{background:var(--on-accent);transform:translateX(19px)}.divided{margin-top:16px;padding-top:17px;border-top:1px solid var(--border)}.settings-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;border-top:1px solid var(--border);padding-top:15px;margin-top:19px}.settings-footer>span{margin-right:auto;color:var(--faint);font-size:11px}.settings-footer>button{min-width:76px}.readonly-setting{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--border);padding:18px 0 7px;margin-top:22px;font-size:13px}.readonly-setting>span{color:var(--muted)}.readonly-setting>strong{font-weight:400;text-align:right}.setting-card .subtle{color:var(--faint);font-size:11px;margin-top:22px}.shortcut-list>div{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px 0;border-bottom:1px solid var(--border)}.shortcut-list>div:first-child{padding-top:0}.shortcut-list>div:last-child{padding-bottom:0;border:0}kbd{font:13px "Segoe UI",sans-serif;background:var(--canvas);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:5px 12px;min-width:48px;text-align:center}.settings-help{font-size:12px;line-height:1.9;color:var(--muted);margin:16px 5px}.about-card{text-align:center;padding-top:24px}.about-card>img{margin-bottom:12px;border-radius:12px}.about-card h2{margin-bottom:2px;font-size:21px}.about-details{margin:23px auto 0;max-width:300px}.about-details>div{display:flex;justify-content:space-between;gap:15px;margin:10px 0;font-size:13px}.about-details span{color:var(--muted)}.about-details strong{font-weight:400}
dialog{width:min(670px,calc(100% - 28px));max-height:calc(100% - 28px);padding:22px;border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow);background:var(--canvas);color:var(--text);overflow-y:auto}dialog::backdrop{background:#0c111566;backdrop-filter:blur(2px)}.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:17px}.dialog-heading h2{font-size:18px;margin:0 0 7px;font-weight:600}.dialog-heading p{font-size:12px;line-height:1.6;color:var(--muted);margin:0}.dialog-heading .icon-button{margin-top:-5px}.capture-samples{display:flex;gap:7px;margin-bottom:17px}.capture-samples button{font-size:12px;min-height:30px;padding:5px 12px}.capture-samples button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.capture-stage{background:var(--toolbar);border:1px solid var(--border);padding:24px 20px 20px;border-radius:6px;overflow:hidden}.capture-frame{position:relative;border:1px solid var(--accent);background:var(--surface);box-shadow:0 0 0 8px #00000008}.capture-tag{position:absolute;top:-19px;left:-1px;font-size:10px;line-height:18px;background:var(--accent);color:var(--on-accent);padding:0 7px;border-radius:3px 3px 0 0}.capture-frame pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.9 "Segoe UI","Microsoft YaHei",sans-serif;margin:0;padding:18px;min-height:160px;max-height:260px;overflow-y:auto;tab-size:7}.frame-corner{position:absolute;width:6px;height:6px;background:var(--accent);border:1px solid var(--surface)}.top-left{top:-3px;left:-3px}.top-right{top:-3px;right:-3px}.bottom-left{bottom:-3px;left:-3px}.bottom-right{bottom:-3px;right:-3px}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:20px}.dialog-footer>span{font-size:11px;color:var(--muted);margin-right:auto}.toast{position:fixed;z-index:10;bottom:22px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;border:1px solid var(--border);border-radius:6px;background:var(--surface);box-shadow:0 4px 22px #0002;padding:11px 17px;font-size:12px;line-height:1.6;text-align:center;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:820px){.text-panels{grid-template-columns:minmax(0,1fr)}.content-tabs{display:flex}.text-panel{display:none;height:488px}.text-panel.selected{display:flex}.workspace{padding-top:14px}.app{min-height:760px}.panel-heading{padding:12px 17px}.text-panel textarea{font-size:15px}.example-strip{margin-bottom:13px}.translation-footer select{max-width:135px}.settings-tabs{gap:13px}}
@media(max-width:520px){.titlebar{padding:0 13px;height:33px}.workspace{padding:13px 13px 10px}.example-strip{gap:6px;margin-bottom:11px}.example-caption{font-size:11px}.example-buttons{gap:0}.example-button{padding:4px 7px;font-size:12px}.reset-button{font-size:11px;padding:4px 2px}.content-tabs{margin-bottom:11px}.text-panel{height:470px}.panel-heading{padding:11px 13px;min-height:56px}.panel-heading h1,.panel-heading h2{font-size:16px}.panel-heading select{font-size:13px;min-width:105px}.text-panel textarea{padding:15px 14px;font-size:14px;line-height:1.85}.panel-footer{padding:8px 10px;min-height:51px}.copy-button{font-size:13px}.status-row{gap:7px;align-items:center;min-height:37px}.status-text{font-size:11px}.status-row .quiet-button{font-size:11px;padding:4px}.demo-note{margin-left:13px;font-size:10px}.settings-view{padding:19px 13px 15px;min-height:620px}.settings-navigation{gap:6px;margin-bottom:16px}.settings-tabs{gap:5px;flex:1;justify-content:space-between}.settings-tab{font-size:13px;padding:8px 4px 12px;min-width:32px}.back-button{font-size:15px;min-width:33px;padding:5px}.back-button>span{display:none}.setting-card{padding:18px 15px;font-size:13px;margin-bottom:13px}.setting-card label{font-size:14px}.setting-row{gap:14px}.setting-row select{width:138px;font-size:13px}.setting-card p{font-size:11px}.settings-footer{gap:7px;flex-wrap:wrap}.settings-footer>span{font-size:10px}.settings-footer>button{min-width:66px;padding:5px 9px;font-size:13px}.settings-body{min-height:417px}.readonly-setting{font-size:12px}.shortcut-list>div{font-size:13px}.dialog-heading h2{font-size:16px}.dialog-heading p{font-size:11px}dialog{padding:18px 15px}.capture-stage{padding:23px 12px 12px}.capture-frame pre{padding:13px;font-size:12px;max-height:250px}.dialog-footer{flex-wrap:wrap;gap:7px;margin-top:14px}.dialog-footer>span{flex:1 0 100%;font-size:10px;margin-bottom:2px}.dialog-footer>button{font-size:12px}.app{min-height:790px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:0s!important;transition:none!important}}

/* Fit the workspace to the iframe; only the text editors scroll. */
html, body { height:100%; min-height:0; overflow:hidden; }
.app { display:flex; flex-direction:column; height:100dvh; min-height:0; }
.titlebar { flex-shrink:0; height:31px; padding-inline:13px; font-size:11px; }
.workspace { display:flex; flex-direction:column; flex:1; min-height:0; padding:12px 16px 10px; }
.example-strip { flex-shrink:0; gap:10px; margin-bottom:10px; }
.content-tabs { flex-shrink:0; margin-bottom:10px; }
.text-panels { flex:1; min-height:0; }
.text-panel { height:auto; min-height:0; }
.panel-heading { min-height:52px; padding:10px 13px; }
.panel-heading h1, .panel-heading h2 { font-size:15px; gap:8px; }
.panel-heading select { font-size:13px; }
.text-panel textarea { font-size:14px; line-height:1.75; padding:14px; }
.status-row, .demo-note { flex-shrink:0; }
.status-text { font-size:11px; }
.settings-view { flex:1; min-height:0; overflow:auto; scrollbar-width:none; padding:20px 16px 14px; }
.settings-view::-webkit-scrollbar { display:none; }
.settings-body { flex:1 0 auto; min-height:0; }
.settings-footer { flex-shrink:0; }
@media (max-width:600px) {
  .toolbar {
    grid-template-areas:"new modes input type engine pin settings";
    grid-template-columns:62px 52px 24px 60px minmax(92px,1fr) 24px 24px;
    gap:4px; padding:8px; min-height:49px;
  }
  .toolbar .toolbar-divider { display:none; }
  .toolbar > .icon-button { width:24px; }
  .workspace { padding:10px 12px 8px; }
}
@media (max-width:440px) {
  .toolbar {
    grid-template-columns:24px 44px 22px 52px minmax(76px,1fr) 22px 22px;
    gap:3px; padding:7px 6px; min-height:43px;
  }
  .toolbar #new-button { font-size:0; gap:0; padding:2px; }
  .toolbar #new-button, .toolbar > .icon-button, .toolbar #recognition-type, .toolbar #engine, .toolbar .mode-switch { height:28px; min-height:28px; }
  .toolbar > .icon-button { width:22px; padding:2px; }
  .toolbar .mode-switch .icon-button { height:24px; min-height:24px; padding:2px; }
  .toolbar svg { width:16px; height:16px; }
  .toolbar .translate-glyph { font-size:12px; }
  .toolbar .translate-glyph span { font-size:9px; }
  .toolbar .text-glyph { font-size:19px; }
  .toolbar #recognition-type, .toolbar #engine { font-size:11px; padding:3px 0 3px 4px; }
  .example-caption { display:none; }
  .example-strip { gap:3px; }
  .example-button { padding-inline:5px; }
  .text-panel textarea { font-size:13px; }
}
@media (max-width:300px) {
  .toolbar { grid-template-columns:20px 36px 18px 44px minmax(66px,1fr) 18px 18px; gap:2px; }
  .toolbar > .icon-button { width:18px; padding:0; }
  .toolbar .mode-switch .icon-button { padding:0; }
  .toolbar svg { width:14px; height:14px; }
  .toolbar .translate-glyph { font-size:10px; }
  .toolbar #recognition-type, .toolbar #engine { font-size:10px; padding-left:2px; }
}