/* Material 3 color roles; generated dynamically from the selected seed. */
:root {
  --bg:var(--md-sys-color-surface);
  --panel:var(--md-sys-color-surface-container-low);
  --panel-hover:var(--md-sys-color-surface-container);
  --raised:var(--md-sys-color-surface-container-high);
  --raised-hover:var(--md-sys-color-surface-container-highest);
  --alt:var(--md-sys-color-surface-container);
  --border:var(--md-sys-color-outline);
  --border-subtle:var(--md-sys-color-outline-variant);
  --text:var(--md-sys-color-on-surface);
  --text-muted:var(--md-sys-color-on-surface-variant);
  --accent:var(--md-sys-color-primary);
  --accent-hover:var(--md-sys-color-primary);
  --accent-soft:var(--md-sys-color-primary-container);
  --on-accent:var(--md-sys-color-on-primary-container);
  --accent-border:var(--md-sys-color-primary);
  --primary-bg:var(--md-sys-color-primary);
  --primary-ink:var(--md-sys-color-on-primary);
  --selection:var(--md-sys-color-secondary-container);
  --on-selection:var(--md-sys-color-on-secondary-container);
  --danger:var(--md-sys-color-error);
  --danger-soft:var(--md-sys-color-error-container);
  --on-danger:var(--md-sys-color-on-error-container);
  --success:var(--md-status-success); --success-soft:var(--md-status-success-container); --on-success:var(--md-status-success-on-container);
  --warning:var(--md-status-warning); --warning-soft:var(--md-status-warning-container); --on-warning:var(--md-status-warning-on-container);
  --red:var(--danger); --green:var(--success); --nav-width:216px; --monitor-height:0px;
}
:root, :root[data-theme=dark] {
  color-scheme:dark; --scheme:dark;
  --md-sys-color-primary:#cfbdfe;
  --md-sys-color-on-primary:#36275d;
  --md-sys-color-primary-container:#4d3d75;
  --md-sys-color-on-primary-container:#e9ddff;
  --md-sys-color-secondary:#cbc2db;
  --md-sys-color-on-secondary:#332d41;
  --md-sys-color-secondary-container:#4a4458;
  --md-sys-color-on-secondary-container:#e8def8;
  --md-sys-color-tertiary:#efb8c8;
  --md-sys-color-on-tertiary:#4a2532;
  --md-sys-color-tertiary-container:#633b48;
  --md-sys-color-on-tertiary-container:#ffd9e3;
  --md-sys-color-error:#ffb4ab;
  --md-sys-color-on-error:#690005;
  --md-sys-color-error-container:#93000a;
  --md-sys-color-on-error-container:#ffdad6;
  --md-sys-color-surface:#141218;
  --md-sys-color-surface-dim:#141218;
  --md-sys-color-surface-bright:#3b383e;
  --md-sys-color-surface-container-lowest:#0f0d13;
  --md-sys-color-surface-container-low:#1d1b20;
  --md-sys-color-surface-container:#211f24;
  --md-sys-color-surface-container-high:#2b292f;
  --md-sys-color-surface-container-highest:#36343a;
  --md-sys-color-on-surface:#e6e0e9;
  --md-sys-color-on-surface-variant:#cac4cf;
  --md-sys-color-outline:#948f99;
  --md-sys-color-outline-variant:#49454e;
  --md-sys-color-inverse-surface:#e6e0e9;
  --md-sys-color-inverse-on-surface:#322f35;
  --md-sys-color-inverse-primary:#65558f;
  --md-status-success:#9cd593;
  --md-status-success-container:#1e511e;
  --md-status-success-on-container:#b8f1ad;
  --md-status-warning:#edc061;
  --md-status-warning-container:#5c4300;
  --md-status-warning-on-container:#ffdea0;
}
:root[data-theme=light] {
  color-scheme:light; --scheme:light;
  --md-sys-color-primary:#65558f;
  --md-sys-color-on-primary:#ffffff;
  --md-sys-color-primary-container:#e9ddff;
  --md-sys-color-on-primary-container:#4d3d75;
  --md-sys-color-secondary:#625b71;
  --md-sys-color-on-secondary:#ffffff;
  --md-sys-color-secondary-container:#e8def8;
  --md-sys-color-on-secondary-container:#4a4458;
  --md-sys-color-tertiary:#7e5260;
  --md-sys-color-on-tertiary:#ffffff;
  --md-sys-color-tertiary-container:#ffd9e3;
  --md-sys-color-on-tertiary-container:#633b48;
  --md-sys-color-error:#ba1a1a;
  --md-sys-color-on-error:#ffffff;
  --md-sys-color-error-container:#ffdad6;
  --md-sys-color-on-error-container:#93000a;
  --md-sys-color-surface:#fdf7ff;
  --md-sys-color-surface-dim:#ded8e0;
  --md-sys-color-surface-bright:#fdf7ff;
  --md-sys-color-surface-container-lowest:#ffffff;
  --md-sys-color-surface-container-low:#f8f2fa;
  --md-sys-color-surface-container:#f2ecf4;
  --md-sys-color-surface-container-high:#ece6ee;
  --md-sys-color-surface-container-highest:#e6e0e9;
  --md-sys-color-on-surface:#1d1b20;
  --md-sys-color-on-surface-variant:#49454e;
  --md-sys-color-outline:#7a757f;
  --md-sys-color-outline-variant:#cac4cf;
  --md-sys-color-inverse-surface:#322f35;
  --md-sys-color-inverse-on-surface:#f5eff7;
  --md-sys-color-inverse-primary:#cfbdfe;
  --md-status-success:#376934;
  --md-status-success-container:#b8f1ad;
  --md-status-success-on-container:#002203;
  --md-status-warning:#795900;
  --md-status-warning-container:#ffdea0;
  --md-status-warning-on-container:#261900;
}
body.reference-shell { display:grid; grid-template-columns:var(--nav-width) minmax(0,1fr); grid-template-rows:60px minmax(0,1fr); height:100dvh; overflow:hidden; background:var(--bg); font-size:14px; font-variant-numeric:tabular-nums; }
button,a.button { border-radius:8px; background:var(--raised); border-color:var(--border); color:var(--text); font-weight:500; min-height:40px; box-shadow:none; }
button:hover:not(:disabled),a.button:hover { background:var(--raised-hover); border-color:var(--text-muted); }
button.btn-ghost { background:var(--raised); border-color:var(--border); color:var(--text); }
button.btn-ghost:hover:not(:disabled),button.btn-ghost.active { background:var(--raised-hover); border-color:var(--accent-border); color:var(--text); }
button.primary,a.primary,#start { background:var(--primary-bg); color:var(--primary-ink); border:1px solid var(--primary-bg); box-shadow:none; }
button.primary:hover:not(:disabled),a.primary:hover,#start:hover:not(:disabled) { background:var(--primary-bg); opacity:.88; color:var(--primary-ink); }
input:not([type=range]):not([type=radio]):not([type=checkbox]),textarea,select,.audio-cfg-select { min-height:40px; background:var(--bg)!important; color:var(--text)!important; border:1px solid var(--border)!important; border-radius:8px; color-scheme:var(--scheme)!important; font-size:14px; }
select option,select optgroup { background:var(--panel)!important; color:var(--text)!important; }
input::placeholder,textarea::placeholder { color:var(--text-muted); opacity:1; }
input[type=checkbox],input[type=radio],input[type=range] { accent-color:var(--accent); }
input[type=checkbox],input[type=radio] { width:18px; height:18px; flex:0 0 18px; }
input:focus,textarea:focus,select:focus { box-shadow:none; }
:is(button,a,summary,input,select,textarea):focus-visible,.dropzone:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
/* Route changes focus page headings for screen readers; avoid drawing a text-box outline. */
:is(h1,h2,h3)[tabindex="-1"]:focus { outline:none; box-shadow:none; }
.tool-page :is(h1,h2,h3)[tabindex="-1"]:focus,
#chapter-title:focus { outline:none !important; box-shadow:none !important; }
::selection { background:var(--accent); color:var(--primary-ink); }
input,textarea { caret-color:var(--text); }
* { scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }
a { color:var(--accent); text-underline-offset:3px; }
/* Navigation */
.app-nav { grid-row:1/-1; display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--panel); border-right:1px solid var(--border-subtle); z-index:45; }
.nav-brand-row { display:flex; align-items:center; height:60px; flex-shrink:0; padding:0 16px; gap:8px; border-bottom:1px solid var(--border-subtle); }
.brand { flex:1; min-width:0; gap:9px; }
.brand-icon { flex-shrink:0; background:none; border:0; box-shadow:none; color:var(--text); width:26px; height:30px; }
.brand-icon svg { width:26px; height:28px; }
.brand-icon .fi { font-size:26px; }
.brand-title h1 { font-size:18px; font-weight:700; line-height:1.15; letter-spacing:-.04em; margin:0; }
.brand-ver { display:none; }
.brand-sub { display:block; font-size:11px; color:var(--text-muted); }
.nav-collapse { width:26px; height:32px; min-height:32px; padding:4px; background:transparent; border:0; color:var(--text-muted); }
.app-nav svg,.mobile-nav-toggle svg,.header-theme svg { width:18px; height:18px; flex-shrink:0; }
.app-nav .fi,.mobile-nav-toggle .fi,.header-theme .fi { font-size:18px; }
.theme-icons { display:inline-flex; align-items:center; }
.theme-icons .theme-sun { display:none; }
[data-theme=dark] .theme-icons .theme-sun { display:inline-flex; }
[data-theme=dark] .theme-icons .theme-moon { display:none; }
.btn-settings .fi { font-size:16px; }
button>.fi,a.button>.fi,.btn-tool>.fi { margin-inline-end:4px; }
.nav-item>.fi,.nav-collapse>.fi,.header-theme>.fi { margin:0; }
.nav-body { flex:1; min-height:0; padding:20px 10px; overflow-y:auto; }
.nav-group-label { font-size:11px; color:var(--text-muted); margin:8px 12px 10px; }
.app-nav .workspace-tabs,.nav-tools { display:flex; flex-direction:column; align-items:stretch; gap:4px; margin-bottom:28px; }
.nav-item { display:flex; position:relative; align-items:center; justify-content:flex-start; width:100%; min-height:42px; gap:10px; padding:10px 12px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--text-muted); text-align:left; white-space:nowrap; font-size:13px; }
.nav-item:hover:not(:disabled) { background:var(--raised); border-color:transparent; color:var(--text); }
.nav-item.active { background:var(--selection); color:var(--on-selection); border-color:var(--border); }
.nav-item.active::before { display:none; }
.nav-bottom { padding:10px; border-top:1px solid var(--border-subtle); }
.nav-scrim,.mobile-nav-toggle { display:none; }
.reference-shell .topbar { grid-column:2; grid-row:1; display:flex; min-width:0; height:60px; min-height:60px; padding:0 24px; gap:16px; background:var(--bg); border-bottom:1px solid var(--border-subtle); }
.page-heading { display:flex; align-items:center; gap:10px; min-width:0; }
.page-heading h2 { font-size:14px; font-weight:600; margin:0; white-space:nowrap; }
.header-right { margin-left:auto; flex:1; justify-content:flex-end; flex-wrap:nowrap; gap:8px; min-width:0; }
.header-right .hw-pill { display:none; }
.header-right .chip { border:0; background:none; padding:0 8px; color:var(--text-muted); font-size:12px; }
.header-right .button { font-size:12px; min-height:34px; padding:6px 12px; }
.header-theme { padding:7px; min-height:34px; background:none; border:0; color:var(--text-muted); }
.theme-sun { display:none; }
[data-theme=dark] .theme-sun { display:inline; }
[data-theme=dark] .theme-moon { display:none; }
.reference-shell .workspace { grid-column:2; grid-row:2; display:block; min-height:0; min-width:0; width:100%; overflow:hidden; }
.workspace.show-reader .studio-screen,.workspace:not(.show-reader)>.reader,
.workspace[data-page=settings]>.studio-screen,.workspace[data-page=settings]>.reader,
.workspace[data-page=monitor]>.studio-screen,.workspace[data-page=monitor]>.reader { display:none!important; }
.workspace.show-reader .reader { display:flex; }
/* Studio */
.studio-screen { height:100%; overflow-y:auto; padding:22px; overscroll-behavior:contain; }
.studio-screen>* { max-width:1700px; margin-inline:auto; }
.studio-intro,.studio-footnote,.section-kicker,.source-label>p { display:none!important; }
.project-source { display:grid; grid-template-columns:100px minmax(0,1fr) 238px; grid-template-rows:auto auto auto; gap:6px 22px; align-items:center; padding:18px; margin-bottom:18px; background:var(--panel); border:1px solid var(--border-subtle); border-radius:12px; }
.book-mark { grid-column:1; grid-row:1/4; display:flex; flex-direction:column; justify-content:center; align-items:center; align-self:stretch; min-height:148px; gap:16px; background:var(--raised); border:1px solid var(--border); border-radius:8px; color:var(--text-muted); font-size:11px; letter-spacing:.06em; }
.book-mark svg { width:43px; height:52px; }
.source-label { grid-column:2; grid-row:1; min-width:0; }
.source-label h2 { margin:0; font-size:24px; line-height:1.4; font-weight:650; letter-spacing:-.025em; overflow-wrap:anywhere; }
.project-source .dropzone { grid-column:3; grid-row:1/3; display:flex; align-self:stretch; justify-content:center; min-height:110px; padding:16px; gap:8px; background:var(--bg); border:1px dashed var(--border); border-radius:9px; }
.dropzone:hover,.dropzone.drag { background:var(--selection); border-color:var(--text);  color:var(--on-selection); }
.dropzone .upload-icon { font-size:30px; color:var(--text); line-height:1; }
.dropzone strong { font-size:14px; font-weight:500; }
.dropzone>span { color:var(--text-muted); font-size:12px; }
.source-file-types { display:none; }
.file-info { grid-column:2; grid-row:2; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; background:none; border:0; padding:0; margin:0; }
.file-info>span { display:none; }
.file-meta { flex:1 1 100%; min-width:0; }
.file-meta strong { font-size:14px; font-weight:400; overflow-wrap:anywhere; color:var(--text-muted); }
.file-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0; }
.count { padding:4px 10px; background:var(--raised); border:1px solid var(--border-subtle); color:var(--text); font:12px/1.5 var(--sans); border-radius:20px; }
button.btn-danger-sm { background:var(--danger-soft); border-color:transparent; color:var(--danger); min-height:34px; }
.book-title-details { grid-column:2; grid-row:3; background:none; padding:0; border:0; margin:4px 0 0; }
.book-title-details>summary,.path-details>summary { cursor:pointer; color:var(--text-muted); font-size:12px; min-height:30px; padding-block:6px; }
.book-title-details .control-details-body { max-width:540px; padding:12px 0; }
.path-details { grid-column:3; grid-row:3; align-self:start; }
.path-row { display:flex; gap:6px; margin-top:8px; }
.path-row input { min-width:0; }
.output-dirs-hint { display:grid!important; gap:6px; margin-block:14px; font-size:12px!important; }
#encoding { display:block; font-size:12px; color:var(--text-muted); }
.studio-grid { display:grid; grid-template-columns:minmax(260px,1fr) minmax(300px,1.08fr) minmax(270px,1fr); gap:18px; align-items:start; }
.studio-grid>.panel { min-width:0; padding:18px; background:var(--panel); border:1px solid var(--border-subtle); border-radius:12px; }
.section-heading { margin-bottom:16px; }
.section-heading h2,.progress-panel>h2 { font:600 19px/1.5 var(--sans); color:var(--text); letter-spacing:-.025em; text-transform:none; margin:0; }
.toc-search-row { margin-bottom:12px; }
.chapter-columns,.toc-item { display:grid; grid-template-columns:32px minmax(0,1fr) 76px; gap:8px; align-items:center; }
.chapter-columns { background:var(--raised); color:var(--text-muted); border-radius:7px; font-size:11px; padding:10px 8px; }
.chapter-columns>span:last-child { display:none; }
.toc { display:block; max-height:calc(100dvh - 420px); min-height:200px; overflow-y:auto; background:none; border:0; border-radius:0; padding-right:4px; }
.toc-item { min-height:44px; padding:8px; border:1px solid transparent; border-radius:7px; background:transparent; text-align:left; width:100%; font-size:12px; }
.toc-item:hover:not(:disabled) { background:var(--raised); border-color:var(--border); }
.toc-item.selected { border:1px solid var(--text); background:var(--raised); }
.toc-item .num { min-width:0; color:var(--text-muted); font-size:11px; font-family:var(--mono); }
.toc-item .name,.toc-item.selected .name { min-width:0; color:var(--text); font-weight:400; }
.toc-item .state { font-size:10px; display:flex; align-items:center; gap:5px; justify-content:flex-end; white-space:nowrap; color:var(--text-muted); }
.toc-item .state::before { content:''; width:8px; height:8px; flex:0 0 8px; border:1px solid var(--text-muted); border-radius:50%; }
.toc-item.done .state::before { background:var(--text); border-color:var(--text); }
.toc-item.translating .state::before { background:var(--text); outline:1px solid var(--text-muted); outline-offset:2px; }
.toc-item.error .state,.toc-audio-status[data-status=error] { color:var(--danger); }
.toc-audio-status { grid-column:2/4; text-align:left; font-size:10px; color:var(--text-muted); }
.toc-audio-status::before { content:'Audio · '; }
.toc-audio-status[data-status=pending] { display:none; }
.toc-empty { display:grid; place-items:center; min-height:220px; padding:24px 10px; color:var(--text-muted); font-size:13px; text-align:center; }
.more { width:100%; min-height:40px; font-size:12px; margin-top:8px; }
.studio-grid>.config-panel { padding:0; border:0; background:transparent; position:static; max-height:none; overflow:visible; display:flex; flex-direction:column; gap:16px; }
.setup-card { margin:0; padding:18px; background:var(--panel); border:1px solid var(--border-subtle); border-radius:12px; }
.control-details { border:1px solid var(--border-subtle); border-radius:12px; background:var(--panel); margin:0; }
.control-details>summary { display:flex; align-items:center; justify-content:space-between; min-height:50px; padding:14px 18px; list-style:none; font-size:14px; font-weight:550; cursor:pointer; }
.control-details>summary::-webkit-details-marker { display:none; }
.control-details.setup-card>summary { padding:0; min-height:28px; font-size:18px; margin-bottom:12px; }
.details-chevron { color:var(--text-muted); font-size:18px; }
.control-details[open] .details-chevron { transform:rotate(180deg); }
.control-details-body { padding:0 18px 18px; }
.setup-card>.control-details-body { padding:0; }
.feature-box { background:transparent; border:0; border-radius:0; padding:0; }
.range-box.setup-card { padding:18px; background:var(--panel); border:1px solid var(--border-subtle); border-radius:12px; }
.feature-header { color:var(--text); border:0; border-bottom:1px solid var(--border-subtle); padding:0 0 8px; margin-bottom:12px; font:500 13px/1.5 var(--sans); letter-spacing:0; }
.range-box .feature-header,.glossary-header .field-label { font-size:17px; font-weight:600; }
.range-input-item { flex:1; min-width:0; }
.range-input-item span { font-size:12px; color:var(--text-muted); }
.range-hint,.form-hint,.section-hint,.toggle-info .subtext { font:12px/1.65 var(--sans); color:var(--text-muted); }
.range-hint { margin-top:8px; }
.field-label,.toggle-info strong,.chunk-radio strong { color:var(--text); }
.field-group { margin-bottom:18px; }
.field-group:last-child { margin-bottom:0; }
.label-with-badge { flex-wrap:wrap; gap:8px; }
.badge { font-size:11px; }
.badge-success { background:var(--raised); color:var(--text); border:1px solid var(--border); }
.chunk-radio,.chunk-radio.active { display:flex; align-items:center; gap:8px; background:transparent; border:0; padding:8px 0; color:var(--text); font-size:13px; }
.chunk-indicator { display:none; }
.chunk-radio input[type=radio] { width:17px; height:17px; margin:0; flex:0 0 17px; }
.engine-note { background:var(--alt); border-color:var(--border); }
.engine-note p { color:var(--text-muted); }
.model-help { margin-top:12px; }
.model-help>summary { cursor:pointer; font-size:12px; color:var(--text-muted); min-height:30px; padding:6px 0; }
.model-help .engine-note { margin-top:8px; }
.translation-settings-shortcut { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 0 16px; border:0; }
.translation-settings-shortcut strong { font-size:13px; }
.translation-settings-shortcut p,#control-summary { font-size:12px; color:var(--text-muted); }
.translation-settings-shortcut button { min-height:36px; font-size:12px; }
.glossary-header { margin-bottom:12px; }
.glossary-actions { gap:8px; }
.btn-text { background:none; border:0; color:var(--text-muted); padding:4px; font-size:11px; min-height:32px; }
#glossary { font:13px/1.7 var(--sans); min-height:104px; }
.audio-cfg-row { flex-wrap:wrap; }
.audio-cfg-select { width:100%!important; max-width:none!important; }
.audio-cfg-row>span,.audio-cfg-row>label { font-size:12px; }
.performance-controls { border-color:var(--border); }
.performance-title,.performance-grid label { color:var(--text); }
.manual-audio-actions { display:grid; gap:8px; margin-top:16px; }
.manual-audio-actions small { color:var(--text-muted); font-size:12px; }
.audio-merge-options { border-top:1px solid var(--border); padding-top:20px; margin-top:20px; }
.audio-merge-options h3 { font-size:15px; margin:0 0 16px; color:var(--text); }
.audio-merge-options>label { color:var(--text-muted); font-size:12px; }
.merge-options-row { display:flex; gap:12px; align-items:center; margin:10px 0 18px; flex-wrap:wrap; }
.merge-options-row input { width:90px; }
#merged-groups-container>div>div { flex-wrap:wrap; gap:12px; }
.auto-group-row { border-color:var(--border)!important; }
#opt-group-size { color:var(--text)!important; }
.progress-panel>h2 { margin-bottom:16px; }
.job-action { padding:0; }
#start { width:100%; min-height:44px; font-size:14px; margin:0 0 12px; }
.toggle-row { gap:10px; align-items:flex-start; }
.toggle-row strong { font-size:12px; font-weight:450; line-height:1.6; }
.controls { gap:8px; margin:12px 0 0; }
.controls button { min-height:34px; font-size:12px; flex:1; }
.progress-container { background:none; border:0; padding:0; margin-top:18px; }
.progress-label { font-size:12px; margin-bottom:10px; }
progress { accent-color:var(--accent); }
#progress { height:12px; width:100%; border:0; border-radius:3px; overflow:hidden; appearance:none; }
#progress::-webkit-progress-bar { background:var(--border); }
#progress::-webkit-progress-value { background:var(--accent); }
#progress::-moz-progress-bar { background:var(--accent); }
.activity-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 0 12px; }
.activity-heading h3 { margin:0; font-size:13px; font-weight:500; }
.activity-heading>span { color:var(--text-muted); font-size:10px; }
#activity-log { list-style:none; padding:0; margin:0; overflow-y:auto; max-height:calc(100dvh - 580px); min-height:150px; font:11px/1.8 var(--mono); }
#activity-log li { display:flex; align-items:baseline; gap:8px; padding:5px 0; overflow-wrap:anywhere; }
#activity-log time { flex-shrink:0; color:var(--text-muted); }
#activity-log .activity-empty { color:var(--text-muted); font:12px/1.7 var(--sans); }
.activity-error { color:var(--danger); }
.studio-jump { display:none; }
.studio-screen:not(.has-book) .studio-grid,.studio-screen:not(.has-book) .studio-jump { display:none; }
/* Reader */
.reader { width:100%; height:100%; min-height:0; background:var(--bg); }
.reader-toolbar { padding:10px 24px; min-height:50px; background:var(--panel); border-color:var(--border-subtle); }
.breadcrumb { display:flex; min-width:0; align-items:center; gap:10px; font:12px var(--sans); }
#reader-book-name { text-overflow:ellipsis; overflow:hidden; color:var(--text-muted); }
.back-to-studio { background:none; border:0; padding:4px 0; min-height:32px; font-size:12px; color:var(--text); flex-shrink:0; }
.connection { font:11px var(--sans); white-space:nowrap; color:var(--text-muted); }
.chapter-toolbar { background:var(--bg); padding:20px 24px; flex-wrap:wrap; gap:16px; }
#chapter-title { font-size:24px; letter-spacing:-.025em; font-weight:550; line-height:1.45; margin:0; }
#chapter-index { color:var(--text-muted); font-size:12px; margin-bottom:6px; letter-spacing:0; }
.chapter-actions { flex-wrap:wrap; gap:12px; }
.chapter-arrows button { min-height:36px; font-size:12px; }
.chapter-single-ops { position:relative; }
.reader-advanced>summary { min-height:36px; font-size:12px; cursor:pointer; color:var(--text-muted); padding:8px; }
.reader-advanced-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 0; }
.reader-advanced-actions button { font-size:11px; }
.pane-labels { display:flex; background:var(--bg); padding:12px 24px; border-color:var(--border-subtle); flex-wrap:wrap; gap:12px; }
.reading-tools { order:-1; width:100%; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.view-switch,.font-controls { background:none; border:0; padding:0; }
.view-btn { min-height:36px; font-size:12px; padding:6px 12px; background:none; color:var(--text-muted); border:1px solid transparent; }
.view-btn.active { background:var(--selection); border-color:var(--border); color:var(--on-selection); }
.font-controls { margin-left:auto; }
.font-controls #font-val,.font-btn,.tool-btn,.sync-label { font-size:12px; color:var(--text-muted); }
.label-source-box,.label-target-box { width:calc(50% - 6px); font-size:12px; color:var(--text-muted); }
.lang-badge,.lang-badge.vi { background:none; border:0; color:var(--text-muted); }
.reader[data-view=target] .label-source-box,.reader[data-view=source] .label-target-box { display:none; }
.text-pane,.text-pane[lang=zh],.text-pane.target { background:var(--panel); padding:28px 36px; line-height:1.95; }
.para.waiting { color:var(--text-muted); }
.chapter-audio-bar { background:var(--raised); border-color:var(--border); }
.reader-empty { background:none; padding:36px; overflow-y:auto; min-height:0; }
.empty-glyph,.empty-glyph span { color:var(--text); }
.reader-empty h2 { color:var(--text); font-size:26px; line-height:1.4; letter-spacing:-.025em; }
.reader-empty p { max-width:450px; color:var(--text-muted); font-size:14px; margin-top:12px; }
.empty-features { display:none; }
.reader-footer { background:var(--panel); border-color:var(--border-subtle); color:var(--text-muted); font:11px var(--sans); padding:12px 24px; flex-shrink:0; }
/* Full-page tools and workflow dialogs */
.tool-page { height:100%; overflow-y:auto; padding:28px; background:var(--bg); overscroll-behavior:contain; }
.tool-page .settings-card { display:block; width:100%; max-width:1120px; max-height:none; height:auto; overflow:visible; margin:auto; background:none; border:0; box-shadow:none; }
.tool-page .settings-card .modal-header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:20px; padding:12px 16px 24px; border:0; background:none; }
.tool-page .settings-card .modal-header h2 { font-size:24px; color:var(--text); margin:0; }
.page-back { background:none; border:0; padding:4px 0; font-size:12px; min-height:36px; color:var(--text-muted); }
.tool-page .settings-layout { display:block; overflow:visible; }
.tool-page .settings-nav.modal-tabs { display:flex; flex-direction:row; justify-content:flex-start; gap:10px; padding:0 0 18px; background:none; border:0; }
.settings-nav .modal-tab { color:var(--text-muted); min-height:40px; padding:8px 16px; }
.settings-nav .modal-tab.active { color:var(--on-selection); background:var(--selection); border:1px solid var(--border); border-radius:8px; }
.settings-page:not([data-tab=tab-translation]):not([data-tab=tab-cache]) .settings-nav { display:none; }
.tool-page .settings-content.modal-body { min-height:0; padding:28px; overflow:visible; background:var(--panel); border:1px solid var(--border-subtle); border-radius:12px; }
.settings-section { margin-bottom:24px; }
.settings-section h3 { display:none; }
.tool-page .triplet-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-bottom:28px; }
.tool-page .triplet-card { background:var(--alt); border:1px solid var(--border); border-radius:8px; padding:16px; gap:16px; }
.triplet-header h3,.triplet-card strong { color:var(--text); }
.beam-num { color:var(--text-muted); }
.beam-pill { color:var(--on-selection); background:var(--selection); border-color:var(--border); }
.settings-note,.settings-advanced,.tts-advanced-card { color:var(--text-muted); background:var(--alt); border-color:var(--border); }
.settings-note { border:1px solid var(--border-subtle); }
.settings-advanced summary,.settings-card .feature-header { color:var(--text); }
.settings-card [style*="background"] { background:var(--alt)!important; }
.settings-card [style*="color:"] { color:var(--text-muted)!important; }
.settings-card .cache-card strong { color:var(--text)!important; }
.settings-card .advanced-body { border-color:var(--border); }
.page-help { margin:20px 0 0; padding-top:12px; border-top:1px solid var(--border-subtle); }
.page-help>summary { color:var(--text-muted); cursor:pointer; min-height:32px; font-size:12px; }
.page-help .settings-note { margin-top:12px; }
.backup-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.backup-section { min-width:0; }
.backup-section h3 { font-size:17px; font-weight:550; margin:0 0 20px; }
.backup-section .cloud-actions { margin-top:16px; }
.backup-section .restore-label { margin-top:0; }
.backup-section input[type=file] { margin-bottom:18px; }
.checkpoint-card { background:transparent; }
#pane-tab-cloud { max-width:760px; }
#huggingface-key-status { padding:16px; background:var(--alt); border:1px solid var(--border); border-radius:8px; font-size:13px; }
dialog,.export-dialog,.modal-card { background:var(--panel)!important; color:var(--text)!important; border-color:var(--border)!important; }
dialog::backdrop { background:#000b; }
.export-format-options label,.export-review { background:var(--alt); border-color:var(--border); }
.export-format-options label:has(input:checked) { background:var(--selection); border-color:var(--text);  color:var(--on-selection); }
.export-review dt,.export-review p,.export-format-options small,#export-inline-status { color:var(--text-muted); }
.export-dialog .eyebrow { display:none; }
.export-dialog-header,.export-dialog-footer { border-color:var(--border-subtle); }
.icon-close { color:var(--text); }
.text-action { color:var(--text); }
.notice { bottom:20px!important; background:var(--raised); color:var(--text); border-color:var(--border); box-shadow:0 8px 24px #0004; }
.notice.error { background:var(--danger-soft); color:var(--danger); border-color:var(--danger); }
.monitor-page-card,.translation-panel,.audio-task { border-color:var(--border-subtle); }
/* Breakpoints preserve usable fields rather than squeezing three columns. */
@media(min-width:901px) {
 .nav-collapsed { --nav-width:72px; }
 .nav-collapsed .nav-brand-row { flex-direction:column; justify-content:center; gap:0; padding:4px; }
 .nav-collapsed .nav-brand-row .brand>div,.nav-collapsed .nav-label,.nav-collapsed .nav-group-label { display:none; }
 .nav-collapsed .brand { flex:0; }
 .nav-collapsed .nav-collapse { position:absolute; top:18px; left:51px; width:16px; height:24px; min-height:24px; padding:0; }
 .nav-collapsed .nav-collapse svg { transform:rotate(180deg); width:14px; }
 .nav-collapsed .nav-collapse .fi { transform:rotate(180deg); font-size:14px; }
 .nav-collapsed .nav-item { justify-content:center; padding:10px; }
 .nav-collapsed .nav-body { padding-inline:10px; }
 .nav-collapsed .nav-bottom { padding:10px; }
}
@media(min-width:901px) and (max-width:1000px) {
 .studio-grid { grid-template-columns:minmax(250px,1fr) minmax(290px,1fr); }
 .studio-grid>.toc-panel { grid-column:1; grid-row:1/3; }
 .studio-grid>.config-panel { grid-column:2; grid-row:1; }
 .studio-grid>.progress-panel { grid-column:2; grid-row:2; }
 .toc { max-height:calc(100dvh - 430px); }
 .project-source { grid-template-columns:74px minmax(0,1fr) 190px; gap:8px 16px; }
 .source-label h2 { font-size:20px; }
 .book-mark { min-height:140px; }
 .tool-page .triplet-cards { grid-template-columns:1fr; gap:16px; }
}
@media(max-width:900px) {
 body.reference-shell { grid-template-columns:minmax(0,1fr); grid-template-rows:60px minmax(0,1fr); }
 .app-nav { position:fixed; inset:0 auto 0 0; width:248px; transform:translateX(-100%); visibility:hidden; }
 .nav-open .app-nav { transform:translateX(0); visibility:visible; }
 .nav-open .nav-scrim { display:block; position:fixed; inset:0; z-index:44; background:#0009; border:0; border-radius:0; padding:0; }
 .reference-shell .topbar,.reference-shell .workspace { grid-column:1; }
 .reference-shell .topbar { padding-inline:18px; }
 .mobile-nav-toggle { display:inline-flex; background:none; border:0; color:var(--text); padding:6px; min-height:32px; }
 .studio-screen { padding:18px; }
 .studio-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
 .studio-grid>.config-panel { grid-column:1; grid-row:1; }
 .studio-grid>.progress-panel { grid-column:2; grid-row:1; }
 .studio-grid>.toc-panel { grid-column:1/-1; grid-row:2; }
 .toc { max-height:500px; }
 .project-source { grid-template-columns:72px minmax(0,1fr) 170px; gap:8px 14px; }
 .source-label h2 { font-size:20px; }
 .project-source .dropzone { min-height:108px; padding:12px; }
 .book-mark { min-height:140px; }
 .dropzone strong { font-size:12px; }
 .studio-jump { display:flex; gap:20px; margin-block:0 16px; }
 .studio-jump a { font-size:12px; color:var(--text-muted); padding:8px 0; }
 #job-inspector,#progress-desk,#chapter-desk { scroll-margin-top:16px; }
 .tool-page { padding:24px; }
 .tool-page .triplet-cards { grid-template-columns:1fr; gap:16px; }
}
@media(max-width:600px) {
 .reference-shell .topbar { padding:0 10px; gap:8px; }
 .page-heading { gap:5px; }
 .page-heading h2 { font-size:12px; }
 .header-right { gap:4px; }
 .header-right .chip,.btn-settings span { display:none; }
 .header-right .btn-settings { padding:6px; }
 .header-right .button { padding:6px 9px; font-size:11px; }
 .header-theme { padding:5px; }
 .studio-screen { padding:14px; }
 .project-source { grid-template-columns:54px minmax(0,1fr); padding:16px; gap:12px; }
 .book-mark { grid-column:1; grid-row:1/3; min-height:112px; font-size:9px; gap:12px; }
 .book-mark svg { width:30px; height:40px; }
 .source-label { grid-column:2; grid-row:1; }
 .source-label h2 { font-size:18px; }
 .file-info { grid-column:2; grid-row:2; gap:8px; }
 .file-meta strong { font-size:12px; }
 .file-actions { gap:8px; }
 .file-actions button { min-height:32px; font-size:11px; padding:4px 8px; }
 .count { font-size:11px; }
 .project-source .dropzone { grid-column:1/-1; grid-row:3; min-height:88px; }
 .project-source .dropzone>span:not(.upload-icon) { display:none; }
 .book-title-details { grid-column:1/-1; grid-row:4; margin:0; }
 .path-details { grid-column:1/-1; grid-row:5; }
 .studio-grid { display:flex; flex-direction:column; gap:16px; }
 .studio-grid>.panel { width:100%; }
 .studio-grid>.toc-panel { order:3; padding:16px; }
 .studio-grid>.config-panel { order:1; }
 .studio-grid>.progress-panel { order:2; padding:16px; }
 .setup-card { padding:16px; }
 .control-details-body { padding-inline:16px; }
 .chapter-columns,.toc-item { grid-template-columns:30px minmax(0,1fr) 74px; }
 #activity-log { max-height:230px; min-height:100px; }
 .reader-toolbar { padding:8px 14px; min-height:44px; }
 .reader-toolbar #reader-book-name,.reader-toolbar .breadcrumb>span { display:none; }
 .chapter-toolbar { padding:16px 14px; }
 #chapter-title { font-size:21px; }
 .chapter-actions { width:100%; justify-content:space-between; }
 .pane-labels { padding:8px 14px; }
 .reading-tools { gap:8px; }
 .view-switch { display:flex; width:100%; }
 .view-btn { flex:1; font-size:11px; padding-inline:6px; }
 .font-controls { margin-left:0; margin-right:auto; }
 .text-pane,.text-pane[lang=zh],.text-pane.target { padding:18px 14px; }
 .reader-footer { padding:10px 14px; gap:8px; flex-wrap:wrap; }
 .reader-empty { padding:24px; justify-content:flex-start; }
 .reader-empty h2 { font-size:23px; }
 .reader-advanced-actions { max-width:100%; }
 .tool-page { padding:20px 14px; }
 .tool-page .settings-card .modal-header { grid-template-columns:minmax(0,1fr) auto; gap:12px; padding-bottom:20px; }
 .tool-page .settings-card .modal-header .page-back { grid-column:1/-1; justify-self:start; }
 .tool-page .settings-card .modal-header h2 { font-size:22px; }
 .tool-page .settings-content.modal-body { padding:18px; }
 .backup-grid { grid-template-columns:1fr; gap:28px; }
 .backup-section input[type=file] { max-width:100%; }
 .slider-row { flex-wrap:wrap; }
 .slider-row>label:first-child { flex-basis:100%; }
 .cache-card { flex-wrap:wrap; gap:12px; }
 .cache-card button { margin-left:0!important; }
 .form-row-2 { flex-wrap:wrap; }
 .form-row-2>.form-group { min-width:100%; }
}
@media(prefers-reduced-motion:no-preference) { .app-nav { transition:transform 180ms ease-out; } button,input,select { transition:background-color 150ms,border-color 150ms; } }


/* ============================================================
   IMPECCABLE REFINEMENTS: MATCHING MOCKUP (v4.8.0)
   ============================================================ */

/* Top Card: .project-source */
.project-source {
  display: grid !important;
  grid-template-columns: minmax(0, 1.22fr) minmax(350px, 1fr) !important;
  align-items: stretch !important;
  background: var(--panel) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  margin-bottom: 20px !important;
  gap: 20px !important;
}

.source-main-col {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  padding: 16px 20px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
}

.book-cover-wrap {
  width: 104px;
  height: 148px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--raised);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-cover-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.book-cover-fallback svg {
  width: 32px;
  height: 32px;
}

.book-cover-fallback .fi {
  font-size: 32px;
}

.source-info-col {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.book-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.book-title {
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--text) !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  overflow-wrap: anywhere;
}

.book-filename {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  margin: 0 0 10px 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--raised);
  border: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}

.badge-icon {
  width: 13px;
  height: 13px;
  font-size: 13px;
  opacity: 0.85;
}

.book-title-details {
  margin-top: 4px;
}

.book-title-details summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}

.book-title-details summary:hover {
  color: var(--text);
}

.source-side-col {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  padding: 16px 20px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  width: auto !important;
  gap: 0 !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
}

.btn-danger-action {
  background: rgba(220, 53, 69, 0.12) !important;
  color: var(--danger, #ff7e86) !important;
  border: 1px solid rgba(220, 53, 69, 0.28) !important;
  border-radius: 7px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: inline-flex;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  min-height: 32px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
}

.btn-danger-action[hidden] {
  display: none !important;
}

.btn-danger-action:hover:not(:disabled) {
  background: rgba(220, 53, 69, 0.22) !important;
  border-color: rgba(220, 53, 69, 0.5) !important;
  color: #ff9da3 !important;
}

.btn-danger-action .action-icon {
  width: 13px;
  height: 13px;
  font-size: 13px;
}

.path-details {
  margin: 0 !important;
}

.settings-icon-credit {
  color: var(--text-muted);
  font-size: 11px;
  text-underline-offset: 3px;
}

.book-title-details[open] .toggle-arrow {
  transform: rotate(180deg);
}

.source-side-col .path-details[open] > summary .fi {
  transform: rotate(90deg);
}

.path-details summary {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  list-style: none !important;
}

.path-details summary:hover {
  color: var(--text) !important;
}

/* 3-Column Studio Grid */
.studio-grid {
  display: grid !important;
  grid-template-columns: minmax(280px, 1.12fr) minmax(320px, 1.25fr) minmax(280px, 1.15fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.studio-grid > .panel {
  min-width: 0 !important;
  padding: 16px !important;
  background: var(--panel) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
}

/* TOC Panel */
.toc-panel .section-heading {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

.toc-panel .section-heading h2 {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 !important;
}

.toc-panel .section-heading .count {
  background: var(--raised) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 20px !important;
  padding: 2px 10px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
}

.toc-search-row {
  margin-bottom: 10px !important;
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.search-icon {
  position: absolute;
  left: 11px;
  width: 14px;
  height: 14px;
  font-size: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-wrap input#search {
  width: 100% !important;
  height: 36px !important;
  padding: 0 12px 0 34px !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  font-size: 13px !important;
  outline: none !important;
}

.search-wrap input#search:focus {
  border-color: var(--accent-border) !important;
}

.chapter-columns {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 95px !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  color: var(--text-muted) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  background: none !important;
  border-radius: 0 !important;
  margin-bottom: 6px !important;
}

.chapter-columns > span:last-child {
  display: block !important;
  text-align: right;
}

.toc {
  display: block !important;
  max-height: calc(100vh - 380px) !important;
  min-height: 280px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

.toc-item {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 95px !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  cursor: pointer !important;
  text-align: left !important;
  width: 100% !important;
  transition: all 0.12s ease !important;
  min-height: 38px !important;
}

.toc-item:hover {
  background: var(--raised-hover) !important;
}

.toc-item.selected {
  background: var(--selection) !important;
  border-color: var(--accent) !important;
 color:var(--on-selection); }

.toc-item .num {
  font-size: 12.5px !important;
  color: var(--text-muted) !important;
  font-family: var(--sans) !important;
}

.toc-item .name {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toc-item .state {
  font-size: 11.5px !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.toc-item.done .state {
  color: var(--text) !important;
  font-weight: 500 !important;
}

.toc-item.translating .state {
  color: var(--text) !important;
  font-weight: 600 !important;
}

.toc-item.pending .state {
  color: var(--text-muted) !important;
}

.toc-item.error .state {
  color: var(--danger) !important;
}

/* Config Panel (Column 2) */
.config-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.config-panel .setup-card {
  background: var(--bg) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 10px !important;
  padding: 14px !important;
  margin: 0 !important;
}

.card-heading-text,
.setup-card summary span:first-child {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.setup-card summary {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  user-select: none !important;
  list-style: none !important;
  padding: 0 !important;
}

.glossary-desk-box .feature-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

.glossary-desk-actions {
  display: flex !important;
  gap: 12px !important;
}

.btn-text-action {
  background: none !important;
  border: none !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  padding: 0 !important;
  text-decoration: underline !important;
}

.btn-text-action:hover {
  color: var(--text) !important;
}

.desk-glossary-textarea {
  width: 100% !important;
  height: 95px !important;
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  padding: 8px 10px !important;
  font-size: 12.5px !important;
  font-family: var(--sans) !important;
  resize: vertical !important;
  box-sizing: border-box !important;
}

/* Progress Panel (Column 3) */
.progress-panel .section-heading h2 {
  font-size: 19px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 0 12px 0 !important;
}

.btn-start-hero {
  width: 100% !important;
  height: 44px !important;
  background: var(--primary-bg) !important;
  color: var(--primary-ink) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  margin-bottom: 12px !important;
  transition: opacity 0.15s !important;
}

.btn-start-hero:hover:not(:disabled) {
  opacity: 0.92 !important;
}

.btn-start-hero:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

.play-hero-icon {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px;
  fill: currentColor !important;
}

.opt-audio-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--text) !important;
  cursor: pointer !important;
  margin-bottom: 12px !important;
  user-select: none !important;
}

.progress-container .progress-label {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12.5px !important;
  color: var(--text) !important;
  margin-bottom: 6px !important;
}

.progress-bar-wrap {
  margin-bottom: 14px !important;
}

progress#progress {
  width: 100% !important;
  height: 8px !important;
  border-radius: 4px !important;
  background: var(--raised) !important;
  border: none !important;
  overflow: hidden !important;
  display: block !important;
}

progress#progress::-webkit-progress-bar {
  background: var(--raised) !important;
  border-radius: 4px !important;
}

progress#progress::-webkit-progress-value {
  background: var(--accent) !important;
  border-radius: 4px !important;
}

progress#progress::-moz-progress-bar {
  background: var(--accent) !important;
  border-radius: 4px !important;
}

.activity-checklist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-height: calc(100vh - 440px) !important;
  min-height: 200px !important;
  overflow-y: auto !important;
  font-family: var(--data) !important;
  font-size: 11.5px !important;
}

.activity-checklist li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: 3px 0 !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
}

.activity-box {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
}

.activity-checklist time {
  color: var(--text-muted) !important;
  flex-shrink: 0 !important;
}

.activity-checklist span:last-child {
  word-break: break-word !important;
}

/* Media queries update for 3-column studio */
@media(min-width: 1001px) {
  .studio-grid {
    grid-template-columns: minmax(280px, 1.12fr) minmax(320px, 1.25fr) minmax(280px, 1.15fr) !important;
  }
}

@media(max-width: 1000px) and (min-width: 701px) {
  .studio-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .studio-grid > .toc-panel {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
  }
  .studio-grid > .config-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .studio-grid > .progress-panel {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}

@media(max-width: 1100px) {
  .project-source {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .source-side-col {
    width: 100% !important;
  }
}

@media(max-width: 700px) {
  .studio-grid {
    grid-template-columns: 1fr !important;
  }
  .studio-grid > .panel {
    grid-column: 1;
    grid-row: auto;
  }
  .project-source {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }
  .source-main-col {
    gap: 12px;
  }
  .book-cover-wrap {
    width: 80px;
    height: 116px;
  }
  .book-title {
    font-size: 17px !important;
  }
  .pill-badge {
    padding: 3px 8px;
  }
}


/* Fix double dots in TOC */
.toc-item .state::before {
  display: none !important;
}
.toc-audio-status {
  display: none !important;
}
.toc-item {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 100px !important;
  gap: 8px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
}
.toc-item.selected {
  background: var(--raised-hover) !important;
  border-color: var(--accent) !important;
}
.chapter-columns {
  grid-template-columns: 38px minmax(0, 1fr) 100px !important;
  padding: 8px 12px !important;
}

/* Hide controls when job is idle to match mockup */
#job-controls:not(.active) {
  display: none !important;
}
#job-controls.active {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

/* Segmented progress bar matching mockup */
progress#progress {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 9px !important;
  background: var(--raised) !important;
  border-radius: 3px !important;
  border: none !important;
  overflow: hidden !important;
}
progress#progress::-webkit-progress-bar {
  background: var(--raised) !important;
  border-radius: 3px !important;
  background-image: repeating-linear-gradient(
    to right,
    transparent,
    transparent 5px,
    var(--bg) 5px,
    var(--bg) 7px
  ) !important;
}
progress#progress::-webkit-progress-value {
  background: var(--accent) !important;
  border-radius: 3px !important;
  background-image: repeating-linear-gradient(
    to right,
    transparent,
    transparent 5px,
    var(--bg) 5px,
    var(--bg) 7px
  ) !important;
}
progress#progress::-moz-progress-bar {
  background: var(--accent) !important;
  border-radius: 3px !important;
  background-image: repeating-linear-gradient(
    to right,
    transparent,
    transparent 5px,
    var(--bg) 5px,
    var(--bg) 7px
  ) !important;
}

