:root {
  --bg: #f5f1e9;
  --bg-elevated: #fbf8f2;
  --surface: #fffdf9;
  --surface-soft: #eee8dd;
  --ink: #1d1b18;
  --ink-soft: #6f6961;
  --ink-faint: #9b9388;
  --line: #ddd5c9;
  --red: #a23a32;
  --red-dark: #74251f;
  --gold: #bd8750;
  --green: #536c5c;
  --shadow-sm: 0 8px 30px rgba(49, 38, 23, .07);
  --shadow-lg: 0 26px 80px rgba(42, 31, 18, .16);
  --serif: "Songti SC", "Noto Serif SC", STSong, "Times New Roman", serif;
  --sans: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --radius: 22px;
}

html[data-theme="dark"] {
  --bg: #111211;
  --bg-elevated: #171817;
  --surface: #1d1e1c;
  --surface-soft: #282924;
  --ink: #eeeae2;
  --ink-soft: #aaa49a;
  --ink-faint: #77736d;
  --line: #34352f;
  --red: #da766b;
  --red-dark: #ef968a;
  --gold: #d1a16b;
  --green: #89a392;
  --shadow-sm: 0 10px 32px rgba(0, 0, 0, .18);
  --shadow-lg: 0 28px 90px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  transition: background .25s, color .25s;
}
body.no-scroll { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }
.page-noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .022; z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.topbar {
  height: 76px; position: sticky; top: 0; z-index: 40; display: flex; align-items: center;
  padding: 0 max(24px, calc((100vw - 1260px) / 2)); gap: 46px;
  background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.brand { min-width: 238px; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-seal {
  width: 41px; height: 41px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px 13px 13px 5px;
  color: #fff8ed; background: linear-gradient(145deg, #bd5548, #7d2925); box-shadow: 0 8px 22px rgba(132, 44, 36, .28);
  font: 700 21px/1 var(--serif); border: 1px solid rgba(255,255,255,.18);
}
.brand-seal.large { width: 54px; height: 54px; font-size: 28px; border-radius: 17px 17px 17px 6px; }
.brand-copy b { display: block; font: 700 16px/1.2 var(--serif); letter-spacing: .12em; }
.brand-copy small { display: block; color: var(--ink-faint); margin-top: 5px; font-size: 10px; letter-spacing: .08em; }
.main-nav { display: flex; gap: 8px; flex: 1; }
.main-nav a { padding: 9px 16px; color: var(--ink-soft); text-decoration: none; font-size: 14px; border-radius: 99px; transition: .2s; }
.main-nav a:hover, .main-nav a.active { color: var(--ink); background: var(--surface-soft); }
.header-actions { display: flex; align-items: center; gap: 9px; }
.circle-btn, .quiet-btn, .profile-btn {
  height: 40px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 99px;
}
.circle-btn { width: 40px; padding: 0; font-size: 17px; }
.quiet-btn { padding: 0 18px; background: var(--ink); color: var(--surface); border-color: var(--ink); font-weight: 650; }
.profile-btn { padding: 4px 13px 4px 5px; display: flex; align-items: center; gap: 8px; }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--gold), var(--red)); }
.avatar::before { content: "阅"; font: 700 13px var(--serif); }
.profile-name { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

.route-loading { min-height: 70vh; display: grid; place-content: center; justify-items: center; gap: 18px; color: var(--ink-soft); }
.route-loading i { width: 34px; height: 34px; border: 2px solid var(--line); border-top-color: var(--red); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.overline { color: var(--red); font-size: 11px; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; }
.container { width: min(1260px, calc(100% - 40px)); margin: 0 auto; }

.home-hero { width: min(1260px, calc(100% - 40px)); margin: 30px auto 64px; min-height: 490px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.25fr .75fr; border-radius: 34px; color: #fff8ed; background: #251f1b; box-shadow: var(--shadow-lg); }
.home-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 75% 10%, rgba(191,128,76,.35), transparent 34%), linear-gradient(105deg, rgba(22,18,16,.95) 35%, rgba(63,36,29,.72)); z-index: 1; }
.home-hero::after { content: "阅"; position: absolute; right: 33%; bottom: -160px; color: #fff; opacity: .03; font: 500 470px/1 var(--serif); z-index: 1; }
.hero-cover-blur { position: absolute; inset: -80px -60px -80px 42%; width: 70%; height: calc(100% + 160px); object-fit: cover; filter: blur(42px) saturate(.65); opacity: .42; }
.hero-copy { position: relative; z-index: 3; align-self: center; padding: 68px 30px 68px 70px; max-width: 760px; }
.hero-copy h1 { max-width: 650px; margin: 18px 0 20px; font: 700 clamp(43px, 5vw, 72px)/1.12 var(--serif); letter-spacing: .035em; }
.hero-copy p { max-width: 610px; margin: 0; color: #d7cbc0; font-size: 15px; line-height: 1.95; }
.hero-meta { display: flex; gap: 20px; margin-top: 24px; color: #bfb3a8; font-size: 13px; }
.hero-meta b { color: #f0d19d; font-weight: 600; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; }
.btn { min-height: 44px; border: 1px solid transparent; border-radius: 13px; padding: 0 19px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; font-weight: 700; font-size: 14px; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity:.55;cursor:not-allowed;transform:none;box-shadow:none; }
.btn-primary { background: linear-gradient(135deg, #b54a3f, #84302a); color: #fff; box-shadow: 0 9px 25px rgba(137,45,38,.25); }
.btn-light { background: #f4dfbd; color: #392820; }
.btn-ghost-light { border-color: rgba(255,255,255,.22); color: #fff; background: rgba(255,255,255,.07); backdrop-filter: blur(8px); }
.btn-outline { color: var(--ink); border-color: var(--line); background: var(--surface); }
.btn-danger { color: #c64f47; border-color: color-mix(in srgb, #c64f47 35%, var(--line)); background: transparent; }
.btn-block { width: 100%; }
.hero-visual { position: relative; z-index: 2; display: grid; place-items: center; padding-right: 46px; perspective: 1200px; }
.hero-book { width: min(270px, 75%); aspect-ratio: 3/4.25; border-radius: 7px 17px 17px 7px; overflow: hidden; transform: rotateY(-8deg) rotateZ(2deg); box-shadow: -16px 22px 45px rgba(0,0,0,.38), inset 5px 0 10px rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); background: #5b3027; }
.hero-book img { width: 100%; height: 100%; object-fit: cover; }
.cover-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: #f6dec0; background: linear-gradient(145deg, #a64d40, #2b211d); font: 700 48px var(--serif); }

.announcement { margin: -35px auto 52px; display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: 13px; }
.announcement i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 6px color-mix(in srgb,var(--red) 10%,transparent); }
.section { margin-bottom: 72px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 23px; }
.section-title h2 { margin: 6px 0 0; font: 700 29px/1.3 var(--serif); letter-spacing: .03em; }
.section-title p { margin: 7px 0 0; color: var(--ink-soft); font-size: 13px; }
.search-panel { display: flex; align-items: center; min-width: min(360px,100%); height: 44px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
.search-panel span { padding-left: 15px; color: var(--ink-faint); }
.search-panel input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; padding: 0 12px; }
.search-panel button { align-self: stretch; border: 0; padding: 0 17px; color: var(--surface); background: var(--ink); }
.category-row { display: flex; gap: 9px; margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.category-row::-webkit-scrollbar { display: none; }
.category-chip { flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); padding: 9px 15px; border-radius: 99px; }
.category-chip.active { color: #fff; border-color: var(--red); background: var(--red); }
.book-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 25px 20px; }
.book-card { min-width: 0; }
.book-cover { display: block; position: relative; aspect-ratio: 3/4.25; overflow: hidden; border-radius: 9px 18px 18px 9px; background: var(--surface-soft); box-shadow: 0 12px 28px rgba(38,28,18,.13); transition: transform .28s, box-shadow .28s; }
.book-cover-link { display:block;width:100%;height:100%;text-decoration:none; }
.book-cover::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; background: linear-gradient(90deg,rgba(0,0,0,.2),rgba(255,255,255,.12),transparent); }
.book-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.book-card:hover .book-cover { transform: translateY(-7px); box-shadow: 0 22px 42px rgba(38,28,18,.19); }
.book-card:hover .book-cover img { transform: scale(1.035); }
.status-pill { position: absolute; top: 12px; left: 13px; padding: 5px 9px; border-radius: 99px; color: #fff; background: rgba(24,20,17,.76); backdrop-filter: blur(8px); font-size: 10px; }
.shelf-fab { position: absolute; right: 11px; bottom: 11px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,253,249,.91); color: #322923; box-shadow: 0 6px 17px rgba(0,0,0,.18); font-size: 18px; }
.book-card-body { padding: 14px 3px 0; }
.book-card-body h3 { margin: 0 0 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 18px/1.3 var(--serif); }
.book-card-body h3 a { text-decoration:none; }
.book-card-body p { margin: 0; color: var(--ink-soft); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.book-card-meta { margin-top: 10px; display: flex; justify-content: space-between; color: var(--ink-faint); font-size: 11px; }
.reading-progress { height: 4px; margin-top: 11px; overflow: hidden; border-radius: 99px; background: var(--surface-soft); }
.reading-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--red),var(--gold)); }

.continue-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.continue-card { display: grid; grid-template-columns: 78px 1fr auto; gap: 15px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.continue-card img,.continue-thumb { width: 78px; height: 98px; border-radius: 6px 10px 10px 6px; object-fit: cover; }
.continue-card h3 { margin: 0 0 6px; font: 700 16px var(--serif); }
.continue-card p { margin: 0; color: var(--ink-soft); font-size: 12px; }
.continue-card a { text-decoration: none; color: var(--red); font-size: 22px; padding: 12px; }

.book-detail { width: min(1180px,calc(100% - 40px)); margin: 44px auto 80px; }
.detail-hero { position: relative; overflow: hidden; min-height: 430px; display: grid; grid-template-columns: 250px 1fr; gap: 48px; align-items: center; padding: 54px; border-radius: 30px; color: #fff9ef; background: #2b2320; box-shadow: var(--shadow-lg); }
.detail-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg,rgba(23,20,18,.97),rgba(63,39,32,.86)); }
.detail-blur { position: absolute; width: 65%; height: 180%; right: -5%; top: -40%; object-fit: cover; filter: blur(50px); opacity: .27; }
.detail-cover { position: relative; z-index: 1; aspect-ratio: 3/4.25; border-radius: 8px 18px 18px 8px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.4); }
.detail-cover img { width:100%;height:100%;object-fit:cover; }
.detail-copy { position: relative; z-index: 1; }
.detail-copy h1 { margin: 12px 0 9px; font: 700 clamp(34px,4vw,54px) var(--serif); }
.detail-author { color: #dbc6b6; }
.detail-description { max-width: 680px; margin: 24px 0; color: #cfc1b7; font: 15px/1.9 var(--serif); }
.detail-stats { display: flex; gap: 28px; margin: 24px 0; }
.detail-stats b { display: block; font: 700 21px var(--serif); color: #f5dfbe; }
.detail-stats small { color: #9f948c; }
.detail-actions { display:flex;gap:11px;flex-wrap:wrap; }
.detail-columns { display: grid; grid-template-columns: 1fr 340px; gap: 24px; margin-top: 28px; }
.content-panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: var(--surface); box-shadow: var(--shadow-sm); }
.panel-heading { display:flex;align-items:center;justify-content:space-between;margin-bottom:18px; }
.panel-heading h2,.panel-heading h3 { margin:0;font:700 22px var(--serif); }
.panel-heading span { color:var(--ink-faint);font-size:12px; }
.chapter-catalog { display:grid;grid-template-columns:repeat(2,1fr);gap:4px 18px;max-height:540px;overflow:auto;padding-right:4px; }
.chapter-link { display:flex;justify-content:space-between;gap:12px;padding:12px 10px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink-soft);font-size:13px; }
.chapter-link:hover { color:var(--red);background:color-mix(in srgb,var(--red) 5%,transparent); }
.chapter-link small { color:var(--ink-faint);white-space:nowrap; }
.comment-form textarea { width:100%;min-height:96px;resize:vertical;border:1px solid var(--line);border-radius:13px;background:var(--bg);color:var(--ink);padding:13px;outline:0; }
.comment-form .btn { margin-top:9px; }
.comment-list { display:flex;flex-direction:column;gap:14px;margin-top:20px; }
.comment { padding-top:14px;border-top:1px solid var(--line); }
.comment-head { display:flex;justify-content:space-between;color:var(--ink-faint);font-size:11px; }
.comment-head b { color:var(--ink);font-size:12px; }
.comment p { margin:8px 0 0;color:var(--ink-soft);line-height:1.7;font-size:13px; }

.reader-progress-line { position:fixed;top:76px;left:0;right:0;height:3px;z-index:45;background:transparent; }
.reader-progress-line i { display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold));transition:width .2s; }
.reader-shell { --reading-width:820px;width:min(1500px,calc(100% - 32px));margin:24px auto 90px;display:grid;grid-template-columns:248px minmax(0,var(--reading-width)) 190px;gap:22px;align-items:start;justify-content:center;transition:.25s; }
.reader-shell[data-width="narrow"] { --reading-width:680px; }
.reader-shell[data-width="wide"] { --reading-width:960px; }
.reader-catalog,.reader-toolbox { position:sticky;top:100px;max-height:calc(100vh - 120px);border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm); }
.reader-catalog { overflow:hidden; }
.reader-catalog-head { padding:19px;border-bottom:1px solid var(--line); }
.reader-catalog-head a { text-decoration:none;font:700 17px var(--serif); }
.reader-catalog-head small { display:block;margin-top:6px;color:var(--ink-faint); }
.reader-chapters { max-height:calc(100vh - 205px);overflow:auto;padding:8px; }
.reader-chapters button { width:100%;border:0;border-radius:9px;background:transparent;color:var(--ink-soft);padding:10px;text-align:left;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.reader-chapters button:hover,.reader-chapters button.active { color:var(--red);background:color-mix(in srgb,var(--red) 9%,transparent); }
.reading-paper { --reader-size:20px;--reader-line:1.9;min-height:86vh;padding:58px clamp(34px,7vw,78px);border-radius:21px;background:#f8f0dd;color:#29241e;box-shadow:var(--shadow-lg); }
.reading-paper[data-paper="white"] { background:#fff;color:#26231f; }
.reading-paper[data-paper="green"] { background:#dfe9d8;color:#243024; }
.reading-paper[data-paper="night"] { background:#1b1c1b;color:#d7d1c8; }
.reader-quickbar { display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-30px 0 38px;padding:11px 12px;border:1px solid rgba(95,75,55,.16);border-radius:13px;background:rgba(255,255,255,.28); }
.reading-paper[data-paper="night"] .reader-quickbar { border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.04); }
.reader-quick-copy { min-width:0;display:flex;align-items:center;gap:10px; }
.reader-quick-copy > span { width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:rgba(164,70,57,.11);color:#a7463c;font:700 14px var(--serif); }
.reader-quick-copy b { display:block;font-size:11px; }
.reader-quick-copy small { display:block;max-width:360px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.58;font-size:9px; }
.reader-quick-actions { display:flex;align-items:center;gap:5px;flex:0 0 auto; }
.reader-quick-actions button { min-width:35px;height:34px;border:1px solid rgba(95,75,55,.18);border-radius:9px;background:rgba(255,255,255,.4);color:inherit;padding:0 9px;font-size:11px; }
.reading-paper[data-paper="night"] .reader-quick-actions button { border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05); }
.reader-quick-actions button.all { min-width:122px;color:#a7463c;font-weight:700; }
.reader-settings-fab { display:none; }
.chapter-mark { display:flex;justify-content:center;gap:18px;flex-wrap:wrap;text-align:center;color:#a7463c;font-size:10px;letter-spacing:.12em; }
.reading-paper h1 { margin:18px 0 50px;text-align:center;font:700 clamp(25px,4vw,32px) var(--serif);letter-spacing:.04em; }
.chapter-content { font:400 var(--reader-size)/var(--reader-line) var(--serif);letter-spacing:.05em; }
.reading-paper[data-font="sans"] .chapter-content { font-family:var(--sans);letter-spacing:.025em;font-weight:400; }
.chapter-content p { margin:0 0 1.25em;text-indent:2em; }
.reading-paper[data-indent="off"] .chapter-content p { text-indent:0; }
.chapter-content p.speaking { margin-left:-12px;margin-right:-12px;padding:5px 12px;border-radius:8px;background:rgba(173,111,53,.11);box-shadow:inset 3px 0 #b4663f; }
.reader-pagination { display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin-top:58px;padding-top:24px;border-top:1px solid rgba(99,80,60,.2); }
.reader-pagination button { border:0;background:transparent;color:#a13c34;padding:10px;font-weight:700; }
.reader-pagination button:last-child { text-align:right; }
.reader-pagination button:disabled { opacity:.25;cursor:not-allowed; }
.reader-toolbox { padding:10px;display:flex;flex-direction:column;gap:6px; }
.reader-toolbox button { min-height:43px;border:0;border-radius:11px;background:transparent;color:var(--ink-soft);text-align:left;padding:0 12px; }
.reader-toolbox button:hover { background:var(--surface-soft);color:var(--ink); }
.reader-toolbox small { padding:12px;color:var(--ink-faint);line-height:1.65;font-size:10px; }
.focus-exit { display:none;position:fixed;z-index:70;right:18px;top:15px;border:1px solid rgba(255,255,255,.16);border-radius:99px;background:rgba(25,23,21,.78);color:#fff;padding:9px 13px;font-size:11px;backdrop-filter:blur(12px); }
body.reading-focus .topbar,body.reading-focus .mobile-nav,body.reading-focus .reader-catalog,body.reading-focus .reader-toolbox { display:none!important; }
body.reading-focus .focus-exit { display:block; }
body.reading-focus .reader-progress-line { top:0; }
body.reading-focus .reader-shell { display:block;width:min(var(--reading-width),calc(100% - 22px));margin:16px auto 60px; }
body.reading-focus .reading-paper { min-height:calc(100vh - 32px); }
body.reading-focus .reader-settings-fab { bottom:18px; }

.admin-shell { width:min(1380px,calc(100% - 32px));margin:30px auto 80px;display:grid;grid-template-columns:225px minmax(0,1fr);gap:22px; }
.admin-sidebar { position:sticky;top:98px;height:fit-content;padding:19px 12px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm); }
.admin-sidebar-head { padding:6px 10px 18px;border-bottom:1px solid var(--line); }
.admin-sidebar-head b { display:block;font:700 18px var(--serif); }
.admin-sidebar-head small { display:block;margin-top:5px;color:var(--ink-faint);font-size:10px;letter-spacing:.12em; }
.admin-menu { display:flex;flex-direction:column;gap:4px;margin-top:12px; }
.admin-menu a { display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;text-decoration:none;color:var(--ink-soft);font-size:13px; }
.admin-menu a i { width:22px;font-style:normal;text-align:center; }
.admin-menu a:hover,.admin-menu a.active { color:var(--ink);background:var(--surface-soft); }
.admin-main { min-width:0; }
.admin-page-head { display:flex;align-items:end;justify-content:space-between;margin:3px 2px 22px; }
.admin-page-head h1 { margin:5px 0 0;font:700 31px var(--serif); }
.admin-page-head p { margin:7px 0 0;color:var(--ink-soft);font-size:13px; }
.stats-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px; }
.stat-card { position:relative;overflow:hidden;min-height:130px;padding:21px;border:1px solid var(--line);border-radius:19px;background:var(--surface);box-shadow:var(--shadow-sm); }
.stat-card::after { content:"";position:absolute;width:90px;height:90px;right:-35px;bottom:-40px;border-radius:50%;background:color-mix(in srgb,var(--red) 8%,transparent); }
.stat-card span { color:var(--ink-soft);font-size:12px; }
.stat-card b { display:block;margin-top:12px;font:700 34px var(--serif); }
.admin-panel { margin-top:16px;padding:23px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm); }
.admin-panel:first-child { margin-top:0; }
.admin-panel-head { display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px; }
.admin-panel-head h2,.admin-panel-head h3 { margin:0;font:700 20px var(--serif); }
.admin-panel-head p { margin:5px 0 0;color:var(--ink-soft);font-size:12px; }
.table-wrap { overflow:auto; }
.data-table { width:100%;min-width:730px;border-collapse:collapse; }
.data-table th,.data-table td { padding:13px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:12px;vertical-align:middle; }
.data-table th { color:var(--ink-faint);font-weight:600;letter-spacing:.04em; }
.data-table td strong { font-family:var(--serif);font-size:14px; }
.table-book { display:flex;align-items:center;gap:11px; }
.table-cover { width:38px;height:51px;object-fit:cover;border-radius:4px 7px 7px 4px;background:var(--surface-soft); }
.table-cover.cover-fallback { font-size:15px; }
.tag { display:inline-block;padding:4px 8px;border-radius:99px;background:var(--surface-soft);color:var(--ink-soft);font-size:10px; }
.tag.live { color:var(--green);background:color-mix(in srgb,var(--green) 11%,transparent); }
.action-row { display:flex;gap:6px;flex-wrap:wrap; }
.mini-button { border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink-soft);padding:7px 9px;font-size:11px; }
.mini-button:hover { color:var(--ink);background:var(--surface-soft); }
.mini-button.danger { color:#c64f47; }

.import-layout { display:grid;grid-template-columns:310px 1fr;gap:22px; }
.import-steps { display:flex;align-items:center;justify-content:center;gap:10px;margin:-2px 0 25px;padding-bottom:20px;border-bottom:1px solid var(--line); }
.import-steps span { display:flex;align-items:center;gap:8px;color:var(--ink-faint);font-size:11px;font-weight:650;white-space:nowrap; }
.import-steps span i { width:25px;height:25px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-style:normal; }
.import-steps span.active { color:var(--red); }
.import-steps span.active i { border-color:var(--red);background:var(--red);color:#fff; }
.import-steps > b { width:46px;height:1px;background:var(--line); }
.cover-uploader,.file-drop { position:relative;border:1.5px dashed var(--line);border-radius:18px;background:var(--bg-elevated);overflow:hidden;transition:.2s; }
.cover-uploader { aspect-ratio:3/4.15; }
.cover-uploader input,.file-drop input { position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2; }
.cover-preview { width:100%;height:100%;object-fit:cover; }
.upload-placeholder { height:100%;display:grid;place-content:center;justify-items:center;padding:25px;text-align:center;color:var(--ink-soft); }
.upload-placeholder b { margin-top:13px;color:var(--ink); }
.upload-placeholder small { margin-top:7px;line-height:1.6;color:var(--ink-faint); }
.upload-icon { width:55px;height:55px;display:grid;place-items:center;border-radius:18px;background:var(--surface-soft);font-size:23px; }
.file-drop { min-height:120px;margin-top:4px; }
.file-drop.prominent { margin-bottom:14px;border-color:color-mix(in srgb,var(--red) 45%,var(--line)); }
.file-drop.dragging,.cover-uploader:hover,.file-drop:hover { border-color:var(--red);background:color-mix(in srgb,var(--red) 4%,var(--bg-elevated)); }
.file-drop-content { min-height:120px;display:flex;align-items:center;gap:15px;padding:20px; }
.file-drop-content i { width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;border-radius:14px;background:var(--surface-soft);font-style:normal;font-size:21px; }
.file-drop-content b { display:block; }
.file-drop-content small { display:block;margin-top:6px;color:var(--ink-faint); }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.input-field { display:flex;flex-direction:column;gap:7px;margin-bottom:14px; }
.input-field > span { color:var(--ink-soft);font-size:12px;font-weight:600; }
.input-field input,.input-field textarea,.input-field select { width:100%;border:1px solid var(--line);border-radius:12px;outline:0;background:var(--bg-elevated);color:var(--ink);padding:12px 13px;transition:.2s; }
.input-field textarea { min-height:110px;resize:vertical;line-height:1.6; }
.input-field input:focus,.input-field textarea:focus,.input-field select:focus { border-color:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 10%,transparent); }
.check-line { display:flex;align-items:center;gap:9px;margin:8px 0 20px;color:var(--ink-soft);font-size:12px; }
.upload-progress { height:6px;margin-top:15px;overflow:hidden;border-radius:99px;background:var(--surface-soft); }
.upload-progress i { display:block;height:100%;width:35%;border-radius:inherit;background:linear-gradient(90deg,var(--red),var(--gold));animation:uploading 1.2s ease-in-out infinite alternate; }
.upload-progress.determinate i { animation:none;transform:none;transition:width .18s; }
.field-tip { margin:9px 0 0;text-align:center;color:var(--ink-faint);font-size:10px; }
.analysis-loading { margin:12px 0 17px;padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:var(--bg-elevated); }
.analysis-loading > div:first-child { display:flex;justify-content:space-between;gap:12px;color:var(--ink-soft);font-size:11px; }
.analysis-loading .upload-progress { margin-top:9px; }
.analysis-card { margin:0 0 18px;padding:17px;border:1px solid color-mix(in srgb,var(--green) 35%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--green) 5%,var(--surface)); }
.analysis-head { display:flex;align-items:start;justify-content:space-between;gap:14px; }
.analysis-head h3 { margin:6px 0 0;max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 15px var(--serif); }
.analysis-head button { border:0;background:transparent;color:var(--red);font-size:11px; }
.analysis-ok { color:var(--green);font-size:11px;font-weight:750; }
.analysis-autofill { margin-top:12px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--green) 8%,var(--surface));color:var(--ink-soft);font-size:11px;line-height:1.6; }
.analysis-autofill b { color:var(--ink); }
.analysis-metrics { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:15px; }
.analysis-metrics span { padding:10px;border-radius:11px;background:var(--surface); }
.analysis-metrics b { display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.analysis-metrics small { display:block;margin-top:4px;color:var(--ink-faint);font-size:9px; }
.analysis-warning { margin-top:12px;padding:10px 12px;border-radius:10px;color:#a05e21;background:rgba(203,137,56,.12);font-size:11px;line-height:1.6; }
.chapter-preview { margin-top:12px;border-top:1px solid var(--line);padding-top:11px; }
.chapter-preview summary { cursor:pointer;color:var(--ink-soft);font-size:11px; }
.chapter-preview > div { max-height:260px;overflow:auto;margin-top:10px; }
.chapter-preview article { display:grid;grid-template-columns:28px 1fr auto;gap:9px;align-items:start;padding:9px 4px;border-bottom:1px solid var(--line); }
.chapter-preview article > b { color:var(--red);font-size:11px; }
.chapter-preview article strong { display:block;font:700 12px var(--serif); }
.chapter-preview article small { display:block;margin-top:4px;color:var(--ink-faint);font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:440px; }
.chapter-preview article em { color:var(--ink-faint);font-size:9px;font-style:normal;white-space:nowrap; }
@keyframes uploading { from{transform:translateX(-100%)}to{transform:translateX(285%)} }

.modal { position:relative;width:min(460px,calc(100vw - 28px));max-height:calc(100vh - 30px);overflow:auto;border:1px solid var(--line);border-radius:25px;background:var(--surface);color:var(--ink);padding:34px;box-shadow:var(--shadow-lg); }
.modal::backdrop { background:rgba(14,13,12,.68);backdrop-filter:blur(6px); }
.modal-x { position:absolute;right:15px;top:12px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--ink-faint);font-size:25px; }
.modal-x:hover { background:var(--surface-soft);color:var(--ink); }
.modal h2 { margin:8px 0 11px;font:700 29px var(--serif); }
.modal > p { color:var(--ink-soft);font-size:13px;line-height:1.7;margin:0 0 24px; }
.modal-brand { margin-bottom:21px; }
.link-btn { display:block;width:100%;margin-top:9px;border:0;background:transparent;color:var(--red);padding:11px; }
.setting-modal { width:min(500px,calc(100vw - 28px)); }
.setting-item { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--line); }
.setting-item b { display:block;font-size:13px; }
.setting-item small { display:block;margin-top:5px;color:var(--ink-faint);font-size:10px; }
.setting-item.vertical { align-items:flex-start;flex-direction:column; }
.stepper { display:flex;align-items:center;gap:8px; }
.stepper button { width:38px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--bg-elevated);color:var(--ink); }
.stepper output { min-width:34px;text-align:center;font-weight:700; }
.paper-options { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%; }
.paper-options button { border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink-soft);padding:9px 5px;font-size:10px; }
.paper-options button.active,.choice-options button.active,.toggle-button.active { border-color:var(--red);color:var(--red);box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 8%,transparent); }
.paper-options i { width:24px;height:24px;display:block;margin:0 auto 6px;border-radius:50%;border:1px solid var(--line); }
.paper-options button:nth-child(1) i{background:#f8f0dd}.paper-options button:nth-child(2) i{background:#fff}.paper-options button:nth-child(3) i{background:#dfe9d8}.paper-options button:nth-child(4) i{background:#1b1c1b}
.choice-options { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%; }
.choice-options.two { grid-template-columns:repeat(2,1fr); }
.choice-options button,.toggle-button { min-height:38px;border:1px solid var(--line);border-radius:10px;background:var(--bg-elevated);color:var(--ink-soft);padding:7px 10px;font-size:11px; }
.bookmark-list { display:flex;flex-direction:column;gap:8px; }
.bookmark-list article { display:grid;grid-template-columns:1fr 38px;align-items:stretch;border:1px solid var(--line);border-radius:12px;background:var(--bg-elevated);overflow:hidden; }
.bookmark-list article > button:first-child { display:grid;grid-template-columns:84px 1fr auto;gap:10px;align-items:center;border:0;background:transparent;color:var(--ink);padding:12px;text-align:left; }
.bookmark-list article > button:first-child:hover { background:var(--surface-soft); }
.bookmark-list article b { color:var(--red);font-size:11px; }
.bookmark-list article span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px; }
.bookmark-list article small { color:var(--ink-faint);font-size:9px; }
.bookmark-delete { border:0;border-left:1px solid var(--line);background:transparent;color:var(--ink-faint);font-size:18px; }
.bookmark-delete:hover { color:#c64f47;background:rgba(198,79,71,.07); }
.work-modal { width:min(760px,calc(100vw - 28px)); }
.work-modal.wide { width:min(1050px,calc(100vw - 28px)); }
.dialog-actions { display:flex;justify-content:flex-end;gap:9px;margin-top:20px; }
.chapter-manage-list { max-height:450px;overflow:auto;border:1px solid var(--line);border-radius:14px; }
.chapter-manage-row { display:grid;grid-template-columns:55px 1fr 80px auto;gap:10px;align-items:center;padding:11px 13px;border-bottom:1px solid var(--line);font-size:12px; }
.chapter-manage-row:last-child { border-bottom:0; }
.chapter-manage-row span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

.empty-state { grid-column:1/-1;min-height:280px;display:grid;place-content:center;justify-items:center;text-align:center;color:var(--ink-soft);padding:35px; }
.empty-state i { width:68px;height:68px;display:grid;place-items:center;border-radius:22px;background:var(--surface-soft);font-style:normal;font-size:27px; }
.empty-state h3 { margin:17px 0 7px;font:700 21px var(--serif);color:var(--ink); }
.empty-state p { margin:0 0 17px; }
.toast { position:fixed;z-index:150;left:50%;bottom:27px;max-width:calc(100vw - 28px);transform:translate(-50%,20px);opacity:0;pointer-events:none;border:1px solid rgba(255,255,255,.12);border-radius:99px;background:#25221f;color:#fff8ef;padding:12px 19px;box-shadow:0 15px 35px rgba(0,0,0,.26);transition:.25s;font-size:13px; }
.toast.show { opacity:1;transform:translate(-50%,0); }
.toast.error { background:#8b302b; }
.mobile-nav { display:none; }

@media (max-width:1100px) {
  .book-grid { grid-template-columns:repeat(4,1fr); }
  .reader-shell { grid-template-columns:minmax(0,800px) 170px; }
  .reader-catalog { display:none; }
  .detail-columns { grid-template-columns:1fr 310px; }
  .continue-strip { grid-template-columns:1fr 1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:820px) {
  body { padding-bottom:68px; }
  .topbar { height:66px;padding:0 15px;gap:8px; }
  .brand { min-width:0;flex:1; }
  .brand-copy small,.main-nav { display:none; }
  .profile-name { display:none; }
  .profile-btn { padding-right:5px; }
  .mobile-nav { position:fixed;z-index:48;left:12px;right:12px;bottom:10px;height:57px;display:flex;align-items:center;justify-content:space-around;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface) 91%,transparent);backdrop-filter:blur(18px);box-shadow:var(--shadow-lg); }
  .mobile-nav a { min-width:66px;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--ink-soft);font-size:18px; }
  .mobile-nav span { font-size:9px; }
  .home-hero { width:calc(100% - 24px);margin:14px auto 45px;min-height:570px;grid-template-columns:1fr;border-radius:24px; }
  .hero-copy { padding:38px 25px 25px;align-self:start; }
  .hero-copy h1 { font-size:42px; }
  .hero-visual { padding:0 0 35px; }
  .hero-book { width:180px; }
  .container { width:calc(100% - 28px); }
  .announcement { margin-top:-24px; }
  .book-grid { grid-template-columns:repeat(3,1fr);gap:20px 12px; }
  .continue-strip { grid-template-columns:1fr; }
  .section-heading { align-items:flex-start;flex-direction:column; }
  .search-panel { width:100%; }
  .detail-hero { grid-template-columns:150px 1fr;gap:25px;padding:30px; }
  .detail-copy h1 { font-size:34px; }
  .detail-columns { grid-template-columns:1fr; }
  .reader-shell { display:block;width:calc(100% - 16px);margin:8px auto 80px; }
  .reader-toolbox { position:static;max-height:none;margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr); }
  .reader-toolbox button { text-align:center;padding:0 5px;font-size:11px; }
  .reader-toolbox small { display:none; }
  .reader-settings-fab { position:fixed;z-index:49;right:18px;bottom:82px;display:flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.18);border-radius:99px;background:#9e4037;color:#fff;padding:10px 15px;box-shadow:0 12px 30px rgba(74,29,25,.3); }
  .reader-settings-fab b { font:700 14px var(--serif); }
  .reader-settings-fab span { font-size:11px;font-weight:700; }
  .reader-progress-line { top:66px; }
  .admin-shell { display:block;width:calc(100% - 24px);margin:18px auto 80px; }
  .admin-sidebar { position:static;overflow:auto;padding:8px;margin-bottom:18px; }
  .admin-sidebar-head { display:none; }
  .admin-menu { flex-direction:row;margin:0; }
  .admin-menu a { flex:0 0 auto; }
  .import-layout { grid-template-columns:230px 1fr; }
}
@media (max-width:580px) {
  .brand-seal { width:37px;height:37px; }
  .header-actions { gap:6px; }
  .quiet-btn { padding:0 13px; }
  .home-hero { min-height:600px; }
  .hero-copy h1 { font-size:37px; }
  .hero-meta { gap:12px;flex-wrap:wrap; }
  .book-grid { grid-template-columns:repeat(2,1fr); }
  .book-card-body h3 { font-size:16px; }
  .detail-hero { grid-template-columns:1fr;text-align:center;padding:30px 24px; }
  .detail-cover { width:160px;margin:auto; }
  .detail-description { font-size:14px; }
  .detail-stats,.detail-actions { justify-content:center; }
  .chapter-catalog { grid-template-columns:1fr; }
  .content-panel { padding:20px 17px; }
  .reading-paper { padding:42px 22px;border-radius:14px; }
  .reader-quickbar { margin:-20px 0 32px;padding:9px; }
  .reader-quick-copy small { max-width:130px; }
  .reader-quick-actions button.all { min-width:70px;font-size:0; }
  .reader-quick-actions button.all::after { content:"全部设置";font-size:10px; }
  .reading-paper h1 { margin-bottom:40px; }
  .reader-toolbox { grid-template-columns:repeat(3,1fr); }
  .bookmark-list article > button:first-child { grid-template-columns:68px 1fr; }
  .bookmark-list article small { display:none; }
  .stats-grid { grid-template-columns:1fr 1fr;gap:9px; }
  .stat-card { min-height:110px;padding:16px; }
  .stat-card b { font-size:29px; }
  .admin-panel { padding:18px 14px; }
  .admin-page-head { align-items:flex-start;flex-direction:column;gap:12px; }
  .import-layout { grid-template-columns:1fr; }
  .import-steps { gap:5px; }
  .import-steps > b { width:18px; }
  .import-steps span { font-size:9px; }
  .analysis-metrics { grid-template-columns:1fr 1fr; }
  .cover-uploader { width:180px;margin:auto; }
  .form-grid { grid-template-columns:1fr;gap:0; }
  .modal { padding:28px 20px; }
  .chapter-manage-row { grid-template-columns:42px 1fr auto; }
  .chapter-manage-row > small { display:none; }
}