[hidden]{display:none!important}
:root{color-scheme:light;--bg:#eaf0f6;--surface:#fff;--surface2:#f4f7fb;--surface3:#edf2f7;--text:#1c2b40;--muted:#758397;--border:#dce4ef;--accent:#2d67cf;--accent-contrast:#fff;--blue:#2468bb;--shadow:0 10px 35px #10294c12;--radius:16px;font-size:16px;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
:root[data-theme=dark]{color-scheme:dark;--bg:#0d1522;--surface:#172235;--surface2:#202e43;--surface3:#273951;--text:#f1f5fc;--muted:#9eaec5;--border:#324159;--accent:#77aaff;--accent-contrast:#12213b;--blue:#83bfff;--shadow:0 10px 35px #0004}
:root[data-accent=green]{--accent:#16866a;--accent-contrast:white}:root[data-theme=dark][data-accent=green]{--accent:#68d5b3;--accent-contrast:#063f31}
:root[data-accent=orange]{--accent:#be701d;--accent-contrast:white}:root[data-theme=dark][data-accent=orange]{--accent:#f8bc78;--accent-contrast:#42290d}
@media(prefers-color-scheme:dark){:root[data-theme=system]{color-scheme:dark;--bg:#0d1522;--surface:#172235;--surface2:#202e43;--surface3:#273951;--text:#f1f5fc;--muted:#9eaec5;--border:#324159;--accent:#77aaff;--accent-contrast:#12213b;--blue:#83bfff;--shadow:0 10px 35px #0004}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{height:100%;background:var(--bg)}body{height:100%;margin:0;color:var(--text);background:var(--bg);line-height:1.42;overflow:hidden}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button,select{touch-action:manipulation}a{color:var(--accent)}h1{font-size:1.2rem;margin:0}h2{font-size:1rem;margin:0 0 11px}p{margin:0}.muted,.subtle{color:var(--muted)}.muted{font-size:.85rem}.subtle{font-size:.69rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.app-shell{height:100dvh;height:var(--app-height,100dvh);min-height:280px;display:flex;flex-direction:column;overflow:hidden;padding-bottom:env(safe-area-inset-bottom,0)}
.topbar{height:58px;min-height:58px;background:var(--surface);padding:0 max(14px,calc((100% - 1140px)/2));display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:7px;flex:0 0 auto;max-width:146px;min-width:0}.brand-caption{min-width:0;line-height:1.1}.brand-caption strong{display:block;font-size:.98rem;letter-spacing:-.03em;font-weight:780}.brand-caption small{display:block;color:var(--muted);font-size:.52rem;white-space:nowrap;margin-top:3px}.brand-mark{width:31px;height:31px;display:inline-flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(145deg,#3c79ea,#2454bd);color:white;flex-shrink:0;border-radius:9px;font-weight:850;font-size:1.22rem}.brand-mark span{position:absolute;bottom:-3px;right:-4px;font-size:.56rem;background:#eef5ff;color:#3168cc;border-radius:5px;padding:0 2px}
.header-right{display:flex;align-items:center;gap:7px}.online-dot{display:block;width:7px;height:7px;border-radius:50%;background:#a7b1c0;flex-shrink:0}.online-dot.good{background:#24b389;box-shadow:0 0 0 3px #29be8d1c}.online-dot.bad{background:#d48264}.toolbar-btn{height:34px;border:1px solid var(--border);background:var(--surface2);border-radius:10px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;font-weight:650;font-size:.73rem;gap:5px}.toolbar-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.exit-btn{background:transparent}
.top-controls{height:52px;min-height:52px;width:min(1136px,100%);margin:0 auto;padding:8px 13px;display:flex;align-items:center;gap:7px}.mini-segment{display:flex;align-items:center;padding:3px;background:var(--surface);border:1px solid var(--border);border-radius:12px;gap:1px;min-width:0}.mini-segment button{border:0;background:transparent;border-radius:9px;padding:7px 10px;font-size:.73rem;color:var(--muted);font-weight:700;white-space:nowrap;line-height:1}.mini-segment button.selected{background:var(--accent);color:var(--accent-contrast);box-shadow:0 2px 8px #172e511a}.control-spacer{flex:1}.audience-segment button{padding:7px 11px}
.workspace{flex:1;min-height:0;margin:0 auto;width:min(1136px,100%);padding:0 12px 10px;display:flex;flex-direction:column}.page{flex:1;min-height:0}.translate-page{display:flex;flex-direction:column}.translation-grid{flex:1;min-height:0;display:flex;flex-direction:column;gap:9px;--out-factor:3;--in-factor:1}
.text-pane{min-height:0;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:17px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow);transition:flex-grow .3s cubic-bezier(.2,.8,.2,1),flex-basis .3s cubic-bezier(.2,.8,.2,1),min-height .3s ease}
.output-pane{flex:3 1 0}.input-pane{flex:1 1 0;min-height:128px}.translation-grid[data-expanded=output] .output-pane{flex:1 1 auto}.translation-grid[data-expanded=output] .input-pane{flex:0 0 66px;min-height:66px}.translation-grid[data-expanded=input] .input-pane{flex:1 1 auto}.translation-grid[data-expanded=input] .output-pane{flex:0 0 62px;min-height:62px}
.pane-bar{height:43px;min-height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:1px solid var(--border);gap:7px}.pane-side{display:flex;align-items:center;gap:11px;min-width:0}.pane-label{font-size:.73rem;font-weight:750;color:var(--muted);white-space:nowrap}.lang-switch{border:0;background:var(--surface2);display:flex;align-items:center;gap:5px;font-weight:750;border-radius:8px;padding:5px 8px;color:var(--accent);font-size:.69rem;white-space:nowrap}.lang-switch svg{height:14px;width:14px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;fill:none}.pane-actions{display:flex;gap:4px}.action-icon{width:30px;height:30px;border:0;background:transparent;border-radius:8px;display:inline-flex;justify-content:center;align-items:center;color:var(--muted);font-size:1rem}.action-icon:hover{background:var(--surface2);color:var(--accent)}.action-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.pane-content{flex:1;min-height:0;overflow:auto}.output-content{outline:0;padding:15px 17px;position:relative;cursor:text;scrollbar-width:thin}.output-content:focus{outline:none}.result-display{font-size:1.05rem;white-space:pre-wrap;overflow-wrap:anywhere;min-height:50px;letter-spacing:.005em;line-height:1.62}.result-placeholder{color:var(--muted);font-size:.91rem}.result-editor{font-size:1.02rem;line-height:1.55;resize:none;width:100%;min-height:80%;background:transparent;color:var(--text);border:none;outline:0;padding:0;display:block}.result-editor[hidden]{display:none}.result-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px 7px;border-top:1px solid var(--border);min-height:36px}.ghost-small{font-size:.66rem;border:0;background:transparent;color:var(--accent);font-weight:650;padding:6px}.small-status{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.66rem;max-width:100%;min-width:0;align-self:center}.language-marks{display:flex;flex-wrap:wrap;gap:5px;margin-top:16px;border-top:1px dashed var(--border);padding-top:10px}.language-marks:before{content:'Найдены другие языки:';color:var(--muted);font-size:.65rem;width:100%}.language-chip{border:1px solid #78aaf555;background:#6aa8ee14;color:var(--blue);border-radius:7px;padding:4px 7px;font-size:.69rem}.language-chip b{font-size:.59rem;opacity:.8}
.learn-word{border:0;padding:0 1px;margin:0;background:transparent;color:inherit;text-decoration:none;cursor:pointer}.learn-word:hover,.learn-word:focus-visible{background:#4d93e525;border-radius:3px}.nonstandard{color:var(--blue);border-bottom:0}
.input-title{border-bottom:0;min-height:33px;height:33px}.input-content{padding:0 14px;display:flex;flex-direction:column}.source-text{display:block;width:100%;height:100%;min-height:30px;flex:1;border:0;resize:none;padding:4px 2px;background:transparent;outline:none;color:var(--text);line-height:1.52;overflow:auto;font-size:.95rem}.source-text::placeholder{color:var(--muted)}.source-text:focus{outline:none}.composer-bottom{height:50px;min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:7px;padding:5px 11px;border-top:1px solid var(--border)}.composer-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.round-btn{height:35px;width:35px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;background:var(--surface2);color:var(--text);transition:transform .16s ease,background-color .15s}.round-btn:active{transform:scale(.9)}.round-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.send-btn{background:var(--accent);color:var(--accent-contrast);border-color:transparent}.mic-btn.listening{background:#dbedf7;box-shadow:0 0 0 4px #4da3e22c;animation:voicePulse 1.6s infinite}.stop-btn{background:#e64e5c;color:white;border-color:transparent}.stop-btn svg{fill:currentColor;stroke:none}.cancel-btn{border-color:#eb8f89;color:#cf4d56}.translation-grid[data-expanded=input] .output-content,.translation-grid[data-expanded=input] .result-bottom{display:none}.translation-grid[data-expanded=input] .output-pane .pane-bar{border-bottom:none;cursor:pointer}.translation-grid[data-expanded=output] .input-pane .pane-content,.translation-grid[data-expanded=output] .input-pane .pane-bar{display:none}.translation-grid[data-expanded=output] .input-pane .composer-bottom{height:100%;border-top:0;cursor:pointer}.translation-grid[data-expanded=output] .input-pane:before{content:'Текст запроса';color:var(--muted);font-size:.7rem;padding:5px 12px 0}.translation-grid[data-expanded=output] .composer-actions{transform:scale(.83);transform-origin:right center}
@keyframes voicePulse{0%,100%{box-shadow:0 0 0 4px #4da3e218}50%{box-shadow:0 0 0 8px #4da3e22b}}
.secondary-page{overflow:auto;max-width:760px;width:100%;margin:0 auto;padding:8px 1px 26px;scrollbar-width:thin}.section-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}.section-title h1{font-size:1.15rem}.panel{padding:17px;background:var(--surface);border:1px solid var(--border);border-radius:15px;margin-bottom:12px}.panel label,.login-card label{display:block;font-size:.78rem;font-weight:650;margin:0 0 12px}.panel input:not([type=checkbox]),.panel select,.login-card input,.secondary-page>input{width:100%;border:1px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--text);padding:10px;margin:5px 0 0}.secondary-page>input{margin:0 0 12px}.btn{border:0;border-radius:10px;padding:10px 15px;font-size:.83rem;font-weight:720}.btn-primary{background:var(--accent);color:var(--accent-contrast)}.btn-quiet{background:var(--surface2);border:1px solid var(--border)}.status{color:var(--accent);font-size:.75rem;margin:7px 0}.inline-check{display:flex!important;align-items:center;gap:10px;font-size:.8rem!important}.inline-check input{accent-color:var(--accent);width:18px;height:18px}.receiver-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0}.receiver-row p{margin:2px 0}.receiver-row strong{font-size:.8rem}.cards{display:flex;flex-direction:column;gap:11px}.entry{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px}.entry-head{color:var(--muted);font-size:.68rem}.entry p{white-space:pre-wrap;margin-top:8px;overflow-wrap:anywhere;font-size:.85rem}.entry .translated{padding-top:8px;border-top:1px solid var(--border);color:var(--accent)}.entry-actions{display:flex;justify-content:flex-end}.link-button{background:transparent;border:0;padding:7px;color:var(--accent);font-size:.75rem}
.drawer-backdrop{position:fixed;inset:0;background:#07142891;z-index:20;backdrop-filter:blur(2px)}.drawer{position:fixed;right:0;top:0;bottom:0;width:min(340px,89vw);padding:17px 17px max(19px,env(safe-area-inset-bottom));background:var(--surface);border-left:1px solid var(--border);box-shadow:-12px 0 40px #0002;z-index:21;transform:translateX(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;overflow:auto}.drawer.open{transform:translateX(0)}.drawer-heading{display:flex;justify-content:space-between;align-items:center;font-size:1.13rem;padding-bottom:11px}.drawer-group{padding:15px 0;border-top:1px solid var(--border)}.drawer-caption{display:block;font-size:.67rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800;margin-bottom:10px}.drawer select{width:100%;background:var(--surface2);color:var(--text);border:1px solid var(--border);padding:11px 9px;border-radius:10px;font-size:.82rem}.drawer-explain{font-size:.71rem;color:var(--muted);line-height:1.5;margin-top:9px}.drawer-nav{display:grid;gap:5px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;border-radius:11px;padding:11px 12px;text-align:left;font-size:1rem;color:var(--muted)}.nav-item span{font-size:.86rem;font-weight:690}.nav-item.active{color:var(--accent);background:var(--surface2)}.drawer-foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--border);font-size:.78rem;display:flex;align-items:center;gap:7px}.drawer-foot small{margin-left:auto;color:var(--muted)}.online-indicator{width:7px;height:7px;border-radius:50%;background:#25b58b}
.word-popover{position:fixed;z-index:40;left:12px;right:12px;bottom:calc(20px + env(safe-area-inset-bottom));max-width:340px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 40px 14px 15px;box-shadow:0 12px 48px #0004;animation:rise .2s ease}.word-popover strong{font-size:1rem}.word-popover p{margin:7px 0;font-size:.88rem}.word-popover small{color:var(--blue)}.popover-close{position:absolute;right:8px;top:8px;background:transparent;border:0;font-size:.88rem;color:var(--muted)}.toast{position:fixed;z-index:50;top:65px;left:50%;transform:translateX(-50%);max-width:90vw;width:max-content;background:var(--text);color:var(--surface);border-radius:11px;padding:9px 14px;font-size:.78rem;box-shadow:var(--shadow);animation:rise .2s ease}@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.login-screen{display:grid;place-items:center;padding:20px;height:100dvh}.login-card{width:min(400px,100%);background:var(--surface);padding:30px;border:1px solid var(--border);border-radius:20px;text-align:center;box-shadow:var(--shadow)}.login-card .logo-large{display:inline-flex;font-size:2rem;font-weight:800;position:relative;background:var(--accent);color:var(--accent-contrast);border-radius:16px;width:66px;height:66px;align-items:center;justify-content:center;margin-bottom:14px}.logo-large span{font-size:.9rem;position:absolute;right:6px;bottom:3px}.login-card h1{font-size:1.5rem}.login-card .muted{margin:6px 0 25px}.login-card label{text-align:left}.login-card .btn{width:100%;margin-top:10px}
@media(min-width:720px){.topbar{height:65px;min-height:65px;padding-left:30px;padding-right:30px}.top-controls{height:59px;padding-left:7px;padding-right:7px}.workspace{padding:0 8px 18px}.translation-grid{gap:11px}.pane-content.output-content{padding:25px 29px}.result-display{font-size:1.22rem}.pane-bar{height:49px;min-height:49px}.input-content{padding:6px 21px}.source-text{font-size:1.07rem}.brand{max-width:200px}}
@media(max-width:400px){.top-controls{gap:3px;padding:7px 7px}.mini-segment{padding:2px}.mini-segment button{font-size:.65rem;padding:7px 7px}.audience-segment button{padding:7px 6px}.toolbar-btn{padding:0 9px;font-size:.67rem}.brand{max-width:124px}.brand-caption strong{font-size:.89rem}.brand-caption small{font-size:.5rem}.workspace{padding:0 7px 7px}.translation-grid{gap:7px}.text-pane{border-radius:13px}.pane-bar{padding:0 10px}.result-display{font-size:1rem}.translation-grid[data-expanded=input] .output-pane{flex-basis:53px;min-height:53px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.usage-panel{display:grid;gap:7px}.usage-cost{font-size:.92rem;font-weight:700;color:var(--accent)}.usage-note{color:var(--muted);font-size:.69rem;line-height:1.5}

/* v0.5: both panes stay visible, even while the other takes the workspace. */
.collapsed-preview{display:none;width:100%;min-width:0;min-height:27px;border:0;background:transparent;color:var(--muted);padding:2px 13px 7px;text-align:left;font-size:.78rem;line-height:1.1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;cursor:pointer}
.translation-grid[data-expanded=input] .output-pane{flex:0 0 76px;min-height:76px}
.translation-grid[data-expanded=input] .output-pane .pane-bar{border-bottom:0}
.translation-grid[data-expanded=input] .output-pane .pane-actions{display:none}
.translation-grid[data-expanded=input] .output-pane .collapsed-preview{display:block}
.translation-grid[data-expanded=output] .input-pane{flex:0 0 72px;min-height:72px}
.translation-grid[data-expanded=output] .input-pane .pane-bar{display:flex;height:36px;min-height:36px;border-bottom:0;cursor:pointer}
.translation-grid[data-expanded=output] .input-pane .pane-bar #clear-source{display:none}
.translation-grid[data-expanded=output] .input-pane .pane-content,
.translation-grid[data-expanded=output] .input-pane .composer-bottom{display:none}
.translation-grid[data-expanded=output] .input-pane .collapsed-preview{display:block}
.translation-grid[data-expanded=output] .input-pane::before{content:none}
.translation-grid[data-expanded=output] .input-pane .composer-actions{transform:none}
/* Left cancel is physically separated from microphone/stop on the right. */
.composer-bottom{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:8px}
.composer-cancel-slot{width:36px;min-height:36px;display:flex;align-items:center;justify-content:center}
.composer-actions{display:flex;gap:9px;align-items:center;justify-content:flex-end;margin-left:0}
.composer-actions .round-btn,.composer-cancel-slot .round-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;height:36px;width:36px;padding:0}
.small-status{grid-column:2;min-width:0;text-align:left;align-self:center}
.composer-actions{grid-column:3}
/* The status and action buttons never overlap at mobile widths. */
@media(max-width:400px){.translation-grid[data-expanded=input] .output-pane{flex-basis:76px;min-height:76px}.translation-grid[data-expanded=output] .input-pane{flex-basis:72px;min-height:72px}.composer-bottom{padding-left:9px;padding-right:9px;gap:6px}}
@media(max-height:500px){
  .topbar{height:46px;min-height:46px}
  .top-controls{height:42px;min-height:42px;padding-top:4px;padding-bottom:4px}
  .workspace{padding-bottom:4px}
  .translation-grid{gap:5px}
  .translation-grid[data-expanded=input] .output-pane{flex-basis:64px;min-height:64px}
  .translation-grid[data-expanded=output] .input-pane{flex-basis:62px;min-height:62px}
  .input-pane{min-height:112px}
  .pane-bar{height:35px;min-height:35px}
  .input-title{height:28px;min-height:28px}
  .composer-bottom{height:44px;min-height:44px}
}

/* v0.6: live panes are always reachable, including when mobile keyboard opens. */
.translation-grid[data-expanded=input] .input-pane{flex:1 1 0!important;min-height:0!important}
.translation-grid[data-expanded=input] .output-pane{flex:0 0 70px!important;min-height:70px!important}
.translation-grid[data-expanded=output] .output-pane{flex:1 1 0!important;min-height:0!important}
.translation-grid[data-expanded=output] .input-pane{flex:0 0 75px!important;min-height:75px!important}
.translation-grid[data-expanded=input] .input-pane .pane-content{display:flex!important;min-height:0;overflow:auto}
.translation-grid[data-expanded=input] .input-pane .composer-bottom{display:grid!important;flex:0 0 50px}
.translation-grid[data-expanded=input] .input-pane .collapsed-preview{display:none!important}
.text-pane{min-height:0;overflow:hidden}.input-pane{overflow:hidden}
.input-pane .pane-content{overscroll-behavior:contain}
.mic-btn,.send-btn{border:2px solid #20b875!important;box-shadow:0 0 0 1px #1eb57622}
.mic-btn:focus-visible,.send-btn:focus-visible{outline:2px solid #20b875}
.rotate-icon{font-size:1.36rem;font-weight:650;color:#20b875}
.rotate-icon[aria-pressed=true]{background:#23ae7525;border:1px solid #20b875}
.output-content.rotated-output{transform:rotate(180deg);transform-origin:center;overflow:auto}
#translation-usage{font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entry .history-text{white-space:pre-wrap;user-select:text;-webkit-user-select:text;line-height:1.72}
.history-word{cursor:pointer;user-select:text;-webkit-user-select:text;text-decoration:none;border-radius:3px}
.history-word:focus-visible{outline:2px solid #20b875;background:#20b87518}
.word-components{margin:10px 0;display:grid;gap:6px}
.word-part{display:flex;gap:8px;align-items:baseline;border-top:1px solid var(--border);padding-top:5px;font-size:.79rem}
.word-part strong{font-size:.78rem;min-width:85px}.word-part span{font-size:.76rem;line-height:1.4}
.help-panel{display:grid;gap:5px;padding-bottom:24px}
.help-panel h2{margin:13px 0 1px;color:var(--accent)}
.help-panel p{font-size:.86rem;line-height:1.65}
.nav-item[data-page=translate]{border:1px solid #21ae76;color:var(--text);font-weight:750}
.nav-item[data-page=translate].active{background:#21ae7518;color:var(--accent)}
@media(max-height:500px){
  .translation-grid[data-expanded=input] .output-pane{flex-basis:62px!important;min-height:62px!important}
  .translation-grid[data-expanded=output] .input-pane{flex-basis:64px!important;min-height:64px!important}
}

/* Translit v0.7 – compact header, special translation instructions, clearer settings. */
.brand{max-width:190px}
.brand-caption strong{font-size:.89rem;letter-spacing:-.03em;white-space:nowrap}
.brand-by{font-weight:680;color:var(--accent);font-size:.84em}
.input-title{gap:6px;justify-content:flex-start}
.input-title #voice-status{margin-left:auto;color:#159d72;white-space:nowrap;font-size:.62rem;font-variant-numeric:tabular-nums}
.input-title #clear-source{flex:0 0 auto;padding:4px}
.special-toggle{flex:0 0 auto;padding:4px 2px;border:0;background:transparent;color:var(--blue);font-size:.68rem;line-height:1.1;font-weight:690;white-space:nowrap;border-radius:5px}
.special-toggle.has-special:after{content:' •';color:#20ac75;font-weight:900}
.special-toggle:hover,.special-toggle:focus-visible{background:var(--surface2)}
.special-box{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:8px;margin:2px 0 8px;max-height:min(220px,42vh);overflow:auto}
.special-box textarea{resize:vertical;width:100%;min-height:62px;max-height:140px;background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:9px 10px;color:var(--text);font-size:.78rem;line-height:1.4}
.special-box textarea::placeholder{color:var(--muted)}
.special-note{font-size:.63rem;line-height:1.4;color:var(--muted)}
.accent-explain{font-size:.74rem;margin:-5px 0 8px;line-height:1.45}
.accent-preview{font-weight:700;font-size:.79rem;color:var(--accent);background:var(--surface2);border-left:3px solid var(--accent);padding:8px 11px;border-radius:8px;margin:0 0 13px}
.drawer-footer-actions{padding-top:12px;border-top:1px solid var(--border);margin-top:auto;display:flex;justify-content:flex-end}
.drawer-footer-actions button{font-size:.75rem}
.drawer-footer-actions+.drawer-foot{margin-top:0;padding-top:12px}
.copy-both{border:1px solid var(--border);border-radius:7px;font-size:1.05rem;line-height:1;padding:6px 12px}
.copy-both:hover{background:var(--surface2);color:var(--accent)}
@media(max-width:420px){
  .brand{max-width:152px}
  .brand-caption strong{font-size:.79rem}
  .brand-caption small{font-size:.49rem}
  .special-toggle{font-size:.61rem}
  .input-title{padding:0 8px;gap:4px}
  .input-title .pane-label{font-size:.66rem}
  .input-title #clear-source{font-size:.60rem}
}
@media(max-width:340px){
  .input-title #clear-source{font-size:0}
  .input-title #clear-source:before{content:'×';font-size:.9rem}
  .brand-caption small{display:none}
}
@media(max-height:460px){.special-box{max-height:38vh}.special-box textarea{min-height:40px}}

/* Translit 0.8: clean selectable text and independently accessible actions */
.learn-word,.history-word,.nonstandard{text-decoration:none!important;border-bottom:0!important;box-shadow:none!important}
.learn-word{font:inherit;letter-spacing:inherit}
.history-word:hover,.learn-word:hover{background:color-mix(in srgb,var(--accent) 11%,transparent)}
.translation-progress{height:5px;flex:1 1 30px;min-width:20px;max-width:130px;position:relative;overflow:hidden;background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:4px;align-self:center}
.translation-progress[hidden]{display:none!important}
.translation-progress span{position:absolute;height:100%;width:42%;left:0;background:linear-gradient(90deg,transparent,var(--accent),#29c08c);border-radius:5px;animation:translitProgress 1.12s ease-in-out infinite alternate}
@keyframes translitProgress{from{transform:translateX(-90%)}to{transform:translateX(300%)}}
.pane-side{flex:0 0 auto;gap:6px}.pane-bar{justify-content:space-between}.pane-actions{flex:0 0 auto}
.word-pronunciation{font-size:.82rem!important;color:var(--text);background:var(--surface2);border-radius:8px;padding:8px 10px;margin:7px 0}
.entry-text-row{display:flex;align-items:flex-start;gap:7px;min-width:0}.entry-text-row .history-text{flex:1;min-width:0;margin:8px 0;white-space:pre-wrap;user-select:text}.entry-text-row .copy-text-icon{flex:0 0 auto;height:31px;width:31px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);border-radius:8px;padding:5px;display:inline-flex;align-items:center;justify-content:center;margin-top:4px}
.copy-text-icon svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none}
.entry-text-row .translated{border-top:none;padding-top:0}
.speaker-toggle{font-size:.65rem;white-space:nowrap;color:var(--accent);background:transparent;border:0;padding:4px 1px}
.ai-assist-row{display:flex;justify-content:flex-end;margin-bottom:2px}.ai-assist-button{background:transparent;color:var(--accent);border:0;font-size:.68rem;padding:3px 0 3px 5px;font-weight:700}.translation-grid[data-expanded=output] .ai-assist-row{display:none}
.assist-dialog{position:fixed;inset:0;z-index:100;background:#0008;display:flex;align-items:center;justify-content:center;padding:15px}
.assist-dialog[hidden]{display:none}.assist-card{width:min(95vw,500px);max-height:90dvh;overflow:auto;background:var(--surface);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.assist-card textarea{display:block;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);width:100%;padding:10px;margin:10px 0;resize:vertical}.assist-actions{display:flex;gap:8px;justify-content:flex-end}
@media(max-width:400px){.audience-segment button{padding:7px 5px;font-size:.61rem}.speaker-toggle{font-size:.58rem}.special-toggle{font-size:.6rem}.translation-progress{max-width:58px;min-width:12px}.pane-actions{gap:1px}}
@media(prefers-reduced-motion:reduce){.translation-progress span{animation-duration:2s}}

/* Translit 0.9: compact actions and unmistakable recording invitation. */
.speaker-toggle{display:none!important}
.input-title .ai-assist-button{white-space:nowrap;flex:0 0 auto;color:var(--accent);padding:3px 1px;font-size:.66rem}
.translation-grid[data-expanded=output] #ai-assist-button{display:none}
.translation-grid.voice-listening[data-expanded=input] .output-pane{flex:0 0 99px!important;min-height:99px!important}
.translation-grid.voice-listening[data-expanded=input] .output-pane .pane-bar{height:27px!important;min-height:27px!important}
.translation-grid.voice-listening[data-expanded=input] #output-preview{display:none!important}
.voice-speak-prompt[hidden]{display:none!important}
.voice-speak-prompt{flex:1 1 auto;min-height:60px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;text-align:center;padding:1px 6px 6px;color:#12a46a;line-height:1.12;font-variant-numeric:tabular-nums}
.voice-speak-prompt strong{font-size:clamp(.98rem,3.4vw,1.24rem);font-weight:850;letter-spacing:.018em}
.voice-speak-prompt span{font-size:clamp(.81rem,3vw,.99rem);font-weight:740;letter-spacing:.045em}
.translation-grid.voice-listening[data-expanded=input] .output-pane .output-content{display:none}
.input-pane.recording #clear-source{display:none}
@media(max-width:360px){.input-title .pane-label{font-size:.61rem}.input-title .ai-assist-button{font-size:.60rem}.special-toggle{font-size:.59rem}}

/* Translit 0.9.1: reliable, prominent bilingual voice invitation. */
.translation-grid.voice-listening[data-expanded=input] .output-pane{
  flex:0 0 112px!important;min-height:112px!important;
  border:2px solid #08b855!important;
  animation:translitVoiceBorder 1.55s ease-in-out infinite;
}
.translation-grid.voice-listening[data-expanded=input] .output-pane .result-bottom{display:none!important}
.translation-grid.voice-listening[data-expanded=input] .output-pane .pane-bar{height:27px!important;min-height:27px!important}
.translation-grid.voice-listening[data-expanded=input] .voice-speak-prompt{
  flex:1 1 auto;min-height:0;width:100%;padding:4px 5px 7px;
  display:flex;justify-content:center;align-items:center;gap:4px;
  color:#09ba56;text-align:center;
}
.voice-speak-prompt strong{font-size:clamp(1.14rem,5vw,1.65rem);font-weight:900;letter-spacing:.035em;line-height:1.09}
.voice-speak-prompt span{font-size:clamp(.68rem,2.5vw,.86rem);font-weight:650;letter-spacing:0;line-height:1.07}
@keyframes translitVoiceBorder{
  0%,100%{border-color:#039949;box-shadow:0 0 0 1px #0bca6040}
  50%{border-color:#4cf18c;box-shadow:0 0 0 5px #12d97170}
}
@media(prefers-reduced-motion:reduce){.translation-grid.voice-listening[data-expanded=input] .output-pane{animation:none;box-shadow:0 0 0 3px #16c76b55}}
@media(max-height:430px){.translation-grid.voice-listening[data-expanded=input] .output-pane{flex-basis:99px!important;min-height:99px!important}.voice-speak-prompt strong{font-size:1.05rem}}

/* Translit 1.0 — accessible TTS playback. */
.tts-speak svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tts-speak{cursor:pointer;touch-action:manipulation}
.tts-speak.tts-playing{color:#0cb86a!important;background:color-mix(in srgb,#0cba68 12%,transparent)}
.tts-speak.tts-loading{color:var(--accent)!important;opacity:.75;animation:ttsPulse .8s ease-in-out infinite alternate}
.word-speak{float:right;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text);width:31px;height:31px;margin-right:24px;display:inline-flex;align-items:center;justify-content:center;padding:5px}
@keyframes ttsPulse{from{opacity:.35}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.tts-speak.tts-loading{animation:none}}
@media(max-width:375px){.pane-actions .tts-speak{width:29px;height:29px;padding:4px}}

/* v1.0.1: make the collapsed INPUT pane gently visible as a tap target. */
.translation-grid[data-expanded=output] .input-pane:not(.recording){
  border-color:color-mix(in srgb,var(--border) 62%,var(--accent) 38%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 9%,transparent),var(--shadow);
}
.translation-grid[data-expanded=output] .input-pane .collapsed-preview{
  color:color-mix(in srgb,var(--muted) 82%,var(--text) 18%);
}