/* Checklist box */
.activity-box {
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 2px !important;
  margin-right: 6px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}




/* ============================================================
   EQUAL SIZE (WIDTH & HEIGHT) FOR 3 STUDIO WORK AREAS (DESKTOP)
   ============================================================ */
@media(min-width: 901px) {
  .studio-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
    height: calc(100vh - 280px) !important;
    min-height: 480px !important;
    max-height: 640px !important;
  }

  .studio-grid > .panel {
    min-width: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Column 1: TOC Panel */
  .toc-panel {
    padding: 16px !important;
    background: var(--panel) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
  }

  .toc-panel .section-heading,
  .toc-panel .toc-search-row,
  .toc-panel .chapter-columns {
    flex-shrink: 0 !important;
  }

  .toc {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding-right: 4px !important;
  }

  /* Column 2: Config Panel (3 Cards filling equal height) */
  .config-panel {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    gap: 12px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .config-panel > #translation-controls {
    flex-shrink: 0 !important;
    background: var(--panel) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    margin: 0 !important;
  }

  .config-panel > .range-box {
    flex-shrink: 0 !important;
    background: var(--panel) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    margin: 0 !important;
  }

  .config-panel > .glossary-desk-box {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    background: var(--panel) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .glossary-desk-box .feature-header {
    flex-shrink: 0 !important;
  }

  .desk-glossary-textarea {
    flex: 1 1 0 !important;
    min-height: 60px !important;
    height: 100% !important;
    resize: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Column 3: Progress Panel */
  .progress-panel {
    padding: 16px !important;
    background: var(--panel) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .progress-panel .section-heading,
  .progress-panel .job-action {
    flex-shrink: 0 !important;
  }

  .activity-section {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    margin-top: 10px !important;
    border-top: 1px solid var(--border-subtle) !important;
    padding-top: 10px !important;
  }

  .activity-checklist {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding-right: 4px !important;
  }
}


/* Chapter range: readable fields and a shared control height. */
.range-box .feature-header {
  margin-bottom: 16px;
}
.range-box .card-heading-text {
  font-size: 18px !important;
}
.range-box .range-inputs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.range-fields-group {
  display: flex;
  flex: 1 1 248px;
  min-width: 0;
  align-items: center;
  gap: 20px;
}
.range-field-inline {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
}
.range-box input.range-num-input {
  flex: 1;
  width: 0;
  min-width: 60px;
  height: 44px;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  text-align: left;
  font-size: 16px !important;
  font-variant-numeric: tabular-nums;
}
.range-box .btn-primary-white {
  flex: 1 0 124px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--primary-bg);
  border-radius: 8px;
  background: var(--primary-bg);
  color: var(--primary-ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.range-box .btn-primary-white:hover:not(:disabled) {
  background: var(--primary-bg);
  opacity: .88;
}
/* Reader: chapter actions, audio transport and two independent reading columns. */
#reader {
  padding: 18px;
  gap: 16px;
}
#reader .chapter-toolbar {
  padding: 14px 16px;
  gap: 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--panel);
}
#reader .back-to-studio {
  padding: 10px 12px;
  min-height: 40px;
  border: 1px solid var(--border);
  background: var(--raised);
}
#reader .chapter-info { flex: 1 1 250px; }
#reader #chapter-title {
  font-size: 20px;
  line-height: 1.45;
  font-weight: 600;
  overflow-wrap: anywhere;
}
#reader .chapter-actions { gap: 12px; max-width: 100%; }
#reader .sync-label { font-size: 13px; color: var(--text); white-space: nowrap; }
#reader .reader-advanced-actions { padding: 0; gap: 10px; }
#reader .chapter-actions button { min-height: 40px; padding: 9px 12px; font-size: 13px; }
#reader #btn-reset-current { color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-soft); }
#reader #btn-reset-current:hover:not(:disabled) { border-color: var(--danger); }
#reader .chapter-arrows { display: flex; gap: 10px; }
#reader .chapter-audio-bar {
  flex-shrink: 0;
  padding: 14px 16px;
  gap: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--panel);
}
#reader .audio-player-wrap { gap: 16px; flex-wrap: wrap; }
#reader .reader-audio-controls { display: flex; flex: 1 1 460px; min-width: 0; gap: 16px; align-items: center; }
#reader.has-custom-audio #audio-player { display: none !important; }
#reader .reader-audio-play {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  min-height: 48px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 50%;
  font-size: 20px;
}
#reader .reader-audio-play .fi { margin: 0; }
#reader #reader-audio-time { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#reader #reader-audio-seek { flex: 1; min-width: 80px; width: 100%; }
#reader .reader-audio-controls input[type=range] {
  appearance: none;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
