:root {
  --ink: #201b25;
  --muted: #716b76;
  --paper: #f6f2ed;
  --paper-deep: #ebe4db;
  --wine: #8d2e48;
  --wine-deep: #622037;
  --gold: #c69a57;
  --green: #2d6a57;
  --line: rgba(43, 33, 47, .13);
  --shadow: 0 24px 70px rgba(27, 20, 31, .22);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  color: var(--ink);
  background: #211c26;
  letter-spacing: 0;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { overflow-x: hidden; }
button, input, select, textarea, output { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { letter-spacing: 0; }

.app-shell { display: grid; grid-template-columns: 310px minmax(0, 1fr); min-height: 100vh; background: var(--paper); }
.chapter-panel { position: relative; z-index: 20; display: flex; flex-direction: column; min-width: 0; height: 100vh; background: #f1ece6; border-right: 1px solid var(--line); }
.brand-block { display: flex; align-items: center; justify-content: space-between; padding: 24px 23px 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; color: #fff; background: var(--wine); border-radius: 3px; font-family: Georgia, serif; font-size: 23px; box-shadow: 6px 6px 0 rgba(141, 46, 72, .12); }
.brand b { display: block; font-family: SimSun, "Songti SC", serif; font-size: 19px; }
.brand small { display: block; margin-top: 4px; color: #8b818b; font-family: Georgia, serif; font-size: 9px; letter-spacing: 1.5px; }
.library-summary { display: flex; align-items: center; justify-content: space-between; margin: 0 18px 18px; padding: 16px 15px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.library-summary > div:first-child { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; }
.library-summary span { font-size: 12px; color: var(--muted); }
.library-summary strong { font-family: Georgia, serif; font-size: 27px; font-weight: 400; }
.library-summary small { grid-column: 1 / -1; margin-top: 3px; font-size: 8px; color: #9a9099; letter-spacing: 1.8px; }
.ring-progress { --progress: 0; display: grid; place-items: center; width: 45px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--wine) calc(var(--progress) * 1%), #ddd4d1 0); position: relative; }
.ring-progress::after { content: ""; position: absolute; inset: 4px; border-radius: inherit; background: #f1ece6; }
.ring-progress span { position: relative; z-index: 1; font-family: Georgia, serif; font-size: 10px; color: var(--wine-deep); }
.search-box { display: flex; align-items: center; gap: 8px; margin: 0 18px 14px; padding: 9px 11px; border: 1px solid var(--line); background: rgba(255,255,255,.45); }
.search-box span { color: #8d848d; font-size: 21px; line-height: 1; }
.search-box input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.search-box input::placeholder { color: #a29aa1; }
.chapter-list { flex: 1; overflow: auto; padding: 0 10px 14px; scrollbar-width: thin; scrollbar-color: #c6bbb9 transparent; }
.chapter-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) 14px; gap: 10px; align-items: center; width: 100%; min-height: 61px; padding: 10px 12px; border: 0; border-left: 3px solid transparent; color: inherit; background: transparent; text-align: left; cursor: pointer; transition: .2s ease; }
.chapter-item:hover { background: rgba(255,255,255,.6); }
.chapter-item.is-active { border-left-color: var(--wine); background: #fff; box-shadow: 0 6px 20px rgba(57, 42, 55, .07); }
.chapter-number { font-family: Georgia, serif; font-size: 14px; color: #a3979e; }
.chapter-item.is-active .chapter-number { color: var(--wine); }
.chapter-item b { display: block; overflow: hidden; color: #383039; font-family: SimSun, "Songti SC", serif; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.chapter-item small { display: block; overflow: hidden; margin-top: 5px; color: #9a9199; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.chapter-item i { color: #aca2aa; font-style: normal; }
.chapter-item.is-read .chapter-number::after { content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 3px; border-radius: 50%; background: var(--green); vertical-align: middle; }
.side-test-link { display: grid; grid-template-columns: 28px 1fr 20px; align-items: center; gap: 10px; margin: 14px 18px 20px; padding: 13px; color: white; background: var(--wine-deep); box-shadow: 0 10px 26px rgba(98, 32, 55, .2); }
.side-test-link b, .side-test-link small { display: block; }
.side-test-link b { font-size: 12px; }
.side-test-link small { margin-top: 3px; color: #d9bdc7; font-size: 9px; }
.panel-scrim { display: none; }
.reader-main { min-width: 0; min-height: 100vh; }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 0 34px; background: #fcfaf7; border-bottom: 1px solid var(--line); }
.topbar-path { display: flex; align-items: center; gap: 12px; color: #a0949c; font-family: Georgia, serif; font-size: 10px; letter-spacing: 1.4px; }
.topbar-path i { font-style: normal; color: #d5ced1; }
.topbar-path b { color: var(--wine); font-weight: 600; letter-spacing: 1px; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.sound-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); color: #776d76; background: transparent; cursor: pointer; }
.sound-toggle.is-on { color: var(--green); border-color: rgba(45,106,87,.35); background: rgba(45,106,87,.06); }
.nav-pill { display: inline-flex; align-items: center; gap: 12px; min-height: 39px; padding: 0 15px; color: #fff; background: var(--wine); font-size: 12px; }
.menu-button { display: none; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); color: var(--ink); background: transparent; cursor: pointer; }
.mobile-only { display: none; }

.novel-stage { position: relative; min-height: calc(100vh - 70px); overflow: hidden; background: transparent; isolation: isolate; }
.scene-image, .scene-vignette, .scene-glow { position: absolute; inset: 0; }
.scene-image { z-index: -4; background-position: center; background-size: cover; transform: none; filter: saturate(1.1) contrast(1) brightness(.9); transition: opacity .18s ease; }
.scene-vignette { z-index: -3; background: linear-gradient(90deg, rgba(10,8,12,.6) 0%, rgba(15,12,18,.25) 52%, rgba(10,8,12,.5) 100%), linear-gradient(0deg, rgba(8,6,10,.75) 0%, transparent 45%); }
.scene-glow { z-index: -2; background: radial-gradient(circle at 73% 28%, rgba(255,230,200,.12), transparent 40%); }
.story-card { position: relative; width: min(800px, calc(100% - 90px)); min-height: 490px; max-height: calc(100vh - 185px); margin: 46px auto 108px; padding: 39px 52px 46px; overflow: auto; background: rgba(249,246,241,.94); border-top: 3px solid var(--wine); border-radius: 2px; box-shadow: var(--shadow); backdrop-filter: blur(8px); scrollbar-width: thin; }
.story-card::after { content: ""; position: absolute; top: 13px; right: 13px; bottom: 13px; left: 13px; border: 1px solid rgba(141,46,72,.11); pointer-events: none; }
.story-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--wine); font-family: Georgia, serif; font-size: 9px; letter-spacing: 1.1px; }
.eyebrow-line { width: 34px; height: 1px; background: var(--gold); }
.story-eyebrow span:last-child { color: #8b7d86; letter-spacing: .2px; }
.story-card h1 { max-width: 640px; margin: 15px 0 8px; font-family: SimSun, "Songti SC", serif; font-size: clamp(24px, 3vw, 34px); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.reading-hint { display: flex; align-items: center; gap: 7px; margin-bottom: 24px; color: #948a91; font-size: 10px; }
.hint-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.story-copy { position: relative; z-index: 1; }
.story-copy p { margin: 0 0 18px; color: #3a333a; font-family: SimSun, "Songti SC", serif; font-size: 17px; line-height: 2; text-align: justify; }
.story-copy p:last-child { margin-bottom: 0; }
.vocab-word { position: relative; display: inline; margin: 0 1px; padding: 1px 3px 2px; border: 0; border-bottom: 1px solid rgba(141,46,72,.5); color: var(--wine-deep); background: rgba(141,46,72,.08); font-family: Georgia, serif; font-size: .98em; font-weight: 700; cursor: help; }
.vocab-word:hover, .vocab-word:focus-visible { color: #fff; outline: 0; background: var(--wine); }
.word-popover { position: fixed; z-index: 100; min-width: 170px; padding: 12px 15px; color: #fff; background: #28222b; border-left: 3px solid var(--gold); box-shadow: 0 13px 34px rgba(0,0,0,.24); pointer-events: none; }
.word-popover small, .word-popover strong, .word-popover span { display: block; }
.word-popover small { color: #bcae9b; font-family: Georgia, serif; font-size: 8px; letter-spacing: 1.5px; }
.word-popover strong { margin-top: 4px; font-family: Georgia, serif; font-size: 17px; }
.word-popover span { margin-top: 4px; color: #f1dde4; font-size: 13px; }
.page-controls { position: absolute; right: 0; bottom: 0; left: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 82px; padding: 0 max(26px, 6vw); color: #f3edef; background: rgba(30,24,33,.88); border-top: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); }
.page-button { display: inline-flex; align-items: center; gap: 12px; width: max-content; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; }
.page-button.next { justify-self: end; text-align: right; }
.page-button > span:first-child, .page-button.next > span:last-child { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid rgba(255,255,255,.26); }
.page-button small { display: block; margin-bottom: 2px; color: #aa9da8; font-family: Georgia, serif; font-size: 7px; letter-spacing: 1.5px; }
.page-button:disabled { opacity: .28; cursor: default; }
.page-status { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: Georgia, serif; }
.page-status > span { display: flex; align-items: baseline; gap: 9px; }
.page-status b { color: #fff; font-size: 19px; font-weight: 400; }
.page-status i { color: #786e78; font-style: normal; }
.page-status span span { color: #a89ca7; font-size: 11px; }
.page-dots { display: flex; width: min(180px, 28vw); gap: 3px; }
.page-dots button { flex: 1; min-width: 2px; height: 2px; padding: 0; border: 0; background: rgba(255,255,255,.22); cursor: pointer; }
.page-dots button.is-active { background: var(--gold); }
.global-toast { position: fixed; right: 24px; bottom: 24px; z-index: 200; max-width: calc(100vw - 48px); padding: 12px 17px; color: #fff; background: #29232c; border-left: 3px solid var(--gold); box-shadow: 0 14px 36px rgba(0,0,0,.2); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .25s ease; }
.global-toast.is-visible { opacity: 1; transform: none; }
.global-toast[data-tone="error"] { border-left-color: #d95c67; }

/* Quiz */
.test-page { background: #ece7e1; }
.test-shell { min-height: 100vh; }
.test-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 0 clamp(18px, 4vw, 56px); background: #231e27; color: #fff; }
.test-topbar .brand-mark { width: 37px; height: 37px; }
.test-topbar .brand small { color: #a99da8; }
.reader-link { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 14px; border: 1px solid rgba(255,255,255,.2); color: #e9e2e7; font-size: 12px; }
.test-nav { display: flex; align-items: center; gap: 9px; }
.test-layout { display: grid; grid-template-columns: 285px minmax(0, 1fr); min-height: calc(100vh - 72px); }
.test-sidebar { padding: 29px 20px; background: #f6f2ed; border-right: 1px solid var(--line); }
.section-kicker { color: var(--wine); font-family: Georgia, serif; font-size: 9px; letter-spacing: 1.5px; }
.test-sidebar h1 { margin: 7px 0 6px; font-family: SimSun, "Songti SC", serif; font-size: 23px; }
.test-sidebar > p { margin: 0 0 20px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.selection-actions { display: flex; justify-content: space-between; margin-bottom: 10px; }
.text-button { padding: 0; border: 0; color: var(--wine); background: none; font-size: 11px; cursor: pointer; }
.test-chapters { display: grid; gap: 6px; max-height: calc(100vh - 340px); overflow: auto; }
.chapter-check { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 9px; align-items: center; padding: 10px; border: 1px solid transparent; background: rgba(255,255,255,.58); cursor: pointer; }
.chapter-check:has(input:checked) { border-color: rgba(141,46,72,.32); background: #fff; }
.chapter-check input { width: 15px; height: 15px; accent-color: var(--wine); }
.chapter-check b, .chapter-check small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapter-check b { font-family: SimSun, "Songti SC", serif; font-size: 12px; }
.chapter-check small { margin-top: 3px; color: #91868e; font-size: 9px; }
.question-count-control { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 10px; align-items: center; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.question-count-control label { color: var(--muted); font-size: 11px; }
.question-count-control select { min-width: 0; width: 100%; min-height: 36px; padding: 0 9px; color: var(--ink); background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 8px; outline: 0; }
.question-count-control select:focus-visible { border-color: rgba(103,170,221,.72); box-shadow: 0 0 0 3px rgba(103,170,221,.12); }
.question-count-control small { grid-column: 1 / -1; color: #91868e; font-size: 9px; line-height: 1.5; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 18px; border: 0; color: #fff; background: var(--wine); cursor: pointer; box-shadow: 0 8px 22px rgba(141,46,72,.18); }
.primary-button:disabled { opacity: .45; cursor: default; box-shadow: none; }
.start-test { width: 100%; margin-top: 16px; }
.test-main { padding: clamp(25px, 4vw, 52px); }
.quiz-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; max-width: 980px; margin: 0 auto 24px; }
.quiz-header h2 { margin: 6px 0 0; font-family: SimSun, "Songti SC", serif; font-size: 28px; }
.score-board { display: grid; grid-template-columns: repeat(2, 100px); border: 1px solid var(--line); background: rgba(255,255,255,.65); }
.score-board div { padding: 12px 14px; }
.score-board div + div { border-left: 1px solid var(--line); }
.score-board small, .score-board strong { display: block; }
.score-board small { color: var(--muted); font-size: 9px; }
.score-board strong { margin-top: 4px; font-family: Georgia, serif; font-size: 20px; font-weight: 400; }
.quiz-surface { max-width: 980px; margin: 0 auto; }
.empty-state { display: grid; place-items: center; min-height: 430px; padding: 40px; border: 1px dashed #cfc5c6; background: rgba(255,255,255,.38); text-align: center; }
.empty-state-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; color: var(--wine); border: 1px solid rgba(141,46,72,.25); font-family: Georgia, serif; font-size: 28px; }
.empty-state h3 { margin: 0 0 8px; font-family: SimSun, "Songti SC", serif; font-size: 20px; }
.empty-state p { max-width: 430px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.inline-reader-link { color: #678fc1; text-decoration: underline; text-underline-offset: 3px; }
.inline-reader-link:hover { color: #8975c7; }
.question-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.question-card { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 108px; padding: 17px; background: #fff; border: 1px solid transparent; box-shadow: 0 7px 22px rgba(41,31,43,.055); }
.question-card.is-correct { border-color: rgba(45,106,87,.42); }
.question-card.is-wrong { border-color: rgba(180,58,72,.42); }
.question-number { align-self: start; color: #a3979f; font-family: Georgia, serif; font-size: 11px; }
.question-word { margin-bottom: 9px; font-family: Georgia, serif; font-size: 20px; font-weight: 600; }
.answer-input { width: 100%; height: 36px; padding: 0 10px; border: 0; border-bottom: 1px solid #cfc5c7; outline: 0; color: var(--ink); background: #faf8f5; font-size: 13px; }
.answer-input:focus { border-color: var(--wine); background: #fff; }
.correct-answer { display: none; margin-top: 7px; color: var(--green); font-size: 11px; }
.question-card.is-wrong .correct-answer { display: block; }
.quiz-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 22px; padding: 18px 0 45px; border-top: 1px solid var(--line); }
.secondary-button { min-height: 42px; padding: 0 16px; border: 1px solid var(--line); color: var(--ink); background: transparent; cursor: pointer; }
.result-panel { max-width: 980px; margin: 0 auto 24px; padding: 24px; color: #fff; background: #29232d; border-left: 4px solid var(--gold); }
.result-panel h3 { margin: 0; font-family: SimSun, "Songti SC", serif; font-size: 22px; }
.result-panel p { margin: 8px 0 0; color: #cfc3cb; font-size: 12px; }
.result-score { float: right; margin-top: -43px; color: var(--gold); font-family: Georgia, serif; font-size: 38px; }
.result-score small { font-size: 13px; }
.error-review { max-width: 980px; margin: 0 auto 30px; }
.error-review h3 { font-family: SimSun, "Songti SC", serif; }
.error-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.error-item { padding: 12px; background: #fff; border-left: 2px solid #bb4859; }
.error-item b, .error-item span { display: block; }
.error-item b { font-family: Georgia, serif; }
.error-item span { margin-top: 4px; color: var(--muted); font-size: 11px; }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .chapter-panel { position: fixed; top: 0; bottom: 0; left: 0; width: min(340px, 88vw); transform: translateX(-105%); transition: transform .28s ease; box-shadow: 20px 0 60px rgba(0,0,0,.22); }
  .chapters-open .chapter-panel { transform: none; }
  .panel-scrim { position: fixed; inset: 0; z-index: 19; display: block; background: rgba(22,18,25,.58); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
  .chapters-open .panel-scrim { opacity: 1; pointer-events: auto; }
  .menu-button, .mobile-only { display: grid; }
  .topbar { padding: 0 18px; }
  .topbar-path span, .topbar-path i, .sound-toggle span:last-child { display: none; }
  .story-card { width: min(760px, calc(100% - 48px)); }
  .test-layout { grid-template-columns: 1fr; }
  .test-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .test-chapters { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 260px; }
}

@media (max-width: 620px) {
  .topbar { height: 60px; }
  .nav-pill { padding: 0 11px; }
  .sound-toggle { display: none; }
  .novel-stage { min-height: calc(100vh - 60px); }
  .story-card { width: calc(100% - 24px); min-height: 0; max-height: calc(100vh - 155px); margin: 18px auto 94px; padding: 26px 23px 33px; }
  .story-card::after { inset: 8px; }
  .story-card h1 { font-size: 23px; }
  .story-copy p { font-size: 16px; line-height: 1.9; }
  .page-controls { height: 76px; padding: 0 14px; }
  .page-button { gap: 7px; font-size: 12px; }
  .page-button > span:first-child, .page-button.next > span:last-child { width: 31px; height: 31px; }
  .page-button small { display: none; }
  .page-dots { width: 64px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .page-dots::-webkit-scrollbar { display: none; }
  .topbar-actions { gap: 7px; }
  .test-topbar { min-height: 64px; }
  .test-topbar .brand small { display: none; }
  .test-layout { min-height: calc(100vh - 64px); }
  .test-sidebar { padding: 23px 15px; }
  .test-chapters { grid-template-columns: 1fr; max-height: 220px; }
  .test-main { padding: 24px 15px; }
  .quiz-header { align-items: stretch; flex-direction: column; }
  .score-board { grid-template-columns: repeat(2,1fr); }
  .question-list { grid-template-columns: 1fr; }
  .error-list { grid-template-columns: 1fr; }
  .result-score { float: none; margin: 15px 0 0; }
}

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

/* Visual-novel redesign based on the supplied reference */
.reader-page { overflow: hidden; background: #111012; }
.reader-page .app-shell { grid-template-columns: 340px minmax(0, 1fr); height: 100vh; min-height: 0; background: #111012; }
.reader-page .chapter-panel { height: 100vh; color: #e8e4e1; background: rgba(13, 12, 14, .98); border-right-color: rgba(255,255,255,.12); }
.reader-page .brand-block { min-height: 92px; padding: 22px 23px; border-bottom: 1px solid rgba(255,255,255,.12); }
.reader-page .brand-mark { width: 38px; height: 38px; color: #e7bb32; background: transparent; border: 2px solid #e7bb32; border-radius: 3px; box-shadow: none; font-family: Arial, sans-serif; font-size: 18px; }
.reader-page .brand b { color: #f1eeea; font-family: KaiTi, STKaiti, SimSun, serif; font-size: 19px; letter-spacing: 2px; }
.reader-page .brand small { color: #777177; }
.reader-page .search-box { display: none; }
.reader-page .chapter-list { padding: 12px 0 8px; scrollbar-color: #c7b68a rgba(255,255,255,.04); }
.reader-page .chapter-item { grid-template-columns: 48px minmax(0, 1fr) 14px; gap: 13px; min-height: 84px; padding: 14px 18px; border: 0; color: #c5c0c2; }
.reader-page .chapter-item:hover { background: rgba(255,255,255,.05); }
.reader-page .chapter-item.is-active { color: #f4d46a; background: linear-gradient(90deg, rgba(128,99,20,.42), rgba(104,80,17,.23)); border: 0; box-shadow: none; }
.reader-page .chapter-number { display: grid; place-items: center; width: 36px; height: 30px; color: #8f8a8e; background: rgba(255,255,255,.09); border-radius: 5px; font-size: 13px; }
.reader-page .chapter-item.is-active .chapter-number { color: #f6da76; background: rgba(191,149,36,.42); }
.reader-page .chapter-item b { color: inherit; font-family: KaiTi, STKaiti, SimSun, serif; font-size: 15px; line-height: 1.55; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.reader-page .chapter-item small { color: #6f6b6e; font-size: 9px; }
.reader-page .chapter-item.is-active small { color: #a99049; }
.reader-page .chapter-item i { color: #69656a; }
.reader-page .chapter-item.is-read .chapter-number::after { display: none; }
.reader-page .library-summary { flex: 0 0 auto; margin: 0; min-height: 64px; padding: 12px 24px; border-color: rgba(255,255,255,.11); background: #111012; }
.reader-page .library-summary > div:first-child { display: flex; flex-wrap: wrap; column-gap: 5px; }
.reader-page .library-summary span, .reader-page .library-summary strong { color: #827c81; font-family: inherit; font-size: 11px; font-weight: 400; }
.reader-page .library-summary small { width: 100%; color: #514d51; font-size: 7px; }
.reader-page .ring-progress { width: 36px; background: conic-gradient(#d2aa37 calc(var(--progress) * 1%), #343034 0); }
.reader-page .ring-progress::after { background: #111012; }
.reader-page .ring-progress span { color: #d3b968; font-size: 8px; }
.reader-page .side-test-link { flex: 0 0 auto; margin: 14px 16px 18px; min-height: 58px; color: #151315; background: #c7a136; box-shadow: none; }
.reader-page .side-test-link small { color: #5e4a13; }
.reader-page .reader-main { height: 100vh; min-height: 0; background: #29262a; }
.reader-page .topbar { position: relative; z-index: 10; height: 72px; padding: 0 28px 0 36px; color: #fff; background: rgba(24,22,25,.93); border-bottom-color: rgba(255,255,255,.12); backdrop-filter: blur(14px); }
.reader-page .topbar-path { gap: 13px; color: #e9e5e2; font-family: inherit; }
.reader-page .topbar-path .top-book { color: #e7bb32; font-size: 29px; line-height: 1; transform: rotate(90deg); }
.reader-page .topbar-path strong { font-family: KaiTi, STKaiti, SimSun, serif; font-size: 20px; letter-spacing: 2px; }
.reader-page #topStoryCode { display: none; }
.reader-page .sound-toggle, .reader-page .nav-pill { min-height: 40px; padding: 0 18px; border: 1px solid rgba(255,255,255,.24); border-radius: 22px; color: #d8d3d6; background: rgba(20,18,21,.22); box-shadow: none; }
.reader-page .nav-pill { display: inline-flex; gap: 8px; }
.reader-page .sound-toggle:hover, .reader-page .nav-pill:hover { color: #f2ca4c; border-color: rgba(231,187,50,.65); }
.reader-page .novel-stage { height: calc(100vh - 72px); min-height: 0; background: transparent; }
.reader-page .scene-image { background-color: #3a3236; background-position: center 34%; filter: saturate(.95) contrast(.95) brightness(.9); transform: none; }
.reader-page .scene-image.is-illustrated { background-position: center; filter: saturate(1.05) contrast(1) brightness(.95); }
.reader-page .scene-image.is-illustrated.has-imported-art { background-position: center 32%; }
.reader-page .scene-vignette { background: linear-gradient(90deg, rgba(10,8,12,.4) 0%, rgba(15,12,18,.15) 45%, rgba(12,10,16,.3) 100%), linear-gradient(0deg, rgba(8,6,10,.5) 0%, rgba(15,12,18,.1) 35%, rgba(12,10,16,.2) 100%); }
.reader-page .scene-glow { opacity: .3; background: radial-gradient(circle at 56% 21%, rgba(255,235,200,.1), transparent 50%), repeating-linear-gradient(90deg, transparent 0 4px, rgba(255,255,255,.003) 4px 5px); }
.reader-page .story-card { position: absolute; inset: 0 0 82px; width: auto; min-width: 0; max-width: 100%; min-height: 0; max-height: none; margin: 0; padding: clamp(38px, 4vw, 62px) clamp(42px, 6vw, 84px) 58px; overflow-x: hidden; color: #fff; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; scrollbar-color: rgba(231,187,50,.62) transparent; touch-action: pan-y; }
.reader-page .story-card::after { display: none; }
.reader-page .story-eyebrow { display: inline-flex; min-height: 33px; padding: 0 21px; color: #d0a929; background: rgba(14,13,15,.7); border: 1px solid rgba(211,171,51,.56); border-radius: 22px; font-size: 12px; letter-spacing: 2px; }
.reader-page .story-eyebrow #storyCode, .reader-page .story-eyebrow .eyebrow-line { display: none; }
.reader-page .story-eyebrow span:last-child { color: #bcb5b8; font-size: 11px; letter-spacing: 1px; }
.reader-page .story-card h1 { max-width: 1060px; margin: 15px 0 22px; color: #fff; font-family: KaiTi, STKaiti, SimSun, serif; font-size: clamp(36px, 4.25vw, 64px); font-weight: 700; line-height: 1.16; letter-spacing: 3px; overflow-wrap: anywhere; text-shadow: 0 4px 13px rgba(0,0,0,.58); }
.reader-page .title-divider { display: flex; align-items: center; gap: 20px; margin-bottom: 27px; }
.reader-page .title-divider > span { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(220,176,45,.78), rgba(220,176,45,.12)); }
.reader-page .reading-hint { flex: 0 0 auto; margin: 0; color: rgba(255,255,255,.52); font-size: 11px; }
.reader-page .hint-dot { width: auto; height: auto; color: #d9b037; background: transparent; font-size: 16px; }
.reader-page .story-copy { max-width: 1180px; padding: 0 5px 30px; }
.reader-page .story-copy p { min-width: 0; margin: 0 0 22px; color: rgba(255,255,255,.91); font-family: KaiTi, STKaiti, SimSun, serif; font-size: clamp(17px, 1.4vw, 21px); line-height: 2.02; letter-spacing: .5px; overflow-wrap: anywhere; text-align: left; text-shadow: 0 2px 5px rgba(0,0,0,.86); }
.reader-page .vocab-word { margin: 0 2px; padding: 0 5px 3px; color: #edc33c; background: transparent; border-bottom-color: rgba(232,189,52,.65); font-family: Arial, sans-serif; font-weight: 500; text-shadow: 0 2px 6px rgba(0,0,0,.72); }
.reader-page .vocab-word:hover, .reader-page .vocab-word:focus-visible { color: #151315; background: #e6bd38; text-shadow: none; }
.reader-page .page-controls { height: 82px; padding: 0 clamp(28px,5vw,72px); background: linear-gradient(0deg, rgba(17,15,18,.97), rgba(20,18,21,.82)); border-top-color: rgba(255,255,255,.11); }
.reader-page .page-button { color: rgba(255,255,255,.67); font-family: KaiTi, STKaiti, serif; font-size: 16px; }
.reader-page .page-button.next { min-width: 128px; min-height: 48px; padding: 0 16px 0 20px; border: 1px solid rgba(225,188,57,.72); border-radius: 26px; color: #f0ca49; }
.reader-page .page-button > span:first-child { border-color: rgba(255,255,255,.15); border-radius: 50%; }
.reader-page .page-button.next > span:first-child { width: auto; height: auto; border: 0; }
.reader-page .page-button.next > span:last-child { width: 24px; height: 24px; border: 0; border-radius: 0; color: currentColor; background: transparent; font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif; font-size: 20px; font-weight: 300; line-height: 1; opacity: .82; transition: transform .2s ease, opacity .2s ease; }
.reader-page .page-button.next:not(:disabled):hover > span:last-child { opacity: 1; transform: translateX(3px); }
.reader-page .page-status b { color: #f0c842; }
.reader-page .page-dots button { height: 5px; border-radius: 4px; background: rgba(255,255,255,.26); }
.reader-page .page-dots button.is-active { background: #efc62f; }

.vocab-scrim { position: fixed; inset: 0; z-index: 89; background: rgba(5,5,7,.58); opacity: 0; pointer-events: none; transition: .25s ease; }
.vocab-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; display: flex; flex-direction: column; width: min(390px, 92vw); padding: 25px; color: #e9e5e2; background: #181619; border-left: 1px solid rgba(255,255,255,.12); box-shadow: -22px 0 60px rgba(0,0,0,.35); transform: translateX(105%); transition: transform .28s ease; }
.vocab-open .vocab-scrim { opacity: 1; pointer-events: auto; }
.vocab-open .vocab-panel { transform: none; }
.vocab-panel header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.vocab-panel header small { color: #c9a936; font-family: Georgia, serif; font-size: 8px; letter-spacing: 1.6px; }
.vocab-panel h2 { margin: 5px 0 0; font-family: KaiTi, STKaiti, serif; font-size: 24px; }
.vocab-panel > p { margin: 16px 0; color: #8e878c; font-size: 11px; }
.vocab-list { flex: 1; overflow: auto; }
.vocab-list > div { display: grid; grid-template-columns: 31px minmax(0,1fr) auto; gap: 8px 11px; align-items: center; padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,.07); }
.vocab-list span { color: #5d585d; font-family: Georgia, serif; font-size: 9px; }
.vocab-list b { color: #eac13d; font-family: Georgia, serif; font-size: 15px; }
.vocab-list em { color: #beb7bc; font-style: normal; font-size: 12px; }
.vocab-list-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.vocab-mini-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 28px; padding: 0 9px; color: #718198; background: rgba(255,255,255,.54); border: 1px solid rgba(96,124,164,.13); border-radius: 9px 2px 9px 2px; font-size: 9px; cursor: pointer; }
.vocab-mini-action span { color: inherit; font-family: inherit; font-size: inherit; }
.vocab-mini-action:hover { color: #4f7399; background: rgba(255,255,255,.9); border-color: rgba(100,151,199,.3); }
.vocab-mini-action.primary { color: #fff; background: linear-gradient(110deg,#6dbce5,#927fe0); border-color: rgba(255,255,255,.55); box-shadow: 0 7px 16px rgba(91,111,190,.14); }

@media (max-width: 1000px) {
  .reader-page .app-shell { grid-template-columns: 1fr; }
  .reader-page .chapter-panel { position: fixed; width: min(350px, 88vw); }
  .reader-page .menu-button, .reader-page .mobile-only { display: grid; color: #e9e3e7; border-color: rgba(255,255,255,.2); }
  .reader-page .topbar { padding-left: 18px; }
  .reader-page .topbar-path .top-book { display: inline; }
}

@media (max-width: 680px) {
  .reader-page .topbar { height: 62px; padding: 0 12px; }
  .reader-page .topbar-path strong { font-size: 14px; letter-spacing: 0; }
  .reader-page .topbar-path .top-book { font-size: 22px; }
  .reader-page .topbar-actions { gap: 6px; }
  .reader-page .topbar-actions .sound-toggle, .reader-page .vocab-link { display: none; }
  .reader-page .nav-pill { min-height: 36px; padding: 0 13px; }
  .reader-page .novel-stage { height: calc(100vh - 62px); min-height: 0; }
  .reader-page .story-card { bottom: 72px; max-height: none; padding: 27px 20px 35px; }
  .reader-page .story-eyebrow { min-height: 28px; padding: 0 13px; }
  .reader-page .story-eyebrow span:last-child { max-width: 245px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .reader-page .story-card h1 { width: 100%; margin: 13px 0 16px; font-size: 31px; line-height: 1.2; letter-spacing: 1px; word-break: break-all; }
  .reader-page .title-divider { margin-bottom: 18px; }
  .reader-page .reading-hint { font-size: 9px; }
  .reader-page .story-copy p { margin-bottom: 18px; font-size: 17px; line-height: 1.85; }
  .reader-page .page-controls { height: 72px; padding: 0 12px; }
  .reader-page .page-button.next { min-width: auto; min-height: 40px; padding: 0 14px; }
  .reader-page .page-button > span:first-child { width: 30px; height: 30px; }
  .reader-page .page-dots { width: 72px; }
}

/* Unified black-and-gold visual-novel treatment for the test flow */
.test-page { color: #eee9e5; background: #0f0e10; }
.test-page .test-shell { background: #0f0e10; }
.test-page .test-topbar { min-height: 72px; padding: 0 clamp(18px,4vw,54px); background: rgba(15,14,16,.98); border-bottom: 1px solid rgba(255,255,255,.11); }
.test-page .test-topbar .brand-mark { width: 38px; height: 38px; color: #e7bb32; background: transparent; border: 2px solid #e7bb32; border-radius: 3px; box-shadow: none; }
.test-page .test-topbar .brand b { color: #f2ede9; font-family: KaiTi, STKaiti, SimSun, serif; font-size: 17px; letter-spacing: 1px; }
.test-page .test-topbar .brand small { color: #777177; }
.test-page .reader-link { min-height: 40px; padding: 0 18px; color: #ddd6da; background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.22); border-radius: 22px; }
.test-page .reader-link:hover { color: #f1c94a; border-color: rgba(231,187,50,.62); }
.test-page .test-layout { min-height: calc(100vh - 72px); background: #121114; }
.test-page .test-sidebar { position: relative; z-index: 2; padding: 30px 22px; background: #111012; border-right-color: rgba(255,255,255,.11); }
.test-page .section-kicker { color: #d5ad35; }
.test-page .test-sidebar h1, .test-page .quiz-header h2 { color: #fff; font-family: KaiTi, STKaiti, SimSun, serif; letter-spacing: 1px; }
.test-page .test-sidebar > p { color: #878086; }
.test-page .selection-actions { color: #8d858b; }
.test-page .text-button { color: #e3bc3d; }
.test-page .test-chapters { scrollbar-color: rgba(219,177,54,.55) transparent; }
.test-page .chapter-check { color: #d7d1d5; background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.07); }
.test-page .chapter-check:hover { background: rgba(255,255,255,.065); }
.test-page .chapter-check:has(input:checked) { color: #f3d775; background: linear-gradient(90deg, rgba(124,96,22,.38), rgba(70,55,18,.18)); border-color: rgba(221,180,55,.42); }
.test-page .chapter-check input { accent-color: #d9b039; }
.test-page .chapter-check b { color: inherit; font-family: KaiTi, STKaiti, SimSun, serif; }
.test-page .chapter-check small { color: #777076; }
.test-page .primary-button { color: #171417; background: #d5ad34; box-shadow: 0 8px 28px rgba(213,173,52,.14); font-weight: 700; }
.test-page .primary-button:hover { background: #e6c24e; }
.test-page .primary-button:disabled { color: #6f6753; background: #3a352b; }
.test-page .test-main { position: relative; isolation: isolate; background: radial-gradient(circle at 82% 12%, rgba(128,72,98,.24), transparent 34%), radial-gradient(circle at 30% 92%, rgba(86,73,122,.18), transparent 37%), #19161b; }
.test-page .test-main::before { content: ""; position: fixed; inset: 72px 0 0 285px; z-index: -1; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.02), transparent 35%), repeating-linear-gradient(90deg, transparent 0 4px, rgba(255,255,255,.008) 4px 5px); }
.test-page .quiz-header { position: relative; z-index: 1; }
.test-page .score-board { color: #ece5e8; background: rgba(16,14,17,.72); border-color: rgba(255,255,255,.13); backdrop-filter: blur(10px); }
.test-page .score-board div + div { border-left-color: rgba(255,255,255,.12); }
.test-page .score-board small { color: #8f878c; }
.test-page .score-board strong { color: #edc544; }
.test-page .quiz-surface { position: relative; z-index: 1; }
.test-page .empty-state { min-height: 440px; color: #eae4e7; background: rgba(18,16,20,.66); border-color: rgba(220,179,56,.28); backdrop-filter: blur(12px); }
.test-page .empty-state-mark { color: #e9c342; background: rgba(214,171,49,.07); border-color: rgba(221,179,52,.45); }
.test-page .empty-state h3 { color: #fff; font-family: KaiTi, STKaiti, SimSun, serif; }
.test-page .empty-state p { color: #979096; }
.test-page .question-list { gap: 14px; }
.test-page .question-card { color: #ece7e4; background: rgba(25,22,27,.9); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 12px 34px rgba(0,0,0,.16); backdrop-filter: blur(9px); }
.test-page .question-card:hover { border-color: rgba(222,181,55,.28); }
.test-page .question-card.is-correct { border-color: rgba(84,180,137,.62); }
.test-page .question-card.is-wrong { border-color: rgba(214,79,99,.64); }
.test-page .question-number { color: #696269; }
.test-page .question-word { color: #edc443; }
.test-page .answer-input { color: #f3edef; background: rgba(255,255,255,.045); border-bottom-color: rgba(255,255,255,.22); }
.test-page .answer-input::placeholder { color: #665f65; }
.test-page .answer-input:focus { color: #fff; background: rgba(255,255,255,.075); border-color: #d9b23c; }
.test-page .correct-answer { color: #82c9a9; }
.test-page .quiz-footer { border-top-color: rgba(255,255,255,.1); }
.test-page .secondary-button { color: #dcd5da; background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.18); }
.test-page .secondary-button:hover { color: #edc747; border-color: rgba(225,183,55,.52); }
.test-page .result-panel { color: #fff; background: linear-gradient(120deg, rgba(42,36,44,.96), rgba(24,21,27,.96)); border-left-color: #e4bb3a; box-shadow: 0 14px 38px rgba(0,0,0,.18); }
.test-page .result-panel p { color: #a9a0a6; }
.test-page .result-score { color: #efca4e; }
.test-page .error-review h3 { color: #f0e9ed; font-family: KaiTi, STKaiti, SimSun, serif; }
.test-page .error-item { color: #eee7eb; background: rgba(27,24,29,.9); border: 0; border-left: 2px solid #ce5367; text-align: left; cursor: pointer; }
.test-page .error-item:hover { background: rgba(44,38,46,.95); }
.test-page .error-item b { color: #efc445; }
.test-page .error-item span { color: #999096; }
.test-page .global-toast { background: #161418; border-left-color: #e3b93b; }

@media (max-width: 900px) {
  .test-page .test-layout { min-height: calc(100vh - 72px); }
  .test-page .test-sidebar { border-bottom-color: rgba(255,255,255,.11); }
  .test-page .test-main::before { inset: 72px 0 0; }
}

@media (max-width: 620px) {
  .test-page .test-topbar { min-height: 64px; }
  .test-page .test-layout { min-height: calc(100vh - 64px); }
  .test-page .test-main::before { inset: 64px 0 0; }
  .test-page .quiz-header h2 { font-size: 25px; }
  .test-page .question-card { min-height: 104px; }
  .test-page .test-topbar .brand { gap: 8px; }
  .test-page .test-topbar .brand-mark { width: 33px; height: 33px; }
  .test-page .test-topbar .brand b { max-width: 150px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .test-page .reader-link { padding: 0 11px; font-size: 11px; }
}

/* Romantic deep-space design system — original implementation inspired by premium sci-fi romance UI */
:root {
  --space-void: #070b16;
  --space-panel: rgba(12, 18, 35, .78);
  --space-panel-strong: rgba(9, 14, 29, .93);
  --space-line: rgba(184, 218, 255, .18);
  --space-text: #f4f7fb;
  --space-muted: #8f9aaf;
  --space-ice: #a8ddfa;
  --space-blue: #78bce9;
  --space-violet: #b8a8dd;
  --space-rose: #d9b9d6;
  --space-glow: 0 0 26px rgba(126, 194, 238, .22);
}

.reader-page { color: var(--space-text); background: var(--space-void); }
.reader-page .app-shell { background: var(--space-void); }
.reader-page .chapter-panel {
  color: var(--space-text);
  background:
    radial-gradient(circle at 25% 5%, rgba(100, 140, 207, .16), transparent 28%),
    linear-gradient(180deg, rgba(9, 14, 29, .98), rgba(7, 10, 21, .985));
  border-right-color: var(--space-line);
  box-shadow: inset -1px 0 rgba(255,255,255,.025), 24px 0 70px rgba(0,0,0,.18);
}
.reader-page .chapter-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(205,229,255,.28) 0 1px, transparent 1.5px); background-size: 44px 44px; opacity: .16; mask-image: linear-gradient(180deg, #000, transparent 68%); }
.reader-page .brand-block { position: relative; min-height: 90px; border-bottom-color: var(--space-line); }
.reader-page .brand-mark, .test-page .test-topbar .brand-mark {
  width: 42px;
  height: 42px;
  color: #d9efff;
  background: radial-gradient(circle, rgba(167,220,250,.2), rgba(126,151,218,.08));
  border: 1px solid rgba(185,225,255,.52);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(130,183,231,.055), 0 0 28px rgba(122,191,239,.2);
  font-size: 18px;
}
.reader-page .brand b, .reader-page .chapter-item b, .reader-page .topbar-path strong,
.reader-page .story-card h1, .reader-page .story-copy p, .reader-page .page-button,
.test-page .test-topbar .brand b, .test-page .test-sidebar h1, .test-page .quiz-header h2,
.test-page .chapter-check b, .test-page .empty-state h3, .test-page .error-review h3 {
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}
.reader-page .brand b { color: #eef7ff; font-size: 17px; font-weight: 500; letter-spacing: 2px; }
.reader-page .brand small, .test-page .test-topbar .brand small { color: #75839c; letter-spacing: 2px; }
.reader-page .chapter-list { position: relative; scrollbar-color: rgba(145,201,239,.38) transparent; }
.reader-page .chapter-item { color: #aeb8c9; border-left: 1px solid transparent; }
.reader-page .chapter-item:hover { color: #e6f4ff; background: rgba(147,194,236,.055); }
.reader-page .chapter-item.is-active {
  color: #f2f8ff;
  background: linear-gradient(90deg, rgba(105,160,220,.24), rgba(162,140,206,.09) 72%, transparent);
  border-left-color: rgba(166,220,252,.82);
  box-shadow: inset 0 1px rgba(255,255,255,.035), inset 0 -1px rgba(255,255,255,.025);
}
.reader-page .chapter-number { color: #77849a; background: rgba(143,174,214,.08); border: 1px solid rgba(174,211,248,.09); border-radius: 50%; }
.reader-page .chapter-item.is-active .chapter-number { color: #d9f2ff; background: rgba(120,188,233,.16); border-color: rgba(169,220,251,.35); box-shadow: 0 0 18px rgba(118,190,236,.18); }
.reader-page .chapter-item b { font-weight: 500; letter-spacing: .2px; }
.reader-page .chapter-item small, .reader-page .chapter-item.is-active small { color: #75839a; }
.reader-page .library-summary { background: rgba(5,9,20,.78); border-color: var(--space-line); }
.reader-page .library-summary span, .reader-page .library-summary strong { color: #8e9bb0; }
.reader-page .ring-progress { background: conic-gradient(var(--space-ice) calc(var(--progress) * 1%), rgba(131,157,192,.14) 0); box-shadow: 0 0 18px rgba(123,196,239,.13); }
.reader-page .ring-progress::after { background: #0a1020; }
.reader-page .ring-progress span { color: #c5e9fd; }
.reader-page .side-test-link {
  color: #101827;
  background: linear-gradient(110deg, #e5f5ff, #b9ddf6 55%, #c9c0e6);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 2px 18px 2px 18px;
  box-shadow: 0 10px 35px rgba(83,150,205,.15), inset 0 1px #fff;
}
.reader-page .side-test-link small { color: #50647c; }
.reader-page .reader-main { background: #0a0e1b; }
.reader-page .topbar, .test-page .test-topbar {
  color: #f3f8fd;
  background: linear-gradient(90deg, rgba(8,13,27,.9), rgba(14,18,34,.78));
  border-bottom-color: var(--space-line);
  box-shadow: 0 8px 40px rgba(0,0,0,.13);
  backdrop-filter: blur(20px) saturate(1.25);
}
.reader-page .topbar-path { color: #eaf5fd; }
.reader-page .topbar-path .top-book { color: #b9e7ff; font-size: 19px; transform: none; filter: drop-shadow(0 0 9px rgba(131,208,249,.5)); animation: spacePulse 3.2s ease-in-out infinite; }
.reader-page .topbar-path strong { font-size: 17px; font-weight: 500; letter-spacing: 1.5px; }
.reader-page .sound-toggle, .reader-page .nav-pill, .test-page .reader-link {
  color: #cbd7e6;
  background: linear-gradient(110deg, rgba(152,192,231,.09), rgba(185,164,216,.055));
  border-color: rgba(181,216,248,.22);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.reader-page .sound-toggle:hover, .reader-page .nav-pill:hover, .test-page .reader-link:hover { color: #e9f8ff; border-color: rgba(171,224,255,.58); background: rgba(134,192,232,.12); box-shadow: var(--space-glow); }
.reader-page .novel-stage { background: #0b1020; }
.reader-page .scene-image.is-illustrated { filter: saturate(.72) contrast(1.02) brightness(.88) hue-rotate(-4deg); }
.reader-page .scene-vignette { background: linear-gradient(90deg, rgba(5,10,24,.58), rgba(8,12,25,.18) 52%, rgba(8,10,22,.28)), linear-gradient(0deg, rgba(5,8,18,.74), transparent 44%, rgba(8,12,25,.16)); }
.reader-page .scene-glow {
  opacity: 1;
  background:
    radial-gradient(circle at 72% 18%, rgba(164,216,248,.23), transparent 31%),
    radial-gradient(circle at 55% 68%, rgba(183,154,215,.15), transparent 34%),
    radial-gradient(circle, rgba(222,241,255,.65) 0 1px, transparent 1.6px);
  background-size: auto, auto, 64px 64px;
  mask-image: linear-gradient(90deg, transparent 5%, #000 48%, #000 100%);
}
.reader-page .story-card { color: var(--space-text); }
.reader-page .story-eyebrow {
  color: #d8f1ff;
  background: linear-gradient(100deg, rgba(72,111,156,.24), rgba(137,111,173,.12));
  border-color: rgba(179,220,248,.32);
  border-radius: 3px 18px 3px 18px;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 8px 30px rgba(0,0,0,.1);
  backdrop-filter: blur(14px);
}
.reader-page .story-eyebrow span:last-child { color: #afbdd0; }
.reader-page .story-card h1 { color: #f7fbff; font-size: clamp(34px,3.75vw,58px); font-weight: 500; line-height: 1.25; letter-spacing: .085em; text-shadow: 0 3px 18px rgba(0,0,0,.55), 0 0 28px rgba(160,206,241,.08); }
.reader-page .title-divider > span { background: linear-gradient(90deg, rgba(170,222,252,.7), rgba(184,164,217,.32), transparent); }
.reader-page .reading-hint { color: rgba(210,224,239,.58); }
.reader-page .hint-dot { color: #b9e8ff; text-shadow: 0 0 12px rgba(130,208,250,.58); }
.reader-page .story-copy p { color: rgba(242,247,252,.91); font-size: clamp(16px,1.24vw,19px); font-weight: 400; line-height: 2.08; letter-spacing: .035em; text-shadow: 0 2px 7px rgba(0,0,0,.75); }
.reader-page .vocab-word {
  color: #a9e2ff;
  background: linear-gradient(180deg, transparent 72%, rgba(129,197,237,.15) 72%);
  border-bottom-color: rgba(164,220,250,.58);
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 500;
  text-shadow: 0 0 12px rgba(124,202,244,.3), 0 2px 5px rgba(0,0,0,.6);
}
.reader-page .vocab-word:hover, .reader-page .vocab-word:focus-visible { color: #0b1424; background: linear-gradient(110deg, #e5f6ff, #b8ddf5); box-shadow: 0 0 22px rgba(125,204,246,.34); text-shadow: none; }
.reader-page .word-popover { color: #f5faff; background: rgba(10,17,34,.94); border-left-color: #9edcf7; border-radius: 2px 12px 2px 12px; box-shadow: 0 15px 45px rgba(0,0,0,.32), 0 0 25px rgba(122,190,236,.13); backdrop-filter: blur(18px); }
.reader-page .word-popover small { color: #8bbbd9; }
.reader-page .word-popover span { color: #d8d0e4; }
.reader-page .page-controls {
  background: linear-gradient(0deg, rgba(5,9,20,.98), rgba(8,13,27,.82));
  border-top-color: var(--space-line);
  box-shadow: 0 -12px 45px rgba(0,0,0,.14);
  backdrop-filter: blur(18px);
}
.reader-page .page-button { color: #9ca9bc; font-weight: 400; }
.reader-page .page-button:not(:disabled):hover { color: #e7f6ff; }
.reader-page .page-button.next { color: #dff5ff; background: linear-gradient(110deg, rgba(104,174,221,.17), rgba(167,137,199,.13)); border-color: rgba(164,219,250,.42); box-shadow: 0 0 24px rgba(104,183,232,.11), inset 0 1px rgba(255,255,255,.05); }
.reader-page .page-button.next:hover { border-color: rgba(181,230,255,.78); box-shadow: 0 0 30px rgba(107,191,239,.2); }
.reader-page .page-status b { color: #c7ebff; font-weight: 400; }
.reader-page .page-dots button { background: rgba(166,190,221,.2); }
.reader-page .page-dots button.is-active { background: linear-gradient(90deg, #9edcf8, #bca9df); box-shadow: 0 0 12px rgba(140,209,247,.45); }
.reader-page .vocab-panel { color: #f0f7fc; background: linear-gradient(180deg, rgba(10,16,33,.985), rgba(7,11,24,.99)); border-left-color: var(--space-line); box-shadow: -25px 0 70px rgba(0,0,0,.35); }
.reader-page .vocab-panel header { border-bottom-color: var(--space-line); }
.reader-page .vocab-panel header small, .reader-page .vocab-list b { color: #a8ddfa; }
.reader-page .vocab-panel h2 { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-weight: 500; }
.reader-page .vocab-panel > p, .reader-page .vocab-list em { color: #929eb1; }
.reader-page .vocab-list > div { border-bottom-color: rgba(180,216,248,.08); }
.reader-page .vocab-list > div:hover { background: rgba(130,185,225,.045); }
.reader-page .global-toast, .test-page .global-toast { color: #f3f8fd; background: rgba(8,14,29,.95); border-left-color: #9fdcf8; box-shadow: 0 15px 45px rgba(0,0,0,.3), var(--space-glow); backdrop-filter: blur(16px); }

/* Test pages share the same space-glass component language */
.test-page { color: var(--space-text); background: var(--space-void); }
.test-page .test-shell { background: var(--space-void); }
.test-page .test-topbar .brand b { color: #eef7ff; font-weight: 500; letter-spacing: 1px; }
.test-page .test-layout { background: #0a0f1e; }
.test-page .test-sidebar {
  background: radial-gradient(circle at 15% 5%, rgba(104,149,210,.13), transparent 26%), linear-gradient(180deg, #0b1122, #080d1a);
  border-right-color: var(--space-line);
}
.test-page .section-kicker { color: #9cd8f5; letter-spacing: 2px; }
.test-page .test-sidebar h1, .test-page .quiz-header h2 { color: #f5f9fd; font-weight: 500; }
.test-page .test-sidebar > p, .test-page .selection-actions { color: #8490a4; }
.test-page .text-button { color: #9fdcf8; }
.test-page .test-chapters { scrollbar-color: rgba(141,199,237,.4) transparent; }
.test-page .chapter-check { color: #b6c0cf; background: rgba(127,163,207,.035); border-color: rgba(174,211,247,.08); }
.test-page .chapter-check:hover { color: #edf8ff; background: rgba(122,178,220,.065); }
.test-page .chapter-check:has(input:checked) { color: #f2f8fc; background: linear-gradient(90deg, rgba(100,162,215,.2), rgba(163,140,203,.09)); border-color: rgba(165,215,247,.3); box-shadow: inset 2px 0 #9bd8f6; }
.test-page .chapter-check input { accent-color: #88caef; }
.test-page .chapter-check b { font-weight: 500; }
.test-page .chapter-check small { color: #748096; }
.test-page .primary-button { color: #0c1626; background: linear-gradient(110deg, #e5f6ff, #b9ddf5 58%, #cbc1e6); border: 1px solid rgba(255,255,255,.6); border-radius: 2px 16px 2px 16px; box-shadow: 0 12px 35px rgba(80,152,207,.16), inset 0 1px #fff; font-weight: 600; }
.test-page .primary-button:hover { background: linear-gradient(110deg, #f3fbff, #cceafa 58%, #d9d0ec); box-shadow: 0 12px 40px rgba(94,179,231,.25); }
.test-page .primary-button:disabled { color: #637083; background: rgba(124,149,180,.13); border-color: rgba(174,204,237,.1); }
.test-page .test-main { background: radial-gradient(circle at 84% 13%, rgba(113,157,213,.2), transparent 31%), radial-gradient(circle at 32% 90%, rgba(157,125,194,.15), transparent 34%), #0c1121; }
.test-page .test-main::before { background: radial-gradient(circle, rgba(215,238,255,.35) 0 1px, transparent 1.5px), linear-gradient(120deg, rgba(148,198,237,.035), transparent 40%); background-size: 68px 68px, auto; opacity: .5; }
.test-page .score-board, .test-page .empty-state, .test-page .question-card {
  color: #eef5fa;
  background: linear-gradient(135deg, rgba(18,29,51,.72), rgba(18,22,40,.67));
  border-color: rgba(174,214,248,.14);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 16px 42px rgba(0,0,0,.13);
  backdrop-filter: blur(16px) saturate(1.15);
}
.test-page .score-board div + div { border-left-color: var(--space-line); }
.test-page .score-board small { color: #7e8ba0; }
.test-page .score-board strong, .test-page .question-word { color: #a9e1fc; text-shadow: 0 0 14px rgba(121,199,241,.2); }
.test-page .empty-state { border-color: rgba(159,211,245,.23); }
.test-page .empty-state-mark { color: #cceeff; background: rgba(118,180,223,.08); border-color: rgba(166,219,250,.38); border-radius: 50%; box-shadow: 0 0 30px rgba(103,185,233,.13); }
.test-page .empty-state p { color: #8e9aab; }
.test-page .question-card:hover { border-color: rgba(162,218,249,.3); transform: translateY(-1px); }
.test-page .question-card.is-correct { border-color: rgba(107,207,178,.58); box-shadow: 0 0 25px rgba(82,185,154,.08); }
.test-page .question-card.is-wrong { border-color: rgba(219,113,151,.58); box-shadow: 0 0 25px rgba(205,92,134,.08); }
.test-page .question-number { color: #67758b; }
.test-page .answer-input { color: #f0f7fc; background: rgba(133,176,218,.045); border-bottom-color: rgba(171,214,248,.2); }
.test-page .answer-input::placeholder { color: #667388; }
.test-page .answer-input:focus { background: rgba(129,189,229,.08); border-color: #9ddbf8; box-shadow: 0 8px 20px rgba(78,156,207,.08); }
.test-page .correct-answer { color: #8ed6be; }
.test-page .quiz-footer { border-top-color: var(--space-line); }
.test-page .secondary-button { color: #b9c4d4; background: rgba(129,170,210,.035); border-color: rgba(174,211,246,.16); border-radius: 2px 13px 2px 13px; }
.test-page .secondary-button:hover { color: #e7f7ff; border-color: rgba(165,220,250,.48); background: rgba(122,183,222,.08); }
.test-page .result-panel { background: linear-gradient(120deg, rgba(25,38,63,.94), rgba(20,23,43,.95)); border-left-color: #9fdcf8; box-shadow: 0 18px 50px rgba(0,0,0,.2), 0 0 30px rgba(107,182,230,.08); }
.test-page .result-panel p { color: #97a3b4; }
.test-page .result-score { color: #b7e7ff; }
.test-page .error-item { color: #edf4f9; background: rgba(19,28,48,.88); border-left-color: #c78fb9; }
.test-page .error-item:hover { background: rgba(28,42,67,.94); }
.test-page .error-item b { color: #a9e0fb; }
.test-page .error-item span { color: #8b97a9; }

@keyframes spacePulse { 0%,100% { opacity: .72; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } }

@media (max-width: 680px) {
  .reader-page .topbar-path strong { max-width: 195px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reader-page .story-card h1 { font-size: 29px; letter-spacing: .045em; }
  .reader-page .story-copy p { font-size: 16px; line-height: 1.92; }
  .reader-page .story-eyebrow { border-radius: 2px 13px 2px 13px; }
  .reader-page .page-button.next { border-radius: 2px 15px 2px 15px; }
}

/* DeepSeek vocabulary card and mistake reinforcement */
.reader-page .ai-word-card {
  width: min(410px, calc(100vw - 28px));
  max-height: min(620px, calc(100vh - 28px));
  padding: 0;
  overflow: auto;
  color: #eef7fc;
  background: linear-gradient(145deg, rgba(14,24,45,.97), rgba(10,14,30,.98));
  border: 1px solid rgba(168,220,249,.25);
  border-left: 1px solid rgba(168,220,249,.25);
  border-radius: 4px 22px 4px 22px;
  box-shadow: 0 26px 70px rgba(0,0,0,.42), 0 0 34px rgba(104,187,235,.13), inset 0 1px rgba(255,255,255,.05);
  pointer-events: auto;
  backdrop-filter: blur(22px) saturate(1.2);
  scrollbar-color: rgba(142,205,241,.38) transparent;
}
.ai-word-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 20px 15px; border-bottom: 1px solid rgba(178,218,249,.12); background: linear-gradient(100deg, rgba(111,173,219,.1), rgba(170,139,203,.05)); }
.ai-word-header small, .ai-word-header strong, .ai-word-header span { display: block; }
.reader-page .ai-word-header small { color: #83b8d8; font-size: 8px; letter-spacing: 1.8px; }
.reader-page .ai-word-header strong { margin-top: 5px; color: #c2ebff; font-family: "Segoe UI", Arial, sans-serif; font-size: 25px; font-weight: 500; }
.reader-page .ai-word-header span { margin-top: 4px; color: #d9d2e3; font-size: 13px; }
.ai-card-close { flex: 0 0 auto; width: 31px; height: 31px; border: 1px solid rgba(179,216,246,.16); border-radius: 50%; color: #9daabd; background: rgba(255,255,255,.025); cursor: pointer; }
.ai-card-close:hover { color: #effaff; border-color: rgba(171,221,251,.46); }
.ai-word-quick { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; }
.ai-ipa { color: #a9dcf7; font-family: "Segoe UI", Arial, sans-serif; font-size: 15px; }
.ai-word-actions { display: flex; gap: 7px; }
.ai-action-button, .ai-mini-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; padding: 0 10px; border: 1px solid rgba(169,214,246,.2); border-radius: 2px 11px 2px 11px; color: #c5d2e1; background: rgba(132,177,217,.05); font-size: 11px; cursor: pointer; }
.ai-action-button:hover, .ai-mini-button:hover { color: #effaff; border-color: rgba(165,220,251,.48); background: rgba(126,188,228,.1); }
.ai-action-button.primary, .ai-mini-button.primary { color: #0c1828; background: linear-gradient(110deg, #e6f6ff, #b7dcf4 60%, #c9bfe2); border-color: rgba(255,255,255,.55); font-weight: 600; }
.ai-action-button:disabled, .ai-mini-button:disabled { opacity: .48; cursor: wait; }
.ai-status { margin: 0; padding: 0 20px 14px; color: #7f8ca1; font-size: 11px; line-height: 1.6; }
.ai-status[data-tone="loading"] { color: #9edcf8; animation: aiStatusPulse 1.2s ease-in-out infinite; }
.ai-status[data-tone="success"] { color: #86cbb4; }
.ai-status[data-tone="error"] { color: #dc8fa8; }
.ai-word-details { padding: 2px 20px 20px; }
.ai-word-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.ai-word-meta span { padding: 4px 8px; color: #a9cfe5; background: rgba(127,184,224,.07); border: 1px solid rgba(164,213,245,.12); border-radius: 10px; font-size: 10px; }
.ai-word-details section { padding: 11px 0; border-top: 1px solid rgba(176,214,244,.09); }
.ai-word-details h4 { margin: 0 0 7px; color: #a9ddf8; font-size: 11px; font-weight: 500; letter-spacing: .5px; }
.ai-word-details p, .ai-word-details li { margin: 0; color: #c8d0dc; font-size: 12px; line-height: 1.75; }
.ai-word-details ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
.ai-exam-example h4 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ai-exam-example h4 span { padding: 3px 7px; color: #b9acd4; background: rgba(161,133,196,.09); border-radius: 8px; font-size: 8px; }
.ai-exam-example small { display: block; margin-top: 6px; color: #858fa0; font-size: 10px; line-height: 1.6; }

.test-page .ai-review-panel { max-width: 980px; margin: 0 auto 28px; padding: 23px; color: #edf5fa; background: linear-gradient(135deg, rgba(20,34,58,.82), rgba(18,22,42,.84)); border: 1px solid rgba(167,216,247,.16); border-radius: 4px 25px 4px 25px; box-shadow: 0 18px 50px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(17px); }
.test-page .ai-review-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 17px; border-bottom: 1px solid rgba(174,215,247,.12); }
.test-page .ai-review-panel h3 { margin: 5px 0 4px; color: #f1f8fc; font-size: 22px; font-weight: 500; }
.test-page .ai-review-panel header p { margin: 0; color: #8390a3; font-size: 11px; }
.test-page .ai-review-panel > .ai-status { padding: 14px 0 0; }
.ai-review-overview { margin-top: 15px; padding: 15px; background: rgba(128,176,215,.045); border-left: 2px solid #9edcf8; }
.ai-review-overview > p { margin: 0; color: #cbd5df; font-size: 12px; line-height: 1.75; }
.ai-review-overview ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; counter-reset: review-plan; }
.ai-review-overview li { position: relative; padding: 10px 10px 10px 30px; color: #98a8ba; background: rgba(255,255,255,.025); font-size: 10px; line-height: 1.5; counter-increment: review-plan; }
.ai-review-overview li::before { content: counter(review-plan); position: absolute; top: 10px; left: 10px; color: #a9dff9; font-family: Georgia, serif; }
.ai-review-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin-top: 14px; }
.ai-review-card { min-width: 0; padding: 16px; background: rgba(9,16,31,.46); border: 1px solid rgba(168,213,246,.1); border-radius: 2px 16px 2px 16px; }
.ai-review-card > header { display: grid; grid-template-columns: 1fr auto auto; gap: 9px; align-items: center; margin-bottom: 11px; }
.ai-review-card h4 { margin: 0; color: #a9e2fd; font-family: "Segoe UI", Arial, sans-serif; font-size: 19px; font-weight: 500; }
.ai-review-card header > span { color: #909db0; font-family: "Segoe UI", Arial, sans-serif; font-size: 11px; }
.ai-review-card > p { margin: 7px 0 0; color: #aeb9c7; font-size: 11px; line-height: 1.65; }
.ai-review-card > p b { color: #d5e8f4; font-weight: 500; }
.ai-review-example { margin-top: 12px; padding: 11px; background: rgba(126,178,219,.045); border-left: 2px solid rgba(162,214,247,.45); }
.ai-review-example small { color: #a99bc5; font-size: 8px; letter-spacing: .5px; }
.ai-review-example p { margin: 5px 0; color: #d4dce5; font-size: 11px; line-height: 1.65; }
.ai-review-example span { color: #7f8b9d; font-size: 10px; }
.ai-cloze { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(173,214,246,.1); }
.ai-cloze > p { margin: 0; color: #d8e2ea; font-size: 12px; line-height: 1.7; }
.ai-cloze > small { display: block; margin-top: 4px; color: #7c899c; }
.ai-cloze > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; margin-top: 10px; }
.ai-cloze input { min-width: 0; height: 34px; padding: 0 9px; color: #edf8fd; background: rgba(255,255,255,.035); border: 1px solid rgba(168,212,244,.15); outline: none; }
.ai-cloze input:focus { border-color: #9cd9f6; }
.ai-cloze input.is-correct { border-color: #72c5a8; }
.ai-cloze input.is-wrong { border-color: #cf7897; }
.ai-cloze-feedback { grid-column: 1 / -1; color: #c7849d; font-size: 10px; }
.ai-cloze-feedback[data-correct="true"] { color: #7fc8ae; }

@keyframes aiStatusPulse { 0%,100% { opacity: .58; } 50% { opacity: 1; } }

@media (max-width: 760px) {
  .reader-page .ai-word-card { right: 12px; bottom: 84px; left: 12px !important; top: auto !important; width: auto; max-height: min(64vh,560px); }
  .ai-word-quick { align-items: stretch; flex-direction: column; }
  .ai-word-actions { display: grid; grid-template-columns: 1fr 1.4fr; }
  .test-page .ai-review-panel > header { align-items: stretch; flex-direction: column; }
  .ai-review-overview ol, .ai-review-list { grid-template-columns: 1fr; }
}

/* Bright cinematic character-site direction based on the supplied visual reference */
:root {
  --pearl-bg: #e8edf6;
  --pearl-panel: rgba(249,251,255,.76);
  --pearl-solid: #f8faff;
  --pearl-line: rgba(100,121,158,.15);
  --pearl-ink: #273149;
  --pearl-muted: #77839b;
  --pearl-blue: #63b9ea;
  --pearl-violet: #9279e8;
  --pearl-shadow: 0 22px 65px rgba(54,72,111,.16);
}
.reader-page { color: var(--pearl-ink); background: radial-gradient(circle at 85% 5%, #f7effb, transparent 28%), var(--pearl-bg); }
.reader-page .app-shell { grid-template-columns: 304px minmax(0,1fr); gap: 12px; height: 100vh; padding: 12px; background: transparent; }
.reader-page .chapter-panel {
  height: calc(100vh - 24px);
  color: var(--pearl-ink);
  background: linear-gradient(155deg, rgba(255,255,255,.88), rgba(237,242,251,.7));
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 26px;
  box-shadow: var(--pearl-shadow), inset 0 1px #fff;
  backdrop-filter: blur(26px) saturate(1.15);
  overflow: hidden;
}
.reader-page .chapter-panel::before { background-image: radial-gradient(circle, rgba(102,145,205,.3) 0 1px, transparent 1.5px); opacity: .11; }
.reader-page .brand-block { min-height: 84px; padding: 19px 20px; border-bottom-color: var(--pearl-line); }
.reader-page .brand-mark, .test-page .test-topbar .brand-mark { color: #677caa; background: linear-gradient(145deg,#fff,rgba(219,229,247,.8)); border-color: rgba(119,151,200,.25); box-shadow: 0 0 0 5px rgba(255,255,255,.36), 0 12px 30px rgba(85,112,162,.13); }
.reader-page .brand b, .test-page .test-topbar .brand b { color: #263149; }
.reader-page .brand small, .test-page .test-topbar .brand small { color: #8b96aa; }
.reader-page .chapter-list { scrollbar-color: rgba(119,144,181,.3) transparent; }
.reader-page .chapter-empty { margin: 20px 14px; padding: 16px 12px; color: var(--theme-muted); background: var(--theme-field); border: 1px dashed var(--theme-line); border-radius: 12px; font-size: 12px; line-height: 1.7; text-align: center; }
.reader-page .chapter-item { color: #68748a; border-left: 0; }
.reader-page .chapter-item:hover { color: #303c55; background: rgba(255,255,255,.56); }
.reader-page .chapter-item.is-active { color: #34415e; background: linear-gradient(100deg, rgba(204,230,248,.88), rgba(225,216,248,.67)); border-left: 0; box-shadow: inset 0 1px rgba(255,255,255,.7), 0 8px 24px rgba(89,118,165,.09); }
.reader-page .chapter-number { color: #8794a9; background: rgba(255,255,255,.58); border-color: rgba(112,140,181,.11); }
.reader-page .chapter-item.is-active .chapter-number { color: #476b9e; background: rgba(255,255,255,.8); border-color: rgba(99,157,207,.2); box-shadow: 0 7px 19px rgba(78,126,175,.12); }
.reader-page .chapter-item small, .reader-page .chapter-item.is-active small { color: #929caf; }
.reader-page .library-summary { background: rgba(244,247,253,.7); border-color: var(--pearl-line); }
.reader-page .library-summary span, .reader-page .library-summary strong { color: #7d899f; }
.reader-page .ring-progress { background: conic-gradient(#70bfe9 calc(var(--progress) * 1%), rgba(132,151,183,.12) 0); box-shadow: none; }
.reader-page .ring-progress::after { background: #f2f5fb; }
.reader-page .ring-progress span { color: #53749e; }
.reader-page .side-test-link { color: #fff; background: linear-gradient(115deg,#70bce8,#947ee7); border: 1px solid rgba(255,255,255,.72); border-radius: 18px; box-shadow: 0 14px 32px rgba(100,115,204,.22), inset 0 1px rgba(255,255,255,.35); }
.reader-page .side-test-link small { color: rgba(255,255,255,.72); }
.reader-page .reader-main { height: calc(100vh - 24px); min-height: 0; background: #d8e2f0; border: 1px solid rgba(255,255,255,.64); border-radius: 26px; box-shadow: var(--pearl-shadow); overflow: hidden; }
.reader-page .topbar, .test-page .test-topbar { color: var(--pearl-ink); background: rgba(249,251,255,.74); border-bottom-color: rgba(95,118,155,.12); box-shadow: 0 8px 35px rgba(69,87,125,.08); backdrop-filter: blur(24px) saturate(1.25); }
.reader-page .topbar-path { color: #2f3c55; }
.reader-page .topbar-path .top-book { color: #7b8fbc; filter: drop-shadow(0 4px 8px rgba(82,113,167,.18)); }
.reader-page .topbar-path strong { color: #2c3750; }
.reader-page .sound-toggle, .reader-page .nav-pill, .test-page .reader-link { color: #59667d; background: rgba(255,255,255,.56); border-color: rgba(92,120,163,.16); box-shadow: inset 0 1px rgba(255,255,255,.68), 0 8px 22px rgba(63,84,125,.07); }
.reader-page .sound-toggle:hover, .reader-page .nav-pill:hover, .test-page .reader-link:hover { color: #4e61a0; background: rgba(255,255,255,.86); border-color: rgba(105,132,190,.3); box-shadow: 0 10px 28px rgba(80,102,152,.14); }
.reader-page .novel-stage { height: calc(100% - 72px); min-height: 0; background: linear-gradient(135deg,#dbe8f4,#e9e1f0); }
.reader-page .scene-image.is-illustrated { background-position: center; filter: saturate(.68) contrast(.96) brightness(1.08); }
.reader-page .scene-vignette { background: linear-gradient(90deg,rgba(14,24,45,.78) 0%,rgba(20,31,54,.55) 34%,rgba(30,37,60,.12) 64%,transparent 82%), linear-gradient(0deg,rgba(12,16,30,.62),transparent 34%); }
.reader-page .scene-glow { background: radial-gradient(circle at 76% 18%,rgba(255,255,255,.54),transparent 30%), radial-gradient(circle at 58% 68%,rgba(211,190,235,.2),transparent 34%); mask-image: none; }
.reader-page .story-card { background: linear-gradient(90deg,rgba(10,19,37,.22),transparent 72%); }
.reader-page .story-eyebrow { color: #eef8ff; background: rgba(239,247,255,.12); border-color: rgba(222,239,253,.28); box-shadow: inset 0 1px rgba(255,255,255,.08),0 12px 32px rgba(0,0,0,.08); }
.reader-page .story-eyebrow span:last-child { color: rgba(233,241,250,.73); }
.reader-page .story-card h1 { color: #fff; max-width: 980px; font-weight: 500; text-shadow: 0 3px 20px rgba(5,12,28,.5); }
.reader-page .title-divider > span { background: linear-gradient(90deg,rgba(131,203,242,.9),rgba(189,166,232,.45),transparent); }
.reader-page .reading-hint { color: rgba(238,246,252,.65); }
.reader-page .story-copy { max-width: 1080px; }
.reader-page .story-copy p { color: rgba(251,253,255,.94); text-shadow: 0 2px 8px rgba(6,13,29,.78); }
.reader-page .vocab-word { color: #9ee2ff; background: linear-gradient(180deg,transparent 70%,rgba(104,194,238,.2) 70%); border-bottom-color: rgba(156,224,255,.72); }
.reader-page .page-controls { height: 82px; background: linear-gradient(0deg,rgba(8,11,22,.88),rgba(17,20,34,.62)); border-top-color: rgba(255,255,255,.18); box-shadow: 0 -14px 45px rgba(11,15,30,.14); backdrop-filter: blur(22px); }
.reader-page .page-controls::before { content: ""; position: absolute; top: 0; left: 0; width: calc(var(--page-progress, 25) * 1%); height: 3px; background: linear-gradient(90deg,#68c6f3,#a78bef); box-shadow: 0 0 12px rgba(102,194,240,.5); transition: width .35s ease; }
.reader-page .page-button { color: rgba(244,248,252,.72); }
.reader-page .page-button.next { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); box-shadow: inset 0 1px rgba(255,255,255,.07); }
.reader-page .page-status b { color: #fff; }
.reader-page .page-dots button { background: rgba(255,255,255,.24); }
.reader-page .page-dots button.is-active { background: linear-gradient(90deg,#65c4f2,#aa8cec); }
.reader-page .vocab-panel { color: #303b52; background: linear-gradient(155deg,rgba(255,255,255,.96),rgba(236,240,250,.97)); border-left-color: rgba(99,120,160,.15); box-shadow: -25px 0 70px rgba(52,68,104,.18); }
.reader-page .vocab-panel header { border-bottom-color: var(--pearl-line); }
.reader-page .vocab-panel header small, .reader-page .vocab-list b { color: #5daed9; }
.reader-page .vocab-panel h2 { color: #2b354b; }
.reader-page .vocab-panel > p, .reader-page .vocab-list em { color: #7e899c; }
.reader-page .vocab-list > div { border-bottom-color: rgba(96,119,157,.09); }
.reader-page .vocab-list > div:hover { background: rgba(196,219,241,.24); }

.reader-page .ai-word-card { color: #313c53; background: linear-gradient(150deg,rgba(255,255,255,.97),rgba(237,241,251,.98)); border-color: rgba(101,128,171,.16); box-shadow: 0 28px 75px rgba(48,64,100,.22),inset 0 1px #fff; }
.reader-page .ai-word-header { border-bottom-color: var(--pearl-line); background: linear-gradient(100deg,rgba(199,228,246,.42),rgba(224,212,246,.34)); }
.reader-page .ai-word-header small { color: #7188ab; }
.reader-page .ai-word-header strong { color: #4979a3; }
.reader-page .ai-word-header span { color: #6e7890; }
.reader-page .ai-card-close { color: #7a879c; background: rgba(255,255,255,.55); border-color: rgba(96,120,160,.15); }
.reader-page .ai-ipa { color: #5f9ec5; }
.reader-page .ai-action-button, .reader-page .ai-mini-button { color: #627088; background: rgba(255,255,255,.62); border-color: rgba(92,119,160,.15); }
.reader-page .ai-action-button.primary, .reader-page .ai-mini-button.primary { color: #fff; background: linear-gradient(110deg,#69bde8,#927de5); }
.reader-page .ai-status { color: #7d899d; }
.reader-page .ai-word-meta span { color: #637b9b; background: rgba(180,210,236,.22); }
.reader-page .ai-word-details section { border-top-color: var(--pearl-line); }
.reader-page .ai-word-details h4 { color: #568bad; }
.reader-page .ai-word-details p, .reader-page .ai-word-details li { color: #5f6b80; }

.test-page { color: var(--pearl-ink); background: radial-gradient(circle at 85% 5%,#f4eaf8,transparent 30%),var(--pearl-bg); }
.test-page .test-shell { background: transparent; }
.test-page .test-topbar .brand b { color: #2d3850; }
.test-page .test-layout { background: transparent; }
.test-page .test-sidebar { background: rgba(248,250,255,.76); border-right-color: var(--pearl-line); box-shadow: 14px 0 45px rgba(59,76,111,.07); backdrop-filter: blur(22px); }
.test-page .section-kicker { color: #6a91b7; }
.test-page .test-sidebar h1, .test-page .quiz-header h2 { color: #2c3750; }
.test-page .test-sidebar > p, .test-page .selection-actions { color: #7d899d; }
.test-page .text-button { color: #678fc1; }
.test-page .chapter-check { color: #617087; background: rgba(255,255,255,.52); border-color: rgba(94,120,161,.08); }
.test-page .chapter-check:hover { color: #2d3a53; background: rgba(255,255,255,.8); }
.test-page .chapter-check:has(input:checked) { color: #354665; background: linear-gradient(100deg,rgba(203,230,248,.8),rgba(226,215,247,.68)); border-color: rgba(103,144,191,.16); box-shadow: inset 2px 0 #70b9e3; }
.test-page .chapter-check.is-selected { color: #354665; background: linear-gradient(100deg,rgba(203,230,248,.8),rgba(226,215,247,.68)); border-color: rgba(103,144,191,.16); box-shadow: inset 2px 0 #70b9e3; }
.test-page .question-count-control { border-top-color: var(--pearl-line); }
.test-page .question-count-control label, .test-page .question-count-control small { color: #7d899d; }
.test-page .question-count-control select { color: #44526a; background: rgba(255,255,255,.65); border-color: rgba(92,120,161,.14); box-shadow: inset 0 1px rgba(255,255,255,.8); }
.test-page .primary-button { color: #fff; background: linear-gradient(115deg,#6bbce7,#927ee5); border-color: rgba(255,255,255,.72); box-shadow: 0 14px 32px rgba(103,112,197,.2); }
.test-page .primary-button:hover { background: linear-gradient(115deg,#79c7ec,#a08bec); }
.test-page .test-main { background: radial-gradient(circle at 78% 12%,rgba(207,192,232,.38),transparent 30%),radial-gradient(circle at 32% 90%,rgba(184,219,239,.4),transparent 34%),#edf1f8; }
.test-page .test-main::before { background: radial-gradient(circle,rgba(100,139,189,.16) 0 1px,transparent 1.5px); background-size: 70px 70px; }
.test-page .score-board, .test-page .empty-state, .test-page .question-card { color: #39455c; background: rgba(255,255,255,.7); border-color: rgba(92,118,158,.12); box-shadow: 0 18px 45px rgba(56,75,113,.1),inset 0 1px rgba(255,255,255,.85); }
.test-page .score-board small, .test-page .empty-state p { color: #7e899c; }
.test-page .score-board strong, .test-page .question-word { color: #588fb6; }
.test-page .empty-state-mark { color: #7188bc; background: rgba(255,255,255,.55); border-color: rgba(102,136,187,.2); }
.test-page .answer-input { color: #354158; background: rgba(238,243,251,.72); border-bottom-color: rgba(89,119,163,.2); }
.test-page .answer-input:focus { color: #26334c; background: #fff; border-color: #6eb7df; }
.test-page .secondary-button { color: #667389; background: rgba(255,255,255,.55); border-color: rgba(93,119,159,.15); }
.test-page .result-panel { color: #344158; background: linear-gradient(120deg,rgba(255,255,255,.9),rgba(230,235,247,.9)); border-left-color: #75bde3; box-shadow: 0 20px 50px rgba(57,75,111,.12); }
.test-page .result-panel h3 { color: #2f3a51; }
.test-page .result-panel p { color: #7a8699; }
.test-page .result-score { color: #6c8fc3; }
.test-page .error-review h3 { color: #334057; }
.test-page .error-item { color: #415069; background: rgba(255,255,255,.72); border-left-color: #a98dd5; box-shadow: 0 10px 28px rgba(60,77,113,.07); }
.test-page .error-item b { color: #568daf; }
.test-page .error-item span { color: #7e899c; }
.test-page .ai-review-panel { color: #37445b; background: linear-gradient(145deg,rgba(255,255,255,.83),rgba(231,236,248,.8)); border-color: rgba(94,120,160,.13); box-shadow: 0 22px 55px rgba(58,75,111,.12),inset 0 1px #fff; }
.test-page .ai-review-panel h3 { color: #2f3b53; }
.test-page .ai-review-panel header p, .test-page .ai-review-panel > .ai-status { color: #7c899c; }
.test-page .ai-review-overview { background: rgba(255,255,255,.48); border-left-color: #73b9df; }
.test-page .ai-review-overview > p, .test-page .ai-review-card > p { color: #617087; }
.test-page .ai-review-card { background: rgba(255,255,255,.62); border-color: rgba(91,117,158,.1); }
.test-page .ai-review-card h4 { color: #568daf; }
.test-page .ai-review-example { background: rgba(225,235,247,.55); }
.test-page .ai-review-example p, .test-page .ai-cloze > p { color: #526078; }
.test-page .ai-cloze input { color: #344159; background: rgba(255,255,255,.72); border-color: rgba(93,120,161,.16); }

@media (max-width: 1000px) {
  .reader-page .app-shell { grid-template-columns: 1fr; padding: 0; }
  .reader-page .reader-main { height: 100vh; border: 0; border-radius: 0; }
  .reader-page .chapter-panel { height: 100vh; border-radius: 0 24px 24px 0; }
}
@media (max-width: 680px) {
  .reader-page .novel-stage { height: calc(100% - 62px); }
  .reader-page .story-card { background: linear-gradient(90deg,rgba(10,19,37,.55),rgba(10,19,37,.18)); }
  .reader-page .scene-vignette { background: linear-gradient(90deg,rgba(7,15,32,.62),rgba(16,24,42,.18)),linear-gradient(0deg,rgba(8,12,25,.7),transparent 45%); }
}

/* Final polish: celestial ornament, dynamic scene color and refined micro-interactions */
::selection { color: #fff; background: rgba(113,133,214,.78); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; top: 10px; left: 12px; z-index: 1000; padding: 10px 14px; color: #fff; background: #293958; border: 1px solid rgba(255,255,255,.72); border-radius: 10px; box-shadow: 0 10px 30px rgba(24,38,68,.24); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
button, a, input, select, textarea { transition: color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease, opacity .22s ease; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid rgba(103,170,221,.82); outline-offset: 3px; }
.reader-page .page-dots button { height: 21px; padding: 8px 0; background-clip: content-box; }
.reader-page .page-dots button[aria-current="page"] { cursor: default; }
.reader-page .scene-image[aria-busy="true"] { opacity: .9; }
.reader-page .scene-signature.is-loading { opacity: .72; }
.reader-page .scene-image.has-imported-art { overflow: hidden; isolation: isolate; background-color: #111a2d; }
.reader-page .scene-image.has-imported-art::after,
.reader-page .scene-image.has-imported-art::before { content: ""; position: absolute; pointer-events: none; }
.reader-page .scene-image.has-imported-art::after {
  inset: -5%;
  z-index: 0;
  background-image: var(--scene-art);
  background-repeat: no-repeat;
  background-position: center var(--scene-focus,32%);
  background-size: cover;
  filter: saturate(.72) brightness(.66);
  opacity: .82;
  transform: none;
}
.reader-page .scene-image.has-imported-art::before {
  top: 0;
  right: 1.5%;
  bottom: 0;
  z-index: 1;
  width: min(58%,760px);
  background-image: var(--scene-art);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  opacity: .98;
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 12%,#000 31%,#000 100%);
  mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 12%,#000 31%,#000 100%);
  filter: saturate(.94) contrast(1.02) brightness(.98);
}
.reader-page .novel-stage.portrait-art .scene-vignette { background: linear-gradient(90deg,rgba(6,13,28,.9) 0%,rgba(9,17,34,.7) 37%,rgba(13,21,39,.22) 64%,transparent 82%),linear-gradient(0deg,rgba(7,10,22,.62),transparent 38%); }

@media (min-width: 1280px) {
  .reader-page .novel-stage.portrait-art .story-card { padding-right: clamp(400px,34vw,560px); }
  .reader-page .novel-stage.portrait-art .story-card h1,
  .reader-page .novel-stage.portrait-art .story-copy { max-width: 760px; }
}

@media (max-width: 1000px) and (orientation: portrait) {
  .reader-page .scene-image.has-imported-art::after { inset: -3%; filter: saturate(.76) brightness(.7); }
  .reader-page .scene-image.has-imported-art::before {
    inset: 0;
    width: auto;
    background-position: center var(--scene-focus,32%);
    background-size: cover;
    opacity: .94;
    -webkit-mask-image: none;
    mask-image: none;
    filter: saturate(.94) contrast(1.01) brightness(.92);
  }
  .reader-page .novel-stage.portrait-art .scene-vignette { background: linear-gradient(90deg,rgba(6,13,28,.62),rgba(10,18,36,.2)),linear-gradient(0deg,rgba(7,10,22,.74),transparent 48%); }
}
.test-page .question-card:focus { outline: 2px solid rgba(var(--theme-accent-rgb),.72); outline-offset: 4px; }

@media (pointer: coarse) {
  .icon-button, .sound-toggle, .nav-pill, .ai-card-close, .ai-action-button, .vocab-mini-action, .page-button, .text-button, .primary-button, .secondary-button { min-height: 44px; }
  .reader-page .page-dots button { min-width: 24px; height: 28px; padding: 11px 2px; }
}
.reader-page .reader-main { position: relative; }
.reader-page .reader-main::after { content: ""; position: absolute; inset: 0; z-index: 30; border: 1px solid rgba(255,255,255,.4); border-radius: inherit; pointer-events: none; mask-image: linear-gradient(135deg,#000,transparent 28%,transparent 72%,#000); }
.reader-page .brand-mark { position: relative; overflow: visible; }
.reader-page .brand-mark::before { content: ""; position: absolute; inset: -7px; border: 1px solid rgba(102,135,190,.14); border-radius: 50%; animation: orbitTurn 12s linear infinite; }
.reader-page .brand-mark::after { content: ""; position: absolute; top: -8px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #829ed0; box-shadow: 0 0 9px rgba(101,137,203,.58); }
.reader-page .link-status { display: inline-flex; align-items: center; gap: 6px; margin-left: 7px; padding: 5px 9px; color: #8794a9; border-left: 1px solid rgba(98,120,159,.14); font-family: "Segoe UI", Arial, sans-serif; font-size: 8px; letter-spacing: 1.2px; }
.reader-page .link-status i { width: 5px; height: 5px; border-radius: 50%; background: #72c5b3; box-shadow: 0 0 9px rgba(82,192,167,.55); animation: statusBreath 2s ease-in-out infinite; }
.reader-page .chapter-item { position: relative; overflow: hidden; }
.reader-page .chapter-item::after { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 2px; background: linear-gradient(180deg,transparent,#6fbce6,transparent); opacity: 0; transform: translateY(-35%); }
.reader-page .chapter-item.is-active::after { opacity: 1; animation: selectedTrace 2.8s ease-in-out infinite; }
.reader-page .side-test-link, .test-page .primary-button, .ai-action-button.primary { position: relative; overflow: hidden; }
.reader-page .side-test-link::after, .test-page .primary-button::after, .ai-action-button.primary::after { content: ""; position: absolute; top: -80%; left: -45%; width: 32%; height: 260%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent); transform: rotate(22deg); transition: left .55s ease; pointer-events: none; }
.reader-page .side-test-link:hover::after, .test-page .primary-button:hover::after, .ai-action-button.primary:hover::after { left: 120%; }
.reader-page .novel-stage { --scene-accent: #c9e4f6; --scene-ink: #707292; }
.reader-page .celestial-orbits { position: absolute; top: 7%; right: 5%; z-index: 0; width: min(26vw,380px); aspect-ratio: 1; opacity: .32; pointer-events: none; }
.reader-page .celestial-orbits i { position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; transform: rotate(-18deg) scaleY(.42); }
.reader-page .celestial-orbits i:nth-child(2) { inset: 25%; border-color: var(--scene-accent); opacity: .7; transform: rotate(44deg) scaleY(.55); }
.reader-page .celestial-orbits i:nth-child(3) { inset: 37%; border-style: dashed; opacity: .7; transform: rotate(82deg) scaleY(.72); }
.reader-page .celestial-orbits span { position: absolute; top: 19%; right: 15%; color: #fff; text-shadow: 0 0 14px var(--scene-accent); animation: spacePulse 3s ease-in-out infinite; }
.reader-page .scene-signature { position: absolute; right: 38px; bottom: 106px; z-index: 3; display: grid; justify-items: end; padding: 11px 14px; color: #fff; border-right: 2px solid var(--scene-accent); background: linear-gradient(90deg,transparent,rgba(15,21,39,.2)); text-align: right; text-shadow: 0 2px 8px rgba(0,0,0,.35); pointer-events: none; }
.reader-page .scene-signature small { color: rgba(255,255,255,.55); font-family: "Segoe UI",Arial,sans-serif; font-size: 7px; letter-spacing: 2px; }
.reader-page .scene-signature b { margin-top: 3px; color: #fff; font-size: 12px; font-weight: 500; }
.reader-page .scene-signature span { margin-top: 2px; color: var(--scene-accent); font-size: 9px; }
.reader-page .story-eyebrow { position: relative; overflow: hidden; }
.reader-page .story-eyebrow::after { content: ""; position: absolute; top: 0; left: -45%; width: 35%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); animation: badgeScan 5.5s ease-in-out infinite; }
.reader-page .title-divider > span { background: linear-gradient(90deg,var(--scene-accent),rgba(189,166,232,.42),transparent); }
.reader-page .hint-dot { color: var(--scene-accent); }
.reader-page .vocab-word { color: var(--scene-accent); border-bottom-color: var(--scene-accent); }
.reader-page .vocab-meaning { margin-left: 2px; color: rgba(227,235,247,.7); font-size: .86em; letter-spacing: 0; text-shadow: 0 2px 6px rgba(5,12,28,.68); }
.vocab-meaning[hidden] { display: none !important; }
.reader-page .annotation-toggle.is-on { color: #536b9e; background: linear-gradient(110deg,rgba(199,228,246,.78),rgba(225,214,247,.7)); border-color: rgba(104,143,191,.26); box-shadow: inset 0 1px rgba(255,255,255,.8),0 8px 22px rgba(74,97,148,.1); }
.reader-page .page-controls::before { background: linear-gradient(90deg,var(--scene-accent),#a78bef); }
.reader-page .page-dots button.is-active { background: linear-gradient(90deg,var(--scene-accent),#aa8cec); box-shadow: 0 0 12px var(--scene-accent); }
.reader-page .page-button:not(:disabled):active, .reader-page .nav-pill:active, .reader-page .sound-toggle:active { transform: scale(.96); }
.reader-page .page-button:disabled { opacity: .3; }
.reader-page .ai-word-card { animation: cardFloatIn .28s ease both; }
.reader-page .ai-status[data-tone="loading"]::before, .test-page .ai-status[data-tone="loading"]::before { content: "✦"; display: inline-block; margin-right: 7px; animation: spacePulse 1.2s ease-in-out infinite; }
.test-page .question-card { overflow: hidden; }
.test-page .question-card::after { content: ""; position: absolute; right: -28px; bottom: -28px; width: 80px; height: 80px; border: 1px solid rgba(112,151,196,.12); border-radius: 50%; box-shadow: 0 0 0 12px rgba(133,166,207,.035),0 0 0 24px rgba(133,166,207,.02); }
.test-page .question-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(56,75,113,.14),inset 0 1px #fff; }
.test-page .question-card.is-correct::after { border-color: rgba(86,185,149,.3); }
.test-page .question-card.is-wrong::after { border-color: rgba(197,98,136,.3); }
.test-page .score-board strong { font-variant-numeric: tabular-nums; }
.test-page .result-panel { position: relative; overflow: hidden; }
.test-page .result-panel::after { content: "✦"; position: absolute; right: 22px; bottom: -22px; color: rgba(117,142,193,.08); font-size: 92px; transform: rotate(18deg); }
.test-page .ai-review-card:hover { transform: translateY(-2px); border-color: rgba(103,148,198,.2); box-shadow: 0 16px 35px rgba(62,79,116,.08); }
.reader-page * { scrollbar-width: thin; }
.reader-page *::-webkit-scrollbar, .test-page *::-webkit-scrollbar { width: 6px; height: 6px; }
.reader-page *::-webkit-scrollbar-thumb, .test-page *::-webkit-scrollbar-thumb { background: linear-gradient(#8fc9e8,#a996d9); border-radius: 8px; }
.reader-page *::-webkit-scrollbar-track, .test-page *::-webkit-scrollbar-track { background: transparent; }

@keyframes orbitTurn { to { transform: rotate(360deg); } }
@keyframes statusBreath { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes selectedTrace { 0%,100% { transform: translateY(-35%); opacity: .3; } 50% { transform: translateY(35%); opacity: 1; } }
@keyframes badgeScan { 0%,68% { left: -45%; } 100% { left: 130%; } }
@keyframes cardFloatIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

@media (max-width: 1000px) {
  .reader-page .link-status { display: none; }
  .reader-page .scene-signature { right: 22px; }
}
@media (max-width: 680px) {
  .reader-page .celestial-orbits, .reader-page .scene-signature { display: none; }
  .reader-page .story-eyebrow::after { display: none; }
  .reader-page .settings-link { width: 39px; padding: 0; font-size: 0; }
  .reader-page .settings-link span { font-size: 14px; }
  .reader-page .annotation-toggle { width: 39px; padding: 0; font-size: 0; }
  .reader-page .annotation-toggle > span:first-child { font-size: 9px; }
  .test-page .question-card:hover, .test-page .ai-review-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reader-page .brand-mark::before, .reader-page .link-status i, .reader-page .chapter-item.is-active::after,
  .reader-page .celestial-orbits span, .reader-page .story-eyebrow::after, .ai-status[data-tone="loading"]::before { animation: none !important; }
}

/* Settings center and shared user preferences */
.settings-page { min-height: 100vh; color: #2d3951; background: radial-gradient(circle at 82% 8%,rgba(226,208,244,.62),transparent 30%), radial-gradient(circle at 12% 82%,rgba(183,224,245,.48),transparent 35%), #eaf0f8; }
.settings-shell { min-height: 100vh; }
.settings-page .settings-topbar { position: sticky; top: 0; z-index: 20; color: #2d3951; background: rgba(249,251,255,.78); border-bottom: 1px solid rgba(94,120,160,.13); box-shadow: 0 8px 35px rgba(69,87,125,.08); backdrop-filter: blur(24px) saturate(1.25); }
.settings-page .brand-mark { width: 38px; height: 38px; color: #fff; background: linear-gradient(135deg,#69bee9,#927ee5); border-radius: 13px; box-shadow: 0 10px 24px rgba(91,111,191,.2); }
.settings-page .brand b { color: #2d3850; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 15px; font-weight: 500; }
.settings-page .brand small { color: #8692a7; }
.settings-nav { display: flex; gap: 9px; }
.settings-page .reader-link { color: #59677e; background: rgba(255,255,255,.55); border-color: rgba(92,120,163,.15); border-radius: 12px; }
.settings-page .reader-link:hover { color: #4d60a0; background: #fff; border-color: rgba(104,132,190,.3); }
.settings-main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: clamp(34px,5vw,72px) 0 70px; }
.settings-hero { max-width: 760px; margin-bottom: 30px; }
.settings-hero h1 { margin: 8px 0 12px; color: #2b3650; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: clamp(30px,4vw,48px); font-weight: 300; letter-spacing: .03em; }
.settings-hero p { margin: 0; color: #748198; font-size: 13px; line-height: 1.85; }
.settings-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(330px,.75fr); gap: 20px; align-items: start; }
.settings-card { min-width: 0; padding: 25px; background: linear-gradient(145deg,rgba(255,255,255,.84),rgba(235,240,250,.75)); border: 1px solid rgba(98,124,166,.13); border-radius: 6px 28px 6px 28px; box-shadow: 0 22px 58px rgba(55,75,113,.11), inset 0 1px rgba(255,255,255,.9); backdrop-filter: blur(22px) saturate(1.15); }
.settings-card-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(95,120,159,.11); }
.settings-card-header > div { display: flex; align-items: center; gap: 13px; }
.settings-card-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; color: #648cba; background: linear-gradient(140deg,rgba(201,230,247,.7),rgba(226,214,247,.65)); border: 1px solid rgba(97,131,177,.13); border-radius: 50%; font-family: Georgia, serif; }
.settings-card-header small { color: #8494ad; font-family: Georgia, serif; font-size: 8px; letter-spacing: 1.6px; }
.settings-card h2 { margin: 4px 0 0; color: #303c55; font-size: 20px; font-weight: 500; }
.config-badge { padding: 5px 10px; color: #8c98aa; background: rgba(221,228,239,.65); border-radius: 12px; font-size: 10px; }
.config-badge[data-state="ready"] { color: #458f7a; background: rgba(184,229,215,.46); }
.settings-field-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.settings-field { display: grid; gap: 8px; margin-bottom: 15px; }
.settings-field > span { color: #56657e; font-size: 11px; font-weight: 600; }
.settings-field > small { color: #8a96a8; font-size: 9px; line-height: 1.6; }
.settings-field input, .settings-field select { min-width: 0; width: 100%; height: 43px; padding: 0 12px; color: #34425a; background: rgba(255,255,255,.72); border: 1px solid rgba(91,119,161,.15); border-radius: 11px; outline: 0; box-shadow: inset 0 1px rgba(255,255,255,.9); }
.settings-field input:focus, .settings-field select:focus { background: #fff; border-color: #70b9e3; box-shadow: 0 0 0 3px rgba(99,177,222,.12); }
.settings-field input[readonly] { color: #7e899d; background: rgba(231,237,246,.66); cursor: default; }
.secret-input { display: grid; grid-template-columns: minmax(0,1fr) auto; }
.secret-input input { border-radius: 11px 0 0 11px; }
.secret-input button { min-width: 60px; padding: 0 12px; color: #6685a8; background: rgba(222,234,247,.82); border: 1px solid rgba(91,119,161,.15); border-left: 0; border-radius: 0 11px 11px 0; cursor: pointer; }
.settings-switch { position: relative; display: grid; grid-template-columns: 38px minmax(0,1fr); column-gap: 10px; align-items: center; margin: 13px 0; cursor: pointer; }
.settings-switch input { position: absolute; opacity: 0; pointer-events: none; }
.settings-switch > span { grid-row: 1 / span 2; width: 38px; height: 22px; padding: 3px; background: #cbd4e1; border-radius: 14px; transition: .22s ease; }
.settings-switch > span::after { content: ""; display: block; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 3px 8px rgba(53,68,96,.2); transition: transform .22s ease; }
.settings-switch input:checked + span { background: linear-gradient(90deg,#69bbe5,#9481dd); }
.settings-switch input:checked + span::after { transform: translateX(16px); }
.settings-switch input:focus-visible + span { outline: 2px solid rgba(103,170,221,.72); outline-offset: 2px; }
.settings-switch b { color: #4b5971; font-size: 11px; font-weight: 600; }
.settings-switch small { margin-top: 3px; color: #8a96a8; font-size: 9px; line-height: 1.45; }
.range-field input[type="range"] { height: 43px; padding: 0; accent-color: #7b9fda; background: transparent; border: 0; box-shadow: none; }
.range-field output { float: right; color: #7396bd; font-weight: 500; }
.settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 21px; }
.settings-page .primary-button { color: #fff; background: linear-gradient(115deg,#6bbce7,#927ee5); border-radius: 13px; box-shadow: 0 12px 28px rgba(100,111,194,.19); }
.settings-page .secondary-button { min-height: 44px; color: #627088; background: rgba(255,255,255,.62); border: 1px solid rgba(92,119,160,.16); border-radius: 13px; }
.settings-page .text-button.danger { margin-left: auto; color: #bd7187; }
.settings-status { min-height: 20px; margin-top: 16px; color: #7c899d; font-size: 11px; line-height: 1.7; }
.settings-status[data-tone="loading"] { color: #5f98bd; }
.settings-status[data-tone="success"] { color: #478f78; }
.settings-status[data-tone="error"] { color: #bd607b; }
.current-config { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 10px; padding: 12px 14px; color: #7e8b9f; background: rgba(224,233,245,.5); border-left: 2px solid #79bce1; font-size: 10px; }
.current-config b { color: #4e6482; font-weight: 600; }
.provider-guide-card { grid-column: 1 / -1; }
.provider-guide-card > header { margin-bottom: 16px; }
.provider-guide-card h2 { margin-top: 6px; }
.provider-notes { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.provider-notes p { margin: 0; padding: 14px; background: rgba(255,255,255,.48); border: 1px solid rgba(92,120,162,.09); border-radius: 12px; }
.provider-notes b, .provider-notes span { display: block; }
.provider-notes b { color: #526884; font-size: 11px; }
.provider-notes span { margin-top: 6px; color: #8490a4; font-size: 10px; line-height: 1.65; }

html[data-reader-font-size="small"] .reader-page .story-copy p { font-size: 16px; }
html[data-reader-font-size="medium"] .reader-page .story-copy p { font-size: 18px; }
html[data-reader-font-size="large"] .reader-page .story-copy p { font-size: 20px; }
html[data-reduce-motion="true"] *, html[data-reduce-motion="true"] *::before, html[data-reduce-motion="true"] *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

/* Immersive atmosphere drawer */
.atmosphere-scrim { position: fixed; inset: 0; z-index: 155; background: rgba(20,28,48,.36); opacity: 0; pointer-events: none; transition: opacity .28s ease; backdrop-filter: blur(2px); }
.atmosphere-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 160; display: flex; width: min(470px,100vw); flex-direction: column; padding: 25px 23px 30px; overflow-y: auto; color: #38465f; background: linear-gradient(145deg,rgba(249,252,255,.98),rgba(229,236,249,.98)); border-left: 1px solid rgba(101,128,169,.16); box-shadow: -24px 0 75px rgba(40,58,96,.24), inset 1px 0 rgba(255,255,255,.8); transform: translateX(105%); transition: transform .32s cubic-bezier(.22,.8,.3,1); scrollbar-color: rgba(117,165,210,.42) transparent; }
.atmosphere-open .atmosphere-scrim { opacity: 1; pointer-events: auto; }
.atmosphere-open .atmosphere-panel { transform: none; }
.atmosphere-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(94,121,162,.12); }
.atmosphere-header small, .atmosphere-section-title small { color: #7991ad; font-family: Georgia, serif; font-size: 8px; letter-spacing: 1.6px; }
.atmosphere-header h2 { margin: 6px 0 5px; color: #2e3d58; font-size: 24px; font-weight: 500; }
.atmosphere-header p { max-width: 325px; margin: 0; color: #8591a5; font-size: 10px; line-height: 1.6; }
.atmosphere-header .ai-card-close { color: #73839b; background: rgba(255,255,255,.68); border-color: rgba(95,123,165,.16); }
.atmosphere-now { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: 13px; align-items: center; margin: 18px 0 17px; padding: 14px; background: linear-gradient(120deg,rgba(195,226,244,.45),rgba(223,213,244,.4)); border: 1px solid rgba(96,126,170,.1); border-radius: 5px 19px 5px 19px; }
.sound-orbit { position: relative; display: grid; place-items: center; width: 53px; height: 53px; color: #6b8eb7; border: 1px solid rgba(103,145,190,.3); border-radius: 50%; }
.sound-orbit::before, .sound-orbit::after, .sound-orbit i { content: ""; position: absolute; border: 1px solid rgba(104,164,207,.25); border-radius: 50%; }
.sound-orbit::before { inset: 8px; }
.sound-orbit::after { inset: -6px; border-color: rgba(151,128,207,.25); transform: rotate(52deg) scaleY(.42); }
.sound-orbit i:first-child { inset: -11px; transform: rotate(-35deg) scaleY(.35); }
.sound-orbit i:nth-child(2) { inset: 16px; border-style: dashed; }
.sound-orbit span { position: relative; z-index: 1; font-size: 18px; }
.sound-orbit.is-playing::after { animation: atmosphereOrbit 8s linear infinite; }
.sound-orbit.is-playing span { animation: atmosphereBreath 1.8s ease-in-out infinite; }
.atmosphere-now small { display: block; color: #7d91ac; font-family: Georgia, serif; font-size: 7px; letter-spacing: 1.4px; }
.atmosphere-now strong, .atmosphere-now > div > span { display: block; }
.atmosphere-now strong { margin-top: 4px; color: #4b6c93; font-size: 14px; font-weight: 600; }
.atmosphere-now > div > span { margin-top: 4px; color: #7d899e; font-size: 10px; }
.atmosphere-play { display: inline-flex; align-items: center; gap: 6px; min-height: 35px; padding: 0 12px; color: #fff; background: linear-gradient(115deg,#67bde8,#927fe3); border: 0; border-radius: 11px 2px 11px 2px; box-shadow: 0 9px 20px rgba(91,113,197,.2); cursor: pointer; }
.atmosphere-play span { font-size: 10px; }
.atmosphere-play b { font-size: 10px; font-weight: 600; }
.atmosphere-section { padding: 17px 0; border-bottom: 1px solid rgba(94,121,162,.1); }
.atmosphere-section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.atmosphere-section-title h3 { margin: 4px 0 0; color: #445570; font-size: 14px; font-weight: 600; }
.atmosphere-section-title > span, .atmosphere-section-title > strong { color: #91a0b3; font-size: 9px; font-weight: 400; }
.sound-preset-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.sound-preset-grid button, .music-preset-list button { min-width: 0; padding: 11px 10px; color: #65758d; text-align: left; background: rgba(255,255,255,.56); border: 1px solid rgba(95,125,168,.11); border-radius: 3px 13px 3px 13px; cursor: pointer; }
.sound-preset-grid button:hover, .music-preset-list button:hover { color: #4f6c95; background: rgba(255,255,255,.9); border-color: rgba(104,149,195,.25); transform: translateY(-1px); }
.sound-preset-grid button.is-active, .music-preset-list button.is-active { color: #45688f; background: linear-gradient(110deg,rgba(202,231,247,.72),rgba(227,217,247,.65)); border-color: rgba(100,149,199,.35); box-shadow: inset 2px 0 #73b9e1, 0 8px 20px rgba(80,110,160,.08); }
.sound-preset-grid button > span { display: grid; place-items: center; float: left; width: 28px; height: 28px; margin: 1px 9px 0 0; color: #6ea6ce; background: rgba(201,229,246,.42); border-radius: 50%; font-size: 15px; }
.sound-preset-grid b, .sound-preset-grid small, .music-preset-list b, .music-preset-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sound-preset-grid b, .music-preset-list b { color: inherit; font-size: 11px; font-weight: 600; }
.sound-preset-grid small, .music-preset-list small { margin-top: 4px; color: #8b98aa; font-size: 8px; }
.music-preset-list { display: grid; gap: 7px; }
.music-preset-list button { display: grid; grid-template-columns: 33px minmax(0,1fr); column-gap: 9px; align-items: center; }
.music-preset-list button > span { grid-row: 1 / span 2; display: grid; place-items: center; width: 30px; height: 30px; color: #8f82c4; background: rgba(222,214,245,.53); border-radius: 9px 2px 9px 2px; font-family: Georgia, serif; font-size: 10px; }
.local-music-control { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding: 11px 12px; color: #6f8098; background: rgba(225,233,244,.48); border: 1px dashed rgba(104,137,177,.23); border-radius: 10px; cursor: pointer; }
.local-music-control input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.local-music-control > span { display: grid; place-items: center; width: 28px; height: 28px; color: #6f9dcb; background: rgba(255,255,255,.76); border-radius: 50%; font-size: 18px; }
.local-music-control b, .local-music-control small { display: block; }
.local-music-control b { color: #58708e; font-size: 10px; }
.local-music-control small { margin-top: 4px; color: #8b98aa; font-size: 8px; }
.mixer-section .atmosphere-section-title { margin-bottom: 5px; }
.mixer-row { display: grid; grid-template-columns: 51px minmax(0,1fr) 38px; gap: 10px; align-items: center; margin-top: 11px; color: #718097; font-size: 10px; }
.mixer-row input { width: 100%; accent-color: #7ba6d1; }
.mixer-row output { color: #6e8bb1; text-align: right; font-family: Georgia, serif; font-size: 10px; }
.focus-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.focus-options button { min-height: 31px; color: #718097; background: rgba(255,255,255,.54); border: 1px solid rgba(94,123,164,.11); border-radius: 8px; font-size: 9px; cursor: pointer; }
.focus-options button.is-active { color: #fff; background: linear-gradient(110deg,#75bde4,#9182d6); border-color: transparent; }
.focus-section p { margin: 10px 0 0; color: #8a96a8; font-size: 9px; line-height: 1.6; }
.atmosphere-status { min-height: 20px; margin: 14px 0 0; color: #7e8ca1; font-size: 10px; line-height: 1.6; }
.atmosphere-status[data-tone="success"] { color: #4c967d; }
.atmosphere-status[data-tone="error"] { color: #bb667e; }
@keyframes atmosphereOrbit { to { transform: rotate(360deg); } }
@keyframes atmosphereBreath { 0%,100% { opacity: .68; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }

@media (max-width: 560px) {
  .atmosphere-panel { width: 100vw; padding: 18px 16px 25px; }
  .atmosphere-now { grid-template-columns: 48px minmax(0,1fr); }
  .sound-orbit { width: 45px; height: 45px; }
  .atmosphere-play { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 620px) {
  .reader-page .sound-toggle { position: fixed; right: 14px; bottom: 92px; z-index: 42; display: grid; place-items: center; width: 43px; height: 43px; min-height: 0; padding: 0; color: #5c6f8f; background: rgba(249,252,255,.86); border: 1px solid rgba(255,255,255,.7); border-radius: 50%; box-shadow: 0 12px 28px rgba(39,58,96,.2), inset 0 1px #fff; backdrop-filter: blur(16px); }
  .reader-page .sound-toggle.is-on { color: #fff; background: linear-gradient(135deg,#68bde7,#927fe2); border-color: rgba(255,255,255,.75); }
  .reader-page .sound-toggle span:last-child { display: none; }
  .reader-page .annotation-toggle { position: fixed; right: 66px; bottom: 92px; z-index: 42; display: grid; place-items: center; width: 43px; height: 43px; min-height: 0; padding: 0; color: #5c6f8f; background: rgba(249,252,255,.86); border: 1px solid rgba(255,255,255,.7); border-radius: 50%; box-shadow: 0 12px 28px rgba(39,58,96,.2), inset 0 1px #fff; backdrop-filter: blur(16px); }
  .reader-page .annotation-toggle.is-on { color: #fff; background: linear-gradient(135deg,#68bde7,#927fe2); border-color: rgba(255,255,255,.75); }
  .reader-page .annotation-toggle > span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sound-orbit.is-playing::after, .sound-orbit.is-playing span { animation: none; }
}

/* Fullscreen immersive reading */
.reader-page .immersive-toggle.is-on, .reader-page .immersive-toggle[aria-pressed="true"] { color: #fff; background: linear-gradient(115deg,#68bde8,#927ee3); border-color: rgba(255,255,255,.7); }
.immersive-hud { position: fixed; top: max(16px,env(safe-area-inset-top)); right: max(18px,env(safe-area-inset-right)); left: max(18px,env(safe-area-inset-left)); z-index: 85; display: none; color: #edf7ff; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .28s ease,transform .28s ease; }
.immersive-mode .immersive-hud { display: block; }
.immersive-mode.immersive-controls-visible .immersive-hud { opacity: 1; transform: none; pointer-events: auto; }
.immersive-hud-main { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 15px; align-items: center; padding: 10px 12px; background: linear-gradient(110deg,rgba(10,19,36,.78),rgba(25,27,47,.58)); border: 1px solid rgba(225,241,255,.2); border-radius: 16px 4px 16px 4px; box-shadow: 0 15px 45px rgba(5,11,25,.22),inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(22px) saturate(1.15); }
.immersive-exit { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; color: rgba(238,247,253,.86); background: rgba(255,255,255,.07); border: 1px solid rgba(229,242,252,.17); border-radius: 11px 2px 11px 2px; cursor: pointer; }
.immersive-exit span { font-size: 18px; font-weight: 300; }
.immersive-exit b { font-size: 10px; font-weight: 500; }
.immersive-story-state { min-width: 0; }
.immersive-story-state small, .immersive-story-state strong, .immersive-story-state > span { display: block; }
.immersive-story-state small { color: #93ccea; font-family: Georgia,serif; font-size: 7px; letter-spacing: 1.5px; }
.immersive-story-state strong { overflow: hidden; margin-top: 3px; color: #f6fbff; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.immersive-story-state > span { margin-top: 3px; color: rgba(223,235,244,.58); font-size: 8px; }
.immersive-story-state i { font-style: normal; }
.immersive-story-state i + i { margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.14); }
.immersive-quick-actions { display: flex; align-items: center; gap: 6px; }
.immersive-quick-actions button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; color: rgba(230,240,248,.72); background: rgba(255,255,255,.045); border: 1px solid rgba(228,242,252,.13); border-radius: 10px 2px 10px 2px; cursor: pointer; }
.immersive-quick-actions button:hover, .immersive-quick-actions button.is-active { color: #fff; background: rgba(138,198,232,.18); border-color: rgba(164,218,247,.38); }
.immersive-quick-actions button span { font-size: 11px; }
.immersive-quick-actions button b { font-size: 9px; font-weight: 500; }
.immersive-progress { position: relative; height: 2px; margin: 5px 16px 0; overflow: hidden; background: rgba(255,255,255,.12); border-radius: 2px; }
.immersive-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#77cff3,#b098eb); box-shadow: 0 0 12px rgba(111,199,241,.58); transition: width .35s ease; }
.reader-page.immersive-mode .app-shell { display: block; height: 100vh; min-height: 0; padding: 0; background: #070c18; }
.reader-page.immersive-mode .chapter-panel, .reader-page.immersive-mode .panel-scrim { display: none; }
.reader-page.immersive-mode .reader-main { position: fixed; inset: 0; z-index: 50; width: 100vw; height: 100vh; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.reader-page.immersive-mode .reader-main::after { border-radius: 0; }
.reader-page.immersive-mode .topbar { position: absolute; top: 0; right: 0; left: 0; z-index: 40; opacity: 0; transform: translateY(-110%); pointer-events: none; }
.reader-page.immersive-mode .novel-stage { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
.reader-page.immersive-mode .story-card { inset: 0 0 82px; padding-top: clamp(100px,12vh,145px); }
.reader-page.immersive-mode .page-controls { opacity: 0; transform: translateY(105%); pointer-events: none; transition: opacity .28s ease,transform .28s ease; }
.reader-page.immersive-mode.immersive-controls-visible .page-controls { opacity: 1; transform: none; pointer-events: auto; }
.reader-page.immersive-mode #soundToggle, .reader-page.immersive-mode #annotationToggle { display: none !important; }
.reader-page.immersive-mode.paragraph-focus-mode .story-copy p { opacity: .24; filter: blur(.25px); transform: translateX(-3px); transition: opacity .25s ease,filter .25s ease,transform .25s ease; }
.reader-page.immersive-mode.paragraph-focus-mode .story-copy p.is-reading-focus { opacity: 1; filter: none; transform: none; }
.reader-page.immersive-mode.paragraph-focus-mode .story-copy p:hover { opacity: 1; filter: none; transform: none; }

@media (max-width: 760px) {
  .reader-page .immersive-toggle { width: 39px; padding: 0; font-size: 0; }
  .reader-page .immersive-toggle span { font-size: 14px; }
  .immersive-hud-main { grid-template-columns: auto minmax(0,1fr); }
  .immersive-quick-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
  .immersive-quick-actions button { justify-content: center; }
  .reader-page.immersive-mode .story-card { padding-top: 132px; }
}
@media (max-width: 480px) {
  .immersive-hud { top: max(8px,env(safe-area-inset-top)); right: 8px; left: 8px; }
  .immersive-hud-main { gap: 9px; padding: 8px; }
  .immersive-exit { min-height: 34px; padding: 0 9px; }
  .immersive-exit b { display: none; }
  .immersive-story-state strong { max-width: 230px; }
  .immersive-quick-actions button { min-height: 32px; padding: 0 5px; }
  .immersive-quick-actions button b { font-size: 8px; }
  .reader-page.immersive-mode .story-card { padding-top: 125px; }
}

@media (max-width: 850px) {
  .settings-grid { grid-template-columns: 1fr; }
  .provider-guide-card { grid-column: auto; }
  .provider-notes { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .settings-main { width: min(100% - 24px,1180px); padding-top: 28px; }
  .settings-topbar { padding: 10px 13px; }
  .settings-page .brand small { display: none; }
  .settings-page .brand b { max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .settings-nav { gap: 5px; }
  .settings-page .reader-link { min-height: 34px; padding: 0 9px; font-size: 10px; }
  .settings-card { padding: 19px 16px; border-radius: 5px 22px 5px 22px; }
  .settings-field-row { grid-template-columns: 1fr; gap: 0; }
  .settings-actions { align-items: stretch; flex-direction: column; }
  .settings-actions > * { width: 100%; margin-left: 0 !important; }
}

/* Unified appearance themes */
:root {
  --theme-bg: #e8eef8;
  --theme-bg-2: #f5f2fa;
  --theme-surface: #f5f8fd;
  --theme-surface-strong: #ffffff;
  --theme-text: #273149;
  --theme-muted: #647087;
  --theme-accent: #68bfea;
  --theme-accent-2: #9680e7;
  --theme-accent-text: #3e6f9a;
  --theme-accent-rgb: 104,191,234;
  --theme-accent-2-rgb: 150,128,231;
  --theme-line: rgba(91,119,162,.15);
  --theme-backdrop: radial-gradient(circle at 84% 7%,rgba(150,128,231,.26),transparent 31%),radial-gradient(circle at 12% 84%,rgba(104,191,234,.2),transparent 36%),linear-gradient(145deg,#e8eef8,#f5f2fa);
  --theme-topbar: rgba(251,253,255,.8);
  --theme-sidebar: linear-gradient(155deg,rgba(255,255,255,.9),rgba(237,242,251,.78));
  --theme-card: linear-gradient(145deg,rgba(255,255,255,.88),rgba(236,241,250,.8));
  --theme-field: rgba(255,255,255,.74);
  --theme-hover: rgba(104,191,234,.11);
  --theme-accent-soft: linear-gradient(110deg,rgba(104,191,234,.23),rgba(150,128,231,.18));
  --theme-on-accent: #14223a;
  --theme-shadow: 0 24px 66px rgba(54,73,111,.15);
  --theme-glow: 0 0 34px rgba(104,191,234,.2);
}

html[data-theme="deepspace"][data-color-mode="light"] { --theme-bg:#e8eef8; --theme-bg-2:#f5f2fa; --theme-accent:#68bfea; --theme-accent-2:#9680e7; --theme-accent-text:#3e6f9a; --theme-accent-rgb:104,191,234; --theme-accent-2-rgb:150,128,231; }
html[data-theme="deepspace"][data-color-mode="dark"] { --theme-bg:#070b17; --theme-bg-2:#151326; --theme-accent:#79d1f4; --theme-accent-2:#aa91ee; --theme-accent-text:#79d1f4; --theme-accent-rgb:121,209,244; --theme-accent-2-rgb:170,145,238; }
html[data-theme="moonsea"][data-color-mode="light"] { --theme-bg:#edf2f5; --theme-bg-2:#e8edf3; --theme-accent:#77a9c7; --theme-accent-2:#b5a9c4; --theme-accent-text:#4f7088; --theme-accent-rgb:119,169,199; --theme-accent-2-rgb:181,169,196; }
html[data-theme="moonsea"][data-color-mode="dark"] { --theme-bg:#0b121b; --theme-bg-2:#111b28; --theme-accent:#8fc9dc; --theme-accent-2:#b8b2d5; --theme-accent-text:#8fc9dc; --theme-accent-rgb:143,201,220; --theme-accent-2-rgb:184,178,213; }
html[data-theme="aurora"][data-color-mode="light"] { --theme-bg:#e8f5f4; --theme-bg-2:#eef0fa; --theme-accent:#54bfc2; --theme-accent-2:#8c7dde; --theme-accent-text:#2f7477; --theme-accent-rgb:84,191,194; --theme-accent-2-rgb:140,125,222; }
html[data-theme="aurora"][data-color-mode="dark"] { --theme-bg:#071719; --theme-bg-2:#10182b; --theme-accent:#66d7cf; --theme-accent-2:#a18cf0; --theme-accent-text:#66d7cf; --theme-accent-rgb:102,215,207; --theme-accent-2-rgb:161,140,240; }
html[data-theme="rose"][data-color-mode="light"] { --theme-bg:#f5edf5; --theme-bg-2:#edf1f8; --theme-accent:#c779a5; --theme-accent-2:#9b83d5; --theme-accent-text:#925071; --theme-accent-rgb:199,121,165; --theme-accent-2-rgb:155,131,213; }
html[data-theme="rose"][data-color-mode="dark"] { --theme-bg:#190e1c; --theme-bg-2:#171326; --theme-accent:#e58bb8; --theme-accent-2:#b69aeb; --theme-accent-text:#e58bb8; --theme-accent-rgb:229,139,184; --theme-accent-2-rgb:182,154,235; }

html[data-color-mode="light"] {
  --theme-surface:#f5f8fd; --theme-surface-strong:#ffffff; --theme-text:#273149; --theme-muted:#647087;
  --theme-line:rgba(91,119,162,.15); --theme-topbar:rgba(251,253,255,.82);
  --theme-sidebar:linear-gradient(155deg,rgba(255,255,255,.9),rgba(237,242,251,.78));
  --theme-card:linear-gradient(145deg,rgba(255,255,255,.88),rgba(236,241,250,.8)); --theme-field:rgba(255,255,255,.74);
  --theme-hover:rgba(var(--theme-accent-rgb),.11); --theme-accent-soft:linear-gradient(110deg,rgba(var(--theme-accent-rgb),.23),rgba(var(--theme-accent-2-rgb),.18));
  --theme-on-accent:#14223a; --theme-shadow:0 24px 66px rgba(54,73,111,.15); --theme-glow:0 0 34px rgba(var(--theme-accent-rgb),.2);
  --theme-backdrop:radial-gradient(circle at 84% 7%,rgba(var(--theme-accent-2-rgb),.26),transparent 31%),radial-gradient(circle at 12% 84%,rgba(var(--theme-accent-rgb),.2),transparent 36%),linear-gradient(145deg,var(--theme-bg),var(--theme-bg-2));
}
html[data-color-mode="dark"] {
  --theme-surface:#0d1526; --theme-surface-strong:#121d31; --theme-text:#edf6ff; --theme-muted:#93a1b7;
  --theme-line:rgba(193,225,255,.16); --theme-topbar:rgba(8,14,28,.84);
  --theme-sidebar:linear-gradient(160deg,rgba(16,25,44,.96),rgba(7,13,27,.92));
  --theme-card:linear-gradient(145deg,rgba(20,30,51,.94),rgba(10,17,32,.9)); --theme-field:rgba(255,255,255,.055);
  --theme-hover:rgba(var(--theme-accent-rgb),.13); --theme-accent-soft:linear-gradient(110deg,rgba(var(--theme-accent-rgb),.2),rgba(var(--theme-accent-2-rgb),.16));
  --theme-on-accent:#07101d; --theme-shadow:0 25px 72px rgba(0,0,0,.34); --theme-glow:0 0 38px rgba(var(--theme-accent-rgb),.25);
  --theme-backdrop:radial-gradient(circle at 84% 7%,rgba(var(--theme-accent-2-rgb),.18),transparent 31%),radial-gradient(circle at 12% 84%,rgba(var(--theme-accent-rgb),.13),transparent 36%),linear-gradient(145deg,var(--theme-bg),var(--theme-bg-2));
}

html { background: var(--theme-bg); }
body { transition: color .25s ease,background-color .25s ease; }
.reader-page, .test-page, .settings-page { color: var(--theme-text); background: var(--theme-backdrop); }
.reader-page .app-shell, .test-page .test-shell, .settings-shell, .test-page .test-layout { background: transparent; }
.reader-page .chapter-panel, .test-page .test-sidebar { color: var(--theme-text); background: var(--theme-sidebar); border-color: var(--theme-line); box-shadow: var(--theme-shadow),inset 0 1px rgba(255,255,255,.07); }
.reader-page .reader-main { background: var(--theme-bg-2); border-color: var(--theme-line); box-shadow: var(--theme-shadow); }
.reader-page .topbar, .test-page .test-topbar, .settings-page .settings-topbar { color: var(--theme-text); background: var(--theme-topbar); border-color: var(--theme-line); box-shadow: 0 8px 35px rgba(20,32,58,.1); backdrop-filter: blur(25px) saturate(1.2); }
.reader-page .brand-mark, .test-page .brand-mark, .settings-page .brand-mark { color: var(--theme-on-accent); background: linear-gradient(135deg,var(--theme-accent),var(--theme-accent-2)); border-color: rgba(255,255,255,.48); box-shadow: 0 10px 28px rgba(var(--theme-accent-rgb),.22),0 0 0 5px rgba(var(--theme-accent-rgb),.06); }
.reader-page .brand b, .test-page .brand b, .settings-page .brand b, .reader-page .topbar-path strong, .test-page .test-sidebar h1, .test-page .quiz-header h2, .settings-hero h1, .settings-card h2 { color: var(--theme-text); }
.reader-page .brand small, .test-page .brand small, .settings-page .brand small, .reader-page .chapter-item small, .test-page .test-sidebar > p, .test-page .selection-actions, .settings-hero p, .settings-field > small, .settings-switch small { color: var(--theme-muted); }
.reader-page .brand-block, .reader-page .library-summary, .test-page .question-count-control, .settings-card-header, .atmosphere-header, .atmosphere-section { border-color: var(--theme-line); }
.reader-page .chapter-item { color: var(--theme-muted); }
.reader-page .chapter-item:hover { color: var(--theme-text); background: var(--theme-hover); }
.reader-page .chapter-item.is-active { color: var(--theme-text); background: var(--theme-accent-soft); box-shadow: inset 2px 0 var(--theme-accent); }
.reader-page .chapter-item.is-active::after { background: linear-gradient(180deg,transparent,var(--theme-accent),transparent); }
.reader-page .chapter-number { color: var(--theme-muted); background: var(--theme-field); border-color: var(--theme-line); }
.reader-page .chapter-item.is-active .chapter-number { color: var(--theme-accent-text); background: var(--theme-surface-strong); border-color: rgba(var(--theme-accent-rgb),.28); }
.reader-page .library-summary { background: var(--theme-field); }
.reader-page .library-summary span, .reader-page .library-summary strong, .reader-page .library-summary small { color: var(--theme-muted); }
.reader-page .ring-progress { background: conic-gradient(var(--theme-accent) calc(var(--progress) * 1%),var(--theme-line) 0); }
.reader-page .ring-progress::after { background: var(--theme-surface); }
.reader-page .ring-progress span { color: var(--theme-accent-text); }
.reader-page .side-test-link, .test-page .primary-button, .settings-page .primary-button, .atmosphere-play, .reader-page .vocab-mini-action.primary { color: var(--theme-on-accent); background: linear-gradient(115deg,var(--theme-accent),var(--theme-accent-2)); border-color: rgba(255,255,255,.5); box-shadow: 0 14px 32px rgba(var(--theme-accent-rgb),.22); }
.reader-page .side-test-link small { color: var(--theme-on-accent); opacity: .68; }
.reader-page .sound-toggle, .reader-page .nav-pill, .test-page .reader-link, .settings-page .reader-link, .settings-page .secondary-button { color: var(--theme-muted); background: var(--theme-field); border-color: var(--theme-line); }
.reader-page .sound-toggle:hover, .reader-page .nav-pill:hover, .test-page .reader-link:hover, .settings-page .reader-link:hover, .settings-page .secondary-button:hover { color: var(--theme-accent-text); background: var(--theme-surface-strong); border-color: rgba(var(--theme-accent-rgb),.38); box-shadow: var(--theme-glow); }
.reader-page .sound-toggle.is-on, .reader-page .annotation-toggle.is-on, .reader-page .immersive-toggle[aria-pressed="true"] { color: var(--theme-on-accent); background: linear-gradient(110deg,var(--theme-accent),var(--theme-accent-2)); }
.reader-page .page-controls::before, .reader-page .page-dots button.is-active, .immersive-progress span { background: linear-gradient(90deg,var(--theme-accent),var(--theme-accent-2)); }

.test-page .section-kicker, .settings-page .section-kicker, .settings-card-header small, .atmosphere-header small, .atmosphere-section-title small { color: var(--theme-accent-text); }
.test-page .test-main { background: transparent; }
.test-page .test-main::before { background: radial-gradient(circle,rgba(var(--theme-accent-rgb),.15) 0 1px,transparent 1.5px); }
.test-page .chapter-check, .test-page .score-board, .test-page .empty-state, .test-page .question-card, .test-page .error-item, .test-page .ai-review-panel, .test-page .ai-review-card, .test-page .result-panel { color: var(--theme-text); background: var(--theme-card); border-color: var(--theme-line); box-shadow: var(--theme-shadow); }
.test-page .chapter-check:hover, .test-page .error-item:hover { color: var(--theme-text); background: var(--theme-hover); }
.test-page .chapter-check:has(input:checked), .test-page .chapter-check.is-selected { color: var(--theme-text); background: var(--theme-accent-soft); border-color: rgba(var(--theme-accent-rgb),.28); box-shadow: inset 2px 0 var(--theme-accent); }
.test-page .question-count-control select, .test-page .answer-input, .test-page .ai-cloze input { color: var(--theme-text); background: var(--theme-field); border-color: var(--theme-line); }
.test-page .answer-input:focus, .test-page .ai-cloze input:focus { color: var(--theme-text); background: var(--theme-surface-strong); border-color: var(--theme-accent); }
.test-page .score-board strong, .test-page .question-word, .test-page .result-score, .test-page .error-item b, .test-page .ai-review-card h4 { color: var(--theme-accent-text); }
.test-page .score-board small, .test-page .empty-state p, .test-page .result-panel p, .test-page .error-item span, .test-page .ai-review-panel p, .test-page .ai-review-card > p { color: var(--theme-muted); }
.test-page .secondary-button { color: var(--theme-muted); background: var(--theme-field); border-color: var(--theme-line); }

.settings-page .settings-card { color: var(--theme-text); background: var(--theme-card); border-color: var(--theme-line); box-shadow: var(--theme-shadow),inset 0 1px rgba(255,255,255,.08); }
.settings-card-icon { color: var(--theme-accent-text); background: var(--theme-accent-soft); border-color: var(--theme-line); }
.settings-field > span, .settings-switch b, .provider-notes b, .current-config b { color: var(--theme-text); }
.settings-field input, .settings-field select, .provider-notes p, .current-config, .settings-page .secondary-button { color: var(--theme-text); background: var(--theme-field); border-color: var(--theme-line); box-shadow: inset 0 1px rgba(255,255,255,.08); }
.settings-field input:focus, .settings-field select:focus { color: var(--theme-text); background: var(--theme-surface-strong); border-color: var(--theme-accent); box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb),.12); }
.settings-field input[readonly] { color: var(--theme-muted); background: var(--theme-field); }
.ai-config-card .settings-field > span { font-family: "Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif; font-size: 12px; font-weight: 600; line-height: 1.45; letter-spacing: .015em; }
.ai-config-card .settings-field input, .ai-config-card .settings-field select, .ai-config-card .secret-input button { font-family: "Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif; font-size: 12px; font-weight: 400; line-height: 1.45; letter-spacing: .01em; }
.ai-config-card .settings-field input::placeholder { color: var(--theme-muted); font: inherit; opacity: .72; }
.ai-config-card .settings-field > small, .ai-config-card .direct-ai-note small { font-family: "Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif; font-size: 10px; line-height: 1.65; letter-spacing: .005em; }
.direct-ai-note { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 11px; align-items: center; margin-bottom: 18px; padding: 12px 14px; color: var(--theme-text); background: var(--theme-accent-soft); border: 1px solid rgba(var(--theme-accent-rgb),.2); border-radius: 4px 16px 4px 16px; }
.direct-ai-note > span { display: grid; place-items: center; width: 34px; height: 34px; color: var(--theme-on-accent); background: linear-gradient(135deg,var(--theme-accent),var(--theme-accent-2)); border-radius: 50%; box-shadow: var(--theme-glow); }
.direct-ai-note b, .direct-ai-note small { display: block; }
.direct-ai-note b { font-size: 11px; font-weight: 600; }
.direct-ai-note small { margin-top: 4px; color: var(--theme-muted); font-size: 9px; line-height: 1.55; }
.settings-switch > span { background: var(--theme-line); }
.settings-switch input:checked + span { background: linear-gradient(90deg,var(--theme-accent),var(--theme-accent-2)); }
.range-field input[type="range"] { accent-color: var(--theme-accent); }
.range-field output, .current-config, .provider-notes span, .settings-status { color: var(--theme-muted); }
.current-config { border-left-color: var(--theme-accent); }

.reader-page .vocab-panel, .reader-page .ai-word-card, .atmosphere-panel { color: var(--theme-text); background: var(--theme-card); border-color: var(--theme-line); box-shadow: -25px 0 72px rgba(7,14,29,.24),inset 0 1px rgba(255,255,255,.07); }
.reader-page .vocab-panel h2, .reader-page .ai-word-card h3, .atmosphere-header h2, .atmosphere-section-title h3, .atmosphere-now strong { color: var(--theme-text); }
.reader-page .vocab-panel > p, .reader-page .vocab-list em, .reader-page .ai-word-header span, .reader-page .ai-status, .reader-page .ai-word-details p, .reader-page .ai-word-details li, .atmosphere-header p, .atmosphere-now > div > span, .sound-preset-grid small, .music-preset-list small, .focus-section p, .atmosphere-status { color: var(--theme-muted); }
.reader-page .vocab-panel header, .reader-page .vocab-list > div, .reader-page .ai-word-header, .reader-page .ai-word-details section { border-color: var(--theme-line); }
.reader-page .vocab-list b, .reader-page .ai-word-header strong, .reader-page .ai-ipa, .reader-page .ai-word-details h4 { color: var(--theme-accent-text); }
.reader-page .vocab-list > div:hover, .atmosphere-now { background: var(--theme-accent-soft); }
.reader-page .ai-word-header { background: var(--theme-accent-soft); }
.reader-page .ai-action-button, .reader-page .ai-mini-button, .sound-preset-grid button, .music-preset-list button, .focus-options button, .local-music-control { color: var(--theme-muted); background: var(--theme-field); border-color: var(--theme-line); }
.reader-page .ai-action-button.primary, .reader-page .ai-mini-button.primary, .focus-options button.is-active { color: var(--theme-on-accent); background: linear-gradient(110deg,var(--theme-accent),var(--theme-accent-2)); }
.ai-action-button.is-speaking, .ai-mini-button.is-speaking, .vocab-mini-action.is-speaking { color: var(--theme-accent-text); background: var(--theme-accent-soft); border-color: rgba(var(--theme-accent-rgb),.42); box-shadow: var(--theme-glow); }
.ai-action-button.is-complete, .ai-mini-button.is-complete, .vocab-mini-action.is-complete { color: #28765f; background: rgba(92,190,155,.14); border-color: rgba(72,166,133,.34); }
.speech-wave { display: inline-flex; align-items: center; justify-content: center; gap: 2px; width: 14px; height: 14px; }
.speech-wave i { width: 2px; height: 5px; background: currentColor; border-radius: 2px; animation: speechWave .72s ease-in-out infinite; }
.speech-wave i:nth-child(2) { height: 11px; animation-delay: -.48s; }
.speech-wave i:nth-child(3) { height: 7px; animation-delay: -.24s; }
@keyframes speechWave { 0%,100% { transform: scaleY(.45); opacity: .58; } 50% { transform: scaleY(1); opacity: 1; } }
.sound-preset-grid button:hover, .music-preset-list button:hover { color: var(--theme-text); background: var(--theme-surface-strong); border-color: rgba(var(--theme-accent-rgb),.3); }
.sound-preset-grid button.is-active, .music-preset-list button.is-active { color: var(--theme-text); background: var(--theme-accent-soft); border-color: rgba(var(--theme-accent-rgb),.34); box-shadow: inset 2px 0 var(--theme-accent); }

/* Appearance settings */
.appearance-settings-card { grid-column: 1 / -1; }
.theme-default-badge { padding: 6px 11px; color: var(--theme-accent-text); background: var(--theme-accent-soft); border: 1px solid rgba(var(--theme-accent-rgb),.2); border-radius: 999px; font-size: 10px; }
.appearance-layout { display: grid; grid-template-columns: minmax(270px,.7fr) minmax(0,1.3fr); gap: 24px; }
.theme-live-preview { position: relative; min-height: 320px; overflow: hidden; padding: 34px 25px 22px; color: var(--theme-text); background: var(--theme-backdrop); border: 1px solid var(--theme-line); border-radius: 6px 30px 6px 30px; box-shadow: inset 0 1px rgba(255,255,255,.18),var(--theme-shadow); isolation: isolate; }
.theme-live-preview::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle,rgba(var(--theme-accent-rgb),.28) 0 1px,transparent 1.5px); background-size: 42px 42px; opacity: .28; mask-image: linear-gradient(135deg,#000,transparent 74%); }
.theme-preview-orbits { position: absolute; top: -65px; right: -46px; width: 210px; aspect-ratio: 1; border: 1px solid rgba(var(--theme-accent-rgb),.28); border-radius: 50%; transform: rotate(-18deg) scaleY(.48); }
.theme-preview-orbits i { position: absolute; inset: 22%; border: 1px dashed rgba(var(--theme-accent-2-rgb),.46); border-radius: inherit; }
.theme-preview-orbits i:nth-child(2) { inset: 37%; border-style: solid; }
.theme-preview-orbits span { position: absolute; top: 47%; right: 5%; color: var(--theme-accent); transform: scaleY(2.08); text-shadow: var(--theme-glow); }
.theme-preview-window { position: relative; overflow: hidden; margin-top: 36px; background: var(--theme-card); border: 1px solid var(--theme-line); border-radius: 4px 22px 4px 22px; box-shadow: var(--theme-shadow); backdrop-filter: blur(20px); }
.theme-preview-window header { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; background: var(--theme-topbar); border-bottom: 1px solid var(--theme-line); }
.theme-preview-window header span { margin-right: auto; color: var(--theme-accent); }
.theme-preview-window header i { width: 5px; height: 5px; background: var(--theme-muted); border-radius: 50%; opacity: .5; }
.theme-preview-window > div { padding: 21px 19px 17px; }
.theme-preview-window small { color: var(--theme-accent-text); font-family: Georgia,serif; font-size: 7px; letter-spacing: 1.5px; }
.theme-preview-window strong { display: block; margin-top: 8px; font-size: 15px; font-weight: 500; }
.theme-preview-window p { margin: 11px 0 0; color: var(--theme-muted); font-family: Georgia,serif; font-size: 10px; }
.theme-preview-window p b { color: var(--theme-accent-text); }
.theme-preview-window footer { display: flex; gap: 4px; padding: 0 19px 15px; }
.theme-preview-window footer span { width: 28px; height: 2px; background: var(--theme-line); border-radius: 2px; }
.theme-preview-window footer span:first-child { width: 55px; background: linear-gradient(90deg,var(--theme-accent),var(--theme-accent-2)); }
.theme-preview-caption { position: absolute; right: 22px; bottom: 18px; left: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.theme-preview-caption small { color: var(--theme-muted); font-size: 9px; }
.theme-preview-caption strong { color: var(--theme-text); font-size: 12px; font-weight: 600; }
.appearance-controls { min-width: 0; }
.appearance-mode-fieldset, .theme-preset-fieldset, .custom-theme-controls { min-width: 0; margin: 0; padding: 0; border: 0; }
.appearance-mode-fieldset legend, .theme-preset-fieldset legend, .custom-theme-controls legend { margin-bottom: 10px; color: var(--theme-text); font-size: 11px; font-weight: 600; }
.appearance-mode-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 21px; }
.appearance-mode-options label { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 43px; color: var(--theme-muted); background: var(--theme-field); border: 1px solid var(--theme-line); border-radius: 12px; cursor: pointer; }
.appearance-mode-options input, .theme-preset-card input { position: absolute; opacity: 0; pointer-events: none; }
.appearance-mode-options label.is-selected, .appearance-mode-options label:has(input:checked) { color: var(--theme-text); background: var(--theme-accent-soft); border-color: rgba(var(--theme-accent-rgb),.35); box-shadow: inset 0 0 0 1px rgba(var(--theme-accent-rgb),.08); }
.appearance-mode-options label:has(input:focus-visible), .theme-preset-card:has(input:focus-visible) { outline: 2px solid var(--theme-accent); outline-offset: 2px; }
.appearance-mode-options span { color: var(--theme-accent); font-size: 16px; }
.appearance-mode-options b { font-size: 10px; font-weight: 600; }
.theme-preset-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.theme-preset-card { position: relative; display: grid; grid-template-columns: 53px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 11px; min-height: 72px; padding: 12px; color: var(--theme-muted); background: var(--theme-field); border: 1px solid var(--theme-line); border-radius: 4px 15px 4px 15px; cursor: pointer; transition: .22s ease; }
.theme-preset-card:hover { color: var(--theme-text); background: var(--theme-surface-strong); transform: translateY(-1px); }
.theme-preset-card.is-selected, .theme-preset-card:has(input:checked) { color: var(--theme-text); background: var(--theme-accent-soft); border-color: rgba(var(--theme-accent-rgb),.34); box-shadow: inset 2px 0 var(--theme-accent),0 10px 25px rgba(var(--theme-accent-rgb),.08); }
.theme-swatches { grid-row: 1 / span 2; display: flex; align-items: center; padding-left: 5px; }
.theme-swatches i { width: 22px; height: 35px; margin-left: -5px; border: 2px solid var(--theme-surface-strong); border-radius: 10px; box-shadow: 0 5px 12px rgba(25,36,59,.1); }
.theme-preset-card b { align-self: end; color: inherit; font-size: 11px; font-weight: 600; }
.theme-preset-card small { margin-top: 4px; color: var(--theme-muted); font-size: 8px; }
.theme-preset-card em { position: absolute; top: 7px; right: 8px; padding: 2px 5px; color: var(--theme-accent-text); background: var(--theme-surface-strong); border-radius: 8px; font-size: 7px; font-style: normal; }
.theme-preset-card[data-preset="deepspace"] .theme-swatches i:nth-child(1) { background:#f5f8fd; } .theme-preset-card[data-preset="deepspace"] .theme-swatches i:nth-child(2) { background:#68bfea; } .theme-preset-card[data-preset="deepspace"] .theme-swatches i:nth-child(3) { background:#9680e7; }
.theme-preset-card[data-preset="moonsea"] .theme-swatches i:nth-child(1) { background:#edf2f5; } .theme-preset-card[data-preset="moonsea"] .theme-swatches i:nth-child(2) { background:#77a9c7; } .theme-preset-card[data-preset="moonsea"] .theme-swatches i:nth-child(3) { background:#b5a9c4; }
.theme-preset-card[data-preset="aurora"] .theme-swatches i:nth-child(1) { background:#e8f5f4; } .theme-preset-card[data-preset="aurora"] .theme-swatches i:nth-child(2) { background:#54bfc2; } .theme-preset-card[data-preset="aurora"] .theme-swatches i:nth-child(3) { background:#8c7dde; }
.theme-preset-card[data-preset="rose"] .theme-swatches i:nth-child(1) { background:#f5edf5; } .theme-preset-card[data-preset="rose"] .theme-swatches i:nth-child(2) { background:#c779a5; } .theme-preset-card[data-preset="rose"] .theme-swatches i:nth-child(3) { background:#9b83d5; }
.theme-preset-card[data-preset="custom"] .theme-swatches i:nth-child(1) { background:conic-gradient(#70c7e9,#9c82e3,#dc8eb8,#70c7e9); } .theme-preset-card[data-preset="custom"] .theme-swatches i:nth-child(2) { background:#17223a; } .theme-preset-card[data-preset="custom"] .theme-swatches i:nth-child(3) { background:#f7f9fd; }
.custom-theme-controls { display: grid; grid-template-columns: repeat(3,minmax(130px,1fr)) minmax(180px,1.4fr) auto; gap: 11px; align-items: end; margin-top: 22px; padding: 17px; background: var(--theme-field); border: 1px solid var(--theme-line); border-radius: 5px 18px 5px 18px; }
.custom-theme-controls legend { grid-column: 1 / -1; }
.custom-theme-controls:disabled { opacity: .46; }
.theme-color-field { display: grid; grid-template-columns: 42px minmax(0,1fr); grid-template-rows: auto auto; gap: 2px 9px; align-items: center; min-width: 0; }
.theme-color-field > span { color: var(--theme-text); font-size: 10px; font-weight: 600; }
.theme-color-field input { grid-row: 1 / span 2; width: 42px; height: 42px; padding: 3px; background: var(--theme-surface-strong); border: 1px solid var(--theme-line); border-radius: 12px; cursor: pointer; }
.theme-color-field small { overflow: hidden; color: var(--theme-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.theme-glass-field { margin: 0; }
.custom-theme-controls .text-button { align-self: center; min-height: 40px; padding: 0 10px; color: var(--theme-accent-text); }
.theme-save-hint { color: var(--theme-muted); font-size: 9px; }

html[data-color-mode="dark"] .reader-page .scene-image.is-illustrated { filter: saturate(.78) contrast(1.02) brightness(.78); }
html[data-color-mode="dark"] .reader-page .scene-vignette { background: linear-gradient(90deg,rgba(4,9,20,.82),rgba(12,17,34,.46) 56%,rgba(8,10,23,.24)),linear-gradient(0deg,rgba(3,6,15,.78),transparent 43%); }
html[data-color-mode="dark"] .reader-page .sound-toggle, html[data-color-mode="dark"] .reader-page .annotation-toggle { color: var(--theme-muted); background: var(--theme-topbar); border-color: var(--theme-line); }

@media (max-width: 880px) {
  .appearance-layout { grid-template-columns: 1fr; }
  .theme-live-preview { min-height: 280px; }
  .custom-theme-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .theme-preset-grid { grid-template-columns: 1fr; }
  .appearance-mode-options { gap: 5px; }
  .appearance-mode-options label { gap: 4px; }
  .custom-theme-controls { grid-template-columns: 1fr; }
  .theme-live-preview { min-height: 265px; padding: 24px 17px 18px; }
  .theme-preview-window { margin-top: 28px; }
  .theme-save-hint { display: block; text-align: center; }
  .reader-page .page-dots { width: min(160px,40vw); }
}

/* Collapsible chapter library */
.reader-page .menu-button { display: grid; place-items: center; flex: 0 0 auto; color: var(--theme-muted); background: var(--theme-field); border-color: var(--theme-line); border-radius: 11px; transition: color .22s ease,background .22s ease,border-color .22s ease,transform .22s ease; }
.reader-page .menu-button:hover, .reader-page .menu-button.is-collapsed { color: var(--theme-accent-text); background: var(--theme-accent-soft); border-color: rgba(var(--theme-accent-rgb),.32); }
.reader-page .menu-button:active { transform: scale(.94); }
@media (min-width: 1001px) {
  .reader-page .app-shell { transition: none; }
  .reader-page .chapter-panel { transition: opacity .24s ease,transform .32s cubic-bezier(.22,.8,.3,1),visibility .32s step-end; }
  .reader-page.chapters-collapsed .app-shell { grid-template-columns: 0 minmax(0,1fr); gap: 0; }
  .reader-page.chapters-collapsed .chapter-panel { opacity: 0; transform: translateX(calc(-100% - 24px)); visibility: hidden; pointer-events: none; }
}

/* Dark native controls and refined reading progress */
html[data-color-mode="dark"] { color-scheme: dark; }
html[data-color-mode="light"] { color-scheme: light; }

.test-page .question-count-control select {
  font-family: "Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
}
.test-page .question-count-control select:hover {
  border-color: rgba(var(--theme-accent-rgb),.38);
  box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb),.06),inset 0 1px rgba(255,255,255,.08);
}
html[data-color-mode="dark"] .test-page .question-count-control select {
  color: #edf6ff;
  background-color: #121b2e;
  border-color: rgba(193,225,255,.2);
  color-scheme: dark;
}
html[data-color-mode="dark"] .test-page .question-count-control select:focus-visible {
  color: #fff;
  background-color: #15223a;
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb),.15),0 8px 24px rgba(0,0,0,.18);
}
html[data-color-mode="dark"] .test-page .question-count-control option,
html[data-color-mode="dark"] .test-page .question-count-control optgroup {
  color: #e8f2ff;
  background-color: #111a2c;
}
html[data-color-mode="dark"] .test-page .question-count-control option:checked {
  color: #07111f;
  background-color: #82cef1;
}

.reader-page .page-controls::before {
  height: 1px;
  opacity: .72;
  box-shadow: none;
}
.reader-page .page-status {
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.reader-page .page-status > span {
  gap: 6px;
  min-height: 22px;
  padding: 0 9px;
  color: var(--theme-muted);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--theme-line);
  border-radius: 999px;
}
.reader-page .page-status b {
  color: var(--theme-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}
.reader-page .page-status i {
  color: var(--theme-muted);
  font-size: 10px;
  opacity: .55;
}
.reader-page .page-status span span {
  color: var(--theme-muted);
  font-size: 10px;
}
.reader-page .page-dots {
  align-items: center;
  width: min(210px,32vw);
  height: 24px;
  gap: 4px;
}
.reader-page .page-dots button,
.reader-page .page-dots button.is-active {
  position: relative;
  min-width: 10px;
  height: 24px;
  padding: 0;
  background: transparent;
  border-radius: 999px;
  box-shadow: none;
}
.reader-page .page-dots button::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 1px;
  left: 1px;
  height: 2px;
  background: rgba(196,215,239,.25);
  border-radius: 999px;
  transform: translateY(-50%);
  transition: height .2s ease,background-color .2s ease,box-shadow .2s ease,opacity .2s ease;
}
.reader-page .page-dots button:hover::before {
  height: 3px;
  background: rgba(var(--theme-accent-rgb),.48);
}
.reader-page .page-dots button.is-active::before {
  height: 4px;
  background: linear-gradient(90deg,var(--theme-accent),var(--theme-accent-2));
  box-shadow: 0 0 8px rgba(var(--theme-accent-rgb),.28);
}
.reader-page .page-dots button.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1px;
  width: 6px;
  height: 6px;
  background: #f4fbff;
  border: 1px solid rgba(var(--theme-accent-rgb),.7);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(var(--theme-accent-rgb),.5);
  transform: translate(35%,-50%);
}
.reader-page .page-dots button:focus-visible {
  outline: 1px solid rgba(var(--theme-accent-rgb),.72);
  outline-offset: -1px;
}

@media (max-width: 620px) {
  .reader-page .page-dots { width: min(150px,38vw); gap: 3px; justify-content: flex-start; }
  .reader-page .page-status > span { padding: 0 7px; }
}

/* Pearl-light reading canvas: image-led without fighting the text */
html[data-color-mode="light"] .reader-page .reader-main {
  background: linear-gradient(145deg,#f6f9fe,#e8eef8 58%,#eee9f7);
  border-color: rgba(255,255,255,.86);
  box-shadow: 0 24px 72px rgba(54,73,111,.17),inset 0 1px #fff;
}
html[data-color-mode="light"] .reader-page .novel-stage {
  background:
    radial-gradient(circle at 82% 12%,rgba(var(--theme-accent-2-rgb),.13),transparent 30%),
    radial-gradient(circle at 24% 80%,rgba(var(--theme-accent-rgb),.12),transparent 36%),
    linear-gradient(145deg,#f7faff,#e7eef8 58%,#f0ebf7);
}
html[data-color-mode="light"] .reader-page .scene-image {
  background-color: #eaf1f9;
  filter: none;
}
html[data-color-mode="light"] .reader-page .scene-image[aria-busy="true"] {
  filter: none;
  opacity: .9;
}
html[data-color-mode="light"] .reader-page .scene-image.has-imported-art {
  background-color: #edf3fa;
}
html[data-color-mode="light"] .reader-page .scene-image.has-imported-art::after {
  inset: -8%;
  background-position: center var(--scene-focus,32%);
  filter: saturate(.62) contrast(.9) brightness(1.24);
  opacity: .34;
  transform: none;
}
html[data-color-mode="light"] .reader-page .scene-image.has-imported-art::before {
  top: clamp(18px,2.2vw,34px);
  right: clamp(20px,3vw,48px);
  bottom: 104px;
  width: clamp(340px,31vw,520px);
  background-color: rgba(26,40,66,.055);
  background-position: right center;
  background-size: contain;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 5px 28px 5px 28px;
  box-shadow: 0 24px 65px rgba(53,69,108,.2),inset 0 1px rgba(255,255,255,.55);
  opacity: .97;
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.52) 11%,#000 26%,#000 100%);
  mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.52) 11%,#000 26%,#000 100%);
  filter: saturate(.9) contrast(1.02) brightness(1.03);
}
html[data-color-mode="light"] .reader-page .scene-vignette,
html[data-color-mode="light"] .reader-page .novel-stage.portrait-art .scene-vignette {
  background:
    linear-gradient(90deg,rgba(248,251,255,.99) 0%,rgba(244,248,254,.94) 36%,rgba(239,245,252,.72) 51%,rgba(240,245,252,.24) 67%,transparent 84%),
    linear-gradient(0deg,rgba(238,244,252,.95) 0%,rgba(246,249,254,.32) 24%,transparent 48%);
}
html[data-color-mode="light"] .reader-page .scene-glow {
  opacity: .72;
  background:
    radial-gradient(circle at 72% 16%,rgba(255,255,255,.68),transparent 27%),
    radial-gradient(circle at 58% 70%,rgba(var(--theme-accent-2-rgb),.13),transparent 34%),
    radial-gradient(circle,rgba(var(--theme-accent-rgb),.28) 0 1px,transparent 1.5px);
  background-size: auto,auto,72px 72px;
  mask-image: linear-gradient(90deg,transparent 6%,#000 44%,#000 100%);
}
html[data-color-mode="light"] .reader-page .story-card {
  color: #27334b;
  background: linear-gradient(90deg,rgba(249,252,255,.54),rgba(245,249,254,.3) 48%,transparent 72%);
  scrollbar-color: rgba(var(--theme-accent-rgb),.48) transparent;
}
html[data-color-mode="light"] .reader-page .story-eyebrow {
  color: #4f789e;
  background: rgba(255,255,255,.66);
  border-color: rgba(94,128,174,.18);
  box-shadow: 0 10px 30px rgba(66,85,124,.1),inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(18px) saturate(1.1);
}
html[data-color-mode="light"] .reader-page .story-eyebrow span:last-child {
  color: #6f7d93;
}
html[data-color-mode="light"] .reader-page .story-card h1 {
  max-width: 780px;
  color: #202c43;
  font-weight: 600;
  text-shadow: 0 1px rgba(255,255,255,.92),0 10px 34px rgba(55,76,116,.1);
}
html[data-color-mode="light"] .reader-page .title-divider > span {
  background: linear-gradient(90deg,var(--theme-accent),rgba(var(--theme-accent-2-rgb),.4),transparent);
}
html[data-color-mode="light"] .reader-page .reading-hint {
  color: #6d7b91;
}
html[data-color-mode="light"] .reader-page .hint-dot {
  color: var(--theme-accent-text);
  text-shadow: 0 0 12px rgba(var(--theme-accent-rgb),.26);
}
html[data-color-mode="light"] .reader-page .story-copy {
  max-width: 780px;
}
html[data-color-mode="light"] .reader-page .story-copy p {
  color: rgba(35,48,71,.94);
  font-weight: 400;
  text-shadow: 0 1px rgba(255,255,255,.86);
}
html[data-color-mode="light"] .reader-page .vocab-word {
  color: #3478a4;
  background: linear-gradient(180deg,transparent 68%,rgba(var(--theme-accent-rgb),.17) 68%);
  border-bottom-color: rgba(var(--theme-accent-rgb),.68);
  text-shadow: none;
}
html[data-color-mode="light"] .reader-page .vocab-word:hover,
html[data-color-mode="light"] .reader-page .vocab-word:focus-visible {
  color: #10233d;
  background: linear-gradient(110deg,rgba(var(--theme-accent-rgb),.3),rgba(var(--theme-accent-2-rgb),.22));
  box-shadow: 0 7px 20px rgba(var(--theme-accent-rgb),.16);
}
html[data-color-mode="light"] .reader-page .vocab-meaning {
  color: #687791;
  text-shadow: none;
}
html[data-color-mode="light"] .reader-page .celestial-orbits i {
  border-color: rgba(89,119,164,.24);
}
html[data-color-mode="light"] .reader-page .celestial-orbits i:nth-child(2) {
  border-color: rgba(var(--theme-accent-rgb),.42);
}
html[data-color-mode="light"] .reader-page .celestial-orbits span {
  color: #6fa9cd;
  text-shadow: 0 0 14px rgba(var(--theme-accent-rgb),.35);
}
html[data-color-mode="light"] .reader-page .scene-signature {
  padding: 11px 14px;
  color: #fff;
  background: linear-gradient(90deg,transparent,rgba(13,23,42,.7));
  border-right-color: rgba(185,224,248,.9);
  border-radius: 12px 2px 2px 12px;
  text-shadow: 0 2px 8px rgba(0,0,0,.42);
  backdrop-filter: blur(12px);
}
html[data-color-mode="light"] .reader-page .scene-signature small,
html[data-color-mode="light"] .reader-page .scene-signature b { color: #f5fbff; }
html[data-color-mode="light"] .reader-page .scene-signature span { color: #bde8ff; }

html[data-color-mode="light"] .reader-page .page-controls {
  color: #3a4861;
  background: linear-gradient(0deg,rgba(242,247,253,.98),rgba(250,252,255,.9));
  border-top-color: rgba(88,116,158,.15);
  box-shadow: 0 -14px 42px rgba(55,73,111,.1),inset 0 1px rgba(255,255,255,.86);
  backdrop-filter: blur(24px) saturate(1.15);
}
html[data-color-mode="light"] .reader-page .page-button {
  color: #66758d;
}
html[data-color-mode="light"] .reader-page .page-button:not(:disabled):hover {
  color: #2f5f87;
}
html[data-color-mode="light"] .reader-page .page-button > span:first-child,
html[data-color-mode="light"] .reader-page .page-button.next > span:last-child {
  border-color: rgba(88,116,158,.18);
  background: rgba(255,255,255,.58);
}
html[data-color-mode="light"] .reader-page .page-button.next > span:first-child,
html[data-color-mode="light"] .reader-page .page-button.next > span:last-child {
  border-color: transparent;
  background: transparent;
}
html[data-color-mode="light"] .reader-page .page-button small {
  color: #8a96a9;
}
html[data-color-mode="light"] .reader-page .page-button.next {
  color: #315d83;
  background: linear-gradient(110deg,rgba(var(--theme-accent-rgb),.16),rgba(var(--theme-accent-2-rgb),.12));
  border-color: rgba(var(--theme-accent-rgb),.34);
  box-shadow: 0 10px 28px rgba(64,94,137,.1),inset 0 1px rgba(255,255,255,.86);
}
html[data-color-mode="light"] .reader-page .page-status > span {
  background: rgba(255,255,255,.68);
  border-color: rgba(89,117,158,.13);
  box-shadow: inset 0 1px #fff;
}
html[data-color-mode="light"] .reader-page .page-dots button::before {
  background: rgba(91,119,160,.2);
}

html[data-color-mode="light"] .reader-page.immersive-mode .app-shell {
  background: #edf3fb;
}
html[data-color-mode="light"] .reader-page .immersive-hud {
  color: #2d3a52;
}
html[data-color-mode="light"] .reader-page .immersive-hud-main {
  background: linear-gradient(110deg,rgba(251,253,255,.9),rgba(237,243,252,.82));
  border-color: rgba(91,121,164,.18);
  box-shadow: 0 15px 45px rgba(48,67,104,.16),inset 0 1px rgba(255,255,255,.92);
}
html[data-color-mode="light"] .reader-page .immersive-exit,
html[data-color-mode="light"] .reader-page .immersive-quick-actions button {
  color: #65738b;
  background: rgba(255,255,255,.56);
  border-color: rgba(89,118,160,.16);
}
html[data-color-mode="light"] .reader-page .immersive-quick-actions button:hover,
html[data-color-mode="light"] .reader-page .immersive-quick-actions button.is-active {
  color: #2f5f88;
  background: rgba(var(--theme-accent-rgb),.16);
  border-color: rgba(var(--theme-accent-rgb),.34);
}
html[data-color-mode="light"] .reader-page .immersive-story-state small { color: var(--theme-accent-text); }
html[data-color-mode="light"] .reader-page .immersive-story-state strong { color: #26334a; }
html[data-color-mode="light"] .reader-page .immersive-story-state > span { color: #7b879a; }
html[data-color-mode="light"] .reader-page .immersive-story-state i + i { border-left-color: rgba(90,119,160,.16); }
html[data-color-mode="light"] .reader-page .immersive-progress { background: rgba(82,111,153,.15); }

@media (max-width: 1000px) {
  html[data-color-mode="light"] .reader-page .scene-image.has-imported-art::after {
    inset: -5%;
    filter: saturate(.55) brightness(1.24);
    opacity: .27;
  }
  html[data-color-mode="light"] .reader-page .scene-image.has-imported-art::before {
    inset: 0;
    width: auto;
    background-position: center var(--scene-focus,32%);
    background-size: cover;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: .22;
    -webkit-mask-image: linear-gradient(180deg,#000 0%,rgba(0,0,0,.82) 38%,transparent 82%);
    mask-image: linear-gradient(180deg,#000 0%,rgba(0,0,0,.82) 38%,transparent 82%);
    filter: saturate(.62) contrast(.92) brightness(1.18);
  }
  html[data-color-mode="light"] .reader-page .scene-vignette,
  html[data-color-mode="light"] .reader-page .novel-stage.portrait-art .scene-vignette {
    background: linear-gradient(90deg,rgba(247,250,255,.88),rgba(242,247,253,.74)),linear-gradient(0deg,rgba(239,245,252,.98),transparent 64%);
  }
  html[data-color-mode="light"] .reader-page .story-card {
    background: linear-gradient(90deg,rgba(249,252,255,.58),rgba(245,249,254,.42));
  }
}

@media (max-width: 680px) {
  html[data-color-mode="light"] .reader-page .story-card {
    background: linear-gradient(180deg,rgba(249,252,255,.76),rgba(243,248,254,.94));
  }
  html[data-color-mode="light"] .reader-page .scene-image.has-imported-art::before { opacity: .17; }
  html[data-color-mode="light"] .reader-page .story-card h1 { font-size: clamp(27px,8.5vw,34px); }
  html[data-color-mode="light"] .reader-page .story-copy p { color: #293750; text-shadow: 0 1px #fff; }
  html[data-color-mode="light"] .reader-page .scene-signature {
    right: 18px;
    color: #31405a;
    background: rgba(249,252,255,.74);
    border-right-color: var(--theme-accent);
    text-shadow: none;
  }
  html[data-color-mode="light"] .reader-page .scene-signature small,
  html[data-color-mode="light"] .reader-page .scene-signature b { color: #31405a; }
  html[data-color-mode="light"] .reader-page .scene-signature span { color: var(--theme-accent-text); }
}

/* Compositor-first transitions for library, immersive mode and page navigation */
@view-transition { navigation: none; }

.reader-page .reader-main {
  view-transition-name: reader-stage;
  contain: paint;
}
.reader-page .chapter-panel {
  view-transition-name: reader-library;
  contain: layout style;
  backface-visibility: hidden;
}
.reader-page .scene-image {
  contain: paint;
  backface-visibility: hidden;
}
.reader-page .story-copy {
  contain: layout style paint;
  backface-visibility: hidden;
  transform: translateZ(0);
}
@media (max-width: 1000px) {
  .reader-page .chapter-panel { will-change: transform; }
  .reader-page .panel-scrim { will-change: opacity; }
}
.reader-page.immersive-mode .immersive-hud,
.reader-page.immersive-mode .page-controls,
.reader-page.immersive-mode .topbar {
  will-change: opacity,transform;
}

::view-transition-group(reader-stage) {
  animation-duration: .34s;
  animation-timing-function: cubic-bezier(.22,.8,.3,1);
}
::view-transition-old(reader-stage),
::view-transition-new(reader-stage) {
  height: 100%;
  mix-blend-mode: normal;
  backface-visibility: hidden;
}
::view-transition-old(reader-library) {
  animation: readerLibraryOut .22s cubic-bezier(.4,0,1,1) both;
  mix-blend-mode: normal;
}
::view-transition-new(reader-library) {
  animation: readerLibraryIn .3s cubic-bezier(.22,.8,.3,1) both;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  animation: routeFadeOut .16s ease-out both;
}
::view-transition-new(root) {
  animation: routeFadeIn .28s cubic-bezier(.22,.8,.3,1) both;
}
@keyframes readerLibraryOut {
  to { opacity: 0; transform: translate3d(-18px,0,0); }
}
@keyframes readerLibraryIn {
  from { opacity: 0; transform: translate3d(-18px,0,0); }
}
@keyframes routeFadeOut {
  to { opacity: .18; transform: scale(.997); }
}
@keyframes routeFadeIn {
  from { opacity: 0; transform: translate3d(0,6px,0) scale(.998); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation-duration: .001ms !important; animation-delay: 0s !important; }
  .reader-page .chapter-panel,
  .reader-page .immersive-hud,
  .reader-page .page-controls,
  .reader-page .topbar { transition-duration: .001ms !important; }
}

html[data-reduce-motion="true"]::view-transition-group(*),
html[data-reduce-motion="true"]::view-transition-old(*),
html[data-reduce-motion="true"]::view-transition-new(*) {
  animation-duration: .001ms !important;
  animation-delay: 0s !important;
}

/* Keep the hidden vocabulary drawer out of the paint tree until it is opened. */
.reader-page .vocab-panel {
  visibility: hidden;
  transition-property: transform, visibility;
  transition-duration: .28s, 0s;
  transition-delay: 0s, .28s;
}
.reader-page.vocab-open .vocab-panel {
  visibility: visible;
  transition-delay: 0s;
}
.reader-page .vocab-list[hidden] { display: none; }
.reader-page .vocab-list > div {
  content-visibility: auto;
  contain: layout style paint;
  contain-intrinsic-size: 74px;
}