/* ==========================================================================
   Vozer Convert · E-Reader UI System
   Clean architecture for /convert and /{slug}/dich.
   Layout loads this file directly (not convert-base.css). Turbo Drive is off
   on convert pages; #turbo-container rules here are reader-shell paint only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) Tokens
   -------------------------------------------------------------------------- */
body.convert-app-page {
  --er-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* chapter/show .font-content default */
  --er-font-read: "Times New Roman", serif;

  --er-site-header: 50px;
  --er-app-header: 56px;
  --er-toolbar: 48px;
  --er-dock: 72px;
  --er-gutter: 16px;
  --er-read-inset: 36px;
  --er-radius: 14px;
  --er-radius-sm: 10px;
  --er-radius-pill: 999px;
  --er-max-read: 1680px;
  --er-z-header: 40;
  --er-z-toolbar: 30;
  --er-z-dock: 80;
  --er-z-dropdown: 100300;
  --er-z-modal: 100400;
  --er-z-toast: 100500;

  --er-paper: #fffaf0;
  --er-paper-soft: #fbf1df;
  --er-ink: #35281d;
  --er-muted: #7a6753;
  --er-line: rgba(90, 67, 42, 0.14);
  --er-line-strong: rgba(90, 67, 42, 0.18);
  --er-chip: #eadfce;
  --er-chip-ink: #35281d;
  --er-gold: #f59e0b;
  --er-gold-ink: #92400e;
  --er-gold-soft: #fff7ed;
  --er-tts-mark: color-mix(in srgb, var(--er-gold) 20%, transparent);
  --er-tts-ring: color-mix(in srgb, var(--er-gold) 12%, transparent);
  --er-sky: #e0f2fe;
  --er-sky-ink: #075985;
  --er-ok: #047857;
  --er-ok-soft: #ecfdf5;
  --er-busy: #b45309;
  --er-err: #be123c;
  --er-err-soft: #fff1f2;
  --er-shadow: 0 10px 30px -18px rgba(28, 25, 23, 0.35);
  --er-shadow-lg: 0 22px 50px -24px rgba(28, 25, 23, 0.45);

  /* Semantic surfaces — themeable modal/card/input chrome */
  --er-surface: var(--er-paper);
  --er-surface-2: var(--er-paper-soft);
  --er-surface-3: color-mix(in srgb, var(--er-paper-soft) 82%, var(--er-ink) 4%);
  --er-input: #fffdf8;
  --er-input-soft: var(--er-paper-soft);
  --er-scrim: rgba(28, 25, 23, 0.40);
  --er-on-gold: #7c2d12;
  --er-accent-soft: color-mix(in srgb, var(--er-gold) 12%, var(--er-paper));
  --er-mix-light: #ffffff; /* only for light-theme lifts; night overrides to transparent-ink mix */

  /* compatibility aliases used by older selectors/JS */
  --qk-reader-paper: var(--er-paper);
  --qk-reader-paper-soft: var(--er-paper-soft);
  --qk-reader-text: var(--er-ink);
  --qk-reader-muted: var(--er-muted);
  --qk-reader-line: var(--er-line);
  --vz-app-paper: var(--er-paper);
  --vz-app-soft: var(--er-paper-soft);
  --vz-app-ink: var(--er-ink);
  --vz-app-muted: var(--er-muted);
  --vz-app-line: var(--er-line);
  --vz-app-gold: var(--er-gold);
  --vz-app-gold-ink: var(--er-gold-ink);
  --vz-app-gold-soft: var(--er-gold-soft);
  --vz-app-header-h: var(--er-app-header);
  --vz-app-toolbar-h: var(--er-toolbar);
  --vz-app-dock-h: var(--er-dock);
  --convert-dock-h: var(--er-dock);

  color: var(--er-ink);
  background: var(--er-paper);
  font-family: var(--er-font-ui);
  letter-spacing: 0;
}

html[data-reader-theme="white"] body.convert-app-page {
  --er-paper: #ffffff;
  --er-paper-soft: #f8fafc;
  --er-ink: #1e293b;
  --er-muted: #64748b;
  --er-line: rgba(15, 23, 42, 0.10);
  --er-line-strong: rgba(15, 23, 42, 0.14);
  --er-chip: #f1f5f9;
  --er-chip-ink: #1e293b;
  --er-gold-soft: #fff7ed;
  --er-gold-ink: #92400e;
  --er-on-gold: #7c2d12;
  --er-tts-mark: color-mix(in srgb, #dba026 22%, transparent);
  --er-tts-ring: color-mix(in srgb, #dba026 12%, transparent);
  --er-surface: #ffffff;
  --er-surface-2: #f8fafc;
  --er-surface-3: #f1f5f9;
  --er-input: #ffffff;
  --er-input-soft: #f8fafc;
  --er-scrim: rgba(15, 23, 42, 0.42);
  --er-mix-light: #ffffff;
}
html[data-reader-theme="paper"] body.convert-app-page {
  --er-paper: #fffaf0;
  --er-paper-soft: #fbf1df;
  --er-ink: #35281d;
  --er-muted: #7a6753;
  --er-line: rgba(90, 67, 42, 0.14);
  --er-line-strong: rgba(90, 67, 42, 0.18);
  --er-chip: #eadfce;
  --er-chip-ink: #35281d;
  --er-gold-soft: #fff7ed;
  --er-gold-ink: #92400e;
  --er-on-gold: #7c2d12;
  --er-tts-mark: color-mix(in srgb, #d69a19 20%, transparent);
  --er-tts-ring: color-mix(in srgb, #d69a19 12%, transparent);
  --er-surface: #fffaf0;
  --er-surface-2: #f7f0e2;
  --er-surface-3: #f0e6d2;
  --er-input: #fffdf8;
  --er-input-soft: #f7f0e2;
  --er-scrim: rgba(28, 25, 23, 0.40);
  --er-mix-light: #ffffff;
}
html[data-reader-theme="sepia"] body.convert-app-page {
  --er-paper: #f3e2c2;
  --er-paper-soft: #ead4ad;
  --er-ink: #3b2a1a;
  --er-muted: #735833;
  --er-line: rgba(88, 58, 22, 0.17);
  --er-line-strong: rgba(88, 58, 22, 0.22);
  --er-chip: #ead4ad;
  --er-chip-ink: #3b2a1a;
  --er-gold-soft: color-mix(in srgb, #f59e0b 16%, #f3e2c2);
  --er-gold-ink: #8a4b12;
  --er-on-gold: #7c2d12;
  --er-tts-mark: color-mix(in srgb, #c0801b 22%, transparent);
  --er-tts-ring: color-mix(in srgb, #c0801b 14%, transparent);
  --er-surface: #f4ecd8;
  --er-surface-2: #ebe1c7;
  --er-surface-3: #e3d6b8;
  --er-input: #f8f1df;
  --er-input-soft: #ead4ad;
  --er-scrim: rgba(42, 30, 16, 0.42);
  --er-mix-light: #fff8e8;
}
html[data-reader-theme="ghi"] body.convert-app-page {
  --er-paper: #e7e5e4;
  --er-paper-soft: #d6d3d1;
  --er-ink: #2d3748;
  --er-muted: #64748b;
  --er-line: rgba(28, 25, 23, 0.12);
  --er-line-strong: rgba(28, 25, 23, 0.16);
  --er-chip: #d6d3d1;
  --er-chip-ink: #2d3748;
  --er-gold-soft: color-mix(in srgb, #f59e0b 14%, #e7e5e4);
  --er-gold-ink: #92400e;
  --er-on-gold: #7c2d12;
  --er-tts-mark: color-mix(in srgb, #c89b3c 22%, transparent);
  --er-tts-ring: color-mix(in srgb, #c89b3c 12%, transparent);
  --er-surface: #e7e5e4;
  --er-surface-2: #d6d3d1;
  --er-surface-3: #cfcbc8;
  --er-input: #f5f5f4;
  --er-input-soft: #e7e5e4;
  --er-scrim: rgba(28, 25, 23, 0.42);
  --er-mix-light: #ffffff;
}
html[data-reader-theme="gray"] body.convert-app-page {
  --er-paper: #e3e3e3;
  --er-paper-soft: #d8d8d8;
  --er-ink: #1f2933;
  --er-muted: #8a8f96;
  --er-line: rgba(31, 41, 51, 0.11);
  --er-line-strong: rgba(31, 41, 51, 0.16);
  --er-chip: #d8d8d8;
  --er-chip-ink: #1f2933;
  --er-gold-soft: color-mix(in srgb, #f59e0b 14%, #e3e3e3);
  --er-gold-ink: #92400e;
  --er-on-gold: #7c2d12;
  --er-tts-mark: color-mix(in srgb, #b45309 18%, transparent);
  --er-tts-ring: color-mix(in srgb, #b45309 10%, transparent);
  --er-surface: #f7f7f7;
  --er-surface-2: #eeeeee;
  --er-surface-3: #e8e8e8;
  --er-input: #ffffff;
  --er-input-soft: #eeeeee;
  --er-scrim: rgba(31, 41, 51, 0.42);
  --er-mix-light: #ffffff;
}
html[data-reader-theme="night"] body.convert-app-page {
  /* Match quykhu chapter night: deep page + warm soft text (not pure white). */
  --er-paper: #121212;
  --er-paper-soft: #181818;
  --er-ink: #b5b5b5;
  --er-muted: #808080;
  --er-line: rgba(255, 255, 255, 0.08);
  --er-line-strong: rgba(255, 255, 255, 0.12);
  --er-chip: #242424;
  --er-chip-ink: #b5b5b5;
  --er-gold: #f0b429;
  --er-gold-soft: rgba(240, 180, 41, 0.14);
  --er-gold-ink: #ffd166;
  --er-tts-mark: color-mix(in srgb, #f0b429 26%, transparent);
  --er-tts-ring: color-mix(in srgb, #f0b429 14%, transparent);
  --er-on-gold: #ffd166;
  --er-sky: rgba(14, 165, 233, 0.16);
  --er-sky-ink: #7dd3fc;
  --er-ok: #34d399;
  --er-ok-soft: rgba(16, 185, 129, 0.14);
  --er-err: #fb7185;
  --er-err-soft: rgba(244, 63, 94, 0.14);
  --er-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.55);
  --er-shadow-lg: 0 24px 50px -20px rgba(0, 0, 0, 0.65);
  --er-surface: #1d1d1d;
  --er-surface-2: #242424;
  --er-surface-3: #2a2a2a;
  --er-input: #161616;
  --er-input-soft: #1a1a1a;
  --er-scrim: rgba(0, 0, 0, 0.64);
  --er-mix-light: #2a2a2a; /* prevent pure-white lifts on dark UI */
  --er-accent-soft: rgba(240, 180, 41, 0.12);
}

/* --------------------------------------------------------------------------
   1) App shell — full-bleed reader surface
   -------------------------------------------------------------------------- */
body.convert-app-page {
  min-height: 100svh;
  /* clip + visible keeps X clipped without turning Y into a nested scrollport
     (overflow-x: hidden computes overflow-y to auto and shakes sticky chrome). */
  overflow-x: clip;
  overflow-y: visible;
}
/* Kill layout dead-space that steals reading height on mobile */
body.convert-app-page > header.vz-site-header,
body.convert-app-page > header.sticky {
  margin-bottom: 0 !important;
}
body.convert-app-page #turbo-container > .container,
body.convert-app-page .convert-simple-container > .mb-3,
body.convert-app-page .mb-3:has(> .convert-simple-root),
body.convert-app-page .mb-3:has(#convertApp) {
  margin-bottom: 0 !important;
}
/* Fixed dock already owns the bottom chrome; hide site footer here */
body.convert-app-page > footer.vz-site-footer,
body.convert-app-page > footer {
  display: none !important;
}
body.convert-app-page .container.convert-simple-container,
body.convert-app-page .convert-simple-container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}
body.convert-app-page .convert-simple-root,
body.convert-app-page .convert-app-shell {
  position: relative;
  min-height: calc(100svh - var(--er-site-header));
  background: var(--er-paper);
  color: var(--er-ink);
}
body.convert-app-page .convert-wrap { display: none !important; }

/* --------------------------------------------------------------------------
   1b) Header chrome before deferred app.css
       convert-vozer is the only render-blocking stylesheet on /convert.
       Keep the site header in a row so Tailwind utilities can arrive later.
   -------------------------------------------------------------------------- */
body.convert-app-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body.convert-app-page .vozer-skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100000;
  transform: translateY(calc(-100% - 1rem));
}
body.convert-app-page .vozer-skip-link:focus-visible {
  transform: translateY(0);
}
body.convert-app-page [x-cloak] { display: none !important; }
body.convert-app-page > header.vz-site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  overflow: visible;
}
body.convert-app-page header.vz-site-header .container > .flex {
  display: flex;
  align-items: center;
  min-height: 48px;
  gap: 0.75rem;
  padding: 0.375rem 1rem;
}
body.convert-app-page header.vz-site-header .container > .flex > a:first-child {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
body.convert-app-page header.vz-site-header .ml-auto {
  margin-left: auto;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.375rem;
}
body.convert-app-page header.vz-site-header .hidden,
body.convert-app-page header.vz-site-header .vz-desktop-search,
body.convert-app-page header.vz-site-header .vz-header-actions {
  display: none !important;
}
@media (min-width: 1024px) {
  body.convert-app-page header.vz-site-header .vz-desktop-search {
    display: flex !important;
  }
  body.convert-app-page header.vz-site-header .relative.hidden.lg\:block {
    display: block !important;
  }
  body.convert-app-page header.vz-site-header .vz-mobile-menu-toggle.lg\:hidden,
  body.convert-app-page header.vz-site-header .vz-mobile-drawer.lg\:hidden {
    display: none !important;
  }
}
@media (min-width: 1280px) {
  body.convert-app-page header.vz-site-header .vz-header-actions {
    display: flex !important;
  }
  body.convert-app-page header.vz-site-header .xl\:hidden,
  body.convert-app-page header.vz-site-header .vz-mobile-menu-toggle.xl\:hidden,
  body.convert-app-page header.vz-site-header .vz-mobile-linh-thach.xl\:hidden,
  body.convert-app-page header.vz-site-header .vz-mobile-global-chat.xl\:hidden,
  body.convert-app-page header.vz-site-header .vz-mobile-drawer.xl\:hidden {
    display: none !important;
  }
}

/* continuous paper band */
body.convert-app-page .convert-main-grid {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 calc(var(--er-dock) + 12px);
  background: var(--er-paper);
}
body.convert-app-page .convert-card.output-card {
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  min-height: calc(100svh - var(--er-site-header) - var(--er-app-header) - var(--er-toolbar) - var(--er-dock));
}

/* --------------------------------------------------------------------------
   2) App header (story map row)
   -------------------------------------------------------------------------- */
body.convert-app-page .convert-page-header,
body.convert-app-page .convert-page-header-compact {
  position: relative;
  z-index: var(--er-z-header);
  min-height: var(--er-app-header);
  display: flex;
  align-items: center;
  padding: 8px var(--er-gutter);
  background: var(--er-paper);
  border-bottom: 1px solid var(--er-line);
}
body.convert-app-page .convert-header-main,
body.convert-app-page .convert-story-map {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
body.convert-app-page .story-map-current {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: min(48vw, 360px);
  min-height: 40px;
  padding: 4px 12px 4px 6px;
  border: 1px solid var(--er-line);
  border-radius: var(--er-radius-pill);
  background: color-mix(in srgb, var(--er-paper-soft) 80%, #fff);
}
body.convert-app-page .story-map-current.is-editable {
  cursor: pointer;
  touch-action: manipulation;
}
body.convert-app-page .story-map-current.is-editable:hover {
  border-color: color-mix(in srgb, var(--er-gold) 48%, var(--er-line));
  background: color-mix(in srgb, var(--er-gold-soft) 42%, var(--er-paper-soft));
}
body.convert-app-page .story-map-current.is-editable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--er-gold) 72%, transparent);
  outline-offset: 2px;
}
body.convert-app-page .story-map-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--er-gold-soft);
  color: var(--er-gold-ink);
  flex: 0 0 auto;
}
body.convert-app-page .story-map-details {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
body.convert-app-page .story-map-details strong {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.convert-app-page .story-map-details small,
body.convert-app-page #convertStoryMapCurrentMeta,
body.convert-app-page .story-map-meta {
  display: none !important;
}
body.convert-app-page .story-map-post-link {
  display: none !important;
}
body.convert-app-page .story-map-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
/* Free-convert page already is "Truyện mới" — hide the duplicate CTA */
body.convert-app-page .convert-simple-root.is-convert-page .story-map-free,
body.convert-app-page .is-convert-page .story-map-free {
  display: none !important;
}

body.convert-app-page .story-map-free,
body.convert-app-page .story-map-post-link,
body.convert-app-page .story-map-toggle,
body.convert-app-page .convert-balance-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--er-radius-pill);
  border: 1px solid var(--er-line-strong);
  background: color-mix(in srgb, var(--er-paper-soft) 72%, #fff);
  color: var(--er-ink);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset;
}
body.convert-app-page .story-map-post-link:hover,
body.convert-app-page .story-map-toggle:hover {
  background: color-mix(in srgb, var(--er-paper-soft) 55%, var(--er-mix-light));
  border-color: color-mix(in srgb, var(--er-ink) 18%, transparent);
}
body.convert-app-page .story-map-free.is-active,
body.convert-app-page .story-map-toggle.is-open {
  background: var(--er-gold-soft);
  border-color: color-mix(in srgb, var(--er-gold) 48%, transparent);
  color: var(--er-gold-ink);
}
/* "Truyện mới" = soft create accent (not neutral chrome, not solid yellow hero) */
body.convert-app-page .story-map-free {
  padding: 0 12px;
  max-width: none;
  background: color-mix(in srgb, var(--er-gold) 16%, var(--er-surface-2));
  border-color: color-mix(in srgb, var(--er-gold) 46%, transparent);
  color: var(--er-gold-ink);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--er-gold) 18%, transparent) inset;
}
body.convert-app-page .story-map-free:hover {
  background: color-mix(in srgb, var(--er-gold) 26%, var(--er-surface-2));
  border-color: color-mix(in srgb, var(--er-gold) 62%, transparent);
  color: var(--er-gold-ink);
}
body.convert-app-page .story-map-free:active {
  background: color-mix(in srgb, var(--er-gold) 32%, var(--er-surface-2));
}

body.convert-app-page .convert-balance-chip {
  background: var(--er-gold-soft);
  border-color: color-mix(in srgb, var(--er-gold) 35%, transparent);
  color: var(--er-gold-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}
body.convert-app-page .convert-balance-chip[hidden] { display: none !important; }
body.convert-app-page .convert-balance-chip.is-flash {
  animation: erFlash .85s ease;
}
@keyframes erFlash {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); box-shadow: 0 0 0 4px color-mix(in srgb, var(--er-gold) 20%, transparent); }
  100% { transform: scale(1); }
}
body.convert-app-page .story-map-toggle small {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--er-gold) 16%, transparent);
  color: var(--er-gold-ink);
  font-size: 10.5px;
  font-weight: 850;
}
body.convert-app-page .convert-status-hidden,
body.convert-app-page #convertStatus { display: none !important; }

/* Story map menu (ported by JS) — dense dropdown list */
body.convert-app-page .story-map-picker { position: relative; }
#convertStoryMapMenu.story-map-menu,
body.convert-app-page .story-map-menu {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(360px, calc(100vw - 16px));
  max-height: min(58vh, 420px);
  padding: 8px;
  border: 1px solid var(--er-line-strong);
  border-radius: 14px;
  background: color-mix(in srgb, var(--er-paper) 98%, #fff);
  box-shadow: var(--er-shadow-lg);
  z-index: var(--er-z-dropdown);
  color: var(--er-ink);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--er-ink) 22%, transparent) color-mix(in srgb, var(--er-paper-soft) 88%, #fff);
}
#convertStoryMapMenu.story-map-menu[hidden],
body.convert-app-page .story-map-menu[hidden] {
  display: none !important;
}
#convertStoryMapMenu.story-map-menu.is-open:not([hidden]),
body.convert-story-map-open #convertStoryMapMenu.story-map-menu {
  display: flex !important;
  position: fixed !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  z-index: var(--er-z-dropdown) !important;
}
body.convert-app-page .story-map-search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--er-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--er-paper-soft) 92%, #fff);
  flex: 0 0 auto;
}
body.convert-app-page .story-map-search-ico {
  color: var(--er-muted);
  flex: 0 0 auto;
}
body.convert-app-page #convertStoryMapSearch {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--er-ink);
  font-size: 12.5px;
  font-weight: 650;
  min-width: 0;
  padding: 0;
  box-shadow: none;
}
body.convert-app-page #convertStoryMapSearch::placeholder {
  color: color-mix(in srgb, var(--er-muted) 88%, transparent);
}
body.convert-app-page .story-map-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
  padding-right: 0;
  margin-right: 0;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--er-ink) 24%, transparent) transparent;
}
/* WebKit scrollbar: match paper theme, not OS gray */
body.convert-app-page .story-map-list::-webkit-scrollbar,
#convertStoryMapMenu.story-map-menu::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body.convert-app-page .story-map-list::-webkit-scrollbar-track,
#convertStoryMapMenu.story-map-menu::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
  margin: 2px 0;
}
body.convert-app-page .story-map-list::-webkit-scrollbar-thumb,
#convertStoryMapMenu.story-map-menu::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--er-ink) 18%, var(--er-paper-soft));
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
body.convert-app-page .story-map-list::-webkit-scrollbar-thumb:hover,
#convertStoryMapMenu.story-map-menu::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--er-ink) 28%, var(--er-paper-soft));
  border: 2px solid transparent;
  background-clip: padding-box;
}
body.convert-app-page .story-map-list::-webkit-scrollbar-corner,
#convertStoryMapMenu.story-map-menu::-webkit-scrollbar-corner {
  background: transparent;
}
body.convert-app-page .story-map-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 4px;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  content-visibility: auto;
  contain-intrinsic-size: auto 46px;
}
body.convert-app-page .story-map-entry-actions {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  flex: 0 0 auto;
}
body.convert-app-page .story-map-entry-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid var(--er-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--er-paper-soft) 84%, #fff);
  color: inherit;
  text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}
body.convert-app-page .story-map-entry-main:hover {
  background: color-mix(in srgb, var(--er-paper-soft) 62%, #fff);
  border-color: color-mix(in srgb, var(--er-ink) 14%, transparent);
}
body.convert-app-page .story-map-entry-main.is-static {
  cursor: default;
}
body.convert-app-page .story-map-entry.is-local-only .story-map-entry-main {
  opacity: 0.96;
}
body.convert-app-page .story-map-entry.is-local-only .story-map-entry-meta::after {
  content: '';
}
body.convert-app-page .story-map-entry-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
body.convert-app-page .story-map-entry-title {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--er-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.convert-app-page .story-map-entry-meta {
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--er-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.convert-app-page .story-map-entry-badge {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 850;
  color: var(--er-gold-ink);
  background: var(--er-gold-soft);
  border-radius: 999px;
  padding: 2px 6px;
  white-space: nowrap;
}
body.convert-app-page .story-map-entry-post,
body.convert-app-page .story-map-entry-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid var(--er-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--er-paper-soft) 84%, #fff);
  color: var(--er-ink);
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
body.convert-app-page .story-map-entry-delete {
  min-width: 34px;
  padding: 0;
  color: var(--er-muted);
}
body.convert-app-page .story-map-entry-post::before,
body.convert-app-page .story-map-entry-delete::before {
  content: "";
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
body.convert-app-page .story-map-entry-post::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M21 14v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M21 14v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h6'/%3E%3C/svg%3E");
}
body.convert-app-page .story-map-entry-delete::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7l-.867 12.142A2 2 0 0 1 16.138 21H7.862a2 2 0 0 1-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v3M4 7h16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7l-.867 12.142A2 2 0 0 1 16.138 21H7.862a2 2 0 0 1-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v3M4 7h16'/%3E%3C/svg%3E");
}
body.convert-app-page .story-map-entry-post:hover {
  background: color-mix(in srgb, var(--er-paper-soft) 62%, #fff);
  border-color: color-mix(in srgb, var(--er-ink) 14%, transparent);
}
body.convert-app-page .story-map-entry-delete:hover {
  background: color-mix(in srgb, var(--er-err) 10%, #fff);
  border-color: color-mix(in srgb, var(--er-err) 30%, transparent);
  color: var(--er-err);
}
body.convert-app-page .story-map-entry.is-active .story-map-entry-main {
  background: var(--er-gold-soft);
  border-color: color-mix(in srgb, var(--er-gold) 38%, transparent);
}
body.convert-app-page .story-map-entry.is-active .story-map-entry-post {
  background: color-mix(in srgb, var(--er-gold-soft) 70%, #fff);
  border-color: color-mix(in srgb, var(--er-gold) 28%, transparent);
  color: var(--er-gold-ink);
}
body.convert-app-page .story-map-entry.is-active .story-map-entry-delete {
  background: color-mix(in srgb, var(--er-gold-soft) 55%, #fff);
  border-color: color-mix(in srgb, var(--er-gold) 22%, transparent);
}
body.convert-app-page .story-map-avatar { display: none !important; }
body.convert-app-page .story-map-empty {
  text-align: center;
  color: var(--er-muted);
  font-size: 12px;
  font-weight: 700;
  padding: 10px 6px;
}
body.convert-app-page .story-map-result-count {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--er-muted);
  white-space: nowrap;
}
body.convert-app-page .story-map-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 34px;
  margin-top: 2px;
  border: 1px dashed color-mix(in srgb, var(--er-ink) 14%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--er-paper-soft) 70%, #fff);
  color: var(--er-muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
body.convert-app-page .story-map-more:hover {
  color: var(--er-ink);
  border-color: color-mix(in srgb, var(--er-gold) 40%, transparent);
  background: var(--er-gold-soft);
}

body.convert-app-page .story-map-empty[hidden],
body.convert-app-page .story-map-result-count[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   3) Reader toolbar
   -------------------------------------------------------------------------- */
body.convert-app-page .reader-toolbar,
body.convert-app-page #chapterTabBar.reader-toolbar {
  position: sticky;
  top: var(--er-site-header);
  z-index: var(--er-z-toolbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--er-toolbar);
  padding: 6px var(--er-gutter);
  border-bottom: 1px solid var(--er-line);
  background: var(--er-paper);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
}
/* Do not transition transform on the site header: a transform containing
   block traps position:fixed dropdowns (notifications) under the chrome. */
body.convert-app-page .convert-page-header,
body.convert-app-page .convert-page-header-compact {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
}

/* Reading immersion: only the story-map row may slide away. Site header
   and chapter bar stay pinned together — same stack as mobile. Dock uses
   is-scroll-hidden. Do not zero --er-* heights here. */
body.convert-app-page.convert-chrome-hidden .convert-page-header,
body.convert-app-page.convert-chrome-hidden .convert-page-header-compact {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}
body.convert-app-page.convert-chrome-hidden > header.vz-site-header,
body.convert-app-page.convert-chrome-hidden > header.sticky,
body.convert-app-page.convert-chrome-hidden header.vz-site-header {
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.convert-app-page.convert-chrome-hidden .reader-toolbar,
body.convert-app-page.convert-chrome-hidden #chapterTabBar.reader-toolbar {
  top: var(--er-site-header) !important;
  z-index: 50;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.35);
}
body.convert-app-page.convert-chrome-hidden #global-chat-btn,
body.convert-app-page.convert-chrome-hidden #donate {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Desktop: same two-bar stack as mobile — site header then chapter bar, no gap. */
@media (min-width: 901px) {
  body.convert-app-page > header.vz-site-header,
  body.convert-app-page > header.sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 200;
    margin-bottom: 0 !important;
  }
  body.convert-app-page .convert-page-header,
  body.convert-app-page .convert-page-header-compact {
    position: relative !important;
    top: auto !important;
  }
  body.convert-app-page .reader-toolbar,
  body.convert-app-page #chapterTabBar.reader-toolbar {
    position: sticky !important;
    top: var(--er-site-header) !important;
    z-index: var(--er-z-toolbar);
    background: var(--er-paper) !important;
  }
  body.convert-app-page.convert-chrome-hidden .reader-toolbar,
  body.convert-app-page.convert-chrome-hidden #chapterTabBar.reader-toolbar {
    top: var(--er-site-header) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.convert-app-page > header.vz-site-header,
  body.convert-app-page .convert-page-header,
  body.convert-app-page .reader-toolbar,
  body.convert-app-page #chapterTabBar.reader-toolbar {
    transition: none;
  }
}
body.convert-app-page .reader-toolbar-left,
body.convert-app-page .reader-toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
body.convert-app-page .reader-tool-btn,
body.convert-app-page .reader-chapter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--er-radius-pill);
  border: none;
  background: var(--er-paper, #fff);
  color: var(--er-ink);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  transition: background 0.18s, box-shadow 0.18s, transform 0.15s;
}
body.convert-app-page .reader-tool-btn:hover,
body.convert-app-page .reader-chapter-chip:hover {
  background: var(--er-paper-soft, #f5f5f5);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
body.convert-app-page .reader-tool-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}
body.convert-app-page .reader-tool-btn.is-open {
  background: var(--er-gold-soft);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px color-mix(in srgb, var(--er-gold) 30%, transparent);
  color: var(--er-gold-ink);
}
body.convert-app-page .reader-chapter-chip {
  width: auto;
  min-width: 72px;
  padding: 0 10px;
  gap: 4px;
  font-size: 12px;
  font-weight: 750;
}
body.convert-app-page .reader-chapter-chip strong,
body.convert-app-page .reader-chapter-chip b {
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
body.convert-app-page .reader-progress-track,
body.convert-app-page .reader-progress-text,
body.convert-app-page .reader-stat {
  display: none;
}
/* --- TTS Play/Pause button (#readButton) ---
   Match other reader-tool-btn chrome (no yellow/red hero button).
   Keep icons/spinner absolutely centered. !important wins over JS inline
   gradients from shared tts-engine.js. */
body.convert-app-page #readButton,
body.convert-app-page #readButton.reader-play-btn {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
  border: none !important;
  padding: 0 !important;
  line-height: 0;
  font-size: 0;
  background: var(--er-paper, #fff) !important;
  color: var(--er-ink) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04) !important;
}
body.convert-app-page #readButton:hover {
  background: var(--er-paper-soft, #f5f5f5) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06) !important;
  transform: translateY(-1px);
}
body.convert-app-page #readButton:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.10) !important;
}
body.convert-app-page #readButton[aria-pressed="true"],
body.convert-app-page #readButton.is-playing {
  background: var(--er-gold-soft) !important;
  color: var(--er-gold-ink) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px color-mix(in srgb, var(--er-gold) 30%, transparent) !important;
}
body.convert-app-page #readButton svg,
body.convert-app-page #readButton #iconPlay,
body.convert-app-page #readButton #iconPause {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  fill: currentColor !important;
  color: inherit !important;
  stroke: none !important;
  pointer-events: none;
}
/* Play triangle is optically left-heavy; nudge 1px right for visual center. */
body.convert-app-page #readButton #iconPlay {
  transform: translate(calc(-50% + 1px), -50%) !important;
}
body.convert-app-page #readButton svg.hidden,
body.convert-app-page #readButton #iconPlay.hidden,
body.convert-app-page #readButton #iconPause.hidden { display: none !important; }
body.convert-app-page #readButton #ttsLoadingSpinner {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  box-sizing: border-box;
  border: 2px solid rgba(28, 25, 23, 0.18) !important;
  border-top-color: currentColor !important;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4) Reading surface
   -------------------------------------------------------------------------- */
body.convert-app-page .reader-box,
body.convert-app-page #convertReader.reader-box {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body.convert-app-page .reader-chapter-head {
  width: min(var(--er-max-read), calc(100% - 2 * var(--er-read-inset)));
  margin: 10px auto 0;
  text-align: center;
}
body.convert-app-page .reader-chapter-head h2 {
  max-width: 36rem;
  margin: 0 auto;
  font-family: var(--er-font-read);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 750;
  line-height: 1.3;
  color: var(--er-ink);
}
body.convert-app-page .reader-content,
body.convert-app-page #convertReaderContent.reader-content,
html[data-reader-theme] body.convert-app-page .reader-content,
html[data-reader-theme] body.convert-app-page #convertReaderContent.reader-content {
  width: min(var(--er-max-read), calc(100% - 2 * var(--er-read-inset)));
  margin: 0 auto;
  padding: 16px 0 28px;
  min-height: 36vh;
  font-family: var(--er-font-read);
  /* Match quykhu chapter-show; --vz-read-font-size is set by TTS cỡ chữ slider */
  font-size: var(--vz-read-font-size, 1.28rem);
  line-height: var(--vz-read-line-height, 1.95);
  letter-spacing: 0;
  font-weight: 450;
  color: var(--er-ink);
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}
body.convert-app-page .reader-content p {
  margin: 0 0 1.08em;
  text-indent: 0; /* flush left like clean e-reader */
  text-align: left;
  letter-spacing: inherit;
  word-break: break-word;
  overflow-wrap: anywhere;
}
body.convert-app-page .reader-content p:last-child {
  margin-bottom: 0.4em;
}
/* Raw translation keeps source line breaks. Each source line is already its
   own block, so default paragraph margins stay off; controlled visual rhythm
   is added only by the explicit data-raw-gap marker below. */
body.convert-app-page #convertReaderContent[data-layout="raw-lines"] > p[data-raw-line] {
  /* One source line = one visual line. Paragraph margin would invent a
     second visual newline and make repeated Convert results look unstable. */
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
  display: block !important;
  min-height: 1em;
  white-space: pre-wrap;
}
/* Empty Raw rows are real rows, not decoration. Keep browser/contenteditable
   from collapsing source gaps between neighboring lines. */
body.convert-app-page #convertReaderContent[data-layout="raw-lines"] > p[data-raw-line][data-raw-blank="1"] {
  min-height: 1em !important;
}
body.convert-app-page #convertReaderContent[data-layout="raw-lines"] > p[data-raw-line]:last-child {
  margin-bottom: 0 !important;
}
body.convert-app-page #convertReaderContent[data-layout="raw-lines"] > p[data-raw-line] br {
  line-height: inherit !important;
}
/* Reader output must remain selectable/copyable. Protection script only
   blocks browser inspection shortcuts; it never disables text selection. */
body.convert-app-page #convertReaderContent,
body.convert-app-page #convertReaderContent * {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
body.convert-app-page .reader-content > *:not(.convert-empty-state) {
  max-width: none;
}

/* End-of-chapter prev/next — refined e-reader footer */
body.convert-app-page .reader-chapter-end-nav,
body.convert-app-page #readerChapterEndNav.reader-chapter-end-nav {
  width: min(var(--er-max-read), calc(100% - 2 * var(--er-read-inset)));
  margin: 8px auto 0;
  padding: 6px 0 calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
body.convert-app-page #readerChapterEndNav[hidden] {
  display: none !important;
}
body.convert-app-page .reader-end-nav-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 28rem);
  margin: 0 auto;
  opacity: 0.72;
}
body.convert-app-page .reader-end-nav-rule-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--er-line-strong) 88%, transparent) 18%,
    color-mix(in srgb, var(--er-line-strong) 88%, transparent) 82%,
    transparent 100%
  );
}
body.convert-app-page .reader-end-nav-rule-mark {
  flex: 0 0 auto;
  font-size: 10px;
  line-height: 1;
  color: color-mix(in srgb, var(--er-gold) 70%, var(--er-muted));
  letter-spacing: 0;
  user-select: none;
}
body.convert-app-page .reader-end-nav-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
}
body.convert-app-page .reader-end-nav-btn {
  --end-nav-pad-x: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(48%, 20rem);
  min-height: 46px;
  padding: 9px var(--end-nav-pad-x);
  border: 1px solid color-mix(in srgb, var(--er-line) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--er-paper) 86%, transparent);
  color: var(--er-ink);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset,
    0 8px 22px -18px rgba(28, 25, 23, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  text-align: left;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}
body.convert-app-page .reader-end-nav-btn.is-prev {
  margin-right: auto;
}
body.convert-app-page .reader-end-nav-btn.is-next {
  margin-left: auto;
  flex-direction: row;
  text-align: right;
}
body.convert-app-page .reader-end-nav-btn.is-next .reader-end-nav-copy {
  align-items: flex-end;
}
body.convert-app-page .reader-end-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--er-paper-soft) 78%, #fff);
  color: var(--er-muted);
  border: 1px solid color-mix(in srgb, var(--er-line) 90%, transparent);
  flex: 0 0 auto;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
body.convert-app-page .reader-end-nav-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
body.convert-app-page .reader-end-nav-copy small {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--er-muted);
}
body.convert-app-page .reader-end-nav-copy strong {
  font-family: var(--er-font-read);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--er-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(34vw, 220px);
}
body.convert-app-page .reader-end-nav-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--er-gold) 42%, var(--er-line));
  background: color-mix(in srgb, var(--er-gold-soft) 72%, var(--er-paper));
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset,
    0 12px 28px -18px rgba(28, 25, 23, 0.38);
}
body.convert-app-page .reader-end-nav-btn:hover:not(:disabled) .reader-end-nav-icon {
  background: color-mix(in srgb, var(--er-gold) 16%, #fff);
  border-color: color-mix(in srgb, var(--er-gold) 34%, var(--er-line));
  color: var(--er-gold-ink);
}
body.convert-app-page .reader-end-nav-btn:hover:not(:disabled) .reader-end-nav-copy small {
  color: var(--er-gold-ink);
}
body.convert-app-page .reader-end-nav-btn:active:not(:disabled) {
  transform: translateY(0);
}
body.convert-app-page .reader-end-nav-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
body.convert-app-page .reader-end-nav-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--er-gold) 55%, transparent);
  outline-offset: 2px;
}
html[data-reader-theme="night"] body.convert-app-page .reader-end-nav-btn {
  background: color-mix(in srgb, var(--er-paper-soft) 82%, #000);
  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.55);
}
html[data-reader-theme="night"] body.convert-app-page .reader-end-nav-icon {
  background: color-mix(in srgb, var(--er-paper) 70%, #000);
}
html[data-reader-theme="night"] body.convert-app-page .reader-end-nav-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--er-gold) 14%, var(--er-paper-soft));
}
@media (max-width: 720px) {
  body.convert-app-page .reader-end-nav-row {
    gap: 8px;
  }
  body.convert-app-page .reader-end-nav-btn {
    --end-nav-pad-x: 12px;
    max-width: calc(50% - 4px);
    min-height: 44px;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  body.convert-app-page .reader-end-nav-icon {
    width: 26px;
    height: 26px;
  }
  body.convert-app-page .reader-end-nav-copy strong {
    font-size: 12.5px;
    max-width: min(28vw, 140px);
  }
}
@media (max-width: 420px) {
  body.convert-app-page .reader-end-nav-btn {
    max-width: calc(50% - 4px);
    padding-left: 10px;
    padding-right: 10px;
  }
  body.convert-app-page .reader-end-nav-copy small {
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  body.convert-app-page .reader-end-nav-copy strong {
    max-width: min(30vw, 118px);
  }
}

/* --------------------------------------------------------------------------
   Reviews + discussion — one quiet shell, theme tokens, no white chrome
   -------------------------------------------------------------------------- */
body.convert-app-page .is-convert-page .convert-discuss {
  display: none !important;
}
body.convert-app-page .convert-discuss {
  width: 100%;
  max-width: none;
  margin: 10px 0 0;
  padding: 0 0 6px;
  color: var(--er-ink);
  /* Offscreen/collapsed shell stays cheap while reading chapters. */
  content-visibility: auto;
  contain-intrinsic-size: auto 48px;
  contain: layout style;
}
body.convert-app-page .convert-discuss-shell {
  border: 1px solid var(--er-line);
  border-radius: 14px;
  background: var(--er-surface);
  overflow: hidden;
  contain: layout style;
}
body.convert-app-page .convert-discuss-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--er-muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}
body.convert-app-page .convert-discuss-toggle:hover {
  color: var(--er-gold-ink);
  background: var(--er-gold-soft);
}
body.convert-app-page .convert-discuss-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--er-gold) 50%, transparent);
  outline-offset: -2px;
}
body.convert-app-page .convert-discuss-toggle-icons {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--er-gold);
  opacity: 0.9;
}
body.convert-app-page .convert-discuss-toggle-label {
  letter-spacing: 0.01em;
}
body.convert-app-page .convert-discuss-toggle-chevron {
  margin-left: 2px;
  opacity: 0.55;
  transition: transform 0.2s ease;
}
body.convert-app-page .convert-discuss.is-open .convert-discuss-toggle {
  color: var(--er-gold-ink);
  border-bottom: 1px solid var(--er-line);
  background: var(--er-gold-soft);
}
body.convert-app-page .convert-discuss.is-open .convert-discuss-toggle-chevron {
  transform: rotate(180deg);
}
body.convert-app-page .convert-discuss.is-open {
  /* Expanded: keep intrinsic size honest so scroll anchoring stays stable. */
  contain-intrinsic-size: auto 320px;
}
body.convert-app-page .convert-discuss-panel {
  margin: 0;
  contain: layout style;
}
body.convert-app-page .convert-discuss-panel[hidden] {
  display: none !important;
}
body.convert-app-page .convert-discuss-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px 10px 6px;
}
body.convert-app-page .convert-discuss-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--er-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
body.convert-app-page .convert-discuss-tab svg {
  color: inherit;
  opacity: 0.75;
  flex: 0 0 auto;
}
body.convert-app-page .convert-discuss-tab.is-active {
  color: var(--er-gold-ink);
  background: var(--er-gold-soft);
}
body.convert-app-page .convert-discuss-tab.is-active svg {
  color: var(--er-gold);
  opacity: 1;
}
body.convert-app-page .convert-discuss-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  background: var(--er-chip);
  color: var(--er-muted);
}
body.convert-app-page .convert-discuss-tab.is-active .convert-discuss-badge {
  background: var(--er-chip);
  color: var(--er-gold-ink);
}
body.convert-app-page .convert-discuss-badge.is-reviews {
  background: var(--er-chip);
  color: var(--er-gold-ink);
}
body.convert-app-page .convert-discuss-pane {
  padding: 2px 10px 8px;
  min-height: 0;
  background: transparent;
  contain: layout style;
}
body.convert-app-page .convert-discuss-pane[hidden] {
  display: none !important;
}
body.convert-app-page .convert-discuss-composer-wrap {
  padding: 6px 0 8px;
  border-top: 1px solid var(--er-line);
  background: transparent;
  contain: layout style;
}
body.convert-app-page .convert-discuss-composer-wrap[hidden] {
  display: none !important;
}
body.convert-app-page .convert-discuss .vz-discussion-composer,
body.convert-app-page .convert-discuss .vz-discussion--modern .vz-discussion-composer {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.convert-app-page .convert-discuss .vz-discussion-replying {
  border: 1px solid color-mix(in srgb, var(--er-gold) 22%, var(--er-line)) !important;
  background: color-mix(in srgb, var(--er-gold-soft) 55%, var(--er-surface)) !important;
  color: var(--er-gold-ink) !important;
}
body.convert-app-page .convert-discuss-cancel-reply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--er-muted);
  cursor: pointer;
}
body.convert-app-page .convert-discuss-cancel-reply:hover {
  color: var(--er-err);
  background: var(--er-err-soft);
}
/* Kill discussion.css white input chrome inside convert */
body.convert-app-page .convert-discuss .vz-discussion-input-wrap,
body.convert-app-page .convert-discuss .vz-discussion--modern .vz-discussion-input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 8.5rem !important;
  box-sizing: border-box !important;
  border: 1px solid var(--er-line) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background: var(--er-input) !important;
  box-shadow: none !important;
  padding: 0 !important;
  contain: layout style !important;
}
body.convert-app-page .convert-discuss .vz-discussion-input-wrap:focus-within,
body.convert-app-page .convert-discuss .vz-discussion--modern .vz-discussion-input-wrap:focus-within {
  border-color: color-mix(in srgb, var(--er-gold) 42%, var(--er-line)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--er-gold) 12%, transparent) !important;
}
body.convert-app-page .convert-discuss .vz-discussion-input,
body.convert-app-page .convert-discuss .vz-discussion--modern .vz-discussion-input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 8.5rem !important;
  max-height: 16rem !important;
  margin: 0 !important;
  padding: 12px 12px 12px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--er-ink) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  outline: 0 !important;
  resize: none !important;
}
body.convert-app-page .convert-discuss .vz-discussion-input::placeholder,
body.convert-app-page .convert-discuss .vz-discussion--modern .vz-discussion-input::placeholder {
  color: var(--er-muted) !important;
  opacity: 1;
}
body.convert-app-page .convert-discuss-submit-slot {
  flex: 0 0 auto;
  padding: 5px 6px 5px 0;
}
body.convert-app-page .convert-discuss .vz-discussion-submit,
body.convert-app-page .convert-discuss .vz-discussion--modern .vz-discussion-submit {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--er-gold) 16%, transparent) !important;
  color: var(--er-gold) !important;
  box-shadow: none !important;
  cursor: pointer;
}
body.convert-app-page .convert-discuss .vz-discussion-submit:hover {
  background: color-mix(in srgb, var(--er-gold) 28%, transparent) !important;
  color: var(--er-gold-ink) !important;
}
body.convert-app-page .convert-discuss-login {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--er-paper-soft);
  color: var(--er-muted);
  font-size: 12.5px;
  text-align: center;
}
body.convert-app-page .convert-discuss-login a {
  color: var(--er-gold-ink);
  font-weight: 750;
  text-decoration: underline;
}
body.convert-app-page .convert-discuss-placeholder,
body.convert-app-page .convert-discuss-empty {
  margin: 0;
  padding: 14px 6px;
  text-align: center;
  color: var(--er-muted);
  font-size: 12.5px;
  line-height: 1.4;
}
body.convert-app-page .convert-discuss-hint {
  margin: 6px 0 0;
}
body.convert-app-page .convert-discuss-hint a {
  color: var(--er-gold-ink);
  font-weight: 700;
}
body.convert-app-page .convert-discuss .vz-discussion-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid var(--er-line);
  border-radius: 999px;
  background: transparent;
  color: var(--er-muted);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
body.convert-app-page .convert-discuss .vz-discussion-more:hover {
  color: var(--er-ink);
  border-color: var(--er-line-strong);
}
/* Source-reviews "Xem thêm" — override inline #fff chrome from partial */
body.convert-app-page .convert-discuss .vz-cmt__more {
  display: flex !important;
  justify-content: center !important;
  padding: 0.5rem 0 0.15rem !important;
}
body.convert-app-page .convert-discuss .vz-cmt__more-btn {
  border-radius: 999px !important;
  border: 1px solid var(--er-line) !important;
  background: transparent !important;
  color: var(--er-muted) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  box-shadow: none !important;
  cursor: pointer;
}
body.convert-app-page .convert-discuss .vz-cmt__more-btn:hover,
body.convert-app-page .convert-discuss .vz-cmt__more-btn:focus-visible {
  border-color: color-mix(in srgb, var(--er-gold) 40%, var(--er-line)) !important;
  background: color-mix(in srgb, var(--er-gold-soft) 55%, transparent) !important;
  color: var(--er-gold-ink) !important;
}
body.convert-app-page .convert-discuss .vz-cmt__more-count {
  margin-left: 0.2rem !important;
  color: var(--er-muted) !important;
  font-weight: 700 !important;
  opacity: 0.85;
}
html[data-reader-theme="night"] body.convert-app-page .convert-discuss .vz-cmt__more-btn {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--er-muted) !important;
}
html[data-reader-theme="night"] body.convert-app-page .convert-discuss .vz-cmt__more-btn:hover,
html[data-reader-theme="night"] body.convert-app-page .convert-discuss .vz-cmt__more-btn:focus-visible {
  border-color: rgba(240, 180, 41, 0.35) !important;
  background: rgba(240, 180, 41, 0.1) !important;
  color: var(--er-gold-ink) !important;
}
body.convert-app-page .convert-discuss .vz-discussion,
body.convert-app-page .convert-discuss .vz-discussion-feed,
body.convert-app-page .convert-discuss .vz-cmt,
body.convert-app-page .convert-discuss .vz-discussion--modern {
  color: var(--er-ink);
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  contain: layout style;
}
body.convert-app-page .convert-discuss .vz-discussion-feed,
body.convert-app-page .convert-discuss .vz-cmt__list {
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}
@media (prefers-reduced-motion: reduce) {
  body.convert-app-page .convert-discuss-toggle,
  body.convert-app-page .convert-discuss-toggle-chevron,
  body.convert-app-page .convert-discuss-tab {
    transition: none !important;
  }
}
body.convert-app-page .convert-discuss .vz-discussion-card,
body.convert-app-page .convert-discuss .vz-cmt__row {
  border-color: var(--er-line) !important;
  background: transparent !important;
  /* Long comment/review lists: skip offscreen paint while scrolling. */
  content-visibility: auto;
  contain-intrinsic-size: auto 72px;
  contain: layout style paint;
}
body.convert-app-page .convert-discuss .vz-cmt__user,
body.convert-app-page .convert-discuss .vz-discussion-author,
body.convert-app-page .convert-discuss .vz-discussion--modern .vz-discussion-author,
body.convert-app-page .convert-discuss .vz-discussion--modern .vz-discussion-name-row {
  color: var(--er-ink) !important;
  -webkit-text-fill-color: var(--er-ink) !important;
}
body.convert-app-page .convert-discuss .vz-cmt__pill {
  background: var(--er-chip) !important;
  color: var(--er-chip-ink) !important;
  border-color: var(--er-line) !important;
}
body.convert-app-page .convert-discuss .vz-cmt__pill.is-hot {
  background: var(--er-gold-soft) !important;
  color: var(--er-gold-ink) !important;
  border-color: color-mix(in srgb, var(--er-gold) 40%, var(--er-line)) !important;
}
body.convert-app-page .convert-discuss .vz-discussion-body,
body.convert-app-page .convert-discuss .vz-cmt__body {
  color: var(--er-ink) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.convert-app-page .convert-discuss .vz-discussion-action,
body.convert-app-page .convert-discuss .vz-cmt__time,
body.convert-app-page .convert-discuss .vz-discussion-meta,
body.convert-app-page .convert-discuss .vz-discussion-time {
  color: var(--er-muted) !important;
}
body.convert-app-page .convert-discuss .divide-y > :not([hidden]) ~ :not([hidden]),
body.convert-app-page .convert-discuss .divide-slate-100\/70 > * + * {
  border-color: var(--er-line) !important;
}
html[data-reader-theme="night"] body.convert-app-page .convert-discuss-shell {
  background: color-mix(in srgb, var(--er-paper-soft) 92%, #000);
  border-color: rgba(255, 255, 255, 0.09);
}
html[data-reader-theme="night"] body.convert-app-page .convert-discuss.is-open .convert-discuss-toggle {
  background: rgba(240, 180, 41, 0.06);
}
html[data-reader-theme="night"] body.convert-app-page .convert-discuss-composer-wrap {
  background: transparent;
  border-top-color: rgba(255, 255, 255, 0.08);
}
html[data-reader-theme="night"] body.convert-app-page .convert-discuss .vz-discussion-input-wrap,
html[data-reader-theme="night"] body.convert-app-page .convert-discuss .vz-discussion--modern .vz-discussion-input-wrap {
  background: #1a1a1a !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-reader-theme="night"] body.convert-app-page .convert-discuss .vz-cmt__user,
html[data-reader-theme="night"] body.convert-app-page .convert-discuss .vz-discussion-author,
html[data-reader-theme="night"] body.convert-app-page .convert-discuss .vz-discussion--modern .vz-discussion-author {
  color: var(--er-ink) !important;
  -webkit-text-fill-color: var(--er-ink) !important;
}
html[data-reader-theme="night"] body.convert-app-page .convert-discuss .vz-discussion-author:hover,
html[data-reader-theme="night"] body.convert-app-page .convert-discuss .vz-discussion--modern .vz-discussion-author:hover {
  color: var(--er-gold-ink) !important;
  -webkit-text-fill-color: var(--er-gold-ink) !important;
}
html[data-reader-theme="night"] body.convert-app-page .convert-discuss .vz-discussion-epithet,
html[data-reader-theme="night"] body.convert-app-page .convert-discuss .vz-discussion-cult {
  color: var(--er-gold-ink) !important;
  -webkit-text-fill-color: var(--er-gold-ink) !important;
}
html[data-reader-theme="sepia"] body.convert-app-page .convert-discuss-shell {
  background: color-mix(in srgb, var(--er-surface) 90%, var(--er-paper));
}
@media (max-width: 720px) {
  body.convert-app-page .convert-discuss {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  body.convert-app-page .convert-discuss-shell {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  body.convert-app-page .convert-discuss-pane {
    padding-left: 8px;
    padding-right: 8px;
  }
  body.convert-app-page .convert-discuss-composer-wrap {
    padding: 6px 0 8px;
  }
}
@media (pointer: coarse) {
  body.convert-app-page .convert-discuss .vz-discussion-input,
  body.convert-app-page .convert-discuss .vz-discussion--modern .vz-discussion-input {
    font-size: 16px !important;
  }
}

/* TTS active paragraph highlight — wash only, no text recolor / layout jump */
body.convert-app-page .tts-active-p,
body.convert-app-page .reader-content .tts-active-p,
body.convert-app-page .reader-content p.tts-active-p,
body.convert-app-page .convert-card .tts-active-p {
  background: var(--er-tts-mark, color-mix(in srgb, var(--er-gold) 20%, transparent)) !important;
  box-shadow: 0 0 0 3px var(--er-tts-ring, color-mix(in srgb, var(--er-gold) 12%, transparent)) !important;
  border-radius: 8px !important;
  color: inherit !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

/* Empty state */
body.convert-app-page .convert-empty-state,
body.convert-app-page #convertEmptyState {
  min-height: min(34dvh, 280px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 14px 12px 12px;
  margin: 0 auto;
  max-width: 34rem;
  background: transparent;
  border: 0;
}
body.convert-app-page .convert-empty-icon {
  width: auto;
  height: auto;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: none;
  color: var(--er-muted);
  border: 0;
  margin-bottom: 2px;
}
body.convert-app-page .convert-empty-state strong {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--er-ink);
}
body.convert-app-page .convert-empty-state p {
  margin: 0;
  color: var(--er-muted);
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 600;
  max-width: 26rem;
}
body.convert-app-page .convert-empty-notice {
  margin-top: 4px !important;
  font-size: 12px !important;
  color: color-mix(in srgb, var(--er-muted) 88%, transparent) !important;
}
body.convert-app-page .convert-empty-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 22rem);
  gap: 8px;
  margin-top: 12px;
  pointer-events: auto;
}
body.convert-app-page .convert-empty-cta {
  min-height: 44px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--er-gold);
  background: var(--er-gold);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  text-align: center;
}
body.convert-app-page .convert-empty-cta small {
  font-size: 11px;
  font-weight: 600;
  opacity: .86;
}
body.convert-app-page .convert-empty-cta.is-secondary {
  background: var(--er-paper);
  color: var(--er-ink);
  border-color: var(--er-line-strong);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Boot restore (first paint → IndexedDB/local restore)
   -------------------------------------------------------------------------- */
html.convert-is-booting body.convert-app-page #convertEmptyState,
html.convert-is-booting body.convert-app-page .convert-empty-state {
  display: none !important;
}
html.convert-is-booting body.convert-app-page #convertReader.reader-box {
  position: relative;
  min-height: min(42dvh, 360px);
}
html.convert-is-booting body.convert-app-page #convertReaderContent.reader-content {
  min-height: min(28dvh, 220px);
  opacity: 0;
  pointer-events: none;
}
html.convert-is-booting body.convert-app-page #readerChapterHead {
  opacity: 0;
}
html.convert-is-booting body.convert-app-page .convert-page-header,
html.convert-is-booting body.convert-app-page .reader-toolbar,
html.convert-is-booting body.convert-app-page .convert-command-bar,
html.convert-is-booting body.convert-app-page .convert-app-dock,
html.convert-is-booting body.convert-app-page header.vz-site-header {
  transition: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.convert-boot-settling body.convert-app-page #convertReaderContent.reader-content,
html:not(.convert-is-booting) body.convert-app-page #convertReaderContent.reader-content {
  opacity: 1;
  pointer-events: auto;
}
html.convert-boot-settling body.convert-app-page #readerChapterHead:not([hidden]),
html:not(.convert-is-booting) body.convert-app-page #readerChapterHead:not([hidden]) {
  opacity: 1;
}
body.convert-app-page .convert-boot-state,
body.convert-app-page #convertBootState {
  display: none;
  opacity: 0;
  transform: none;
  transition: none;
}
html.convert-is-booting body.convert-app-page .convert-boot-state,
html.convert-is-booting body.convert-app-page #convertBootState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(var(--er-max-read), calc(100% - 2 * var(--er-read-inset)));
  min-height: min(34dvh, 280px);
  margin: 8px auto 0;
  padding: 18px 14px 16px;
  text-align: center;
  color: var(--er-ink);
  background: transparent;
  border: 0;
  pointer-events: none;
  user-select: none;
  opacity: 1;
  transform: none;
}
html.convert-boot-settling body.convert-app-page #convertBootState:not([hidden]) {
  display: none !important;
}
/* Do not interpolate paper/ink on first token apply — that flash is the boot flicker. */
body.convert-app-page,
body.convert-app-page #turbo-container,
body.convert-app-page .convert-simple-container,
body.convert-app-page .convert-app-shell,
body.convert-app-page .convert-main-grid {
  transition: none;
}
html:not(.convert-is-booting) body.convert-app-page #convertBootState[hidden],
body.convert-app-page #convertBootState[hidden] {
  display: none !important;
}
body.convert-app-page .convert-boot-spinner {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2.5px solid color-mix(in srgb, var(--er-line-strong) 88%, transparent);
  border-top-color: color-mix(in srgb, var(--er-gold) 78%, var(--er-ink));
  animation: erSpin 0.78s linear infinite;
  margin-bottom: 2px;
}
body.convert-app-page .convert-boot-state strong {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--er-ink);
}
body.convert-app-page .convert-boot-state p {
  margin: 0;
  max-width: 22rem;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.45;
  color: var(--er-muted);
}
body.convert-app-page .convert-boot-skeleton {
  display: grid;
  gap: 8px;
  width: min(100%, 22rem);
  margin-top: 10px;
}
body.convert-app-page .convert-boot-skeleton span {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--er-paper-soft) 70%, var(--er-line)) 0%,
    color-mix(in srgb, var(--er-paper) 55%, var(--er-line)) 45%,
    color-mix(in srgb, var(--er-paper-soft) 70%, var(--er-line)) 100%
  );
  background-size: 180% 100%;
  animation: convertBootShimmer 1.15s ease-in-out infinite;
  opacity: 0.9;
}
body.convert-app-page .convert-boot-skeleton span:nth-child(1) { width: 92%; }
body.convert-app-page .convert-boot-skeleton span:nth-child(2) { width: 78%; }
body.convert-app-page .convert-boot-skeleton span:nth-child(3) { width: 86%; }
body.convert-app-page .convert-boot-skeleton span:nth-child(4) { width: 64%; }
@keyframes convertBootShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -80% 0; }
}
html[data-reader-theme="night"] body.convert-app-page .convert-boot-spinner {
  border-color: rgba(255, 255, 255, 0.12);
  border-top-color: color-mix(in srgb, var(--er-gold) 82%, #fff);
}
html[data-reader-theme="night"] body.convert-app-page .convert-boot-skeleton span {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.10) 45%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 180% 100%;
}
@media (prefers-reduced-motion: reduce) {
  body.convert-app-page .convert-boot-spinner,
  body.convert-app-page .convert-boot-skeleton span {
    animation: none;
  }
  body.convert-app-page #convertReaderContent.reader-content,
  body.convert-app-page #readerChapterHead,
  body.convert-app-page .convert-boot-state,
  body.convert-app-page #convertBootState,
  body.convert-app-page,
  body.convert-app-page #turbo-container,
  body.convert-app-page .convert-simple-container,
  body.convert-app-page .convert-app-shell,
  body.convert-app-page .convert-main-grid {
    transition: none !important;
  }
}
@media (max-width: 640px) {
  html.convert-is-booting body.convert-app-page .convert-boot-state,
  html.convert-is-booting body.convert-app-page #convertBootState {
    min-height: min(30dvh, 240px);
    padding: 14px 10px 12px;
    gap: 6px;
  }
  body.convert-app-page .convert-boot-state strong {
    font-size: 0.92rem;
  }
  body.convert-app-page .convert-boot-state p {
    font-size: 12px;
  }
}

/* Boot chrome: quiet skeleton so header/dock don't feel empty while JS restores */
html.convert-is-booting body.convert-app-page .convert-page-header,
html.convert-is-booting body.convert-app-page .convert-app-dock {
  pointer-events: none;
}
html.convert-is-booting body.convert-app-page .story-map-details strong,
html.convert-is-booting body.convert-app-page #convertStoryMapToggleText,
html.convert-is-booting body.convert-app-page #translateModelLabel,
html.convert-is-booting body.convert-app-page .convert-action-label,
html.convert-is-booting body.convert-app-page .convert-command-source > button > span {
  color: transparent !important;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--er-paper-soft) 70%, var(--er-line)) 0%,
    color-mix(in srgb, var(--er-paper) 55%, var(--er-line)) 45%,
    color-mix(in srgb, var(--er-paper-soft) 70%, var(--er-line)) 100%
  );
  background-size: 180% 100%;
  animation: convertBootShimmer 1.15s ease-in-out infinite;
}
html.convert-is-booting body.convert-app-page .story-map-icon,
html.convert-is-booting body.convert-app-page .convert-command-bar .btn,
html.convert-is-booting body.convert-app-page .convert-command-bar button,
html.convert-is-booting body.convert-app-page .model-toggle-btn {
  opacity: 0.72;
}
html.convert-is-booting body.convert-app-page #siteStorageUsage,
html.convert-is-booting body.convert-app-page #convertStoryMapCount,
html.convert-is-booting body.convert-app-page #storyMapStorageText {
  opacity: 0.35;
}
html[data-reader-theme="night"].convert-is-booting body.convert-app-page .story-map-details strong,
html[data-reader-theme="night"].convert-is-booting body.convert-app-page #convertStoryMapToggleText,
html[data-reader-theme="night"].convert-is-booting body.convert-app-page #translateModelLabel,
html[data-reader-theme="night"].convert-is-booting body.convert-app-page .convert-action-label,
html[data-reader-theme="night"].convert-is-booting body.convert-app-page .convert-command-source > button > span {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.10) 45%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 180% 100%;
}

/* Chapter open: soft content fade (no white flash) */
body.convert-app-page #convertReader.is-chapter-swapping #convertReaderContent.reader-content,
body.convert-app-page #convertReaderContent.reader-content.is-chapter-swapping {
  animation: convertChapterIn 0.22s ease both;
}
body.convert-app-page #convertReader.is-chapter-swapping #readerChapterHead:not([hidden]) {
  animation: convertChapterIn 0.22s ease both;
}
@keyframes convertChapterIn {
  from { opacity: 0.18; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.convert-app-page #convertReader.is-chapter-swapping #convertReaderContent.reader-content,
  body.convert-app-page #convertReaderContent.reader-content.is-chapter-swapping,
  body.convert-app-page #convertReader.is-chapter-swapping #readerChapterHead:not([hidden]) {
    animation: none !important;
  }
  html.convert-is-booting body.convert-app-page .story-map-details strong,
  html.convert-is-booting body.convert-app-page #convertStoryMapToggleText,
  html.convert-is-booting body.convert-app-page #translateModelLabel,
  html.convert-is-booting body.convert-app-page .convert-action-label,
  html.convert-is-booting body.convert-app-page .convert-command-source > button > span {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   5) Bottom command dock
   -------------------------------------------------------------------------- */
body.convert-app-page .convert-app-dock,
body.convert-app-page #convertAppDock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--er-z-dock);
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--er-paper) 0%, transparent) 0%,
    color-mix(in srgb, var(--er-paper) 78%, transparent) 36%,
    var(--er-paper) 100%
  );
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease;
}
body.convert-app-page .convert-app-dock.is-scroll-hidden,
body.convert-app-page #convertAppDock.is-scroll-hidden {
  transform: translateY(calc(100% + 24px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
@media (min-width: 901px) {
  body.convert-app-page .convert-app-dock .convert-storage-total {
    display: none;
  }
}
body.convert-app-page .convert-app-dock-inner,
body.convert-app-page .convert-command-bar {
  pointer-events: auto;
}
body.convert-app-page .convert-app-dock-inner {
  width: fit-content;
  max-width: calc(100vw - 20px);
  margin: 0 auto;
  overflow: visible;
}
body.convert-app-page .convert-command-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  gap: 8px;
  min-height: 52px;
  padding: 6px 12px;
  border: 1px solid var(--er-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--er-paper) 94%, #fff);
  box-shadow: 0 10px 28px -20px rgba(28, 25, 23, 0.4);
  backdrop-filter: blur(12px) saturate(1.05);
  flex-wrap: nowrap;
  overflow: visible;
}
body.convert-app-page .convert-command-group,
body.convert-app-page .convert-actions,
body.convert-app-page .convert-dock-left,
body.convert-app-page .convert-dock-center,
body.convert-app-page .convert-dock-right,
body.convert-app-page .convert-model-wrapper,
body.convert-app-page .convert-model-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
body.convert-app-page .convert-command-run {
  flex: 0 0 auto;
  justify-content: center;
}
body.convert-app-page .convert-storage-total { display: none !important; }

/* Dock roles
   1) Primary CTA  = Dịch (solid gold) — one hero action
   2) Secondary    = Convert (soft gold outline)
   3) Utility      = Soạn chương / Model / tools (neutral surface)
   4) Toggle ON    = Auto Từ Điển tint (not solid gold)
*/
body.convert-app-page .convert-command-bar .btn,
body.convert-app-page .convert-command-bar button,
body.convert-app-page .convert-command-bar .model-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  border-radius: 11px;
  border: 1px solid var(--er-line);
  background: var(--er-paper);
  color: var(--er-ink);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;
  white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, opacity .14s ease, filter .14s ease;
}
body.convert-app-page .convert-command-bar .btn:hover,
body.convert-app-page .convert-command-bar button:hover,
body.convert-app-page .convert-command-bar .model-toggle-btn:hover {
  border-color: color-mix(in srgb, var(--er-ink) 14%, var(--er-line));
  background: color-mix(in srgb, var(--er-paper-soft) 55%, #fff);
}

/* Utility: open source editor */
body.convert-app-page #toggleRawPanelBtn {
  padding: 0 14px;
  background: var(--er-paper) !important;
  border: 1px solid var(--er-line) !important;
  color: var(--er-ink) !important;
  font-weight: 800;
}
body.convert-app-page #toggleRawPanelBtn:hover {
  background: color-mix(in srgb, var(--er-paper-soft) 50%, #fff) !important;
  border-color: color-mix(in srgb, var(--er-ink) 14%, var(--er-line)) !important;
  color: var(--er-ink) !important;
  filter: none;
}
body.convert-app-page #toggleRawPanelBtn[aria-expanded="true"] {
  background: var(--er-paper-soft) !important;
  border-color: color-mix(in srgb, var(--er-ink) 18%, var(--er-line)) !important;
}

/* Utility: BYOK — same chrome as Soạn chương / Tự động */
body.convert-app-page #toggleFreeKeyPanelBtn,
body.convert-app-page .key-config-btn {
  padding: 0 12px;
  gap: 6px;
  background: var(--er-paper) !important;
  border: 1px solid var(--er-line) !important;
  color: var(--er-ink) !important;
  font-weight: 800;
}
body.convert-app-page #toggleFreeKeyPanelBtn:hover,
body.convert-app-page #toggleFreeKeyPanelBtn:focus-visible,
body.convert-app-page #toggleFreeKeyPanelBtn.is-open,
body.convert-app-page .key-config-btn:hover,
body.convert-app-page .key-config-btn:focus-visible,
body.convert-app-page .key-config-btn.is-open {
  background: color-mix(in srgb, var(--er-paper-soft) 50%, #fff) !important;
  border-color: color-mix(in srgb, var(--er-ink) 14%, var(--er-line)) !important;
  color: var(--er-ink) !important;
  outline: none !important;
  filter: none;
}
body.convert-app-page #toggleFreeKeyPanelBtn.is-open {
  background: var(--er-paper-soft) !important;
  border-color: color-mix(in srgb, var(--er-ink) 18%, var(--er-line)) !important;
}
body.convert-app-page .key-config-btn strong {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--er-chip);
  color: var(--er-ink);
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
body.convert-app-page .key-config-btn strong[hidden] {
  display: none;
}

/* Toggle: Auto Từ Điển — state chip, not a second primary CTA */
body.convert-app-page #autoGlossaryToggle.auto-glossary-toggle,
body.convert-app-page #autoGlossaryToggle {
  padding: 0 12px;
  gap: 6px;
  font-weight: 800;
  color: var(--er-muted);
  background: var(--er-paper);
  border: 1px solid var(--er-line);
  opacity: 1;
  box-shadow: none;
}
body.convert-app-page #autoGlossaryToggle.auto-glossary-toggle span,
body.convert-app-page #autoGlossaryToggle span {
  font-weight: inherit;
  letter-spacing: 0;
  text-transform: none;
}
body.convert-app-page #autoGlossaryToggle.auto-glossary-toggle svg,
body.convert-app-page #autoGlossaryToggle svg {
  flex: 0 0 auto;
  opacity: .72;
  transition: opacity .14s ease, color .14s ease;
}
body.convert-app-page #autoGlossaryToggle:not(.is-on),
body.convert-app-page #autoGlossaryToggle.auto-glossary-toggle:not(.is-on) {
  background: var(--er-paper) !important;
  color: color-mix(in srgb, var(--er-ink) 48%, var(--er-muted)) !important;
  border-color: var(--er-line) !important;
  font-weight: 750;
  opacity: .88;
  box-shadow: none !important;
}
/* ON: active chip — left gold bar + warm fill + icon pulse (not solid CTA) */
body.convert-app-page #autoGlossaryToggle.is-on,
body.convert-app-page #autoGlossaryToggle.auto-glossary-toggle.is-on {
  position: relative;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--er-gold-soft) 88%, #fff) 0%,
    color-mix(in srgb, var(--er-gold) 14%, var(--er-gold-soft)) 100%
  ) !important;
  border-color: color-mix(in srgb, var(--er-gold) 58%, var(--er-line)) !important;
  color: var(--er-gold-ink) !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  box-shadow:
    inset 3px 0 0 0 var(--er-gold),
    0 0 0 1px color-mix(in srgb, var(--er-gold) 18%, transparent) !important;
}
body.convert-app-page #autoGlossaryToggle.is-on span,
body.convert-app-page #autoGlossaryToggle.auto-glossary-toggle.is-on span {
  color: var(--er-gold-ink) !important;
  font-weight: 900 !important;
}
body.convert-app-page #autoGlossaryToggle.is-on svg,
body.convert-app-page #autoGlossaryToggle.auto-glossary-toggle.is-on svg {
  opacity: 1 !important;
  color: #d97706 !important;
  stroke: currentColor;
  animation: autoGlossIconPulse 1.8s ease-in-out infinite;
}
body.convert-app-page #autoGlossaryToggle:not(.is-on):hover,
body.convert-app-page #autoGlossaryToggle.auto-glossary-toggle:not(.is-on):hover {
  color: var(--er-ink) !important;
  border-color: color-mix(in srgb, var(--er-ink) 16%, var(--er-line)) !important;
  background: color-mix(in srgb, var(--er-paper-soft) 50%, #fff) !important;
  opacity: 1;
}
body.convert-app-page #autoGlossaryToggle.is-on:hover,
body.convert-app-page #autoGlossaryToggle.auto-glossary-toggle.is-on:hover {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--er-gold-soft) 70%, #fff) 0%,
    color-mix(in srgb, var(--er-gold) 22%, var(--er-gold-soft)) 100%
  ) !important;
  border-color: color-mix(in srgb, var(--er-gold) 68%, var(--er-line)) !important;
  color: var(--er-gold-ink) !important;
  filter: none;
}
/* allow only decorative icon animation; no Bật/Tắt pseudo labels */
body.convert-app-page #autoGlossaryToggle::before,
body.convert-app-page #autoGlossaryToggle::after,
body.convert-app-page #autoGlossaryToggle.auto-glossary-toggle::before,
body.convert-app-page #autoGlossaryToggle.auto-glossary-toggle::after {
  content: none !important;
  display: none !important;
}
@keyframes autoGlossIconPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .72; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  body.convert-app-page #autoGlossaryToggle.is-on svg,
  body.convert-app-page #autoGlossaryToggle.auto-glossary-toggle.is-on svg {
    animation: none !important;
  }
}

body.convert-app-page .model-toggle-btn,
body.convert-app-page #translateModelToggle {
  min-width: 0 !important;
  width: fit-content !important;
  max-width: 140px !important;
  padding: 0 10px !important;
  justify-content: center !important;
  gap: 4px !important;
  position: relative;
  z-index: 2;
  background: var(--er-paper) !important;
  border: 1px solid var(--er-line) !important;
  color: var(--er-ink) !important;
  font-weight: 800;
}
body.convert-app-page #translateModelLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* PRIMARY: Dịch — only solid gold CTA on the dock */
body.convert-app-page #runTranslateBtn {
  min-width: 88px;
  padding: 0 16px;
  background: var(--er-gold) !important;
  border-color: var(--er-gold) !important;
  color: #fff !important;
  font-weight: 900;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset;
}
body.convert-app-page #runTranslateBtn:hover {
  background: color-mix(in srgb, var(--er-gold) 88%, #000) !important;
  border-color: color-mix(in srgb, var(--er-gold) 88%, #000) !important;
  color: #fff !important;
  filter: none;
}
html[data-reader-theme="night"] body.convert-app-page #runTranslateBtn {
  background: var(--er-gold) !important;
  border-color: var(--er-gold) !important;
  color: #fff !important;
}

/* Secondary action: Convert — soft outline, not competing gold fill */
body.convert-app-page #runConvertBtn {
  padding: 0 12px;
  background: var(--er-paper) !important;
  border: 1px solid color-mix(in srgb, var(--er-gold) 38%, var(--er-line)) !important;
  color: var(--er-gold-ink) !important;
  font-weight: 850;
}
body.convert-app-page #runConvertBtn:hover {
  background: var(--er-gold-soft) !important;
  border-color: color-mix(in srgb, var(--er-gold) 55%, var(--er-line)) !important;
  color: var(--er-gold-ink) !important;
  filter: none;
}
body.convert-app-page #runConvertBtn svg {
  color: currentColor;
}

/* Icon tools */
body.convert-app-page #clearConvertBtn,
body.convert-app-page #theme-toggle {
  width: 40px;
  min-width: 40px;
  padding: 0;
}
body.convert-app-page #clearConvertBtn.convert-icon-btn,
body.convert-app-page #clearConvertBtn {
  background: var(--er-paper) !important;
  border: 1px solid var(--er-line) !important;
  color: var(--er-muted) !important;
}
body.convert-app-page #clearConvertBtn:hover {
  color: var(--er-err) !important;
  border-color: color-mix(in srgb, var(--er-err) 28%, var(--er-line)) !important;
  background: color-mix(in srgb, var(--er-err) 8%, #fff) !important;
}
body.convert-app-page .convert-action-spinner { display: none; }
body.convert-app-page #runTranslateBtn.is-loading .convert-action-icon,
body.convert-app-page #runConvertBtn.is-loading .convert-action-icon { display: none; }
body.convert-app-page #runTranslateBtn.is-loading .convert-action-spinner,
body.convert-app-page #runConvertBtn.is-loading .convert-action-spinner {
  display: inline-block;
  animation: erSpin .8s linear infinite;
}
@keyframes erSpin { to { transform: rotate(360deg); } }

/* Status toast: fixed overlay ABOVE dock — never expands dock / never shifts layout */
body.convert-app-page #convertStatusDock.convert-status-chip,
body.convert-app-page #convertStatusDock.convert-status-toast,
#convertStatusDock.convert-status-chip,
#convertStatusDock.convert-status-toast {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(var(--er-dock, 72px) + 14px + env(safe-area-inset-bottom, 0px)) !important;
  top: auto !important;
  transform: translateX(-50%) translateY(8px);
  z-index: var(--er-z-toast, 100500) !important;
  width: max-content;
  max-width: min(92vw, 420px);
  margin: 0 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  border: 1px solid var(--er-line) !important;
  background: color-mix(in srgb, var(--er-paper) 94%, #fff) !important;
  color: var(--er-ink) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 10px 28px -16px rgba(28, 25, 23, 0.45);
  pointer-events: none !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
body.convert-app-page #convertStatusDock:empty,
body.convert-app-page #convertStatusDock[hidden],
#convertStatusDock:empty,
#convertStatusDock[hidden] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
body.convert-app-page #convertStatusDock.convert-status-chip:not([hidden]):not(:empty),
body.convert-app-page #convertStatusDock.convert-status-toast:not([hidden]):not(:empty),
#convertStatusDock:not([hidden]):not(:empty) {
  display: block !important;
}
body.convert-app-page #convertStatusDock.is-visible:not([hidden]):not(:empty),
#convertStatusDock.is-visible:not([hidden]):not(:empty) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}
/* Follow bottom dock auto-hide: scroll down hides both, scroll up restores both. */
body.convert-app-page #convertStatusDock.is-visible.is-scroll-hidden:not([hidden]):not(:empty),
body.convert-app-page #convertStatusDock.convert-status-chip.is-visible.is-scroll-hidden:not([hidden]):not(:empty),
body.convert-app-page #convertStatusDock.convert-status-toast.is-visible.is-scroll-hidden:not([hidden]):not(:empty),
#convertStatusDock.is-visible.is-scroll-hidden:not([hidden]):not(:empty),
#convertStatusDock.convert-status-chip.is-scroll-hidden,
#convertStatusDock.convert-status-toast.is-scroll-hidden,
body.convert-app-page.convert-dock-hidden #convertStatusDock.is-visible:not([hidden]):not(:empty),
body.convert-app-page.convert-chrome-hidden #convertStatusDock.is-visible:not([hidden]):not(:empty),
body.convert-app-page.convert-dock-hidden #convertStatusDock,
body.convert-app-page.convert-chrome-hidden #convertStatusDock {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-50%) translateY(calc(100% + 24px)) !important;
  pointer-events: none !important;
}
body.convert-app-page #convertStatusDock[data-kind="busy"],
#convertStatusDock[data-kind="busy"] {
  color: #92400e !important;
  background: #fffbeb !important;
  border-color: rgba(245, 158, 11, 0.32) !important;
}
body.convert-app-page #convertStatusDock[data-kind="ok"],
body.convert-app-page #convertStatusDock.is-ok,
#convertStatusDock[data-kind="ok"],
#convertStatusDock.is-ok {
  color: #047857 !important;
  background: #ecfdf5 !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}
body.convert-app-page #convertStatusDock[data-kind="err"],
#convertStatusDock[data-kind="err"] {
  color: #be123c !important;
  background: #fff1f2 !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
}
body.convert-app-page #convertStatusDock[data-kind="info"],
#convertStatusDock[data-kind="info"],
body.convert-app-page #convertStatusDock:not([data-kind]),
#convertStatusDock:not([data-kind]) {
  color: var(--er-ink) !important;
}
/* Long messages can wrap without breaking dock */
body.convert-app-page #convertStatusDock.convert-status-toast.is-visible,
#convertStatusDock.convert-status-toast.is-visible {
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  body.convert-app-page #convertStatusDock.convert-status-chip,
  body.convert-app-page #convertStatusDock.convert-status-toast,
  #convertStatusDock.convert-status-chip,
  #convertStatusDock.convert-status-toast {
    bottom: calc(var(--er-dock, 56px) + 10px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: min(94vw, 360px);
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
}

body.convert-app-page.is-workspace-busy .convert-command-bar #clearConvertBtn,
body.convert-app-page.is-workspace-busy .convert-command-bar #autoGlossaryToggle,
body.convert-app-page.is-workspace-busy .convert-command-bar .model-toggle-btn {
  opacity: .62;
}

/* --------------------------------------------------------------------------
   6) Model menu
   -------------------------------------------------------------------------- */
#translateModelMenu.model-menu,
body.convert-app-page .model-menu {
  box-sizing: border-box;
  width: min(340px, calc(100vw - 16px));
  max-height: min(48vh, 380px);
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--er-line-strong);
  border-radius: 14px;
  background: color-mix(in srgb, var(--er-paper) 97%, #fff);
  box-shadow: var(--er-shadow-lg);
  z-index: var(--er-z-dropdown);
}
#translateModelMenu.model-menu[hidden],
#translateModelMenu.model-menu:not(.is-open) {
  display: none !important;
}
#translateModelMenu.model-menu.is-open:not([hidden]),
body.convert-model-menu-open #translateModelMenu.model-menu.is-open:not([hidden]) {
  display: block !important;
  position: fixed !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
  z-index: var(--er-z-dropdown) !important;
}
@media (min-width: 901px) {
  #translateModelMenu.model-menu,
  body.convert-app-page .model-menu,
  body.convert-app-page #translateModelMenu.model-menu {
    width: min(480px, calc(100vw - 32px));
    max-height: min(62vh, 540px);
    padding: 8px;
  }
}
body.convert-app-page #translateModelMenu .model-menu-item,
body.convert-app-page #translateModelMenu .model-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--er-ink);
  text-align: left;
  cursor: pointer;
}
body.convert-app-page #translateModelMenu .model-menu-item:hover {
  background: var(--er-gold-soft);
}
body.convert-app-page #translateModelMenu .model-menu-item.is-active {
  background: var(--er-gold-soft);
  color: var(--er-gold-ink);
}
body.convert-app-page #translateModelMenu .model-option-main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.convert-app-page #translateModelMenu .model-option-name {
  font-size: 13px;
  font-weight: 800;
}
body.convert-app-page #translateModelMenu .model-option-note {
  font-size: 11px;
  color: var(--er-muted);
}
body.convert-app-page #translateModelMenu .model-option-cost {
  font-size: 11px;
  font-weight: 800;
  color: var(--er-muted);
  white-space: nowrap;
}
body.convert-app-page #translateModelMenu .model-option-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--er-line-strong);
  flex: 0 0 auto;
}
body.convert-app-page #translateModelMenu .is-active .model-option-check {
  background: var(--er-gold);
  border-color: var(--er-gold);
}
body.convert-model-menu-open .convert-app-dock,
body.convert-model-menu-open .convert-app-dock-inner { pointer-events: none !important; }
body.convert-model-menu-open .convert-app-dock .convert-command-bar,
body.convert-model-menu-open #translateModelToggle,
body.convert-model-menu-open #translateModelMenu { pointer-events: auto !important; }

/* --------------------------------------------------------------------------
   7) Compose / tools / find / key modals
   -------------------------------------------------------------------------- */
/* Full-screen scrims that are NOT nested under a fixed modal root */
body.convert-app-page .raw-panel-backdrop:not([hidden]),
body.convert-app-page .free-key-modal-backdrop:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  z-index: calc(var(--er-z-modal) - 1) !important;
  background: rgba(15, 23, 42, 0.42);
  pointer-events: auto;
}
/* Nested backdrops: absolute under the fixed modal root so dialog stacks above */
body.convert-app-page .replace-modal .replace-backdrop,
body.convert-app-page .replace-modal .convert-confirm-backdrop,
body.convert-app-page .convert-confirm-backdrop,
#findReplaceModal .replace-backdrop,
#convertConfirmModal .replace-backdrop,
#convertConfirmModal .convert-confirm-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: rgba(15, 23, 42, 0.42);
  pointer-events: auto;
}
body.convert-app-page .input-card.is-raw-collapsed { display: none !important; }
body.convert-app-page .convert-simple-root.is-raw-modal-open .input-card,
body.convert-raw-modal-open .input-card#rawPanelCard {
  position: fixed !important;
  /* Keep clear of sticky site header + convert app header + bottom dock */
  top: calc(var(--er-site-header) + var(--er-app-header) + 12px) !important;
  bottom: calc(var(--er-dock) + 12px + env(safe-area-inset-bottom, 0px)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(920px, calc(100vw - 24px)) !important;
  height: auto !important;
  max-height: none !important;
  z-index: var(--er-z-modal) !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid var(--er-line-strong) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--er-paper) 97%, #fff) !important;
  box-shadow: var(--er-shadow-lg) !important;
  overflow: hidden !important;
}
body.convert-app-page .replace-modal:not([hidden]),
body.convert-app-page #convertToolsModal:not([hidden]),
body.convert-app-page #findReplaceModal:not([hidden]),
#findReplaceModal.replace-modal:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--er-z-modal) !important;
  display: grid !important;
  place-items: center;
  padding: 12px;
  background: transparent;
  pointer-events: auto !important;
  opacity: 1 !important;
  filter: none !important;
  isolation: isolate;
}
body.convert-app-page .replace-modal[hidden],
body.convert-app-page #findReplaceModal[hidden],
#findReplaceModal[hidden] {
  display: none !important;
}
body.convert-app-page #rawPanelCard .convert-compose-tabs,
body.convert-app-page #rawPanelCard .convert-import-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin: 0 12px 10px;
  padding: 3px;
  border: 1px solid var(--er-line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--er-paper-soft) 84%, #fff);
  flex: 0 0 auto;
}
body.convert-app-page #rawPanelCard .convert-import-tab {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--er-muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
body.convert-app-page #rawPanelCard .convert-import-tab svg { width: 15px; height: 15px; }
body.convert-app-page #rawPanelCard .convert-import-tab:hover,
body.convert-app-page #rawPanelCard .convert-import-tab.is-active {
  background: var(--er-paper);
  color: var(--er-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .07);
}
body.convert-app-page #rawPanelCard .convert-import-tab.is-active { color: #286f66; }
body.convert-app-page #rawPanelCard .convert-import-tab.is-loading {
  color: var(--er-ink);
  cursor: wait;
}
body.convert-app-page #rawPanelCard .convert-import-tab.is-loading::after {
  content: '';
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: convert-import-module-spin .72s linear infinite;
}
body.convert-app-page #rawPanelCard .convert-import-module-loading {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 12px 8px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, #3f8f83 24%, var(--er-line));
  border-radius: 9px;
  background: color-mix(in srgb, #3f8f83 7%, var(--er-paper));
  color: var(--er-muted);
  font-size: 11px;
  font-weight: 750;
}
body.convert-app-page #rawPanelCard .convert-import-module-loading[hidden] { display: none !important; }
body.convert-app-page #rawPanelCard.is-import-module-pending .convert-import-body {
  pointer-events: none;
  user-select: none;
}
body.convert-app-page #rawPanelCard .convert-import-module-spinner {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, #3f8f83 28%, transparent);
  border-top-color: #3f8f83;
  border-radius: 50%;
  animation: convert-import-module-spin .72s linear infinite;
}
@keyframes convert-import-module-spin { to { transform: rotate(360deg); } }
body.convert-app-page #rawPanelCard .convert-import-body {
  min-height: 0;
  overflow: auto;
  padding: 12px !important;
}
body.convert-app-page #rawPanelCard .convert-import-panel[hidden] {
  display: none !important;
  content-visibility: hidden;
}
body.convert-app-page #rawPanelCard .convert-import-panel {
  display: grid;
  gap: 10px;
}
body.convert-app-page #rawPanelCard .convert-import-dropzone {
  min-height: 132px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 16px 12px;
  border: 1px dashed color-mix(in srgb, #3f8f83 44%, var(--er-line-strong));
  border-radius: 12px;
  background: color-mix(in srgb, #3f8f83 5%, var(--er-paper-soft));
  color: var(--er-ink);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
body.convert-app-page #rawPanelCard .convert-import-dropzone:hover,
body.convert-app-page #rawPanelCard .convert-import-dropzone.is-dragging {
  border-color: #3f8f83;
  background: color-mix(in srgb, #3f8f83 10%, var(--er-paper));
}
body.convert-app-page #rawPanelCard .convert-import-dropzone.is-import-busy {
  cursor: wait;
  opacity: .62;
  pointer-events: none;
}
body.convert-app-page #rawPanelCard .convert-import-drop-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, #3f8f83 13%, var(--er-paper));
  color: #2c766b;
}
body.convert-app-page #rawPanelCard .convert-import-dropzone strong { font-size: 13px; }
body.convert-app-page #rawPanelCard .convert-import-dropzone small,
body.convert-app-page #rawPanelCard .convert-import-summary small {
  color: var(--er-muted);
  font-size: 10.5px;
}
body.convert-app-page #rawPanelCard .convert-import-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
body.convert-app-page #rawPanelCard .convert-import-mode label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--er-line-strong);
  border-radius: 9px;
  color: var(--er-muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
}
body.convert-app-page #rawPanelCard .convert-import-mode label > span {
  position: relative;
  z-index: 1;
  line-height: 1.2;
  white-space: nowrap;
}
body.convert-app-page #rawPanelCard .convert-import-mode label:has(input:checked) {
  border-color: color-mix(in srgb, #3f8f83 48%, var(--er-line-strong));
  background: color-mix(in srgb, #3f8f83 9%, var(--er-paper));
  color: #286f66;
}
body.convert-app-page #rawPanelCard .convert-import-mode input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.convert-app-page #rawPanelCard .convert-import-url-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
body.convert-app-page #rawPanelCard .convert-import-url-label-row #convertImportUrlLabel {
  color: var(--er-muted);
  font-size: 11px;
  font-weight: 800;
}
body.convert-app-page #rawPanelCard .convert-import-rate,
body.convert-app-page #rawPanelCard #convertImportPrice {
  flex-shrink: 0;
  max-width: min(58vw, 18rem);
  margin: 0;
  padding: 3px 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--er-line-strong) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--er-paper-soft) 82%, transparent);
  color: var(--er-muted);
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.25;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.convert-app-page #rawPanelCard .convert-import-rate.is-checkout {
  border-color: color-mix(in srgb, #3f8f83 42%, var(--er-line));
  background: color-mix(in srgb, #3f8f83 12%, var(--er-paper));
  color: #286f66;
  font-weight: 800;
}
body.convert-app-page #rawPanelCard .convert-import-rate.is-formula {
  border-color: color-mix(in srgb, #b45309 28%, var(--er-line));
  background: color-mix(in srgb, #f59e0b 9%, var(--er-paper));
  color: #9a3412;
}
body.convert-app-page #rawPanelCard .convert-reader-toolbar {
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: 8px;
  width: 100%;
}
body.convert-app-page #rawPanelCard .convert-reader-toolbar > .convert-import-secondary {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  text-align: center;
}
body.convert-app-page #rawPanelCard .convert-import-book-hint {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, #3f8f83 22%, var(--er-line));
  border-radius: 10px;
  background: color-mix(in srgb, #3f8f83 8%, var(--er-paper));
  color: var(--er-muted);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
body.convert-app-page #rawPanelCard .convert-import-book-hint[hidden] {
  display: none !important;
}
body.convert-app-page #rawPanelCard .convert-import-book-hint strong {
  color: var(--er-ink);
  font-weight: 800;
}
body.convert-app-page #rawPanelCard .convert-import-auth-hint {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, #d97706 34%, var(--er-line));
  border-radius: 10px;
  background: color-mix(in srgb, #f59e0b 9%, var(--er-paper));
  color: color-mix(in srgb, #92400e 84%, var(--er-ink));
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.45;
}
body.convert-app-page #rawPanelCard .convert-import-auth-hint a {
  color: #9a3412;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.convert-app-page #rawPanelCard .convert-reader-toolbar:empty,
body.convert-app-page #rawPanelCard .convert-reader-toolbar:not(:has(> :not([hidden]))) {
  display: none !important;
}
body.convert-app-page #rawPanelCard .convert-import-field {
  display: grid;
  gap: 5px;
  color: var(--er-muted);
  font-size: 11px;
  font-weight: 800;
}
body.convert-app-page #rawPanelCard .convert-field-req,
body.convert-app-page .convert-field-req {
  color: var(--er-err, #be123c);
  font-weight: 900;
  text-decoration: none;
  border: 0;
  cursor: help;
}
body.convert-app-page #rawPanelCard .convert-import-field input,
body.convert-app-page #rawPanelCard .convert-import-field select {
  min-width: 0;
  min-height: 38px;
  width: 100%;
  padding: 0 11px;
  border: 1px solid var(--er-line-strong);
  border-radius: 10px;
  background: var(--er-paper-soft);
  color: var(--er-ink);
  font-size: 13px;
  outline: none;
}
body.convert-app-page #rawPanelCard .convert-import-field input:focus,
body.convert-app-page #rawPanelCard .convert-import-field select:focus {
  border-color: #3f8f83;
  box-shadow: 0 0 0 3px color-mix(in srgb, #3f8f83 14%, transparent);
}
body.convert-app-page #rawPanelCard .convert-import-url-validation[hidden] { display: none !important; }
body.convert-app-page #rawPanelCard .convert-import-url-validation {
  display: block;
  margin-top: -1px;
  color: var(--er-err);
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.35;
}
body.convert-app-page #rawPanelCard .convert-import-url-field input[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--er-err) 72%, var(--er-line-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-err) 12%, transparent);
}
body.convert-app-page #rawPanelCard .convert-reader-config {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--er-line-strong);
  border-radius: 11px;
  background: color-mix(in srgb, var(--er-paper-soft) 76%, var(--er-paper));
}
body.convert-app-page #rawPanelCard .convert-reader-config[hidden] { display: none !important; }
body.convert-app-page #rawPanelCard #convertReaderConfigToggle[hidden],
body.convert-app-page #rawPanelCard #convertImportPreviewUrlBtn[hidden],
body.convert-app-page #rawPanelCard #convertImportNewChaptersBtn[hidden],
body.convert-app-page #rawPanelCard #convertImportCancelBtn[hidden],
body.convert-app-page #rawPanelCard .convert-import-summary[hidden],
body.convert-app-page #rawPanelCard .convert-import-book-preview[hidden],
body.convert-app-page #rawPanelCard .convert-import-job-panel[hidden],
body.convert-app-page #rawPanelCard .convert-import-progress[hidden],
body.convert-app-page #rawPanelCard .convert-import-notice[hidden] {
  display: none !important;
}
body.convert-app-page #rawPanelCard .convert-reader-config-head,
body.convert-app-page #rawPanelCard .convert-reader-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body.convert-app-page #rawPanelCard .convert-reader-config-head > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}
body.convert-app-page #rawPanelCard .convert-reader-config-head strong {
  color: var(--er-ink);
  font-size: 12px;
}
body.convert-app-page #rawPanelCard .convert-reader-config-head span {
  color: var(--er-muted);
  font-size: 10.5px;
  line-height: 1.35;
}
body.convert-app-page #rawPanelCard .convert-reader-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body.convert-app-page #rawPanelCard .convert-reader-wide { grid-column: 1 / -1; }
body.convert-app-page #rawPanelCard .convert-reader-clear {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--er-err) 24%, var(--er-line));
  border-radius: 8px;
  background: var(--er-paper);
  color: var(--er-err);
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}
body.convert-app-page #rawPanelCard .convert-reader-profiles {
  display: grid;
  gap: 6px;
}
body.convert-app-page #rawPanelCard .convert-reader-profiles-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body.convert-app-page #rawPanelCard .convert-reader-profiles-head strong {
  color: var(--er-ink);
  font-size: 11px;
}
body.convert-app-page #rawPanelCard .convert-reader-profiles-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
body.convert-app-page #rawPanelCard .convert-reader-transfer {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--er-line);
  border-radius: 8px;
  background: var(--er-paper);
  color: var(--er-ink);
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}
body.convert-app-page #rawPanelCard .convert-reader-transfer:hover {
  background: color-mix(in srgb, var(--er-ink) 6%, var(--er-paper));
}
body.convert-app-page #rawPanelCard .convert-reader-new {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, #3f8f83 28%, var(--er-line));
  border-radius: 8px;
  background: var(--er-paper);
  color: #2f6f67;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}
body.convert-app-page #rawPanelCard .convert-reader-new:hover {
  background: color-mix(in srgb, #3f8f83 10%, var(--er-paper));
}
body.convert-app-page #rawPanelCard .convert-reader-profile-list {
  display: grid;
  gap: 6px;
  max-height: 168px;
  overflow: auto;
}
body.convert-app-page #rawPanelCard .convert-reader-profile-list[hidden],
body.convert-app-page #rawPanelCard .convert-reader-profile-empty[hidden] {
  display: none !important;
}
body.convert-app-page #rawPanelCard .convert-reader-profile-empty {
  margin: 0;
  color: var(--er-muted);
  font-size: 10.5px;
  line-height: 1.4;
}
body.convert-app-page #rawPanelCard .convert-reader-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
  padding: 2px;
  border: 1px solid var(--er-line);
  border-radius: 10px;
  background: var(--er-paper);
}
body.convert-app-page #rawPanelCard .convert-reader-profile.is-active {
  border-color: color-mix(in srgb, #3f8f83 42%, var(--er-line));
  background: color-mix(in srgb, #3f8f83 9%, var(--er-paper));
}
body.convert-app-page #rawPanelCard .convert-reader-profile-use {
  min-width: 0;
  display: grid;
  gap: 1px;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
body.convert-app-page #rawPanelCard .convert-reader-profile-use strong {
  color: var(--er-ink);
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.convert-app-page #rawPanelCard .convert-reader-profile-use em {
  color: var(--er-muted);
  font-size: 10.5px;
  font-style: normal;
  line-height: 1.35;
}
body.convert-app-page #rawPanelCard .convert-reader-profile-delete {
  align-self: center;
  min-height: 28px;
  margin-right: 4px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--er-err) 22%, var(--er-line));
  border-radius: 8px;
  background: transparent;
  color: var(--er-err);
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}
body.convert-app-page #rawPanelCard .convert-reader-detect {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #3f8f83;
  border-radius: 9px;
  background: #3f8f83;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
body.convert-app-page #rawPanelCard .convert-reader-detect:hover { background: #32796e; border-color: #32796e; }
body.convert-app-page #rawPanelCard .convert-reader-detect:disabled { opacity: .5; cursor: wait; }
body.convert-app-page #rawPanelCard .convert-reader-status {
  min-width: 0;
  color: var(--er-muted);
  font-size: 10.5px;
  font-weight: 700;
  text-align: right;
}
body.convert-app-page #rawPanelCard .convert-reader-status.is-ready { color: #16734b; }
body.convert-app-page #rawPanelCard .convert-import-summary {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, #3f8f83 25%, var(--er-line));
  border-radius: 10px;
  background: color-mix(in srgb, #3f8f83 7%, var(--er-paper));
  color: var(--er-ink);
  font-size: 12px;
}
body.convert-app-page #rawPanelCard .convert-import-summary span { color: var(--er-muted); font-size: 11px; }
body.convert-app-page #rawPanelCard .convert-import-url-summary {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px 10px;
}
body.convert-app-page #rawPanelCard .convert-import-url-summary strong {
  color: var(--er-ink);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
body.convert-app-page #rawPanelCard .convert-import-url-summary > span {
  flex: 0 0 auto;
  color: var(--er-muted);
  font-size: 11px;
  white-space: nowrap;
}
body.convert-app-page #rawPanelCard .convert-import-url-summary small {
  flex-basis: 100%;
  color: var(--er-err);
  font-size: 10.5px;
  line-height: 1.35;
}
body.convert-app-page #rawPanelCard .convert-import-url-summary small.convert-import-estimate,
body.convert-app-page #rawPanelCard .convert-import-url-summary small.convert-import-free-note {
  color: var(--er-muted);
}
body.convert-app-page #rawPanelCard .convert-import-url-summary small.convert-import-warning {
  color: var(--er-err);
}
body.convert-app-page #rawPanelCard .convert-import-book-preview {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--er-line-strong);
  border-radius: 11px;
  background: var(--er-paper-soft);
}
body.convert-app-page #rawPanelCard .convert-import-book-count-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
}
body.convert-app-page #rawPanelCard .convert-import-book-count {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, #3f8f83 30%, var(--er-line));
  border-radius: 8px;
  background: color-mix(in srgb, #3f8f83 10%, var(--er-paper));
  color: #286f66 !important;
  font-size: 11px;
  font-weight: 800;
}
body.convert-app-page #rawPanelCard .convert-import-anchor-picker {
  display: contents;
}
body.convert-app-page #rawPanelCard .convert-import-anchor-picker[hidden] {
  display: none !important;
}
body.convert-app-page #rawPanelCard .convert-import-anchor-toggle {
  width: auto;
  min-width: 0;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--er-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--er-paper-soft) 78%, var(--er-paper));
  color: var(--er-muted);
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
body.convert-app-page #rawPanelCard .convert-import-anchor-toggle > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.convert-app-page #rawPanelCard .convert-import-anchor-toggle .is-narrow {
  display: none;
}
body.convert-app-page #rawPanelCard .convert-import-anchor-toggle:hover,
body.convert-app-page #rawPanelCard .convert-import-anchor-toggle.is-open {
  border-color: color-mix(in srgb, #3f8f83 42%, var(--er-line));
  background: color-mix(in srgb, #3f8f83 8%, var(--er-paper));
  color: #286f66;
}
body.convert-app-page #rawPanelCard .convert-import-anchor-toggle svg {
  flex: 0 0 auto;
  transition: transform .16s ease;
}
body.convert-app-page #rawPanelCard .convert-import-anchor-toggle.is-open svg {
  transform: rotate(180deg);
}
body.convert-app-page #rawPanelCard .convert-import-anchor-panel[hidden] {
  display: none !important;
}
body.convert-app-page #rawPanelCard .convert-import-anchor-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--er-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--er-paper-soft) 72%, var(--er-paper));
}
body.convert-app-page #rawPanelCard .convert-import-anchor-row {
  display: grid;
  grid-template-columns: minmax(130px, 3fr) minmax(0, 7fr);
  gap: 7px;
  align-items: end;
}
body.convert-app-page #rawPanelCard .convert-import-anchor-row .convert-import-field {
  gap: 4px;
}
body.convert-app-page #rawPanelCard .convert-import-anchor-row .convert-import-field > span {
  color: var(--er-muted);
  font-size: 10px;
  line-height: 1.2;
}
body.convert-app-page #rawPanelCard .convert-import-anchor-mode {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 2px;
  border: 1px solid var(--er-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--er-paper) 84%, var(--er-paper-soft));
}
body.convert-app-page #rawPanelCard .convert-import-anchor-mode label {
  position: relative;
  min-height: 26px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--er-muted);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  overflow: hidden;
}
body.convert-app-page #rawPanelCard .convert-import-anchor-mode label:has(input:checked) {
  background: color-mix(in srgb, #3f8f83 11%, var(--er-paper));
  color: #286f66;
}
body.convert-app-page #rawPanelCard .convert-import-anchor-mode input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  appearance: none !important;
}
body.convert-app-page #rawPanelCard .convert-import-anchor-status {
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, #3f8f83 30%, var(--er-line));
  border-radius: 8px;
  border-left: 3px solid #3f8f83;
  background: color-mix(in srgb, #3f8f83 7%, var(--er-paper));
  color: var(--er-muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
body.convert-app-page #rawPanelCard .convert-import-anchor-status:empty { display: none; }
body.convert-app-page #rawPanelCard .convert-import-anchor-status.is-error {
  border-left-color: var(--er-err);
  color: var(--er-err);
}
body.convert-app-page #rawPanelCard .convert-import-directory {
  overflow: hidden;
  border: 1px solid var(--er-line);
  border-radius: 9px;
  background: var(--er-paper);
}
body.convert-app-page #rawPanelCard .convert-import-directory-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 9px;
  border: 0;
  border-bottom: 1px solid var(--er-line);
  background: transparent;
  color: var(--er-muted);
  font-size: 10px;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
body.convert-app-page #rawPanelCard .convert-import-directory-head:hover,
body.convert-app-page #rawPanelCard .convert-import-directory-head.is-open {
  background: color-mix(in srgb, #3f8f83 7%, var(--er-paper));
  color: var(--er-ink);
}
body.convert-app-page #rawPanelCard .convert-import-directory-toggle-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--er-muted);
  font-size: 9px;
  font-weight: 750;
  text-transform: none;
}
body.convert-app-page #rawPanelCard .convert-import-directory-toggle-copy svg {
  transition: transform 160ms ease;
}
body.convert-app-page #rawPanelCard .convert-import-directory-head.is-open .convert-import-directory-toggle-copy svg {
  transform: rotate(180deg);
}
body.convert-app-page #rawPanelCard .convert-import-directory-list {
  max-height: 210px;
  overflow-y: auto;
  padding: 3px;
  scrollbar-width: thin;
  scrollbar-color: #3f8f83 var(--er-paper-soft);
}
body.convert-app-page #rawPanelCard .convert-import-directory-list::-webkit-scrollbar { width: 6px; }
body.convert-app-page #rawPanelCard .convert-import-directory-list::-webkit-scrollbar-track { background: var(--er-paper-soft); }
body.convert-app-page #rawPanelCard .convert-import-directory-list::-webkit-scrollbar-thumb { border-radius: 8px; background: #3f8f83; }
body.convert-app-page #rawPanelCard .convert-import-directory-row {
  width: 100%;
  min-height: 26px;
  display: grid;
  /* Third track holds the per-chapter price chip; collapses when absent. */
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--er-ink);
  text-align: left;
  cursor: pointer;
}
body.convert-app-page #rawPanelCard .convert-import-directory-row:hover,
body.convert-app-page #rawPanelCard .convert-import-directory-row.is-selected {
  background: color-mix(in srgb, #3f8f83 11%, var(--er-paper));
}
body.convert-app-page #rawPanelCard .convert-import-directory-row span {
  color: var(--er-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  text-align: right;
}
body.convert-app-page #rawPanelCard .convert-import-directory-row strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.convert-app-page #rawPanelCard .convert-import-price {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--er-muted) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--er-muted) 10%, transparent);
  color: var(--er-muted);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}
body.convert-app-page #rawPanelCard .convert-import-price.is-vip {
  border-color: color-mix(in srgb, #d97706 34%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #f59e0b 18%, transparent),
    color-mix(in srgb, #b45309 12%, transparent)
  );
  color: #b45309;
}
body.convert-app-page #rawPanelCard .convert-import-price.is-vip::before {
  content: '';
  width: 11px;
  height: 11px;
  display: inline-block;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' fill-rule='evenodd' d='M10 2a4 4 0 00-4 4v2H5a1 1 0 00-1 1v7a1 1 0 001 1h10a1 1 0 001-1V9a1 1 0 00-1-1h-1V6a4 4 0 00-4-4zm-2 6V6a2 2 0 114 0v2H8z' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' fill-rule='evenodd' d='M10 2a4 4 0 00-4 4v2H5a1 1 0 00-1 1v7a1 1 0 001 1h10a1 1 0 001-1V9a1 1 0 00-1-1h-1V6a4 4 0 00-4-4zm-2 6V6a2 2 0 114 0v2H8z' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.convert-app-page #rawPanelCard .convert-import-price.is-open {
  border-color: color-mix(in srgb, #0f766e 28%, transparent);
  background: color-mix(in srgb, #0f766e 12%, transparent);
  color: #0f766e;
}
body.convert-app-page #rawPanelCard .convert-import-price.is-blocked {
  border-color: color-mix(in srgb, #b91c1c 30%, transparent);
  background: color-mix(in srgb, #b91c1c 12%, transparent);
  color: #b91c1c;
}
body.convert-app-page #rawPanelCard .convert-import-chapter-quote {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, #d97706 28%, var(--er-line-strong));
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #f59e0b 7%, var(--er-paper-soft)), var(--er-paper-soft));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}
body.convert-app-page #rawPanelCard .convert-import-chapter-quote-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
body.convert-app-page #rawPanelCard .convert-import-chapter-quote-head strong {
  min-width: 0;
  color: var(--er-ink);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.35;
}
body.convert-app-page #rawPanelCard .convert-import-chapter-quote-head .convert-import-price {
  margin-top: 1px;
  font-size: 11px;
  padding: 4px 9px;
}
body.convert-app-page #rawPanelCard .convert-import-chapter-quote-preview {
  max-height: 8.5em;
  margin: 0;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, #d97706 22%, var(--er-line));
  overflow: auto;
  color: var(--er-muted);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}
body.convert-app-page #rawPanelCard .convert-import-chapter-quote-cost {
  margin: 0;
  color: var(--er-ink);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.4;
}
body.convert-app-page #rawPanelCard .convert-import-chapter-quote-cost[hidden] {
  display: none !important;
}
body.convert-app-page #rawPanelCard .convert-import-directory-gap {
  padding: 4px;
  color: var(--er-muted);
  font-size: 10px;
  text-align: center;
}
body.convert-app-page #rawPanelCard .convert-import-secondary {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--er-line-strong);
  border-radius: 9px;
  background: var(--er-paper-soft);
  color: var(--er-ink);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
body.convert-app-page #rawPanelCard .convert-import-secondary:hover { background: var(--er-paper); }
body.convert-app-page #rawPanelCard .convert-import-secondary:disabled {
  cursor: not-allowed;
  opacity: .48;
}
body.convert-app-page #rawPanelCard .convert-import-progress {
  display: grid;
  gap: 6px;
  margin-top: 2px;
  padding: 8px 0 0;
  color: var(--er-muted);
  font-size: 11px;
}
body.convert-app-page #rawPanelCard .convert-import-progress > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-height: 14px;
}
body.convert-app-page #rawPanelCard .convert-import-progress strong { color: var(--er-ink); }
body.convert-app-page #rawPanelCard .convert-import-progress-track {
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: color-mix(in srgb, var(--er-line-strong) 55%, transparent);
}
body.convert-app-page #rawPanelCard .convert-import-progress-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: #3f8f83;
  transition: width .18s ease;
}
body.convert-app-page #rawPanelCard .convert-import-progress.is-indeterminate .convert-import-progress-track i {
  animation: convert-import-progress-slide 1.05s ease-in-out infinite;
}
@keyframes convert-import-progress-slide {
  0% { transform: translateX(-115%); }
  55% { transform: translateX(95%); }
  100% { transform: translateX(270%); }
}
body.convert-app-page #rawPanelCard .convert-import-notice {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.4;
}
body.convert-app-page #rawPanelCard .convert-import-notice.is-info { background: color-mix(in srgb, #3f8f83 8%, var(--er-paper)); color: #286f66; }
body.convert-app-page #rawPanelCard .convert-import-notice.is-success { background: color-mix(in srgb, #1f9d65 10%, var(--er-paper)); color: #16734b; }
body.convert-app-page #rawPanelCard .convert-import-notice.is-error { background: color-mix(in srgb, #d14b4b 10%, var(--er-paper)); color: #9c2d2d; }
body.convert-app-page #rawPanelCard .convert-import-notice.is-warning { background: color-mix(in srgb, #d97706 11%, var(--er-paper)); color: #9a3412; }
body.convert-app-page #rawPanelCard .convert-import-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px !important;
}
body.convert-app-page #rawPanelCard .convert-import-confirm {
  min-height: 38px;
  min-width: 11.5rem;
  padding: 0 16px;
  background: #3f8f83;
  border-color: #3f8f83;
  color: #fff;
  font-weight: 850;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 12%, transparent) inset;
}
body.convert-app-page #rawPanelCard .convert-import-confirm:hover { background: #32796e; border-color: #32796e; }
body.convert-app-page #rawPanelCard .convert-import-confirm:disabled { opacity: .46; cursor: not-allowed; box-shadow: none; }
body.convert-app-page #rawPanelCard .convert-import-confirm.is-loading { opacity: .82; }
body.convert-app-page #rawPanelCard .convert-import-confirm.is-purchase {
  min-width: 8.5rem;
  background: #3f8f83;
  border-color: #3f8f83;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 14%, transparent) inset,
    0 8px 18px color-mix(in srgb, #3f8f83 22%, transparent);
}
body.convert-app-page #rawPanelCard .convert-import-confirm.is-purchase::before {
  content: '';
  width: 13px;
  height: 13px;
  margin-right: 6px;
  display: inline-block;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' fill-rule='evenodd' d='M10 2a4 4 0 00-4 4v2H5a1 1 0 00-1 1v7a1 1 0 001 1h10a1 1 0 001-1V9a1 1 0 00-1-1h-1V6a4 4 0 00-4-4zm-2 6V6a2 2 0 114 0v2H8z' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' fill-rule='evenodd' d='M10 2a4 4 0 00-4 4v2H5a1 1 0 00-1 1v7a1 1 0 001 1h10a1 1 0 001-1V9a1 1 0 00-1-1h-1V6a4 4 0 00-4-4zm-2 6V6a2 2 0 114 0v2H8z' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.convert-app-page #rawPanelCard .convert-import-confirm.is-purchase:hover {
  background: #32796e;
  border-color: #32796e;
}
body.convert-app-page #rawPanelCard .convert-import-confirm.is-blocked-price {
  background: color-mix(in srgb, #b91c1c 82%, #7f1d1d);
  border-color: #991b1b;
  box-shadow: none;
}
body.convert-app-page #rawPanelCard .convert-import-confirm.is-loading::before {
  content: '';
  width: 14px;
  height: 14px;
  margin-right: 7px;
  display: inline-block;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, .42);
  border-top-color: #fff;
  border-radius: 50%;
  animation: convert-import-button-spin .72s linear infinite;
}
@keyframes convert-import-button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body.convert-app-page #rawPanelCard .convert-import-progress.is-indeterminate .convert-import-progress-track i,
  body.convert-app-page #rawPanelCard .convert-import-confirm.is-loading::before,
  body.convert-app-page #rawPanelCard .convert-import-tab.is-loading::after,
  body.convert-app-page #rawPanelCard .convert-import-module-spinner {
    animation: none;
  }
}

/* Import controls need brighter semantic text on night reader theme. */
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-tab.is-active,
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-drop-icon,
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-mode label:has(input:checked),
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-anchor-mode label:has(input:checked),
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-anchor-toggle:hover,
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-anchor-toggle.is-open,
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-book-count,
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-notice.is-info,
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-rate.is-checkout {
  color: #8ce6dc !important;
}
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-rate.is-checkout {
  border-color: color-mix(in srgb, #8ce6dc 34%, var(--er-line)) !important;
  background: color-mix(in srgb, #3f8f83 18%, var(--er-paper)) !important;
}
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-rate.is-formula,
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-price.is-vip {
  color: #f8c879 !important;
}
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-rate.is-formula {
  border-color: color-mix(in srgb, #f59e0b 42%, var(--er-line)) !important;
  background: color-mix(in srgb, #d97706 16%, var(--er-paper)) !important;
}
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-price.is-vip {
  border-color: color-mix(in srgb, #f59e0b 42%, transparent) !important;
  background: color-mix(in srgb, #d97706 18%, transparent) !important;
}
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-price.is-open {
  color: #75e8a8 !important;
  border-color: color-mix(in srgb, #34d399 34%, transparent) !important;
  background: color-mix(in srgb, #0f766e 18%, transparent) !important;
}
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-chapter-quote {
  border-color: color-mix(in srgb, #f59e0b 28%, var(--er-line-strong)) !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #d97706 12%, var(--er-paper-soft)),
    var(--er-paper-soft)
  ) !important;
}
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-reader-status.is-ready,
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-notice.is-success {
  color: #75e8a8 !important;
}
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-reader-new {
  color: #8ce6dc !important;
  border-color: color-mix(in srgb, #2dd4bf 32%, var(--er-line)) !important;
}
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-reader-transfer {
  color: #d7e7e4 !important;
  border-color: color-mix(in srgb, #94a3b8 28%, var(--er-line)) !important;
}
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-reader-profile.is-active {
  border-color: color-mix(in srgb, #2dd4bf 38%, var(--er-line)) !important;
  background: color-mix(in srgb, #0f766e 18%, var(--er-paper)) !important;
}
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-auth-hint,
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-notice.is-warning {
  color: #f8c879 !important;
  background: color-mix(in srgb, #d97706 16%, var(--er-paper)) !important;
  border-color: color-mix(in srgb, #f59e0b 42%, var(--er-line)) !important;
}
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-auth-hint a {
  color: #ffd58a !important;
}
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-module-loading {
  color: #b8c8c6;
}
html[data-reader-theme="night"] body.convert-app-page #rawPanelCard .convert-import-module-spinner {
  border-top-color: #8ce6dc;
}
body.convert-app-page #rawPanelCard .convert-import-job-panel {
  display: grid;
  gap: 6px;
  margin-top: 2px;
  padding: 8px 10px;
  border: 1px solid var(--er-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--er-paper-soft) 90%, transparent);
}
body.convert-app-page #rawPanelCard .convert-import-job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
body.convert-app-page #rawPanelCard .convert-import-job-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
body.convert-app-page #rawPanelCard .convert-import-job-copy strong {
  color: var(--er-ink);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.convert-app-page #rawPanelCard .convert-import-job-meta {
  color: var(--er-muted);
  font-size: 10.5px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.convert-app-page #rawPanelCard .convert-import-job-meta:empty { display: none; }
body.convert-app-page #rawPanelCard .convert-import-job-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
body.convert-app-page #rawPanelCard .convert-import-job-btn {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--er-line-strong);
  border-radius: 8px;
  background: var(--er-paper);
  color: var(--er-ink);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}
body.convert-app-page #rawPanelCard .convert-import-job-btn.is-primary {
  background: #3f8f83;
  border-color: #3f8f83;
  color: #fff;
}
body.convert-app-page #rawPanelCard .convert-import-job-btn.is-ghost { background: transparent; }
body.convert-app-page #rawPanelCard .convert-import-job-btn:disabled { opacity: .5; cursor: not-allowed; }
body.convert-app-page #rawPanelCard .convert-import-job-failed {
  display: grid;
  gap: 4px;
  max-height: 112px;
  overflow: auto;
}
body.convert-app-page #rawPanelCard .convert-import-job-failed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px;
  border: 1px solid var(--er-line);
  border-radius: 8px;
  background: var(--er-paper);
}
body.convert-app-page #rawPanelCard .convert-import-job-failed-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}
body.convert-app-page #rawPanelCard .convert-import-job-failed-text strong {
  color: var(--er-ink);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.convert-app-page #rawPanelCard .convert-import-job-failed-text span {
  color: var(--er-muted);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.convert-app-page #rawPanelCard .convert-import-job-retry-one {
  flex-shrink: 0;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--er-line-strong);
  border-radius: 7px;
  background: var(--er-paper-soft);
  color: var(--er-ink);
  font-size: 10.5px;
  font-weight: 750;
  cursor: pointer;
}
@media (max-width: 640px) {
  body.convert-app-page #rawPanelCard .convert-import-tabs { margin: 0 10px; }
  body.convert-app-page #rawPanelCard .convert-import-body { padding: 12px !important; }
  body.convert-app-page #rawPanelCard .convert-import-panel { gap: 10px; }
  body.convert-app-page #rawPanelCard .convert-import-dropzone { min-height: 150px; padding: 16px; }
  body.convert-app-page #rawPanelCard .convert-reader-grid { grid-template-columns: minmax(0, 1fr); }
  body.convert-app-page #rawPanelCard .convert-reader-wide { grid-column: auto; }
  body.convert-app-page #rawPanelCard .convert-reader-config-head,
  body.convert-app-page #rawPanelCard .convert-reader-actions {
    align-items: stretch;
    flex-direction: column;
  }
  body.convert-app-page #rawPanelCard .convert-reader-toolbar {
    flex-direction: row;
    align-items: stretch;
  }
  body.convert-app-page #rawPanelCard .convert-reader-status { text-align: left; }
  body.convert-app-page #rawPanelCard .convert-reader-clear { align-self: flex-start; }
  body.convert-app-page #rawPanelCard .convert-import-book-preview {
    gap: 6px;
    padding: 7px;
  }
  body.convert-app-page #rawPanelCard .convert-import-book-count-row {
    gap: 6px;
  }
  body.convert-app-page #rawPanelCard .convert-import-book-count {
    padding: 3px 6px;
    font-size: 10.5px;
    white-space: nowrap;
  }
  body.convert-app-page #rawPanelCard .convert-import-anchor-toggle {
    min-height: 36px;
    padding: 0 8px;
    gap: 4px;
    font-size: 10.5px;
  }
  body.convert-app-page #rawPanelCard .convert-import-anchor-toggle .is-wide {
    display: none;
  }
  body.convert-app-page #rawPanelCard .convert-import-anchor-toggle .is-narrow {
    display: inline;
  }
  body.convert-app-page #rawPanelCard .convert-import-anchor-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  body.convert-app-page #rawPanelCard .convert-import-anchor-mode {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  body.convert-app-page #rawPanelCard .convert-import-anchor-row .convert-import-field > span {
    display: none;
  }
  body.convert-app-page #rawPanelCard .convert-import-anchor-panel {
    padding: 6px;
  }
  body.convert-app-page #rawPanelCard .convert-import-url-summary {
    align-items: flex-start;
  }
  body.convert-app-page #rawPanelCard .convert-import-url-summary strong,
  body.convert-app-page #rawPanelCard .convert-import-url-summary > span {
    white-space: normal;
  }
  body.convert-app-page #rawPanelCard .convert-import-directory-head {
    padding: 5px 8px;
  }
  body.convert-app-page #rawPanelCard .convert-import-directory-list { max-height: 160px; }
  body.convert-app-page #rawPanelCard .convert-import-directory-row {
    min-height: 32px;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    padding: 3px 6px;
  }
  body.convert-app-page #rawPanelCard .convert-import-chapter-quote {
    gap: 8px;
    padding: 10px;
  }
  body.convert-app-page #rawPanelCard .convert-import-chapter-quote-head {
    flex-wrap: wrap;
    gap: 6px;
  }
  body.convert-app-page #rawPanelCard .convert-import-footer {
    padding: 10px !important;
    gap: 7px;
  }
  body.convert-app-page #rawPanelCard .convert-import-job-row {
    align-items: stretch;
    flex-direction: column;
  }
  body.convert-app-page #rawPanelCard .convert-import-job-actions { width: 100%; }
  body.convert-app-page #rawPanelCard .convert-import-job-btn { flex: 1; }
}
@media (max-width: 420px) {
  body.convert-app-page #rawPanelCard .convert-import-book-count-row {
    gap: 5px;
  }
  body.convert-app-page #rawPanelCard .convert-import-book-count {
    padding: 3px 5px;
    font-size: 10px;
  }
  body.convert-app-page #rawPanelCard .convert-import-anchor-toggle {
    min-height: 34px;
    padding: 0 7px;
    font-size: 10px;
  }
  body.convert-app-page #rawPanelCard .convert-import-directory-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }
  body.convert-app-page .auto-mode-start-chapter {
    flex-wrap: wrap;
  }
  body.convert-app-page .auto-mode-chapter-input {
    width: 76px;
    min-width: 76px;
    flex-basis: 76px;
  }
}
body.convert-app-page .replace-dialog,
body.convert-app-page .convert-tools-dialog,
#findReplaceModal .replace-dialog {
  position: relative !important;
  z-index: 1 !important;
  width: min(520px, calc(100vw - 24px));
  max-height: min(86dvh, 860px);
  overflow: auto;
  border: 1px solid var(--er-line-strong);
  border-radius: 18px;
  background: color-mix(in srgb, var(--er-paper) 98%, #fff) !important;
  box-shadow: var(--er-shadow-lg);
  color: var(--er-ink) !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  transform: none !important;
}
body.convert-app-page #findReplaceModal .replace-dialog {
  width: min(520px, calc(100vw - 24px));
}
body.convert-app-page #convertToolsModal .convert-tools-dialog,
body.convert-app-page .convert-tools-dialog,
body.convert-app-page .convert-dict-dialog {
  width: min(560px, calc(100vw - 20px));
  max-height: min(86dvh, 780px);
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; /* single scroll in body */
}
body.convert-app-page .replace-header,
body.convert-app-page .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--er-line);
}
body.convert-app-page .replace-body,
body.convert-app-page .convert-tools-body,
body.convert-app-page .raw-modal-form {
  padding: 14px 16px 16px;
}
body.convert-app-page #rawInput,
body.convert-app-page #cvPrompt,
body.convert-app-page .cv-dict-textarea,
body.convert-app-page .cv-prompt-textarea {
  width: 100%;
  border: 1px solid var(--er-line-strong);
  border-radius: 12px;
  background: color-mix(in srgb, var(--er-paper-soft) 80%, #fff);
  color: var(--er-ink);
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}
body.convert-app-page #rawInput { min-height: 56vh; font-family: var(--er-font-ui); }
body.convert-app-page .cv-prompt-textarea { min-height: 140px; max-height: 240px; }
body.convert-app-page .cv-dict-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.convert-app-page .cv-dict-card,
body.convert-app-page .cv-prompt-details {
  border: 1px solid var(--er-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--er-paper-soft) 88%, #fff);
  padding: 10px 12px;
}
body.convert-app-page .cv-dict-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
body.convert-app-page .cv-dict-meta-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 850;
  color: var(--er-ink);
}
body.convert-app-page .cv-count-pill,
body.convert-app-page #cvDictCountBadge,
#cvDictCountBadge,
.cv-count-pill,
html.dark body.convert-app-page .cv-count-pill,
html.dark body.convert-app-page #cvDictCountBadge,
html.dark #cvDictCountBadge {
  border-radius: 999px !important;
  padding: 2px 9px !important;
  background: color-mix(in srgb, var(--er-gold) 22%, #fef3c7) !important;
  color: #451a03 !important;
  border: 1px solid color-mix(in srgb, var(--er-gold) 45%, #d97706) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
body.convert-app-page .cv-safe-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--er-muted);
  white-space: nowrap;
}
body.convert-app-page .cv-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--er-line);
  background: color-mix(in srgb, var(--er-paper) 97%, #fff);
  color: var(--er-muted);
  transition: all 0.15s ease;
}
body.convert-app-page .cv-search-box:focus-within {
  border-color: color-mix(in srgb, var(--er-gold) 55%, var(--er-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 14%, transparent);
}
body.convert-app-page .cv-search-box input {
  border: 0;
  outline: none;
  background: transparent;
  width: 100%;
  min-width: 0;
  color: var(--er-ink);
  font-size: 12.5px;
  font-weight: 500;
}
body.convert-app-page .cv-friendly-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: min(42vh, 320px);
  overflow-y: auto;
  margin-top: 8px;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--er-gold) 45%, var(--er-line)) transparent;
}
body.convert-app-page .cv-friendly-list::-webkit-scrollbar { width: 6px; }
body.convert-app-page .cv-friendly-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--er-gold) 45%, var(--er-line));
  border-radius: 999px;
}
body.convert-app-page .cv-friendly-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--er-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--er-paper) 98%, #fff);
  transition: all 0.12s ease;
}
body.convert-app-page .cv-friendly-item:hover {
  background: color-mix(in srgb, var(--er-paper-soft) 85%, #fff);
  border-color: color-mix(in srgb, var(--er-gold) 35%, var(--er-line));
}
body.convert-app-page .cv-friendly-pair,
body.convert-app-page .cv-friendly-edit-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
body.convert-app-page .cv-target-name {
  font-weight: 500;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--er-ink) 85%, #44403c);
  line-height: 1.35;
}
body.convert-app-page .cv-eq-sign {
  font-weight: 700;
  font-size: 12px;
  color: var(--er-muted);
  opacity: 0.6;
  user-select: none;
}
body.convert-app-page .cv-source-name {
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  background: color-mix(in srgb, var(--er-paper-soft, #f7f0e2) 60%, #f1f5f9);
  border: 1px solid color-mix(in srgb, var(--er-ink) 12%, transparent);
  padding: 1.5px 7px;
  border-radius: 5px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
html.dark body.convert-app-page .cv-source-name,
body.dark body.convert-app-page .cv-source-name {
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}
body.convert-app-page .cv-item-meta {
  font-size: 10px;
  color: var(--er-muted);
  background: var(--er-chip);
  padding: 1px 5px;
  border-radius: 4px;
}
body.convert-app-page .cv-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
body.convert-app-page .cv-friendly-edit-target {
  flex: 1;
  min-width: 120px;
  height: 28px;
  border: 1px solid var(--er-gold);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  background: #fff;
  color: var(--er-ink);
}
body.convert-app-page .cv-load-more-btn {
  width: 100%;
  padding: 7px 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--er-gold-ink, #92400e);
  background: color-mix(in srgb, var(--er-gold-soft) 85%, #fff);
  border: 1px dashed color-mix(in srgb, var(--er-gold) 45%, var(--er-line));
  border-radius: 8px;
  margin-top: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
body.convert-app-page .cv-load-more-btn:hover {
  background: var(--er-gold-soft);
  border-color: var(--er-gold);
}
body.convert-app-page .cv-friendly-empty {
  border: 1px dashed var(--er-line-strong);
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
  color: var(--er-muted);
  font-size: 12px;
  line-height: 1.45;
}
body.convert-app-page .cv-learn-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto;
  gap: 6px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--er-line);
}
body.convert-app-page .cv-learn-row input {
  min-height: 30px;
  height: 30px;
  border: 1px solid var(--er-line);
  border-radius: 6px;
  padding: 0 8px;
  background: color-mix(in srgb, var(--er-paper) 98%, #fff);
  color: var(--er-ink);
  font-size: 12px;
  font-weight: 500;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.convert-app-page .cv-prompt-select,
body.convert-app-page #cvPromptPreset {
  min-height: 34px;
  height: 34px;
  border: 1px solid var(--er-line);
  border-radius: 8px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--er-paper) 98%, #fff);
  color: var(--er-ink);
  font-size: 12.5px;
  font-weight: 500;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.convert-app-page .cv-learn-row input:focus,
body.convert-app-page .cv-prompt-select:focus,
body.convert-app-page #cvPromptPreset:focus,
body.convert-app-page .cv-prompt-textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--er-gold) 55%, var(--er-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 14%, transparent);
}
body.convert-app-page .cv-learn-eq {
  color: var(--er-muted);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.6;
}
body.convert-app-page .cv-adv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
body.convert-app-page .cv-learn-btn {
  min-height: 30px;
  height: 30px;
  padding: 0 11px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--er-gold) 50%, transparent);
  background: color-mix(in srgb, var(--er-gold) 90%, #fff);
  color: #7c2d12;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
body.convert-app-page .cv-learn-btn:hover {
  background: var(--er-gold);
  color: #fff;
}
body.convert-app-page .cv-adv-btn {
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--er-line);
  background: color-mix(in srgb, var(--er-paper) 96%, #fff);
  color: var(--er-muted);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
body.convert-app-page .cv-adv-btn:hover {
  background: color-mix(in srgb, var(--er-gold) 12%, var(--er-paper));
  border-color: color-mix(in srgb, var(--er-gold) 35%, var(--er-line));
  color: var(--er-ink);
}
body.convert-app-page .cv-save-state {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  color: var(--er-muted);
}
body.convert-app-page .cv-dict-hidden { display: none !important; }
body.convert-app-page .cv-field-label {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--er-muted);
  margin: 0 0 4px;
}
body.convert-app-page .cv-prompt-details > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  font-weight: 900;
  color: var(--er-ink);
}
body.convert-app-page .cv-prompt-details > summary small {
  font-size: 11px;
  font-weight: 750;
  color: var(--er-muted);
}
body.convert-app-page .cv-prompt-details > summary::-webkit-details-marker { display: none; }
body.convert-app-page .cv-prompt-body {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.convert-app-page #convertToolsModal .convert-tools-dialog,
body.convert-app-page .convert-dict-dialog {
  width: min(560px, calc(100vw - 20px));
}
body.convert-app-page .convert-dict-dialog .replace-header {
  padding: 12px 14px;
}
body.convert-app-page .convert-dict-dialog .replace-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
body.convert-app-page .convert-dict-dialog .replace-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--er-gold);
  background: color-mix(in srgb, var(--er-gold) 12%, var(--er-paper));
  border: 1px solid color-mix(in srgb, var(--er-gold) 24%, var(--er-line));
}
body.convert-app-page .convert-dict-dialog .replace-title-wrap h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
  color: var(--er-ink);
}
body.convert-app-page .convert-dict-dialog .replace-title-wrap p {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--er-muted);
}
body.convert-app-page .convert-dict-dialog .replace-body {
  padding: 12px 14px 14px;
}
body.convert-app-page .convert-dict-dialog .cv-prompt-textarea {
  min-height: 120px;
  max-height: 220px;
}

/* --------------------------------------------------------------------------
   8) TTS settings dropdown (popover, not modal)
   -------------------------------------------------------------------------- */
body.convert-app-page #ttsSettingsPanel.tts-settings-panel,
body.convert-app-page .tts-settings-panel,
#ttsSettingsPanel.tts-settings-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: min(340px, calc(100vw - 16px));
  max-height: min(72vh, 560px);
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--er-line-strong);
  border-radius: 14px;
  background: color-mix(in srgb, var(--er-paper) 98%, #fff);
  box-shadow: var(--er-shadow-lg);
  z-index: var(--er-z-dropdown);
  box-sizing: border-box;
}
body.convert-app-page #ttsSettingsPanel.tts-settings-panel[hidden],
body.convert-app-page .tts-settings-panel[hidden],
#ttsSettingsPanel[hidden],
#ttsSettingsPanel.tts-settings-panel:not(.is-open) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.convert-app-page #ttsSettingsPanel.tts-settings-panel.is-open:not([hidden]),
#ttsSettingsPanel.tts-settings-panel.is-open:not([hidden]) {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  z-index: var(--er-z-dropdown) !important;
}
/* No full-screen dimmer: this is a toolbar dropdown, not a modal */
body.convert-app-page.convert-tts-panel-open::before {
  content: none !important;
  display: none !important;
}
body.convert-app-page .tts-settings-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 2px;
}
body.convert-app-page .tts-settings-head strong {
  font-size: 12.5px;
  font-weight: 850;
  color: var(--er-ink);
}
body.convert-app-page .tts-settings-close {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--er-line);
  background: var(--er-paper-soft);
  color: var(--er-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
body.convert-app-page .tts-settings-close:hover {
  color: var(--er-ink);
  border-color: var(--er-line-strong);
}
body.convert-app-page .tts-setting-field {
  position: relative;
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--er-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--er-paper-soft) 90%, #fff);
  color: var(--er-ink);
}
body.convert-app-page .tts-setting-field > span {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--er-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
body.convert-app-page .tts-select-value {
  font-size: 13px;
  font-weight: 800;
  color: var(--er-ink);
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Voice full width; Font + Autonext share one compact row */
body.convert-app-page .tts-setting-voice {
  grid-column: 1 / -1;
  min-height: 42px;
  padding: 0 34px 0 12px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
body.convert-app-page .tts-setting-row.tts-setting-font-autonext-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
}
body.convert-app-page .tts-setting-font {
  min-height: 42px;
  min-width: 0;
  padding: 0 34px 0 12px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
body.convert-app-page .tts-setting-voice > span,
body.convert-app-page .tts-setting-font > span,
body.convert-app-page .tts-setting-autonext > span:first-child {
  flex: 0 0 auto;
  margin: 0;
  line-height: 1;
}
body.convert-app-page .tts-setting-voice > .tts-select-value,
body.convert-app-page .tts-setting-font > .tts-select-value {
  flex: 1 1 auto;
  text-align: right;
  font-size: 13px;
  font-weight: 850;
}
body.convert-app-page .tts-setting-voice::after,
body.convert-app-page .tts-setting-font::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--er-muted);
  border-bottom: 2px solid var(--er-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
body.convert-app-page .tts-setting-voice.is-menu-open,
body.convert-app-page .tts-setting-font.is-menu-open {
  border-color: color-mix(in srgb, var(--er-gold) 45%, var(--er-line-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 16%, transparent);
}

/* Autonext switch — same row as Font */
body.convert-app-page .tts-setting-autonext {
  min-height: 42px;
  min-width: 132px;
  padding: 0 12px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
body.convert-app-page .tts-setting-autonext .tts-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
body.convert-app-page .tts-setting-autonext .tts-switch {
  position: relative;
  display: inline-flex;
  width: 34px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--er-ink) 18%, var(--er-paper-soft));
  transition: background-color 0.16s ease;
}
body.convert-app-page .tts-setting-autonext .tts-switch span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 0.16s ease;
}
body.convert-app-page .tts-setting-autonext .tts-switch-input:checked + .tts-switch {
  background: var(--er-gold);
}
body.convert-app-page .tts-setting-autonext .tts-switch-input:checked + .tts-switch span {
  transform: translateX(14px);
}
body.convert-app-page .tts-setting-autonext .tts-autonext-state {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 850;
  color: var(--er-muted);
  line-height: 1;
}
body.convert-app-page .tts-setting-autonext:has(.tts-switch-input:checked) {
  border-color: color-mix(in srgb, var(--er-gold) 45%, var(--er-line));
  background: color-mix(in srgb, var(--er-gold) 10%, var(--er-surface, var(--er-paper)));
}
body.convert-app-page .tts-setting-autonext:has(.tts-switch-input:checked) > span:first-child,
body.convert-app-page .tts-setting-autonext:has(.tts-switch-input:checked) .tts-autonext-state {
  color: var(--er-gold-ink, var(--er-ink));
}
body.convert-app-page .tts-setting-autonext .tts-switch-input:focus-visible + .tts-switch {
  outline: 2px solid color-mix(in srgb, var(--er-gold) 50%, transparent);
  outline-offset: 2px;
}
@media (max-width: 360px) {
  body.convert-app-page .tts-setting-row.tts-setting-font-autonext-row {
    grid-template-columns: 1fr;
  }
  body.convert-app-page .tts-setting-autonext {
    min-width: 0;
  }
}
body.convert-app-page .tts-setting-range {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 6px 8px;
}
body.convert-app-page .tts-setting-range:has(#ttsNarrationPreset) {
  grid-template-columns: minmax(0, 1fr) auto;
}
body.convert-app-page .tts-setting-range > span {
  grid-column: 1 / -1;
  width: auto;
}
body.convert-app-page .tts-setting-range input[type="range"] {
  width: 100%;
  min-width: 0;
  accent-color: var(--er-gold);
  margin: 0;
}
body.convert-app-page .tts-setting-range:has(#ttsNarrationPreset) > input[type="range"] {
  grid-column: 1;
  grid-row: 2;
}
body.convert-app-page .tts-setting-range:not(:has(#ttsNarrationPreset)) > input[type="range"] {
  grid-column: 1 / -1;
}
body.convert-app-page #ttsNarrationPreset,
body.convert-app-page .tts-narration-preset {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: center;
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
  height: 28px;
  min-height: 28px;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--er-gold) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer;
  box-shadow: none !important;
}
body.convert-app-page #ttsNarrationPreset:hover,
body.convert-app-page .tts-narration-preset:hover {
  filter: brightness(1.05);
}
body.convert-app-page .tts-native-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  left: -9999px !important;
  clip: rect(0 0 0 0) !important;
}
#ttsVoiceMenu.tts-custom-menu,
#ttsFontMenu.tts-custom-menu,
body.convert-app-page .tts-custom-menu {
  position: fixed;
  z-index: calc(var(--er-z-dropdown) + 20) !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: min(56vh, 380px);
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--er-line-strong);
  border-radius: 12px;
  background: color-mix(in srgb, var(--er-paper) 98%, #fff);
  box-shadow: var(--er-shadow-lg);
  box-sizing: border-box;
}
#ttsVoiceMenu.tts-custom-menu[hidden],
#ttsFontMenu.tts-custom-menu[hidden],
body.convert-app-page .tts-custom-menu[hidden] {
  display: none !important;
}
body.convert-app-page .tts-custom-menu-group {
  padding: 8px 10px 4px;
  font-size: 10.5px;
  font-weight: 850;
  color: var(--er-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
body.convert-app-page .tts-custom-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--er-ink);
  text-align: left;
  border-radius: 10px;
  padding: 9px 10px;
  cursor: pointer;
  font: inherit;
}
body.convert-app-page .tts-custom-option-check {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1.5px solid var(--er-line-strong);
  flex: 0 0 auto;
}
body.convert-app-page .tts-custom-option.is-selected .tts-custom-option-check {
  border-color: var(--er-gold);
  background: radial-gradient(circle at center, var(--er-gold) 0 45%, transparent 48%);
}
body.convert-app-page .tts-custom-option-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
body.convert-app-page .tts-custom-option-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--er-ink);
}
body.convert-app-page .tts-custom-option-note {
  font-size: 11px;
  font-weight: 700;
  color: var(--er-muted);
}
body.convert-app-page .tts-custom-option.is-selected,
body.convert-app-page .tts-custom-option:hover {
  background: var(--er-gold-soft);
}
body.convert-app-page .tts-custom-option.is-locked {
  opacity: .55;
  cursor: not-allowed;
}
body.convert-app-page #ttsSettingsToggle.is-open {
  background: var(--er-gold-soft);
  border-color: color-mix(in srgb, var(--er-gold) 40%, transparent);
  color: var(--er-gold-ink);
}

/* --------------------------------------------------------------------------
   9) Chapter TOC drawer (left slide, ported to body)
   -------------------------------------------------------------------------- */
/* When ported to body, node may sit outside .convert-app-page — style both. */
body.convert-app-page .chapter-toc-root,
body.convert-app-page #chapterShelfRoot.chapter-toc-root,
#chapterShelfRoot.chapter-toc-root {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  z-index: 100450 !important; /* above site header + convert dock */
  display: flex !important;
  justify-content: flex-start;
  align-items: stretch;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(15, 23, 42, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, background-color .18s ease;
  overflow: hidden;
}
body.convert-app-page .chapter-toc-root[hidden],
body.convert-app-page #chapterShelfRoot[hidden],
#chapterShelfRoot.chapter-toc-root[hidden] {
  display: none !important;
}
body.convert-app-page .chapter-toc-root.is-open,
body.convert-app-page #chapterShelfRoot.chapter-toc-root.is-open,
#chapterShelfRoot.chapter-toc-root.is-open {
  display: flex !important;
  background: rgba(15, 23, 42, .22);
  opacity: 1;
  pointer-events: auto;
}
body.convert-app-page .chapter-toc-scrim,
body.convert-app-page #chapterShelfBackdrop.chapter-toc-scrim,
#chapterShelfBackdrop.chapter-toc-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 0;
}
body.convert-app-page .chapter-shelf,
body.convert-app-page #chapterShelf.chapter-toc-panel,
#chapterShelf.chapter-toc-panel {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: column;
  /* PC: half viewport; phone override below makes full */
  width: min(50vw, 560px) !important;
  max-width: 100vw !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--er-line-strong) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--er-paper) 98%, #fff) !important;
  color: var(--er-ink);
  box-shadow: 24px 0 70px -48px rgba(15, 23, 42, .5);
  transform: translate3d(-100%, 0, 0);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
  overflow: hidden;
  z-index: 1;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}
body.convert-app-page .chapter-toc-root.is-open .chapter-shelf,
body.convert-app-page #chapterShelfRoot.is-open #chapterShelf,
#chapterShelfRoot.is-open #chapterShelf {
  transform: translate3d(0, 0, 0) !important;
}
/* When open, ignore [hidden] fighting the drawer */
#chapterShelfRoot.is-open #chapterShelf[hidden],
body.convert-chapter-toc-open #chapterShelf {
  display: flex !important;
}
@media (max-width: 900px) {
  body.convert-app-page .chapter-shelf,
  body.convert-app-page #chapterShelf.chapter-toc-panel,
  #chapterShelf.chapter-toc-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* --------------------------------------------------------------------------
   10) Theme picker panel — wiki/show parity
   -------------------------------------------------------------------------- */
body.convert-app-page .reader-theme-panel,
#convertReaderThemePanel.reader-theme-panel {
  position: fixed;
  z-index: var(--er-z-dropdown);
  width: min(300px, calc(100vw - 16px));
  padding: 8px;
  border: 1px solid var(--er-line);
  border-radius: 20px;
  background: var(--er-paper);
  box-shadow: 0 12px 34px -22px rgba(28, 25, 23, 0.45);
}
body.convert-app-page .reader-theme-panel[hidden] { display: none !important; }
body.convert-app-page .reader-theme-panel__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
body.convert-app-page .reader-theme-option {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--er-line);
  background: var(--er-paper-soft);
  color: var(--er-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
  transition: transform .14s ease, border-color .14s ease, color .14s ease, background .14s ease;
}
body.convert-app-page .reader-theme-option:hover,
body.convert-app-page .reader-theme-option.is-active,
body.convert-app-page .reader-theme-option[aria-checked="true"] {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--er-gold) 50%, var(--er-line));
  color: var(--er-gold-ink);
  background: var(--er-paper);
  box-shadow: 0 8px 18px -16px rgba(28, 25, 23, 0.4);
}
body.convert-app-page .reader-theme-option__dot,
body.convert-app-page .reader-theme-dot,
body.convert-app-page #theme-toggle .reader-theme-dot,
body.convert-app-page #theme-toggle .convert-theme-toggle-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
  flex: 0 0 auto;
  display: block;
}
/* Solid swatches — same as chapter/wiki show */
body.convert-app-page .reader-theme-option__dot--white,
body.convert-app-page .reader-theme-dot--white { background: #fff; }
body.convert-app-page .reader-theme-option__dot--paper,
body.convert-app-page .reader-theme-dot--paper { background: #fff4dc; }
body.convert-app-page .reader-theme-option__dot--sepia,
body.convert-app-page .reader-theme-dot--sepia { background: #dfbf86; }
body.convert-app-page .reader-theme-option__dot--ghi,
body.convert-app-page .reader-theme-option__dot--green,
body.convert-app-page .reader-theme-dot--ghi,
body.convert-app-page .reader-theme-dot--green { background: #f8fafc; }
body.convert-app-page .reader-theme-option__dot--gray,
body.convert-app-page .reader-theme-dot--gray { background: #e3e3e3; }
body.convert-app-page .reader-theme-option__dot--night,
body.convert-app-page .reader-theme-dot--night {
  background: #1d1d1d;
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* --------------------------------------------------------------------------
   11) Body locks / free key modal
   -------------------------------------------------------------------------- */
body.convert-tools-open,
body.convert-find-open,
body.convert-key-open,
body.convert-raw-modal-open,
body.chapter-shelf-open,
body.convert-chapter-toc-open {
  overflow: hidden !important;
}
body.convert-app-page .free-key-modal-backdrop:not([hidden]) {
  display: grid;
  place-items: center;
  z-index: var(--er-z-modal);
}
body.convert-app-page .free-key-modal-card {
  width: min(480px, calc(100vw - 24px));
  border-radius: 16px;
  border: 1px solid var(--er-line-strong);
  background: color-mix(in srgb, var(--er-paper) 97%, #fff);
  box-shadow: var(--er-shadow-lg);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   12) Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.convert-app-page {
    --er-site-header: 56px;
    --er-app-header: 44px;
    --er-toolbar: 38px;
    --er-dock: 58px;
    --er-gutter: 10px;
    --er-read-inset: 10px;
  }

  /* Kill vertical dead space on phones/tablets */
  body.convert-app-page .convert-main-grid {
    padding-bottom: calc(var(--er-dock) + 8px);
  }
  body.convert-app-page .convert-card.output-card {
    min-height: calc(100svh - var(--er-dock) - 8px);
  }
  body.convert-app-page .convert-page-header,
  body.convert-app-page .convert-page-header-compact {
    min-height: var(--er-app-header);
    padding: 3px var(--er-gutter);
  }
  body.convert-app-page .story-map-current {
    max-width: min(48vw, 210px);
    min-height: 34px;
    padding: 2px 10px 2px 4px;
    gap: 8px;
  }
  body.convert-app-page .story-map-icon {
    width: 24px;
    height: 24px;
  }
  body.convert-app-page .story-map-details strong { font-size: 12.5px; }
  body.convert-app-page .story-map-details small,
  body.convert-app-page .story-map-post-link { display: none; }
  body.convert-app-page .story-map-toggle span,
  body.convert-app-page #convertStoryMapToggleText {
    display: inline !important;
  }
  body.convert-app-page .story-map-free,
  body.convert-app-page .story-map-toggle,
  body.convert-app-page .convert-balance-chip {
    min-height: 32px;
    padding: 0 9px;
    font-size: 11.5px;
  }

  body.convert-app-page .reader-toolbar,
  body.convert-app-page #chapterTabBar.reader-toolbar {
    min-height: var(--er-toolbar);
    padding: 2px var(--er-gutter);
    gap: 4px;
  }
  body.convert-app-page .reader-tool-btn,
  body.convert-app-page .reader-chapter-chip {
    width: 34px;
    height: 34px;
  }
  body.convert-app-page .reader-chapter-chip {
    width: auto;
    min-width: 64px;
    padding: 0 8px;
    font-size: 11.5px;
  }
  body.convert-app-page .reader-toolbar-right #openFindReplaceBtn,
  body.convert-app-page .reader-toolbar-right #copyOutputBtn {
    display: none;
  }

  body.convert-app-page .reader-chapter-head {
    margin: 8px auto 0;
  }
  body.convert-app-page .reader-chapter-head h2 {
    font-size: 1.2rem;
  }
  body.convert-app-page .reader-content,
  body.convert-app-page #convertReaderContent.reader-content {
    padding: 8px 0 20px;
    min-height: 0;
    font-size: var(--vz-read-font-size, 1.1rem);
    line-height: var(--vz-read-line-height, 1.8);
    letter-spacing: 0;
  }
  body.convert-app-page .reader-content p {
    margin: 0 0 1em;
    text-indent: 0;
  }

  /* Empty state: do not consume half the screen */
  body.convert-app-page .convert-empty-state,
  body.convert-app-page #convertEmptyState {
    min-height: 0;
    gap: 5px;
    padding: 18px 10px 12px;
    margin: 0 auto;
  }
  body.convert-app-page .convert-empty-icon {
    width: auto;
    height: auto;
    border-radius: 0;
    margin-bottom: 0;
    background: none;
    border: 0;
  }
  body.convert-app-page .convert-empty-state strong {
    font-size: 1.02rem;
  }
  body.convert-app-page .convert-empty-state p {
    font-size: 12.5px;
    line-height: 1.45;
  }
  body.convert-app-page .convert-empty-notice {
    margin-top: 2px !important;
    font-size: 11px !important;
  }
  body.convert-app-page .convert-empty-actions {
    margin-top: 6px;
    gap: 5px;
  }
  body.convert-app-page .convert-empty-cta {
    min-height: 44px;
    min-width: 0;
    padding: 7px 6px;
    font-size: 12px;
  }

  body.convert-app-page .convert-app-dock,
  body.convert-app-page #convertAppDock {
    padding: 0 4px calc(4px + env(safe-area-inset-bottom, 0px));
  }
  body.convert-app-page .convert-command-bar {
    gap: 4px;
    padding: 3px;
    min-height: 46px;
    border-radius: 12px;
  }
  body.convert-app-page .convert-command-source,
  body.convert-app-page .convert-command-run,
  body.convert-app-page .convert-actions,
  body.convert-app-page .convert-dock-left,
  body.convert-app-page .convert-dock-center,
  body.convert-app-page .convert-dock-right,
  body.convert-app-page .convert-model-wrapper,
  body.convert-app-page .convert-model-picker {
    display: contents;
  }
  body.convert-app-page .convert-command-bar {
    display: flex;
    flex-wrap: nowrap;
  }
  body.convert-app-page .convert-command-bar .btn,
  body.convert-app-page .convert-command-bar button,
  body.convert-app-page .convert-command-bar .model-toggle-btn {
    min-height: 38px;
    border-radius: 10px;
  }
  body.convert-app-page #translateModelToggle {
    min-width: 0;
    max-width: 36vw;
    flex: 1 1 auto;
    padding: 0 8px;
  }
  body.convert-app-page #runTranslateBtn {
    min-width: 68px;
    padding: 0 10px;
  }

}

@media (max-width: 640px) {
  body.convert-app-page {
    --er-gutter: 8px;
    --er-dock: 56px;
    --er-app-header: 42px;
    --er-toolbar: 36px;
    --er-read-inset: 10px;
  }
  body.convert-app-page .convert-balance-chip {
    min-height: 28px;
    padding: 0 6px;
    font-size: 10.5px;
  }
  body.convert-app-page .convert-main-grid {
    padding-bottom: calc(var(--er-dock) + 6px);
  }
  body.convert-app-page .reader-content,
  body.convert-app-page #convertReaderContent.reader-content {
    padding: 6px 0 10px;
    min-height: 0;
  }
  body.convert-app-page .convert-empty-state,
  body.convert-app-page #convertEmptyState {
    min-height: 0;
    padding: 14px 8px 10px;
  }
  body.convert-app-page .convert-empty-actions {
    width: 100%;
  }
  body.convert-app-page .convert-empty-cta {
    flex: 1 1 auto;
  }
  body.convert-app-page .cv-learn-row { grid-template-columns: 1fr; }
  body.convert-app-page .cv-learn-eq { display: none; }
  body.convert-app-page .cv-learn-btn { width: 100%; }
  body.convert-app-page .tts-settings-panel,
  body.convert-app-page #ttsSettingsPanel.tts-settings-panel {
    grid-template-columns: 1fr;
    width: min(340px, calc(100vw - 12px));
    padding: 8px;
    gap: 6px;
    max-height: min(70vh, 520px);
  }
  body.convert-app-page .convert-simple-root.is-raw-modal-open .input-card,
  body.convert-raw-modal-open .input-card#rawPanelCard {
    left: 6px !important;
    right: 6px !important;
    top: calc(var(--er-site-header) + 6px) !important;
    bottom: calc(var(--er-dock) + 8px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    border-radius: 12px !important;
  }
  body.convert-app-page .replace-dialog,
  body.convert-app-page .convert-tools-dialog {
    width: calc(100vw - 10px);
    max-height: min(90dvh, 860px);
  }
  body.convert-app-page .replace-header,
  body.convert-app-page .card-header {
    padding: 8px 10px;
  }
  body.convert-app-page .replace-body,
  body.convert-app-page .convert-tools-body,
  body.convert-app-page .raw-modal-form {
    padding: 8px 10px 10px;
  }
  body.convert-app-page .cv-friendly-list {
    max-height: min(28vh, 220px);
  }
  body.convert-app-page #convertToolsModal .convert-tools-dialog,
  body.convert-app-page .convert-dict-dialog {
    width: calc(100vw - 12px);
    max-height: min(92dvh, 860px);
  }
  body.convert-app-page .convert-dict-dialog .replace-header,
  body.convert-app-page .convert-dict-dialog .replace-body {
    padding-left: 12px;
    padding-right: 12px;
  }
  body.convert-app-page .cv-adv-btn {
    min-height: 32px;
    padding: 0 10px;
  }
}

@media (max-width: 360px) {
  body.convert-app-page {
    --er-gutter: 6px;
    --er-dock: 54px;
    --er-read-inset: 8px;
  }
  body.convert-app-page #toggleRawPanelBtn,
  body.convert-app-page #autoGlossaryToggle,
  body.convert-app-page #runConvertBtn,
  body.convert-app-page #clearConvertBtn,
  body.convert-app-page #theme-toggle {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
  }
  body.convert-app-page #runTranslateBtn { min-width: 60px; padding: 0 8px; }
  body.convert-app-page .convert-empty-state,
  body.convert-app-page #convertEmptyState {
    min-height: 0;
    padding: 10px 6px 8px;
  }
  body.convert-app-page .reader-content,
  body.convert-app-page #convertReaderContent.reader-content {
    padding: 4px 0 8px;
  }
}


/* Theme toggle — quykhu show/post color wheel (::before conic) */
body.convert-app-page #theme-toggle.convert-theme-toggle,
body.convert-app-page .convert-theme-toggle,
body.convert-app-page #theme-toggle {
  position: relative !important;
  inset: auto !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--er-paper) !important;
  border: none !important;
  color: var(--er-ink) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.06) !important;
  border-radius: 11px !important;
  overflow: visible !important;
}
/* Hide sun/moon / solid swatch if layout injects them */
body.convert-app-page #theme-toggle #light-icon,
body.convert-app-page #theme-toggle #dark-icon,
body.convert-app-page #theme-toggle svg,
body.convert-app-page #theme-toggle .convert-theme-toggle-dot,
body.convert-app-page #theme-toggle .reader-theme-dot {
  display: none !important;
}
body.convert-app-page #theme-toggle.convert-theme-toggle::before,
body.convert-app-page #theme-toggle::before {
  content: "" !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: block !important;
  /* Same palette language as quykhu chapter-show #theme-toggle::before */
  background: conic-gradient(
    #e8b84c 0 22%,
    #d6c29c 22% 42%,
    #aeb4bc 42% 62%,
    #657080 62% 80%,
    #303030 80% 100%
  ) !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}
body.convert-app-page #theme-toggle.is-open,
body.convert-app-page .convert-theme-toggle.is-open,
body.convert-app-page #theme-toggle:hover {
  background: var(--er-paper-soft, #f5f5f5) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 0 0 1px color-mix(in srgb, var(--er-gold) 30%, transparent) !important;
}
html[data-reader-theme="night"] body.convert-app-page #theme-toggle.convert-theme-toggle,
html[data-reader-theme="night"] body.convert-app-page #theme-toggle {
  background: color-mix(in srgb, var(--er-paper-soft) 80%, #000) !important;
  border-color: var(--er-line) !important;
}



html[data-reader-theme="night"] body.convert-app-page #autoGlossaryToggle:not(.is-on),
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryToggle.auto-glossary-toggle:not(.is-on) {
  background: color-mix(in srgb, var(--er-paper-soft) 70%, #000);
  color: color-mix(in srgb, var(--er-ink) 65%, var(--er-muted));
  border-color: var(--er-line-strong);
  opacity: .85;
}
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryToggle.is-on,
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryToggle.auto-glossary-toggle.is-on {
  background: color-mix(in srgb, var(--er-gold) 28%, #1c1917) !important;
  border-color: color-mix(in srgb, var(--er-gold) 55%, transparent) !important;
  color: #fbbf24 !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  box-shadow:
    inset 3px 0 0 0 #f59e0b,
    0 0 0 1px color-mix(in srgb, var(--er-gold) 22%, transparent) !important;
}
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryToggle.is-on span,
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryToggle.is-on svg {
  color: #fbbf24 !important;
}

/* --------------------------------------------------------------------------
   Confirm dialog (polished, replaces window.confirm/alert)
   -------------------------------------------------------------------------- */
body.convert-app-page #convertConfirmModal.convert-confirm-modal:not([hidden]),
#convertConfirmModal.convert-confirm-modal:not([hidden]) {
  display: grid !important;
  place-items: center;
  position: fixed !important;
  inset: 0 !important;
  z-index: 100520 !important;
  padding: 16px;
  background: transparent; /* dim only via .convert-confirm-backdrop child */
  backdrop-filter: none;
  pointer-events: auto !important;
  opacity: 1 !important;
  filter: none !important;
  isolation: isolate;
}
body.convert-app-page #convertConfirmModal[hidden],
#convertConfirmModal[hidden] {
  display: none !important;
}
body.convert-app-page #convertConfirmModal .convert-confirm-backdrop,
#convertConfirmModal .convert-confirm-backdrop,
body.convert-app-page #convertConfirmModal .replace-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: rgba(15, 23, 42, 0.42) !important;
  backdrop-filter: blur(2px);
  pointer-events: auto !important;
}
body.convert-app-page .convert-confirm-dialog,
#convertConfirmModal .convert-confirm-dialog,
#convertConfirmModal .replace-dialog {
  position: relative !important;
  z-index: 1 !important;
  width: min(420px, calc(100vw - 24px));
  max-width: 420px;
  border-radius: 16px;
  border: 1px solid var(--er-line-strong);
  background: color-mix(in srgb, var(--er-paper) 98%, #fff) !important;
  box-shadow: var(--er-shadow-lg);
  overflow: hidden;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  color: var(--er-ink) !important;
  transform: none !important;
}
body.convert-app-page .convert-confirm-header { align-items: flex-start; }
body.convert-app-page .convert-confirm-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--er-gold-soft);
  color: var(--er-gold-ink);
  border: 1px solid color-mix(in srgb, var(--er-gold) 28%, transparent);
  flex: 0 0 auto;
}
body.convert-app-page .convert-confirm-icon.is-danger {
  background: color-mix(in srgb, var(--er-err) 10%, #fff);
  color: var(--er-err);
  border-color: color-mix(in srgb, var(--er-err) 24%, transparent);
}
body.convert-app-page .convert-confirm-message {
  white-space: pre-line;
  color: var(--er-ink);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.55;
  background: color-mix(in srgb, var(--er-paper-soft) 82%, #fff);
  border: 1px solid var(--er-line);
  border-radius: 12px;
  padding: 12px 14px;
}
body.convert-app-page .convert-confirm-message[hidden] {
  display: none !important;
}
body.convert-app-page .convert-confirm-icon.is-edit {
  background: color-mix(in srgb, var(--er-gold) 16%, var(--er-surface));
  color: var(--er-gold-ink);
  border-color: color-mix(in srgb, var(--er-gold) 32%, var(--er-line));
}
body.convert-app-page .convert-confirm-icon-edit[hidden],
body.convert-app-page .convert-confirm-icon-warn[hidden] {
  display: none !important;
}
body.convert-app-page .convert-confirm-field {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
body.convert-app-page .convert-confirm-field[hidden] {
  display: none !important;
}
body.convert-app-page #convertConfirmInput {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--er-line-strong);
  border-radius: 12px;
  background: var(--er-input, var(--er-surface-2));
  color: var(--er-ink);
  font-size: 16px;
  font-weight: 650;
  outline: none;
  box-sizing: border-box;
}
body.convert-app-page #convertConfirmInput:focus {
  border-color: color-mix(in srgb, var(--er-gold) 55%, var(--er-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 14%, transparent);
}
body.convert-app-page .convert-confirm-field.is-invalid #convertConfirmInput {
  border-color: var(--er-err);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-err) 16%, transparent);
}
body.convert-app-page #convertConfirmCancelBtn[hidden] {
  display: none !important;
}
body.convert-app-page .convert-confirm-ok.is-danger,
#convertConfirmOkBtn.is-danger {
  background: var(--er-err) !important;
  border-color: var(--er-err) !important;
  color: #fff !important;
}
body.convert-confirm-open { overflow: hidden !important; }

/* --------------------------------------------------------------------------
   VIP Động Phủ upsell — once per free-quota day
   -------------------------------------------------------------------------- */
body.convert-app-page #convertVipPromoModal.convert-vip-promo-modal:not([hidden]),
#convertVipPromoModal.convert-vip-promo-modal:not([hidden]) {
  display: grid !important;
  place-items: center;
  position: fixed !important;
  inset: 0 !important;
  z-index: 100525 !important;
  padding: 16px;
  background: transparent;
  backdrop-filter: none;
  pointer-events: auto !important;
  opacity: 1 !important;
  filter: none !important;
  isolation: isolate;
}
body.convert-app-page #convertVipPromoModal[hidden],
#convertVipPromoModal[hidden] {
  display: none !important;
}
body.convert-app-page #convertVipPromoModal .convert-vip-promo-backdrop,
#convertVipPromoModal .convert-vip-promo-backdrop,
body.convert-app-page #convertVipPromoModal .replace-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: rgba(15, 23, 42, 0.42) !important;
  backdrop-filter: blur(2px);
  pointer-events: auto !important;
}
body.convert-app-page .convert-vip-promo-dialog,
#convertVipPromoModal .convert-vip-promo-dialog,
#convertVipPromoModal .replace-dialog {
  position: relative !important;
  z-index: 1 !important;
  width: min(420px, calc(100vw - 24px));
  max-width: 420px;
  border-radius: 16px;
  border: 1px solid var(--er-line-strong);
  background: color-mix(in srgb, var(--er-paper) 98%, #fff) !important;
  box-shadow: var(--er-shadow-lg);
  overflow: hidden;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  color: var(--er-ink) !important;
  transform: none !important;
}
body.convert-app-page .convert-vip-promo-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--er-gold-soft);
  color: var(--er-gold-ink);
  border: 1px solid color-mix(in srgb, var(--er-gold) 28%, transparent);
  flex: 0 0 auto;
}
body.convert-app-page .convert-vip-promo-message {
  white-space: pre-line;
  color: var(--er-ink);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.55;
  background: color-mix(in srgb, var(--er-paper-soft) 82%, #fff);
  border: 1px solid var(--er-line);
  border-radius: 12px;
  padding: 12px 14px;
}
body.convert-app-page a.convert-vip-promo-link,
#convertVipPromoLink.convert-vip-promo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}
body.convert-vip-promo-open { overflow: hidden !important; }

/* --------------------------------------------------------------------------
   13) Accessibility / reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.convert-app-page * {
    animation: none !important;
    transition: none !important;
  }
}

/* Keep key config button hidden unless JS shows it */
body.convert-app-page #toggleFreeKeyPanelBtn[style*="display: none"] { display: none !important; }


/* --------------------------------------------------------------------------
   14) Chapter TOC drawer details / list
   -------------------------------------------------------------------------- */
body.convert-app-page .chapter-shelf-head,
body.convert-app-page .chapter-toc-head,
#chapterShelf .chapter-toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--er-line);
  background: var(--er-surface, var(--er-paper));
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 3;
}
body.convert-app-page .chapter-shelf-title,
body.convert-app-page .chapter-toc-heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.convert-app-page .chapter-toc-kicker,
body.convert-app-page #chapterShelfCount {
  display: block;
  color: var(--er-gold-ink);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.convert-app-page .chapter-shelf-title strong,
body.convert-app-page #chapterShelfTitle,
#chapterShelfTitle {
  margin: 0;
  color: var(--er-ink);
  font-family: var(--er-font-ui);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.convert-app-page .chapter-shelf-close,
body.convert-app-page .chapter-toc-close,
#chapterShelf .chapter-toc-close,
#closeChapterListBtn,
body.convert-app-page .btn-header-icon,
body.convert-app-page .replace-close {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 999px;
  border: 1px solid var(--er-line-strong);
  background: color-mix(in srgb, var(--er-paper) 92%, #fff);
  color: var(--er-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  position: relative;
  z-index: 5;
  pointer-events: auto;
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 50%, transparent) inset;
}
body.convert-app-page .chapter-shelf-close:hover,
body.convert-app-page .chapter-toc-close:hover {
  color: var(--er-ink);
  border-color: var(--er-line-strong);
  background: var(--er-paper-soft);
}
body.convert-app-page .chapter-toc-current,
body.convert-app-page #chapterShelfSub {
  margin: 0;
  padding: 6px 12px;
  border-bottom: 1px solid var(--er-line);
  color: var(--er-muted);
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 auto;
}
body.convert-app-page .chapter-shelf-tools {
  display: block;
  align-items: center;
  padding: 8px 10px 6px;
  flex: 0 0 auto;
}
body.convert-app-page .chapter-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--er-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--er-paper-soft) 88%, #fff);
  color: var(--er-muted);
  box-shadow: none;
}
body.convert-app-page .chapter-search-box svg,
body.convert-app-page .chapter-search-box .chapter-search-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: 0.72;
}
body.convert-app-page .chapter-search-box input,
body.convert-app-page .chapter-search-box #chapterSearchInput {
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  width: 100%;
  color: var(--er-ink) !important;
  font-size: 16px;
  font-weight: 650;
  min-width: 0;
  min-height: 0 !important;
  height: 34px !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body.convert-app-page .chapter-toc-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.convert-app-page .chapter-shelf-pager {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--er-line);
  background: color-mix(in srgb, var(--er-surface) 92%, var(--er-surface-2));
}
body.convert-app-page .chapter-shelf-pager[hidden] {
  display: none !important;
}
body.convert-app-page .chapter-pager-btn {
  min-width: 32px;
  height: 30px;
  padding: 0 7px;
  border-radius: 9px;
  border: 1px solid var(--er-line-strong);
  background: color-mix(in srgb, var(--er-surface-2) 88%, var(--er-mix-light));
  color: var(--er-ink);
  font-size: 12.5px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
body.convert-app-page .chapter-pager-btn.is-num {
  min-width: 30px;
  padding: 0 6px;
}
body.convert-app-page .chapter-pager-btn.is-active {
  background: var(--er-gold-soft);
  border-color: color-mix(in srgb, var(--er-gold) 48%, transparent);
  color: var(--er-gold-ink);
  cursor: default;
}
body.convert-app-page .chapter-pager-btn:hover:not(:disabled):not(.is-active) {
  border-color: color-mix(in srgb, var(--er-gold) 42%, transparent);
  background: var(--er-gold-soft);
  color: var(--er-gold-ink);
}
body.convert-app-page .chapter-pager-btn:disabled {
  opacity: 0.42;
  cursor: default;
}
body.convert-app-page .chapter-pager-ellipsis {
  min-width: 18px;
  text-align: center;
  color: var(--er-muted);
  font-size: 12px;
  font-weight: 800;
  user-select: none;
}
body.convert-app-page .chapter-pager-label {
  flex: 1 0 100%;
  order: 2;
  margin-top: 2px;
  text-align: center;
  font-size: 11px;
  font-weight: 750;
  color: var(--er-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (min-width: 420px) {
  body.convert-app-page .chapter-pager-label {
    flex: 0 0 auto;
    order: 0;
    margin-top: 0;
    min-width: 4.5rem;
  }
}

body.convert-app-page .saved-chapter-list,
body.convert-app-page .chapter-toc-content {
  overflow: auto;
  padding: 6px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  flex: 1 1 auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
  scrollbar-color: color-mix(in srgb, var(--er-ink) 22%, transparent) transparent;
}
body.convert-app-page .saved-chapter-list::-webkit-scrollbar {
  width: 8px;
}
body.convert-app-page .saved-chapter-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--er-ink) 18%, var(--er-paper-soft));
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
body.convert-app-page .saved-chapter-list button,
body.convert-app-page .saved-chapter-item,
body.convert-app-page .chapter-list-link {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  text-align: left;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--er-ink);
  min-height: 40px;
  padding: 7px 8px;
  cursor: pointer;
  font: inherit;
}
body.convert-app-page .saved-chapter-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 40px;
}
body.convert-app-page .saved-chapter-item:hover {
  background: transparent;
}
body.convert-app-page .saved-chapter-item.is-active {
  background: transparent;
}
body.convert-app-page .chapter-list-link {
  border: 1px solid var(--er-line);
  background: var(--er-surface-2, var(--er-paper-soft));
}
body.convert-app-page .saved-chapter-item:hover .chapter-list-link,
body.convert-app-page .chapter-list-link:hover {
  border-color: color-mix(in srgb, var(--er-gold) 28%, var(--er-line));
  background: color-mix(in srgb, var(--er-gold) 8%, var(--er-surface-2, var(--er-paper-soft)));
}
body.convert-app-page .saved-chapter-item.is-active .chapter-list-link {
  background: color-mix(in srgb, var(--er-gold) 14%, var(--er-surface));
  border-color: color-mix(in srgb, var(--er-gold) 42%, var(--er-line));
}
/* URL-imported rows expose explicit manual recovery without nesting a
   clickable retry control inside chapter navigation button. */
body.convert-app-page .saved-chapter-item.chapter-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 6px;
  min-height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
}
body.convert-app-page .saved-chapter-item.chapter-list-row .chapter-list-link {
  grid-column: 1;
  min-width: 0;
  min-height: 40px;
  padding: 7px 8px;
  border-bottom: 0;
}
body.convert-app-page .saved-chapter-list .saved-chapter-item.chapter-list-row .saved-chapter-retry {
  grid-column: 2;
  align-self: center;
  display: inline-flex;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  margin-right: 0;
  border: 1px solid var(--er-line);
  border-radius: 10px;
  background: var(--er-surface-2, var(--er-paper-soft));
  color: var(--er-muted);
  cursor: pointer;
  font: inherit;
  align-items: center;
  justify-content: center;
}
body.convert-app-page .saved-chapter-retry::before {
  content: "↻";
  font: 700 14px/1 system-ui, sans-serif;
}
body.convert-app-page .saved-chapter-retry:hover,
body.convert-app-page .saved-chapter-retry:focus-visible {
  color: var(--er-gold-ink);
  border-color: color-mix(in srgb, var(--er-gold) 48%, var(--er-line));
  background: var(--er-gold-soft);
  outline: none;
}
body.convert-app-page .saved-chapter-item.is-active .saved-chapter-retry {
  border-color: color-mix(in srgb, var(--er-gold) 36%, var(--er-line));
  background: color-mix(in srgb, var(--er-paper) 70%, var(--er-gold-soft));
}
body.convert-app-page .saved-chapter-index {
  font-size: 11px;
  font-weight: 850;
  color: var(--er-muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
body.convert-app-page .saved-chapter-item.is-active .saved-chapter-index {
  color: var(--er-gold-ink);
}
body.convert-app-page .saved-chapter-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Status chip already shows Raw/Dịch/Convert — drop the duplicate meta line. */
body.convert-app-page .saved-chapter-main .saved-chapter-meta {
  display: none;
}
body.convert-app-page .saved-chapter-item strong,
body.convert-app-page .saved-chapter-list strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.convert-app-page .saved-chapter-meta,
body.convert-app-page .saved-chapter-list span {
  color: var(--er-muted);
  font-size: 11px;
  font-weight: 700;
}
body.convert-app-page .saved-chapter-status {
  flex: 0 0 auto;
  align-self: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--er-line);
  color: var(--er-muted);
  background: color-mix(in srgb, var(--er-paper-soft) 72%, transparent);
  white-space: nowrap;
  line-height: 1.2;
  max-width: 4.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.convert-app-page .saved-chapter-status.is-ready {
  color: var(--er-ok);
  border-color: color-mix(in srgb, var(--er-ok) 22%, transparent);
  background: color-mix(in srgb, var(--er-ok) 8%, transparent);
}
body.convert-app-page .saved-chapter-status.is-converted {
  color: var(--er-gold-ink);
  border-color: color-mix(in srgb, var(--er-gold) 28%, transparent);
  background: color-mix(in srgb, var(--er-gold) 10%, transparent);
}
body.convert-app-page .saved-chapter-status.is-translated {
  color: var(--er-ok);
  border-color: color-mix(in srgb, var(--er-ok) 22%, transparent);
  background: color-mix(in srgb, var(--er-ok) 8%, transparent);
}
body.convert-app-page .saved-chapter-status.is-raw {
  color: var(--er-busy);
  border-color: color-mix(in srgb, var(--er-busy) 20%, transparent);
  background: color-mix(in srgb, var(--er-busy) 8%, transparent);
}
body.convert-app-page .chapter-shelf-empty {
  margin: 12px 6px;
  padding: 14px;
  border: 1px solid var(--er-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--er-paper-soft) 88%, #fff);
  color: var(--er-muted);
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}
body.convert-app-page #chapterListToggle.is-open {
  background: var(--er-gold-soft);
  border-color: color-mix(in srgb, var(--er-gold) 40%, transparent);
  color: var(--er-gold-ink);
}
@media (max-width: 640px) {
  body.convert-app-page .chapter-shelf-head,
  body.convert-app-page .chapter-toc-head,
  #chapterShelf .chapter-toc-head {
    padding: 8px 10px;
  }
  body.convert-app-page .chapter-toc-current,
  body.convert-app-page #chapterShelfSub {
    display: none;
  }
  body.convert-app-page .chapter-shelf-tools {
    padding: 8px 10px;
    grid-template-columns: 1fr;
  }
  body.convert-app-page .saved-chapter-list,
  body.convert-app-page .chapter-toc-content {
    padding: 2px 8px 14px;
  }
}

/* --------------------------------------------------------------------------
   15) Find/replace + free key polish
   -------------------------------------------------------------------------- */
body.convert-app-page .replace-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
body.convert-app-page .replace-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--er-gold-soft);
  color: var(--er-gold-ink);
  flex: 0 0 auto;
}
body.convert-app-page .replace-title-wrap h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 850;
}
body.convert-app-page .replace-title-wrap p {
  margin: 4px 0 0;
  color: var(--er-muted);
  font-size: 12px;
}
body.convert-app-page .replace-label {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 850;
  color: var(--er-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* Find/replace only — do NOT style nested dict search/learn inputs */
body.convert-app-page #findReplaceModal .replace-body input[type="text"],
body.convert-app-page #findReplaceModal .replace-body input[type="search"],
body.convert-app-page #findReplaceFind,
body.convert-app-page #findReplaceReplace {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--er-line-strong);
  border-radius: 12px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--er-paper-soft) 84%, #fff);
  color: var(--er-ink);
  margin-bottom: 10px;
  outline: none;
  box-shadow: none;
}
body.convert-app-page #findReplaceModal .replace-body input[type="text"]:focus,
body.convert-app-page #findReplaceModal .replace-body input[type="search"]:focus,
body.convert-app-page #findReplaceFind:focus,
body.convert-app-page #findReplaceReplace:focus {
  border-color: color-mix(in srgb, var(--er-gold) 55%, var(--er-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 14%, transparent);
}
body.convert-app-page .replace-preview {
  min-height: 36px;
  color: var(--er-muted);
  font-size: 12.5px;
  font-weight: 700;
  margin: 4px 0 10px;
}
body.convert-app-page .replace-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 16px 16px;
}
body.convert-app-page .replace-cancel,
body.convert-app-page .replace-submit,
body.convert-app-page .free-key-modal-btn-close,
body.convert-app-page #translateFreeKeySaveBtn,
body.convert-app-page .btn-story-search {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--er-line-strong);
  background: color-mix(in srgb, var(--er-paper-soft) 88%, #fff);
  color: var(--er-ink);
  font-size: 12.5px;
  font-weight: 850;
  cursor: pointer;
}
body.convert-app-page .replace-submit,
body.convert-app-page #translateFreeKeySaveBtn {
  background: var(--er-gold);
  border-color: var(--er-gold);
  color: #fff;
}
body.convert-app-page .free-key-modal-header,
body.convert-app-page .free-key-modal-body,
body.convert-app-page .free-key-modal-footer {
  padding: 14px 16px;
}
body.convert-app-page .free-key-modal-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--er-line);
}
body.convert-app-page .free-key-modal-close {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--er-muted);
  cursor: pointer;
}
body.convert-app-page .free-key-input-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  margin-top: 8px;
}
body.convert-app-page #translateFreeKeyInput {
  min-height: 96px;
  width: 100%;
  border: 1px solid var(--er-line-strong);
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--er-paper-soft) 84%, #fff);
  color: var(--er-ink);
  resize: vertical;
}
body.convert-app-page .free-key-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
body.convert-app-page .free-key-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--er-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--er-paper-soft) 88%, #fff);
}
body.convert-app-page .free-key-modal-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--er-line);
}

/* Raw compose details */
body.convert-app-page .raw-field-label,
body.convert-app-page .chapter-title-bar label {
  display: block;
  font-size: 11px;
  font-weight: 850;
  color: var(--er-muted);
  margin-bottom: 6px;
}
body.convert-app-page .raw-title-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
}
body.convert-app-page #chapterTitleInput {
  min-height: 40px;
  width: 100%;
  border: 1px solid var(--er-line-strong);
  border-radius: 12px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--er-paper-soft) 84%, #fff);
  color: var(--er-ink);
}
body.convert-app-page .raw-editor-head,
body.convert-app-page .convert-storage-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--er-muted);
  font-size: 12px;
}
body.convert-app-page .stat-badge {
  font-size: 11px;
  font-weight: 800;
  color: var(--er-muted);
  font-variant-numeric: tabular-nums;
}
body.convert-app-page .card-content { padding: 0 16px 16px; }
body.convert-app-page .model-chevron { opacity: .7; flex: 0 0 auto; }
body.convert-app-page .tts-select-value {
  font-size: 13px;
  font-weight: 800;
  color: var(--er-ink);
}
body.convert-app-page .tts-setting-range input[type="range"] {
  width: 100%;
  min-width: 0;
  accent-color: var(--er-gold);
}
body.convert-app-page .reader-chapter-meta {
  margin-top: 4px;
  color: var(--er-muted);
  font-size: 12px;
}
body.convert-app-page .empty-msg { /* alias */ }

/* Ensure header toggle remains clickable */
#toggleStoryMapBtn.story-map-toggle,
#translateModelToggle.model-toggle-btn {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}


/* Modal interactivity hard-lock: dialog always above backdrop, fully opaque */
body.convert-app-page .replace-modal:not([hidden]) > .replace-dialog,
body.convert-app-page .replace-modal:not([hidden]) > .convert-confirm-dialog,
body.convert-app-page .replace-modal:not([hidden]) > .convert-tools-dialog,
#findReplaceModal:not([hidden]) > .replace-dialog,
#convertConfirmModal:not([hidden]) > .replace-dialog,
#convertConfirmModal:not([hidden]) > .convert-confirm-dialog {
  position: relative !important;
  z-index: 2 !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  -webkit-user-select: text;
  user-select: text;
}
body.convert-app-page .replace-modal:not([hidden]) > .replace-backdrop,
body.convert-app-page .replace-modal:not([hidden]) > .convert-confirm-backdrop,
#findReplaceModal:not([hidden]) > .replace-backdrop,
#convertConfirmModal:not([hidden]) > .replace-backdrop,
#convertConfirmModal:not([hidden]) > .convert-confirm-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: auto !important;
}
body.convert-app-page .replace-modal:not([hidden]) input,
body.convert-app-page .replace-modal:not([hidden]) button,
body.convert-app-page .replace-modal:not([hidden]) textarea,
#findReplaceModal:not([hidden]) input,
#findReplaceModal:not([hidden]) button,
#convertConfirmModal:not([hidden]) button {
  pointer-events: auto !important;
  opacity: 1 !important;
  filter: none !important;
}


/* --------------------------------------------------------------------------
   Auto Từ Điển info modal — responsive PC/mobile
   -------------------------------------------------------------------------- */
body.convert-app-page #autoGlossaryInfoModal.auto-glossary-info-modal:not([hidden]),
#autoGlossaryInfoModal.auto-glossary-info-modal:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100510 !important;
  display: grid !important;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
  background: transparent;
  isolation: isolate;
  pointer-events: auto !important;
  opacity: 1 !important;
}
body.convert-app-page #autoGlossaryInfoModal[hidden],
#autoGlossaryInfoModal[hidden] {
  display: none !important;
}
#autoGlossaryInfoModal .auto-glossary-info-backdrop,
#autoGlossaryInfoModal .replace-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: rgba(15, 23, 42, 0.42) !important;
  pointer-events: auto !important;
}
#autoGlossaryInfoModal .auto-glossary-info-dialog,
#autoGlossaryInfoModal .replace-dialog {
  position: relative !important;
  z-index: 2 !important;
  width: min(480px, calc(100vw - 24px));
  max-height: min(88dvh, 720px);
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 16px;
  border: 1px solid var(--er-line-strong);
  background: color-mix(in srgb, var(--er-paper) 98%, #fff) !important;
  box-shadow: var(--er-shadow-lg);
  color: var(--er-ink) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#autoGlossaryInfoModal .auto-glossary-info-header,
#autoGlossaryInfoModal .replace-header {
  flex: 0 0 auto;
  padding: 14px 16px;
}
#autoGlossaryInfoModal .auto-glossary-info-body,
#autoGlossaryInfoModal .replace-body.auto-glossary-info-body {
  flex: 0 1 auto; /* hug content — no giant empty stretch */
  min-height: 0;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#autoGlossaryInfoModal .auto-glossary-info-footer,
#autoGlossaryInfoModal .replace-footer.auto-glossary-info-footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  margin: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--er-line);
  background: color-mix(in srgb, var(--er-paper) 96%, #fff);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
body.convert-app-page .auto-glossary-info-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--er-gold-soft);
  color: var(--er-gold-ink);
  border: 1px solid color-mix(in srgb, var(--er-gold) 28%, transparent);
  flex: 0 0 auto;
}
body.convert-app-page .auto-mode-list {
  display: grid;
  gap: 9px;
}
body.convert-app-page .auto-mode-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 12px 13px;
  border: 1px solid var(--er-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--er-paper-soft) 66%, var(--er-mix-light));
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
body.convert-app-page .auto-mode-card:hover {
  border-color: color-mix(in srgb, var(--er-gold) 42%, var(--er-line));
  background: color-mix(in srgb, var(--er-gold-soft) 34%, var(--er-paper));
}
body.convert-app-page .auto-mode-card-with-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  cursor: default;
  overflow: hidden;
}
body.convert-app-page .auto-mode-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 13px;
  cursor: pointer;
}
body.convert-app-page .auto-mode-suboption {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 13px;
  padding: 10px 0 11px;
  border-top: 1px solid var(--er-line);
  cursor: pointer;
}
body.convert-app-page .auto-mode-suboption-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
body.convert-app-page .auto-mode-tick {
  position: relative;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  border: 1.5px solid color-mix(in srgb, var(--er-muted) 42%, var(--er-line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--er-paper) 86%, var(--er-mix-light));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 52%, transparent);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body.convert-app-page .auto-mode-suboption:hover .auto-mode-tick {
  border-color: color-mix(in srgb, var(--er-gold) 46%, var(--er-line));
}
body.convert-app-page .auto-mode-tick::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: 2.2px solid transparent;
  border-top: 0;
  border-left: 0;
  border-radius: 0 0 1px 0;
  transform: rotate(45deg) scale(.55);
  opacity: 0;
  transition: transform .15s ease, opacity .15s ease, border-color .12s ease;
}
body.convert-app-page .auto-mode-suboption-input:checked + .auto-mode-tick {
  border-color: var(--er-gold);
  background: var(--er-gold);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--er-gold) 28%, transparent);
}
body.convert-app-page .auto-mode-suboption-input:checked + .auto-mode-tick::after {
  border-color: #fff;
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
body.convert-app-page .auto-mode-suboption-input:focus-visible + .auto-mode-tick {
  outline: 3px solid color-mix(in srgb, var(--er-gold) 28%, transparent);
  outline-offset: 2px;
}
body.convert-app-page .auto-mode-suboption-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
body.convert-app-page .auto-mode-suboption-copy strong {
  color: var(--er-ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
}
body.convert-app-page .auto-mode-suboption-copy small {
  color: var(--er-muted);
  font-size: 11px;
  font-weight: 620;
  line-height: 1.38;
}
body.convert-app-page .auto-mode-start-chapter {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
body.convert-app-page .auto-mode-chapter-input {
  width: 72px;
  min-width: 72px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--er-line);
  border-radius: 9px;
  background: var(--er-input);
  color: var(--er-ink);
  font-size: 13px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: center;
  flex: 0 0 72px;
  appearance: textfield;
  -moz-appearance: textfield;
}
body.convert-app-page .auto-mode-chapter-input::-webkit-outer-spin-button,
body.convert-app-page .auto-mode-chapter-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.convert-app-page .auto-mode-chapter-input::placeholder {
  color: color-mix(in srgb, var(--er-muted) 78%, transparent);
  font-weight: 650;
}
body.convert-app-page .auto-mode-chapter-input:focus {
  outline: 2px solid color-mix(in srgb, var(--er-gold) 48%, transparent);
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--er-gold) 46%, var(--er-line));
}
body.convert-app-page .auto-mode-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
body.convert-app-page .auto-mode-copy strong {
  color: var(--er-ink);
  font-size: 13.5px;
  font-weight: 900;
  line-height: 1.25;
}
body.convert-app-page .auto-mode-copy small {
  color: var(--er-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.42;
}
body.convert-app-page .auto-mode-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
body.convert-app-page .auto-mode-switch {
  position: relative;
  width: 42px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--er-muted) 42%, var(--er-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--er-muted) 16%, var(--er-paper));
  flex: 0 0 auto;
  transition: background .15s ease, border-color .15s ease;
}
body.convert-app-page .auto-mode-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .24);
  transition: transform .15s ease;
}
body.convert-app-page .auto-mode-input:checked + .auto-mode-switch {
  border-color: var(--er-gold);
  background: var(--er-gold);
}
body.convert-app-page .auto-mode-input:checked + .auto-mode-switch::after {
  transform: translateX(18px);
}
body.convert-app-page .auto-mode-input:focus-visible + .auto-mode-switch {
  outline: 3px solid color-mix(in srgb, var(--er-gold) 28%, transparent);
  outline-offset: 2px;
}

/* Night: mode cards must stay dark. Never lift their surface toward white. */
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryInfoModal .auto-mode-card {
  border-color: rgba(255, 255, 255, .11);
  background: linear-gradient(135deg, #282828 0%, #202020 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 2px 7px rgba(0, 0, 0, .22);
}
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryInfoModal .auto-mode-card:hover,
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryInfoModal .auto-mode-card:focus-within {
  border-color: rgba(240, 180, 41, .52);
  background: linear-gradient(135deg, #302a1e 0%, #26231d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 5px 14px rgba(0, 0, 0, .26);
}
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryInfoModal .auto-mode-card:has(.auto-mode-input:checked) {
  border-color: rgba(240, 180, 41, .64);
  background: linear-gradient(135deg, #382f1d 0%, #29241b 100%);
}
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryInfoModal .auto-mode-copy strong {
  color: #eee8dc;
}
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryInfoModal .auto-mode-copy small {
  color: #b8b1a7;
}
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryInfoModal .auto-mode-suboption {
  border-top-color: rgba(255, 255, 255, .1);
}
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryInfoModal .auto-mode-suboption-copy strong {
  color: #eee8dc;
}
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryInfoModal .auto-mode-suboption-copy small {
  color: #b8b1a7;
}
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryInfoModal .auto-mode-chapter-input {
  border-color: rgba(255, 255, 255, .14);
  background: #161616;
  color: #eee8dc;
}
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryInfoModal .auto-mode-tick {
  border-color: rgba(255, 255, 255, .17);
  background: #101010;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .72);
}
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryInfoModal .auto-mode-suboption-input:checked + .auto-mode-tick {
  border-color: #f4ca62;
  background: #c9921c;
  box-shadow: 0 0 0 3px rgba(240, 180, 41, .13);
}
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryInfoModal .auto-mode-suboption-input:checked + .auto-mode-tick::after {
  border-color: #fff8e8;
}
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryInfoModal .auto-mode-switch {
  border-color: rgba(255, 255, 255, .17);
  background: #101010;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .72);
}
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryInfoModal .auto-mode-switch::after {
  background: #f5f0e7;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .52);
}
html[data-reader-theme="night"] body.convert-app-page #autoGlossaryInfoModal .auto-mode-input:checked + .auto-mode-switch {
  border-color: #f4ca62;
  background: #c9921c;
  box-shadow: 0 0 0 3px rgba(240, 180, 41, .13);
}
body.convert-app-page .agi-status {
  display: none; /* footer CTA already shows Bật/Tắt — avoid redundant chip + extra space */
}
body.convert-app-page .agi-status[data-on="1"] {
  background: color-mix(in srgb, var(--er-gold) 16%, #fff);
  border-color: color-mix(in srgb, var(--er-gold) 35%, transparent);
  color: var(--er-gold-ink);
}
body.convert-app-page .agi-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #94a3b8;
}
body.convert-app-page .agi-status[data-on="1"] .agi-status-dot {
  background: var(--er-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 22%, transparent);
}
body.convert-app-page .agi-section h4 {
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--er-muted);
}
body.convert-app-page .agi-section ul {
  margin: 0;
  padding: 0 0 0 1.05rem;
  display: grid;
  gap: 4px;
  color: var(--er-ink);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.45;
}
body.convert-app-page .agi-cost-card {
  margin-top: 6px;
  border: 1px solid var(--er-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--er-paper-soft) 78%, #fff);
  padding: 10px 12px;
  display: grid;
  gap: 7px;
}
body.convert-app-page .agi-cost-row {
  display: grid;
  grid-template-columns: minmax(108px, 0.85fr) minmax(0, 1.25fr);
  align-items: start;
  gap: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--er-muted);
}
body.convert-app-page .agi-cost-row span {
  min-width: 0;
  white-space: nowrap;
}
body.convert-app-page .agi-cost-row strong {
  color: var(--er-ink);
  font-weight: 850;
  text-align: right;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.35;
}
body.convert-app-page .agi-cost-estimate {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px dashed var(--er-line);
  color: var(--er-ink);
}
body.convert-app-page .agi-cost-estimate strong {
  color: var(--er-gold-ink);
  font-size: 13.5px;
}
body.convert-app-page .agi-cost-note {
  margin: 2px 0 0;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--er-muted);
  line-height: 1.4;
}
body.convert-app-page .auto-glossary-info-toggle.is-on {
  background: color-mix(in srgb, var(--er-paper-soft) 70%, #fff) !important;
  border-color: var(--er-line-strong) !important;
  color: var(--er-ink) !important;
}
body.convert-app-page .auto-glossary-info-toggle:not(.is-on) {
  background: var(--er-gold) !important;
  border-color: var(--er-gold) !important;
  color: #fff !important;
}
body.convert-auto-glossary-info-open { overflow: hidden !important; }

/* Desktop: slightly wider single column — no dead empty grid cells */
@media (min-width: 900px) {
  #autoGlossaryInfoModal .auto-glossary-info-dialog,
  #autoGlossaryInfoModal .replace-dialog {
    width: min(500px, calc(100vw - 48px));
    max-height: min(84dvh, 720px);
  }
  #autoGlossaryInfoModal .auto-glossary-info-body,
  #autoGlossaryInfoModal .replace-body.auto-glossary-info-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 18px 14px;
  }
  #autoGlossaryInfoModal .auto-glossary-info-header,
  #autoGlossaryInfoModal .replace-header {
    padding: 14px 18px;
  }
  #autoGlossaryInfoModal .auto-glossary-info-footer,
  #autoGlossaryInfoModal .replace-footer.auto-glossary-info-footer {
    padding: 10px 18px;
  }
  body.convert-app-page .agi-section ul { font-size: 13.5px; gap: 5px; }
  body.convert-app-page .agi-cost-row {
    grid-template-columns: minmax(120px, 0.9fr) minmax(0, 1.2fr);
  }
}

/* Phone / narrow: denser, full usable width, sticky footer always visible */
@media (max-width: 640px) {
  body.convert-app-page #autoGlossaryInfoModal.auto-glossary-info-modal:not([hidden]),
  #autoGlossaryInfoModal.auto-glossary-info-modal:not([hidden]) {
    place-items: end center;
    padding: 8px 8px max(8px, env(safe-area-inset-bottom, 0px));
  }
  #autoGlossaryInfoModal .auto-glossary-info-dialog,
  #autoGlossaryInfoModal .replace-dialog {
    width: min(100vw - 12px, 100%);
    max-height: min(90dvh, 100%);
    height: auto !important;
    border-radius: 14px 14px 12px 12px;
  }
  #autoGlossaryInfoModal .auto-glossary-info-header,
  #autoGlossaryInfoModal .replace-header {
    padding: 12px 12px 10px;
    gap: 8px;
  }
  #autoGlossaryInfoModal .auto-glossary-info-body,
  #autoGlossaryInfoModal .replace-body.auto-glossary-info-body {
    padding: 8px 12px 12px;
    gap: 10px;
  }
  body.convert-app-page .auto-glossary-info-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  body.convert-app-page .auto-mode-card {
    padding: 11px;
    gap: 10px;
  }
  body.convert-app-page .auto-mode-card-with-option { padding: 0; gap: 0; }
  body.convert-app-page .auto-mode-main { padding: 11px; gap: 10px; }
  body.convert-app-page .auto-mode-suboption { margin: 0 11px; padding: 9px 0 10px; }
  body.convert-app-page .auto-mode-start-chapter { flex-wrap: wrap; }
  body.convert-app-page .auto-mode-chapter-input {
    width: 80px;
    min-width: 80px;
    flex-basis: 80px;
    min-height: 36px;
  }
  body.convert-app-page .auto-mode-copy strong { font-size: 13px; }
  body.convert-app-page .auto-mode-copy small { font-size: 11.5px; }
  body.convert-app-page .agi-section ul {
    font-size: 13px;
    gap: 4px;
    padding-left: 1rem;
  }
  body.convert-app-page .agi-cost-card {
    padding: 8px 10px;
    gap: 6px;
    margin-top: 6px;
  }
  body.convert-app-page .agi-cost-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 6px 10px;
    font-size: 12px;
  }
  body.convert-app-page .agi-cost-estimate strong { font-size: 13px; }
  #autoGlossaryInfoModal .auto-glossary-info-footer,
  #autoGlossaryInfoModal .replace-footer.auto-glossary-info-footer {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
  }
  #autoGlossaryInfoModal .auto-glossary-info-footer .replace-cancel,
  #autoGlossaryInfoModal .auto-glossary-info-footer .replace-submit {
    flex: 1 1 auto;
    min-height: 40px;
  }
}

#autoGlossaryInfoModal:not([hidden]) > .replace-dialog,
#autoGlossaryInfoModal:not([hidden]) > .auto-glossary-info-dialog {
  position: relative !important;
  z-index: 2 !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}
#autoGlossaryInfoModal:not([hidden]) > .replace-backdrop,
#autoGlossaryInfoModal:not([hidden]) > .auto-glossary-info-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: auto !important;
}
#autoGlossaryInfoModal:not([hidden]) button {
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* Dock theme swatch scale on compact dock */
@media (max-width: 900px) {
  body.convert-app-page #theme-toggle {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  body.convert-app-page #theme-toggle::before {
    width: 14px !important;
    height: 14px !important;
  }
  body.convert-app-page .reader-theme-panel,
  #convertReaderThemePanel.reader-theme-panel {
    width: min(280px, calc(100vw - 12px));
    border-radius: 16px;
  }
}
@media (max-width: 640px) {
  body.convert-app-page #theme-toggle {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
  body.convert-app-page #theme-toggle::before {
    width: 13px !important;
    height: 13px !important;
  }
  body.convert-app-page .convert-command-bar {
    gap: 3px;
    padding: 3px;
  }
}


/* Dictionary tool icon in reader toolbar (next to find) */
body.convert-app-page #openDictToolsBtn.reader-tool-btn,
body.convert-app-page #openDictToolsBtn.reader-tool-label-btn {
  position: relative;
  width: auto !important;
  min-width: 0 !important;
  height: 36px !important;
  padding: 0 11px 0 9px !important;
  gap: 6px !important;
  border-radius: var(--er-radius-pill) !important;
}
body.convert-app-page #openDictToolsBtn .reader-tool-label {
  display: inline-block !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: inherit;
}
body.convert-app-page #openDictToolsBtn svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
body.convert-app-page #openDictToolsBtn.reader-tool-btn.is-active,
body.convert-app-page.body.convert-tools-open #openDictToolsBtn.reader-tool-btn,
body.convert-tools-open #openDictToolsBtn.reader-tool-btn {
  border-color: color-mix(in srgb, var(--er-gold) 40%, var(--er-line));
  color: var(--er-gold-ink);
  background: var(--er-gold-soft);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px color-mix(in srgb, var(--er-gold) 28%, transparent);
}
@media (max-width: 900px) {
  body.convert-app-page #openDictToolsBtn.reader-tool-btn,
  body.convert-app-page #openDictToolsBtn.reader-tool-label-btn {
    height: 34px !important;
    padding: 0 10px 0 8px !important;
  }
}
@media (max-width: 640px) {
  body.convert-app-page #openDictToolsBtn.reader-tool-btn,
  body.convert-app-page #openDictToolsBtn.reader-tool-label-btn {
    height: 32px !important;
    padding: 0 9px 0 8px !important;
    gap: 5px !important;
  }
  body.convert-app-page #openDictToolsBtn .reader-tool-label {
    font-size: 11.5px;
  }
}
@media (max-width: 380px) {
  body.convert-app-page #openDictToolsBtn .reader-tool-label {
    font-size: 11px;
  }
}

/* === DICT MODAL HARDEN v2 === */

/* Dictionary modal: one scroll surface, themed scrollbar, no layout break */
body.convert-app-page #convertToolsModal:not([hidden]),
#convertToolsModal.replace-modal:not([hidden]) {
  place-items: center;
  padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
}

body.convert-app-page #convertToolsModal .convert-tools-dialog,
body.convert-app-page #convertToolsModal .convert-dict-dialog,
#convertToolsModal .convert-tools-dialog {
  width: min(560px, calc(100vw - 16px)) !important;
  max-width: calc(100vw - 16px) !important;
  max-height: min(86dvh, 780px) !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--er-paper) 98%, #fff) !important;
}

body.convert-app-page #convertToolsModal .replace-header,
#convertToolsModal .replace-header {
  flex: 0 0 auto !important;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 14px !important;
  background: color-mix(in srgb, var(--er-paper) 98%, #fff);
  border-bottom: 1px solid var(--er-line);
}

body.convert-app-page #convertToolsModal .replace-body,
body.convert-app-page #convertToolsModal .convert-tools-body,
#convertToolsModal .replace-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 12px 14px 16px !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--er-ink) 28%, transparent) color-mix(in srgb, var(--er-paper-soft) 90%, #fff);
}

/* Themed scrollbar: dialog body + list + prompt */
body.convert-app-page #convertToolsModal .replace-body::-webkit-scrollbar,
body.convert-app-page #convertToolsModal .cv-friendly-list::-webkit-scrollbar,
body.convert-app-page #convertToolsModal .cv-prompt-textarea::-webkit-scrollbar,
body.convert-app-page #convertToolsModal #cvPrompt::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body.convert-app-page #convertToolsModal .replace-body::-webkit-scrollbar-track,
body.convert-app-page #convertToolsModal .cv-friendly-list::-webkit-scrollbar-track,
body.convert-app-page #convertToolsModal .cv-prompt-textarea::-webkit-scrollbar-track,
body.convert-app-page #convertToolsModal #cvPrompt::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--er-paper-soft) 92%, #fff);
  border-radius: 999px;
  margin: 4px 0;
}
body.convert-app-page #convertToolsModal .replace-body::-webkit-scrollbar-thumb,
body.convert-app-page #convertToolsModal .cv-friendly-list::-webkit-scrollbar-thumb,
body.convert-app-page #convertToolsModal .cv-prompt-textarea::-webkit-scrollbar-thumb,
body.convert-app-page #convertToolsModal #cvPrompt::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--er-ink) 26%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
body.convert-app-page #convertToolsModal .replace-body::-webkit-scrollbar-thumb:hover,
body.convert-app-page #convertToolsModal .cv-friendly-list::-webkit-scrollbar-thumb:hover,
body.convert-app-page #convertToolsModal .cv-prompt-textarea::-webkit-scrollbar-thumb:hover,
body.convert-app-page #convertToolsModal #cvPrompt::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--er-ink) 40%, transparent);
  background-clip: content-box;
  border: 2px solid transparent;
}
body.convert-app-page #convertToolsModal .replace-body::-webkit-scrollbar-corner,
body.convert-app-page #convertToolsModal .cv-prompt-textarea::-webkit-scrollbar-corner,
body.convert-app-page #convertToolsModal #cvPrompt::-webkit-scrollbar-corner {
  background: transparent;
}

/* Compact inner cards — avoid nested bulk */
body.convert-app-page #convertToolsModal .cv-dict-panel {
  gap: 10px !important;
}
body.convert-app-page #convertToolsModal .cv-dict-card,
body.convert-app-page #convertToolsModal .cv-prompt-details {
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--er-paper-soft) 70%, var(--er-paper)) !important;
}

/* Search: kill blue browser ring */
body.convert-app-page #convertToolsModal .cv-search-box {
  min-height: 40px !important;
  border: 1px solid var(--er-line-strong) !important;
  box-shadow: none !important;
  background: color-mix(in srgb, var(--er-paper) 96%, #fff) !important;
}
body.convert-app-page #convertToolsModal .cv-search-box:focus-within {
  border-color: color-mix(in srgb, var(--er-gold) 60%, var(--er-line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 18%, transparent) !important;
}
body.convert-app-page #convertToolsModal .cv-search-box input,
body.convert-app-page #convertToolsModal #cvDictSearch {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  color: var(--er-ink) !important;
}
body.convert-app-page #convertToolsModal .cv-search-box input:focus,
body.convert-app-page #convertToolsModal #cvDictSearch:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Empty state: less dashed bulk */
body.convert-app-page #convertToolsModal .cv-friendly-empty {
  padding: 10px 8px !important;
  border-style: dashed !important;
  border-color: color-mix(in srgb, var(--er-line-strong) 80%, transparent) !important;
  background: transparent !important;
  color: var(--er-muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* Learn row tight */
body.convert-app-page #convertToolsModal .cv-learn-row {
  gap: 6px !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--er-line) !important;
}
body.convert-app-page #convertToolsModal .cv-learn-row input {
  min-height: 30px !important;
  height: 30px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  border: 1px solid var(--er-line) !important;
  outline: none !important;
}
body.convert-app-page #convertToolsModal .cv-learn-btn {
  min-height: 30px !important;
  height: 30px !important;
  min-width: 60px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 0 11px !important;
}

/* Action chips */
body.convert-app-page #convertToolsModal .cv-adv-actions {
  gap: 6px !important;
  margin-top: 8px !important;
}
body.convert-app-page #convertToolsModal .cv-adv-btn {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  border: 1px solid var(--er-line) !important;
  background: color-mix(in srgb, var(--er-paper) 96%, #fff) !important;
  color: var(--er-muted) !important;
}

/* Prompt block */
body.convert-app-page #convertToolsModal .cv-prompt-select,
body.convert-app-page #convertToolsModal #cvPromptPreset {
  min-height: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  outline: none !important;
}
body.convert-app-page #convertToolsModal .cv-prompt-textarea,
body.convert-app-page #convertToolsModal #cvPrompt {
  min-height: 128px !important;
  max-height: 200px !important;
  resize: vertical !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  line-height: 1.55 !important;
  outline: none !important;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--er-ink) 28%, transparent) color-mix(in srgb, var(--er-paper-soft) 90%, #fff);
}

/* Friendly list: own scroll only when many items */
body.convert-app-page #convertToolsModal .cv-friendly-list {
  max-height: min(42vh, 320px) !important;
  margin-top: 8px !important;
  padding-right: 4px !important;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--er-ink) 28%, transparent) transparent;
}

/* Title wrap */
body.convert-app-page #convertToolsModal .replace-title-wrap h3 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--er-ink) !important;
}
body.convert-app-page #convertToolsModal .replace-title-wrap p {
  margin: 2px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: var(--er-muted) !important;
}
body.convert-app-page #convertToolsModal .replace-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--er-gold) !important;
  background: color-mix(in srgb, var(--er-gold) 12%, var(--er-paper)) !important;
  border: 1px solid color-mix(in srgb, var(--er-gold) 22%, var(--er-line)) !important;
  flex: 0 0 auto !important;
}

@media (max-width: 640px) {
  body.convert-app-page #convertToolsModal .convert-tools-dialog,
  body.convert-app-page #convertToolsModal .convert-dict-dialog,
  #convertToolsModal .convert-tools-dialog {
    width: calc(100vw - 12px) !important;
    max-height: min(92dvh, 860px) !important;
    border-radius: 14px !important;
  }
  body.convert-app-page #convertToolsModal .replace-header,
  body.convert-app-page #convertToolsModal .replace-body {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body.convert-app-page #convertToolsModal .cv-learn-row {
    grid-template-columns: 1fr !important;
  }
  body.convert-app-page #convertToolsModal .cv-learn-eq { display: none !important; }
  body.convert-app-page #convertToolsModal .cv-learn-btn { width: 100% !important; }
  body.convert-app-page #convertToolsModal .cv-prompt-textarea,
  body.convert-app-page #convertToolsModal #cvPrompt {
    max-height: 160px !important;
  }
}


/* === DICT INPUT HARD-LOCK === */
/* Search: only the outer shell has border; inner input is bare */
body.convert-app-page #convertToolsModal .cv-search-box,
#convertToolsModal .cv-search-box {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid var(--er-line) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--er-paper) 97%, #fff) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
body.convert-app-page #convertToolsModal .cv-search-box:focus-within,
#convertToolsModal .cv-search-box:focus-within {
  border-color: color-mix(in srgb, var(--er-gold) 58%, var(--er-line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 14%, transparent) !important;
}
body.convert-app-page #convertToolsModal .cv-search-box input,
body.convert-app-page #convertToolsModal #cvDictSearch,
#convertToolsModal .cv-search-box input,
#convertToolsModal #cvDictSearch {
  all: unset !important;
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--er-ink) !important;
  font: 500 12.5px/1.35 var(--er-font-ui, system-ui, sans-serif) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  caret-color: var(--er-ink) !important;
}
body.convert-app-page #convertToolsModal .cv-search-box input:focus,
body.convert-app-page #convertToolsModal #cvDictSearch:focus,
#convertToolsModal .cv-search-box input:focus,
#convertToolsModal #cvDictSearch:focus {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Kill browser search clear button weirdness a bit */
body.convert-app-page #convertToolsModal input[type="search"]::-webkit-search-decoration,
body.convert-app-page #convertToolsModal input[type="search"]::-webkit-search-cancel-button,
body.convert-app-page #convertToolsModal input[type="search"]::-webkit-search-results-button {
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Learn inputs: independent fields, no extra bottom margin from old rules */
body.convert-app-page #convertToolsModal .cv-learn-row input,
body.convert-app-page #convertToolsModal #cvLearnSource,
body.convert-app-page #convertToolsModal #cvLearnTarget,
#convertToolsModal .cv-learn-row input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 1px solid var(--er-line) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--er-paper) 98%, #fff) !important;
  color: var(--er-ink) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
body.convert-app-page #convertToolsModal .cv-learn-row input:focus,
body.convert-app-page #convertToolsModal #cvLearnSource:focus,
body.convert-app-page #convertToolsModal #cvLearnTarget:focus {
  border-color: color-mix(in srgb, var(--er-gold) 58%, var(--er-line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 14%, transparent) !important;
}

/* Prompt select / textarea focus clean */
body.convert-app-page #convertToolsModal #cvPromptPreset:focus,
body.convert-app-page #convertToolsModal #cvPrompt:focus {
  border-color: color-mix(in srgb, var(--er-gold) 58%, var(--er-line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 14%, transparent) !important;
  outline: none !important;
}


/* === DICT CTA + FIND EMBED === */
/* Primary CTA "Thêm" compact chip button */
body.convert-app-page #convertToolsModal #cvLearnBtn.cv-learn-btn,
body.convert-app-page #convertToolsModal button.cv-learn-btn,
#convertToolsModal #cvLearnBtn {
  background: color-mix(in srgb, var(--er-gold) 90%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--er-gold) 50%, transparent) !important;
  color: #7c2d12 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  min-height: 30px !important;
  height: 30px !important;
  min-width: 60px !important;
  padding: 0 11px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  opacity: 1 !important;
  filter: none !important;
}
body.convert-app-page #convertToolsModal #cvLearnBtn.cv-learn-btn:hover,
#convertToolsModal #cvLearnBtn:hover {
  background: var(--er-gold) !important;
  color: #fff !important;
}

/* Neutral chips stay muted; do not bleed onto learn btn */
body.convert-app-page #convertToolsModal .cv-adv-actions .cv-adv-btn:not(.cv-learn-btn):not(.cv-find-apply) {
  background: color-mix(in srgb, var(--er-paper) 96%, #fff) !important;
  color: var(--er-ink) !important;
}

/* Embedded find/replace block */
body.convert-app-page #convertToolsModal .cv-find-details,
body.convert-app-page .cv-find-details {
  border: 1px solid var(--er-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--er-paper-soft) 70%, var(--er-paper));
  padding: 10px 12px;
}
body.convert-app-page #convertToolsModal .cv-find-details > summary,
body.convert-app-page .cv-find-details > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  font-weight: 900;
  color: var(--er-ink);
}
body.convert-app-page #convertToolsModal .cv-find-details > summary::-webkit-details-marker,
body.convert-app-page .cv-find-details > summary::-webkit-details-marker {
  display: none;
}
body.convert-app-page #convertToolsModal .cv-find-details > summary small,
body.convert-app-page .cv-find-details > summary small {
  font-size: 11px;
  font-weight: 750;
  color: var(--er-muted);
}
body.convert-app-page #convertToolsModal .cv-find-body,
body.convert-app-page .cv-find-body {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.convert-app-page #convertToolsModal .cv-find-body input,
body.convert-app-page #convertToolsModal #findReplaceFind,
body.convert-app-page #convertToolsModal #findReplaceReplace {
  width: 100% !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid var(--er-line-strong) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--er-paper) 96%, #fff) !important;
  color: var(--er-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
body.convert-app-page #convertToolsModal .cv-find-body input:focus,
body.convert-app-page #convertToolsModal #findReplaceFind:focus,
body.convert-app-page #convertToolsModal #findReplaceReplace:focus {
  border-color: color-mix(in srgb, var(--er-gold) 58%, var(--er-line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 14%, transparent) !important;
}
body.convert-app-page #convertToolsModal .cv-find-preview,
body.convert-app-page .cv-find-preview {
  min-height: 20px;
  margin: 2px 0 4px;
  color: var(--er-muted);
  font-size: 12px;
  font-weight: 750;
}
body.convert-app-page #convertToolsModal .cv-find-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}
body.convert-app-page #convertToolsModal #applyFindReplaceBtn.cv-find-apply,
body.convert-app-page #convertToolsModal .cv-find-apply {
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--er-gold) 16%, var(--er-paper)) !important;
  border: 1px solid color-mix(in srgb, var(--er-gold) 42%, var(--er-line)) !important;
  color: color-mix(in srgb, var(--er-gold) 70%, #000) !important;
  font-weight: 900 !important;
}
body.convert-app-page #convertToolsModal #applyFindReplaceBtn.cv-find-apply:disabled,
body.convert-app-page #convertToolsModal .cv-find-apply:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  filter: none !important;
}
body.convert-app-page #convertToolsModal #applyFindReplaceBtn.cv-find-apply:not(:disabled):hover {
  background: color-mix(in srgb, var(--er-gold) 24%, var(--er-paper)) !important;
}

/* When find icon opens tools, highlight search tool as active while open */
body.convert-tools-open #openFindReplaceBtn.reader-tool-btn.is-active,
body.convert-app-page.body.convert-tools-open #openFindReplaceBtn.reader-tool-btn.is-active {
  color: var(--er-gold);
  background: color-mix(in srgb, var(--er-gold) 12%, var(--er-paper));
  border-color: color-mix(in srgb, var(--er-gold) 30%, var(--er-line));
}


/* === TOOLS TABS === */
body.convert-app-page #convertToolsModal .cv-tools-tabs,
#convertToolsModal .cv-tools-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 12px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--er-line);
  background: color-mix(in srgb, var(--er-paper-soft) 78%, var(--er-paper));
}
body.convert-app-page #convertToolsModal .cv-tools-tab,
#convertToolsModal .cv-tools-tab {
  min-height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--er-muted);
  font-size: 12.5px;
  font-weight: 900;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
body.convert-app-page #convertToolsModal .cv-tools-tab:hover {
  color: var(--er-ink);
  background: color-mix(in srgb, var(--er-paper) 70%, transparent);
}
body.convert-app-page #convertToolsModal .cv-tools-tab.is-active,
#convertToolsModal .cv-tools-tab.is-active {
  color: var(--er-ink);
  background: color-mix(in srgb, var(--er-paper) 96%, #fff);
  box-shadow: 0 1px 2px color-mix(in srgb, #000 8%, transparent);
}
body.convert-app-page #convertToolsModal .cv-tools-panel,
#convertToolsModal .cv-tools-panel {
  display: none;
  flex-direction: column;
  gap: 10px;
}
body.convert-app-page #convertToolsModal .cv-tools-panel.is-active,
#convertToolsModal .cv-tools-panel.is-active {
  display: flex !important;
}
body.convert-app-page #convertToolsModal .cv-tools-panel[hidden] {
  display: none !important;
}

/* Find card always visible on dict tab (no details accordion) */
body.convert-app-page #convertToolsModal .cv-find-card,
#convertToolsModal .cv-find-card {
  border: 1px solid var(--er-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--er-paper-soft) 70%, var(--er-paper));
  padding: 10px 12px;
}
body.convert-app-page #convertToolsModal .cv-find-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
body.convert-app-page #convertToolsModal .cv-find-head strong {
  font-size: 12.5px;
  font-weight: 900;
  color: var(--er-ink);
}
body.convert-app-page #convertToolsModal .cv-find-head small {
  font-size: 11px;
  font-weight: 750;
  color: var(--er-muted);
}

/* Prompt tab card */
body.convert-app-page #convertToolsModal .cv-prompt-card,
#convertToolsModal .cv-prompt-card {
  border: 1px solid var(--er-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--er-paper-soft) 70%, var(--er-paper));
  padding: 12px;
}
body.convert-app-page #convertToolsModal #cvToolsPanelPrompt .cv-prompt-textarea,
body.convert-app-page #convertToolsModal #cvToolsPanelPrompt #cvPrompt {
  min-height: min(42vh, 320px) !important;
  max-height: min(56vh, 480px) !important;
}


/* === PROMPT TAB CLEAN === */
body.convert-app-page #convertToolsModal #cvToolsPanelPrompt .cv-prompt-card,
#convertToolsModal #cvToolsPanelPrompt .cv-prompt-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px !important;
  border: 1px solid var(--er-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--er-paper-soft) 70%, var(--er-paper));
}
body.convert-app-page #convertToolsModal .cv-prompt-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.convert-app-page #convertToolsModal .cv-prompt-preset-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
body.convert-app-page #convertToolsModal .cv-prompt-hint {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--er-muted);
  font-weight: 650;
}
body.convert-app-page #convertToolsModal .cv-prompt-hint strong {
  color: var(--er-ink);
  font-weight: 850;
}
body.convert-app-page #convertToolsModal .cv-prompt-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
body.convert-app-page #convertToolsModal .cv-prompt-label-row .cv-field-label {
  margin: 0;
}
body.convert-app-page #convertToolsModal #cvToolsPanelPrompt .cv-prompt-select,
body.convert-app-page #convertToolsModal #cvToolsPanelPrompt #cvPromptPreset {
  min-height: 40px !important;
  width: 100%;
  border-radius: 10px !important;
}
body.convert-app-page #convertToolsModal #cvToolsPanelPrompt .cv-prompt-textarea,
body.convert-app-page #convertToolsModal #cvToolsPanelPrompt #cvPrompt {
  min-height: min(46vh, 360px) !important;
  max-height: min(58vh, 520px) !important;
  margin: 0 !important;
  border-radius: 12px !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
}
body.convert-app-page #convertToolsModal .cv-prompt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
body.convert-app-page #convertToolsModal #cvResetPromptPresetBtn {
  min-height: 40px !important;
  white-space: nowrap;
  padding: 0 12px !important;
}
body.convert-app-page #convertToolsModal #cvSavePromptLocalBtn.cv-prompt-save {
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--er-gold) 16%, var(--er-paper)) !important;
  border: 1px solid color-mix(in srgb, var(--er-gold) 40%, var(--er-line)) !important;
  color: color-mix(in srgb, var(--er-gold) 72%, #000) !important;
  font-weight: 900 !important;
}
@media (max-width: 640px) {
  body.convert-app-page #convertToolsModal .cv-prompt-preset-row {
    grid-template-columns: 1fr;
  }
  body.convert-app-page #convertToolsModal #cvResetPromptPresetBtn {
    width: 100%;
  }
  body.convert-app-page #convertToolsModal #cvToolsPanelPrompt .cv-prompt-textarea,
  body.convert-app-page #convertToolsModal #cvToolsPanelPrompt #cvPrompt {
    min-height: min(38vh, 280px) !important;
    max-height: min(48vh, 360px) !important;
  }
}


/* API key modal host — always full-viewport overlay when open */
body.convert-app-page #translateFreeKeyPanel.free-key-modal-backdrop:not([hidden]),
#translateFreeKeyPanel.free-key-modal-backdrop:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100470 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 16px;
  contain: layout style;
  isolation: isolate;
}
body.convert-app-page #translateFreeKeyPanel .free-key-modal-card {
  contain: layout paint;
  max-height: min(86vh, 720px);
  overflow: auto;
}
body.convert-tools-open #convertApp,
body.convert-key-open #convertApp,
body.convert-tools-open .convert-simple-root,
body.convert-key-open .convert-simple-root {
  content-visibility: auto;
  contain: layout paint style;
}

/* AI Search Modal Styling */
body.ai-search-open {
  overflow: hidden;
}
/* While AI modal is open, keep heavy convert surface cheaper to paint. */
body.ai-search-open #convertApp,
body.ai-search-open .convert-simple-root {
  content-visibility: auto;
  contain: layout paint style;
}
#aiSearchModal {
  position: fixed;
  inset: 0;
  z-index: 100460;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  contain: layout style;
  isolation: isolate;
}
#aiSearchModal[hidden] {
  display: none !important;
}
#aiSearchModal .replace-backdrop,
#aiSearchModalBackdrop {
  position: absolute;
  inset: 0;
  background: var(--er-scrim, rgba(0, 0, 0, 0.55));
  border: 0;
  padding: 0;
  cursor: pointer;
}
#aiSearchModal .ai-search-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 680px;
  max-height: min(90vh, 860px);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--er-gold) 35%, var(--er-line));
  background: var(--er-surface, var(--er-paper, #fffdf8));
  color: var(--er-ink);
  box-shadow: var(--er-shadow-lg, 0 16px 40px rgba(0, 0, 0, 0.22));
  overflow: hidden;
  contain: layout paint;
  transform: translateZ(0);
}
#aiSearchModal .ai-search-modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  content-visibility: auto;
  contain-intrinsic-size: 420px;
}


/* === PROMPT EMPTY DEFAULT UX === */
/* === PROMPT EMPTY DEFAULT UX === */
body.convert-app-page #convertToolsModal .cv-prompt-default-banner,
#convertToolsModal .cv-prompt-default-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--er-gold) 35%, var(--er-line));
  background: color-mix(in srgb, var(--er-gold) 10%, var(--er-paper));
}
body.convert-app-page #convertToolsModal .cv-prompt-default-banner.is-custom {
  border-color: color-mix(in srgb, var(--er-gold) 45%, var(--er-line));
  background: color-mix(in srgb, var(--er-gold) 14%, var(--er-paper));
}
body.convert-app-page #convertToolsModal .cv-prompt-default-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #7c2d12;
  background: color-mix(in srgb, var(--er-gold) 18%, #fff);
  border: 1px solid color-mix(in srgb, var(--er-gold) 35%, transparent);
}
body.convert-app-page #convertToolsModal .cv-prompt-default-banner.is-custom .cv-prompt-default-icon {
  color: #7c2d12;
  background: color-mix(in srgb, var(--er-gold) 22%, #fff);
  border-color: color-mix(in srgb, var(--er-gold) 40%, transparent);
}
body.convert-app-page #convertToolsModal .cv-prompt-default-copy {
  flex: 1 1 auto;
  min-width: 0;
}
body.convert-app-page #convertToolsModal .cv-prompt-default-copy strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--er-ink);
  line-height: 1.3;
}
body.convert-app-page #convertToolsModal .cv-prompt-default-copy p {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--er-muted);
  font-weight: 500;
}
body.convert-app-page #convertToolsModal .cv-prompt-mode-pill {
  flex: 0 0 auto;
  align-self: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
body.convert-app-page #convertToolsModal .cv-prompt-mode-pill.is-default {
  color: #7c2d12;
  background: color-mix(in srgb, var(--er-gold) 14%, #fff);
  border-color: color-mix(in srgb, var(--er-gold) 35%, transparent);
}
body.convert-app-page #convertToolsModal .cv-prompt-mode-pill.is-custom {
  color: #7c2d12;
  background: color-mix(in srgb, var(--er-gold) 18%, #fff);
  border-color: color-mix(in srgb, var(--er-gold) 40%, transparent);
}

/* Prompt Options Cards */
body.convert-app-page .cv-prompt-actions-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
body.convert-app-page .cv-prompt-option-item {
  border: 1px solid var(--er-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--er-paper) 98%, #fff);
  padding: 8px 10px;
  transition: all 0.15s ease;
}
body.convert-app-page .cv-prompt-option-item:hover {
  border-color: color-mix(in srgb, var(--er-gold) 35%, var(--er-line));
}
body.convert-app-page .cv-prompt-option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
body.convert-app-page .cv-proper-name-scan-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
body.convert-app-page .cv-proper-name-scan-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border: 1.5px solid color-mix(in srgb, var(--er-gold) 45%, var(--er-line-strong));
  border-radius: 5px;
  background: color-mix(in srgb, var(--er-paper) 98%, #fff);
  margin: 0;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
body.convert-app-page .cv-proper-name-scan-toggle input[type="checkbox"]:hover {
  border-color: var(--er-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 14%, transparent);
}
body.convert-app-page .cv-proper-name-scan-toggle input[type="checkbox"]:checked {
  background-color: var(--er-gold, #d97706);
  border-color: color-mix(in srgb, var(--er-gold) 85%, #000);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}
body.convert-app-page #cvProperNameScanLevel {
  appearance: none;
  -webkit-appearance: none;
  min-height: 30px;
  height: 30px;
  padding: 0 26px 0 10px;
  border: 1px solid color-mix(in srgb, var(--er-gold) 35%, var(--er-line));
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--er-paper) 98%, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237c2d12' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 12px;
  color: #7c2d12;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
}
body.convert-app-page #cvProperNameScanLevel:hover,
body.convert-app-page #cvProperNameScanLevel:focus {
  border-color: var(--er-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 14%, transparent);
}
body.convert-app-page .cv-option-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--er-ink);
}
body.convert-app-page .cv-option-cost-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: #7c2d12;
  background: color-mix(in srgb, var(--er-gold) 14%, var(--er-paper));
  border: 1px solid color-mix(in srgb, var(--er-gold) 30%, transparent);
  padding: 2px 8px;
  border-radius: 6px;
}
body.convert-app-page .cv-prompt-execute-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
body.convert-app-page .cv-prompt-execute-btn {
  min-height: 34px;
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--er-gold) 50%, transparent);
  background: color-mix(in srgb, var(--er-gold) 90%, #fff);
  color: #7c2d12;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
body.convert-app-page .cv-prompt-execute-btn:hover {
  background: var(--er-gold);
  color: #fff;
}
body.convert-app-page #convertToolsModal .cv-prompt-clear {
  border: 0;
  background: transparent;
  color: var(--er-muted);
  font-size: 11.5px;
  font-weight: 850;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.convert-app-page #convertToolsModal .cv-prompt-clear:hover {
  color: var(--er-ink);
}
body.convert-app-page #convertToolsModal #cvToolsPanelPrompt .cv-prompt-textarea,
body.convert-app-page #convertToolsModal #cvToolsPanelPrompt #cvPrompt {
  min-height: min(28vh, 220px) !important;
  max-height: min(42vh, 340px) !important;
}
body.convert-app-page #convertToolsModal #cvToolsPanelPrompt .cv-prompt-hint {
  margin: 8px 0 0;
}
@media (max-width: 640px) {
  body.convert-app-page #convertToolsModal .cv-prompt-default-banner {
    flex-wrap: wrap;
  }
  body.convert-app-page #convertToolsModal .cv-prompt-mode-pill {
    margin-left: 40px;
  }
}


/* === PROMPT OPTIMIZE BTN === */
body.convert-app-page #convertToolsModal .cv-prompt-actions-top {
  margin: 0 0 10px;
}
body.convert-app-page #convertToolsModal .cv-proper-name-scan-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 0 0 8px;
}
body.convert-app-page #convertToolsModal .cv-proper-name-scan-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  font-size: 13px;
  font-weight: 850;
  color: var(--er-ink);
  cursor: pointer;
}
body.convert-app-page #convertToolsModal .cv-proper-name-scan-note {
  margin: 4px 0 0;
  color: var(--er-muted);
  font-size: 11.5px;
  line-height: 1.45;
}
@media (max-width: 540px) {
  body.convert-app-page #convertToolsModal .cv-proper-name-scan-option {
    grid-template-columns: 1fr;
  }
}
body.convert-app-page #convertToolsModal .cv-prompt-optimize-btn,
#convertToolsModal #cvOptimizeStoryPromptBtn {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--er-gold) 42%, var(--er-line));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--er-gold) 22%, var(--er-paper)),
    color-mix(in srgb, var(--er-gold) 10%, var(--er-paper))
  );
  color: color-mix(in srgb, var(--er-gold) 78%, #000);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 1px 0 color-mix(in srgb, #000 6%, transparent);
}
body.convert-app-page #convertToolsModal .cv-prompt-optimize-btn small {
  font-size: 10.5px;
  font-weight: 800;
  opacity: .78;
  margin-left: 2px;
}
body.convert-app-page #convertToolsModal .cv-prompt-optimize-btn:hover {
  filter: brightness(1.03);
}
body.convert-app-page #convertToolsModal .cv-prompt-optimize-btn:disabled,
body.convert-app-page #convertToolsModal .cv-prompt-optimize-btn.is-loading {
  opacity: .7;
  cursor: wait;
}
body.convert-app-page #convertToolsModal .cv-prompt-optimize-btn.is-loading span::after {
  content: '…';
}


/* === RAW COMPOSE FIX === */
body.convert-app-page .convert-simple-root.is-raw-modal-open .input-card#rawPanelCard,
body.convert-raw-modal-open .input-card#rawPanelCard,
body.convert-app-page.convert-raw-modal-open #rawPanelCard {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  top: calc(var(--er-site-header) + var(--er-app-header) + 12px) !important;
  bottom: calc(var(--er-dock) + 12px + env(safe-area-inset-bottom, 0px)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(920px, calc(100vw - 24px)) !important;
  height: auto !important;
  max-height: none !important;
}
body.convert-app-page #rawPanelCard > .card-header {
  flex: 0 0 auto;
  padding: 12px 16px !important;
}
body.convert-app-page #rawPanelCard .raw-modal-form {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 12px 16px 16px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
body.convert-app-page #rawPanelCard .chapter-title-bar {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
body.convert-app-page #rawPanelCard .raw-field-label,
body.convert-app-page #rawPanelCard .chapter-title-bar label {
  margin: 0 0 6px !important;
  line-height: 1.2 !important;
}
body.convert-app-page #rawPanelCard .raw-title-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 42px !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
}
body.convert-app-page #rawPanelCard #chapterTitleInput {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid var(--er-line-strong) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--er-paper) 96%, #fff) !important;
  color: var(--er-ink) !important;
  box-sizing: border-box !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
body.convert-app-page #rawPanelCard #chapterTitleInput:focus {
  border-color: color-mix(in srgb, var(--er-gold) 55%, var(--er-line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 14%, transparent) !important;
}
body.convert-app-page #rawPanelCard #newChapterBtn {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 12px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
body.convert-app-page #rawPanelCard #saveComposerRawBtn,
body.convert-app-page #rawPanelCard .convert-save-raw-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  border: 1px solid color-mix(in srgb, var(--er-gold) 42%, var(--er-line)) !important;
  background: color-mix(in srgb, var(--er-gold) 14%, var(--er-surface, var(--er-paper))) !important;
  color: var(--er-gold-ink, var(--er-ink)) !important;
  font-size: 12.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
body.convert-app-page #rawPanelCard #saveComposerRawBtn svg,
body.convert-app-page #rawPanelCard .convert-save-raw-btn svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 auto !important;
}
body.convert-app-page #rawPanelCard #saveComposerRawBtn:hover,
body.convert-app-page #rawPanelCard .convert-save-raw-btn:hover {
  background: color-mix(in srgb, var(--er-gold) 22%, var(--er-surface, var(--er-paper))) !important;
  border-color: color-mix(in srgb, var(--er-gold) 58%, var(--er-line)) !important;
}
body.convert-app-page #rawPanelCard #saveComposerRawBtn:disabled,
body.convert-app-page #rawPanelCard .convert-save-raw-btn:disabled {
  opacity: 0.55 !important;
  cursor: wait !important;
}
@media (max-width: 420px) {
  body.convert-app-page #rawPanelCard .raw-title-row {
    grid-template-columns: minmax(0, 1fr) 42px 42px !important;
  }
  body.convert-app-page #rawPanelCard #saveComposerRawBtn span,
  body.convert-app-page #rawPanelCard .convert-save-raw-btn span {
    display: none !important;
  }
  body.convert-app-page #rawPanelCard #saveComposerRawBtn,
  body.convert-app-page #rawPanelCard .convert-save-raw-btn {
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
  }
}
body.convert-app-page #rawPanelCard .card-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.convert-app-page #rawPanelCard .raw-editor-head {
  flex: 0 0 auto !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
body.convert-app-page #rawPanelCard .raw-editor-head .raw-field-label {
  margin: 0 !important;
}
body.convert-app-page #rawPanelCard .convert-storage-info {
  margin: 0 !important;
  white-space: nowrap !important;
}
/* Big compose area: fill remaining modal space, never collapse small */
body.convert-app-page #rawPanelCard #rawInput,
body.convert-app-page .convert-raw-modal-open #rawPanelCard #rawInput {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: min(42vh, 420px) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid var(--er-line-strong) !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  resize: none !important;
  overflow: auto !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
body.convert-app-page #rawPanelCard #rawInput:focus {
  border-color: color-mix(in srgb, var(--er-gold) 55%, var(--er-line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 14%, transparent) !important;
}
@media (max-width: 640px) {
  body.convert-app-page .convert-simple-root.is-raw-modal-open .input-card#rawPanelCard,
  body.convert-raw-modal-open .input-card#rawPanelCard,
  body.convert-app-page.convert-raw-modal-open #rawPanelCard {
    left: 6px !important;
    right: 6px !important;
    top: calc(var(--er-site-header) + 6px) !important;
    bottom: calc(var(--er-dock) + 8px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    border-radius: 14px !important;
  }
  body.convert-app-page #rawPanelCard .raw-modal-form {
    padding: 10px 12px 12px !important;
  }
  body.convert-app-page #rawPanelCard #rawInput,
  body.convert-app-page .convert-raw-modal-open #rawPanelCard #rawInput {
    min-height: min(48vh, 420px) !important;
    font-size: 15px !important;
  }
}
/* Module-load failure: never present half-working modal shells as usable UI. */
.convert-workspace-load-error {
  position: fixed;
  right: 12px;
  bottom: calc(var(--er-dock, 64px) + 12px + env(safe-area-inset-bottom, 0px));
  z-index: 100600;
  width: min(380px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, #dc2626 42%, var(--er-line));
  border-radius: 8px;
  background: var(--er-paper);
  color: var(--er-ink);
  box-shadow: var(--er-shadow-lg);
}
.convert-workspace-load-error strong,
.convert-workspace-load-error span { min-width: 0; }
.convert-workspace-load-error strong { font-size: 13px; }
.convert-workspace-load-error span {
  grid-column: 1;
  font-size: 12px;
  color: var(--er-muted);
}
.convert-workspace-load-error button {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--er-line-strong);
  border-radius: 7px;
  background: var(--er-ink);
  color: var(--er-paper);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

body.convert-app-page #rawPanelCard .convert-import-job-panel {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  padding: 7px 9px;
  border: 1px solid var(--er-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--er-paper-soft) 90%, transparent);
}
body.convert-app-page #rawPanelCard .convert-import-job-panel[hidden] { display: none !important; }
body.convert-app-page #rawPanelCard .convert-import-job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
body.convert-app-page #rawPanelCard .convert-import-job-copy {
  display: block;
  min-width: 0;
  flex: 1;
}
body.convert-app-page #rawPanelCard .convert-import-job-meta {
  color: var(--er-muted);
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.convert-app-page #rawPanelCard .convert-import-job-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
body.convert-app-page #rawPanelCard .convert-import-job-btn {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--er-line-strong);
  border-radius: 8px;
  background: var(--er-paper);
  color: var(--er-ink);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}
body.convert-app-page #rawPanelCard .convert-import-job-btn.is-primary {
  background: #3f8f83;
  border-color: #3f8f83;
  color: #fff;
}
body.convert-app-page #rawPanelCard .convert-import-job-btn.is-stop {
  background: color-mix(in srgb, #c54b4b 12%, var(--er-paper));
  border-color: color-mix(in srgb, #c54b4b 48%, var(--er-line));
  color: color-mix(in srgb, #c54b4b 82%, var(--er-ink));
}
body.convert-app-page #rawPanelCard .convert-import-job-btn.is-stop:hover,
body.convert-app-page #rawPanelCard .convert-import-job-btn.is-stop:focus-visible {
  background: color-mix(in srgb, #c54b4b 19%, var(--er-paper));
  border-color: #c54b4b;
}
body.convert-app-page #rawPanelCard .convert-import-job-btn.is-ghost {
  background: transparent;
}
body.convert-app-page #rawPanelCard .convert-import-job-btn:disabled { opacity: .5; cursor: not-allowed; }
body.convert-app-page #rawPanelCard .convert-import-job-failed {
  display: grid;
  gap: 4px;
  max-height: 112px;
  overflow: auto;
}
body.convert-app-page #rawPanelCard .convert-import-job-failed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px;
  border: 1px solid var(--er-line);
  border-radius: 8px;
  background: var(--er-paper);
}
body.convert-app-page #rawPanelCard .convert-import-job-failed-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}
body.convert-app-page #rawPanelCard .convert-import-job-failed-text strong {
  color: var(--er-ink);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.convert-app-page #rawPanelCard .convert-import-job-failed-text span {
  color: var(--er-muted);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.convert-app-page #rawPanelCard .convert-import-job-retry-one {
  flex-shrink: 0;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--er-line-strong);
  border-radius: 7px;
  background: var(--er-paper-soft);
  color: var(--er-ink);
  font-size: 10.5px;
  font-weight: 750;
  cursor: pointer;
}
@media (max-width: 640px) {
  body.convert-app-page #rawPanelCard .convert-import-job-row {
    align-items: stretch;
    flex-direction: column;
  }
  body.convert-app-page #rawPanelCard .convert-import-job-actions {
    width: 100%;
  }
  body.convert-app-page #rawPanelCard .convert-import-job-btn {
    flex: 1;
  }
}


/* Unified compose/import panel: one shell, one scroll area. */
body.convert-app-page .convert-simple-root.is-raw-modal-open #rawPanelCard,
body.convert-raw-modal-open .input-card#rawPanelCard,
body.convert-app-page.convert-raw-modal-open #rawPanelCard {
  display: flex !important;
  flex-direction: column !important;
  top: calc(var(--er-site-header) + var(--er-app-header) + 12px) !important;
  right: auto !important;
  bottom: calc(var(--er-dock) + 12px + env(safe-area-inset-bottom, 0px)) !important;
  left: 50% !important;
  width: min(780px, calc(100vw - 32px)) !important;
  height: auto !important;
  max-height: none !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
}
body.convert-app-page #rawPanelCard > .card-header {
  min-height: 56px;
  padding: 11px 14px !important;
}
body.convert-app-page #rawPanelCard .convert-compose-tabs {
  flex: 0 0 auto;
  margin: 0 14px 8px;
}
body.convert-app-page #rawPanelCard .convert-import-tab {
  min-height: 38px;
  padding: 0 8px;
}
body.convert-app-page #rawPanelCard .raw-modal-form,
body.convert-app-page #rawPanelCard .convert-compose-body,
body.convert-app-page #rawPanelCard .convert-import-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 14px 14px !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}
body.convert-app-page #rawPanelCard .convert-compose-panel {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
}
body.convert-app-page #rawPanelCard .convert-compose-panel[hidden],
body.convert-app-page #rawPanelCard .convert-import-panel[hidden] {
  display: none !important;
}
body.convert-app-page #rawPanelCard .convert-compose-panel .card-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
body.convert-app-page #rawPanelCard #rawInput {
  flex: 1 1 auto !important;
  min-height: clamp(240px, 42dvh, 460px) !important;
  padding: 13px 14px !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}
body.convert-app-page #rawPanelCard .convert-import-footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding: 10px 14px !important;
  border-top: 1px solid var(--er-line);
  background: color-mix(in srgb, var(--er-paper) 94%, #fff);
}
body.convert-app-page #rawPanelCard .convert-import-footer[hidden] {
  display: none !important;
}
@media (max-width: 640px) {
  body.convert-app-page .convert-simple-root.is-raw-modal-open #rawPanelCard,
  body.convert-raw-modal-open .input-card#rawPanelCard,
  body.convert-app-page.convert-raw-modal-open #rawPanelCard {
    top: max(6px, env(safe-area-inset-top, 0px)) !important;
    right: 6px !important;
    bottom: calc(var(--er-dock) + 6px + env(safe-area-inset-bottom, 0px)) !important;
    left: 6px !important;
    width: auto !important;
    transform: none !important;
    border-radius: 16px !important;
  }
  body.convert-app-page #rawPanelCard > .card-header {
    min-height: 52px;
    padding: 9px 12px !important;
  }
  body.convert-app-page #rawPanelCard .convert-compose-tabs {
    margin: 0 10px 8px;
    gap: 2px;
    padding: 2px;
  }
  body.convert-app-page #rawPanelCard .convert-import-tab {
    min-height: 36px;
    gap: 4px;
    padding: 0 4px;
    font-size: 11px;
  }
  body.convert-app-page #rawPanelCard .convert-import-tab svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
  }
  body.convert-app-page #rawPanelCard .raw-modal-form,
  body.convert-app-page #rawPanelCard .convert-compose-body,
  body.convert-app-page #rawPanelCard .convert-import-body {
    padding: 0 10px max(10px, env(safe-area-inset-bottom, 0px)) !important;
    gap: 9px !important;
  }
  body.convert-app-page #rawPanelCard #rawInput {
    min-height: clamp(220px, 40dvh, 420px) !important;
    padding: 12px !important;
    font-size: 16px !important;
  }
  body.convert-app-page #rawPanelCard .convert-import-footer {
    gap: 6px;
    padding: 9px 10px !important;
  }
  body.convert-app-page #rawPanelCard .convert-import-footer > button {
    flex: 1 1 120px;
  }
}
@media (max-width: 380px) {
  body.convert-app-page #rawPanelCard .convert-import-tab {
    gap: 3px;
    font-size: 10px;
  }
  body.convert-app-page #rawPanelCard .convert-import-tab span {
    white-space: nowrap;
  }
  body.convert-app-page #rawPanelCard .convert-storage-info > span {
    display: none;
  }
}

/* ==========================================================================
   MOBILE & RESPONSIVE UX OPTIMIZATIONS
   ========================================================================== */

@media (max-width: 640px) {
  /* Prevent iOS Safari auto-zoom on input focus */
  body.convert-app-page input[type="text"],
  body.convert-app-page input[type="search"],
  body.convert-app-page input[type="url"],
  body.convert-app-page input[type="number"],
  body.convert-app-page textarea,
  body.convert-app-page select {
    font-size: 16px !important;
  }

  /* Compact Header & Navigation on Mobile */
  body.convert-app-page .convert-page-header {
    padding: 6px 8px !important;
  }
  body.convert-app-page .convert-story-map {
    gap: 6px;
    align-items: center;
  }
  body.convert-app-page #convertStoryMapCurrentTitle {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
  }
  body.convert-app-page .story-map-actions {
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.convert-app-page .story-map-actions::-webkit-scrollbar {
    display: none;
  }
  body.convert-app-page .story-map-toggle,
  body.convert-app-page .story-map-free,
  body.convert-app-page .convert-balance-chip {
    padding: 3px 8px !important;
    font-size: 11px !important;
    height: 28px !important;
    line-height: 22px !important;
  }

  /* Compact Model Toggle & Dock Bar on Mobile (< 640px) */
  body.convert-app-page #toggleRawPanelBtn span,
  body.convert-app-page #autoGlossaryToggle span,
  body.convert-app-page #toggleFreeKeyPanelBtn span,
  body.convert-app-page #runConvertBtn span,
  body.convert-app-page #clearConvertBtn span {
    display: none !important;
  }
  body.convert-app-page #toggleRawPanelBtn,
  body.convert-app-page #autoGlossaryToggle,
  body.convert-app-page #runConvertBtn,
  body.convert-app-page #clearConvertBtn,
  body.convert-app-page #theme-toggle {
    width: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }
  body.convert-app-page .convert-app-dock-inner {
    width: fit-content !important;
    max-width: calc(100vw - 16px) !important;
    margin: 0 auto !important;
  }
  body.convert-app-page .convert-command-bar {
    width: fit-content !important;
    justify-content: center !important;
    padding: 4px 6px !important;
    margin: 0 auto !important;
  }
  body.convert-app-page .convert-command-run {
    flex: 0 0 auto !important;
  }
  body.convert-app-page .model-toggle-btn,
  body.convert-app-page #translateModelToggle {
    min-width: 0 !important;
    max-width: 105px !important;
    padding: 0 6px !important;
    gap: 2px !important;
  }

  /* Reader Toolbar Mobile Polish */
  body.convert-app-page .reader-toolbar {
    padding: 4px 6px !important;
    gap: 4px !important;
    justify-content: space-between;
  }
  body.convert-app-page .reader-toolbar-left,
  body.convert-app-page .reader-toolbar-right {
    gap: 3px !important;
  }
  body.convert-app-page .reader-tool-btn {
    min-width: 32px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
  }
  body.convert-app-page .reader-chapter-chip {
    padding: 2px 6px !important;
    font-size: 11px !important;
    gap: 3px !important;
  }
  body.convert-app-page .reader-stat {
    font-size: 11px !important;
    padding: 2px 5px !important;
  }

  /* Modals Mobile Polish */
  body.convert-app-page .replace-dialog.ai-search-dialog,
  body.convert-app-page .replace-dialog.convert-tools-dialog {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(92dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    margin: auto 8px !important;
    border-radius: 14px !important;
  }
  body.convert-app-page .ai-search-modal-body,
  body.convert-app-page .convert-tools-body {
    padding: 10px 12px !important;
    max-height: calc(85dvh - 56px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.convert-app-page .ai-search-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  body.convert-app-page .ai-search-submit-wrap {
    grid-column: 1 / -1 !important;
  }
  body.convert-app-page .ai-search-submit-btn {
    width: 100% !important;
    justify-content: center !important;
    height: 38px !important;
  }

  /* Prompt Tab Options on Mobile */
  body.convert-app-page .cv-prompt-actions-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  body.convert-app-page .cv-prompt-option-item {
    width: 100% !important;
  }
  body.convert-app-page .cv-prompt-execute-wrap {
    width: 100% !important;
  }
  body.convert-app-page .cv-prompt-btn-primary {
    width: 100% !important;
    justify-content: center !important;
    height: 38px !important;
  }
}

@media (max-width: 640px) {
  body.convert-app-page #convertToolsModal #cvToolsPanelPrompt .cv-prompt-textarea,
  body.convert-app-page #convertToolsModal #cvToolsPanelPrompt #cvPrompt {
    min-height: 100px !important;
    max-height: min(30vh, 220px) !important;
  }
}

@media (max-width: 480px) {
  body.convert-app-page #convertStoryMapCurrentTitle {
    max-width: 105px;
  }
  body.convert-app-page .reader-stat.cv-client-storage {
    display: none !important;
  }
  body.convert-app-page .reader-chapter-chip span {
    display: none !important;
  }
  #ai-origin-search .ai-result-row {
    padding-right: 4px;
  }
}

/* Keep labeled dict button auto-width after mobile tool-btn square rules */
body.convert-app-page #openDictToolsBtn.reader-tool-btn,
body.convert-app-page #openDictToolsBtn.reader-tool-label-btn {
  width: auto !important;
  min-width: 0 !important;
  padding-left: 9px !important;
  padding-right: 11px !important;
}

/* === PROMPT TAB LAYOUT HARDEN (desktop+mobile) ===
   Restored after unclosed @media had swallowed these rules on >640px. */
body.convert-app-page #convertToolsModal .cv-prompt-actions-top,
#convertToolsModal .cv-prompt-actions-top {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 2px 0 4px !important;
}
body.convert-app-page #convertToolsModal .cv-prompt-option-item,
#convertToolsModal .cv-prompt-option-item {
  border: 1px solid var(--er-line) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--er-paper) 96%, #fff) !important;
  padding: 10px 12px !important;
}
body.convert-app-page #convertToolsModal .cv-prompt-option-head,
#convertToolsModal .cv-prompt-option-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
body.convert-app-page #convertToolsModal .cv-proper-name-scan-toggle,
#convertToolsModal .cv-proper-name-scan-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 32px !important;
  margin: 0 !important;
  cursor: pointer !important;
  user-select: none !important;
}
body.convert-app-page #convertToolsModal .cv-proper-name-scan-toggle input[type="checkbox"],
#convertToolsModal .cv-proper-name-scan-toggle input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid color-mix(in srgb, var(--er-gold) 45%, var(--er-line-strong)) !important;
  border-radius: 5px !important;
  background-color: var(--er-input) !important;
  background-image: none !important;
  box-shadow: none !important;
  display: inline-grid !important;
  place-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
body.convert-app-page #convertToolsModal .cv-proper-name-scan-toggle input[type="checkbox"]:checked,
#convertToolsModal .cv-proper-name-scan-toggle input[type="checkbox"]:checked {
  background-color: var(--er-gold, #d97706) !important;
  border-color: color-mix(in srgb, var(--er-gold) 85%, #000) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 11px 11px !important;
}
body.convert-app-page #convertToolsModal #cvProperNameScanLevel,
#convertToolsModal #cvProperNameScanLevel {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: auto !important;
  min-width: 148px !important;
  min-height: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 28px 0 10px !important;
  border: 1px solid color-mix(in srgb, var(--er-gold) 35%, var(--er-line)) !important;
  border-radius: 8px !important;
  background-color: var(--er-input) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23d97706' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 12px 12px !important;
  color: var(--er-on-gold) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 30px !important;
  box-shadow: none !important;
}
body.convert-app-page #convertToolsModal .cv-option-title,
#convertToolsModal .cv-option-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--er-ink) !important;
}
body.convert-app-page #convertToolsModal .cv-option-cost-tag,
#convertToolsModal .cv-option-cost-tag {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--er-gold) 30%, transparent) !important;
  background: color-mix(in srgb, var(--er-gold) 12%, var(--er-paper)) !important;
  color: #7c2d12 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
body.convert-app-page #convertToolsModal .cv-proper-name-scan-note,
#convertToolsModal .cv-proper-name-scan-note {
  margin: 6px 0 0 !important;
  color: var(--er-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}
body.convert-app-page #convertToolsModal .cv-prompt-execute-wrap,
#convertToolsModal .cv-prompt-execute-wrap {
  display: flex !important;
  justify-content: stretch !important;
  margin-top: 2px !important;
}
body.convert-app-page #convertToolsModal #cvOptimizeStoryPromptBtn,
body.convert-app-page #convertToolsModal .cv-prompt-execute-btn,
#convertToolsModal #cvOptimizeStoryPromptBtn {
  width: 100% !important;
  min-height: 42px !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border: 1px solid color-mix(in srgb, var(--er-gold) 42%, var(--er-line)) !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--er-gold) 24%, var(--er-paper)),
    color-mix(in srgb, var(--er-gold) 12%, var(--er-paper))
  ) !important;
  color: color-mix(in srgb, var(--er-gold) 78%, #000) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: 0 1px 0 color-mix(in srgb, #000 6%, transparent) !important;
  cursor: pointer !important;
}
body.convert-app-page #convertToolsModal #cvOptimizeStoryPromptBtn svg,
#convertToolsModal #cvOptimizeStoryPromptBtn svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 auto !important;
}
body.convert-app-page #convertToolsModal .cv-prompt-default-banner,
#convertToolsModal .cv-prompt-default-banner {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 11px 12px !important;
  border-radius: 12px !important;
  border: 1px solid color-mix(in srgb, var(--er-gold) 35%, var(--er-line)) !important;
  background: color-mix(in srgb, var(--er-gold) 10%, var(--er-paper)) !important;
}
body.convert-app-page #convertToolsModal .cv-prompt-body,
#convertToolsModal .cv-prompt-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* ==========================================================================
   THEME COMPAT: MODALS / CARDS / INPUTS
   Force convert chrome to semantic tokens so every reader theme (incl night)
   recolors surfaces consistently. Avoid pure #fff lifts on dark themes via
   --er-mix-light / --er-surface*.
   ========================================================================== */

/* Backdrop */
body.convert-app-page .replace-modal .replace-backdrop,
body.convert-app-page .replace-modal .convert-confirm-backdrop,
body.convert-app-page .convert-confirm-backdrop,
body.convert-app-page #findReplaceModal .replace-backdrop,
body.convert-app-page #convertConfirmModal .replace-backdrop,
body.convert-app-page #convertConfirmModal .convert-confirm-backdrop,
body.convert-app-page #convertToolsModal .replace-backdrop,
body.convert-app-page #aiSearchModal .replace-backdrop,
body.convert-app-page #autoGlossaryInfoModal .replace-backdrop,
#findReplaceModal .replace-backdrop,
#convertToolsModal .replace-backdrop,
#aiSearchModal .replace-backdrop {
  background: var(--er-scrim) !important;
}

/* Dialog shells */
body.convert-app-page .replace-dialog,
body.convert-app-page .convert-tools-dialog,
body.convert-app-page .convert-dict-dialog,
body.convert-app-page .ai-search-dialog,
body.convert-app-page .convert-confirm-dialog,
body.convert-app-page .auto-glossary-info-dialog,
body.convert-app-page #findReplaceModal .replace-dialog,
body.convert-app-page #convertToolsModal .convert-tools-dialog,
body.convert-app-page #aiSearchModal .ai-search-dialog,
#findReplaceModal .replace-dialog,
#convertToolsModal .convert-tools-dialog,
#aiSearchModal .ai-search-dialog,
#aiSearchModal .replace-dialog {
  background: var(--er-surface) !important;
  color: var(--er-ink) !important;
  border-color: var(--er-line-strong) !important;
  box-shadow: var(--er-shadow-lg) !important;
}

/* Headers / footers inside modals */
body.convert-app-page .replace-header,
body.convert-app-page .replace-footer,
body.convert-app-page .convert-confirm-header,
body.convert-app-page .convert-confirm-footer,
body.convert-app-page #convertToolsModal .replace-header,
body.convert-app-page #aiSearchModal .replace-header,
body.convert-app-page #findReplaceModal .replace-header {
  background: var(--er-surface) !important;
  color: var(--er-ink) !important;
  border-color: var(--er-line) !important;
}
body.convert-app-page .replace-header h3,
body.convert-app-page .replace-title-wrap h3,
body.convert-app-page .replace-title-wrap strong,
body.convert-app-page #convertToolsTitle,
body.convert-app-page #aiSearchModalTitle {
  color: var(--er-ink) !important;
}
body.convert-app-page .replace-header p,
body.convert-app-page .replace-title-wrap p,
body.convert-app-page .replace-sub {
  color: var(--er-muted) !important;
}
body.convert-app-page .replace-close,
body.convert-app-page .replace-cancel,
body.convert-app-page .convert-confirm-cancel,
body.convert-app-page #closeToolsPanelBtn,
body.convert-app-page #aiSearchModal .replace-close {
  background: var(--er-surface-2) !important;
  color: var(--er-ink) !important;
  border: 1px solid var(--er-line) !important;
}
body.convert-app-page .replace-close:hover,
body.convert-app-page .replace-cancel:hover {
  background: var(--er-surface-3) !important;
}

/* Nested cards */
body.convert-app-page .cv-dict-card,
body.convert-app-page .cv-find-card,
body.convert-app-page .cv-file-tools,
body.convert-app-page .cv-prompt-card,
body.convert-app-page .cv-prompt-details,
body.convert-app-page .cv-prompt-option-item,
body.convert-app-page #convertToolsModal .cv-dict-card,
body.convert-app-page #convertToolsModal .cv-find-card,
body.convert-app-page #convertToolsModal .cv-file-tools,
body.convert-app-page #convertToolsModal .cv-prompt-card,
body.convert-app-page #convertToolsModal .cv-prompt-option-item,
body.convert-app-page .tts-settings-panel,
body.convert-app-page .chapter-toc-panel,
body.convert-app-page .chapter-shelf,
body.convert-app-page .story-map-menu,
body.convert-app-page .reader-theme-panel {
  background: var(--er-surface-2) !important;
  color: var(--er-ink) !important;
  border-color: var(--er-line) !important;
}

/* Tabs */
body.convert-app-page #convertToolsModal .cv-tools-tabs,
body.convert-app-page .cv-tools-tabs {
  background: var(--er-surface-3) !important;
  border-color: var(--er-line) !important;
}
body.convert-app-page #convertToolsModal .cv-tools-tab {
  color: var(--er-muted) !important;
  background: transparent !important;
}
body.convert-app-page #convertToolsModal .cv-tools-tab.is-active {
  color: var(--er-ink) !important;
  background: var(--er-surface) !important;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--er-ink) 12%, transparent) !important;
}

/* Inputs / textareas / selects in convert UI */
body.convert-app-page #rawInput,
body.convert-app-page #cvPrompt,
body.convert-app-page .cv-dict-textarea,
body.convert-app-page .cv-prompt-textarea,
body.convert-app-page .cv-search-box,
body.convert-app-page .cv-search-box input,
body.convert-app-page #cvDictSearch,
body.convert-app-page #cvLearnSource,
body.convert-app-page #cvLearnTarget,
body.convert-app-page #findReplaceFind,
body.convert-app-page #findReplaceReplace,
body.convert-app-page #chapterTitleInput,
body.convert-app-page #chapterSearchInput,
body.convert-app-page #convertStoryMapSearch,
body.convert-app-page select.cv-prompt-select,
body.convert-app-page #cvProperNameScanLevel,
body.convert-app-page #ttsVoiceSelect,
body.convert-app-page #ttsFontFamily,
body.convert-app-page .tts-settings-panel input,
body.convert-app-page .tts-settings-panel select,
body.convert-app-page .replace-dialog input[type="text"],
body.convert-app-page .replace-dialog input[type="search"],
body.convert-app-page .replace-dialog textarea,
body.convert-app-page .replace-dialog select,
body.convert-app-page .convert-tools-dialog input[type="text"],
body.convert-app-page .convert-tools-dialog input[type="search"],
body.convert-app-page .convert-tools-dialog textarea,
body.convert-app-page .convert-tools-dialog select,
body.convert-app-page .ai-search-dialog input,
body.convert-app-page .ai-search-dialog textarea,
body.convert-app-page .ai-search-dialog select {
  background: var(--er-input) !important;
  color: var(--er-ink) !important;
  border-color: var(--er-line-strong) !important;
  caret-color: var(--er-ink);
}
body.convert-app-page .cv-search-box,
body.convert-app-page .cv-learn-row,
body.convert-app-page #rawPanelCard .convert-compose-tabs,
body.convert-app-page #rawPanelCard .convert-import-tabs {
  background: var(--er-surface-2) !important;
  border-color: var(--er-line) !important;
  color: var(--er-muted) !important;
}
body.convert-app-page .cv-search-box input,
body.convert-app-page .cv-learn-row input {
  background: transparent !important;
  color: var(--er-ink) !important;
}
body.convert-app-page .cv-search-box input::placeholder,
body.convert-app-page .cv-dict-textarea::placeholder,
body.convert-app-page .cv-prompt-textarea::placeholder,
body.convert-app-page #rawInput::placeholder,
body.convert-app-page input::placeholder,
body.convert-app-page textarea::placeholder {
  color: var(--er-muted) !important;
  opacity: 0.85;
}

/* Buttons in tools/modals */
body.convert-app-page .cv-adv-btn,
body.convert-app-page .cv-learn-btn,
body.convert-app-page .cv-find-apply,
body.convert-app-page .replace-dialog .btn,
body.convert-app-page .convert-tools-dialog button.cv-adv-btn {
  background: var(--er-surface) !important;
  color: var(--er-ink) !important;
  border: 1px solid var(--er-line-strong) !important;
}
body.convert-app-page .cv-adv-btn:hover,
body.convert-app-page .cv-learn-btn:hover {
  background: var(--er-surface-3) !important;
  border-color: color-mix(in srgb, var(--er-gold) 30%, var(--er-line)) !important;
}

/* Pills / badges */
body.convert-app-page .cv-count-pill,
body.convert-app-page #cvDictCountBadge,
#cvDictCountBadge,
.cv-count-pill {
  background: var(--er-gold-soft) !important;
  color: var(--er-on-gold) !important;
  border: 1px solid color-mix(in srgb, var(--er-gold) 40%, var(--er-line)) !important;
}
body.convert-app-page .cv-safe-pill,
body.convert-app-page .cv-save-state,
body.convert-app-page .cv-option-cost-tag,
body.convert-app-page .cv-prompt-mode-pill,
body.convert-app-page #cvPromptSaveState {
  background: var(--er-gold-soft) !important;
  color: var(--er-on-gold) !important;
  border-color: color-mix(in srgb, var(--er-gold) 34%, var(--er-line)) !important;
}

/* Default banner + execute CTA */
body.convert-app-page #convertToolsModal .cv-prompt-default-banner,
body.convert-app-page .cv-prompt-default-banner {
  background: var(--er-gold-soft) !important;
  border-color: color-mix(in srgb, var(--er-gold) 36%, var(--er-line)) !important;
  color: var(--er-ink) !important;
}
body.convert-app-page #convertToolsModal .cv-prompt-default-copy strong {
  color: var(--er-ink) !important;
}
body.convert-app-page #convertToolsModal .cv-prompt-default-copy p,
body.convert-app-page #convertToolsModal .cv-proper-name-scan-note {
  color: var(--er-muted) !important;
}
body.convert-app-page #convertToolsModal .cv-prompt-default-icon {
  background: color-mix(in srgb, var(--er-gold) 18%, var(--er-surface)) !important;
  color: var(--er-on-gold) !important;
  border-color: color-mix(in srgb, var(--er-gold) 34%, transparent) !important;
}
body.convert-app-page #convertToolsModal #cvOptimizeStoryPromptBtn,
body.convert-app-page #convertToolsModal .cv-prompt-execute-btn {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--er-gold) 28%, var(--er-surface)),
    color-mix(in srgb, var(--er-gold) 14%, var(--er-surface))
  ) !important;
  color: var(--er-on-gold) !important;
  border-color: color-mix(in srgb, var(--er-gold) 42%, var(--er-line)) !important;
}

/* Raw compose modal */
body.convert-app-page .convert-simple-root.is-raw-modal-open .input-card,
body.convert-raw-modal-open .input-card#rawPanelCard,
body.convert-app-page.convert-raw-modal-open #rawPanelCard {
  background: var(--er-surface) !important;
  color: var(--er-ink) !important;
  border-color: var(--er-line-strong) !important;
}
body.convert-app-page #rawPanelCard .card-header,
body.convert-app-page #rawPanelCard .convert-import-footer,
body.convert-app-page #rawPanelCard .raw-modal-form {
  background: transparent !important;
  color: var(--er-ink) !important;
  border-color: var(--er-line) !important;
}
body.convert-app-page #rawPanelCard .convert-import-tab.is-active,
body.convert-app-page #rawPanelCard .convert-import-tab:hover {
  background: var(--er-surface) !important;
  color: var(--er-ink) !important;
}

/* Status chips */
body.convert-app-page #convertStatusDock.convert-status-chip,
body.convert-app-page #convertStatusDock.convert-status-toast {
  background: var(--er-surface) !important;
  color: var(--er-ink) !important;
  border: 1px solid var(--er-line-strong) !important;
  box-shadow: var(--er-shadow) !important;
}
body.convert-app-page #convertStatusDock.is-ok,
body.convert-app-page #convertStatusDock[data-tone="ok"],
body.convert-app-page #convertStatusDock[data-kind="ok"],
#convertStatusDock.is-ok,
#convertStatusDock[data-tone="ok"],
#convertStatusDock[data-kind="ok"] {
  background: var(--er-ok-soft) !important;
  color: var(--er-ok) !important;
  border-color: color-mix(in srgb, var(--er-ok) 30%, var(--er-line)) !important;
}
body.convert-app-page #convertStatusDock.is-err,
body.convert-app-page #convertStatusDock[data-tone="err"],
body.convert-app-page #convertStatusDock[data-kind="err"],
#convertStatusDock.is-err,
#convertStatusDock[data-tone="err"],
#convertStatusDock[data-kind="err"] {
  background: var(--er-err-soft) !important;
  color: var(--er-err) !important;
  border-color: color-mix(in srgb, var(--er-err) 30%, var(--er-line)) !important;
}
body.convert-app-page #convertStatusDock.is-busy,
body.convert-app-page #convertStatusDock[data-tone="busy"],
body.convert-app-page #convertStatusDock[data-kind="busy"],
#convertStatusDock.is-busy,
#convertStatusDock[data-tone="busy"],
#convertStatusDock[data-kind="busy"] {
  background: var(--er-gold-soft) !important;
  color: var(--er-gold-ink) !important;
  border-color: color-mix(in srgb, var(--er-gold) 32%, var(--er-line)) !important;
}

/* Friendly list rows */
body.convert-app-page #cvDictFriendlyList .cv-friendly-item,
body.convert-app-page .cv-friendly-item,
body.convert-app-page .saved-chapter-item:not(.chapter-list-row),
body.convert-app-page .story-map-item {
  background: var(--er-surface) !important;
  color: var(--er-ink) !important;
  border-color: var(--er-line) !important;
}
body.convert-app-page #cvDictFriendlyList .cv-friendly-item:hover,
body.convert-app-page .saved-chapter-item:not(.chapter-list-row):hover,
body.convert-app-page .story-map-item:hover {
  background: var(--er-surface-3) !important;
}
body.convert-app-page .saved-chapter-item.chapter-list-row,
body.convert-app-page .saved-chapter-item.chapter-list-row:hover {
  background: transparent !important;
}

/* TTS settings popover */
body.convert-app-page #ttsSettingsPanel.tts-settings-panel,
body.convert-app-page .tts-settings-panel {
  background: var(--er-surface) !important;
  color: var(--er-ink) !important;
  border: 1px solid var(--er-line-strong) !important;
  box-shadow: var(--er-shadow-lg) !important;
}
body.convert-app-page .tts-settings-panel label,
body.convert-app-page .tts-setting-field,
body.convert-app-page .tts-settings-head strong {
  color: var(--er-ink) !important;
}
body.convert-app-page .tts-select-value,
body.convert-app-page .tts-setting-field span {
  color: var(--er-muted) !important;
}

/* Night-only: kill residual light gradients/inset highlights that look washed out */
html[data-reader-theme="night"] body.convert-app-page .reader-end-nav-btn,
html[data-reader-theme="night"] body.convert-app-page .reader-tool-btn,
html[data-reader-theme="night"] body.convert-app-page .story-map-toggle,
html[data-reader-theme="night"] body.convert-app-page .story-map-free,
html[data-reader-theme="night"] body.convert-app-page .convert-command-bar {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
html[data-reader-theme="night"] body.convert-app-page .cv-prompt-execute-btn:hover,
html[data-reader-theme="night"] body.convert-app-page #cvOptimizeStoryPromptBtn:hover {
  color: #111 !important;
  background: var(--er-gold) !important;
}
html[data-reader-theme="night"] body.convert-app-page .replace-icon,
html[data-reader-theme="night"] body.convert-app-page .cv-prompt-default-icon {
  color: var(--er-gold-ink) !important;
}

/* === MOBILE DENSITY PASS: compact chrome, more reading room ===
   Final overrides. Prefer denser sticky chrome + tighter dock/end-nav
   so the reading surface feels less crowded on phones. */
@media (max-width: 900px) {
  body.convert-app-page {
    --er-site-header: 52px;
    --er-app-header: 40px;
    --er-toolbar: 34px;
    --er-dock: 52px;
    --er-gutter: 10px;
    --er-read-inset: 10px;
  }

  body.convert-app-page .convert-main-grid {
    padding-bottom: calc(var(--er-dock) + 6px) !important;
  }
  body.convert-app-page .convert-card.output-card {
    min-height: calc(100svh - var(--er-dock) - 8px) !important;
  }

  /* In-flow chrome: no blur, no unused hide-transform. */
  body.convert-app-page > header.vz-site-header,
  body.convert-app-page .convert-page-header,
  body.convert-app-page .convert-page-header-compact,
  body.convert-app-page .reader-toolbar,
  body.convert-app-page #chapterTabBar.reader-toolbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
  }
  body.convert-app-page .convert-page-header,
  body.convert-app-page .convert-page-header-compact {
    min-height: var(--er-app-header) !important;
    padding: 2px var(--er-gutter) !important;
  }
  body.convert-app-page .story-map-current {
    max-width: min(46vw, 190px) !important;
    min-height: 30px !important;
    padding: 1px 8px 1px 3px !important;
    gap: 6px !important;
  }
  body.convert-app-page .story-map-icon {
    width: 22px !important;
    height: 22px !important;
  }
  body.convert-app-page .story-map-details strong {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  body.convert-app-page .story-map-free,
  body.convert-app-page .story-map-toggle,
  body.convert-app-page .convert-balance-chip {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  /* Reader toolbar */
  body.convert-app-page .reader-toolbar,
  body.convert-app-page #chapterTabBar.reader-toolbar {
    min-height: var(--er-toolbar) !important;
    padding: 2px var(--er-gutter) !important;
    gap: 3px !important;
  }
  body.convert-app-page .reader-toolbar-left,
  body.convert-app-page .reader-toolbar-right {
    gap: 2px !important;
  }
  body.convert-app-page .reader-tool-btn,
  body.convert-app-page .reader-chapter-chip {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }
  body.convert-app-page .reader-tool-btn svg {
    width: 15px !important;
    height: 15px !important;
  }
  body.convert-app-page .reader-chapter-chip {
    width: auto !important;
    min-width: 52px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    gap: 2px !important;
  }
  body.convert-app-page #openDictToolsBtn.reader-tool-btn,
  body.convert-app-page #openDictToolsBtn.reader-tool-label-btn {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  body.convert-app-page #openDictToolsBtn .reader-tool-label {
    display: none !important;
  }
  body.convert-app-page #openDictToolsBtn svg {
    width: 14px !important;
    height: 14px !important;
  }
  body.convert-app-page #readButton svg,
  body.convert-app-page #readButton #iconPlay,
  body.convert-app-page #readButton #iconPause {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }

  /* Reading surface — reclaim vertical space */
  body.convert-app-page .reader-chapter-head {
    margin: 6px auto 0 !important;
  }
  body.convert-app-page .reader-chapter-head h2 {
    font-size: 1.12rem !important;
    line-height: 1.28 !important;
  }
  body.convert-app-page .reader-content,
  body.convert-app-page #convertReaderContent.reader-content {
    padding: 8px 0 20px !important;
    /* Keep body readable; density only trims chrome, not reading text */
    font-size: var(--vz-read-font-size, 1.1rem) !important;
    line-height: var(--vz-read-line-height, 1.8) !important;
    letter-spacing: 0 !important;
    font-weight: 450 !important;
    min-height: 0 !important;
  }
  body.convert-app-page .reader-content p {
    margin: 0 0 1.02em !important;
    text-indent: 0 !important;
    text-align: left !important;
  }

  /* End-of-chapter nav — compact pills */
  body.convert-app-page .reader-chapter-end-nav,
  body.convert-app-page #readerChapterEndNav.reader-chapter-end-nav {
    margin-top: 4px !important;
    padding: 4px 0 calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px !important;
  }
  body.convert-app-page .reader-end-nav-rule {
    gap: 8px !important;
    opacity: 0.55 !important;
  }
  body.convert-app-page .reader-end-nav-rule-mark {
    font-size: 8px !important;
  }
  body.convert-app-page .reader-end-nav-row {
    gap: 6px !important;
  }
  body.convert-app-page .reader-end-nav-btn {
    --end-nav-pad-x: 10px;
    min-height: 38px !important;
    max-width: calc(50% - 3px) !important;
    gap: 6px !important;
    padding: 6px var(--end-nav-pad-x) !important;
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset !important;
  }
  body.convert-app-page .reader-end-nav-icon {
    width: 22px !important;
    height: 22px !important;
  }
  body.convert-app-page .reader-end-nav-icon svg {
    width: 13px !important;
    height: 13px !important;
  }
  body.convert-app-page .reader-end-nav-copy {
    gap: 0 !important;
  }
  body.convert-app-page .reader-end-nav-copy small {
    font-size: 9.5px !important;
    letter-spacing: 0.03em !important;
  }
  body.convert-app-page .reader-end-nav-copy strong {
    font-size: 12px !important;
    max-width: min(28vw, 120px) !important;
  }

  /* Bottom dock */
  body.convert-app-page .convert-app-dock,
  body.convert-app-page #convertAppDock {
    padding: 0 4px calc(3px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.convert-app-page .convert-command-bar {
    min-height: 0 !important;
    gap: 3px !important;
    padding: 3px !important;
    border-radius: 12px !important;
  }
  body.convert-app-page .convert-command-bar .btn,
  body.convert-app-page .convert-command-bar button,
  body.convert-app-page .convert-command-bar .model-toggle-btn,
  body.convert-app-page #toggleRawPanelBtn,
  body.convert-app-page #autoGlossaryToggle,
  body.convert-app-page #runConvertBtn,
  body.convert-app-page #clearConvertBtn,
  body.convert-app-page #theme-toggle,
  body.convert-app-page #theme-toggle.convert-theme-toggle {
    min-height: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    width: 34px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
  }
  body.convert-app-page #translateModelToggle,
  body.convert-app-page .model-toggle-btn#translateModelToggle {
    width: auto !important;
    min-width: 0 !important;
    max-width: 34vw !important;
    flex: 1 1 auto !important;
    padding: 0 7px !important;
  }
  body.convert-app-page #runTranslateBtn {
    width: auto !important;
    min-width: 58px !important;
    padding: 0 9px !important;
  }
  body.convert-app-page #theme-toggle::before {
    width: 13px !important;
    height: 13px !important;
  }

  /* Empty state tighter */
  body.convert-app-page .convert-empty-state,
  body.convert-app-page #convertEmptyState {
    min-height: 0 !important;
    gap: 4px !important;
    padding: 14px 8px 10px !important;
  }
  body.convert-app-page .convert-empty-icon {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    border: 0 !important;
  }
  body.convert-app-page .convert-empty-state strong {
    font-size: 0.98rem !important;
  }
  body.convert-app-page .convert-empty-state p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  body.convert-app-page .convert-empty-cta {
    min-height: 44px !important;
    padding: 7px 6px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 640px) {
  body.convert-app-page {
    --er-site-header: 50px;
    --er-app-header: 38px;
    --er-toolbar: 32px;
    --er-dock: 48px;
    --er-gutter: 8px;
    --er-read-inset: 10px;
  }

  body.convert-app-page .convert-main-grid {
    padding-bottom: calc(var(--er-dock) + 4px) !important;
  }

  body.convert-app-page .convert-page-header,
  body.convert-app-page .convert-page-header-compact {
    padding: 1px var(--er-gutter) !important;
  }
  body.convert-app-page .story-map-current {
    max-width: min(44vw, 160px) !important;
    min-height: 28px !important;
  }
  body.convert-app-page #convertStoryMapCurrentTitle {
    max-width: 118px !important;
  }
  body.convert-app-page .story-map-free,
  body.convert-app-page .story-map-toggle,
  body.convert-app-page .convert-balance-chip {
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 6px !important;
    font-size: 10.5px !important;
  }

  body.convert-app-page .reader-toolbar,
  body.convert-app-page #chapterTabBar.reader-toolbar {
    padding: 1px 6px !important;
    gap: 2px !important;
  }
  body.convert-app-page .reader-tool-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }
  body.convert-app-page .reader-chapter-chip {
    min-width: 46px !important;
    height: 28px !important;
    padding: 0 5px !important;
    font-size: 10.5px !important;
  }
  body.convert-app-page #openDictToolsBtn.reader-tool-btn,
  body.convert-app-page #openDictToolsBtn.reader-tool-label-btn {
    height: 28px !important;
    padding: 0 7px 0 6px !important;
    gap: 3px !important;
  }
  body.convert-app-page #openDictToolsBtn .reader-tool-label {
    font-size: 10.5px !important;
  }

  body.convert-app-page .reader-content,
  body.convert-app-page #convertReaderContent.reader-content {
    padding: 8px 0 16px !important;
    font-size: var(--vz-read-font-size, 1.1rem) !important;
    line-height: var(--vz-read-line-height, 1.8) !important;
    letter-spacing: 0 !important;
    font-weight: 450 !important;
  }
  body.convert-app-page .reader-chapter-head h2 {
    font-size: 1.2rem !important;
  }

  body.convert-app-page .reader-chapter-end-nav,
  body.convert-app-page #readerChapterEndNav.reader-chapter-end-nav {
    padding: 2px 0 calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 6px !important;
  }
  body.convert-app-page .reader-end-nav-btn {
    min-height: 36px !important;
    padding: 5px 8px !important;
  }
  body.convert-app-page .reader-end-nav-copy strong {
    font-size: 11.5px !important;
    max-width: min(26vw, 104px) !important;
  }

  body.convert-app-page .convert-app-dock,
  body.convert-app-page #convertAppDock {
    padding: 0 3px calc(2px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.convert-app-page .convert-app-dock-inner,
  body.convert-app-page .convert-command-bar {
    max-width: calc(100vw - 10px) !important;
  }
  body.convert-app-page .convert-command-bar {
    gap: 2px !important;
    padding: 2px !important;
    border-radius: 11px !important;
  }
  body.convert-app-page .convert-command-bar .btn,
  body.convert-app-page .convert-command-bar button,
  body.convert-app-page .convert-command-bar .model-toggle-btn,
  body.convert-app-page #toggleRawPanelBtn,
  body.convert-app-page #autoGlossaryToggle,
  body.convert-app-page #runConvertBtn,
  body.convert-app-page #clearConvertBtn,
  body.convert-app-page #theme-toggle,
  body.convert-app-page #theme-toggle.convert-theme-toggle {
    min-height: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    width: 32px !important;
    border-radius: 9px !important;
  }
  body.convert-app-page #translateModelToggle,
  body.convert-app-page .model-toggle-btn#translateModelToggle {
    width: auto !important;
    max-width: 96px !important;
    padding: 0 5px !important;
    gap: 2px !important;
    font-size: 11px !important;
  }
  body.convert-app-page #runTranslateBtn {
    width: auto !important;
    min-width: 52px !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
  }
  body.convert-app-page #theme-toggle::before {
    width: 12px !important;
    height: 12px !important;
  }

  /* Hide secondary chrome that crowds the bar */
  body.convert-app-page .reader-stat,
  body.convert-app-page .reader-progress-track,
  body.convert-app-page .reader-progress-text {
    display: none !important;
  }
}

@media (max-width: 420px) {
  body.convert-app-page {
    --er-gutter: 6px;
    --er-dock: 46px;
    --er-app-header: 36px;
    --er-toolbar: 30px;
    --er-read-inset: 10px;
  }

  body.convert-app-page #convertStoryMapCurrentTitle {
    max-width: 92px !important;
  }
  body.convert-app-page .story-map-details small {
    display: none !important;
  }
  body.convert-app-page .story-map-toggle span,
  body.convert-app-page #convertStoryMapToggleText {
    display: inline !important;
  }

  /* Chapter chip: numbers only */
  body.convert-app-page .reader-chapter-chip span,
  body.convert-app-page .reader-chapter-chip em {
    display: none !important;
  }
  body.convert-app-page .reader-chapter-chip {
    min-width: 0 !important;
    gap: 1px !important;
    padding: 0 5px !important;
  }
  body.convert-app-page .reader-chapter-chip strong::after {
    content: "/";
    margin: 0 1px;
    font-weight: 650;
    opacity: 0.55;
  }

  /* Keep dict label readable but short */
  body.convert-app-page #openDictToolsBtn .reader-tool-label {
    font-size: 10px !important;
  }

  /* End-nav: drop decorative rule on very small screens */
  body.convert-app-page .reader-end-nav-rule {
    display: none !important;
  }
  body.convert-app-page .reader-end-nav-btn {
    min-height: 34px !important;
    gap: 4px !important;
    padding: 4px 7px !important;
  }
  body.convert-app-page .reader-end-nav-icon {
    width: 20px !important;
    height: 20px !important;
  }
  body.convert-app-page .reader-end-nav-copy small {
    font-size: 9px !important;
  }
  body.convert-app-page .reader-end-nav-copy strong {
    font-size: 11px !important;
    max-width: min(24vw, 88px) !important;
  }

  body.convert-app-page .reader-content,
  body.convert-app-page #convertReaderContent.reader-content {
    padding: 8px 0 16px !important;
    font-size: var(--vz-read-font-size, 1.1rem) !important;
    line-height: var(--vz-read-line-height, 1.8) !important;
    letter-spacing: 0 !important;
    font-weight: 450 !important;
  }

  body.convert-app-page #translateModelToggle,
  body.convert-app-page .model-toggle-btn#translateModelToggle {
    max-width: 78px !important;
  }
  body.convert-app-page #runTranslateBtn {
    min-width: 48px !important;
    padding: 0 6px !important;
  }
  body.convert-app-page .convert-command-bar .btn,
  body.convert-app-page .convert-command-bar button,
  body.convert-app-page .convert-command-bar .model-toggle-btn,
  body.convert-app-page #toggleRawPanelBtn,
  body.convert-app-page #autoGlossaryToggle,
  body.convert-app-page #runConvertBtn,
  body.convert-app-page #clearConvertBtn,
  body.convert-app-page #theme-toggle,
  body.convert-app-page #theme-toggle.convert-theme-toggle {
    min-height: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    width: 30px !important;
  }
  body.convert-app-page #translateModelToggle,
  body.convert-app-page #runTranslateBtn {
    height: 30px !important;
    min-height: 30px !important;
    width: auto !important;
  }
}

@media (max-width: 360px) {
  body.convert-app-page {
    --er-gutter: 5px;
    --er-dock: 44px;
    --er-read-inset: 8px;
  }
  /* Ultra-narrow: icon-only dict to free toolbar width */
  body.convert-app-page #openDictToolsBtn .reader-tool-label {
    display: none !important;
  }
  body.convert-app-page #openDictToolsBtn.reader-tool-btn,
  body.convert-app-page #openDictToolsBtn.reader-tool-label-btn {
    width: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
  }
  body.convert-app-page .story-map-current {
    max-width: min(40vw, 130px) !important;
  }
  body.convert-app-page #runTranslateBtn {
    min-width: 44px !important;
  }
}

/* === DICT MODAL ALIGN FIX ===
   Center shell, stop clipped footer actions, denser/aligned inner form.
   Overrides earlier margin/max-height fights that made the dialog look skewed. */
body.convert-app-page #convertToolsModal:not([hidden]),
#convertToolsModal.replace-modal:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--er-z-modal) !important;
  display: grid !important;
  place-items: center !important;
  justify-items: center !important;
  align-items: center !important;
  padding:
    max(10px, env(safe-area-inset-top, 0px))
    12px
    max(10px, env(safe-area-inset-bottom, 0px)) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: transparent !important;
  isolation: isolate !important;
}

body.convert-app-page #convertToolsModal > .replace-backdrop,
#convertToolsModal > .replace-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  margin: 0 !important;
}

body.convert-app-page #convertToolsModal > .convert-tools-dialog,
body.convert-app-page #convertToolsModal > .convert-dict-dialog,
body.convert-app-page #convertToolsModal > .replace-dialog,
#convertToolsModal > .convert-tools-dialog,
#convertToolsModal > .replace-dialog {
  position: relative !important;
  z-index: 2 !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: min(560px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(88dvh, 820px) !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}

/* Header: title + close on one clean row */
body.convert-app-page #convertToolsModal .replace-header,
#convertToolsModal .replace-header {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  margin: 0 !important;
}
body.convert-app-page #convertToolsModal .replace-title-wrap,
#convertToolsModal .replace-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
body.convert-app-page #convertToolsModal .replace-title-wrap > div {
  min-width: 0 !important;
}
body.convert-app-page #convertToolsModal .replace-title-wrap h3,
#convertToolsModal .replace-title-wrap h3,
#convertToolsModal #convertToolsTitle {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}
body.convert-app-page #convertToolsModal .replace-title-wrap p,
#convertToolsModal .replace-title-wrap p {
  margin: 2px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
body.convert-app-page #convertToolsModal .replace-icon,
#convertToolsModal .replace-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
}
body.convert-app-page #convertToolsModal .replace-close,
#convertToolsModal .replace-close,
#convertToolsModal #closeToolsPanelBtn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  align-self: center !important;
}

/* Body: single scroll, enough bottom room so last buttons never clip */
body.convert-app-page #convertToolsModal .replace-body,
body.convert-app-page #convertToolsModal .convert-tools-body,
#convertToolsModal .replace-body,
#convertToolsModal .convert-tools-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 12px 14px 18px !important;
  margin: 0 !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

/* Tabs */
body.convert-app-page #convertToolsModal .cv-tools-tabs,
#convertToolsModal .cv-tools-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin: 0 0 12px !important;
  padding: 3px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}
body.convert-app-page #convertToolsModal .cv-tools-tab,
#convertToolsModal .cv-tools-tab {
  min-height: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  padding: 0 8px !important;
}

/* Dict cards */
body.convert-app-page #convertToolsModal .cv-dict-panel,
#convertToolsModal .cv-dict-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0 !important;
}
body.convert-app-page #convertToolsModal .cv-dict-card,
body.convert-app-page #convertToolsModal .cv-find-card,
#convertToolsModal .cv-dict-card,
#convertToolsModal .cv-find-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

body.convert-app-page #convertToolsModal .cv-dict-meta-row,
#convertToolsModal .cv-dict-meta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 0 8px !important;
  min-width: 0 !important;
}
body.convert-app-page #convertToolsModal .cv-dict-meta-left,
#convertToolsModal .cv-dict-meta-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

/* Search shell full width, clean */
body.convert-app-page #convertToolsModal .cv-search-box,
#convertToolsModal .cv-search-box {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-height: 36px !important;
  height: 36px !important;
  margin: 0 !important;
}

/* Learn row:
   desktop: source | = | target | Thêm
   mobile: stack fields; Thêm is a normal compact full-width action, not a fat hero bar */
body.convert-app-page #convertToolsModal .cv-learn-row,
#convertToolsModal .cv-learn-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 10px 0 0 !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid var(--er-line) !important;
  box-sizing: border-box !important;
}
body.convert-app-page #convertToolsModal .cv-learn-row input,
#convertToolsModal .cv-learn-row input {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
body.convert-app-page #convertToolsModal #cvLearnBtn.cv-learn-btn,
body.convert-app-page #convertToolsModal button.cv-learn-btn,
#convertToolsModal #cvLearnBtn {
  width: auto !important;
  min-width: 68px !important;
  max-width: none !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
  background: color-mix(in srgb, var(--er-gold) 88%, var(--er-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--er-gold) 48%, var(--er-line)) !important;
  color: var(--er-on-gold) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  box-shadow: none !important;
}
body.convert-app-page #convertToolsModal #cvLearnBtn.cv-learn-btn:hover,
#convertToolsModal #cvLearnBtn:hover {
  background: var(--er-gold) !important;
  color: #111 !important;
}

body.convert-app-page #convertToolsModal .cv-adv-actions,
#convertToolsModal .cv-adv-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body.convert-app-page #convertToolsModal .cv-adv-actions .cv-adv-btn:not(.cv-learn-btn):not(.cv-find-apply),
#convertToolsModal .cv-adv-actions .cv-adv-btn:not(.cv-learn-btn):not(.cv-find-apply) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  justify-content: center !important;
}

/* Find block: labels + fields + full visible CTA */
body.convert-app-page #convertToolsModal .cv-find-head,
#convertToolsModal .cv-find-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 0 8px !important;
  min-width: 0 !important;
}
body.convert-app-page #convertToolsModal .cv-find-head small {
  text-align: right !important;
  min-width: 0 !important;
}
body.convert-app-page #convertToolsModal .cv-find-body,
#convertToolsModal .cv-find-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
body.convert-app-page #convertToolsModal .cv-field-label,
#convertToolsModal .cv-field-label {
  display: block !important;
  margin: 2px 0 0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--er-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
body.convert-app-page #convertToolsModal .cv-find-body input,
body.convert-app-page #convertToolsModal #findReplaceFind,
body.convert-app-page #convertToolsModal #findReplaceReplace,
#convertToolsModal #findReplaceFind,
#convertToolsModal #findReplaceReplace {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  border-radius: 9px !important;
}
body.convert-app-page #convertToolsModal .cv-find-preview,
#convertToolsModal .cv-find-preview {
  min-height: 18px !important;
  margin: 2px 0 0 !important;
}
body.convert-app-page #convertToolsModal .cv-find-actions,
#convertToolsModal .cv-find-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
body.convert-app-page #convertToolsModal #applyFindReplaceBtn.cv-find-apply,
body.convert-app-page #convertToolsModal .cv-find-apply,
#convertToolsModal #applyFindReplaceBtn {
  position: static !important;
  float: none !important;
  width: auto !important;
  min-width: 118px !important;
  max-width: 100% !important;
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: visible !important;
  background: color-mix(in srgb, var(--er-gold) 16%, var(--er-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--er-gold) 42%, var(--er-line)) !important;
  color: var(--er-on-gold) !important;
  font-weight: 900 !important;
}

@media (max-width: 640px) {
  body.convert-app-page #convertToolsModal:not([hidden]),
  #convertToolsModal.replace-modal:not([hidden]) {
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      8px
      max(8px, env(safe-area-inset-bottom, 0px)) !important;
  }
  body.convert-app-page #convertToolsModal > .convert-tools-dialog,
  body.convert-app-page #convertToolsModal > .convert-dict-dialog,
  body.convert-app-page #convertToolsModal > .replace-dialog,
  #convertToolsModal > .convert-tools-dialog,
  #convertToolsModal > .replace-dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: min(92dvh, calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))) !important;
    border-radius: 14px !important;
    margin: 0 !important;
  }
  body.convert-app-page #convertToolsModal .replace-header,
  body.convert-app-page #convertToolsModal .replace-body,
  #convertToolsModal .replace-header,
  #convertToolsModal .replace-body {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body.convert-app-page #convertToolsModal .replace-body,
  body.convert-app-page #convertToolsModal .convert-tools-body,
  #convertToolsModal .replace-body {
    padding-top: 10px !important;
    padding-bottom: 16px !important;
    max-height: none !important;
  }
  body.convert-app-page #convertToolsModal .replace-title-wrap p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  body.convert-app-page #convertToolsModal .cv-tools-tab {
    min-height: 32px !important;
    height: 32px !important;
    font-size: 11px !important;
    padding: 0 4px !important;
  }

  /* Stack learn fields cleanly; keep Thêm compact full-width */
  body.convert-app-page #convertToolsModal .cv-learn-row,
  #convertToolsModal .cv-learn-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  body.convert-app-page #convertToolsModal .cv-learn-eq {
    display: none !important;
  }
  body.convert-app-page #convertToolsModal #cvLearnBtn.cv-learn-btn,
  body.convert-app-page #convertToolsModal button.cv-learn-btn,
  #convertToolsModal #cvLearnBtn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
  }

  body.convert-app-page #convertToolsModal .cv-adv-actions .cv-adv-btn {
    flex: 1 1 calc(33.33% - 6px) !important;
    min-width: 0 !important;
    padding: 0 6px !important;
    font-size: 11px !important;
  }

  /* Keep find CTA fully on-screen */
  body.convert-app-page #convertToolsModal .cv-find-actions,
  #convertToolsModal .cv-find-actions {
    justify-content: stretch !important;
  }
  body.convert-app-page #convertToolsModal #applyFindReplaceBtn.cv-find-apply,
  body.convert-app-page #convertToolsModal .cv-find-apply,
  #convertToolsModal #applyFindReplaceBtn {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  body.convert-app-page #convertToolsModal .cv-find-head {
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
  }
  body.convert-app-page #convertToolsModal .cv-find-head small {
    text-align: left !important;
    width: 100% !important;
  }
}

@media (max-width: 380px) {
  body.convert-app-page #convertToolsModal > .convert-tools-dialog,
  body.convert-app-page #convertToolsModal > .replace-dialog,
  #convertToolsModal > .convert-tools-dialog {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
  }
  body.convert-app-page #convertToolsModal .replace-title-wrap p {
    display: none !important;
  }
  body.convert-app-page #convertToolsModal .cv-safe-pill {
    display: none !important;
  }
}

/* === SITE HEADER FOLLOWS READER THEME ===
   On /convert, recolor the global .vz-site-header with e-reader tokens so
   night/sepia/etc. no longer clash with a pure-white top bar. */
body.convert-app-page > header.vz-site-header,
body.convert-app-page > header.vz-site-header.sticky,
body.convert-app-page header.vz-site-header {
  margin-bottom: 0 !important;
  background: var(--er-surface, var(--er-paper)) !important;
  color: var(--er-ink) !important;
  border-color: var(--er-line) !important;
  box-shadow: none !important;
  /* Remap design tokens used by header CSS / utilities inside this subtree */
  --surface: var(--er-surface, var(--er-paper));
  --surface-soft: var(--er-surface-2, var(--er-paper-soft));
  --surface-mute: var(--er-surface-2, var(--er-paper-soft));
  --line: var(--er-line);
  --line-soft: var(--er-line);
  --line-strong: var(--er-line-strong);
  --ink: var(--er-ink);
  --ink-soft: var(--er-muted);
  --ink-mute: var(--er-muted);
  --accent: var(--er-gold);
  --accent-soft: var(--er-gold-soft);
}

body.convert-app-page > header.vz-site-header > .bg-surface,
body.convert-app-page header.vz-site-header .bg-surface,
body.convert-app-page header.vz-site-header .container,
body.convert-app-page header.vz-site-header > div {
  background: var(--er-surface, var(--er-paper)) !important;
  color: var(--er-ink) !important;
  border-color: var(--er-line) !important;
  overflow: visible !important;
}

/* Amber hairline under header — keep soft gold in every theme */
body.convert-app-page > header.vz-site-header::after,
body.convert-app-page header.vz-site-header::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--er-gold) 18%, transparent) 12%,
    color-mix(in srgb, var(--er-gold) 42%, transparent) 36%,
    color-mix(in srgb, var(--er-gold) 55%, transparent) 50%,
    color-mix(in srgb, var(--er-gold) 42%, transparent) 64%,
    color-mix(in srgb, var(--er-gold) 18%, transparent) 88%,
    transparent 100%
  ) !important;
}

/* Icons / chips / controls inside site header */
body.convert-app-page header.vz-site-header .vz-header-icon,
body.convert-app-page header.vz-site-header .vz-header-chip,
body.convert-app-page header.vz-site-header .vz-desktop-control,
body.convert-app-page header.vz-site-header .vz-mobile-menu-toggle,
body.convert-app-page header.vz-site-header .vz-mobile-global-chat,
body.convert-app-page header.vz-site-header .vz-mobile-header-notif button,
body.convert-app-page header.vz-site-header .vz-mobile-linh-thach,
body.convert-app-page header.vz-site-header .vz-category-trigger {
  color: var(--er-muted) !important;
  background: color-mix(in srgb, var(--er-surface-2) 88%, transparent) !important;
  border-color: color-mix(in srgb, var(--er-line) 80%, transparent) !important;
}
body.convert-app-page header.vz-site-header .vz-header-icon:hover,
body.convert-app-page header.vz-site-header .vz-header-chip:hover,
body.convert-app-page header.vz-site-header .vz-desktop-control:hover,
body.convert-app-page header.vz-site-header .vz-mobile-menu-toggle:hover,
body.convert-app-page header.vz-site-header .vz-mobile-global-chat:hover,
body.convert-app-page header.vz-site-header .vz-mobile-header-notif button:hover,
body.convert-app-page header.vz-site-header .vz-mobile-linh-thach:hover,
body.convert-app-page header.vz-site-header .vz-category-trigger:hover {
  color: var(--er-ink) !important;
  background: var(--er-surface-3) !important;
  border-color: color-mix(in srgb, var(--er-gold) 30%, var(--er-line)) !important;
}
/* Follow reader tokens (paper/sepia/gray/night) like Linh Thạch, not a locked cream chip. */
body.convert-app-page header.vz-site-header .vz-header-translate {
  color: var(--er-gold-ink) !important;
  background: color-mix(in srgb, var(--er-gold) 14%, var(--er-surface)) !important;
  border-color: color-mix(in srgb, var(--er-gold) 32%, var(--er-line)) !important;
  box-shadow: none;
}
body.convert-app-page header.vz-site-header .vz-header-translate:hover,
body.convert-app-page header.vz-site-header .vz-header-translate:focus-visible {
  color: var(--er-gold-ink) !important;
  background: color-mix(in srgb, var(--er-gold) 22%, var(--er-surface)) !important;
  border-color: color-mix(in srgb, var(--er-gold) 48%, var(--er-line)) !important;
}
body.convert-app-page header.vz-site-header .vz-header-translate-icon {
  background: linear-gradient(to bottom right, var(--er-gold), #f97316) !important;
  color: #fff !important;
}

/* Text colors used by Tailwind utilities in header markup */
body.convert-app-page header.vz-site-header .text-ink,
body.convert-app-page header.vz-site-header a,
body.convert-app-page header.vz-site-header button {
  color: var(--er-ink);
}
body.convert-app-page header.vz-site-header .text-ink-soft,
body.convert-app-page header.vz-site-header .text-ink-mute,
body.convert-app-page header.vz-site-header .placeholder-ink-mute {
  color: var(--er-muted) !important;
}

/* Search field */
body.convert-app-page header.vz-site-header .vz-desktop-search,
body.convert-app-page header.vz-site-header form[role="search"] {
  background: var(--er-surface-2) !important;
  border-color: var(--er-line) !important;
  color: var(--er-ink) !important;
}
body.convert-app-page header.vz-site-header .vz-desktop-search:focus-within,
body.convert-app-page header.vz-site-header form[role="search"]:focus-within {
  background: var(--er-surface) !important;
  border-color: color-mix(in srgb, var(--er-gold) 50%, var(--er-line)) !important;
}
body.convert-app-page header.vz-site-header input[type="search"],
body.convert-app-page header.vz-site-header input[type="text"] {
  background: transparent !important;
  color: var(--er-ink) !important;
  caret-color: var(--er-ink);
}
body.convert-app-page header.vz-site-header input::placeholder {
  color: var(--er-muted) !important;
  opacity: 0.85;
}

/* Dropdowns / drawers / panels opened from the header */
body.convert-app-page header.vz-site-header .vz-mobile-drawer,
body.convert-app-page .vz-notification-panel,
body.convert-app-page header.vz-site-header #category-dropdown,
body.convert-app-page header.vz-site-header [id="category-dropdown"],
body.convert-app-page header.vz-site-header .vz-mobile-search {
  background: var(--er-surface) !important;
  color: var(--er-ink) !important;
  border-color: var(--er-line-strong) !important;
  box-shadow: var(--er-shadow-lg) !important;
}

/* Notification dropdown internals follow convert theme (avoid white zebra rows) */
body.convert-app-page .vz-notification-panel,
body.convert-app-page .vz-notification-panel__header,
body.convert-app-page .vz-notification-panel__list,
body.convert-app-page .vz-notification-panel__item,
body.convert-app-page .vz-notification-panel__footer {
  background: var(--er-surface) !important;
  color: var(--er-ink) !important;
  border-color: var(--er-line) !important;
  box-shadow: none !important;
}
body.convert-app-page .vz-notification-panel {
  border-color: var(--er-line-strong) !important;
  box-shadow: var(--er-shadow-lg) !important;
  z-index: var(--er-z-dropdown) !important;
}
body.convert-app-page .vz-notification-panel--portal {
  width: min(20rem, calc(100vw - 1.25rem));
  max-height: min(24rem, calc(100dvh - 5rem));
}
body.convert-app-page .vz-notification-panel__title,
body.convert-app-page .vz-notification-panel__time,
body.convert-app-page .vz-notification-panel__empty {
  color: var(--er-muted) !important;
}
body.convert-app-page .vz-notification-panel__text {
  color: var(--er-ink-soft, var(--er-ink)) !important;
}
body.convert-app-page .vz-notification-panel__count {
  background: color-mix(in srgb, var(--er-gold) 16%, var(--er-surface-2, var(--er-surface))) !important;
  color: var(--er-gold) !important;
}
body.convert-app-page .vz-notification-panel__item:hover,
body.convert-app-page .vz-notification-panel__item:focus-visible,
body.convert-app-page .vz-notification-panel__footer:hover,
body.convert-app-page .vz-notification-panel__footer:focus-visible {
  background: var(--er-surface-2, color-mix(in srgb, var(--er-surface) 86%, #ffffff)) !important;
}
body.convert-app-page .vz-notification-panel__item.is-unread {
  background: color-mix(in srgb, var(--er-gold) 10%, var(--er-surface)) !important;
}
body.convert-app-page .vz-notification-panel__item.is-unread:hover,
body.convert-app-page .vz-notification-panel__item.is-unread:focus-visible {
  background: color-mix(in srgb, var(--er-gold) 16%, var(--er-surface)) !important;
}
body.convert-app-page .vz-notification-panel__item.is-unread .vz-notification-panel__dot {
  background: var(--er-gold) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 18%, transparent) !important;
}
body.convert-app-page .vz-notification-panel__item.is-read .vz-notification-panel__dot {
  background: transparent !important;
  box-shadow: inset 0 0 0 1px var(--er-line) !important;
}
body.convert-app-page .vz-notification-panel__empty-icon {
  background: var(--er-surface-2, var(--er-surface)) !important;
  color: var(--er-muted) !important;
}
body.convert-app-page .vz-notification-panel__footer {
  color: var(--er-ink-soft, var(--er-ink)) !important;
}
body.convert-app-page header.vz-site-header .vz-mobile-drawer a,
body.convert-app-page header.vz-site-header .vz-mobile-account-link,
body.convert-app-page header.vz-site-header .vz-mobile-logout,
body.convert-app-page header.vz-site-header .vz-mobile-admin,
body.convert-app-page header.vz-site-header #category-dropdown a {
  color: var(--er-ink) !important;
  background: transparent !important;
  border-color: var(--er-line) !important;
}
body.convert-app-page header.vz-site-header .vz-mobile-drawer a:hover,
body.convert-app-page header.vz-site-header #category-dropdown a:hover {
  background: var(--er-surface-2) !important;
}

/* Linh thạch amount stays gold-accented, readable on dark */
body.convert-app-page header.vz-site-header .vz-mobile-linh-thach,
body.convert-app-page header.vz-site-header .vz-linh-thach-inner,
body.convert-app-page header.vz-site-header .vz-linh-thach-inner [data-linh-thach],
body.convert-app-page header.vz-site-header a[title="Linh Thạch"] {
  color: var(--er-gold) !important;
}
body.convert-app-page header.vz-site-header .vz-mobile-linh-thach {
  background: color-mix(in srgb, var(--er-gold) 12%, var(--er-surface)) !important;
  border-color: color-mix(in srgb, var(--er-gold) 28%, var(--er-line)) !important;
}
body.convert-app-page header.vz-site-header .vz-linh-thach-inner svg {
  color: var(--er-gold) !important;
}

/* Night: keep logo legible if it's a dark asset */
html[data-reader-theme="night"] body.convert-app-page header.vz-site-header .logo-sun-glow {
  filter: drop-shadow(0 1px 4px rgba(245, 158, 11, 0.35)) brightness(1.05);
}

/* Notification badge contrast on themed header */
body.convert-app-page header.vz-site-header .vz-header-notification span,
body.convert-app-page header.vz-site-header .vz-header-notification .absolute {
  /* keep existing badge styling; only ensure parent doesn't wash out */
  border-color: var(--er-surface) !important;
}

/* === DOCK: show Convert label on mobile ===
   Keep icon-only for utility controls; Convert should read like "Dịch". */
@media (max-width: 900px) {
  body.convert-app-page #runConvertBtn {
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    gap: 5px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
    font-weight: 850 !important;
  }
  body.convert-app-page #runConvertBtn span {
    display: inline !important;
    white-space: nowrap !important;
  }
  body.convert-app-page #runConvertBtn svg {
    width: 13px !important;
    height: 13px !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 640px) {
  body.convert-app-page #runConvertBtn {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 9px !important;
    gap: 4px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
  }
  body.convert-app-page #runConvertBtn span {
    display: inline !important;
  }
}

@media (max-width: 420px) {
  body.convert-app-page #runConvertBtn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
  }
  body.convert-app-page #runConvertBtn span {
    display: inline !important;
  }
}

@media (max-width: 360px) {
  /* Still prefer label; slightly tighter if the bar is cramped */
  body.convert-app-page #runConvertBtn {
    padding: 0 7px !important;
  }
  body.convert-app-page #runConvertBtn span {
    display: inline !important;
  }
}

/* === DOCK ACTION ICONS: label-matched (final, em-based) === */
body.convert-app-page #runTranslateBtn,
body.convert-app-page #runConvertBtn {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4em !important;
  line-height: 1 !important;
}
body.convert-app-page #runTranslateBtn .convert-action-icon,
body.convert-app-page #runConvertBtn .convert-action-icon,
body.convert-app-page #runConvertBtn svg.convert-action-icon {
  display: block !important;
  width: 1.05em !important;
  height: 1.05em !important;
  min-width: 1.05em !important;
  min-height: 1.05em !important;
  max-width: 1.05em !important;
  max-height: 1.05em !important;
  flex: 0 0 1.05em !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
  color: inherit !important;
}
body.convert-app-page #runTranslateBtn .convert-action-label,
body.convert-app-page #runConvertBtn .convert-action-label,
body.convert-app-page #runConvertBtn > span {
  display: inline-block !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
}
body.convert-app-page #runTranslateBtn .convert-action-spinner,
body.convert-app-page #runConvertBtn .convert-action-spinner,
body.convert-app-page .convert-action-spinner {
  display: none !important;
}
body.convert-app-page #runTranslateBtn.is-loading .convert-action-icon,
body.convert-app-page #runConvertBtn.is-loading .convert-action-icon {
  display: none !important;
}
body.convert-app-page #runTranslateBtn.is-loading .convert-action-spinner,
body.convert-app-page #runConvertBtn.is-loading .convert-action-spinner {
  display: block !important;
  width: 1.05em !important;
  height: 1.05em !important;
  min-width: 1.05em !important;
  min-height: 1.05em !important;
  max-width: 1.05em !important;
  max-height: 1.05em !important;
  flex: 0 0 1.05em !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: inherit !important;
  animation: erSpin 0.8s linear infinite !important;
}
body.convert-app-page #runConvertBtn:disabled,
body.convert-app-page #runConvertBtn.is-loading:not(.is-stoppable),
body.convert-app-page #runTranslateBtn:disabled,
body.convert-app-page #runTranslateBtn.is-loading:not(.is-stoppable) {
  opacity: 0.72 !important;
  cursor: wait !important;
  pointer-events: none !important;
  filter: none !important;
}
/* Active Dịch/Convert becomes clickable Dừng while work is in flight. */
body.convert-app-page #runTranslateBtn.is-stoppable,
body.convert-app-page #runConvertBtn.is-stoppable {
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  filter: none !important;
}
body.convert-app-page #runTranslateBtn.is-stoppable {
  background: #b45309 !important;
  border-color: #b45309 !important;
  color: #fff7ed !important;
}
body.convert-app-page #runConvertBtn.is-stoppable {
  background: color-mix(in srgb, #b45309 88%, #111) !important;
  border-color: #b45309 !important;
  color: #fff7ed !important;
}
body.convert-app-page #runTranslateBtn.is-stopping,
body.convert-app-page #runConvertBtn.is-stopping {
  opacity: 0.78 !important;
  cursor: wait !important;
  pointer-events: none !important;
}

/* Mobile: keep Convert labeled; icons stay em-based so they track font-size */
@media (max-width: 900px) {
  body.convert-app-page #runConvertBtn {
    width: auto !important;
    min-width: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body.convert-app-page #runConvertBtn span,
  body.convert-app-page #runConvertBtn .convert-action-label {
    display: inline-block !important;
  }
  body.convert-app-page #runConvertBtn .convert-action-icon,
  body.convert-app-page #runConvertBtn .convert-action-spinner {
    width: 1.05em !important;
    height: 1.05em !important;
    flex: 0 0 1.05em !important;
  }
  body.convert-app-page #runConvertBtn.is-loading .convert-action-icon {
    display: none !important;
  }
  body.convert-app-page #runConvertBtn.is-loading .convert-action-spinner {
    display: block !important;
  }
}

/* === STORY MAP: dense list + storage chip === */
body.convert-app-page #convertStoryMapMenu.story-map-menu,
#convertStoryMapMenu.story-map-menu {
  width: min(400px, calc(100vw - 12px)) !important;
  max-height: min(70vh, 560px) !important;
  gap: 6px !important;
  padding: 7px !important;
  border-radius: 12px !important;
}

/* Row: storage (no clip) + search (flex) + count */
body.convert-app-page .story-map-search-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.convert-app-page .story-map-storage {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  min-width: max-content !important;
  max-width: none !important;
  width: auto !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  border: 1px solid color-mix(in srgb, var(--er-gold) 28%, var(--er-line)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--er-gold) 10%, var(--er-surface-2, var(--er-paper-soft))) !important;
  color: var(--er-gold-ink, var(--er-ink)) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  box-sizing: border-box !important;
}
body.convert-app-page .story-map-storage svg {
  width: 11px !important;
  height: 11px !important;
  color: var(--er-gold) !important;
  flex: 0 0 auto !important;
}
body.convert-app-page .story-map-storage #storyMapStorageText {
  display: inline !important;
  font-weight: 850 !important;
  color: inherit !important;
  white-space: nowrap !important;
  overflow: visible !important;
  max-width: none !important;
}
body.convert-app-page .story-map-storage-sep {
  display: inline !important;
  opacity: 0.55 !important;
  margin: 0 2px !important;
  flex: 0 0 auto !important;
}

body.convert-app-page .story-map-search-field {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 30px !important;
  padding: 0 8px !important;
  border: 1px solid var(--er-line) !important;
  border-radius: 9px !important;
  background: var(--er-surface-2, var(--er-paper-soft)) !important;
  box-sizing: border-box !important;
}
body.convert-app-page .story-map-search-field:focus-within {
  border-color: color-mix(in srgb, var(--er-gold) 50%, var(--er-line)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--er-gold) 14%, transparent) !important;
}
body.convert-app-page .story-map-add,
#convertStoryMapMenu .story-map-add {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 9px !important;
  border: 1px solid color-mix(in srgb, var(--er-gold) 40%, var(--er-line)) !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--er-gold) 16%, var(--er-surface-2, var(--er-paper-soft))) !important;
  color: var(--er-gold-ink) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
body.convert-app-page .story-map-add:hover,
body.convert-app-page .story-map-add:focus-visible,
#convertStoryMapMenu .story-map-add:hover,
#convertStoryMapMenu .story-map-add:focus-visible {
  background: color-mix(in srgb, var(--er-gold) 24%, var(--er-surface-2, var(--er-paper-soft))) !important;
  border-color: color-mix(in srgb, var(--er-gold) 56%, var(--er-line)) !important;
}
body.convert-app-page .story-map-add svg,
#convertStoryMapMenu .story-map-add svg {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 auto !important;
}
body.convert-app-page .story-map-add span,
#convertStoryMapMenu .story-map-add span {
  display: inline !important;
}
body.convert-app-page .story-map-search-ico {
  width: 13px !important;
  height: 13px !important;
  color: var(--er-muted) !important;
  flex: 0 0 auto !important;
}
body.convert-app-page #convertStoryMapSearch {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: var(--er-ink) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
body.convert-app-page .story-map-result-count {
  flex: 0 0 auto !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--er-muted) !important;
}

body.convert-app-page .story-map-list {
  gap: 2px !important;
  /* Do not negative-margin/clip the action column */
  padding-right: 0 !important;
  margin-right: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}
body.convert-app-page #convertStoryMapMenu.story-map-menu,
#convertStoryMapMenu.story-map-menu {
  overflow: hidden !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
/* Title | open+delete — reserve fixed room so trash is never clipped */
body.convert-app-page .story-map-entry {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 64px !important;
  gap: 4px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
body.convert-app-page .story-map-entry-main {
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 34px !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--er-surface-2, var(--er-paper-soft)) 78%, transparent) !important;
  overflow: hidden !important;
}
body.convert-app-page .story-map-entry-text {
  gap: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
body.convert-app-page .story-map-entry-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.convert-app-page .story-map-entry-meta {
  font-size: 10px !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.convert-app-page .story-map-entry-badge {
  width: 8px !important;
  min-width: 8px !important;
  height: 8px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: var(--er-gold) !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--er-gold) 18%, transparent) !important;
}
body.convert-app-page .story-map-entry-actions {
  display: grid !important;
  grid-template-columns: 30px 30px !important;
  gap: 4px !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  flex: 0 0 64px !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}
body.convert-app-page .story-map-entry-post,
body.convert-app-page .story-map-entry-delete {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
  flex: 0 0 30px !important;
  box-sizing: border-box !important;
}
body.convert-app-page .story-map-entry-post svg,
body.convert-app-page .story-map-entry-delete svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  display: block !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}
/* Delete stays readable on night (not washed/clipped into surface) */
body.convert-app-page .story-map-entry-delete {
  color: var(--er-muted) !important;
  background: var(--er-surface-2, var(--er-paper-soft)) !important;
  border: 1px solid var(--er-line) !important;
}
body.convert-app-page .story-map-entry-delete:hover {
  color: var(--er-err) !important;
  background: color-mix(in srgb, var(--er-err) 12%, var(--er-surface, var(--er-paper))) !important;
  border-color: color-mix(in srgb, var(--er-err) 35%, var(--er-line)) !important;
}
html[data-reader-theme="night"] body.convert-app-page .story-map-entry-delete {
  color: #c9c4ba !important;
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-reader-theme="night"] body.convert-app-page .story-map-entry-delete:hover {
  color: #fb7185 !important;
  background: rgba(244, 63, 94, 0.16) !important;
  border-color: rgba(251, 113, 133, 0.4) !important;
}
body.convert-app-page .story-map-entry.is-active .story-map-entry-main {
  background: color-mix(in srgb, var(--er-gold) 14%, var(--er-surface, var(--er-paper))) !important;
  border-color: color-mix(in srgb, var(--er-gold) 36%, var(--er-line)) !important;
}
body.convert-app-page .story-map-entry.is-active .story-map-entry-delete {
  background: color-mix(in srgb, var(--er-gold) 10%, var(--er-surface-2, var(--er-paper-soft))) !important;
  border-color: color-mix(in srgb, var(--er-gold) 28%, var(--er-line)) !important;
  color: var(--er-ink) !important;
}
body.convert-app-page .story-map-more {
  min-height: 30px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
}
body.convert-app-page .story-map-empty {
  padding: 12px 6px !important;
  font-size: 11.5px !important;
}

/* Narrow phones: storage still full text; keep both action icons visible */
@media (max-width: 420px) {
  body.convert-app-page .story-map-storage {
    font-size: 10px !important;
    padding: 0 7px !important;
    max-width: none !important;
  }
  body.convert-app-page .story-map-add,
  #convertStoryMapMenu .story-map-add {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }
  body.convert-app-page .story-map-add span,
  #convertStoryMapMenu .story-map-add span {
    display: inline !important;
  }
  body.convert-app-page .story-map-entry {
    grid-template-columns: minmax(0, 1fr) 60px !important;
  }
  body.convert-app-page .story-map-entry-actions {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    grid-template-columns: 28px 28px !important;
    gap: 4px !important;
  }
  body.convert-app-page .story-map-entry-main {
    min-height: 32px !important;
    padding: 3px 7px !important;
  }
  body.convert-app-page .story-map-entry-post,
  body.convert-app-page .story-map-entry-delete {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 32px !important;
    min-height: 32px !important;
    flex-basis: 28px !important;
  }
}


/* === NIGHT READ TEXT: chapter/show parity ===
   Keep night reader color and rhythm consistent with the normal chapter view. */
html[data-reader-theme="night"] body.convert-app-page {
  --er-paper: #121212;
  --er-paper-soft: #181818;
  --er-ink: #b5b5b5;
  --er-muted: #808080;
  --er-surface: #1d1d1d;
  --er-surface-2: #242424;
  --er-surface-3: #2a2a2a;
}

html[data-reader-theme="night"] body.convert-app-page .reader-content,
html[data-reader-theme="night"] body.convert-app-page #convertReaderContent.reader-content {
  color: #b5b5b5 !important;
  font-family: var(--er-font-read) !important;
  font-size: var(--vz-read-font-size, 20px) !important;
  line-height: var(--vz-read-line-height, 1.9) !important;
  letter-spacing: normal !important;
  word-spacing: 0.05em !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[data-reader-theme="night"] body.convert-app-page .reader-content p {
  color: #b5b5b5 !important;
  margin: 0 0 1.08em !important;
  text-indent: 0 !important;
  text-align: left !important;
  opacity: 1 !important;
  font-weight: inherit !important;
}
html[data-reader-theme="night"] body.convert-app-page .reader-chapter-head h2,
html[data-reader-theme="night"] body.convert-app-page #readerChapterHead h2 {
  color: #ddd6c8 !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}
html[data-reader-theme="night"] body.convert-app-page .convert-empty-state strong,
html[data-reader-theme="night"] body.convert-app-page #convertEmptyState strong {
  color: #ddd6c8 !important;
}
html[data-reader-theme="night"] body.convert-app-page .convert-empty-state p,
html[data-reader-theme="night"] body.convert-app-page #convertEmptyState p,
html[data-reader-theme="night"] body.convert-app-page .convert-empty-notice {
  color: #929292 !important;
}
html[data-reader-theme="night"] body.convert-app-page .reader-end-nav-copy strong {
  color: #c9c4ba !important;
}
html[data-reader-theme="night"] body.convert-app-page .reader-end-nav-copy small {
  color: #929292 !important;
}
/* Avoid chrome text popping brighter than the reading surface */
html[data-reader-theme="night"] body.convert-app-page .story-map-details strong,
html[data-reader-theme="night"] body.convert-app-page #convertStoryMapCurrentTitle {
  color: #ddd6c8 !important;
}
html[data-reader-theme="night"] body.convert-app-page .reader-tool-btn,
html[data-reader-theme="night"] body.convert-app-page .reader-chapter-chip {
  color: #c9c4ba !important;
}

/* Night mobile follows chapter/show mobile rhythm. */
@media (max-width: 900px) {
  html[data-reader-theme="night"] body.convert-app-page .reader-content,
  html[data-reader-theme="night"] body.convert-app-page #convertReaderContent.reader-content {
    font-size: var(--vz-read-font-size, 20px) !important;
    line-height: var(--vz-read-line-height, 1.8) !important;
  }
}
@media (max-width: 640px) {
  html[data-reader-theme="night"] body.convert-app-page .reader-content,
  html[data-reader-theme="night"] body.convert-app-page #convertReaderContent.reader-content {
    font-size: var(--vz-read-font-size, 20px) !important;
    line-height: var(--vz-read-line-height, 1.8) !important;
  }
}
@media (max-width: 420px) {
  html[data-reader-theme="night"] body.convert-app-page .reader-content,
  html[data-reader-theme="night"] body.convert-app-page #convertReaderContent.reader-content {
    font-size: var(--vz-read-font-size, 20px) !important;
    line-height: var(--vz-read-line-height, 1.8) !important;
  }
}

/* Raw-line layout must win over compact/night paragraph rules above. */
body.convert-app-page #convertReaderContent[data-layout="raw-lines"] > p[data-raw-line],
html[data-reader-theme="night"] body.convert-app-page #convertReaderContent[data-layout="raw-lines"] > p[data-raw-line] {
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
  display: block !important;
  min-height: 1em !important;
  white-space: pre-wrap !important;
}
/* A single Raw newline often separates two source paragraphs. Keep that
   newline exact, but restore readable paragraph rhythm without touching text
   or manufacturing gaps around explicit blank Raw rows. */
body.convert-app-page #convertReaderContent[data-layout="raw-lines"] > p[data-raw-line][data-raw-gap="1"],
html[data-reader-theme="night"] body.convert-app-page #convertReaderContent[data-layout="raw-lines"] > p[data-raw-line][data-raw-gap="1"] {
  margin-bottom: 0.48em !important;
}
@media (max-width: 768px) {
  body.convert-app-page #convertReaderContent[data-layout="raw-lines"] > p[data-raw-line][data-raw-gap="1"],
  html[data-reader-theme="night"] body.convert-app-page #convertReaderContent[data-layout="raw-lines"] > p[data-raw-line][data-raw-gap="1"] {
    margin-bottom: 0.42em !important;
  }
}
body.convert-app-page #convertReaderContent[data-layout="raw-lines"] > p[data-raw-line]:last-child,
html[data-reader-theme="night"] body.convert-app-page #convertReaderContent[data-layout="raw-lines"] > p[data-raw-line]:last-child {
  margin-bottom: 0 !important;
}

/* Client-side DevTools deterrent. It is intentionally not a copy blocker. */
html[data-convert-devtools-open="1"] body.convert-app-page > :not(#convertDevtoolsGuard) {
  visibility: hidden !important;
}
body.convert-app-page #convertDevtoolsGuard[hidden] {
  display: none !important;
}
body.convert-app-page #convertDevtoolsGuard:not([hidden]) {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--er-paper, #f8f3e9);
  color: var(--er-ink, #2f2921);
  font: 700 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
  user-select: none;
}
html[data-reader-theme="night"] body.convert-app-page #convertDevtoolsGuard:not([hidden]) {
  background: #171717;
  color: #ddd6c8;
}

/* Offscreen heavy UI: skip layout/paint until opened */
body.convert-app-page #convertToolsModal[hidden],
body.convert-app-page #translateFreeKeyPanel[hidden],
body.convert-app-page #convertConfirmModal[hidden],
body.convert-app-page #chapterListDrawer[hidden],
body.convert-app-page .chapter-toc-root:not(.is-open) .chapter-shelf {
  content-visibility: hidden;
  contain: layout style paint;
}

/* Footer only starts a fresh import. Resume/stop lives in the saved-job row. */
body.convert-app-page #rawPanelCard .convert-import-footer {
  display: grid !important;
  grid-template-columns: minmax(150px, auto);
  align-items: center;
  justify-content: end;
  gap: 8px;
}
body.convert-app-page #rawPanelCard .convert-import-footer > button {
  position: relative;
  inset: auto;
  float: none;
  flex: none !important;
  min-width: 0;
  white-space: nowrap;
}
body.convert-app-page #rawPanelCard .convert-import-footer > button[hidden] {
  display: none !important;
}
@media (max-width: 640px) {
  body.convert-app-page #rawPanelCard .convert-import-footer {
    grid-template-columns: minmax(0, 1fr);
  }
  body.convert-app-page #rawPanelCard .convert-import-footer > button {
    width: 100%;
  }
  body.convert-app-page #rawPanelCard #convertImportConfirmBtn {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   Reader text parity with chapter/show
   --------------------------------------------------------------------------
   /chapter/show uses Times New Roman by default, theme-specific reader
   colors, 20px mobile text, 24px large-screen text, and 1.68/1.55 rhythm.
   Keep this block last so legacy density overrides cannot make /convert hard
   to read. It changes presentation only; raw-line DOM and copy behavior stay
   untouched.
   -------------------------------------------------------------------------- */
body.convert-app-page {
  --er-font-read: "Times New Roman", serif;
  --vz-read-line-height: 1.9;
}

html[data-reader-theme="white"] body.convert-app-page { --er-ink: #1e293b; }
html[data-reader-theme="paper"] body.convert-app-page { --er-ink: #35281d; }
html[data-reader-theme="sepia"] body.convert-app-page { --er-ink: #3b2a1a; }
html[data-reader-theme="ghi"] body.convert-app-page { --er-ink: #2d3748; }
html[data-reader-theme="gray"] body.convert-app-page { --er-ink: #1f2933; }
html[data-reader-theme="night"] body.convert-app-page { --er-ink: #b5b5b5; }

body.convert-app-page .reader-content,
body.convert-app-page #convertReaderContent.reader-content {
  color: var(--er-ink) !important;
  font-family: var(--er-font-read) !important;
  font-size: var(--vz-read-font-size, 20px) !important;
  line-height: var(--vz-read-line-height, 1.9) !important;
  letter-spacing: normal !important;
  word-spacing: 0.05em !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.convert-app-page .reader-content p,
body.convert-app-page #convertReaderContent.reader-content p,
html[data-reader-theme] body.convert-app-page .reader-content p,
html[data-reader-theme] body.convert-app-page #convertReaderContent.reader-content p {
  color: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
}

@media (min-width: 1024px) {
  body.convert-app-page .reader-content,
  body.convert-app-page #convertReaderContent.reader-content,
  html[data-reader-theme] body.convert-app-page .reader-content,
  html[data-reader-theme] body.convert-app-page #convertReaderContent.reader-content {
    font-size: var(--vz-read-font-size, 24px) !important;
  }
}

@media (max-width: 768px) {
  body.convert-app-page .reader-content,
  body.convert-app-page #convertReaderContent.reader-content,
  html[data-reader-theme] body.convert-app-page .reader-content,
  html[data-reader-theme] body.convert-app-page #convertReaderContent.reader-content {
    --vz-read-line-height: 1.8;
    line-height: var(--vz-read-line-height, 1.8) !important;
  }
}

/* Saved-chapter recovery: compact icon control, not a full-size action tile. */
body.convert-app-page .saved-chapter-list .saved-chapter-retry {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  background: var(--er-surface-2, var(--er-paper-soft)) !important;
  color: var(--er-muted) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
body.convert-app-page .saved-chapter-list .saved-chapter-retry:hover,
body.convert-app-page .saved-chapter-list .saved-chapter-retry:focus-visible {
  color: var(--er-gold-ink) !important;
  border-color: color-mix(in srgb, var(--er-gold) 48%, var(--er-line)) !important;
  background: var(--er-gold-soft) !important;
  transform: none !important;
  outline: none !important;
}

/* --------------------------------------------------------------------------
   Client API key · keep width:auto after square dock patches
   -------------------------------------------------------------------------- */
body.convert-app-page .convert-model-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}
body.convert-app-page .key-config-btn,
body.convert-app-page #toggleFreeKeyPanelBtn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
body.convert-app-page .key-config-btn strong[hidden] {
  display: none !important;
}
body.convert-app-page #toggleFreeKeyPanelBtn[aria-hidden="true"] {
  display: none !important;
}

body.convert-app-page #translateFreeKeyPanel.free-key-modal-backdrop:not([hidden]),
#translateFreeKeyPanel.free-key-modal-backdrop:not([hidden]) {
  display: grid !important;
  place-items: center !important;
  padding: clamp(12px, 3vw, 24px) !important;
  background: var(--er-scrim, rgba(15, 23, 42, .48)) !important;
  overscroll-behavior: contain !important;
}
body.convert-app-page #translateFreeKeyPanel .free-key-modal-card {
  display: flex !important;
  flex-direction: column !important;
  width: min(540px, 100%) !important;
  max-height: min(82dvh, 680px) !important;
  margin: 0 !important;
  border: 1px solid var(--er-line-strong) !important;
  border-radius: 18px !important;
  background: var(--er-surface, var(--er-paper)) !important;
  color: var(--er-ink) !important;
  box-shadow: 0 24px 70px -30px rgba(15, 23, 42, .62) !important;
  overflow: hidden !important;
  transform: translateY(8px) scale(.985);
  opacity: 1;
  transition: transform .18s ease, opacity .18s ease;
}
body.convert-app-page #translateFreeKeyPanel.is-open .free-key-modal-card {
  transform: none;
  opacity: 1;
}
body.convert-app-page #translateFreeKeyPanel .free-key-modal-header,
body.convert-app-page #translateFreeKeyPanel .free-key-modal-body,
body.convert-app-page #translateFreeKeyPanel .free-key-modal-footer {
  padding: 14px 18px !important;
}
body.convert-app-page #translateFreeKeyPanel .free-key-modal-header {
  align-items: flex-start !important;
  background: color-mix(in srgb, var(--er-surface-2, var(--er-paper-soft)) 72%, transparent) !important;
}
body.convert-app-page #translateFreeKeyPanel .free-key-modal-header > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
body.convert-app-page #translateFreeKeyPanel #translateFreeKeyTitle {
  color: var(--er-ink) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}
body.convert-app-page #translateFreeKeyPanel #translateFreeKeySummary {
  color: var(--er-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
body.convert-app-page #translateFreeKeyPanel .free-key-modal-close {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  color: var(--er-muted) !important;
  font-size: 21px !important;
  line-height: 1 !important;
}
body.convert-app-page #translateFreeKeyPanel .free-key-modal-close:hover,
body.convert-app-page #translateFreeKeyPanel .free-key-modal-close:focus-visible {
  border-color: var(--er-line) !important;
  background: var(--er-surface-3, var(--er-paper-soft)) !important;
  color: var(--er-ink) !important;
  outline: none !important;
}
body.convert-app-page #translateFreeKeyPanel .free-key-modal-body {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}
body.convert-app-page #translateFreeKeyPanel .free-key-modal-info {
  margin: 0 0 12px !important;
  padding: 9px 11px !important;
  border: 1px solid color-mix(in srgb, var(--er-gold) 24%, var(--er-line)) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--er-gold-soft) 72%, var(--er-surface)) !important;
  color: var(--er-muted) !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
}
body.convert-app-page #translateFreeKeyPanel .free-key-input-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 5px;
  color: var(--er-muted);
  font-size: 11px;
  font-weight: 850;
}
body.convert-app-page #translateFreeKeyPanel .free-key-model-intro {
  margin: 0 0 12px !important;
  padding: 9px 11px !important;
  border: 1px solid var(--er-line) !important;
  border-radius: 10px !important;
  background: var(--er-surface-2, var(--er-paper-soft)) !important;
  color: var(--er-muted) !important;
}
body.convert-app-page #translateFreeKeyPanel .free-key-model-intro-label {
  display: block;
  margin-bottom: 3px;
  color: var(--er-ink) !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
}
body.convert-app-page #translateFreeKeyPanel .free-key-model-intro p {
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  overflow-wrap: anywhere;
}
body.convert-app-page #translateFreeKeyPanel .free-key-input-row {
  align-items: stretch !important;
  gap: 8px !important;
  margin-top: 0 !important;
}
body.convert-app-page #translateFreeKeyPanel #translateFreeKeyInput {
  box-sizing: border-box !important;
  min-height: 92px !important;
  max-height: 210px !important;
  padding: 10px 11px !important;
  border: 1px solid var(--er-line-strong) !important;
  border-radius: 11px !important;
  background: var(--er-input, var(--er-paper)) !important;
  color: var(--er-ink) !important;
  font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  resize: vertical !important;
  outline: none !important;
}
body.convert-app-page #translateFreeKeyPanel #translateFreeKeyInput:focus {
  border-color: color-mix(in srgb, var(--er-gold) 62%, var(--er-line-strong)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 15%, transparent) !important;
}
body.convert-app-page #translateFreeKeyPanel #translateFreeKeySaveBtn {
  align-self: center !important;
  min-width: 68px !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  background: var(--er-gold) !important;
  border-color: var(--er-gold) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
body.convert-app-page #translateFreeKeyPanel #translateFreeKeySaveBtn:hover,
body.convert-app-page #translateFreeKeyPanel #translateFreeKeySaveBtn:focus-visible {
  filter: brightness(.96) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 18%, transparent) !important;
  outline: none !important;
}
body.convert-app-page #translateFreeKeyPanel .free-key-input-hint {
  margin: 6px 0 0;
  color: var(--er-muted);
  font-size: 10.5px;
  line-height: 1.4;
}
body.convert-app-page #translateFreeKeyPanel .free-key-list {
  max-height: 180px;
  overflow-y: auto;
  margin-top: 12px !important;
  padding-right: 2px;
  scrollbar-width: thin;
}
body.convert-app-page #translateFreeKeyPanel .free-key-item {
  min-height: 34px;
  box-sizing: border-box;
  padding: 6px 8px 6px 10px !important;
  border: 1px solid var(--er-line) !important;
  border-radius: 9px !important;
  background: var(--er-surface-2, var(--er-paper-soft)) !important;
}
body.convert-app-page #translateFreeKeyPanel .free-key-item code {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--er-muted);
  font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .02em;
}
body.convert-app-page #translateFreeKeyPanel .free-key-item button {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--er-err, #be123c);
  font-size: 10.5px;
  font-weight: 850;
  cursor: pointer;
}
body.convert-app-page #translateFreeKeyPanel .free-key-item button:hover,
body.convert-app-page #translateFreeKeyPanel .free-key-item button:focus-visible {
  border-color: color-mix(in srgb, var(--er-err) 24%, var(--er-line));
  background: var(--er-err-soft, #fff1f2);
  outline: none;
}
body.convert-app-page #translateFreeKeyPanel .free-key-quota {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 3.25em;
  text-align: right;
  color: var(--er-muted);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
}
body.convert-app-page #translateFreeKeyPanel .free-key-item.is-quota-empty {
  opacity: 0.72;
}
body.convert-app-page #translateFreeKeyPanel .free-key-item.is-quota-empty .free-key-quota {
  color: var(--er-err, #be123c);
}
body.convert-app-page #translateFreeKeyPanel .free-key-empty {
  padding: 14px 10px;
  border: 1px dashed var(--er-line-strong);
  border-radius: 9px;
  color: var(--er-muted);
  font-size: 11px;
  text-align: center;
}
body.convert-app-page #translateFreeKeyPanel .free-key-modal-footer {
  justify-content: flex-end !important;
  background: color-mix(in srgb, var(--er-surface-2, var(--er-paper-soft)) 48%, transparent) !important;
}
body.convert-app-page #translateFreeKeyPanel .free-key-modal-btn-close {
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  font-size: 11.5px !important;
}

@media (max-width: 640px) {
  body.convert-app-page .convert-model-wrapper { gap: 3px !important; }
  body.convert-app-page #translateFreeKeyPanel.free-key-modal-backdrop:not([hidden]),
  #translateFreeKeyPanel.free-key-modal-backdrop:not([hidden]) {
    place-items: end center !important;
    padding: 0 !important;
  }
  body.convert-app-page #translateFreeKeyPanel .free-key-modal-card {
    width: 100% !important;
    max-height: min(88dvh, 680px) !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    transform: translateY(16px);
  }
  body.convert-app-page #translateFreeKeyPanel .free-key-modal-header,
  body.convert-app-page #translateFreeKeyPanel .free-key-modal-body,
  body.convert-app-page #translateFreeKeyPanel .free-key-modal-footer {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  body.convert-app-page #translateFreeKeyPanel .free-key-input-row {
    grid-template-columns: 1fr !important;
  }
  body.convert-app-page #translateFreeKeyPanel #translateFreeKeyInput {
    min-height: 88px !important;
    font-size: 16px !important;
  }
  body.convert-app-page #translateFreeKeyPanel #translateFreeKeySaveBtn {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
  }
  body.convert-app-page #translateFreeKeyPanel .free-key-list { max-height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  body.convert-app-page #translateFreeKeyPanel .free-key-modal-card { transition: none !important; }
}

/* Model rows stay compact after the menu is ported to <body>. */
body.convert-app-page #translateModelMenu .model-menu-item,
body.convert-app-page #translateModelMenu .model-option {
  min-height: 44px !important;
  padding: 8px 10px !important;
  border-radius: 9px !important;
}
body.convert-app-page #translateModelMenu .model-option-name {
  white-space: nowrap !important;
  font-size: 12.5px !important;
}
body.convert-app-page #translateModelMenu .model-option-note,
body.convert-app-page #translateModelMenu .model-option-cost {
  font-size: 10.5px !important;
}

/* ========================================================================== 
   MOBILE UX CONSOLIDATION
   Final rules. Keep phone chrome inside viewport, preserve useful tap areas,
   and remove expensive translucent effects while scrolling.
   ========================================================================== */
@media (max-width: 900px) {
  body.convert-app-page,
  body.convert-app-page #turbo-container,
  body.convert-app-page .convert-simple-container,
  body.convert-app-page .convert-simple-root,
  body.convert-app-page .convert-app-shell {
    max-width: 100%;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  /* Clip only the reading surface — not chrome ancestors. */
  body.convert-app-page #convertReader,
  body.convert-app-page #convertReader.reader-box {
    overflow-x: clip !important;
  }

  /* Story row can scroll away. Chapter bar stays as the reading header. */
  body.convert-app-page .convert-page-header,
  body.convert-app-page .convert-page-header-compact {
    position: relative !important;
    top: auto !important;
    inset: auto !important;
    transform: none !important;
  }
  body.convert-app-page .reader-toolbar,
  body.convert-app-page #chapterTabBar.reader-toolbar {
    position: sticky !important;
    top: var(--er-site-header) !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 50;
  }
  body.convert-app-page > header.vz-site-header,
  body.convert-app-page > header.sticky {
    position: sticky !important;
    top: 0 !important;
  }

  /* Keyboard: do not lock the page. Overlays are pinned from JS like global chat. */
  body.convert-app-page.convert-keyboard-open {
    padding-bottom: var(--convert-kb-inset, 0px);
  }
  body.convert-app-page.convert-keyboard-open #convertAppDock,
  body.convert-app-page.convert-keyboard-open #convertStatusDock {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.convert-app-page input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  body.convert-app-page textarea,
  body.convert-app-page select {
    font-size: 16px !important;
  }
  body.convert-app-page button,
  body.convert-app-page a,
  body.convert-app-page input,
  body.convert-app-page select,
  body.convert-app-page textarea,
  body.convert-app-page [role="button"] {
    touch-action: manipulation;
  }
  body.convert-app-page .convert-app-dock.is-scroll-hidden,
  body.convert-app-page #convertAppDock.is-scroll-hidden {
    will-change: transform, opacity;
  }
  body.convert-app-page #toggleRawPanelBtn,
  body.convert-app-page #autoGlossaryToggle {
    overflow: hidden !important;
  }
  body.convert-app-page #toggleRawPanelBtn > span,
  body.convert-app-page #autoGlossaryToggle > span,
  body.convert-app-page #toggleFreeKeyPanelBtn > span {
    display: none !important;
  }
  body.convert-app-page .saved-chapter-list,
  body.convert-app-page .story-map-list,
  body.convert-app-page .replace-body,
  body.convert-app-page .convert-tools-body,
  body.convert-app-page #rawPanelCard .convert-compose-body,
  body.convert-app-page #rawPanelCard .convert-import-body,
  body.convert-app-page .tts-settings-panel {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 640px) {
  body.convert-app-page {
    --er-gutter: 10px;
    --er-dock: 50px;
    --er-read-inset: 10px;
  }

  /* Solid mobile chrome paints faster than layered backdrop blur. */
  body.convert-app-page .convert-page-header,
  body.convert-app-page .convert-page-header-compact,
  body.convert-app-page .reader-toolbar,
  body.convert-app-page #chapterTabBar.reader-toolbar,
  body.convert-app-page .convert-command-bar,
  body.convert-app-page .reader-end-nav-btn {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.convert-app-page .convert-page-header,
  body.convert-app-page .convert-page-header-compact {
    padding: 3px 8px !important;
    background: var(--er-surface, var(--er-paper)) !important;
  }

  /* Global header: allow every control to shrink without touching the logo. */
  body.convert-app-page header.vz-site-header .container > .flex {
    gap: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body.convert-app-page header.vz-site-header .container > .flex > a:first-child {
    min-width: 0 !important;
    min-height: 40px !important;
  }
  body.convert-app-page header.vz-site-header .container > .flex > a:first-child img {
    width: auto !important;
    height: 32px !important;
    max-width: 52px !important;
  }
  body.convert-app-page header.vz-site-header .container > .flex > .ml-auto {
    gap: 5px !important;
    min-width: 0 !important;
  }

  /* Story row: title consumes leftover room; action chips never force overflow. */
  body.convert-app-page .convert-header-main,
  body.convert-app-page .convert-story-map {
    gap: 6px !important;
    min-width: 0 !important;
  }
  body.convert-app-page .story-map-current {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
  }
  body.convert-app-page .story-map-actions {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 58% !important;
    overflow: hidden !important;
  }
  body.convert-app-page #convertStoryMapCurrentTitle {
    display: block !important;
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Reader toolbar: retain core controls, trim labels before buttons collide. */
  body.convert-app-page .reader-toolbar,
  body.convert-app-page #chapterTabBar.reader-toolbar {
    min-height: 36px !important;
    padding: 2px 6px !important;
    gap: 4px !important;
    overflow: visible !important;
    background: var(--er-surface, var(--er-paper)) !important;
  }
  body.convert-app-page .reader-toolbar-left,
  body.convert-app-page .reader-toolbar-right {
    min-width: 0 !important;
    gap: 3px !important;
  }
  body.convert-app-page .reader-toolbar-left { flex: 1 1 auto !important; }
  body.convert-app-page .reader-toolbar-right { flex: 0 0 auto !important; }
  body.convert-app-page .reader-tool-btn,
  body.convert-app-page .reader-chapter-chip,
  body.convert-app-page #openDictToolsBtn.reader-tool-btn,
  body.convert-app-page #openDictToolsBtn.reader-tool-label-btn {
    height: 32px !important;
    min-height: 32px !important;
  }
  body.convert-app-page .reader-tool-btn {
    width: 32px !important;
    min-width: 32px !important;
  }
  body.convert-app-page .reader-chapter-chip {
    width: auto !important;
    min-width: 48px !important;
    padding: 0 6px !important;
  }
  body.convert-app-page #openDictToolsBtn.reader-tool-btn,
  body.convert-app-page #openDictToolsBtn.reader-tool-label-btn {
    width: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
  }

  /* Dock uses full available width. Utility labels stay accessible via aria-label. */
  body.convert-app-page .convert-app-dock,
  body.convert-app-page #convertAppDock {
    padding: 0 4px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    background: linear-gradient(180deg, transparent 0%, var(--er-paper) 42%) !important;
  }
  body.convert-app-page .convert-app-dock-inner {
    width: fit-content !important;
    max-width: calc(100vw - 8px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  body.convert-app-page .convert-command-bar {
    width: fit-content !important;
    max-width: calc(100vw - 8px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    padding: 3px !important;
    overflow: hidden !important;
    background: var(--er-surface, var(--er-paper)) !important;
    box-shadow: 0 4px 18px -12px rgba(28, 25, 23, .4) !important;
  }
  body.convert-app-page #toggleRawPanelBtn,
  body.convert-app-page #autoGlossaryToggle,
  body.convert-app-page #clearConvertBtn,
  body.convert-app-page #theme-toggle,
  body.convert-app-page #theme-toggle.convert-theme-toggle {
    flex: 0 0 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  body.convert-app-page #toggleRawPanelBtn > span,
  body.convert-app-page #autoGlossaryToggle > span,
  body.convert-app-page #toggleFreeKeyPanelBtn > span {
    display: none !important;
  }
  body.convert-app-page #translateModelToggle,
  body.convert-app-page .model-toggle-btn#translateModelToggle {
    flex: 1 1 72px !important;
    width: auto !important;
    min-width: 56px !important;
    max-width: 110px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 6px !important;
    overflow: hidden !important;
  }
  body.convert-app-page #translateModelLabel {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.convert-app-page #runTranslateBtn,
  body.convert-app-page #runConvertBtn {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 7px !important;
    overflow: hidden !important;
  }
  body.convert-app-page #runTranslateBtn {
    min-width: 0 !important;
    max-width: none !important;
  }
  body.convert-app-page #runConvertBtn {
    min-width: 0 !important;
    max-width: none !important;
  }
  body.convert-app-page #runTranslateBtn .convert-action-label,
  body.convert-app-page #runConvertBtn .convert-action-label {
    min-width: max-content !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  body.convert-app-page #convertStatusDock.convert-status-toast {
    max-width: calc(100vw - 16px) !important;
  }

  /* Dropdowns/popovers stay onscreen and scroll internally. */
  body.convert-app-page #translateModelMenu.model-menu,
  body.convert-app-page .reader-theme-panel,
  body.convert-app-page #convertReaderThemePanel.reader-theme-panel,
  body.convert-app-page #ttsSettingsPanel.tts-settings-panel {
    max-width: calc(100vw - 12px) !important;
    max-height: min(72dvh, 560px) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Tủ Truyện stays a dropdown under the toggle. Only the list scrolls. */
  body.convert-app-page #convertStoryMapMenu.story-map-menu {
    max-width: calc(100vw - 16px) !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
  }
  body.convert-app-page #convertStoryMapSearch {
    font-size: 16px !important;
  }
  body.convert-app-page .tts-setting-range:has(#ttsNarrationPreset) {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px 8px !important;
    min-height: 0 !important;
  }
  body.convert-app-page #ttsNarrationPreset,
  body.convert-app-page .tts-narration-preset {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 9px !important;
    font-size: 10.5px !important;
  }

  /* Every modal gets one bounded scroll surface; footer/buttons stay visible. */
  body.convert-app-page .replace-modal:not([hidden]) {
    padding: max(6px, env(safe-area-inset-top, 0px)) 6px max(6px, env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
  }
  body.convert-app-page .replace-dialog,
  body.convert-app-page .convert-tools-dialog,
  body.convert-app-page .ai-search-dialog,
  body.convert-app-page #convertConfirmModal .replace-dialog {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px)) - max(12px, env(safe-area-inset-bottom, 0px))) !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  body.convert-app-page .replace-header {
    flex: 0 0 auto !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  body.convert-app-page .replace-title-wrap { min-width: 0 !important; gap: 8px !important; }
  body.convert-app-page .replace-title-wrap > div:last-child { min-width: 0 !important; }
  body.convert-app-page .replace-title-wrap h3 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.convert-app-page .replace-title-wrap p {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }
  body.convert-app-page .replace-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }
  body.convert-app-page .replace-close,
  body.convert-app-page .chapter-shelf-close,
  body.convert-app-page .btn-header-icon {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  body.convert-app-page .replace-body,
  body.convert-app-page .convert-tools-body,
  body.convert-app-page .ai-search-modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
    padding: 10px 12px !important;
  }
  body.convert-app-page .replace-footer {
    flex: 0 0 auto !important;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 6px !important;
  }
  body.convert-app-page .replace-footer button {
    max-width: 100% !important;
    min-height: 38px !important;
    padding: 0 14px !important;
  }

  /* Compose/import: fit dynamic viewport and keep tabs/actions compact. */
  body.convert-app-page .convert-simple-root.is-raw-modal-open #rawPanelCard,
  body.convert-raw-modal-open .input-card#rawPanelCard,
  body.convert-app-page.convert-raw-modal-open #rawPanelCard {
    top: max(4px, env(safe-area-inset-top, 0px)) !important;
    right: 4px !important;
    bottom: calc(var(--er-dock) + 5px + env(safe-area-inset-bottom, 0px)) !important;
    left: 4px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 14px !important;
  }
  body.convert-app-page #rawPanelCard > .card-header {
    min-height: 46px !important;
    padding: 7px 10px !important;
  }
  body.convert-app-page #rawPanelCard .convert-compose-tabs {
    width: auto !important;
    margin: 0 8px 7px !important;
    overflow: hidden !important;
  }
  body.convert-app-page #rawPanelCard .convert-import-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 0 4px !important;
    overflow: hidden !important;
  }
  body.convert-app-page #rawPanelCard .convert-import-tab span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.convert-app-page #rawPanelCard .convert-import-url-label-row,
  body.convert-app-page #rawPanelCard .convert-reader-config-head,
  body.convert-app-page #rawPanelCard .convert-reader-actions {
    flex-wrap: wrap !important;
  }
  body.convert-app-page #rawPanelCard .convert-import-rate,
  body.convert-app-page #rawPanelCard #convertImportPrice,
  body.convert-app-page #rawPanelCard .convert-import-price {
    margin-left: 0 !important;
    max-width: 100% !important;
  }

  /* Full-height chapter drawer, compact rows and pager. */
  body.convert-app-page .chapter-shelf,
  body.convert-app-page .chapter-toc-panel,
  body.convert-app-page #chapterShelf {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    box-shadow: none !important;
    transition: transform .16s ease-out !important;
  }
  body.convert-app-page .chapter-shelf-head,
  body.convert-app-page .chapter-toc-head {
    padding: max(8px, env(safe-area-inset-top, 0px)) 10px 8px !important;
  }
  body.convert-app-page #chapterShelfCount,
  body.convert-app-page .chapter-toc-kicker {
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    font-size: 11px !important;
  }
  body.convert-app-page .chapter-toc-current,
  body.convert-app-page #chapterShelfSub {
    display: none !important;
  }
  body.convert-app-page .chapter-shelf-tools {
    padding: 8px 10px 6px !important;
  }
  body.convert-app-page .chapter-search-box {
    min-height: 34px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--er-surface) 88%, var(--er-ink) 4%) !important;
    border-color: var(--er-line) !important;
    box-shadow: none !important;
  }
  body.convert-app-page .chapter-search-box input,
  body.convert-app-page .chapter-search-box #chapterSearchInput {
    height: 36px !important;
    font-size: 16px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.convert-app-page .saved-chapter-list,
  body.convert-app-page .chapter-toc-content {
    padding: 2px 8px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  body.convert-app-page .story-map-list {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  /* Link/button rows keep the 3-col title layout. The outer
     .chapter-list-row wrapper must stay 2-col (link + retry), or
     grid-column:1 squeezes the whole link into the 30px index track. */
  body.convert-app-page .saved-chapter-list .chapter-list-link,
  body.convert-app-page .saved-chapter-list > .saved-chapter-item:not(.chapter-list-row) {
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    min-height: 40px !important;
    gap: 6px !important;
    padding: 6px 8px !important;
  }
  body.convert-app-page .saved-chapter-item.chapter-list-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 40px !important;
    gap: 4px !important;
    padding: 0 !important;
  }
  body.convert-app-page .saved-chapter-item.chapter-list-row .chapter-list-link {
    grid-column: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  body.convert-app-page .saved-chapter-item strong,
  body.convert-app-page .saved-chapter-list strong {
    font-size: 13px !important;
  }
  body.convert-app-page .saved-chapter-status {
    max-width: 3.6rem !important;
    padding: 2px 6px !important;
    font-size: 9.5px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.convert-app-page .saved-chapter-list .saved-chapter-retry {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin-right: 0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    background: var(--er-surface-2, var(--er-paper-soft)) !important;
  }
  body.convert-app-page .chapter-shelf-pager {
    max-width: 100% !important;
    overflow: hidden !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Empty state buttons use available width without becoming oversized. */
  body.convert-app-page .convert-empty-actions {
    width: min(100%, 34rem) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  body.convert-app-page .convert-empty-cta {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 7px 6px !important;
  }

  /* Auto settings: denser cards, body scrolls if keyboard/small screen reduces height. */
  body.convert-app-page #autoGlossaryInfoModal.auto-glossary-info-modal:not([hidden]) {
    padding: max(6px, env(safe-area-inset-top, 0px)) 6px max(6px, env(safe-area-inset-bottom, 0px)) !important;
  }
  body.convert-app-page #autoGlossaryInfoModal .auto-glossary-info-dialog {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  }
  body.convert-app-page #autoGlossaryInfoModal .auto-glossary-info-body {
    overflow: auto !important;
    padding: 7px 10px 10px !important;
  }
  body.convert-app-page .auto-mode-card { padding: 10px !important; gap: 9px !important; }
  body.convert-app-page .auto-mode-card-with-option { padding: 0 !important; gap: 0 !important; }
  body.convert-app-page .auto-mode-main { padding: 10px !important; gap: 9px !important; }
  body.convert-app-page .auto-mode-suboption { margin: 0 10px !important; padding: 8px 0 9px !important; }
  body.convert-app-page .auto-mode-start-chapter { flex-wrap: wrap !important; }
  body.convert-app-page .auto-mode-copy small { line-height: 1.36 !important; }
}

@media (max-width: 380px) {
  body.convert-app-page {
    --er-gutter: 8px;
    --er-dock: 48px;
    --er-read-inset: 8px;
  }

  /* Convert page already open: keep header Dịch label visible; only tighten chrome. */
  body.convert-app-page header.vz-site-header .container > .flex {
    gap: 4px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  body.convert-app-page header.vz-site-header .vz-header-translate {
    width: auto !important;
    min-width: 0 !important;
    height: 1.5rem !important;
    min-height: 0 !important;
    padding: 0 0.35rem !important;
    font-size: 0.625rem !important;
    overflow: visible !important;
  }
  body.convert-app-page header.vz-site-header .vz-header-translate-label {
    display: inline !important;
  }
  body.convert-app-page header.vz-site-header .vz-header-chip {
    height: 1.5rem !important;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    font-size: 0.625rem !important;
  }

  body.convert-app-page #openDictToolsBtn .reader-tool-label {
    display: none !important;
  }
  body.convert-app-page #openDictToolsBtn.reader-tool-btn,
  body.convert-app-page #openDictToolsBtn.reader-tool-label-btn {
    width: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
  }

  body.convert-app-page .convert-command-bar { gap: 2px !important; padding: 2px !important; }
  body.convert-app-page #toggleRawPanelBtn,
  body.convert-app-page #autoGlossaryToggle,
  body.convert-app-page #clearConvertBtn,
  body.convert-app-page #theme-toggle,
  body.convert-app-page #theme-toggle.convert-theme-toggle {
    flex-basis: 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
  body.convert-app-page #translateModelToggle,
  body.convert-app-page .model-toggle-btn#translateModelToggle {
    flex-basis: 52px !important;
    min-width: 44px !important;
    max-width: 72px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 4px !important;
  }
  body.convert-app-page #runTranslateBtn {
    min-width: 0 !important;
    max-width: none !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
  }
  body.convert-app-page #runConvertBtn {
    min-width: 0 !important;
    max-width: none !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 6px !important;
    font-size: 10.5px !important;
  }
  body.convert-app-page .model-chevron {
    display: none !important;
  }
  body.convert-app-page #runTranslateBtn .convert-action-icon,
  body.convert-app-page #runConvertBtn .convert-action-icon {
    display: none !important;
  }
  body.convert-app-page .convert-empty-state,
  body.convert-app-page #convertEmptyState {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

@media (max-width: 340px) {
  body.convert-app-page #runTranslateBtn,
  body.convert-app-page #runConvertBtn {
    gap: 0 !important;
  }
  body.convert-app-page .replace-title-wrap p {
    display: none !important;
  }
}

@media (max-width: 900px) and (max-height: 500px) {
  body.convert-app-page .convert-empty-state,
  body.convert-app-page #convertEmptyState {
    gap: 3px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  body.convert-app-page .convert-empty-icon {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    border: 0 !important;
  }
  body.convert-app-page .convert-empty-state strong {
    font-size: .96rem !important;
  }
  body.convert-app-page .convert-empty-state p {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }
  /* Same actions already exist in toolbar/dock; remove duplicate row so dock
     cannot cover it on short landscape phones. */
  body.convert-app-page .convert-empty-actions {
    display: none !important;
  }
}

/* Model picker: split paid and free models into clear category tabs. */
body.convert-app-page #translateModelMenu .model-menu-tabs {
  position: sticky;
  top: -6px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: -6px -6px 6px;
  padding: 6px 6px 7px;
  border-bottom: 1px solid var(--er-line);
  background: var(--er-paper);
  background: color-mix(in srgb, var(--er-paper) 96%, var(--er-paper-soft));
}

body.convert-app-page #translateModelMenu .model-menu-tab {
  appearance: none;
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--er-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

body.convert-app-page #translateModelMenu .model-menu-tab:hover {
  background: var(--er-paper-soft);
  color: var(--er-ink);
}

body.convert-app-page #translateModelMenu .model-menu-tab.is-active[data-model-menu-tab="paid"],
body.convert-app-page #translateModelMenu .model-menu-tab.is-active[data-model-menu-tab="free"] {
  border-color: color-mix(in srgb, var(--er-gold) 34%, var(--er-line-strong));
  background: var(--er-gold-soft);
  color: var(--er-gold-ink);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--er-gold) 32%, transparent);
}

body.convert-app-page #translateModelMenu .model-menu-tab:focus-visible {
  outline: 2px solid var(--er-gold);
  outline-offset: 1px;
}

body.convert-app-page #translateModelMenu .model-menu-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: var(--er-radius-pill);
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

body.convert-app-page #translateModelMenu .model-menu-panel {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.convert-app-page #translateModelMenu .model-menu-panel[hidden] {
  display: none !important;
}

body.convert-app-page #translateModelMenu[data-active-model-tab="free"] .model-menu-item:hover,
body.convert-app-page #translateModelMenu[data-active-model-tab="free"] .model-menu-item.is-active {
  background: var(--er-gold-soft);
  color: var(--er-gold-ink);
}

body.convert-app-page #translateModelMenu[data-active-model-tab="free"] .model-menu-item.is-active .model-option-check {
  border-color: var(--er-gold);
  background: var(--er-gold);
}

body.convert-app-page #translateModelMenu .model-menu-empty {
  margin: 3px 2px;
  padding: 18px 10px;
  border: 1px dashed var(--er-line-strong);
  border-radius: 10px;
  color: var(--er-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

html[data-reader-theme="night"] body.convert-app-page #translateModelMenu .model-menu-tab.is-active[data-model-menu-tab="free"],
body.convert-app-page.dark #translateModelMenu .model-menu-tab.is-active[data-model-menu-tab="free"],
html[data-reader-theme="night"] body.convert-app-page #translateModelMenu[data-active-model-tab="free"] .model-menu-item:hover,
html[data-reader-theme="night"] body.convert-app-page #translateModelMenu[data-active-model-tab="free"] .model-menu-item.is-active,
body.convert-app-page.dark #translateModelMenu[data-active-model-tab="free"] .model-menu-item:hover,
body.convert-app-page.dark #translateModelMenu[data-active-model-tab="free"] .model-menu-item.is-active {
  border-color: color-mix(in srgb, var(--er-gold) 34%, var(--er-line-strong));
  background: var(--er-gold-soft);
  color: var(--er-gold-ink);
}

/* Keep key state compact: icon by name, quota limit in green. */
body.convert-app-page #translateModelMenu .model-option-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body.convert-app-page #translateModelMenu .model-option-key-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  color: var(--er-muted);
}

body.convert-app-page #translateModelMenu .model-option-key-icon svg {
  width: 12px;
  height: 12px;
}

body.convert-app-page #translateModelMenu .model-menu-item.is-active .model-option-key-icon {
  color: currentColor;
}

body.convert-app-page #translateModelMenu .model-option-cost.is-limit {
  color: #059669 !important;
}

html[data-reader-theme="night"] body.convert-app-page #translateModelMenu .model-option-cost.is-limit,
body.convert-app-page.dark #translateModelMenu .model-option-cost.is-limit {
  color: #34d399 !important;
}

/* === MOBILE DOCK COMPACT + TOUCH FLOORS ===
   Phone dock must fit 7 controls (incl. Gemini + Dịch + Convert) without clipping.
   Icon chips ~30px; primary labels stay readable. Chapter-list keeps a 40px floor. */
@media (max-width: 900px) {
  body.convert-app-page {
    --er-dock: 54px;
  }
  /* Match Kim Thánh Bảng / Dịch chip size on convert mobile header. */
  body.convert-app-page header.vz-site-header .vz-mobile-menu-toggle,
  body.convert-app-page header.vz-site-header .vz-mobile-global-chat,
  body.convert-app-page header.vz-site-header .vz-mobile-header-notif button,
  body.convert-app-page header.vz-site-header .vz-header-ranking {
    width: 1.5rem !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  body.convert-app-page header.vz-site-header .vz-mobile-linh-thach {
    width: auto !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    min-height: 0 !important;
    padding: 0 0.35rem !important;
    font-size: 0.625rem !important;
  }
  body.convert-app-page header.vz-site-header .vz-header-translate {
    width: auto !important;
    min-width: 0 !important;
    height: 1.5rem !important;
    min-height: 0 !important;
    padding: 0 0.4rem !important;
    font-size: 0.625rem !important;
    overflow: visible !important;
  }
  body.convert-app-page header.vz-site-header .vz-header-translate-label {
    display: inline !important;
  }
  body.convert-app-page header.vz-site-header .vz-mobile-menu-toggle svg,
  body.convert-app-page header.vz-site-header .vz-mobile-global-chat svg,
  body.convert-app-page header.vz-site-header .vz-mobile-header-notif button svg,
  body.convert-app-page header.vz-site-header .vz-header-ranking svg {
    width: 0.9rem !important;
    height: 0.9rem !important;
  }
  body.convert-app-page #chapterListToggle,
  body.convert-app-page .reader-tool-btn#chapterListToggle {
    min-width: 40px !important;
    min-height: 40px !important;
    width: 40px !important;
    height: 40px !important;
  }
  body.convert-app-page #rawPanelCard .convert-import-tab {
    min-height: 40px !important;
  }
}

@media (max-width: 640px) {
  body.convert-app-page {
    --er-dock: 48px;
  }
  body.convert-app-page .convert-command-bar {
    gap: 2px !important;
    padding: 2px !important;
    min-height: 0 !important;
  }
  body.convert-app-page #toggleRawPanelBtn,
  body.convert-app-page #autoGlossaryToggle,
  body.convert-app-page #clearConvertBtn,
  body.convert-app-page #theme-toggle,
  body.convert-app-page #theme-toggle.convert-theme-toggle {
    flex: 0 0 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }
  body.convert-app-page #theme-toggle::before,
  body.convert-app-page #theme-toggle.convert-theme-toggle::before {
    width: 14px !important;
    height: 14px !important;
  }
  body.convert-app-page #toggleFreeKeyPanelBtn,
  body.convert-app-page .key-config-btn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 8px !important;
  }
  body.convert-app-page #translateModelToggle,
  body.convert-app-page .model-toggle-btn#translateModelToggle {
    flex: 1 1 72px !important;
    width: auto !important;
    min-width: 56px !important;
    max-width: 110px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
  }
  body.convert-app-page #runTranslateBtn,
  body.convert-app-page #runConvertBtn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }
  body.convert-app-page #runTranslateBtn .convert-action-icon,
  body.convert-app-page #runConvertBtn .convert-action-icon {
    width: 12px !important;
    height: 12px !important;
  }
}

@media (max-width: 420px) {
  body.convert-app-page {
    --er-dock: 46px;
  }
  body.convert-app-page #toggleRawPanelBtn,
  body.convert-app-page #autoGlossaryToggle,
  body.convert-app-page #clearConvertBtn,
  body.convert-app-page #theme-toggle,
  body.convert-app-page #theme-toggle.convert-theme-toggle {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
  }
  body.convert-app-page #translateModelToggle,
  body.convert-app-page .model-toggle-btn#translateModelToggle {
    min-width: 52px !important;
    max-width: 96px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 5px !important;
    font-size: 10.5px !important;
  }
  body.convert-app-page #runTranslateBtn,
  body.convert-app-page #runConvertBtn {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 6px !important;
    font-size: 10.5px !important;
  }
  body.convert-app-page .model-chevron {
    width: 10px !important;
    height: 10px !important;
  }
}

@media (max-width: 380px) {
  body.convert-app-page {
    --er-dock: 44px;
  }
  body.convert-app-page #toggleRawPanelBtn,
  body.convert-app-page #autoGlossaryToggle,
  body.convert-app-page #clearConvertBtn,
  body.convert-app-page #theme-toggle,
  body.convert-app-page #theme-toggle.convert-theme-toggle {
    flex-basis: 26px !important;
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 28px !important;
    min-height: 28px !important;
  }
  /* Keep site-header chips compact; always show full "Dịch". */
  body.convert-app-page header.vz-site-header .vz-header-translate {
    width: auto !important;
    min-height: 0 !important;
    height: 1.5rem !important;
  }
  body.convert-app-page header.vz-site-header .vz-header-translate-label {
    display: inline !important;
  }
}

/* TTS highlight lock: theme tokens beat raw-line padding:0 and night color overrides */
body.convert-app-page .reader-content p.tts-active-p,
body.convert-app-page #convertReaderContent.reader-content p.tts-active-p,
html[data-reader-theme] body.convert-app-page #convertReaderContent.reader-content p.tts-active-p,
body.convert-app-page #convertReaderContent[data-layout="raw-lines"] > p[data-raw-line].tts-active-p,
html[data-reader-theme="night"] body.convert-app-page .reader-content p.tts-active-p,
body.dark.convert-app-page .reader-content p.tts-active-p {
  background: var(--er-tts-mark, color-mix(in srgb, var(--er-gold) 20%, transparent)) !important;
  box-shadow: 0 0 0 3px var(--er-tts-ring, color-mix(in srgb, var(--er-gold) 12%, transparent)) !important;
  border-radius: 8px !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  margin-left: -6px !important;
  margin-right: -6px !important;
}

/* Contextual first-open help (quest + coachmark). Not a blocking product tour. */
html.convert-help-welcome-seen body.convert-app-page .convert-help-quest {
  display: none !important;
}
body.convert-app-page .convert-help-quest {
  width: min(100%, 22rem);
  margin-top: 10px;
  padding: 10px 12px 12px;
  border: 1px solid var(--er-line-strong);
  border-radius: 12px;
  background: color-mix(in srgb, var(--er-surface) 88%, var(--er-gold-soft));
  text-align: left;
  pointer-events: auto;
}
body.convert-app-page .convert-help-quest strong {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--er-ink);
}
body.convert-app-page .convert-help-quest ol {
  margin: 0;
  padding: 0 0 0 1.15rem;
  color: var(--er-ink);
  font-size: 12.5px;
  line-height: 1.45;
}
body.convert-app-page .convert-help-quest li + li {
  margin-top: 4px;
}
body.convert-app-page .convert-help-quest-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
body.convert-app-page .convert-help-replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: var(--er-radius-pill, 999px);
  border: 1px solid var(--er-line-strong);
  background: color-mix(in srgb, var(--er-paper-soft) 72%, var(--er-mix-light));
  color: var(--er-ink);
}
body.convert-app-page .convert-help-replay:hover {
  background: color-mix(in srgb, var(--er-gold-soft) 70%, var(--er-paper));
}
body.convert-app-page .convert-help-host {
  position: relative;
  overflow: visible;
}
body.convert-app-page .convert-help-tip {
  position: fixed;
  z-index: 100452;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--er-line-strong);
  border-radius: 999px;
  background: var(--er-surface);
  color: var(--er-gold-ink);
  line-height: 1;
}
body.convert-app-page .convert-help-scrim {
  position: fixed;
  inset: 0;
  z-index: 100528;
  border: 0;
  padding: 0;
  margin: 0;
  background: color-mix(in srgb, #000 42%, transparent);
}
body.convert-app-page .convert-help-scrim[hidden] {
  display: none !important;
}
body.convert-app-page.convert-help-hint .convert-help-scrim {
  display: none !important;
}
body.convert-app-page.convert-help-open .convert-help-tip,
body.convert-app-page.convert-help-hint .convert-help-tip {
  visibility: hidden !important;
}
body.convert-app-page .convert-help-spot {
  position: fixed;
  z-index: 100529;
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--er-gold);
  pointer-events: none;
}
body.convert-app-page.convert-help-open .convert-help-spot {
  box-shadow: 0 0 0 2px var(--er-gold), 0 0 0 9999px color-mix(in srgb, #000 28%, transparent);
}
body.convert-app-page .convert-help-card {
  position: fixed;
  z-index: 100531;
  width: min(24rem, calc(100vw - 20px));
  max-height: min(78vh, 560px);
  overflow: auto;
  padding: 12px 12px 10px;
  border: 1px solid var(--er-line-strong);
  border-radius: 14px;
  background: var(--er-surface);
  color: var(--er-ink);
  box-shadow: var(--er-shadow-lg, 0 18px 40px -24px rgba(0, 0, 0, .45));
}
body.convert-app-page .convert-help-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
body.convert-app-page .convert-help-card-head strong {
  font-size: 14px;
  font-weight: 850;
  line-height: 1.3;
}
body.convert-app-page .convert-help-card-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--er-muted);
  font-size: 20px;
  line-height: 1;
}
body.convert-app-page .convert-help-card-body {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--er-ink);
}
body.convert-app-page .convert-help-card-body p {
  margin: 0;
}
body.convert-app-page .convert-help-steps {
  margin: 8px 0 0;
  padding: 0 0 0 1.15rem;
  font-size: 12.5px;
  line-height: 1.45;
}
body.convert-app-page .convert-help-steps li + li {
  margin-top: 4px;
}
body.convert-app-page .convert-help-menu-group + .convert-help-menu-group {
  margin-top: 10px;
}
body.convert-app-page .convert-help-menu-label {
  display: block;
  margin: 8px 0 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--er-muted);
}
body.convert-app-page .convert-help-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}
body.convert-app-page .convert-help-menu-item {
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--er-line);
  border-radius: 10px;
  background: var(--er-paper);
  color: var(--er-ink);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}
body.convert-app-page .convert-help-card-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
body.convert-app-page .convert-help-card-ok {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--er-gold) 86%, #000);
  color: #1c1917;
  font-size: 12.5px;
  font-weight: 800;
}
@media (max-width: 900px) {
  body.convert-app-page .convert-help-tip {
    display: none !important;
  }
  body.convert-app-page .convert-help-replay {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    z-index: 6;
  }
  body.convert-app-page .convert-story-map {
    flex-wrap: nowrap !important;
  }
  body.convert-app-page .story-map-actions {
    max-width: calc(50% - 4px) !important;
  }
  body.convert-app-page .convert-help-card,
  body.convert-app-page .convert-help-card.is-sheet {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    max-height: min(62dvh, 420px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px 12px 10px;
    border-radius: 16px 16px 12px 12px;
  }
  body.convert-app-page.convert-help-compact .convert-help-card-body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    padding-right: 2px;
    overscroll-behavior: contain;
  }
  body.convert-app-page.convert-help-compact .convert-help-card-head,
  body.convert-app-page.convert-help-compact .convert-help-card-foot {
    flex: 0 0 auto;
  }
  body.convert-app-page.convert-help-compact .convert-help-card-ok {
    width: 100%;
    min-height: 44px;
  }
  body.convert-app-page.convert-help-compact .convert-help-card-foot {
    display: block;
    margin-top: 8px;
    padding-top: 8px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--er-line);
  }
  body.convert-app-page.convert-help-compact .convert-help-menu {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
  body.convert-app-page.convert-help-compact .convert-help-menu-item {
    min-height: 42px;
  }
  body.convert-app-page.convert-help-compact .convert-help-steps li + li {
    margin-top: 3px;
  }
  body.convert-app-page .convert-help-more {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--er-muted);
  }
  body.convert-app-page.convert-help-compact .convert-help-spot {
    display: none !important;
  }
  body.convert-app-page .convert-help-quest {
    width: 100%;
    max-width: 22rem;
  }
  body.convert-app-page .convert-help-quest-actions .convert-empty-cta {
    min-height: 44px;
  }
}
@media (max-width: 900px) and (max-height: 500px) {
  body.convert-app-page .convert-help-quest ol {
    display: none;
  }
  body.convert-app-page .convert-help-quest {
    margin-top: 6px;
    padding: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.convert-app-page .convert-help-card,
  body.convert-app-page .convert-help-spot {
    transition: none !important;
  }
}

body.convert-app-page #convertReaderContent.reader-content {
  outline: none;
  caret-color: transparent;
  -webkit-user-modify: read-only;
  user-modify: read-only;
  touch-action: manipulation;
}
body.convert-app-page #convertReaderContent.reader-content p {
  -webkit-user-select: text;
  user-select: text;
}
body.convert-app-page.convert-reader-replace-open {
  overflow: hidden !important;
}
body.convert-app-page #readerReplaceModal.replace-modal:not([hidden]) {
  align-items: end;
}
@media (min-width: 901px) {
  body.convert-app-page #readerReplaceModal.replace-modal:not([hidden]) {
    align-items: center;
    place-items: center;
  }
}
@media (max-width: 900px) {
  body.convert-app-page #convertReaderContent.reader-content {
    touch-action: manipulation;
    -webkit-touch-callout: none;
  }
  body.convert-app-page.convert-keyboard-open #readerReplaceModal.replace-modal:not([hidden]) {
    align-items: stretch;
    padding: 8px;
  }
  body.convert-app-page.convert-keyboard-open #readerReplaceModal .replace-dialog {
    width: min(520px, calc(var(--convert-vv-width, 100vw) - 16px));
    max-height: min(var(--convert-vv-height, 78dvh), 640px);
    margin-top: auto;
  }
  body.convert-app-page #readerReplaceModal .replace-body input[type="text"] {
    font-size: 16px !important;
    min-height: 44px;
  }
}
body.convert-app-page #readerReplaceModal.replace-modal:not([hidden]) {
  z-index: var(--er-z-modal) !important;
}
body.convert-app-page #readerReplaceModal .replace-body input[type="text"] {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--er-line-strong);
  border-radius: 12px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--er-paper-soft) 84%, #fff);
  color: var(--er-ink);
  margin-bottom: 10px;
  outline: none;
  box-shadow: none;
}
body.convert-app-page #readerReplaceModal .replace-body input[type="text"]:focus {
  border-color: color-mix(in srgb, var(--er-gold) 55%, var(--er-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-gold) 14%, transparent);
}
body.convert-app-page #readerReplaceModal .replace-preview,
body.convert-app-page #readerReplacePreview {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--er-muted);
}
body.convert-app-page .reader-replace-scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 4px;
}
body.convert-app-page .reader-replace-scope-btn {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--er-line);
  border-radius: 10px;
  background: var(--er-paper);
  color: var(--er-ink);
  font-size: 12px;
  font-weight: 800;
}
body.convert-app-page .reader-replace-scope-btn.is-active {
  border-color: var(--er-line-strong);
  background: color-mix(in srgb, var(--er-gold-soft) 70%, var(--er-paper));
}
@media (max-width: 900px) {
  body.convert-app-page #readerReplaceModal .replace-dialog {
    width: min(520px, calc(100vw - 16px));
    max-height: min(78dvh, 640px);
  }
  body.convert-app-page .reader-replace-scope-btn,
  body.convert-app-page #applyReaderReplaceBtn,
  body.convert-app-page #cancelReaderReplaceBtn {
    min-height: 44px;
  }
}