#reader .reader-audio-controls input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(to right, var(--accent) var(--range-fill, 0%), var(--border) var(--range-fill, 0%));
}
#reader .reader-audio-controls input[type=range]::-moz-range-track {
  height: 6px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(to right, var(--accent) var(--range-fill, 0%), var(--border) var(--range-fill, 0%));
}
#reader .reader-audio-controls input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
}
#reader .reader-audio-controls input[type=range]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
}
#reader .reader-audio-controls input[type=range]:disabled { opacity: .45; cursor: default; }
#reader .reader-volume { display: flex; align-items: center; gap: 12px; }
#reader #reader-audio-volume { width: 76px; }
#reader #reader-audio-speed { width: 82px; padding: 8px; }
#reader .audio-btn-group { gap: 12px; }
#reader .audio-btn-group .btn-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--raised);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}
#reader .audio-status-msg { color: var(--text-muted); font: 12px/1.5 var(--sans); }
#reader .audio-status-msg:empty { display: none; }
#reader .audio-status-msg.error { color: var(--danger); }
#reader .reading-panes {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  min-height: 240px;
}
#reader .reader-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--panel);
}
#reader .reader-column h3 {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin: 16px 20px 4px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--raised);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
#reader .text-pane {
  flex: 1;
  min-height: 0;
  height: auto;
  padding: 20px 24px;
  border: 0;
  background: transparent;
  line-height: 1.95;
}
#reader[data-view=target] .reading-panes,#reader[data-view=source] .reading-panes { grid-template-columns: minmax(0, 1fr); }
#reader[data-view=target] .source-column,#reader[data-view=source] .target-column { display: none; }
#reader .reader-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
  gap: 8px 20px;
  padding: 0;
  border: 0;
  background: transparent;
}
#reader .reading-tools { flex: 1 1 auto; width: auto; gap: 12px; order: 0; }
#reader .reader-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; color: var(--text-muted); font-size: 11px; }
#reader #reader-book-name { display: none; }
#reader #chapter-index { margin: 0; letter-spacing: 0; }
#reader .font-controls { margin-left: 0; }
#reader .view-btn,#reader .font-btn,#reader .tool-btn { min-height: 36px; }
#reader .font-btn,#reader .tool-btn { color: var(--text); background: var(--raised); }
#reader #font-val { color: var(--text-muted); }
#reader #copy-btn .fi { margin-right: 6px; }
@media(max-width: 1200px) {
  #reader .chapter-info { flex-basis: calc(100% - 210px); }
  #reader .chapter-actions { width: 100%; justify-content: flex-end; }
  #reader .sync-label { margin-right: auto; }
}
@media(max-width: 700px) {
  #reader { padding: 12px; gap: 12px; overflow-y: auto; }
  #reader .chapter-toolbar { padding: 12px; gap: 12px; }
  #reader .chapter-info { flex: 1 1 100%; }
  #reader #chapter-title { font-size: 18px; }
  #reader .chapter-actions { justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
  #reader .chapter-single-ops { flex: 1 1 100%; }
  #reader .reader-advanced-actions { width: 100%; }
  #reader .reader-advanced-actions button { flex: 1; }
  #reader .chapter-arrows { flex: 1; }
  #reader .chapter-arrows button { flex: 1; }
  #reader .reader-audio-controls { flex-wrap: wrap; gap: 12px; }
  #reader #reader-audio-seek { flex-basis: calc(100% - 180px); }
  #reader .reader-volume { flex: 1; }
  #reader #reader-audio-volume { width: 100%; }
  #reader .audio-btn-group { width: 100%; }
  #reader .audio-btn-group .btn-tool { flex: 1; }
  #reader .reading-panes { flex: 1 0 380px; min-height: 380px; gap: 10px; }
  #reader .reader-column h3 { margin: 12px 10px 0; padding: 8px; font-size: 12px; gap: 6px; }
  #reader .text-pane { padding: 14px 12px; }
  #reader .reader-footer { gap: 12px; }
  #reader .reading-tools { width: 100%; }
  #reader .reader-meta { gap: 6px 10px; }
}
/* Translation settings use the shared monochrome palette. */
.settings-page .settings-page-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.settings-page .settings-page-actions { display: flex; align-items: center; gap: 12px; }
.settings-page .settings-page-actions button { white-space: nowrap; }
.settings-page .translation-page-icon,.settings-page .translation-subtitle,.settings-page .translation-only { display: none; }
.settings-page .general-page-icon,.settings-page .general-subtitle { display: none; }
#settings-modal[data-tab=tab-tts] #btn-close-settings { display: none; }
#settings-modal[data-tab=tab-tts] .settings-card .modal-header { grid-template-columns: minmax(0, 1fr) auto; }
#settings-modal[data-tab=tab-translation] .settings-card { max-width: 1600px; background: transparent !important; }
#settings-modal:is([data-tab=tab-translation],[data-tab=tab-cache]) #btn-close-settings { display: none; }
#settings-modal:is([data-tab=tab-translation],[data-tab=tab-cache]) .settings-card .modal-header { grid-template-columns: minmax(0,1fr) auto; }
#settings-modal[data-tab=tab-translation] .settings-nav { display: none; }
#settings-modal[data-tab=tab-translation] .settings-content { padding: 0; border: 0; background: transparent; }
#settings-modal[data-tab=tab-translation] .translation-page-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--raised);
  color: var(--text);
  font-size: 24px;
}
#settings-modal[data-tab=tab-translation] .translation-subtitle { display: block; margin: 6px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
#settings-modal[data-tab=tab-translation] .translation-only { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#settings-modal[data-tab=tab-translation] .settings-back-label { display: none; }
#settings-modal[data-tab=tab-translation] .page-back { padding: 8px; }
#settings-modal[data-tab=tab-cache] .settings-nav { display: none; }
#settings-modal[data-tab=tab-cache] .general-page-icon { display: inline-flex; width: 48px; height: 48px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 10px; background: var(--raised); color: var(--text); font-size: 24px; }
#settings-modal[data-tab=tab-cache] .general-subtitle { display: block; margin: 6px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
#pane-tab-cache .appearance-settings { margin: 0 0 24px; padding: 24px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--panel); }
#pane-tab-cache .appearance-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
#pane-tab-cache .appearance-heading>.fi { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px; background: var(--accent-soft); color:var(--on-accent); font-size: 23px; }
#pane-tab-cache .appearance-heading h3 { margin: 0; color: var(--text); font-size: 21px; }
#pane-tab-cache .appearance-heading p { margin: 5px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
#pane-tab-cache .appearance-groups { display: grid; grid-template-columns: minmax(220px,.72fr) minmax(0,1.8fr); gap: 28px; }
#pane-tab-cache .appearance-group { min-width: 0; margin: 0; padding: 0; border: 0; }
#pane-tab-cache .appearance-group legend { margin-bottom: 12px; padding: 0; color: var(--text); font-size: 14px; font-weight: 600; }
#pane-tab-cache .theme-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 4px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--alt); }
#pane-tab-cache .accent-choices { display: grid; grid-template-columns: repeat(7,minmax(72px,1fr)); gap: 8px; }
#pane-tab-cache .theme-choices button,#pane-tab-cache .accent-choices button,#pane-tab-cache .custom-accent-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 82px; padding: 10px 8px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--raised); color: var(--text); font-size: 13px; cursor: pointer; text-align: center; }
#pane-tab-cache .theme-choices button { flex-direction: row; min-height: 48px; border-color: transparent; background: transparent; }
#pane-tab-cache .theme-choices button[aria-pressed=true],#pane-tab-cache .accent-choices button[aria-pressed=true],#pane-tab-cache .custom-accent-choice:has(#custom-accent:focus-visible) { border-color: var(--accent); background: var(--accent-soft); color:var(--on-accent); }
#pane-tab-cache .theme-choices button:hover,#pane-tab-cache .accent-choices button:hover,#pane-tab-cache .custom-accent-choice:hover { border-color: var(--accent-border); background: var(--raised-hover); }
#pane-tab-cache .theme-choices .fi { color: var(--accent); }
#pane-tab-cache .accent-swatch { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px #0002; }
#pane-tab-cache .accent-mono { background: #808080; }
#pane-tab-cache .custom-accent-choice { position: relative; }
#pane-tab-cache #custom-accent { width: 24px !important; height: 24px; min-height: 24px; padding: 2px; border-radius: 50%; cursor: pointer; }
#pane-tab-cache .appearance-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
#pane-tab-cache .appearance-footer>span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; }
#pane-tab-cache .appearance-footer>span .fi { color: var(--accent); }
#pane-tab-cache #btn-reset-appearance { padding: 7px 11px; color: var(--text-muted); font-size: 12px; }
#pane-tab-cache .settings-backup { margin-top: 24px; padding: 0 16px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--panel); }
#pane-tab-cache .settings-backup>summary { display: flex; align-items: center; gap: 10px; min-height: 52px; color: var(--text); cursor: pointer; font-weight: 600; }
#pane-tab-cache .settings-backup>summary .fi { color: var(--accent); }
#pane-tab-cache .settings-backup-body { padding: 0 0 16px; }
#pane-tab-cache .cache-card { padding: 16px !important; border-color: var(--border-subtle) !important; border-radius: 10px !important; background: var(--panel) !important; }
#pane-tab-cache .cache-card>div>strong { color: var(--text) !important; }
#pane-tab-cache .cache-card>div>span { color: var(--text-muted) !important; }
#pane-tab-cache .cache-card .btn-ghost { background: var(--raised); border-color: var(--border); color: var(--text); }
#pane-tab-cache .cache-card .btn-ghost:hover:not(:disabled) { background: var(--raised-hover); border-color: var(--accent-border); color: var(--text); }
#pane-tab-cache #btn-purge-data-only { background: var(--danger-soft); border-color: var(--danger); color: var(--danger) !important; }
#pane-tab-cache .cache-card.danger { border-color: var(--danger) !important; background: var(--danger-soft) !important; }
#pane-tab-cache .cache-card.danger>div>strong { color: var(--danger) !important; }
#pane-tab-cache .form-group[style*="border-top"] { margin-top: 0 !important; padding: 20px !important; border: 1px solid var(--danger) !important; border-radius: 12px; background: var(--danger-soft); }
#pane-tab-cache .form-group[style*="border-top"]>label { color: var(--text) !important; font-size: 16px; }
#pane-tab-cache .form-group[style*="border-top"] .form-hint { color: var(--text-muted) !important; }
#pane-tab-cache .settings-advanced { color: var(--text); background: var(--panel); border-color: var(--border-subtle); }
#pane-tab-cache .settings-advanced>summary { color: var(--text); }
#pane-tab-cache .settings-advanced .advanced-body { border-color: var(--border-subtle); }
#pane-tab-cache .settings-backup { color: var(--text); }
#pane-tab-cache .settings-backup :is(p,label,span,summary) { color: var(--text-muted); }
#pane-tab-cache .settings-backup h3,#pane-tab-cache .settings-backup summary { color: var(--text); }
#pane-tab-cache .settings-backup input::placeholder { color: var(--text-muted); }
#pane-tab-cache .settings-content .modal-footer { background: var(--panel); color: var(--text); border-color: var(--border-subtle); }
.translation-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
#pane-tab-translation .triplet-cards { grid-column: 1 / -1; gap: 20px; margin: 0; }
#pane-tab-translation .triplet-card,#pane-tab-translation .feature-box { min-width: 0; padding: 20px; margin: 0; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--panel); }
#pane-tab-translation .triplet-card { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
#pane-tab-translation .triplet-header,.translation-card-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
#pane-tab-translation .triplet-header { margin: 0; }
#pane-tab-translation .triplet-header>.fi,.translation-card-heading>.fi { display: inline-flex; width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px; background: var(--raised); color: var(--text); font-size: 20px; }
#pane-tab-translation h3,#pane-tab-translation .glossary-header .field-label { margin: 0; color: var(--text); font-size: 16px; font-weight: 600; line-height: 1.5; }
#pane-tab-translation .triplet-header p,.translation-card-heading p { margin: 6px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
#pane-tab-translation .beam-row { margin-top: 0; }
#pane-tab-translation .beam-row input[type=range] { background: var(--border); }
#pane-tab-translation .beam-row input[type=range]::-webkit-slider-thumb { background: var(--accent); border-color: var(--accent); box-shadow: none; }
#pane-tab-translation .beam-row input[type=range]::-moz-range-thumb { background: var(--accent); border-color: var(--accent); box-shadow: none; }
#pane-tab-translation .beam-pill { min-width: 40px; padding: 8px 12px; text-align: center; }
#pane-tab-translation .chunk-radios { display: flex; flex-wrap: wrap; gap: 16px; }
#pane-tab-translation .chunk-radio { flex: 1; gap: 8px; }
#pane-tab-translation .chunk-radio strong { font-size: 13px; }
#pane-tab-translation .norm-select { width: 100%; min-width: 0; }
#pane-tab-translation .toggle-row { padding: 8px 0; border: 0; }
#pane-tab-translation .toggle-info strong { font-size: 14px; }
#pane-tab-translation .batch-row { flex-wrap: wrap; }
#pane-tab-translation .batch-row label { color: var(--text-muted); font-size: 13px; }
#pane-tab-translation .batch-row input { max-width: 100%; }
#pane-tab-translation .glossary-box,#pane-tab-translation .reset-box,#pane-tab-translation .translation-model-card,#pane-tab-translation .page-help,.translation-advanced-links { grid-column: 1 / -1; }
#pane-tab-translation .glossary-header { gap: 16px; flex-wrap: wrap; }
#pane-tab-translation .glossary-header .translation-card-heading { margin: 0; }
#pane-tab-translation .glossary-actions { flex-wrap: wrap; }
#pane-tab-translation .glossary-actions button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 40px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--raised); text-decoration: none; }
#pane-tab-translation #btn-clear-glossary { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
#pane-tab-translation #glossary { min-height: 160px; margin-top: 20px !important; padding: 14px; background: var(--bg) !important; color: var(--text) !important; }
#pane-tab-translation .form-hint { margin: 12px 0 0 !important; }
@media(max-width: 1100px) {
  #settings-modal .settings-card .modal-header { gap: 12px; }
  #settings-modal[data-tab=tab-translation] .settings-page-actions { grid-column: 2 / -1; justify-content: flex-end; }
#pane-tab-translation .triplet-cards { gap: 16px; }
  #pane-tab-translation .triplet-header { flex-direction: column; gap: 12px; }
}
@media(max-width: 700px) {
  #settings-modal[data-tab=tab-translation] { padding: 20px 14px; }
  #settings-modal:is([data-tab=tab-translation],[data-tab=tab-cache]) .settings-card .modal-header { grid-template-columns: minmax(0,1fr); }
  #settings-modal[data-tab=tab-cache] .general-page-icon { width: 40px; height: 40px; font-size: 20px; }
  #pane-tab-cache .appearance-settings { padding: 16px; }
  #pane-tab-cache .appearance-groups { grid-template-columns: minmax(0,1fr); gap: 18px; }
  #pane-tab-cache .accent-choices { grid-template-columns: repeat(4,minmax(0,1fr)); }
  #pane-tab-cache .appearance-footer { align-items: flex-start; flex-direction: column; }
  #settings-modal .settings-card .modal-header { grid-template-columns: auto minmax(0, 1fr); padding-bottom: 20px; }
  #settings-modal .settings-page-actions { grid-column: 1 / -1; flex-wrap: wrap; }
  #settings-modal[data-tab=tab-translation] .settings-page-actions { grid-column: 1 / -1; justify-content: stretch; }
  #settings-modal .settings-page-actions button { flex: 1; }
  #settings-modal[data-tab=tab-translation] .settings-card .modal-header .page-back { grid-column: 1; }
  #settings-modal[data-tab=tab-translation] .settings-page-title { gap: 12px; }
  #settings-modal[data-tab=tab-translation] .translation-page-icon { width: 40px; height: 40px; font-size: 20px; }
.translation-tabs button { padding: 10px 6px; font-size: 12px; }
  .translation-settings-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #pane-tab-translation .triplet-cards,#pane-tab-translation[data-section=processing] .triplet-cards { grid-template-columns: minmax(0, 1fr); }
  #pane-tab-translation .triplet-card,#pane-tab-translation .feature-box { padding: 16px; }
  #pane-tab-translation .triplet-header { flex-direction: row; }
}

