@font-face {
  font-family: 'Seshat';
  src: url('assets/fonts/Seshat.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: 'KingHwa Old Song'; src: url('assets/fonts/KingHwa.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alegreya'; src: url('assets/fonts/Alegreya-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alegreya'; src: url('assets/fonts/Alegreya-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Alegreya'; src: url('assets/fonts/Alegreya-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
/* Latin-only faces let Chinese use its independently selected font, including mixed lines. */
@font-face { font-family:'Reader English Serif';src:local('Georgia');unicode-range:U+0000-02FF,U+1E00-1EFF,U+2000-206F; }
@font-face { font-family:'Reader English Sans';src:local('Segoe UI');unicode-range:U+0000-02FF,U+1E00-1EFF,U+2000-206F; }
@font-face { font-family:'Reader English Seshat';src:url('assets/fonts/Seshat.otf');unicode-range:U+0000-02FF,U+1E00-1EFF,U+2000-206F; }
@font-face { font-family:'Reader English Alegreya';src:url('assets/fonts/Alegreya-Regular.ttf');unicode-range:U+0000-02FF,U+1E00-1EFF,U+2000-206F; }
@font-face { font-family:'Reader English Alegreya';src:url('assets/fonts/Alegreya-Bold.ttf');font-weight:700;unicode-range:U+0000-02FF,U+1E00-1EFF,U+2000-206F; }

:root {
  --shell: #e9e4da;
  --paper: #f5f0e6;
  --panel: #eee9df;
  --ink: #25231f;
  --muted: #827b70;
  --faint: #b3aa9d;
  --line: rgba(45, 40, 34, 0.13);
  --accent: #7f302f;
  --accent-soft: rgba(127, 48, 47, 0.1);
  --gold: #b69a68;
  --reader-font: Georgia, 'Times New Roman', serif;
  --reader-size: 20px;
  --reader-line: 1.9;
  --shadow: 0 24px 70px rgba(43, 37, 28, 0.08);
}

.classroom-dialog { position:fixed; top:44px; bottom:0; right:0; margin:0; padding:0; height:calc(100vh - 44px); max-height:none; max-width:none; border:0; color:var(--ink); background:var(--paper); box-shadow:-12px 0 45px rgba(0,0,0,.12); }
.classroom-dialog[open] { display:flex; flex-direction:column; }
.classroom-dialog::backdrop { background:rgba(25,23,20,.16); }
.classroom-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 24px; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; }
.classroom-header > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.classroom-header > div { display:flex; flex-shrink:0; gap:16px; }
.classroom-header button,.classroom-picker button { border:0; background:transparent; color:var(--accent); cursor:pointer; font-size:11px; }
.classroom-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(310px,35%); flex:1; min-height:0; }
.classroom-reader { min-width:0; overflow-y:auto; padding:40px var(--reading-gutter,32px) 80px; scrollbar-width:thin; }
.classroom-reader .book-content { min-height:0; }
.classroom-reader .book-content p:first-of-type::first-letter { float:none; margin:0; font:inherit; color:inherit; }
.classroom-chapter + .classroom-chapter { padding-top:1.4em; margin-top:1.4em; border-top:1px solid var(--line); }
.classroom-mark { background:rgba(128,128,128,.14); color:inherit; padding:.08em 0; cursor:pointer; text-decoration:none; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.classroom-mark.active { background:rgba(229,199,101,.62); }
.classroom-mark .classroom-mark:not(.active),.classroom-mark.active .classroom-mark { background:transparent; }
.classroom-mark:focus-visible { outline:1px solid var(--gold); outline-offset:2px; }
.classroom-cards { overflow-y:auto; padding:24px; border-left:1px solid var(--line); background:var(--panel); font-family:var(--reader-font); font-size:var(--reader-size); scrollbar-width:thin; }
.classroom-card { border-bottom:1px solid var(--line); }
.classroom-card.active { border-bottom-color:var(--gold); }
.classroom-card-title { width:100%; display:block; padding:14px 64px 8px 3px; border:0; background:transparent; text-align:left; font:inherit; line-height:1.3; cursor:pointer; }
.classroom-card-title::after { content:'＋'; position:absolute; top:14px; right:32px; width:24px; text-align:center; color:var(--muted); font-size:20px; line-height:28px; }
.classroom-card.active > .classroom-card-title::after { content:'−'; color:var(--accent); }
.classroom-card-body { padding:0 3px 24px; line-height:1.65; }
.classroom-card-body h3 { margin:0; font:600 1.2em/1.4 var(--reader-font); }
.classroom-card-body .definition,.classroom-card-body .translation { font-size:1em; }
.classroom-card-body p,.classroom-card-body .chunk,.classroom-card-body .grammar-point { font-size:.85em; }
.classroom-card-body .ipa,.classroom-card-body small { font-size:.75em; }
.classroom-empty { font-size:.85em; line-height:1.8; color:var(--muted); }
.library-delete-button { margin-top:12px; border:1px solid var(--line); background:transparent; color:var(--muted); padding:7px 12px; cursor:pointer; }
#rangePracticeEntries { max-height:180px; overflow:auto; }
#rangePracticeStatus { line-height:1.8; }
#studyPrompt { white-space:pre-wrap; }
.classroom-card.active > .classroom-card-title { font-weight:500; font-size:1.12em; }
.classroom-card-more { margin-top:1em; border-top:1px solid var(--line); padding-top:.6em; }
.classroom-card-more > summary { cursor:pointer; font-size:.7em; color:var(--accent); padding:.4em 0; }
.classroom-card-more[open] > summary { margin-bottom:.6em; }
.classroom-header { flex-wrap:wrap; }
.classroom-header > div { flex-wrap:wrap; gap:10px 16px; max-width:100%; }
.classroom-appearance { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; padding:14px 24px; border-bottom:1px solid var(--line); background:var(--panel); flex-shrink:0; max-height:40vh; overflow:auto; }
.classroom-appearance label { display:grid; gap:6px; color:var(--ink); font-size:12px; }
.classroom-appearance select { max-width:180px; padding:6px; background:var(--paper); color:var(--ink); border:1px solid var(--line); }
.classroom-appearance small { color:var(--muted); font-size:11px; }
.classroom-appearance button { background:transparent; color:var(--accent); border:0; cursor:pointer; }
.classroom-picker { position:fixed; top:52px; z-index:85; display:flex; align-items:center; gap:14px; padding:12px 16px; background:var(--paper); border:1px solid var(--gold); box-shadow:0 5px 20px rgba(0,0,0,.1); font-size:11px; line-height:1.6; }
.classroom-picker button { flex-shrink:0; }
.classroom-picking .book-content { cursor:crosshair; outline:1px dashed var(--gold); outline-offset:10px; }
.classroom-mark-tools { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:10px 24px; border-bottom:1px solid var(--line); background:var(--panel); font-size:11px; }
.classroom-mark-tools > div { display:flex; align-items:center; gap:5px; }
.classroom-mark-tools button { border:1px solid var(--line); background:transparent; padding:6px 9px; cursor:pointer; }
.classroom-mark-tools button.active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.classroom-mark-tools [data-classroom-mark-color] { width:22px; height:22px; padding:0; border-radius:50%; background:var(--mark); }
#classroomMarkHint { color:var(--muted); }
#applyClassroomMark { color:var(--accent); border-color:var(--accent); }
#classroomMarkButton,#classroomWhiteboard { color:var(--ink); }
#classroomButton { grid-column:1 / -1; justify-content:center; min-height:34px; color:var(--accent); }
#readingReferencesButton { grid-column:1 / -1; justify-content:center; min-height:34px; }
.reader-note { text-decoration:underline dotted var(--gold) 2px; text-underline-offset:.3em; cursor:pointer; background:color-mix(in srgb,var(--gold) 9%,transparent); }
.reader-note:focus-visible { outline:1px solid var(--gold); }
.reading-references,.reader-note-dialog { width:min(720px,calc(100vw - 60px)); max-height:calc(100vh - 100px); padding:30px; border:1px solid var(--line); background:var(--paper); color:var(--ink); box-shadow:var(--shadow); }
.reading-references::backdrop,.reader-note-dialog::backdrop { background:rgba(30,27,22,.3); }
.reading-references header,.reader-note-dialog header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.reading-references h2,.reader-note-dialog h2 { margin:8px 0 25px; font:500 25px/1.4 var(--reader-font); }
.reading-references h3 { margin:28px 0 12px; font:500 19px/1.4 var(--reader-font); }
.reading-references small { color:var(--muted); font-size:10px; letter-spacing:.12em; }
.reading-references button,.reader-note-dialog button { padding:8px 12px; border:1px solid var(--line); background:transparent; color:var(--accent); cursor:pointer; }
.reference-row { border-top:1px solid var(--line); padding:16px 0; }
.reference-row input { width:100%; border:0; background:transparent; color:var(--ink); font:500 17px/1.5 var(--reader-font); }
.reference-row p,.reference-row blockquote { margin:10px 0; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.reference-row blockquote { border-left:2px solid var(--gold); padding-left:12px; color:var(--muted); }
.reference-row button + button { margin-left:8px; }
.reference-empty,#readerNoteStatus { color:var(--muted); font-size:12px; line-height:1.8; }
#readerNoteQuote { max-height:170px; overflow:auto; margin:0 0 18px; padding:12px 16px; border-left:2px solid var(--gold); background:var(--panel); font:italic 17px/1.6 var(--reader-font); white-space:pre-wrap; }
#readerNoteText { width:100%; min-height:180px; resize:vertical; padding:15px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font:var(--reader-size)/1.7 var(--reader-font); }
.reader-note-dialog footer { display:flex; justify-content:space-between; margin-top:18px; }
#saveReaderNote { background:var(--accent); color:var(--paper); }
.card-image-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:9px 4px; }
.card-image-tools button { padding:7px 10px; border:1px solid var(--gold); background:transparent; cursor:pointer; font-size:.72em; }
.card-image-tools small { color:var(--muted); font-size:.62em; line-height:1.5; }
.card-images { margin-top:18px; }
.card-images h4 { color:var(--gold); font-size:.62em; letter-spacing:.1em; }
.card-images figure { position:relative; margin:12px 0; }
.card-images img { display:block; width:100%; height:auto; border:1px solid var(--line); }
.card-images figure button { position:absolute; top:5px; right:5px; width:24px; height:24px; border:1px solid var(--line); border-radius:50%; background:var(--paper); cursor:pointer; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; overflow: hidden; }

body {
  color: var(--ink);
  background: var(--shell);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { color: inherit; }

.app-shell {
  display: grid;
  grid-template-columns: 270px minmax(520px, 1fr) 390px;
  grid-template-rows: 44px minmax(0, 1fr);
  height: 100vh;
  background: var(--shell);
}

.titlebar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) max-content;
  gap: 16px;
  /* Electron exposes the usable titlebar area, excluding native window buttons.
     Size from the viewport, not the reader grid's minimum column widths. */
  width: env(titlebar-area-width, calc(100vw - 144px));
  left: env(titlebar-area-x, 0px);
  min-width: 0;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  -webkit-app-region: drag;
  position: relative;
  z-index: 20;
}

