@import "tailwindcss";

:root {
  --paper: #f4f0e6;
  --surface: #fffdf7;
  --surface-muted: #f8f3e9;
  --ink: #1d2924;
  --muted: #68736d;
  --forest: #173f35;
  --forest-light: #255c4e;
  --gold: #c38c39;
  --gold-soft: #ead5ad;
  --line: #ded6c8;
  --warning: #815f27;
  --shadow: 0 20px 60px rgb(52 42 26 / 8%);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 8% 4%, rgb(195 140 57 / 9%), transparent 28rem), linear-gradient(180deg, #f8f5ed 0, var(--paper) 42rem);
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
}
a { color: inherit; text-decoration: none; }
svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.app-shell { min-height: 100vh; }

.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) minmax(18rem, 36rem) minmax(11rem, 1fr);
  align-items: center;
  gap: 2rem;
  min-height: 5rem;
  padding: 0 4.5vw;
  border-bottom: 1px solid rgb(76 69 55 / 10%);
  background: rgb(248 245 237 / 90%);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 0.75rem; width: fit-content; }
.brand-mark { display: grid; width: 2.7rem; height: 2.7rem; color: #f9f3e6; background: var(--forest); border-radius: 0.8rem 0.8rem 0.8rem 0.25rem; box-shadow: 0 5px 18px rgb(23 63 53 / 22%); place-items: center; }
.brand strong, .brand small { display: block; }
.brand strong { font-family: Georgia, "Songti SC", serif; font-size: 1.2rem; letter-spacing: 0.14em; }
.brand small { margin-top: 0.06rem; color: var(--muted); font-size: 0.62rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; }

.search-box { display: flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; padding: 0 0.95rem; color: #77817c; border: 1px solid var(--line); background: rgb(255 253 247 / 72%); border-radius: 0.8rem; }
.search-box input { min-width: 0; flex: 1; color: var(--ink); border: 0; outline: 0; background: transparent; font: inherit; }
.search-box kbd { padding: 0.18rem 0.38rem; color: #929891; border: 1px solid #d9d3c7; background: #f4f0e7; border-radius: 0.35rem; font: 0.68rem/1.2 system-ui, sans-serif; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 2.85rem; padding: 0.7rem 1rem; border: 1px solid transparent; border-radius: 0.72rem; font-size: 0.92rem; font-weight: 720; transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease; }
.button:hover { transform: translateY(-1px); }
.button:focus-visible, .brand:focus-visible, .mobile-nav a:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 3px; }
.button-primary { color: #fffdf7; background: var(--forest); box-shadow: 0 7px 20px rgb(23 63 53 / 17%); }
.button-primary:hover { background: var(--forest-light); box-shadow: 0 10px 25px rgb(23 63 53 / 23%); }
.top-upload { justify-self: end; }

.public-notice { display: flex; align-items: center; justify-content: center; gap: 0.65rem; min-height: 2.7rem; padding: 0.55rem 1rem; color: var(--warning); border-bottom: 1px solid rgb(195 140 57 / 22%); background: rgb(234 213 173 / 30%); font-size: 0.78rem; }
.public-notice > span { display: grid; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; border: 1px solid currentColor; border-radius: 50%; font: 700 0.75rem/1 system-ui, sans-serif; place-items: center; }
.public-notice p { margin: 0; }

.library-main { width: min(1180px, 91vw); margin: 0 auto; padding: 4.2rem 0 6rem; }
.library-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; }
.eyebrow { margin: 0 0 0.55rem; color: var(--gold); font-size: 0.72rem; font-weight: 780; letter-spacing: 0.18em; text-transform: uppercase; }
.library-heading h1, .empty-library h2 { margin: 0; font-family: Georgia, "Songti SC", "STSong", serif; font-weight: 580; }
.library-heading h1 { font-size: clamp(2.1rem, 4vw, 3.35rem); letter-spacing: -0.04em; }
.library-heading > div > p:last-child { margin: 0.65rem 0 0; color: var(--muted); }
.library-meta { display: flex; gap: 0.75rem; }
.library-meta span { min-width: 6rem; padding: 0.7rem 0.85rem; color: var(--muted); border: 1px solid var(--line); background: rgb(255 253 247 / 58%); border-radius: 0.7rem; font-size: 0.75rem; text-align: center; }
.library-meta strong { display: block; color: var(--forest); font-family: Georgia, serif; font-size: 1.15rem; }

.empty-library { display: flex; min-height: 25rem; align-items: center; flex-direction: column; justify-content: center; padding: 3rem 1.5rem; border: 1px solid rgb(222 214 200 / 80%); background: linear-gradient(rgb(255 253 247 / 82%), rgb(255 253 247 / 82%)), repeating-linear-gradient(90deg, transparent 0 58px, rgb(195 140 57 / 5%) 59px 60px); border-radius: 1.3rem; box-shadow: var(--shadow); text-align: center; }
.empty-illustration { display: flex; align-items: center; gap: 1.15rem; margin-bottom: 1.8rem; color: var(--forest); }
.book-glyph { display: grid; width: 5.5rem; height: 5.5rem; border: 1px solid var(--gold-soft); background: var(--surface-muted); border-radius: 50%; box-shadow: inset 0 0 0 0.6rem rgb(234 213 173 / 18%); place-items: center; }
.book-glyph svg { width: 3rem; height: 3rem; stroke-width: 1.35; }
.sound-wave { width: 1.8rem; height: 2.3rem; border-right: 1px solid var(--gold); border-radius: 50%; opacity: 0.65; }
.sound-wave::before { display: block; width: 100%; height: 100%; border-right: 1px solid var(--gold); border-radius: 50%; content: ""; transform: scale(0.66); }
.wave-left { transform: rotate(180deg); }
.empty-library h2 { font-size: 2rem; }
.empty-library > p:not(.eyebrow) { max-width: 34rem; margin: 0.8rem 0 1.6rem; color: var(--muted); line-height: 1.8; }
.empty-library small { margin-top: 1rem; color: #89908a; }
.mobile-nav { display: none; }

.workflow-shell { min-height: 100vh; }
.workflow-topbar { display: flex; min-height: 5rem; align-items: center; justify-content: space-between; padding: 0 4.5vw; border-bottom: 1px solid rgb(76 69 55 / 10%); background: rgb(248 245 237 / 86%); }
.back-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.88rem; font-weight: 650; }
.workflow-main { width: min(940px, 91vw); margin: 0 auto; padding: 4rem 0 7rem; }
.workflow-heading { max-width: 42rem; margin-bottom: 2rem; }
.workflow-heading h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 580; letter-spacing: -0.04em; }
.workflow-heading > p:last-child { color: var(--muted); line-height: 1.8; }
.import-card { padding: clamp(1.25rem, 3vw, 2.2rem); border: 1px solid var(--line); background: rgb(255 253 247 / 78%); border-radius: 1.25rem; box-shadow: var(--shadow); }
.stage-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.7rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.stage-track li { display: flex; align-items: center; gap: 0.45rem; color: #8c948e; font-size: 0.72rem; white-space: nowrap; }
.stage-track li::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.stage-track li:last-child::after { display: none; }
.stage-track li > span { display: grid; width: 1.55rem; height: 1.55rem; border: 1px solid var(--line); border-radius: 50%; place-items: center; }
.stage-track li.active, .stage-track li.done { color: var(--forest); font-weight: 750; }
.stage-track li.active > span { color: #fffdf7; border-color: var(--forest); background: var(--forest); }
.stage-track li.done > span { color: var(--forest); border-color: var(--gold-soft); background: rgb(234 213 173 / 35%); }
.drop-zone { position: relative; display: flex; min-height: 20rem; align-items: center; flex-direction: column; justify-content: center; padding: 2rem; border: 1.5px dashed #c9beaa; background: rgb(248 243 233 / 60%); border-radius: 1rem; text-align: center; transition: border-color 150ms ease, background 150ms ease; }
.drop-zone.dragging { border-color: var(--gold); background: rgb(234 213 173 / 28%); }
.drop-zone > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-zone h2 { margin: 1rem 0 0.2rem; font-family: Georgia, "Songti SC", serif; font-size: 1.45rem; font-weight: 600; overflow-wrap: anywhere; }
.drop-zone p { margin: 0 0 1.3rem; color: var(--muted); font-size: 0.86rem; }
.drop-icon { display: grid; width: 4.5rem; height: 4.5rem; color: var(--forest); border: 1px solid var(--gold-soft); background: var(--surface); border-radius: 50%; place-items: center; }
.drop-icon svg { width: 2rem; height: 2rem; }
.import-progress { margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--line); background: var(--surface-muted); border-radius: 0.8rem; }
.import-progress > span { display: flex; justify-content: space-between; font-size: 0.85rem; }
.import-progress em { color: var(--forest); font-style: normal; font-weight: 750; }
.import-progress progress { width: 100%; height: 0.55rem; margin-top: 0.6rem; accent-color: var(--forest); }
.import-progress p { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.75rem; }
.import-actions { display: flex; justify-content: flex-end; gap: 0.7rem; margin-top: 1.25rem; }
.button-quiet, .drop-zone .button { color: var(--forest); border-color: var(--line); background: var(--surface); }
.button:disabled { cursor: not-allowed; opacity: 0.45; transform: none; }
.form-message { margin: 1rem 0 0; padding: 0.8rem 1rem; color: var(--forest); background: rgb(61 138 115 / 10%); border-radius: 0.7rem; line-height: 1.6; }
.form-message.error { color: #8e3e32; background: rgb(170 64 50 / 10%); }
.import-notes { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.import-notes h3 { margin: 0 0 0.7rem; font-family: Georgia, "Songti SC", serif; font-size: 1rem; }
.import-notes ul { display: grid; gap: 0.45rem; margin: 0; padding-left: 1.2rem; color: var(--muted); font-size: 0.8rem; line-height: 1.6; }

.state-card { display: flex; min-height: 16rem; align-items: center; flex-direction: column; justify-content: center; padding: 2rem; color: var(--muted); border: 1px solid var(--line); background: rgb(255 253 247 / 70%); border-radius: 1rem; text-align: center; }
.state-card p { max-width: 30rem; line-height: 1.7; }
.state-error strong { color: #963f33; }
.loading-dot { width: 1.1rem; height: 1.1rem; margin-bottom: 0.8rem; border: 2px solid var(--line); border-top-color: var(--forest); border-radius: 50%; animation: spin 750ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: clamp(1rem, 2vw, 1.7rem); }
.book-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); background: rgb(255 253 247 / 74%); border-radius: 1rem; box-shadow: 0 12px 34px rgb(52 42 26 / 6%); }
.book-cover { position: relative; display: grid; aspect-ratio: 3 / 4; color: var(--forest); background: linear-gradient(145deg, var(--gold-soft), var(--surface-muted)); place-items: center; }
.book-cover > svg { width: 4.5rem; height: 4.5rem; opacity: 0.75; }
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-status { position: absolute; right: 0.65rem; bottom: 0.65rem; padding: 0.28rem 0.48rem; color: #fff; background: rgb(23 63 53 / 88%); border-radius: 0.35rem; font-size: 0.62rem; font-weight: 750; backdrop-filter: blur(8px); }
.status-failed { background: rgb(142 62 50 / 90%); }
.book-card-copy { padding: 1rem; }
.format-chip { color: var(--gold); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; }
.book-card h2 { margin: 0.3rem 0; font-family: Georgia, "Songti SC", serif; font-size: 1.08rem; line-height: 1.35; }
.book-card-copy > p { margin: 0; color: var(--muted); font-size: 0.8rem; }
.book-progress { margin: 0.85rem 0 0.95rem; }
.book-progress span { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; color: var(--muted); font-size: 0.68rem; }
.book-progress em { overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.book-progress strong { color: var(--forest); font-variant-numeric: tabular-nums; }
.book-progress progress { display: block; width: 100%; height: 0.35rem; margin-top: 0.35rem; accent-color: var(--forest); }
.book-card-copy > .book-progress-empty { margin: 0.85rem 0 0.95rem; font-size: 0.68rem; }
.book-actions { display: flex; flex-wrap: wrap; gap: 0.45rem 0.8rem; margin-top: 0.9rem; color: var(--forest); font-size: 0.72rem; font-weight: 750; }
.book-actions button { padding: 0; color: inherit; border: 0; background: transparent; font: inherit; cursor: pointer; }
.book-actions .danger-link { color: #963f33; }
.library-error { margin: 1rem 0 0; padding: 0.75rem 1rem; color: #963f33; border: 1px solid rgb(150 63 51 / 25%); background: rgb(150 63 51 / 7%); border-radius: 0.65rem; }
.modal-backdrop { position: fixed; z-index: 60; inset: 0; display: grid; padding: 1rem; background: rgb(11 20 16 / 55%); backdrop-filter: blur(7px); place-items: center; }
.book-dialog { display: grid; gap: 0.85rem; width: min(29rem, 100%); max-height: min(90vh, 48rem); overflow-y: auto; padding: 1.5rem; border: 1px solid var(--line); background: var(--surface); border-radius: 1rem; box-shadow: 0 24px 80px rgb(0 0 0 / 28%); }
.book-dialog header h2, .book-dialog > h2 { margin: 0.2rem 0 0; font-family: Georgia, "Songti SC", serif; font-size: 1.45rem; }
.book-dialog > label { display: grid; gap: 0.35rem; color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.dialog-hint { margin-top: -0.35rem; color: var(--muted); line-height: 1.5; }
.dialog-cover-remove { justify-self: start; margin-top: -0.3rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.book-dialog input, .book-dialog select { width: 100%; height: 2.7rem; padding: 0 0.75rem; color: var(--ink); border: 1px solid var(--line); background: var(--surface-muted); border-radius: 0.55rem; font: inherit; }
.book-dialog > p { margin: 0; color: var(--muted); line-height: 1.7; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 0.65rem; margin-top: 0.5rem; }
.button-danger { color: white; border-color: #963f33; background: #963f33; }
.danger-dialog { border-color: rgb(150 63 51 / 30%); }
.mobile-search { display: none; }

.proofreader-main { width: min(1500px, 96vw); margin: 0 auto; padding: 2.6rem 0 6rem; }
.proofreader-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; width: min(1180px, 94vw); margin: 0 auto 1.8rem; }
.proofreader-heading h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 580; letter-spacing: -0.04em; }
.proofreader-heading > div > p:last-child { margin: 0.6rem 0 0; color: var(--muted); line-height: 1.7; }
.proofreader-card { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-height: 42rem; overflow: hidden; border: 1px solid var(--line); background: rgb(255 253 247 / 75%); border-radius: 1.15rem; box-shadow: var(--shadow); }
.chapter-rail { min-width: 0; padding: 1rem; border-right: 1px solid var(--line); background: rgb(248 243 233 / 65%); }
.chapter-rail-title { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.55rem 1rem; }
.chapter-rail-title strong { min-width: 0; overflow: hidden; font-family: Georgia, "Songti SC", serif; text-overflow: ellipsis; white-space: nowrap; }
.chapter-rail-title small { flex: 0 0 auto; color: var(--muted); font-size: 0.68rem; }
.chapter-rail nav { display: grid; gap: 0.35rem; }
.chapter-rail nav button { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: start; gap: 0.55rem; width: 100%; padding: 0.7rem; color: var(--muted); border: 0; background: transparent; border-radius: 0.65rem; font: inherit; text-align: left; cursor: pointer; }
.chapter-rail nav button:hover, .chapter-rail nav button.active { color: var(--ink); background: var(--surface); }
.chapter-rail nav button > span:first-child { display: grid; width: 1.55rem; height: 1.55rem; color: var(--gold); border: 1px solid var(--gold-soft); border-radius: 50%; font-size: 0.68rem; place-items: center; }
.chapter-rail nav button > span:last-child { min-width: 0; overflow: hidden; font-size: 0.78rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.chapter-rail nav small { display: block; margin-top: 0.2rem; color: var(--muted); font-size: 0.62rem; font-weight: 500; }
.proofreader-workspace { min-width: 0; }
.proofreader-toolbar { display: flex; min-height: 4.4rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); }
.proofreader-toolbar > div:first-child strong, .proofreader-toolbar > div:first-child small { display: block; }
.proofreader-toolbar > div:first-child strong { font-family: Georgia, "Songti SC", serif; }
.proofreader-toolbar > div:first-child small { margin-top: 0.16rem; color: var(--muted); font-size: 0.68rem; }
.proofreader-toolbar > div:last-child { display: flex; gap: 0.45rem; }
.proofreader-toolbar button, .source-pane header button, .segment-editor footer button { padding: 0.48rem 0.66rem; color: var(--forest); border: 1px solid var(--line); background: var(--surface); border-radius: 0.5rem; font: 650 0.72rem/1 system-ui, sans-serif; cursor: pointer; }
.proofreader-toolbar button:disabled, .source-pane header button:disabled { cursor: not-allowed; opacity: 0.4; }
.proofreader-toolbar .save-button { color: #fffdf7; border-color: var(--forest); background: var(--forest); }
.proofreader-columns { display: grid; grid-template-columns: minmax(20rem, 1fr) minmax(24rem, 1.05fr); min-height: 38rem; }
.source-pane, .text-pane { min-width: 0; }
.source-pane { border-right: 1px solid var(--line); background: #dedbd2; }
.source-pane > header, .text-pane > header { display: flex; min-height: 3.2rem; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.source-pane h2, .text-pane h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 0.9rem; }
.source-pane header > div { display: flex; align-items: center; gap: 0.45rem; }
.source-pane header span, .text-pane header > span { color: var(--muted); font-size: 0.65rem; }
.pdf-canvas-wrap { display: grid; height: 38rem; overflow: auto; padding: 1.4rem; place-items: start center; }
.pdf-canvas-wrap canvas { max-width: 100%; height: auto !important; background: white; box-shadow: 0 10px 30px rgb(0 0 0 / 15%); }
.epub-original { height: 38rem; overflow: auto; padding: 2rem clamp(1.2rem, 4vw, 3.5rem); color: #202722; background: #f9f7f0; font-family: Georgia, "Songti SC", serif; font-size: 0.92rem; line-height: 1.9; }
.epub-original > p:first-child { padding: 0.7rem; color: #72654f; border: 1px solid #ded2bd; background: #f2eadc; border-radius: 0.55rem; font-family: system-ui, sans-serif; font-size: 0.72rem; }
.segment-editor-list { display: grid; align-content: start; gap: 0.65rem; height: 38rem; overflow: auto; padding: 0.8rem; background: var(--surface); }
.segment-editor { padding: 0.75rem; border: 1px solid var(--line); background: var(--surface-muted); border-radius: 0.65rem; }
.segment-editor.excluded { opacity: 0.68; background: repeating-linear-gradient(-45deg, transparent 0 8px, rgb(129 95 39 / 5%) 9px 10px), var(--surface-muted); }
.segment-meta { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.45rem; }
.segment-meta > span { display: grid; width: 1.35rem; height: 1.35rem; color: var(--muted); border: 1px solid var(--line); border-radius: 50%; font-size: 0.62rem; place-items: center; }
.segment-meta em { color: var(--forest); font-size: 0.62rem; font-style: normal; font-weight: 750; }
.segment-meta strong { padding: 0.18rem 0.35rem; color: var(--warning); background: rgb(234 213 173 / 28%); border-radius: 0.3rem; font-size: 0.6rem; }
.segment-editor textarea { width: 100%; min-height: 5rem; resize: vertical; color: var(--ink); border: 0; outline: 0; background: transparent; font: 0.88rem/1.75 Georgia, "Songti SC", serif; }
.segment-editor textarea:focus { box-shadow: inset 3px 0 0 var(--gold); }
.segment-editor footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.55rem; border-top: 1px solid var(--line); }
.segment-editor footer label { display: flex; align-items: center; gap: 0.38rem; color: var(--muted); font-size: 0.68rem; }
.segment-editor footer input { accent-color: var(--forest); }
.proofreader-message { margin: 0; padding: 0.8rem 1rem; color: var(--forest); border-top: 1px solid var(--line); background: rgb(61 138 115 / 8%); font-size: 0.75rem; }
.proofreader-message.error { color: #963f33; background: rgb(150 63 51 / 8%); }
.ocr-card { align-self: start; margin: 1rem; text-align: left; }
.ocr-card p { max-width: 42rem; }
.ocr-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1rem; }
.ocr-progress { display: grid; grid-template-columns: minmax(10rem, 1fr) auto; align-items: center; gap: 0.45rem 0.7rem; width: min(32rem, 100%); margin-top: 1rem; }
.ocr-progress progress { width: 100%; height: 0.65rem; accent-color: var(--forest); }
.ocr-progress span { color: var(--forest); font-size: 0.72rem; font-weight: 750; }
.ocr-progress small { grid-column: 1 / -1; color: var(--muted); }

.player-topbar > div { display: flex; align-items: center; gap: 0.8rem; }
.listen-main { width: min(1500px, 96vw); margin: 0 auto; padding: 1.5rem 0 9.5rem; }
.player-card { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-height: calc(100vh - 9rem); overflow: hidden; border: 1px solid var(--line); background: rgb(255 253 247 / 76%); border-radius: 1.2rem; box-shadow: var(--shadow); }
.player-chapters { grid-row: 1 / 3; padding: 1.25rem 0.9rem; border-right: 1px solid var(--line); background: rgb(248 243 233 / 68%); }
.player-chapters header { padding: 0.3rem 0.55rem 1.3rem; }
.player-chapters h1 { margin: 0.35rem 0; font-family: Georgia, "Songti SC", serif; font-size: 1.25rem; line-height: 1.3; }
.player-chapters header p { margin: 0; color: var(--muted); font-size: 0.75rem; }
.player-chapters nav { display: grid; gap: 0.35rem; }
.player-chapters nav button { display: grid; grid-template-columns: 1.65rem minmax(0, 1fr); gap: 0.55rem; width: 100%; padding: 0.68rem; color: var(--muted); border: 0; background: transparent; border-radius: 0.65rem; font: inherit; text-align: left; cursor: pointer; }
.player-chapters nav button:hover, .player-chapters nav button.active { color: var(--ink); background: var(--surface); }
.player-chapters nav button > span:first-child { display: grid; width: 1.5rem; height: 1.5rem; color: var(--gold); border: 1px solid var(--gold-soft); border-radius: 50%; font-size: 0.64rem; place-items: center; }
.player-chapters nav button > span:last-child { overflow: hidden; font-size: 0.78rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.player-chapters nav small { display: block; margin-top: 0.18rem; color: var(--muted); font-size: 0.6rem; font-weight: 500; }
.player-reading { min-width: 0; }
.player-reading-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.35rem clamp(1rem, 4vw, 3.2rem); border-bottom: 1px solid var(--line); }
.player-reading-head h2 { margin: 0.2rem 0 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(1.45rem, 3vw, 2.1rem); }
.player-reading-head > a { color: var(--forest); font-size: 0.74rem; font-weight: 750; }
.sentence-list { height: calc(100vh - 24rem); min-height: 25rem; overflow-y: auto; padding: clamp(1.2rem, 4vw, 3.5rem) clamp(1rem, 7vw, 7rem) 5rem; scroll-behavior: smooth; }
.sentence { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.75rem; width: 100%; padding: 0.72rem 0.9rem; color: var(--ink); border: 0; background: transparent; border-radius: 0.6rem; font: 1rem/1.95 Georgia, "Songti SC", serif; text-align: left; cursor: pointer; transition: background 160ms ease, box-shadow 160ms ease; }
.sentence > span:first-child { padding-top: 0.28rem; color: var(--muted); font: 0.62rem/1 system-ui, sans-serif; text-align: right; }
.sentence:hover { background: rgb(221 180 103 / 10%); }
.sentence.current { background: rgb(221 180 103 / 22%); box-shadow: inset 4px 0 0 var(--gold); }
.sentence.current > span:last-child { color: var(--forest); font-weight: 650; }
.sentence.skipped { opacity: 0.5; text-decoration: line-through; cursor: default; }
.player-controls { grid-column: 2; padding: 0.75rem clamp(0.8rem, 3vw, 2.4rem) 1rem; border-top: 1px solid var(--line); background: rgb(255 253 247 / 92%); backdrop-filter: blur(14px); }
.player-status-line, .seek-line, .transport-controls, .secondary-controls { display: flex; align-items: center; }
.player-status-line { justify-content: space-between; gap: 1rem; min-height: 1.2rem; color: var(--muted); font-size: 0.64rem; }
.seek-line { gap: 0.7rem; margin-top: 0.45rem; color: var(--muted); font: 0.66rem/1 system-ui, sans-serif; }
.seek-line input { flex: 1; accent-color: var(--gold); }
.transport-controls { justify-content: center; gap: clamp(0.35rem, 2vw, 1rem); margin: 0.55rem 0; }
.transport-controls button { min-width: 3rem; min-height: 2.7rem; color: var(--forest); border: 1px solid var(--line); background: var(--surface); border-radius: 999px; font: 700 0.72rem/1 system-ui, sans-serif; cursor: pointer; }
.transport-controls .play-toggle { width: 3.5rem; height: 3.5rem; color: #fffdf7; border-color: var(--forest); background: var(--forest); font-size: 1rem; }
.secondary-controls { justify-content: center; flex-wrap: wrap; gap: 0.6rem 1.2rem; }
.secondary-controls label { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.68rem; font-weight: 650; }
.secondary-controls select { padding: 0.38rem 0.5rem; color: var(--ink); border: 1px solid var(--line); background: var(--surface); border-radius: 0.45rem; font: inherit; }
.secondary-controls input { width: 6rem; accent-color: var(--forest); }
.player-message { margin: 0.65rem 0 0; color: var(--forest); font-size: 0.7rem; text-align: center; }
.player-message.error { color: #963f33; }

@media (max-width: 760px) {
  .topbar { display: flex; min-height: 4.5rem; justify-content: space-between; padding: 0 1rem; }
  .search-box, .top-upload { display: none; }
  .public-notice { align-items: flex-start; padding: 0.65rem 1rem; font-size: 0.72rem; line-height: 1.5; }
  .public-notice > span { margin-top: 0.08rem; }
  .library-main { width: calc(100% - 2rem); padding: 2.5rem 0 7rem; }
  .library-heading { align-items: flex-start; flex-direction: column; gap: 1.4rem; }
  .library-heading h1 { font-size: 2.25rem; }
  .library-meta { width: 100%; }
  .library-meta span { flex: 1; }
  .empty-library { min-height: 25rem; padding-inline: 1.2rem; }
  .empty-illustration { gap: 0.55rem; }
  .sound-wave { width: 1.2rem; }
  .mobile-nav { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); padding: 0.45rem 0 max(0.45rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgb(255 253 247 / 94%); backdrop-filter: blur(18px); }
  .mobile-nav > * { display: flex; align-items: center; flex-direction: column; gap: 0.25rem; color: var(--muted); font-size: 0.65rem; }
  .mobile-nav .active { color: var(--forest); }
  .mobile-nav .mobile-upload { color: var(--gold); }
  .workflow-topbar { min-height: 4.5rem; padding: 0 1rem; }
  .workflow-main { width: calc(100% - 2rem); padding: 2.5rem 0 5rem; }
  .back-link { font-size: 0.75rem; }
  .stage-track { grid-template-columns: repeat(5, minmax(3rem, 1fr)); overflow-x: auto; }
  .stage-track li { align-items: center; flex-direction: column; gap: 0.3rem; text-align: center; }
  .stage-track li::after { display: none; }
  .drop-zone { min-height: 18rem; padding-inline: 1rem; }
  .import-actions { flex-direction: column-reverse; }
  .import-actions .button { width: 100%; }
  .mobile-search { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; }
  .mobile-search label { flex: 1; }
  .mobile-search input { width: 100%; height: 2.85rem; padding: 0 0.85rem; color: var(--ink); border: 1px solid var(--line); background: var(--surface); border-radius: 0.7rem; font: inherit; }
  .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  .book-card-copy { padding: 0.8rem; }
  .proofreader-main { width: calc(100% - 1rem); padding-top: 2rem; }
  .proofreader-heading { width: calc(100% - 1rem); align-items: flex-start; flex-direction: column; }
  .proofreader-heading .button { width: 100%; }
  .proofreader-card { grid-template-columns: 1fr; border-radius: 0.8rem; }
  .chapter-rail { border-right: 0; border-bottom: 1px solid var(--line); }
  .chapter-rail nav { display: flex; overflow-x: auto; }
  .chapter-rail nav button { min-width: 11rem; }
  .proofreader-toolbar { align-items: flex-start; flex-direction: column; }
  .proofreader-toolbar > div:last-child { width: 100%; overflow-x: auto; }
  .proofreader-columns { grid-template-columns: 1fr; }
  .source-pane { border-right: 0; border-bottom: 1px solid var(--line); }
  .pdf-canvas-wrap, .epub-original { height: min(60vh, 30rem); }
  .segment-editor-list { height: auto; max-height: none; }
  .player-topbar .button { display: none; }
  .listen-main { width: calc(100% - 0.75rem); padding-top: 0.5rem; padding-bottom: 11.5rem; }
  .player-card { grid-template-columns: 1fr; min-height: calc(100vh - 5rem); border-radius: 0.85rem; }
  .player-chapters { grid-row: auto; padding: 0.7rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .player-chapters header { padding-bottom: 0.75rem; }
  .player-chapters nav { display: flex; overflow-x: auto; }
  .player-chapters nav button { flex: 0 0 10.5rem; }
  .player-reading-head { padding: 1rem; }
  .sentence-list { height: auto; min-height: 44vh; max-height: calc(100vh - 25rem); padding: 1rem 0.6rem 5rem; }
  .sentence { grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.5rem; padding: 0.68rem 0.55rem; font-size: 0.98rem; line-height: 1.9; }
  .player-controls { position: fixed; z-index: 35; right: 0; bottom: 0; left: 0; grid-column: 1; padding: 0.55rem 0.75rem max(0.65rem, env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgb(40 35 25 / 12%); }
  .transport-controls { justify-content: space-between; }
  .transport-controls button:first-child, .transport-controls button:last-child { display: none; }
  .secondary-controls { justify-content: space-between; gap: 0.45rem; }
  .secondary-controls label { flex-direction: column; gap: 0.15rem; }
  .secondary-controls input { width: 4.8rem; }
}

@media (prefers-color-scheme: dark) {
  :root { --paper: #111915; --surface: #19231e; --surface-muted: #1d2a24; --ink: #f2ede2; --muted: #aab3ad; --forest: #3d8a73; --forest-light: #4b9e86; --gold: #ddb467; --gold-soft: #725a31; --line: #344239; --warning: #e0bb72; --shadow: 0 20px 60px rgb(0 0 0 / 22%); }
  body { background: radial-gradient(circle at 8% 4%, rgb(221 180 103 / 8%), transparent 28rem), var(--paper); }
  .topbar, .mobile-nav { background: rgb(17 25 21 / 90%); }
  .button-primary { color: #08130f; }
  .search-box, .library-meta span, .empty-library { background-color: rgb(25 35 30 / 78%); }
  .import-card, .state-card, .book-card { background-color: rgb(25 35 30 / 78%); }
  .proofreader-card { background-color: rgb(25 35 30 / 78%); }
  .player-card, .player-controls { background-color: rgb(25 35 30 / 92%); }
  .player-chapters { background: rgb(29 42 36 / 80%); }
  .source-pane { background: #29332e; }
  .epub-original { color: #e9e4da; background: #18211d; }
  .search-box kbd { color: var(--muted); border-color: var(--line); background: #202d27; }
}

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

.legal-footer { display: flex; width: min(1120px, calc(100% - 3rem)); margin: 0 auto; padding: 1.1rem 0 1.5rem; justify-content: space-between; gap: 1rem; color: var(--muted); border-top: 1px solid var(--line); font: 500 0.68rem/1.6 system-ui, sans-serif; }
.legal-footer a { color: var(--forest); text-underline-offset: 0.18em; }

@media (max-width: 760px) {
  .legal-footer { width: calc(100% - 2rem); padding-bottom: 6.25rem; flex-direction: column; }
}