.translation-advanced { grid-column: 1 / -1; padding: 16px 20px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--panel); }
.translation-advanced > summary { min-height: 32px; padding-block: 6px; cursor: pointer; color: var(--text-muted); font-size: 13px; }
.translation-advanced[open] > summary { margin-bottom: 16px; }
.translation-advanced-links { margin-top: 16px; }
.settings-credits { margin: 24px 0 0; text-align: right; }
/* Voice settings: engine/voice, output, performance, and audio groups. */
.settings-page .voice-page-icon,.settings-page .voice-subtitle { display: none; }
#settings-modal[data-tab=tab-tts] .settings-card { max-width: 1600px; background: transparent !important; }
#settings-modal[data-tab=tab-tts] .settings-content { padding: 0; border: 0; background: transparent; }
#settings-modal[data-tab=tab-tts] .voice-page-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--raised);
  color: var(--text);
  font-size: 24px;
}
#settings-modal[data-tab=tab-tts] .voice-subtitle { display: block; margin: 6px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.voice-settings-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.voice-card { min-width: 0; padding: 20px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--panel); }
.voice-card--half { grid-column: span 6; }
.voice-card--third { grid-column: span 4; }
.voice-card--quarter { grid-column: span 3; }
.voice-card--full { grid-column: 1 / -1; }
.voice-card-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.voice-card-heading>.fi { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; background: var(--raised); color: var(--text); font-size: 20px; }
#pane-tab-tts .voice-card h3,#pane-tab-tts .voice-card h3 label { display: block; margin: 0; color: var(--text); font-size: 16px; font-weight: 600; line-height: 1.5; }
.voice-card-heading p { margin: 6px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
#pane-tab-tts .voice-card select,#pane-tab-tts .voice-card>input { width: 100%; min-width: 0; }
#pane-tab-tts .voice-card .form-hint { margin: 10px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
#pane-tab-tts .voice-card .toggle-row { padding: 0; border: 0; gap: 12px; }
#pane-tab-tts .voice-card .toggle-info strong { color: var(--text); font-size: 14px; font-weight: 500; }
#pane-tab-tts .voice-card .toggle-info .subtext { color: var(--text-muted); font-size: 12px; line-height: 1.7; }
#pane-tab-tts #audio-concurrency-hint { margin-left: 30px; }
#pane-tab-tts #opt-group-size { min-width: 60px; width: 64px !important; margin-inline: 4px; }
#pane-tab-tts #tts-advanced { margin-top: 20px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--panel); }
#pane-tab-tts #tts-advanced>summary { padding: 16px 20px; min-height: 48px; color: var(--text-muted); cursor: pointer; }
#pane-tab-tts #tts-advanced .advanced-body { padding: 0 20px 20px; }
#pane-tab-tts #tts-advanced .btn-preset { color: var(--text); background: var(--raised); border-color: var(--border); }
#pane-tab-tts #tts-advanced .btn-preset.active { color:var(--on-selection); background: var(--selection); border-color: var(--accent-border); }
#pane-tab-tts #tts-advanced select { background: var(--bg) !important; color: var(--text) !important; }
@media(max-width: 1000px) {
  .voice-card--third,.voice-card--quarter { grid-column: span 6; }
}
@media(max-width: 600px) {
  #settings-modal[data-tab=tab-tts] { padding: 20px 14px; }
  #settings-modal[data-tab=tab-tts] .settings-card .modal-header { grid-template-columns: minmax(0, 1fr); }
  #settings-modal[data-tab=tab-tts] .settings-page-title { gap: 12px; }
  #settings-modal[data-tab=tab-tts] .voice-page-icon { width: 40px; height: 40px; font-size: 20px; }
  .voice-settings-grid { gap: 16px; }
  .voice-card { grid-column: 1 / -1; padding: 16px; }
  #pane-tab-tts .voice-card h3,#pane-tab-tts .voice-card h3 label { font-size: 15px; }
  #pane-tab-tts #tts-advanced .slider-row { flex-wrap: wrap; }
  #pane-tab-tts #tts-advanced .slider-row label { flex-basis: 100%; min-width: 0 !important; }
}
/* Storage: connection details beside the repository file browser. */
.settings-page .storage-page-icon,.settings-page .storage-subtitle { display: none; }
#settings-modal[data-tab=tab-cloud] .settings-card { max-width: 1600px; background: transparent !important; }
#settings-modal[data-tab=tab-cloud] .settings-content { padding: 0; border: 0; background: transparent; }
#settings-modal[data-tab=tab-cloud] .modal-header { grid-template-columns: minmax(0, 1fr) auto; }
#settings-modal[data-tab=tab-cloud] #btn-close-settings { display: none; }
#settings-modal[data-tab=tab-cloud] .storage-page-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 10px; background: var(--raised); color: var(--text); font-size: 28px; }
#settings-modal[data-tab=tab-cloud] .storage-subtitle { display: block; margin: 6px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
#pane-tab-cloud { max-width: none; }
.storage-tabs { display: flex; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--border-subtle); }
.storage-tabs button { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid transparent; border-radius: 8px 8px 0 0; background: transparent; color: var(--text-muted); }
.storage-tabs button[aria-pressed=true] { background: var(--selection); color:var(--on-selection); border-bottom-color: var(--accent); }
.storage-tabs .fi { font-size: 18px; }
.storage-layout { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 20px; align-items: stretch; }
.storage-layout[data-mode=files] { grid-template-columns: minmax(0, 1fr); }
.storage-connection-panel,.storage-file-panel { min-width: 0; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--panel); }
.storage-provider { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 20px; border-bottom: 1px solid var(--border-subtle); }
.storage-provider-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; background: var(--raised); border-radius: 8px; font-size: 24px; }
#pane-tab-cloud h3 { margin: 0; color: var(--text); font-size: 16px; line-height: 1.5; font-weight: 600; }
.storage-provider p,.storage-section-heading p { margin: 6px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.storage-connection-state { margin-left: auto; padding: 6px 10px; border: 1px solid var(--border); border-radius: 20px; color: var(--text); background: var(--raised); font-size: 11px; white-space: nowrap; }
.storage-section { padding: 20px; }
.storage-section+.storage-section { border-top: 1px solid var(--border-subtle); }
.storage-section-heading { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.storage-section-heading>.fi { flex-shrink: 0; font-size: 20px; padding-top: 2px; }
#pane-tab-cloud #huggingface-key-status { margin: 12px 0 0; padding: 0; border: 0; background: transparent; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.storage-details { margin: 16px 0 0; font-size: 13px; }
.storage-details>div { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 1fr); gap: 12px; padding: 10px 0; }
.storage-details dt { color: var(--text-muted); }
.storage-details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.storage-byte-total { display: block; margin-top: 16px; font-size: 24px; font-weight: 600; }
.storage-note { margin: 8px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.storage-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.storage-quick-actions button { flex: 1 1 110px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; font-size: 12px; }
.storage-file-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; border-bottom: 1px solid var(--border-subtle); }
.storage-file-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.storage-file-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; padding: 8px 12px; font-size: 12px; }
.storage-file-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; }
.storage-navigation { display: flex; flex: 1 1 210px; min-width: 0; align-items: center; gap: 8px; }
.storage-navigation button { flex-shrink: 0; min-width: 36px; min-height: 36px; padding: 8px; }
#storage-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 12px; }
.storage-search { display: flex; flex: 1 1 160px; align-items: center; gap: 8px; min-width: 0; }
.storage-search .fi { color: var(--text-muted); }
#storage-search { width: 100%; min-width: 0; font-size: 12px; }
.storage-view-switch { display: flex; gap: 4px; }
.storage-view-switch button { padding: 8px 10px; }
.storage-view-switch button[aria-pressed=true] { color: var(--primary-ink); background: var(--primary-bg); border-color: var(--primary-bg); }
.storage-feedback { margin: 0; padding: 0 20px 16px; color: var(--text-muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.storage-feedback:empty { display: none; }
.storage-list-scroll { overflow: auto; min-height: 300px; max-height: 520px; margin: 0 16px 16px; }
.storage-file-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.storage-file-table th { position: sticky; top: 0; z-index: 1; padding: 12px 10px; color: var(--text-muted); background: var(--raised); font-weight: 500; white-space: nowrap; }
.storage-file-table td { padding: 10px; border-bottom: 1px solid var(--border-subtle); color: var(--text-muted); white-space: nowrap; }
.storage-file-table tr.selected td { background: var(--selection);  color:var(--on-selection); }
#pane-tab-cloud .storage-entry-name { display: inline-flex; align-items: center; gap: 10px; max-width: 260px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--text); font-size: 13px; text-align: left; overflow-wrap: anywhere; white-space: normal; }
.storage-entry-name .fi { flex-shrink: 0; font-size: 20px; }
.storage-entry-actions a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--text-muted); text-decoration: none; }
.storage-entry-actions a:hover { background: var(--raised); color: var(--text); border-radius: 6px; }
.storage-file-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 12px; }
.storage-pagination { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.storage-pagination button { padding: 8px 10px; }
.storage-file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding: 0 16px 16px; }
#pane-tab-cloud input[type=checkbox] { width: 16px; height: 16px; padding: 0; margin: 0; color-scheme: var(--scheme) !important; }
.storage-file-grid { max-height: 520px; overflow-y: auto; }
.storage-file-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 14px; min-width: 0; border: 1px solid var(--border-subtle); border-radius: 8px; }
.storage-file-tile small { grid-column: 2; color: var(--text-muted); }
.storage-file-tile .storage-entry-actions { grid-column: 2; }
#storage-folder-dialog { width: min(420px, calc(100% - 32px)); padding: 24px; border: 1px solid var(--border); border-radius: 12px; }
#storage-folder-dialog h3 { margin: 0 0 20px; }
#storage-folder-dialog label { display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 13px; }
#storage-folder-name { width: 100%; }
.storage-dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
@media(max-width: 1200px) {
  .storage-layout { grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); }
  .storage-file-table { min-width: 590px; }
}
@media(max-width: 900px) {
  .storage-layout { grid-template-columns: minmax(0, 1fr); }
}
@media(max-width: 600px) {
  #settings-modal[data-tab=tab-cloud] { padding: 20px 14px; }
  #settings-modal[data-tab=tab-cloud] .modal-header { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #settings-modal[data-tab=tab-cloud] .settings-page-title { gap: 12px; }
  #settings-modal[data-tab=tab-cloud] .storage-page-icon { width: 40px; height: 40px; font-size: 22px; }
  .storage-tabs button { flex: 1; padding: 10px 12px; gap: 6px; font-size: 12px; }
  .storage-layout { gap: 16px; }
  .storage-section,.storage-provider,.storage-file-header { padding: 16px; }
  .storage-file-actions { width: 100%; }
  .storage-file-actions button { flex: 1; }
  .storage-navigation { flex-basis: 100%; }
  .storage-details>div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .storage-file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Foregrounds for filled Material containers, including the neutral scheme. */
.nav-item.active,.view-btn.active,.settings-nav .modal-tab.active,.beam-pill { color:var(--on-selection); }
.toc-item.selected :is(.name,.num),.storage-file-table tr.selected td { color:var(--on-selection) !important; }
.dropzone:is(:hover,.drag) :is(strong,span,.upload-icon) { color:var(--on-selection); }
#pane-tab-cache .appearance-heading>.fi { color:var(--on-accent); }
#pane-tab-cache .theme-choices button[aria-pressed=true] .fi { color:inherit; }
#pane-tab-cache :is(.theme-choices,.accent-choices) button[aria-pressed=true]:is(:hover,:focus-visible) { background:color-mix(in srgb,var(--accent-soft) 92%,var(--on-accent) 8%); color:var(--on-accent); border-color:var(--accent); }
.nav-item.active:hover:not(:disabled) { background:color-mix(in srgb,var(--selection) 92%,var(--on-selection) 8%); color:var(--on-selection); }
[data-accent=custom] #pane-tab-cache .custom-accent-choice { background:var(--accent-soft); border-color:var(--accent); color:var(--on-accent); }
button.btn-danger-sm,button.btn-danger-sm:hover:not(:disabled),.btn-batch-delete:hover { background:var(--danger-soft); color:var(--on-danger); border-color:var(--danger); }
#pane-tab-cache .form-group[style*="border-top"]>label,#pane-tab-cache .form-group[style*="border-top"] .form-hint { color:var(--on-danger) !important; }