.brand-lockup { display: flex; align-items: center; gap: 9px; letter-spacing: .12em; white-space: nowrap; }
.brand-mark {
  display: grid; place-items: center; width: 22px; height: 22px;
  background: var(--accent); color: #f8f3e9; font: 700 12px/1 Georgia, serif;
}
.brand-name { font: 600 10px/1 ui-sans-serif, sans-serif; letter-spacing: .2em; }
.brand-cn { color: var(--muted); font: 400 11px/1 'Songti SC', SimSun, serif; }
.titlebar-center { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align: center; color: var(--muted); font: 400 11px/1.2 Georgia, 'Songti SC', serif; letter-spacing: .06em; }
.titlebar-actions { display: flex; justify-content: flex-end; gap: 5px; white-space:nowrap; -webkit-app-region: no-drag; }
.titlebar-actions > button { flex-shrink:0; }
.session-button {
  height: 28px; margin-right: 5px; padding: 0 11px; display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: rgba(255,255,255,.18); color: var(--muted);
  font-size: 9px; letter-spacing: .06em; cursor: pointer; -webkit-app-region: no-drag;
}
.session-button:hover { color: var(--accent); border-color: var(--accent); }
.session-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.session-button.active .session-dot { animation: sessionPulse 1.7s ease infinite; }
.session-button.active { color: var(--ink); }
.session-button.selecting { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.session-button time { color: var(--accent); font-family: ui-monospace, monospace; }
.pause-session-button { height:28px; padding:0 10px; display:flex; align-items:center; gap:6px; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:9px; cursor:pointer; }
.pause-session-button:hover,.pause-session-button.paused { border-color:var(--gold); color:var(--accent); background:rgba(182,154,104,.08); }
.pause-session-button span:first-child { font:700 9px/1 ui-monospace,monospace; }
@keyframes sessionPulse { 50% { box-shadow: 0 0 0 5px var(--accent-soft); } }

.icon-button {
  display: grid; place-items: center; width: 30px; height: 30px; border: 0;
  border-radius: 50%; background: transparent; cursor: pointer;
}
.icon-button:hover { background: rgba(0,0,0,.05); }
.icon-button.active { color:var(--accent); background:var(--accent-soft); }
.icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.whiteboard-drawer { position:fixed; z-index:88; top:100px; right:24px; width:410px; height:calc((100vh - 96px) / 2); min-width:300px; min-height:240px; display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--gold); box-shadow:0 12px 42px rgba(36,31,25,.18); visibility:hidden; opacity:0; pointer-events:none; }
.whiteboard-drawer.open { visibility:visible; opacity:1; pointer-events:auto; }
.whiteboard-header { flex-shrink:0; padding:14px 16px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); background:var(--panel); cursor:move; user-select:none; touch-action:none; }
.whiteboard-header > div:first-child { min-width:0; }
.whiteboard-header .section-kicker { font-size:7px; }
.whiteboard-header h2 { margin:5px 0; font:400 20px/1 Georgia,'Songti SC',serif; }
.whiteboard-header p { margin:0; color:var(--muted); font-size:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.whiteboard-header-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.whiteboard-header-actions span { color:var(--faint); font-size:8px; letter-spacing:.08em; }
.whiteboard-header-actions span.saving { color:var(--gold); }
.whiteboard-header-actions button { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; }
.whiteboard-header-actions button:hover { border-color:var(--accent); color:var(--accent); }
.whiteboard-tools { display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid var(--line); color:var(--muted); font-size:9px; flex-shrink:0; flex-wrap:wrap; }
.whiteboard-tools span { flex:1; }
.whiteboard-tools button { padding:4px 6px; border:1px solid var(--line); color:var(--accent); background:transparent; cursor:pointer; font-size:10px; }
.whiteboard-image-tools { display:flex; align-items:center; gap:10px; padding:8px 14px; font-size:10px; border-bottom:1px solid var(--line); flex-shrink:0; }
.whiteboard-image-tools input { min-width:60px; flex:1; accent-color:var(--accent); }
.whiteboard-image-tools output { min-width:34px; }
.whiteboard-editor { min-height:0; flex:1; overflow-y:auto; padding:18px 20px 32px; outline:none; color:var(--ink); caret-color:var(--accent); font-family:var(--reader-font); font-size:var(--reader-size); line-height:var(--reader-line); white-space:pre-wrap; overflow-wrap:anywhere; scrollbar-width:thin; }
.whiteboard-resize { position:absolute; right:0; bottom:0; width:22px; height:22px; padding:0; background:var(--panel); border:0; color:var(--gold); cursor:nwse-resize; touch-action:none; }
.whiteboard-drawer.manipulating { user-select:none; }
.whiteboard-editor:empty::before { content:attr(data-placeholder); color:var(--faint); pointer-events:none; }
.whiteboard-editor p,.whiteboard-editor div { margin:0 0 1em; }
.whiteboard-editor img { display:block; max-width:100%; height:auto; margin:1.35em auto; border:1px solid var(--line); box-shadow:0 10px 32px rgba(38,32,25,.08); }
.whiteboard-editor img.selected-image { outline:2px solid var(--gold); outline-offset:3px; }
.whiteboard-editor img::selection { background:var(--accent-soft); }
.whiteboard-editor.drag-over { background:var(--accent-soft); }
.pdf-ocr-dialog { width:min(580px,90vw); max-height:85vh; overflow:auto; border:1px solid var(--line); padding:30px; color:var(--ink); background:var(--paper); }
.pdf-ocr-dialog h2 { font-size:22px; overflow-wrap:anywhere; }
.pdf-ocr-dialog p { line-height:1.7; }
.pdf-ocr-dialog progress { width:100%; accent-color:var(--accent); }
.pdf-ocr-dialog select { padding:8px; color:var(--ink); background:var(--panel); }
.pdf-ocr-dialog button { margin:12px 10px 0 0; padding:10px 16px; cursor:pointer; }
.pdf-original-dialog { width:min(1100px,94vw); height:90vh; border:1px solid var(--line); padding:16px; color:var(--ink); background:var(--paper); overflow:auto; }
.pdf-original-dialog header { position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; gap:15px; background:var(--paper); padding:12px; }
.pdf-original-dialog button { padding:10px; white-space:nowrap; }
.pdf-original-dialog canvas { display:block; width:100%; height:auto; background:white; }

.library-panel, .insight-panel { min-height: 0; background: var(--panel); }
.library-panel { padding: 34px 24px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.section-kicker { color: var(--accent); font: 700 9px/1.2 ui-sans-serif, sans-serif; letter-spacing: .24em; }

.library-action-row { display:grid; grid-template-columns:1.08fr .76fr .62fr; gap:6px; margin:16px 0 25px; }
.import-button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin:0; padding: 11px 8px;
  color: var(--ink); background: transparent; border: 1px solid rgba(45,40,34,.25);
  font-size: 12px; letter-spacing: .08em; cursor: pointer; transition: .2s ease;
}
.import-button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.open-library-button { display:flex; align-items:center; justify-content:center; gap:5px; padding:8px 5px; border:1px solid var(--line); background:rgba(255,255,255,.18); color:var(--muted); font-size:9px; cursor:pointer; }
.open-library-button:hover { border-color:var(--accent); color:var(--accent); }
.open-library-button b { min-width:16px; height:16px; display:grid; place-items:center; border-radius:9px; background:var(--accent-soft); color:var(--accent); font-size:8px; }
.plus { font-size: 18px; font-weight: 300; line-height: .7; }

.current-book { text-align: center; }
.book-cover {
  width: 116px; height: 164px; margin: 0 auto 17px; padding: 16px 13px;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(145deg, #2c3534, #18201f); color: #f5efe2;
  box-shadow: 0 15px 35px rgba(27,30,28,.25); position: relative; overflow: hidden;
}
.book-cover::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 10% 10%, rgba(255,255,255,.08), transparent 40%); }
.cover-overline { align-self: flex-start; text-align: left; font: 600 5px/1.5 sans-serif; letter-spacing: .22em; opacity: .75; }
.cover-monogram { margin: auto; font: italic 44px/1 Georgia, serif; color: #c5ad7b; }
.cover-rule { width: 24px; height: 1px; background: #c5ad7b; margin-bottom: 7px; }
.cover-title { font: 600 7px/1.35 Georgia, serif; letter-spacing: .13em; }
.book-meta h2 { margin: 0; font: 500 16px/1.3 Georgia, 'Songti SC', serif; }
.book-meta p { margin: 4px 0 14px; color: var(--muted); font: 400 10px/1.4 sans-serif; letter-spacing: .05em; }
.progress-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.progress-meta strong { color: var(--ink); font-weight: 600; }
.progress-track { height: 2px; margin-top: 7px; background: rgba(0,0,0,.08); }
.progress-track span { display: block; height: 100%; width: 1%; background: var(--accent); transition: width .3s ease; }
.book-stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line); }
.book-stat-grid div { display: flex; flex-direction: column; gap: 4px; }
.book-stat-grid strong { font: 500 13px/1 Georgia,serif; }
.book-stat-grid span { color: var(--muted); font-size: 7px; letter-spacing: .07em; }
.book-tool-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; }
.book-tool-row button { padding: 7px 4px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 8px; cursor: pointer; }
.book-tool-row button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.toc-header { display: flex; justify-content: space-between; align-items: center; margin: 28px 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font: 600 10px/1 sans-serif; letter-spacing: .12em; }
.toc-header button { border: 0; background: none; color: var(--muted); cursor: pointer; }
.toc { flex: 1; overflow-y: auto; margin: 0 -8px; padding: 0 8px 20px; scrollbar-width: thin; }
.toc button {
  display: grid; grid-template-columns: 22px 1fr; gap: 8px; width: 100%; padding: 9px 5px;
  border: 0; background: transparent; text-align: left; color: var(--muted); cursor: pointer;
  font: 400 11px/1.35 sans-serif;
}
.toc button span:first-child { font: italic 10px/1.4 Georgia, serif; color: var(--faint); }
.toc button:hover, .toc button.active { color: var(--ink); }
.toc button.active { border-left: 2px solid var(--accent); padding-left: 9px; background: linear-gradient(90deg, var(--accent-soft), transparent); }
.toc button.active span:first-child { color: var(--accent); }

