:root {
  --bg: #f5f6f8;
  --panel: #fafbfc;
  --paper: #ffffff;
  --ink: #1d2735;
  --muted: #718096;
  --line: #e2e7ed;
  --soft: #f2f4f7;
  --accent: #2563c7;
  --accent-soft: #eaf1fc;
  --success: #3b8a6e;
  --danger: #c95762;
  --shadow: 0 18px 44px rgba(35, 49, 69, .14);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #101722;
  --panel: #151e2b;
  --paper: #182331;
  --ink: #e8edf3;
  --muted: #9ba8b8;
  --line: #2b3949;
  --soft: #202d3c;
  --accent: #78a7ef;
  --accent-soft: #203958;
  --success: #64b699;
  --danger: #e27d87;
  --shadow: 0 18px 44px rgba(0, 0, 0, .34);
  color-scheme: dark;
}

:root[data-accent="teal"] { --accent: #287d78; --accent-soft: #e5f1ef; }
:root[data-accent="violet"] { --accent: #6e5a9e; --accent-soft: #eeeaf7; }
:root[data-accent="amber"] { --accent: #a56b28; --accent-soft: #f5ede2; }
:root[data-accent="rose"] { --accent: #a65568; --accent-soft: #f7e9ed; }
:root[data-theme="dark"][data-accent="teal"] { --accent: #66b8b0; --accent-soft: #1d3b3b; }
:root[data-theme="dark"][data-accent="violet"] { --accent: #a998d1; --accent-soft: #322b49; }
:root[data-theme="dark"][data-accent="amber"] { --accent: #d7a45f; --accent-soft: #42331f; }
:root[data-theme="dark"][data-accent="rose"] { --accent: #d58a9b; --accent-soft: #422b34; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: var(--bg); color: var(--ink); font: 16px/1.5 Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.visually-hidden { position: fixed !important; left: -10000px !important; width: 1px !important; height: 1px !important; }

/* Main frame */
.app-shell {
  --agent-width: 320px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  width: 100%;
  height: 100vh;
  min-height: 600px;
  background: var(--paper);
  transition: grid-template-columns .2s ease;
}
.app-shell.agent-open { grid-template-columns: 260px minmax(0, 1fr) var(--agent-width); }
.app-shell.library-collapsed { grid-template-columns: 56px minmax(0, 1fr); }
.app-shell.library-collapsed.agent-open { grid-template-columns: 56px minmax(0, 1fr) var(--agent-width); }

/* Library */
.library-panel {
  position: relative;
  min-width: 0;
  padding: 22px 16px 72px;
  overflow: hidden;
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.brand-home, .brand-name { padding: 0; border: 0; background: transparent; }
.brand-home { flex: 0 0 auto; width: 38px; height: 38px; }
.brand-home img { width: 100%; height: 100%; object-fit: contain; }
.brand-name { min-width: 0; text-align: left; }
.brand-name strong, .brand-name span { display: block; }
.brand-name strong { font-size: 18px; letter-spacing: -.02em; }
.brand-name span { margin-top: 1px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-toggle { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted); font-size: 18px; }
.sidebar-toggle:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.library-toggle { margin-left: auto; }
.search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px; border: 1px solid var(--line); background: var(--paper); color: var(--muted); }
.search > span { font-size: 20px; }
.search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 14px; }
.search kbd { padding: 2px 5px; border: 1px solid var(--line); font: 10px ui-monospace, monospace; }
.import-button { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 42px; margin: 10px 0 24px; border: 0; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; }
.import-button:hover { filter: brightness(.95); }
.import-button b { font-size: 18px; }
.vocabulary-entry { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; min-height: 54px; margin: -14px 0 22px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); text-align: left; }
.vocabulary-entry:hover, .vocabulary-entry.active { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); color: var(--accent); }
.vocabulary-entry-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font: 750 13px/1 Georgia, serif; }
.vocabulary-entry-copy { min-width: 0; }
.vocabulary-entry-copy b, .vocabulary-entry-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vocabulary-entry-copy b { font-size: 13px; }
.vocabulary-entry-copy small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.vocabulary-entry > strong { min-width: 22px; padding: 3px 5px; border-radius: 10px; background: var(--soft); color: var(--muted); font-size: 10px; text-align: center; }
.collection-label { display: flex; justify-content: space-between; margin: 0 4px 10px; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.library-list { display: grid; gap: 4px; max-height: calc(100vh - 350px); overflow: auto; scrollbar-width: thin; }
.library-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; padding: 8px; border: 0; border-radius: 6px; background: transparent; text-align: left; }
.library-item:hover { background: var(--soft); }
.library-item > span:nth-child(2) { min-width: 0; }
.library-item strong, .library-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-item strong { margin-bottom: 3px; font-size: 13px; }
.library-item small { color: var(--muted); font-size: 11px; }
.file-chip { display: grid; place-items: center; width: 36px; height: 40px; border-radius: 5px; background: #6679b8; color: #fff; font-size: 10px; font-weight: 800; }
.file-chip.pdf { background: #b7676f; }
.file-chip.epub { background: #4d927a; }
.file-chip.md { background: #aa7b48; }
.delete-doc { display: grid; place-items: center; width: 32px; height: 32px; color: var(--muted); font-size: 16px; opacity: 0; }
.library-item:hover .delete-doc, .delete-doc:focus-visible { opacity: 1; }
.library-collapsed .library-panel { padding: 18px 8px 70px; }
.library-collapsed .brand { flex-direction: column; gap: 10px; }
.library-collapsed .brand-name, .library-collapsed .search, .library-collapsed .import-button, .library-collapsed .collection-label, .library-collapsed .library-list { display: none; }
.library-collapsed .library-toggle { margin-left: 0; }
.library-collapsed .vocabulary-entry { display: grid; grid-template-columns: 1fr; width: 40px; height: 40px; min-height: 40px; margin: 14px 0 0; padding: 0; border-color: var(--line); place-items: center; }
.library-collapsed .vocabulary-entry-icon { width: 38px; height: 38px; background: transparent; }
.library-collapsed .vocabulary-entry-copy, .library-collapsed .vocabulary-entry > strong { display: none; }
.global-settings { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: flex; align-items: center; gap: 9px; width: calc(100% - 32px); height: 42px; padding: 0 10px; border: 1px solid transparent; background: var(--panel); color: var(--muted); font-size: 13px; text-align: left; }
.global-settings:hover { border-color: var(--line); background: var(--soft); color: var(--accent); }
.global-settings > span:first-child { font-size: 17px; }
.library-collapsed .global-settings { left: 8px; width: 40px; justify-content: center; padding: 0; }
.library-collapsed .global-settings > span:last-child { display: none; }

/* Center content */
.reader-panel { display: flex; min-width: 0; min-height: 0; flex-direction: column; background: var(--paper); }
.reader-scroll { min-height: 0; flex: 1; overflow: auto; scrollbar-color: var(--line) transparent; scrollbar-width: thin; }
.reading-mode .reader-scroll { overflow: hidden; }
.library-home { padding: 42px clamp(28px, 5vw, 72px) 80px; }
.vocabulary-home { min-height: 100%; padding: 46px clamp(28px, 5vw, 76px) 80px; }
.vocabulary-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.vocabulary-header h1 { margin: 8px 0 7px; font: 600 clamp(32px, 4vw, 48px)/1.08 Georgia, "Songti SC", serif; letter-spacing: -.035em; }
.vocabulary-header p { max-width: 680px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.vocabulary-actions { display: flex; flex: 0 1 430px; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.vocabulary-actions button { display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 14px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.vocabulary-actions button.secondary { border-color: var(--line); background: transparent; color: var(--muted); }
.vocabulary-actions button:disabled { cursor: default; opacity: .38; }
.vocabulary-summary { display: flex; justify-content: space-between; gap: 20px; margin: 26px 0 14px; color: var(--muted); font-size: 12px; }
.vocabulary-summary b { color: var(--ink); font-size: 18px; }
.vocabulary-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 12px; }
.vocabulary-card { display: flex; min-width: 0; min-height: 198px; flex-direction: column; padding: 19px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.vocabulary-word { position: relative; display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 5px 9px; padding-right: 44px; }
.vocabulary-word strong { max-width: 100%; word-break: normal; overflow-wrap: normal; hyphens: none; font: 600 23px/1.2 Georgia, serif; }
.vocabulary-word span { min-width: 0; max-width: 100%; color: var(--accent); font-size: 11px; overflow-wrap: break-word; }
.vocabulary-speak { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 34px; height: 34px; margin: -5px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--accent); }
.vocabulary-speak:hover, .vocabulary-speak.is-speaking { border-color: var(--accent); background: var(--accent-soft); }
.vocabulary-speak.is-speaking { animation: pulse .7s infinite alternate; }
.vocabulary-speak svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vocabulary-card > p { margin: 10px 0; color: var(--ink); font-size: 14px; line-height: 1.55; }
.vocabulary-card blockquote { margin: 4px 0 16px; padding-left: 11px; border-left: 2px solid var(--accent); color: var(--muted); font: 12px/1.55 Georgia, serif; }
.vocabulary-card blockquote b { display: block; margin-bottom: 3px; color: var(--accent); font: 700 9px/1.3 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.vocabulary-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; color: var(--muted); font-size: 10px; }
.vocabulary-card footer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vocabulary-card footer button { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 17px; }
.vocabulary-card footer button:hover { background: var(--danger); color: #fff; }
.vocabulary-empty { display: grid; max-width: 500px; margin: 80px auto; place-items: center; color: var(--muted); text-align: center; }
.vocabulary-empty > span { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 16px; background: var(--accent-soft); color: var(--accent); font: 700 22px Georgia, serif; }
.vocabulary-empty h2 { margin: 18px 0 5px; color: var(--ink); font: 600 22px Georgia, serif; }
.vocabulary-empty p { margin: 0; font-size: 13px; line-height: 1.65; }
.quiz-panel { margin: 24px 0 30px; padding: 20px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--accent-soft) 40%, var(--paper)); }
.quiz-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.quiz-panel > header div { display: flex; align-items: center; gap: 7px; color: var(--accent); }
.quiz-panel > header p { margin: 0; color: var(--muted); font-size: 11px; }
.quiz-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 10px; }
.quiz-card { padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.quiz-type { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.quiz-card h3 { margin: 8px 0 5px; font: 600 15px/1.5 Georgia, serif; }
.quiz-card > small { color: var(--muted); font-size: 10px; }
.quiz-answer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; margin-top: 13px; }
.quiz-answer input { min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; outline: none; background: var(--panel); color: var(--ink); font-size: 13px; }
.quiz-answer input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.quiz-answer button { padding: 0 11px; border: 0; border-radius: 7px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }
.quiz-result { display: grid; gap: 3px; margin: 10px 0 0; padding: 9px; border-radius: 6px; background: var(--soft); font-size: 11px; }
.quiz-result b { color: var(--accent); }
.quiz-card.is-correct { border-color: #4b9a72; }
.quiz-loading { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 90px; color: var(--muted); }
.quiz-loading span { color: var(--accent); animation: pulse 1s infinite alternate; }
.quiz-error { margin: 0; color: var(--danger); }
.library-hero { display: flex; min-height: 168px; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; border-bottom: 3px solid var(--accent); background: var(--soft); }
.library-hero img { flex: 0 0 auto; width: 96px; height: 96px; object-fit: contain; }
.hero-kicker { color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.library-hero h1 { margin: 10px 0 8px; font: 600 clamp(29px, 3.4vw, 43px)/1.15 Georgia, "Songti SC", serif; letter-spacing: -.035em; }
.library-hero p { margin: 0; color: var(--muted); font-size: 14px; }
.drop-zone { display: flex; width: 100%; min-height: 112px; margin: 22px 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px dashed #aeb9c7; background: var(--paper); }
.drop-zone:hover, .drop-zone.dragging { border-color: var(--accent); background: var(--accent-soft); }
.upload-orb { color: var(--accent); font-size: 20px; }
.drop-zone strong { font-size: 14px; }
.drop-zone small { color: var(--muted); font-size: 12px; }
.library-heading { margin: 26px 0 12px; }
.library-heading h2 { margin: 0; font-size: 18px; }
.document-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.document-card { position: relative; min-width: 0; padding: 15px; border: 1px solid var(--line); background: var(--paper); text-align: left; }
.document-card:hover { border-color: var(--accent); }
.document-card .file-chip { margin-bottom: 15px; }
.document-card strong, .document-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-card strong { margin-bottom: 6px; font-size: 14px; }
.document-card small { color: var(--muted); font-size: 11px; }
.remove-recent { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--soft); color: var(--muted); font-size: 16px; opacity: 0; }
.document-card:hover .remove-recent, .remove-recent:focus-visible { opacity: 1; }
.remove-recent:hover { background: var(--danger); color: #fff; }
.empty-library { grid-column: 1 / -1; padding: 28px; border: 1px dashed var(--line); color: var(--muted); font-size: 12px; text-align: center; }

/* Reader */
.reading-document { width: min(1180px, calc(100% - 48px)); height: 100%; min-height: 0; margin: 0 auto; padding: 22px 0 18px; }
.reading-mode .reading-document { display: flex; flex-direction: column; }
.eyebrow { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; letter-spacing: .1em; }
.eyebrow span { color: var(--accent); font-weight: 750; }
.reading-document > h1 { margin: 16px 0 8px; font: 600 clamp(30px, 3.2vw, 44px)/1.1 Georgia, "Songti SC", serif; letter-spacing: -.035em; }
.document-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; color: var(--muted); font-size: 12px; }
.document-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.document-toolbar .document-meta { margin-bottom: 0; padding-top: 9px; }
.reader-agent-button { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); box-shadow: 0 5px 16px rgba(35,49,69,.08); }
.reader-agent-button span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 6px; background: var(--accent); color: #fff; }
.reader-agent-button span svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reader-agent-button b { font-size: 12px; font-weight: 650; }
.reader-agent-button:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.reader-actions, .tts-controls { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.reader-tts-button.is-speaking span { background: var(--danger); }
.reader-tts-button.is-picking { border-color: var(--accent); background: var(--accent); color: #fff; }
.reading-document.tts-picking #epubStage { outline: 2px solid var(--accent); outline-offset: -2px; }
.epub-tts-prompt { position: absolute; top: 50%; left: 50%; z-index: 12; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 20px; transform: translate(-50%,-50%); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--ink) 92%, transparent); color: var(--paper); box-shadow: 0 12px 36px rgba(0,0,0,.28); font-size: 15px; pointer-events: none; backdrop-filter: blur(12px); }
.epub-tts-prompt span { font-size: 21px; }
.epub-tts-prompt strong { white-space: nowrap; }
.tts-stop { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--muted); }
.tts-stop span { width: 11px; height: 11px; border-radius: 2px; background: currentColor; }
.tts-stop:hover { border-color: var(--danger); color: var(--danger); }
.reader-preferences { display: flex; align-items: end; gap: 12px; margin: 0 0 12px; padding: 9px 12px; border: 1px solid var(--line); background: var(--panel); }
.view-label { align-self: center; margin-right: auto; color: var(--muted); font-size: 12px; font-weight: 700; }
.reader-preferences label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.reader-preferences select { min-width: 92px; height: 34px; padding: 0 8px; border: 1px solid var(--line); background: var(--paper); font-size: 12px; }
.reader-font { grid-template-columns: 112px 30px; align-items: center; }
.reader-font span { grid-column: 1 / -1; }
.reader-font input { width: 112px; accent-color: var(--accent); }
.reader-font output { color: var(--ink); font-size: 12px; }
.page-mode { display: flex; }
.page-mode button { height: 34px; padding: 0 10px; border: 1px solid var(--line); background: var(--paper); font-size: 11px; }
.page-mode button + button { border-left: 0; }
.page-mode button.active { border-color: var(--accent); background: var(--accent); color: #fff; }
#readingView { min-height: 0; padding: clamp(16px, 2vw, 28px); overflow: auto; background: var(--reader-bg, transparent); transition: background .18s, color .18s; scrollbar-width: thin; }
.reading-mode #readingView { display: flex; flex: 1; flex-direction: column; }
.reading-document[data-reader-background="paper"] #readingView { --reader-bg: var(--paper); }
.reading-document[data-reader-background="warm"] #readingView { --reader-bg: #f7f0df; }
.reading-document[data-reader-background="sage"] #readingView { --reader-bg: #eaf2eb; }
.reading-document[data-reader-background="night"] #readingView { --reader-bg: #182331; }
.reading-document[data-reader-text="ink"] #readingView { color: var(--ink); }
.reading-document[data-reader-text="soft"] #readingView { color: var(--muted); }
.reading-document[data-reader-text="light"] #readingView { color: #e8edf3; }
.reading-document[data-reader-text="auto"][data-reader-background="night"] #readingView { color: #e8edf3; }
:root[data-theme="dark"] .reading-document[data-reader-background="warm"] #readingView { --reader-bg: #2b2924; }
:root[data-theme="dark"] .reading-document[data-reader-background="sage"] #readingView { --reader-bg: #21302b; }
:root[data-theme="dark"] .reading-document[data-reader-background="night"] #readingView { --reader-bg: #0f1722; }
.prose { width: min(920px, 100%); margin: 0 auto; font: 21px/1.9 Georgia, "Songti SC", serif; letter-spacing: .008em; }
.prose p { margin: 0 0 1.5em; }
.prose p:first-child:first-letter { float: left; margin: .13em .12em 0 0; color: currentColor; font-size: 3.25em; font-weight: 600; line-height: .78; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { margin: 1.5em 0 .6em; font-family: Inter, "PingFang SC", sans-serif; line-height: 1.35; letter-spacing: -.02em; }
.prose h1 { font-size: 1.65em; }
.prose h2 { font-size: 1.35em; }
.prose h3 { font-size: 1.15em; }
.prose h4 { font-size: 1.05em; }
.prose h5 { font-size: .95em; }
.prose h6 { color: var(--muted); font-size: .86em; letter-spacing: .02em; text-transform: uppercase; }
.prose li { margin: .4em 0; }
.prose code { padding: .1em .3em; background: var(--soft); font-family: ui-monospace, monospace; }
.prose pre { max-width: 100%; padding: 16px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); font: 13px/1.65 ui-monospace, monospace; }
.prose pre code { padding: 0; background: transparent; }
.prose blockquote { margin: 1.3em 0; padding: .2em 1em; border-left: 3px solid var(--line); color: var(--muted); }
.prose img, .message-body img { display: block; max-width: 100%; height: auto; margin: 1.2em auto; border-radius: 6px; }
.prose del, .message-body del { color: var(--muted); }
.markdown-table-wrap { max-width: 100%; margin: 1.4em 0; overflow-x: auto; }
.markdown-table-wrap table { width: 100%; border-collapse: collapse; font-family: Inter, "PingFang SC", sans-serif; font-size: .78em; line-height: 1.55; }
.markdown-table-wrap th, .markdown-table-wrap td { min-width: 90px; padding: 9px 11px; border: 1px solid var(--line); vertical-align: top; }
.markdown-table-wrap th { background: var(--soft); font-weight: 700; }
.task-list-item { list-style: none; }
.task-list-item input { width: 1em; height: 1em; margin: 0 .45em 0 -1.4em; accent-color: var(--accent); }
.file-viewer { flex: 1; height: auto; min-height: 360px; overflow: hidden; border: 1px solid var(--line); background: var(--soft); }
.file-viewer iframe { width: 100%; height: 100%; min-height: 360px; border: 0; }
.epub-stage { width: 100%; height: 100%; min-height: 360px; }
.viewer-nav { display: flex; align-items: center; justify-content: center; gap: 4px; height: 44px; margin-top: 4px; }
.viewer-nav button { width: 38px; height: 38px; border: 0; background: transparent; }
.viewer-nav > span { color: var(--muted); font-size: 12px; }

/* AI panel */
.agent-panel {
  position: relative;
  display: none;
  flex-direction: column;
  width: auto;
  min-width: 0;
  min-height: 0;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: none;
  transform: none;
}
.app-shell.agent-open .agent-panel { display: flex; }
.agent-resizer { position: absolute; top: 0; bottom: 0; left: -4px; z-index: 8; width: 8px; cursor: col-resize; }
.agent-resizer:hover, .resizing-agent .agent-resizer { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.resizing-agent { cursor: col-resize; user-select: none; }
.agent-close { position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 8px; background: var(--soft); color: var(--muted); font-size: 20px; }
.chat-toolbar { display: flex; flex: 0 0 58px; align-items: center; gap: 6px; padding: 10px 58px 8px 14px; border-bottom: 1px solid var(--line); }
.chat-toolbar button { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--muted); font-size: 11px; }
.chat-toolbar button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-toolbar button:hover { border-color: var(--accent); color: var(--accent); }
.chat-toolbar button:disabled { cursor: default; opacity: .38; }
.chat-toolbar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chat-scroll { position: relative; display: flex; min-height: 0; flex: 1; flex-direction: column; padding: 12px 10px 0 14px; overflow: hidden; }
.agent-message { display: flex; align-items: flex-start; gap: 8px; }
.agent-message.hidden { display: none; }
.mini-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 25px; height: 25px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); }
.agent-message p, .message p { margin: 0; padding: 11px 12px; border-radius: 2px 9px 9px; background: var(--soft); font: 14px/1.6 Georgia, serif; white-space: pre-wrap; }
.quick-actions { display: grid; gap: 7px; margin: 15px 0 24px 33px; }
.quick-actions button { display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); background: var(--paper); font-size: 12px; text-align: left; }
.quick-actions button span { display: grid; place-items: center; width: 19px; height: 19px; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.quick-actions b { font-weight: 600; }
.agent-tools-toggle { display: flex; flex: 0 0 40px; align-items: center; gap: 8px; width: 100%; height: 40px; margin-top: 9px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 700; text-align: left; }
.agent-tools-toggle svg { flex: 0 0 auto; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.agent-tools-toggle .tools-menu-icon { width: 17px; height: 17px; stroke: var(--accent); stroke-width: 1.8; }
.agent-tools-toggle b { min-width: 20px; margin-left: auto; padding: 2px 5px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 9px; text-align: center; }
.agent-tools-toggle .tools-chevron { width: 19px; height: 19px; stroke: var(--muted); stroke-width: 1.8; transition: transform .18s ease, stroke .18s ease; }
.agent-tools-toggle[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); color: var(--accent); }
.agent-tools-toggle[aria-expanded="true"] .tools-chevron { stroke: var(--accent); transform: rotate(180deg); }
.reading-tools { position: absolute; top: 118px; right: 10px; left: 14px; z-index: 6; display: none; max-height: calc(100% - 130px); margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 14px 32px rgba(10,18,32,.18); overflow-y: auto; overscroll-behavior: contain; }
.chat-scroll.has-conversation .reading-tools { top: 58px; max-height: calc(100% - 70px); }
.reading-tools.is-open { display: grid; }
#messages { min-height: 0; flex: 1 1 auto; margin-top: 8px; padding-right: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.recommended-actions, .additional-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.additional-actions { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.reading-tools button { display: grid; grid-template-columns: 30px minmax(0, 1fr); min-height: 58px; align-items: center; column-gap: 10px; padding: 9px 11px; }
.reading-tools button.recommended-action { position: relative; padding-right: 38px; }
.reading-tools button.recommended-action::after { content: attr(data-step); position: absolute; top: 9px; right: 9px; display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 9px/1 Inter, sans-serif; }
.reading-tools button > span { grid-row: 1 / 3; width: 30px; height: 30px; }
.reading-tools button > span svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reading-tools button > .abc-icon { font: 750 8px/1 Inter, sans-serif; letter-spacing: -.03em; }
.reading-tools button > .ipa-icon { font: 750 8px/1 Inter, sans-serif; letter-spacing: -.02em; }
.reading-tools button b, .reading-tools button small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reading-tools button b { font-size: 13px; font-weight: 650; }
.reading-tools button small { display: block; color: var(--muted); font-size: 11px; }
.reading-tools button:disabled { cursor: not-allowed; opacity: .42; }
.reading-tools button:disabled:hover { border-color: var(--line); }
.message { display: flex; margin: 11px 0; }
.conversation-turn { display: flex; min-width: 0; flex-direction: column; margin-bottom: 8px; padding: 2px 0 11px; border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.delete-turn { display: flex; align-items: center; align-self: flex-end; gap: 5px; width: auto; min-height: 30px; margin-top: -2px; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line)); border-radius: 7px; background: color-mix(in srgb, var(--danger) 7%, var(--paper)); color: color-mix(in srgb, var(--danger) 78%, var(--ink)); font-size: 10px; font-weight: 650; opacity: .86; }
.delete-turn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.delete-turn:hover, .delete-turn:focus-visible { border-color: var(--danger); background: var(--danger); color: #fff; opacity: 1; }
.chat-busy .chat-toolbar, .chat-busy .delete-turn { pointer-events: none; opacity: .45; }
.message.user { justify-content: flex-end; }
.message.user p { max-width: 88%; border-radius: 9px 2px 9px 9px; background: var(--accent); color: #fff; }
.message.pending p { color: var(--muted); animation: pulse 1s infinite alternate; }
.message.assistant { display: block; }
.message-body { padding: 12px 13px; border-radius: 2px 9px 9px; background: var(--soft); font: 14px/1.68 Georgia, "Songti SC", serif; overflow-wrap: anywhere; }
.message-body > :first-child { margin-top: 0; }
.message-body > :last-child { margin-bottom: 0; }
.message-body p { margin: .65em 0; padding: 0; border-radius: 0; background: transparent; font: inherit; }
.vocabulary-message > p:first-child { color: var(--muted); font-family: Inter, "PingFang SC", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.extracted-words { display: grid; gap: 7px; margin-top: 10px; }
.extracted-word { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 9px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.extracted-word > div { display: flex; min-width: 0; align-items: baseline; gap: 7px; }
.extracted-word strong { overflow-wrap: anywhere; font: 600 16px/1.3 Georgia, serif; }
.extracted-word > div span { color: var(--accent); font-size: 9px; }
.extracted-word p, .extracted-word small { grid-column: 1; margin: 0; }
.extracted-word p { color: var(--ink); font-size: 12px; }
.extracted-word small { overflow: hidden; color: var(--muted); font: 10px/1.45 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.extracted-word button { grid-column: 2; grid-row: 1 / 4; align-self: center; min-width: 50px; height: 32px; padding: 0 8px; border: 1px solid var(--accent); border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 700; }
.extracted-word button:disabled { border-color: var(--line); background: var(--soft); color: var(--muted); opacity: .65; }
.save-all-vocabulary { width: 100%; height: 36px; margin-top: 8px; border: 0; border-radius: 7px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }
.reading-tools button:focus-visible { outline: none; border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 55%, var(--paper)); }
@media (hover: hover) {
  .reading-tools button:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 55%, var(--paper)); }
}
.reading-tools button > .word-icon { font: 750 9px/1 Inter, sans-serif; letter-spacing: -.04em; }
.message-body h1, .message-body h2, .message-body h3, .message-body h4, .message-body h5, .message-body h6 { margin: 1em 0 .45em; font-family: Inter, "PingFang SC", sans-serif; line-height: 1.3; }
.message-body pre { max-width: 100%; padding: 10px; overflow: auto; border-radius: 6px; background: var(--paper); font: 11px/1.55 ui-monospace, monospace; }
.message-body h1 { font-size: 1.25em; }.message-body h2 { font-size: 1.15em; }.message-body h3 { font-size: 1.05em; }
.message-body ul, .message-body ol { margin: .55em 0; padding-left: 1.35em; }
.message-body li { margin: .3em 0; }
.message-body blockquote { margin: .7em 0; padding: .15em 0 .15em .8em; border-left: 3px solid var(--accent); color: var(--muted); }
.message-body pre { max-width: 100%; padding: 10px; overflow: auto; background: var(--paper); font: 12px/1.55 ui-monospace, monospace; }
.message-body code { padding: .08em .3em; background: var(--paper); font-family: ui-monospace, monospace; }
.message-body a { color: var(--accent); text-underline-offset: 2px; }
.message-body hr { border: 0; border-top: 1px solid var(--line); }
.composer { display: grid; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) 34px; margin: 0 13px 13px; padding: 7px 7px 5px; border: 1px solid var(--line); background: var(--paper); }
.composer input { min-width: 0; padding: 0 6px; border: 0; outline: 0; background: transparent; font-size: 13px; }
.composer button { width: 33px; height: 33px; border: 0; background: var(--accent); color: #fff; }
.composer small { grid-column: 1 / -1; padding-top: 4px; color: var(--muted); font-size: 9px; text-align: center; }
.composer.is-busy { pointer-events: none; opacity: .65; }
.floating-library { display: none; position: fixed; left: 14px; top: 14px; z-index: 22; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); font-size: 18px; }
.floating-agent { display: none; position: fixed; right: 18px; bottom: 18px; z-index: 22; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: var(--shadow); font-size: 18px; }

/* Settings */
.scrim { position: fixed; inset: 0; z-index: 30; display: flex; justify-content: flex-end; background: rgba(16, 23, 34, .42); }
.settings-sheet { width: min(440px, 100%); height: 100%; padding: 30px; overflow: auto; background: var(--panel); box-shadow: var(--shadow); }
.settings-sheet > header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.settings-sheet > header span { color: var(--accent); font-size: 9px; letter-spacing: .14em; }
.settings-sheet h2 { margin: 6px 0 0; font-size: 30px; }
.settings-sheet > header button { width: 36px; height: 36px; border: 0; background: var(--soft); font-size: 20px; }
.setting-group { margin-bottom: 25px; }
.setting-group > label, .api-heading label { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.settings-sheet .setting-group > .setting-title { display: block; margin: 0 0 9px; color: var(--ink); font-family: Inter, "PingFang SC", sans-serif; font-size: 13px; font-weight: 700; line-height: normal; letter-spacing: .1em; text-transform: uppercase; }
.segmented, .theme-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.segmented button, .theme-options button { height: 40px; border: 1px solid var(--line); background: var(--paper); font-size: 12px; }
.segmented button.active, .theme-options button.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.setting-group p { color: var(--muted); font-size: 11px; line-height: 1.55; }
.color-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.color-options button { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 10px; border: 1px solid var(--line); background: var(--paper); font-size: 11px; text-align: left; }
.color-options button i { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.color-options button.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.api-settings { padding-top: 22px; border-top: 1px solid var(--line); }
.api-settings.api-attention { position: relative; border-radius: 8px; outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent); outline-offset: 8px; animation: api-attention 1.25s ease-in-out 5; }
@keyframes api-attention { 0%, 100% { background: transparent; box-shadow: 0 0 0 0 transparent; } 50% { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 12%, transparent); } }
.api-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.api-heading label { margin: 0; }
.field-label, .api-grid label span { display: block !important; margin: 0 0 6px !important; color: var(--muted); font-size: 10px !important; }
.password-field { display: grid; grid-template-columns: minmax(0, 1fr) 40px; margin-bottom: 10px; }
.password-field input, .api-grid input, .api-grid select { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--line); outline: 0; background: var(--paper); font-size: 11px; }
.password-field button { border: 1px solid var(--line); border-left: 0; background: var(--soft); }
.api-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 7px; }
.security-note { padding: 8px 9px; border-left: 2px solid var(--line); }
.api-actions { display: flex; justify-content: flex-end; gap: 6px; }
.api-actions button { height: 35px; padding: 0 12px; border: 1px solid var(--line); background: var(--paper); font-size: 11px; }
.api-actions #saveApi { border-color: var(--accent); background: var(--accent); color: #fff; }
.api-result.error { color: var(--danger); }
.api-result.success { color: var(--success); }
.reset-button { width: 100%; height: 40px; border: 1px solid var(--danger); background: transparent; color: var(--danger); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; padding: 10px 15px; transform: translateX(-50%); background: var(--ink); color: var(--paper); box-shadow: var(--shadow); font-size: 11px; }
.toast.guidance { top: 50%; bottom: auto; z-index: 120; width: min(440px, calc(100vw - 36px)); padding: 17px 20px; border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent); border-radius: 11px; transform: translate(-50%, -50%); background: color-mix(in srgb, var(--ink) 94%, var(--accent)); color: #fff; box-shadow: 0 18px 55px rgba(0,0,0,.28); font-size: 14px; font-weight: 650; line-height: 1.55; text-align: center; }
:root[data-theme="dark"] .toast.guidance { border-color: color-mix(in srgb, var(--accent) 58%, var(--line)); background: color-mix(in srgb, var(--paper) 88%, var(--accent-soft)); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.06); }
:root[data-theme="dark"] .api-settings.api-attention { outline-color: color-mix(in srgb, var(--accent) 88%, transparent); }

@keyframes pulse { to { opacity: .45; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Comfortable global type scale */
body { font-size: 17px; }
.brand-name strong { font-size: 19px; }
.brand-name span, .library-item small, .document-card small, .drop-zone small, .empty-library { font-size: 12px; }
.search input, .library-item strong, .import-button, .global-settings, .library-hero p, .document-card strong { font-size: 14px; }
.collection-label, .hero-kicker, .eyebrow, .document-meta, .view-label, .reader-agent-button b, .quick-actions button, .viewer-nav span { font-size: 12px; }
.drop-zone strong, .agent-identity strong { font-size: 15px; }
.library-heading h2 { font-size: 19px; }
.agent-message p, .message p { font-size: 15px; }
.composer input { font-size: 14px; }
.composer small { font-size: 10px; }
.setting-group > label, .api-heading label { font-size: 13px; }
.segmented button, .theme-options button { font-size: 13px; }
.setting-group p, .password-field input, .api-grid input, .api-grid select, .api-actions button, .color-options button { font-size: 12px; }

/* Drawer mode: one unambiguous rule set */
@media (max-width: 1280px) {
  .app-shell, .app-shell.agent-open { grid-template-columns: 248px minmax(0, 1fr); }
  .app-shell.library-collapsed, .app-shell.library-collapsed.agent-open { grid-template-columns: 56px minmax(0, 1fr); }
  .agent-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 24;
    display: flex;
    flex-direction: column;
    width: min(var(--agent-width), calc(100vw - 40px));
    transform: translateX(102%);
    box-shadow: var(--shadow);
    transition: transform .2s ease;
  }
  .app-shell.agent-open .agent-panel { transform: none; }
  .agent-resizer { display: none; }
  .agent-close { display: block; }
  .floating-agent { display: block; }
}

@media (max-width: 820px) {
  html, body { overflow: auto; }
  .app-shell, .app-shell.agent-collapsed, .app-shell.library-collapsed, .app-shell.library-collapsed.agent-collapsed { display: block; min-height: 100vh; height: auto; }
  .library-panel, .library-collapsed .library-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 24;
    display: block;
    width: min(280px, calc(100vw - 44px));
    padding: 22px 16px 72px;
    transform: translateX(-102%);
    box-shadow: var(--shadow);
    transition: transform .2s ease;
  }
  .app-shell.library-open .library-panel { transform: none; }
  .library-collapsed .brand { flex-direction: row; gap: 10px; }
  .library-collapsed .brand-name { display: block; }
  .library-collapsed .search { display: flex; }
  .library-collapsed .import-button { display: flex; }
  .library-collapsed .collection-label { display: flex; }
  .library-collapsed .library-list { display: grid; }
  .library-collapsed .library-toggle { margin-left: auto; }
  .floating-library { display: block; }
  .reader-panel { min-height: 100vh; }
  .reader-scroll { overflow: visible; }
  .global-settings, .library-collapsed .global-settings { left: 14px; width: 44px; justify-content: center; padding: 0; border-color: var(--line); background: var(--paper); box-shadow: var(--shadow); }
  .global-settings > span:last-child { display: none; }
  .library-home { padding: 24px 16px 72px; }
  .library-hero { min-height: 145px; padding: 22px; }
  .library-hero img { width: 76px; height: 76px; }
  .reading-document { width: calc(100% - 32px); height: auto; padding: 34px 0 72px; }
  .reading-mode #readingView { display: block; overflow: visible; }
  .reading-document > h1 { font-size: 35px; }
  .document-toolbar { align-items: stretch; flex-direction: column; }
  .reader-agent-button { align-self: center; }
  .reader-preferences { align-items: stretch; flex-wrap: wrap; }
  .view-label { width: 100%; margin: 0; }
  .reader-font { flex: 1; }
  .page-mode { align-self: end; }
  .file-viewer, .file-viewer iframe, .epub-stage { min-height: 500px; }
}

@media (max-width: 500px) {
  .library-hero img { display: none; }
  .document-grid { grid-template-columns: 1fr; }
  .api-grid, .color-options { grid-template-columns: 1fr; }
  .quick-actions { margin-left: 0; }
  .settings-sheet { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}

/* API sign-in gate */
.api-login { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 28px; overflow: auto; background: radial-gradient(circle at 18% 12%, var(--accent-soft), transparent 34%), var(--bg); }
.api-login-card { width: min(520px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); }
.api-login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 36px; }
.api-login-brand img { width: 48px; height: 48px; object-fit: contain; }
.api-login-brand div { display: grid; line-height: 1.15; }
.api-login-brand strong { font-size: 18px; }
.api-login-brand span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.api-login-copy > span { color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.api-login-copy h1 { margin: 10px 0 9px; font: 650 clamp(29px, 5vw, 38px)/1.12 Georgia, "Songti SC", serif; letter-spacing: -.035em; }
.api-login-copy p { margin: 0 0 26px; color: var(--muted); font-size: 14px; }
.api-login form > label, .api-login-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 650; }
.login-password { display: grid; grid-template-columns: minmax(0, 1fr) 46px; }
.login-password input, .api-login-grid input, .api-login-grid select { width: 100%; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--line); outline: 0; background: var(--paper); font-size: 14px; }
.login-password input:focus, .api-login-grid input:focus, .api-login-grid select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-password button { border: 1px solid var(--line); border-left: 0; background: var(--soft); }
.api-login-grid { display: grid; grid-template-columns: .9fr 1.35fr; gap: 10px; margin-top: 14px; }
.api-login-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; margin-top: 20px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 700; }
.api-login-submit b { font-size: 20px; }
.api-login-submit:disabled { cursor: wait; opacity: .65; }
.api-login-result { min-height: 20px; margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.api-login-result.error { color: var(--danger); }
.api-login-card > small { display: block; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.55; }
.api-required { overflow: hidden; }

.drawer-backdrop { display: none; position: fixed; inset: 0; z-index: 23; padding: 0; border: 0; background: rgba(16, 23, 34, .28); cursor: default; }

/* Compact immersive reader and dashboard */
.library-home { max-width: 1480px; margin: 0 auto; }
.dashboard { margin: 26px 0 32px; }
.dashboard-heading { margin-bottom: 12px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stat-grid article { min-width: 0; padding: 16px 18px; border: 1px solid var(--line); background: var(--panel); }
.stat-grid span { display: block; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.stat-grid strong { font: 650 27px/1 Georgia, "Songti SC", serif; }
.dashboard-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.dashboard-panel { min-width: 0; padding: 17px 18px; border: 1px solid var(--line); background: var(--paper); }
.dashboard-panel h3 { margin: 0 0 12px; font-size: 14px; }
.progress-row, .log-row { display: flex; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.progress-row:last-child, .log-row:last-child { border-bottom: 0; }
.progress-row { flex-direction: column; gap: 7px; }
.progress-row > span, .log-row { align-items: center; justify-content: space-between; gap: 12px; }
.progress-row > span { display: flex; }
.progress-row b, .log-row span { min-width: 0; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.progress-row small, .log-row time { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.progress-row > i { height: 3px; overflow: hidden; background: var(--soft); }
.progress-row > i > em { display: block; height: 100%; background: var(--accent); }
.dashboard-empty { margin: 4px 0; color: var(--muted); font-size: 12px; }
.format-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) 28px; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--line); }
.format-row:last-child { border-bottom: 0; }
.format-row .file-chip { width: 38px; height: 28px; font-size: 9px; }
.format-row > i { height: 5px; overflow: hidden; border-radius: 3px; background: var(--soft); }
.format-row > i > em { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.format-row > b { color: var(--muted); font-size: 12px; text-align: right; }

.reading-document { width: 100%; max-width: none; padding: 0; }
.reader-header { display: flex; flex: 0 0 66px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(18px, 2.4vw, 38px); border-bottom: 1px solid var(--line); background: var(--panel); }
.reader-identity { min-width: 0; }
.reader-identity h1 { max-width: min(68vw, 920px); margin: 0 0 3px; overflow: hidden; font: 650 18px/1.25 Inter, "PingFang SC", sans-serif; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.reader-header .document-meta { margin: 0; gap: 6px; font-size: 11px; }
.reader-header .reader-agent-button { height: 40px; box-shadow: none; }
#readingView { position: relative; padding: clamp(22px, 3vw, 48px); }
#readingView:has(.file-viewer:not(.hidden)) { display: grid; grid-template-rows: minmax(0,1fr) auto; padding: 0; overflow: hidden; }
.prose { width: min(980px, 100%); }
.file-viewer { position: relative; width: 100%; min-height: 0; border: 0; }
.file-viewer iframe { min-height: 0; }
.epub-stage { position: absolute; inset: 0; min-height: 0; overflow: hidden; background: var(--paper); }
.pdf-document { position: relative; width: 100%; height: 100%; padding: 20px max(14px, calc((100% - 1040px) / 2)); overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; background: var(--soft); scrollbar-width: thin; }
.pdf-pages { min-width: max-content; transform-origin: center top; }
.pdf-pages.is-pinching { will-change: transform; }
.pdf-page { position: relative; margin: 0 auto 18px; overflow: hidden; background: #fff; box-shadow: 0 3px 18px rgba(20,32,48,.14); }
.pdf-page canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pdf-page .textLayer { z-index: 2; opacity: 1; user-select: text; -webkit-user-select: text; }
.pdf-page .textLayer ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.pdf-page-number { position: absolute; right: 8px; bottom: 6px; z-index: 3; padding: 2px 6px; border-radius: 8px; background: rgba(20,32,48,.66); color: #fff; font: 10px/1.4 Inter, sans-serif; pointer-events: none; }
.pdf-page.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.pdf-toolbar { position: absolute; top: 12px; right: 14px; z-index: 6; display: flex; align-items: center; gap: 3px; min-height: 42px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--paper) 94%, transparent); box-shadow: 0 5px 18px rgba(20,32,48,.14); backdrop-filter: blur(10px); }
.pdf-toolbar button { min-width: 36px; height: 34px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font-size: 18px; }
.pdf-toolbar button:hover { background: var(--soft); }
.pdf-toolbar button:disabled { opacity: .35; }
.pdf-toolbar .pdf-zoom-value { min-width: 58px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.toolbar-divider { width: 1px; height: 22px; margin: 0 3px; background: var(--line); }
.page-jump { display: flex; align-items: center; gap: 5px; margin: 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.page-jump input { width: 52px; height: 34px; padding: 0 5px; border: 1px solid var(--line); border-radius: 7px; outline: none; background: var(--paper); color: var(--ink); font: 600 13px/1 Inter, sans-serif; text-align: center; appearance: textfield; }
.page-jump input::-webkit-inner-spin-button, .page-jump input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.page-jump input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.page-jump b { min-width: 20px; color: var(--muted); font-size: 12px; font-weight: 600; }
.page-jump button, .pdf-toolbar .page-jump button { width: auto; min-width: 40px; height: 34px; padding: 0 9px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; }
.page-jump button:disabled, .page-jump input:disabled { cursor: wait; opacity: .48; }
.viewer-nav { position: relative; right: auto; bottom: auto; z-index: 4; justify-self: center; height: 46px; margin: 7px auto; padding: 3px 5px; transform: none; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); box-shadow: 0 3px 12px rgba(20,32,48,.09); transition: opacity .15s ease; }
.viewer-nav button { border: 0; border-radius: 50%; color: var(--ink); }
.viewer-nav button:hover { background: var(--soft); }
.viewer-nav button:active { background: color-mix(in srgb, var(--accent) 14%, var(--soft)); transform: scale(.94); }
.viewer-nav button span { display: block; margin-top: -3px; font: 31px/1 Georgia, serif; }
.viewer-nav .page-jump { padding: 0 4px; }
.viewer-nav .page-jump button { border-radius: 7px; }
.viewer-nav.is-turning { opacity: .6; pointer-events: none; }

.settings-sheet .reader-preferences { display: block; margin: 0 0 25px; padding: 22px 0; border-width: 1px 0; background: transparent; }
.reader-setting-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reader-setting-grid label, .settings-sheet .reader-font { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.reader-setting-grid select { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--line); background: var(--paper); }
.settings-sheet .reader-font { grid-template-columns: minmax(0, 1fr) 34px; margin-top: 14px; }
.settings-sheet .reader-font span { grid-column: 1 / -1; }
.settings-sheet .reader-font input { width: 100%; }
.settings-sheet .page-mode { margin-top: 14px; }
.settings-sheet .page-mode button { flex: 1; height: 40px; }
.epub-layout-setting { display: grid; gap: 7px; margin-top: 14px; color: var(--muted); font-size: 11px; }
.settings-sheet .epub-layout-setting .page-mode { margin-top: 0; }

@media (max-width: 1280px) {
  .app-shell.agent-open .drawer-backdrop { display: block; }
}

@media (max-width: 820px) {
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  .app-shell, .app-shell.agent-collapsed, .app-shell.library-collapsed, .app-shell.library-collapsed.agent-collapsed { height: 100dvh; min-height: 0; overflow: hidden; }
  .reader-panel { height: 100dvh; min-height: 0; }
  .reader-scroll { height: 100%; overflow: auto; }
  .reading-mode .reader-scroll { overflow: hidden; }
  .reading-document { width: 100%; height: 100%; padding: 0; }
  .reader-header { flex-basis: 64px; padding: 0 10px 0 66px; }
  .reader-identity h1 { max-width: calc(100vw - 192px); font-size: 16px; }
  .reader-header .document-meta { font-size: 10px; }
  .floating-library { top: 10px; }
  .reader-header .reader-agent-button { align-self: center; width: 48px; height: 44px !important; justify-content: center; padding: 0; }
  .reader-agent-button b { display: none; }
  .reader-agent-button span { width: 28px; height: 28px; }
  .reader-actions, .tts-controls { gap: 4px; }
  .tts-stop { width: 44px; height: 44px; }
  .reader-header:has(.tts-stop:not(.hidden)) .reader-identity h1 { max-width: calc(100vw - 242px); }
  .reading-mode #readingView { display: flex; overflow: auto; padding: 22px 18px 34px; }
  .reading-mode #readingView:has(.file-viewer:not(.hidden)) { display: grid; grid-template-rows: minmax(0,1fr) auto; padding: 0; overflow: hidden; }
  .pdf-document { padding: 10px 6px; }
  .pdf-page { margin-bottom: 10px; box-shadow: 0 2px 10px rgba(20,32,48,.12); }
  .pdf-toolbar { top: 8px; right: 8px; max-width: calc(100% - 16px); }
  .pdf-toolbar .toolbar-divider { display: none; }
  .pdf-toolbar .pdf-zoom-value { min-width: 48px; }
  .page-jump input { width: 48px; }
  .file-viewer, .file-viewer iframe, .epub-stage { min-height: 0; }
  .viewer-nav { margin-bottom: max(7px, env(safe-area-inset-bottom)); }
  .viewer-nav button { width: 48px; height: 40px; }
  .library-home { padding-top: 74px; }
  .vocabulary-home { padding: 78px 18px calc(48px + env(safe-area-inset-bottom)); }
  .vocabulary-header { display: block; }
  .vocabulary-header h1 { font-size: 34px; }
  .vocabulary-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; }
  .vocabulary-actions button { justify-content: center; }
  .vocabulary-summary { align-items: flex-end; }
  .vocabulary-summary > span:last-child { max-width: 52%; text-align: right; }
  .vocabulary-list { grid-template-columns: 1fr; }
  .quiz-panel { padding: 14px; }
  .quiz-panel > header { display: block; }
  .quiz-panel > header p { margin-top: 6px; }
  .quiz-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-columns { grid-template-columns: 1fr; }
  .stat-grid article { padding: 14px; }
  .stat-grid strong { font-size: 24px; }
  .progress-row, .log-row { min-height: 46px; }
  .settings-sheet { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
  .global-settings, .library-collapsed .global-settings { left: 16px; width: calc(100% - 32px); justify-content: flex-start; padding: 0 10px; border-color: transparent; background: var(--panel); box-shadow: none; }
  .global-settings > span:last-child, .library-collapsed .global-settings > span:last-child { display: inline; }
  .api-login { align-items: start; padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); }
  .api-login-card { margin: auto 0; padding: 26px 22px; border-radius: 14px; }
  .api-login-brand { margin-bottom: 28px; }
  .app-shell.library-open .drawer-backdrop { display: block; }
}

@media (max-width: 500px) {
  .reader-setting-grid { grid-template-columns: 1fr; }
  .library-hero { padding: 20px; }
  .api-login-grid { grid-template-columns: 1fr; }
  .toast.guidance { top: 50%; width: calc(100vw - max(28px, env(safe-area-inset-left) + env(safe-area-inset-right) + 20px)); max-height: calc(100dvh - max(40px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 24px)); padding: 16px 17px; overflow: auto; border-radius: 13px; font-size: 13px; line-height: 1.55; }
  .api-settings.api-attention { outline-width: 2px; outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .api-settings.api-attention { animation: none; background: color-mix(in srgb, var(--accent-soft) 58%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
}

/* Touch and coarse-pointer ergonomics */
@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
  button, [data-delete-id], [data-remove-recent], [data-remove-vocabulary] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .delete-doc, .remove-recent { opacity: 1; }
  .library-item { min-height: 56px; padding: 8px 6px 8px 10px; }
  .delete-doc { width: 38px; height: 38px; margin: -3px 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 17px; }
  .remove-recent { top: 10px; right: 10px; width: 34px; height: 34px; background: color-mix(in srgb, var(--soft) 78%, transparent); font-size: 17px; }
  .document-card { min-height: 112px; padding-right: 50px; }
  .sidebar-toggle, .agent-close, .settings-sheet > header button, .tts-stop { width: 44px; height: 44px; }
  .import-button, .global-settings, .segmented button, .theme-options button, .color-options button, .api-actions button, .reset-button, .settings-sheet .page-mode button { min-height: 44px; }
  .vocabulary-entry, .vocabulary-actions button, .quiz-answer button, .extracted-word button, .save-all-vocabulary { min-height: 44px; }
  .vocabulary-card footer button { width: 40px; height: 40px; }
  .vocabulary-word { padding-right: 54px; }
  .vocabulary-speak { width: 44px; height: 44px; margin: -10px 0 0; }
  .quick-actions button { min-height: 48px; padding: 11px; }
  .chat-toolbar button { min-width: 44px; min-height: 44px; }
  .delete-turn { width: auto; min-height: 40px; padding-inline: 12px; opacity: .9; }
  .composer { grid-template-columns: minmax(0, 1fr) 44px; }
  .composer button { width: 44px; height: 44px; }
  .viewer-nav button { width: 48px; height: 44px; }
  .page-jump input, .page-jump button, .pdf-toolbar .page-jump button { min-height: 44px; }
  .page-jump input { font-size: 16px; }
  .library-item:hover, .document-card:hover, .sidebar-toggle:hover, .reader-agent-button:hover, .global-settings:hover { filter: none; }
  .delete-doc:active, .remove-recent:active { background: var(--danger); color: #fff; }
}

/* Larger, more legible application type scale */
body { font-size: 18px; }
.brand-name strong { font-size: 20px; }
.brand-name span, .vocabulary-entry-copy small, .library-item small, .document-card small,
.drop-zone small, .empty-library, .dashboard-empty, .progress-row small, .log-row time,
.reader-header .document-meta, .composer small, .settings-sheet > header span,
.api-login-brand span, .api-login-copy > span, .api-login-result, .api-login-card > small { font-size: 13px; }
.search input, .import-button, .global-settings, .vocabulary-entry-copy b, .library-item strong,
.library-hero p, .document-card strong, .vocabulary-card > p, .vocabulary-empty p,
.quiz-answer input, .dashboard-panel h3, .progress-row b, .log-row span,
.setting-group p, .password-field input, .api-grid input, .api-grid select,
.api-actions button, .color-options button, .reader-setting-grid label,
.settings-sheet .reader-font, .epub-layout-setting { font-size: 14px; }
.collection-label, .hero-kicker, .eyebrow, .document-meta, .view-label,
.reader-agent-button b, .quick-actions button, .viewer-nav > span,
.vocabulary-summary, .quiz-panel > header p, .quiz-result, .chat-toolbar button,
.reading-tools button small, .extracted-word p, .save-all-vocabulary,
.segmented button, .theme-options button, .page-mode button, .page-jump,
.page-jump b, .page-jump button, .pdf-toolbar .page-jump button { font-size: 13px; }
.drop-zone strong, .agent-message p, .message p, .message-body, .composer input,
.setting-group > label, .api-heading label, .settings-sheet .setting-group > .setting-title,
.api-login-copy p, .api-login form > label, .api-login-grid label { font-size: 16px; }
.vocabulary-entry > strong, .quiz-type, .quiz-card > small, .vocabulary-card blockquote b,
.extracted-word > div span { font-size: 11px; }
.vocabulary-word span, .vocabulary-card footer, .field-label, .api-grid label span,
.delete-turn { font-size: 12px !important; }
.library-heading h2 { font-size: 21px; }
.stat-grid span, .format-row > b, .pdf-toolbar .pdf-zoom-value { font-size: 14px; }
.reader-identity h1 { font-size: 20px; }
.drop-zone { gap: 7px; }

@media (max-width: 820px) {
  body { font-size: 19px; }
  .brand-name strong { font-size: 21px; }
  .brand-name span, .library-item small, .document-card small, .drop-zone small,
  .reader-header .document-meta, .progress-row small, .log-row time,
  .dashboard-empty, .composer small { font-size: 14px; }
  .search input, .import-button, .global-settings, .library-item strong,
  .library-hero p, .document-card strong, .vocabulary-entry-copy b,
  .stat-grid span, .dashboard-panel h3, .progress-row b, .log-row span,
  .chat-toolbar button, .quick-actions button, .reading-tools button small,
  .setting-group p, .color-options button, .api-actions button,
  .reader-setting-grid label, .settings-sheet .reader-font,
  .epub-layout-setting, .page-jump { font-size: 15px; }
  .collection-label, .hero-kicker, .eyebrow, .document-meta, .view-label,
  .reader-agent-button b, .vocabulary-summary, .segmented button,
  .theme-options button, .page-mode button { font-size: 14px; }
  .drop-zone strong, .agent-message p, .message p, .message-body,
  .composer input, .setting-group > label, .api-heading label,
  .settings-sheet .setting-group > .setting-title { font-size: 17px; }
  .reader-identity h1 { font-size: 18px; }
  .drop-zone { min-height: 132px; padding: 18px 12px; }
  .toast { font-size: 14px; }
  .toast.guidance { font-size: 16px; }
}