.library-footer { margin: auto -24px 0; height: 68px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.library-footer div { display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid var(--line); }
.library-footer div:last-child { border: 0; }
.library-footer span { font: 500 15px/1 Georgia, serif; }
.library-footer small { margin-top: 5px; color: var(--muted); font-size: 8px; }

.reader-panel { min-width: 0; overflow-y: auto; padding: 0 var(--reading-gutter,32px) 30px; background: var(--paper); scrollbar-width: thin; }
.chapter-heading { max-width: none; margin: 0 auto 48px; display: grid; grid-template-columns: 54px 1fr; gap: 22px; align-items: start; }
.chapter-number { color: var(--accent); font: italic 38px/1 Georgia, serif; }
.chapter-label { margin-top: 2px; color: var(--gold); font: 700 8px/1 sans-serif; letter-spacing: .28em; }
.chapter-heading h1 { margin: 8px 0 0; font: 400 clamp(28px, 3vw, 44px)/1.08 Georgia, 'Songti SC', serif; letter-spacing: -.025em; }

.book-content { max-width: none; min-height: 55vh; margin: 0 auto; outline: none; font-family: var(--reader-font); font-size: var(--reader-size); line-height: var(--reader-line); }
.book-content p { margin: 0 0 1.35em; }
.book-content p:first-of-type::first-letter { float: left; margin: .09em .12em 0 0; color: var(--accent); font: 500 3.65em/.72 Georgia, serif; }
.book-content h1, .book-content h2, .book-content h3 { margin: 1.5em 0 .7em; font-family: Georgia, 'Songti SC', serif; font-weight: 500; line-height: 1.2; }
.book-content img { max-width: 100%; height: auto; display: block; margin: 2em auto; }
.book-content a { color: var(--accent); }
.book-content .book-link-target { animation: book-link-arrival 1.8s ease-out; }
@keyframes book-link-arrival { 0%,35% { background: color-mix(in srgb, var(--gold) 50%, transparent); } 100% { background: transparent; } }
.book-content ::selection { background: rgba(182, 154, 104, .38); color: inherit; }
.reader-panel.setting-reading-point { cursor: crosshair; }
.reader-panel.setting-reading-point .book-content { outline: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 14px; }
.reading-boundary { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: -.08em; overflow: visible; }
.reading-boundary::before { content: attr(data-label); position: absolute; z-index: 4; left: -6px; bottom: 1.28em; width: max-content; padding: 3px 6px; background: var(--accent); color: #fff8ee; font: 700 7px/1 sans-serif; letter-spacing: .11em; }
.reading-boundary::after { content: ''; position: absolute; left: -1px; top: -.25em; height: 1.55em; width: 2px; background: var(--accent); }
.reader-highlight { background: linear-gradient(transparent 58%, rgba(182,154,104,.36) 58%); }

.reader-footer { max-width: none; margin: 70px auto 0; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.reader-footer button { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 8px 0; }
.reader-footer button:hover { color: var(--accent); }

.insight-panel { border-left: 1px solid var(--line); padding: 34px 0 0; display: flex; flex-direction: column; min-width: 0; }
.insight-actions { display: flex; align-items: center; gap: 8px; }
.text-button.accent { color: var(--accent); }
.insight-heading { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 26px; }
.insight-heading h2 { margin: 7px 0 0; font: 400 24px/1 Georgia, 'Songti SC', serif; }
.text-button { border: 0; background: none; color: var(--muted); font-size: 10px; cursor: pointer; }
.text-button:hover { color: var(--accent); }
.tabs { display: flex; gap: 19px; margin-top: 24px; padding: 0 26px; border-bottom: 1px solid var(--line); }
.tab { padding: 0 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: 10px; cursor: pointer; }
.tab.active { color: var(--ink); border-color: var(--accent); }
.tab span { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 3px; padding: 0 4px; border-radius: 9px; background: rgba(0,0,0,.06); font-size: 8px; }

.insight-stream { flex: 1; overflow-y: auto; padding: 22px 20px 50px; scrollbar-width: thin; }
.insight-card { position: relative; margin-bottom: 14px; padding: 20px; background: rgba(255,255,255,.4); border: 1px solid rgba(45,40,34,.1); box-shadow: 0 5px 20px rgba(42,35,28,.025); animation: cardIn .25s ease both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(7px); } }
.insight-card.loading { min-height: 110px; }
.insight-card.saved { border-left: 2px solid var(--accent); }
.insight-card.collapsed { padding:14px 16px 16px; }
.card-topline { display: flex; flex-wrap:wrap; gap:8px; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.card-kind { color: var(--accent); font: 700 8px/1 sans-serif; letter-spacing: .2em; }
.card-actions { display: flex; gap: 2px; }
.card-actions button { flex-shrink:0; width: 26px; height: 26px; font-size:18px; line-height:1; padding:0; border: 0; background: transparent; color: var(--faint); cursor: pointer; }
.card-actions button:hover, .card-actions button.active { color: var(--accent); }
.card-actions .pronounce-button { display: inline-grid; place-items: center; }
.pronounce-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.pronounce-button svg path:first-child { fill: currentColor; stroke: none; }
.pronounce-button.speaking { color: var(--accent); }
.pronounce-button.speaking svg { animation: soundPulse .8s ease-in-out infinite alternate; }
@keyframes soundPulse { from { opacity: .48; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
.collapsed-card-title { width:100%; padding:2px 0 0; border:0; background:transparent; text-align:left; color:var(--ink); cursor:pointer; font:500 1.25em/1.35 Georgia,'Songti SC',serif; }
.insight-card.collapsed .card-topline { margin-bottom:6px; }
.term-row { display: flex; align-items: baseline; gap: 9px; }
.term-editor { display:block; box-sizing:border-box; field-sizing:content; width:100%; min-height:1.3em; padding:0 0 4px; resize:none; overflow:hidden; border:0; border-bottom:1px solid transparent; background:transparent; outline:none; color:var(--ink); font:500 22px/1.3 Georgia,serif; }
.term-editor:focus { border-color: var(--gold); }
.ipa { color: var(--ink); font: 400 11px/1.3 sans-serif; }
.ipa-editor { display:block; width:100%; box-sizing:border-box; padding:5px 0; border:0; border-bottom:1px dashed var(--line); border-radius:0; background:transparent; color:inherit; font:inherit; }
.ipa-editor:focus { outline:1px solid var(--gold); outline-offset:3px; border-bottom-color:var(--gold); color:var(--ink); }
.ipa-edit-hint { display:block; margin:3px 0 8px; font-size:11px; line-height:1.5; color:var(--muted); }
.ipa-editor[aria-invalid="true"] { border-color:var(--accent); }
.pos { display: inline-block; margin: 7px 0 9px; padding: 3px 6px; background: var(--accent-soft); color: var(--accent); font: italic 10px/1 Georgia, serif; }
.definition { margin: 0 0 7px; font: 500 13px/1.6 'Songti SC', SimSun, serif; }
.context-meaning { margin: 0 0 13px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.meaning-tools { display:flex; flex-wrap:wrap; gap:8px; margin:3px 0 12px; font-size:12px; }
.meaning-tools button { padding:3px 7px; border:1px solid var(--line); background:transparent; color:var(--accent); cursor:pointer; font-size:12px; }
.meaning-tools button:disabled { opacity:.6; cursor:wait; }
.meaning-tools p { width:100%; margin:0; color:var(--accent); line-height:1.5; }
.example-block { padding: 11px 12px; border-left: 1px solid var(--gold); background: rgba(182,154,104,.07); }
.example-block p { margin: 0; font: italic 12px/1.55 Georgia, serif; }
.example-block small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.usage-note { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.knowledge-note { margin-top: 14px; padding: 13px; background: var(--accent-soft); border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.knowledge-note h4 { margin: 0 0 7px; color: var(--accent); font-size: .68em; letter-spacing: .16em; }
.knowledge-note p { margin: 0; font-size: .86em; line-height: 1.65; }
.knowledge-type { margin-left: 6px; color: var(--muted); font-weight: 400; letter-spacing: .04em; }

.source-sentence { margin: 0 0 13px; padding-bottom: 13px; border-bottom: 1px solid var(--line); font: italic 13px/1.55 Georgia, serif; }
.translation { margin: 0 0 14px; font: 500 13px/1.7 'Songti SC', SimSun, serif; }
.summary { margin: -6px 0 13px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.analysis-section { margin-top: 14px; }
.analysis-section h4 { margin: 0 0 8px; color: var(--gold); font: 700 8px/1 sans-serif; letter-spacing: .17em; }
.chunk { display: grid; grid-template-columns: minmax(80px, 1fr) 60px 1.25fr; gap: 7px; padding: 7px 0; border-bottom: 1px dotted var(--line); font-size: 10px; line-height: 1.45; }
.chunk strong { font: 500 11px/1.45 Georgia, serif; }
.chunk em { color: var(--accent); font-style: normal; }
.grammar-point { margin-bottom: 7px; font-size: 10px; line-height: 1.55; }
.grammar-point strong { font-weight: 600; }
.expression { padding: 8px 0; border-bottom: 1px dotted var(--line); }
.expression:last-child { border: 0; }
.expression b { font: 500 12px/1.3 Georgia, serif; }
.expression > span { color: var(--muted); font-size: 10px; }
.expression p { margin: 4px 0 0; font: italic 10px/1.5 Georgia, serif; }
.expression small { color: var(--muted); font-size: 9px; }

.empty-state { padding: 68px 24px; text-align: center; color: var(--muted); }
.empty-symbol { width: 42px; height: 42px; margin: 0 auto 16px; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; color: var(--gold); font: italic 18px Georgia, serif; }
.empty-state h3 { margin: 0 0 8px; color: var(--ink); font: 400 18px Georgia, 'Songti SC', serif; }
.empty-state p { margin: 0; font-size: 11px; line-height: 1.7; }
.skeleton { height: 8px; margin: 9px 0; border-radius: 4px; background: linear-gradient(90deg, rgba(0,0,0,.05), rgba(255,255,255,.5), rgba(0,0,0,.05)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.skeleton:nth-child(2) { width: 70%; }
.skeleton:nth-child(3) { width: 88%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.card-error { color: var(--accent); font-size: 11px; line-height: 1.6; }
.retry-button { margin-top: 10px; padding: 6px 10px; border: 1px solid var(--accent); background: none; color: var(--accent); font-size: 10px; cursor: pointer; }

.card-additions { margin-top:16px; padding:13px 14px; border:1px solid color-mix(in srgb,var(--gold) 50%,transparent); background:rgba(182,154,104,.06); }
.card-additions > h4 { margin:0 0 8px; color:var(--gold); font-size:.62em; letter-spacing:.16em; }
.card-addition { position:relative; padding:7px 24px 7px 0; border-top:1px dotted var(--line); }
.card-addition:first-of-type { border-top:0; }
.card-addition p { margin:0; font-size:.8em; line-height:1.65; }
.card-addition button { position:absolute; right:0; top:5px; border:0; background:transparent; color:var(--faint); cursor:pointer; }
.card-chat { margin:18px -20px -20px; border-top:1px solid var(--line); background:rgba(255,255,255,.18); }
.card-chat-toggle { width:100%; padding:12px 20px; display:flex; justify-content:space-between; gap:12px; border:0; background:transparent; cursor:pointer; text-align:left; }
.card-chat-toggle span { color:var(--accent); font:700 .6em/1 sans-serif; letter-spacing:.16em; }
.card-chat-toggle b { color:var(--muted); font:400 .63em/1 sans-serif; }
.card-chat-body { max-height:420px; overflow-y:auto; padding:2px 16px 16px; scrollbar-width:thin; }
.chat-empty { margin:8px 4px 13px; color:var(--muted); font-size:.72em; line-height:1.55; }
.qa-turn { padding:11px 4px; border-top:1px dotted var(--line); }
.qa-question { margin:0 0 9px; display:grid; grid-template-columns:18px 1fr; gap:6px; color:var(--ink); font-size:.75em; line-height:1.55; }
.qa-question > span,.qa-answer > span { color:var(--accent); font:700 .8em/1.6 Georgia,serif; }
.qa-answer { display:grid; grid-template-columns:18px 1fr; gap:6px; padding:9px 10px; background:var(--accent-soft); }
.qa-answer p { margin:0; font-size:.78em; line-height:1.65; }
.qa-answer ::selection { background:rgba(229,199,101,.68); }
.chat-compose { display:grid; grid-template-columns:1fr auto; gap:7px; margin-top:9px; }
.chat-input { min-width:0; resize:vertical; padding:9px 10px; border:1px solid var(--line); outline:none; background:rgba(255,255,255,.35); color:var(--ink); font: .75em/1.55 'Songti SC',SimSun,sans-serif; }
.chat-input:focus { border-color:var(--gold); }
.chat-compose button { align-self:stretch; padding:0 11px; border:1px solid var(--accent); background:var(--accent); color:#fff8ed; font-size:.68em; cursor:pointer; }
.chat-thinking { display:flex; align-items:center; gap:8px; margin:10px 4px; color:var(--muted); font-size:.7em; }
.chat-thinking i { width:7px; height:7px; border-radius:50%; background:var(--accent); animation:sessionPulse 1s infinite; }
.qa-selection-action { position:fixed; z-index:130; padding:8px 11px; transform:translate(-50%,-100%); border:0; background:var(--ink); color:#fff8ed; box-shadow:0 8px 24px rgba(0,0,0,.2); font-size:9px; cursor:pointer; }
.source-jump-focus { animation:sourceFocus 2.4s ease both; }
@keyframes sourceFocus { 0%,100% { background:transparent; outline-color:transparent; } 18%,72% { background:rgba(229,199,101,.3); outline:5px solid rgba(229,199,101,.16); } }
.analysis-card-focus { animation:analysisCardFocus 1.8s ease both; }
@keyframes analysisCardFocus { 0%,100% { border-color:rgba(45,40,34,.1); box-shadow:0 5px 20px rgba(42,35,28,.025); } 18%,72% { border-color:var(--gold); box-shadow:0 10px 34px rgba(127,48,47,.13); } }

.selection-toolbar { position: fixed; z-index: 80; display: block; padding: 5px; background: #25231f; color: #f5f0e6; box-shadow: 0 9px 30px rgba(0,0,0,.25); transform: translate(-50%, -100%); }
.selection-toolbar::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: #25231f; transform: translateX(-50%) rotate(45deg); }
.toolbar-main { display: flex; align-items: center; }
.selection-toolbar button { position: relative; z-index: 1; padding: 8px 10px; border: 0; background: transparent; color: inherit; font-size: 10px; white-space: nowrap; cursor: pointer; }
.selection-toolbar button:hover { color: #d7bd8a; }
.selection-toolbar button:disabled,.classroom-mark-tools button:disabled { opacity:.35; cursor:default; }
.toolbar-main > span { width: 1px; height: 13px; background: rgba(255,255,255,.16); }
.mark-options { width: 280px; padding: 8px 6px 5px; border-top: 1px solid rgba(255,255,255,.12); }
.mark-style-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.mark-style-options button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 3px; color: rgba(255,255,255,.62); }
.mark-style-options button.active { background: rgba(255,255,255,.1); color: #f5f0e6; }
.mark-style-options i { font: normal 13px Georgia, serif; }
.style-highlight { background: rgba(229,199,101,.6); padding: 0 3px; }
.style-wave { text-decoration: underline wavy #E5C765; text-underline-offset: 3px; }
.style-line { text-decoration: underline solid #E5C765; text-underline-offset: 3px; }
.mark-colors { display: flex; align-items: center; gap: 9px; padding: 9px 4px 2px; }
.mark-colors button:not(.apply-mark) { width: 17px; height: 17px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: var(--mark); }
.mark-colors button:not(.apply-mark).active { border-color: #fff; box-shadow: 0 0 0 1px var(--mark); }
.mark-colors .apply-mark { margin-left: auto; padding: 5px 8px; border: 1px solid rgba(255,255,255,.24); }

.reader-mark { color: inherit; }
.reader-mark[data-auto-lookup], .reader-mark[data-auto-sentence] { cursor:pointer; }
.reader-mark-highlight { padding: .08em .04em; background: color-mix(in srgb, var(--mark-color) 62%, transparent); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.reader-mark-wave { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: var(--mark-color); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.reader-mark-line { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: var(--mark-color); text-decoration-thickness: 2px; text-underline-offset: .2em; }

.settings-backdrop { position: fixed; inset: 44px 0 0; z-index: 89; background: rgba(37,35,31,.22); backdrop-filter: blur(2px); }
.settings-drawer { position: fixed; z-index: 90; top: 44px; right: 0; bottom: 0; width: 420px; padding: 35px; overflow-y: auto; background: #f4efe5; box-shadow: -20px 0 60px rgba(40,35,28,.12); transform: translateX(102%); transition: transform .28s ease; }
.settings-drawer.open { transform: translateX(0); }
.drawer-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 35px; }
.drawer-heading h2 { margin: 8px 0 0; font: 400 27px Georgia, 'Songti SC', serif; }
.drawer-heading .icon-button { font-size: 24px; font-weight: 200; }
.setting-group { margin-bottom: 27px; }
.setting-group > label { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.setting-group output { color: var(--accent); font-family: Georgia, serif; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.segmented button { padding: 10px 5px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.segmented button:nth-child(3n) { border-right: 0; }
.segmented button:nth-child(n+4) { border-top: 1px solid var(--line); }
.segmented button.active { color: #f6f0e5; background: var(--ink); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.theme-swatches { display: flex; gap: 13px; }
.theme-swatches button { width: 39px; height: 39px; padding: 0; border: 5px solid transparent; outline: 1px solid var(--line); background: var(--swatch); cursor: pointer; }
.theme-swatches button.active { border-color: #f4efe5; outline: 2px solid var(--accent); }
.setting-divider { height: 1px; margin: 34px 0; background: var(--line); }
.api-settings p { margin: -4px 0 12px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.secret-input { display: flex; border: 1px solid var(--line); background: rgba(255,255,255,.38); }
.secret-input input, .model-input { min-width: 0; flex: 1; padding: 10px 11px; border: 0; outline: none; background: transparent; font-size: 11px; }
.secret-input button { border: 0; background: transparent; color: var(--muted); font-size: 9px; cursor: pointer; }
.api-settings label[for="modelName"] { margin-top: 16px; }
.model-input { width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.38); }
.key-status { margin-top: 9px; color: var(--muted); font-size: 9px; }
.key-status.ready { color: #52705b; }
.save-settings { width: 100%; padding: 13px; border: 0; background: var(--accent); color: #fff9ef; font-size: 11px; letter-spacing: .12em; cursor: pointer; }
.save-settings:hover { filter: brightness(.93); }

.toast { position: fixed; z-index: 120; left: 50%; bottom: 28px; padding: 10px 16px; background: var(--ink); color: #f8f2e8; box-shadow: 0 8px 30px rgba(0,0,0,.2); font-size: 10px; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Notes have their own base size, independent of the reading text. */
.insight-panel { --note-size:var(--card-size,18px); }
.classroom-cards { font-size:var(--card-size,18px); min-width:0; }
.app-shell,.classroom-layout { position:relative; }
.notes-splitter { position:absolute; width:10px; top:0; bottom:0; z-index:20; cursor:col-resize; touch-action:none; }
#readerNotesSplitter { top:44px; }
.notes-splitter::after { content:''; position:absolute; left:4px; width:2px; height:100%; background:var(--line); }
.notes-splitter:hover::after,.notes-splitter:focus-visible::after { background:var(--gold); width:3px; }
.notes-splitter:focus-visible { outline:1px solid var(--gold); }
.resizing-notes,.resizing-notes * { cursor:col-resize!important; user-select:none!important; }
.collapsed-term-name { display:block; overflow-wrap:anywhere; }
.collapsed-term-meta { display:flex; flex-wrap:wrap; gap:5px 12px; font-size:.64em; line-height:1.6; color:var(--muted); margin-top:5px; }
.collapsed-term-ipa { color:var(--ink); font-family:Arial,sans-serif; overflow-wrap:anywhere; }
.collapsed-term-brief { display:block; font-size:.74em; line-height:1.7; margin-top:4px; font-weight:500; overflow-wrap:anywhere; }
.classroom-card { position:relative; }
.classroom-card-title { padding-right:64px; }
.classroom-card.active .collapsed-term-meta,.classroom-card.active .collapsed-term-brief { display:none; }
.classroom-pronounce { position:absolute; top:14px; right:0; width:28px; height:28px; padding:4px; border:0; background:transparent; color:var(--accent); cursor:pointer; }
.classroom-pronounce svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.insight-card { font-size: var(--note-size); }
.card-kind { font-size: clamp(9px,.65em,14px); }
.term-editor { font-size: 1.12em; }
.ipa { font-size: .82em; }
.pos { font-size: .76em; }
.definition, .translation { font-size: 1em; }
.context-meaning, .summary { font-size: .82em; }
.example-block p, .source-sentence { font-size: .94em; }
.example-block small, .usage-note { font-size: .76em; }
.analysis-section h4 { font-size: .64em; }
.chunk, .grammar-point { font-size: .78em; }
.chunk strong { font-size: 1.08em; }
.expression b { font-size: .94em; }
.expression > span, .expression p { font-size: .78em; }
.expression small { font-size: .7em; }

.modal-backdrop { position: fixed; inset: 44px 0 0; z-index: 94; background: rgba(29,28,25,.42); backdrop-filter: blur(5px); }
.decision-modal { position: fixed; z-index: 95; left: 50%; top: 50%; width: min(460px, calc(100vw - 40px)); padding: 38px; transform: translate(-50%,-50%); background: var(--paper); box-shadow: 0 28px 90px rgba(0,0,0,.25); }
.decision-modal h2 { margin: 9px 0 16px; font: 400 30px/1.15 Georgia, 'Songti SC', serif; }
.decision-modal > p { color: var(--muted); font-size: 12px; line-height: 1.65; }
.decision-question { margin-top: 24px; font: 500 17px/1.4 'Songti SC', SimSun, serif; }
.decision-note { margin-top: 7px; }
.decision-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.decision-actions button { padding: 10px 17px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 11px; }
.decision-actions button:last-child { border-color: var(--accent); background: var(--accent); color: #fff9ef; }
#exportSessionVocabulary { color: var(--accent); border-color: var(--accent); }

.learning-overlay { position: fixed; inset: 44px 0 0; z-index: 100; display: flex; flex-direction: column; background: var(--paper); }
.learning-header { height: 90px; flex: 0 0 90px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; border-bottom: 1px solid var(--line); background: var(--panel); }
.learning-header h2 { margin: 6px 0 0; font: 400 28px/1 Georgia, 'Songti SC', serif; }
.learning-progress { display: flex; align-items: center; gap: 22px; color: var(--muted); font: 12px Georgia, serif; }
.close-learning { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 24px; cursor: pointer; }
.close-learning:hover { background: var(--accent-soft); color: var(--accent); }
.learning-progress-track { height: 3px; background: var(--line); }
.learning-progress-track span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .35s ease; }
.learning-stage { width: min(780px, calc(100vw - 80px)); margin: auto; padding: 50px 0; }
.question-type { margin-bottom: 18px; color: var(--accent); font: 700 9px/1 sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.learning-stage > h3 { margin: 0 0 14px; font: 400 clamp(24px,3vw,40px)/1.25 Georgia, 'Songti SC', serif; }
.question-context { margin: 0 0 24px; color: var(--muted); font: italic 14px/1.65 Georgia, 'Songti SC', serif; }
.learning-stage textarea { width: 100%; min-height: 150px; resize: vertical; padding: 18px; border: 1px solid var(--line); outline: none; background: rgba(255,255,255,.34); color: var(--ink); font: 16px/1.7 Georgia, 'Songti SC', serif; }
.learning-stage textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(182,154,104,.08); }
.learning-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.learning-actions button { padding: 11px 18px; cursor: pointer; font-size: 11px; }
.learning-actions .secondary { border: 1px solid var(--line); background: transparent; }
.learning-actions .primary { border: 1px solid var(--accent); background: var(--accent); color: #fff9ef; }
.learning-feedback { margin-top: 18px; padding: 19px; border-left: 2px solid var(--accent); background: var(--accent-soft); font-size: 13px; line-height: 1.7; }
.learning-feedback h4 { margin: 0 0 8px; font: 500 18px Georgia, 'Songti SC', serif; }
.learning-feedback p { margin: 6px 0; }
.learning-feedback ul { margin: 8px 0; padding-left: 18px; }
.score-badge { float: right; color: var(--accent); font: italic 26px Georgia, serif; }
.learning-footer { min-height: 58px; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.learning-footer strong { color: var(--accent); font-weight: 500; }

.review-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr; }
.logic-map-panel { overflow-y: auto; padding: 42px 32px; border-right: 1px solid var(--line); background: var(--panel); }
.logic-map-panel h3 { margin: 8px 0 24px; font: 400 23px Georgia, 'Songti SC', serif; }
.logic-step { position: relative; padding: 0 0 24px 32px; }
.logic-step::before { content: ''; position: absolute; left: 9px; top: 22px; bottom: 2px; width: 1px; background: var(--line); }
.logic-step:last-child::before { display: none; }
.logic-order { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font: 8px Georgia, serif; background: var(--panel); }
.logic-step strong { display: block; font: 500 13px/1.45 Georgia, 'Songti SC', serif; }
.logic-step p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.review-stage { overflow-y: auto; margin: 0 auto; }
.review-overview { margin: 0 0 32px; padding: 16px 18px; border-left: 2px solid var(--gold); color: var(--muted); font: 14px/1.75 'Songti SC', SimSun, serif; background: rgba(182,154,104,.06); }
.review-prompt-en { margin: -4px 0 22px; color: var(--muted); font: italic 15px/1.55 Georgia,Seshat,serif; }
.bilingual-secondary { display:block; margin-top:4px; color:var(--muted); font:italic 11px/1.5 Georgia,Seshat,serif; }

.library-overlay { position:fixed; inset:44px 0 0; z-index:98; overflow-y:auto; background:var(--paper); }
.library-overlay-header { min-height:150px; display:flex; justify-content:space-between; align-items:center; gap:30px; padding:34px 58px; border-bottom:1px solid var(--line); background:var(--panel); }
.library-overlay-header h2 { margin:7px 0 8px; font:400 34px/1 Georgia,'Songti SC',serif; }
.library-overlay-header p { margin:0; color:var(--muted); font-size:11px; }
.library-overlay-header > div:last-child { display:flex; align-items:center; gap:12px; }
.library-import { padding:10px 15px; border:1px solid var(--accent); background:var(--accent); color:#fff8ed; font-size:10px; cursor:pointer; }
.library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px; padding:42px 58px 70px; }
.library-book-card { min-height:250px; padding:24px; display:flex; flex-direction:column; border:1px solid var(--line); background:rgba(255,255,255,.28); box-shadow:0 12px 35px rgba(40,35,28,.04); cursor:pointer; transition:.2s ease; }
.library-book-card:hover { transform:translateY(-3px); border-color:var(--gold); box-shadow:0 17px 40px rgba(40,35,28,.08); }
.library-book-card.current { border-top:3px solid var(--accent); }
.library-card-mark { width:44px; height:62px; display:grid; place-items:center; margin-bottom:20px; background:linear-gradient(145deg,#2c3534,#18201f); color:#cdb783; font:italic 23px Georgia,serif; box-shadow:0 7px 16px rgba(0,0,0,.15); }
.library-book-card h3 { margin:0 0 5px; font:500 19px/1.25 Georgia,'Songti SC',serif; }
.library-book-card .author { margin:0 0 20px; color:var(--muted); font-size:10px; }
.library-card-stats { margin-top:auto; padding-top:14px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.library-card-stats span { display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:8px; }
.library-card-stats strong { color:var(--ink); font:500 13px Georgia,serif; }
.library-book-card .open-label { margin-top:17px; color:var(--accent); font-size:9px; letter-spacing:.12em; }

.statistics-overlay { position:fixed; inset:44px 0 0; z-index:99; display:flex; flex-direction:column; background:var(--paper); }
.statistics-header { min-height:158px; display:grid; grid-template-columns:minmax(320px,1fr) auto 38px; align-items:center; gap:34px; padding:34px 58px; border-bottom:1px solid var(--line); background:var(--panel); }
.statistics-header h2 { margin:7px 0 8px; font:400 34px/1 Georgia,'Songti SC',serif; }
.statistics-header p { margin:0; color:var(--muted); font-size:11px; }
.statistics-summary { display:grid; grid-template-columns:repeat(4,minmax(82px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.statistics-summary div { min-width:105px; padding:14px 16px; display:flex; flex-direction:column; gap:5px; background:var(--paper); }
.statistics-summary strong { font:500 18px/1 Georgia,serif; }
.statistics-summary span { color:var(--muted); font-size:8px; letter-spacing:.08em; }
.statistics-layout { min-height:0; flex:1; display:grid; grid-template-columns:330px minmax(0,1fr); }
.statistics-book-list { min-height:0; padding:28px 22px; overflow-y:auto; border-right:1px solid var(--line); background:color-mix(in srgb,var(--panel) 70%,var(--paper)); }
.statistics-book-list > h3 { margin:0 8px 15px; color:var(--muted); font-size:9px; letter-spacing:.14em; }
.statistics-book-button { width:100%; padding:16px 15px; display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:12px; border:0; border-bottom:1px solid var(--line); background:transparent; text-align:left; cursor:pointer; }
.statistics-book-button:hover { background:rgba(255,255,255,.24); }
.statistics-book-button.active { background:var(--paper); box-shadow:inset 3px 0 var(--accent); }
.statistics-book-letter { width:34px; height:45px; display:grid; place-items:center; background:#26302f; color:#cdb783; font:italic 17px Georgia,serif; }
.statistics-book-copy { min-width:0; }
.statistics-book-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 13px/1.35 Georgia,'Songti SC',serif; }
.statistics-book-copy small { display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:8px; }
.statistics-book-button > em { color:var(--accent); font:normal 11px Georgia,serif; }
.statistics-detail { min-width:0; overflow-y:auto; padding:38px 52px 70px; }
.statistics-book-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; padding-bottom:25px; border-bottom:1px solid var(--line); }
.statistics-book-heading h3 { margin:6px 0 5px; font:500 28px/1.2 Georgia,'Songti SC',serif; }
.statistics-book-heading p { margin:0; color:var(--muted); font-size:10px; }
.statistics-book-totals { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; text-align:right; }
.statistics-book-totals div { display:flex; flex-direction:column; gap:5px; }
.statistics-book-totals strong { font:500 18px/1 Georgia,serif; }
.statistics-book-totals span { color:var(--muted); font-size:8px; }
.session-history-title { margin:30px 0 14px; display:flex; justify-content:space-between; color:var(--muted); font-size:9px; letter-spacing:.12em; }
.session-record { display:grid; grid-template-columns:90px minmax(0,1fr) 110px; gap:20px; padding:20px 4px; border-top:1px solid var(--line); }
.session-record-date strong { display:block; font:500 15px Georgia,serif; }
.session-record-date span { display:block; margin-top:5px; color:var(--muted); font-size:8px; }
.session-record-range { min-width:0; }
.session-record-range p { margin:0 0 7px; font:500 11px/1.65 'Songti SC',SimSun,sans-serif; }
.session-record-range small { display:block; color:var(--muted); font-size:8px; line-height:1.5; }
.session-record-result { text-align:right; }
.session-record-result strong { display:block; color:var(--accent); font:500 15px Georgia,serif; }
.session-record-result span { display:block; margin-top:6px; color:var(--muted); font-size:8px; }
.session-record-result button { margin-top:10px; padding:6px 9px; border:1px solid var(--line); background:transparent; color:var(--accent); font-size:8px; letter-spacing:.06em; cursor:pointer; }
.session-record-result button:hover { border-color:var(--accent); background:var(--accent-soft); }
.session-record-result button:disabled { opacity:.5; cursor:wait; }
.statistics-empty { padding:75px 20px; text-align:center; color:var(--muted); }
.statistics-empty strong { display:block; margin-bottom:8px; color:var(--ink); font:400 20px Georgia,'Songti SC',serif; }

body[data-theme="paper"] { --shell: #e8e7e2; --paper: #f3f1eb; --panel: #eae8e2; }
body[data-theme="white"] { --shell:#fff; --paper:#fff; --panel:#fff; }
body[data-theme="white"] .theme-swatches button.active { border-color:#fff; }
body[data-theme="sage"] { --shell: #dfe5de; --paper: #e8ede6; --panel: #e1e7e0; --accent: #556b60; --accent-soft: rgba(85,107,96,.12); --gold: #88866a; }
body[data-theme="night"] { --shell: #171816; --paper: #20211f; --panel: #1b1c1a; --ink: #ddd8ce; --muted: #918d85; --faint: #68655f; --line: rgba(255,255,255,.1); --accent: #c0706c; --accent-soft: rgba(192,112,108,.14); --gold: #b29d73; }
body[data-theme="night"] .insight-card { background: rgba(255,255,255,.025); }
body[data-theme="night"] .settings-drawer { background: #20211f; }
body[data-theme="night"] .theme-swatches button.active { border-color: #20211f; }

.app-shell.focus-mode { grid-template-columns: 0 minmax(520px, 1fr) 0; }
.app-shell.focus-mode .library-panel, .app-shell.focus-mode .insight-panel { opacity: 0; pointer-events: none; overflow: hidden; padding-left: 0; padding-right: 0; }
.app-shell.focus-mode .titlebar { grid-template-columns: minmax(0,1fr) max-content; }
.app-shell.focus-mode .brand-lockup { display: none; }

@media (max-width: 1250px) {
  .app-shell { grid-template-columns: 230px minmax(500px, 1fr) 350px; }
  .statistics-header { padding-left:38px; padding-right:38px; }
  .statistics-layout { grid-template-columns:280px minmax(0,1fr); }
  .statistics-detail { padding-left:36px; padding-right:36px; }
}

/* The library can collapse independently of the notes column. */
.app-shell.library-hidden:not(.focus-mode) { grid-template-columns:0 minmax(520px,1fr) 390px; }
.app-shell.library-hidden .library-panel { visibility:hidden; padding:0; overflow:hidden; min-width:0; }
.reader-topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:15px 0; margin:0 auto 30px; max-width:none; background:var(--paper); border-bottom:1px solid var(--line); font-size:11px; }
.reader-topbar button { white-space:nowrap; border:0; background:transparent; padding:7px 3px; color:var(--accent); cursor:pointer; }
.reader-topbar button:disabled { opacity:.35; cursor:default; }
#readerPageStatus { color:var(--muted); text-align:center; font-size:10px; }
#pageMode { width:100%; padding:12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); }
.page-mode-help { font-size:11px; line-height:1.8; color:var(--muted); }
body:not([data-page-mode="continuous"]) .reader-panel { display:flex; flex-direction:column; overflow:hidden; padding-top:0; padding-bottom:14px; }
body:not([data-page-mode="continuous"]) .reader-topbar { width:100%; flex:none; margin-bottom:16px; }
body:not([data-page-mode="continuous"]) .chapter-heading { width:100%; margin-bottom:18px; flex:none; }
body:not([data-page-mode="continuous"]) .chapter-heading h1 { font-size:26px; max-height:84px; overflow:auto; }
body:not([data-page-mode="continuous"]) #readingViewport { flex:1; min-height:80px; width:100%; max-width:none; margin:0 auto; overflow:hidden; }
body:not([data-page-mode="continuous"]) .reader-footer { flex:none; width:100%; margin-top:12px; padding-top:6px; }
body[data-page-mode="horizontal"] #bookContent { height:100%; min-height:0; max-width:none; margin:0; column-width:var(--column-width); column-gap:48px; column-fill:auto; overflow:visible; }
body[data-page-mode="horizontal"] #bookContent p { orphans:2; widows:2; }
body[data-page-mode="horizontal"] #bookContent img { max-height:100%; object-fit:contain; }
body[data-page-mode="horizontal"] #bookContent > p:first-of-type::first-letter { float:none; font:inherit; margin:0; padding:0; }
.analysis-dialog { width:min(760px,calc(100vw - 60px)); max-height:calc(100vh - 100px); padding:36px; border:1px solid var(--line); background:var(--paper); color:var(--ink); box-shadow:var(--shadow); }
.analysis-dialog::backdrop { background:rgba(30,27,22,.3); }
.analysis-dialog header { display:flex; justify-content:space-between; align-items:start; gap:20px; }
.analysis-dialog h2 { margin:12px 0 25px; font:400 30px/1.3 var(--reader-font); }
.analysis-dialog button,.library-analysis-button { padding:9px 12px; border:1px solid var(--line); background:transparent; color:var(--accent); cursor:pointer; }
.analysis-metrics { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin:15px 0 24px; }
.analysis-metrics > div { background:var(--paper); padding:20px; }
.analysis-metrics small { display:block; color:var(--muted); font-size:12px; }
.analysis-metrics strong { display:block; margin-top:12px; font:400 28px/1.2 var(--reader-font); }
.analysis-advice { padding:18px 22px; border-left:2px solid var(--gold); background:var(--panel); font:18px/1.8 var(--reader-font); }
.analysis-method { font-size:12px; line-height:1.9; color:var(--muted); }
.analysis-method a { color:var(--accent); }
.library-analysis-button { display:block; margin:18px 0 0; font-size:12px; }
.vocabulary-demand h3 { font:400 22px/1.5 var(--reader-font); margin:25px 0 10px; }
.vocabulary-demand table { width:100%; border-collapse:collapse; font-size:12px; line-height:1.7; }
.vocabulary-demand th,.vocabulary-demand td { text-align:left; padding:12px 8px; border-bottom:1px solid var(--line); }
.vocabulary-demand th { font-weight:400; color:var(--muted); }
.vocabulary-demand td:nth-child(2) { white-space:nowrap; font-weight:600; }
.coverage-main { background:var(--panel); color:var(--accent); }
.analysis-method summary { cursor:pointer; padding:12px 0; color:var(--accent); }
.library-card-mark { position:relative; width:84px; height:120px; flex-shrink:0; }
.original-book-cover { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; }
.has-book-cover { background:transparent; padding:0; }
.has-book-cover .original-book-cover { opacity:1; }
.book-cover.has-book-cover > span,.has-book-cover > .cover-fallback { visibility:hidden; }
.book-cover.has-book-cover::after { display:none; }
.reader-topbar { flex-wrap:wrap; }
.range-export-picker { position:fixed; top:104px; z-index:85; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 15px; background:var(--paper); border:1px solid var(--gold); box-shadow:var(--shadow); font-size:12px; line-height:1.6; }
.range-export-picker button { flex-shrink:0; border:1px solid var(--line); background:transparent; padding:6px 10px; cursor:pointer; }
.export-picking #bookContent { cursor:crosshair; }
.export-start-paragraph { outline:1px dashed var(--gold); outline-offset:5px; }
#rangeExportSummary { white-space:pre-wrap; }
.export-format-options { display:grid; gap:12px; margin:20px 0; }
.export-format-options button { text-align:left; padding:16px; font-size:17px; }
.export-format-options small { display:block; margin-top:7px; color:var(--muted); font-size:12px; }
.export-format-options button:disabled { opacity:.45; cursor:default; }
.export-scope-field { display:grid; grid-template-columns:90px 1fr; align-items:center; gap:14px; margin:5px 0 18px; color:var(--muted); font-size:12px; }
.export-scope-field select { width:100%; padding:11px 12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font:14px/1.4 var(--reader-font); }
.pick-export-range { width:100%; margin:-4px 0 15px; padding:13px 16px !important; border-color:var(--accent) !important; background:var(--accent-soft) !important; text-align:center; }

.paragraph-note-block { position:relative; }
.paragraph-note-trigger { position:absolute; z-index:3; right:-27px; top:.15em; display:grid; place-items:center; width:22px; height:22px; padding:3px; border:1px solid transparent; border-radius:50%; background:transparent; color:var(--faint); opacity:0; cursor:pointer; transition:.16s ease; }
.paragraph-note-block:hover>.paragraph-note-trigger,.paragraph-note-trigger:focus-visible,.paragraph-note-trigger.has-note { opacity:1; }
.paragraph-note-trigger:hover { border-color:var(--line); color:var(--accent); background:var(--panel); }
.paragraph-note-trigger.has-note { color:var(--gold); background:color-mix(in srgb,var(--gold) 12%,transparent); }
.paragraph-note-trigger svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.paragraph-note-dialog blockquote { max-height:150px; overflow:auto; margin:0 0 22px; padding:14px 18px; border-left:2px solid var(--gold); background:var(--panel); color:var(--muted); font:15px/1.75 var(--reader-font); }
.paragraph-note-dialog label { display:grid; gap:8px; margin:16px 0; color:var(--muted); font-size:12px; }
.paragraph-note-dialog input,.paragraph-note-dialog textarea { width:100%; box-sizing:border-box; padding:12px 14px; border:1px solid var(--line); background:var(--paper); color:var(--ink); resize:vertical; font:16px/1.65 var(--reader-font); }
.paragraph-note-actions { display:grid; grid-template-columns:auto 1fr auto; gap:12px; margin-top:22px; }
.paragraph-note-actions .primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.paragraph-note-actions .danger { color:#963b36; }

.reading-assistant-dialog { width:min(920px,calc(100vw - 48px)); height:min(780px,calc(100vh - 48px)); padding:0; border:1px solid var(--line); background:var(--paper); color:var(--ink); box-shadow:var(--shadow); }
.reading-assistant-dialog::backdrop { background:rgba(30,27,22,.34); }
.reading-assistant-dialog>header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:25px 28px 20px; border-bottom:1px solid var(--line); }
.reading-assistant-dialog h2 { margin:5px 0 4px; font:400 29px/1.2 var(--reader-font); }
.reading-assistant-dialog header p { margin:0; color:var(--muted); font-size:12px; }
.reading-assistant-dialog header button,.assistant-quick-prompts button,.reading-assistant-dialog footer button { padding:9px 12px; border:1px solid var(--line); background:transparent; color:var(--accent); cursor:pointer; }
.assistant-quick-prompts { display:flex; flex-wrap:wrap; gap:8px; padding:14px 28px; border-bottom:1px solid var(--line); }
.assistant-quick-prompts button { border-radius:18px; padding:7px 12px; font-size:11px; }
.assistant-messages { height:calc(100% - 282px); overflow:auto; padding:26px 28px; }
.assistant-welcome { max-width:600px; margin:45px auto; text-align:center; color:var(--muted); }
.assistant-welcome strong { display:block; margin-bottom:12px; color:var(--ink); font:400 24px/1.35 var(--reader-font); }
.assistant-welcome p { line-height:1.8; }
.assistant-message { width:min(78%,680px); margin:0 0 18px; }
.assistant-message.user { margin-left:auto; }
.assistant-message>span { display:block; margin-bottom:5px; color:var(--muted); font-size:10px; letter-spacing:.08em; }
.assistant-message>div { padding:14px 17px; border:1px solid var(--line); background:var(--panel); font:15px/1.75 var(--reader-font); }
.assistant-message.user>div { background:var(--accent); color:#fff; border-color:var(--accent); }
.assistant-message small { display:block; margin-top:6px; color:var(--muted); line-height:1.5; }
.reading-assistant-dialog>footer { display:grid; grid-template-columns:1fr auto; gap:10px; padding:14px 28px 8px; border-top:1px solid var(--line); }
.reading-assistant-dialog textarea { width:100%; box-sizing:border-box; resize:none; padding:10px 12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font:15px/1.55 var(--reader-font); }
.reading-assistant-dialog footer button { min-width:76px; background:var(--accent); color:#fff; border-color:var(--accent); }
.assistant-status { margin:0; padding:0 28px 13px; color:var(--muted); font-size:10px; }