:root {
  color-scheme: light;
  --ink:#24211d; --muted:#6d6860; --paper:#f5f1e8; --paper-deep:#e8e0d2;
  --accent:#9a5b3d; --accent-dark:#6e3b27; --reader-bg:#11100e;
  --chrome-bg:rgba(18,17,15,.82); --line:rgba(255,255,255,.14);
  font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; font-synthesis:none;
}

* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { background:var(--paper); color:var(--ink); }
button,input { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }

/* 书架 */
.library-shell { width:min(1240px,calc(100% - 40px)); margin:0 auto; padding:76px 0 80px; }
.library-header { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; padding-bottom:35px; border-bottom:1px solid rgba(66,55,43,.16); }
.eyebrow { margin:0 0 10px; color:var(--accent); font:700 11px/1.2 ui-monospace,monospace; letter-spacing:.22em; }
h1 { margin:0; font-family:"Songti SC",STSong,Georgia,serif; font-size:clamp(42px,6vw,72px); font-weight:600; letter-spacing:-.05em; }
.subtitle { margin:13px 0 0; color:var(--muted); font-size:15px; }

.library-actions { display:flex; align-items:center; gap:18px; }
.library-count { display:grid; justify-items:end; padding-bottom:4px; color:var(--muted); }
.library-count strong { color:var(--ink); font:500 clamp(36px,4vw,55px)/1 Georgia,serif; }
.library-count span { margin-top:6px; font-size:12px; letter-spacing:.15em; }
.install-button { border:1px solid rgba(65,51,38,.18); border-radius:999px; padding:10px 16px; color:#fff; background:var(--ink); box-shadow:0 8px 22px rgba(62,47,35,.14); cursor:pointer; white-space:nowrap; }
.install-button:hover { background:var(--accent-dark); }

.category-nav { display:flex; gap:10px; overflow-x:auto; padding:28px 0 30px; scrollbar-width:none; }
.category-nav::-webkit-scrollbar { display:none; }
.category-chip { border:1px solid rgba(65,51,38,.16); border-radius:999px; padding:9px 17px; color:var(--muted); background:rgba(255,255,255,.36); cursor:pointer; white-space:nowrap; transition:.18s ease; }
.category-chip:hover { color:var(--ink); border-color:rgba(65,51,38,.35); }
.category-chip.active { color:#fff; background:var(--ink); border-color:var(--ink); }

.book-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:38px 25px; }
.book-card { display:grid; gap:14px; border:0; padding:0; text-align:left; color:inherit; background:transparent; cursor:pointer; }
.book-card.opening { cursor:progress; }
.book-card.locked .cover-wrap img { filter:saturate(.55) brightness(.82); }

.cover-wrap { position:relative; overflow:hidden; aspect-ratio:9/16; border-radius:3px; background:#d9d0c1; box-shadow:0 15px 36px rgba(62,47,35,.16),0 2px 5px rgba(62,47,35,.09); transition:transform .28s ease,box-shadow .28s ease; }
.book-card:hover .cover-wrap { transform:translateY(-5px); box-shadow:0 23px 42px rgba(62,47,35,.22),0 3px 7px rgba(62,47,35,.11); }
.book-card.opening .cover-wrap { transform:translateY(-2px); }
.book-card.opening .cover-wrap::before { content:""; position:absolute; z-index:2; left:50%; top:50%; width:32px; height:32px; margin:-19px 0 0 -19px; border:3px solid rgba(255,255,255,.34); border-top-color:#fff; border-radius:50%; box-shadow:0 2px 14px rgba(0,0,0,.28); animation:cover-loading-spin .72s linear infinite; pointer-events:none; }
.cover-wrap::after { content:""; position:absolute; inset:0; box-shadow:inset 1px 0 rgba(255,255,255,.28),inset -1px 0 rgba(0,0,0,.1); pointer-events:none; }
.book-cover-placeholder { position:absolute; inset:0; display:grid; place-items:center; color:rgba(76,63,51,.52); background:linear-gradient(145deg,#e3dacd,#c7baa8); font-size:12px; letter-spacing:.12em; }
.cover-wrap img { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; opacity:0; background:linear-gradient(145deg,#e3dacd,#c7baa8); transition:opacity .18s ease,filter .18s ease; }
.cover-wrap img.loaded { opacity:1; }
.book-card.opening .cover-wrap img { filter:brightness(.58); }

@keyframes cover-loading-spin { to { transform:rotate(360deg); } }

.resume-badge { position:absolute; z-index:3; right:10px; bottom:10px; padding:6px 9px; border-radius:99px; color:#fff; background:rgba(23,20,17,.78); backdrop-filter:blur(8px); font-size:11px; }
.access-badge { position:absolute; z-index:3; right:10px; top:10px; padding:6px 9px; border-radius:99px; color:#fff; background:rgba(23,20,17,.78); backdrop-filter:blur(8px); font-size:11px; }
.access-badge.preview { left:10px; right:auto; color:#fff; background:rgba(152,88,48,.9); }
.demo-notice { width:max-content; margin:12px 0 0; padding:6px 10px; border:1px solid rgba(152,88,48,.22); border-radius:99px; color:#805033; background:rgba(255,249,240,.72); font-size:12px; letter-spacing:.04em; }
.book-meta { display:grid; gap:6px; }
.book-meta strong { overflow:hidden; font-family:"Songti SC",STSong,Georgia,serif; font-size:17px; line-height:1.45; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.book-meta span { color:var(--muted); font-size:12px; }

.empty-state { max-width:420px; margin:90px auto; text-align:center; color:var(--muted); }
.empty-state h2 { margin:17px 0 8px; color:var(--ink); font:600 23px/1.3 "Songti SC",STSong,serif; }
.empty-state p { margin:0 0 22px; line-height:1.7; }
.empty-mark { width:66px; height:66px; margin:0 auto; display:grid; place-items:center; border:1px solid rgba(65,51,38,.15); border-radius:50%; color:var(--accent); font:500 25px/1 serif; }
.primary-button { border:0; border-radius:99px; padding:11px 22px; color:#fff; background:var(--ink); cursor:pointer; }

/* 阅读器 */
.reader { position:fixed; inset:0; overflow:hidden; color:#f4f1ea; background:var(--reader-bg); isolation:isolate; }
.reader-backdrop { position:absolute; inset:0; z-index:-2; background:radial-gradient(circle at 50% 42%,#302c26 0,#151310 46%,#090807 100%); }
.reader.night .reader-backdrop { background:#050505; }
.reader.night .page-image { filter:sepia(.12) brightness(var(--page-brightness,1)); }

.reader-chrome { position:absolute; z-index:20; left:0; right:0; display:flex; align-items:center; color:#f4f1ea; background:linear-gradient(to bottom,rgba(8,8,7,.91),rgba(8,8,7,.67) 72%,transparent); transition:opacity .22s ease,transform .22s ease; }
.reader.controls-hidden .reader-topbar { opacity:0; transform:translateY(-100%); pointer-events:none; }
.reader.controls-hidden .reader-bottombar { opacity:0; transform:translateY(100%); pointer-events:none; }

.reader-topbar { top:0; min-height:72px; padding:max(11px,env(safe-area-inset-top)) max(15px,env(safe-area-inset-right)) 12px max(15px,env(safe-area-inset-left)); }
.reader-heading { min-width:0; flex:1; display:grid; justify-items:center; gap:3px; padding:0 12px; }
.reader-heading strong { max-width:min(66vw,640px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:"Songti SC",STSong,serif; font-size:15px; }
.reader-heading span { color:rgba(255,255,255,.54); font-size:10px; letter-spacing:.1em; }

.icon-button,.tool-button,.text-button,.page-number { border:0; color:inherit; background:transparent; cursor:pointer; }
.icon-button { min-width:42px; min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:50%; font-size:22px; }
.icon-button:hover,.tool-button:hover,.text-button:hover,.page-number:hover { background:rgba(255,255,255,.1); }
.icon-button.wide { width:auto; padding:0 12px; border-radius:99px; font-size:14px; }
.icon-button.wide span:first-child { font-size:21px; }
.cache-book-button { width:auto; padding:0 10px; border-radius:99px; gap:5px; font-size:17px; }
.cache-book-button small { min-width:32px; color:rgba(255,255,255,.72); font-size:10px; font-weight:500; white-space:nowrap; }
.cache-book-button.cache-active>span { animation:cache-pulse 1s ease-in-out infinite; }
.cache-book-button.cache-complete { color:#cce8c8; background:rgba(103,166,95,.15); }
.cache-book-button.cache-complete small { color:#cce8c8; }
.cache-book-button.cache-error { color:#ffd0ba; background:rgba(197,102,61,.16); }
.cache-book-button:disabled { opacity:.45; cursor:not-allowed; }

@keyframes cache-pulse { 50% { transform:translateY(3px); opacity:.55; } }

/* 图片阅读区 */
.page-viewport { position:absolute; inset:0; overflow:hidden; touch-action:none; overscroll-behavior:contain; user-select:none; }
.image-stage { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }

.page-image {
  position:absolute; display:block; width:auto; height:auto;
  max-width:calc(100vw - 24px); max-height:calc(100vh - 24px);
  object-fit:contain; user-select:none; pointer-events:none;
  -webkit-user-drag:none; -webkit-touch-callout:none;
  transform-origin:center center; filter:brightness(var(--page-brightness,1));
  box-shadow:0 5px 28px rgba(0,0,0,.3);
  backface-visibility:hidden; will-change:transform; contain:paint;
}

.page-image.loading { opacity:0; }
.page-image-next { visibility:hidden; opacity:0; pointer-events:none; }

.reader.zoomed .page-viewport { cursor:grab; }
.reader.zoomed .page-viewport.grabbing { cursor:grabbing; }
.reader.zoomed .turn-zone { opacity:0; pointer-events:none; }

/* 加载 */
.loading-indicator { position:absolute; z-index:5; inset:0; display:flex; align-items:center; justify-content:center; gap:7px; pointer-events:none; }
.loading-indicator[hidden] { display:none; }
.loading-indicator span { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.68); animation:pulse 1s ease-in-out infinite; }
.loading-indicator span:nth-child(2) { animation-delay:.14s; }
.loading-indicator span:nth-child(3) { animation-delay:.28s; }

@keyframes pulse {
  0%,70%,100% { transform:translateY(0); opacity:.35; }
  35% { transform:translateY(-5px); opacity:1; }
}

.image-error { position:absolute; z-index:6; left:50%; top:50%; transform:translate(-50%,-50%); padding:13px 19px; border-radius:99px; background:rgba(0,0,0,.72); cursor:pointer; }

/* 翻页 */
.turn-zone { position:absolute; z-index:9; top:17%; bottom:17%; width:32%; border:0; color:#fff; background:transparent; cursor:pointer; opacity:0; transition:opacity .18s ease; }
.turn-zone:hover { opacity:1; }
.turn-zone:disabled { display:none; }
.reader.turning .turn-zone { pointer-events:none; }

.turn-zone span { display:grid; place-items:center; width:44px; height:64px; border-radius:99px; background:rgba(0,0,0,.42); backdrop-filter:blur(8px); font:300 45px/1 Georgia,serif; }
.turn-zone-left { left:0; }
.turn-zone-right { right:0; }
.turn-zone-left span { margin-left:14px; }
.turn-zone-right span { margin-left:auto; margin-right:14px; }

/* 底部 */
.reader-bottombar { bottom:0; min-height:104px; flex-direction:column; justify-content:flex-end; gap:10px; padding:30px max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); background:linear-gradient(to top,rgba(8,8,7,.94),rgba(8,8,7,.7) 66%,transparent); }

.progress-line { width:min(860px,100%); display:flex; align-items:center; gap:13px; }
.progress-line input { min-width:60px; flex:1; accent-color:#d6aa7d; }

.text-button { padding:7px 10px; border-radius:7px; font-size:12px; }
.page-number { min-width:63px; padding:7px; border-radius:7px; color:rgba(255,255,255,.88); font:12px/1 ui-monospace,monospace; }
.page-number i { margin:0 4px; color:rgba(255,255,255,.36); font-style:normal; }

.reader-tools { display:flex; align-items:center; gap:5px; }
.tool-button { min-width:34px; height:32px; padding:0 8px; border-radius:7px; font-size:16px; }
.tool-label { min-width:72px; color:rgba(255,255,255,.72); font-size:11px; }
.tool-separator { width:1px; height:18px; margin:0 5px; background:var(--line); }

.brightness-control { display:flex; align-items:center; gap:8px; padding:0 7px; color:rgba(255,255,255,.7); font-size:14px; }
.brightness-control input { width:90px; accent-color:#d6aa7d; }

/* 目录 */
.toc-panel { position:absolute; z-index:40; left:0; top:0; bottom:0; width:min(390px,88vw); padding:max(25px,env(safe-area-inset-top)) 19px max(25px,env(safe-area-inset-bottom)); color:var(--ink); background:rgba(246,242,234,.97); box-shadow:14px 0 44px rgba(0,0,0,.28); backdrop-filter:blur(18px); overflow:auto; animation:slide-in .2s ease-out; }

@keyframes slide-in { from { transform:translateX(-100%); } }

.toc-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:21px; }
.toc-head>div { min-width:0; display:grid; gap:5px; }
.toc-head span { color:var(--accent); font-size:11px; letter-spacing:.1em; }
.toc-head strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 20px/1.35 "Songti SC",STSong,serif; }
.toc-head .icon-button { color:var(--ink); }

.toc-grid { display:grid; grid-template-columns:1fr; gap:8px; }
.toc-grid.toc-grid-pages { grid-template-columns:repeat(4,1fr); }
.toc-page { aspect-ratio:1; border:1px solid rgba(57,48,40,.11); border-radius:8px; color:var(--muted); background:rgba(255,255,255,.5); cursor:pointer; }
.toc-page:hover { color:var(--ink); border-color:rgba(57,48,40,.35); }
.toc-page.current { color:#fff; border-color:var(--accent); background:var(--accent); }

.toc-work { min-height:62px; display:grid; grid-template-columns:35px minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 12px; border:1px solid rgba(57,48,40,.11); border-radius:11px; color:var(--ink); text-align:left; background:rgba(255,255,255,.56); cursor:pointer; }
.toc-work>span { color:var(--accent); font:11px/1 ui-monospace,monospace; letter-spacing:.08em; }
.toc-work>strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 15px/1.35 "Songti SC",STSong,serif; }
.toc-work>small { color:var(--muted); font:11px/1.2 ui-monospace,monospace; white-space:nowrap; }
.toc-work:hover { border-color:rgba(57,48,40,.35); background:#fff; }
.toc-work.current { color:#fff; border-color:var(--accent); background:var(--accent); }
.toc-work.current>span,.toc-work.current>small { color:rgba(255,255,255,.76); }

.toc-scrim { position:absolute; z-index:39; inset:0; border:0; background:rgba(0,0,0,.48); }

html.reader-immersive,body.reader-immersive { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
.reader.pseudo-fullscreen { width:100vw; height:100vh; }
@supports (height:100dvh) { .reader.pseudo-fullscreen { height:100dvh; } }
.reader.pseudo-fullscreen.controls-hidden .reader-topbar { opacity:1; transform:none; pointer-events:none; background:transparent; }
.reader.pseudo-fullscreen.controls-hidden .reader-heading,
.reader.pseudo-fullscreen.controls-hidden #backButton { visibility:hidden; }
.reader.pseudo-fullscreen.controls-hidden #fullscreenButton { pointer-events:auto; margin-left:auto; color:rgba(255,255,255,.72); background:rgba(0,0,0,.28); }

/* Toast */
.toast { position:absolute; z-index:60; left:50%; top:17%; transform:translate(-50%,-8px); padding:9px 14px; border-radius:99px; background:rgba(0,0,0,.7); opacity:0; pointer-events:none; transition:.2s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }

[hidden] { display:none!important; }

/* 手机 */
@media (max-width:680px) {
  .library-shell { width:min(100% - 28px,560px); padding:42px 0 55px; }
  .library-header { align-items:flex-start; padding-bottom:25px; }
  .library-actions { flex-direction:column-reverse; align-items:flex-end; gap:10px; }
  .subtitle { font-size:13px; }
  .library-count { padding-top:5px; }
  .library-count strong { font-size:32px; }

  .book-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 14px; }
  .book-meta strong { font-size:15px; }

  .reader-topbar { min-height:58px; }
  .reader-heading strong { max-width:48vw; font-size:13px; }
  .icon-button.wide span:last-child { display:none; }
  .cache-book-button { padding:0 7px; }
  .cache-book-button small { min-width:27px; font-size:9px; }

  .turn-zone { display:none; }

  .reader-bottombar { min-height:92px; gap:7px; padding-top:24px; }
  .reader-tools { width:100%; justify-content:center; }
  .brightness-control input { width:58px; }

  .page-image { max-width:100vw; max-height:100vh; }
}

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

/* 内容类型切换：图书阅读器保持原结构，音频作为独立模块外挂 */
.content-nav { display:flex; gap:26px; padding:26px 0 2px; border-bottom:1px solid rgba(66,55,43,.12); }
.content-tab { position:relative; border:0; padding:0 2px 14px; color:var(--muted); background:transparent; cursor:pointer; font-size:15px; font-weight:600; }
.content-tab::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent; }
.content-tab.active { color:var(--ink); }
.content-tab.active::after { background:var(--accent); }

.audio-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:38px 25px; }
.audio-card { display:grid; gap:14px; border:0; padding:0; text-align:left; color:inherit; background:transparent; cursor:pointer; }
.audio-cover-wrap { position:relative; overflow:hidden; aspect-ratio:1/1; border-radius:12px; background:linear-gradient(145deg,#e3dacd,#c7baa8); box-shadow:0 15px 36px rgba(62,47,35,.14),0 2px 5px rgba(62,47,35,.08); transition:transform .28s ease,box-shadow .28s ease; }
.audio-card:hover .audio-cover-wrap { transform:translateY(-5px); box-shadow:0 23px 42px rgba(62,47,35,.2),0 3px 7px rgba(62,47,35,.1); }
.audio-card.locked .audio-cover-wrap { filter:saturate(.45); opacity:.72; }
.audio-card.locked:hover .audio-cover-wrap { transform:none; box-shadow:0 15px 36px rgba(62,47,35,.14),0 2px 5px rgba(62,47,35,.08); }
.audio-cover-wrap img { display:block; width:100%; height:100%; object-fit:cover; }
.audio-cover-placeholder { width:100%; height:100%; display:grid; place-items:center; color:rgba(255,255,255,.9); background:linear-gradient(145deg,#8b6958,#493d35); font:500 42px/1 Georgia,serif; }
.audio-play-mark { position:absolute; right:12px; bottom:12px; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:#fff; background:rgba(25,22,19,.82); box-shadow:0 6px 18px rgba(0,0,0,.2); backdrop-filter:blur(8px); font-size:15px; padding-left:2px; }
.audio-meta { display:grid; gap:6px; }
.audio-meta strong { overflow:hidden; font-family:"Songti SC",STSong,Georgia,serif; font-size:17px; line-height:1.45; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.audio-meta span { color:var(--muted); font-size:12px; }

.audio-player-view { position:fixed; inset:0; z-index:80; overflow:auto; color:#f4f1ea; background:radial-gradient(circle at 50% 32%,#39322c 0,#171411 48%,#090807 100%); }
.audio-player-topbar { position:sticky; top:0; z-index:2; min-height:72px; display:flex; align-items:center; padding:max(11px,env(safe-area-inset-top)) max(15px,env(safe-area-inset-right)) 12px max(15px,env(safe-area-inset-left)); background:linear-gradient(to bottom,rgba(8,8,7,.92),rgba(8,8,7,.55),transparent); }
.audio-back-button { min-height:42px; display:inline-flex; align-items:center; gap:7px; border:0; border-radius:99px; padding:0 12px; color:inherit; background:transparent; cursor:pointer; }
.audio-back-button:hover { background:rgba(255,255,255,.1); }
.audio-back-button span:first-child { font-size:21px; }
.audio-player-main { width:min(520px,calc(100% - 36px)); min-height:calc(100dvh - 90px); margin:0 auto; padding:32px 0 max(42px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; }
.audio-player-cover-wrap { position:relative; width:min(76vw,360px); aspect-ratio:1/1; overflow:hidden; border-radius:22px; background:#2b2723; box-shadow:0 24px 65px rgba(0,0,0,.42); }
.audio-player-cover { display:block; width:100%; height:100%; object-fit:cover; }
.audio-cover-fallback { position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.85); background:linear-gradient(145deg,#7f6252,#302925); font:500 76px/1 Georgia,serif; }
.audio-player-copy { width:100%; text-align:center; }
.audio-player-eyebrow { margin:0 0 9px; color:#d7aa7c; font-size:11px; letter-spacing:.14em; }
.audio-player-copy h2 { margin:0; font:600 clamp(26px,6vw,38px)/1.3 "Songti SC",STSong,Georgia,serif; }
.audio-player-description { max-width:440px; margin:13px auto 0; color:rgba(255,255,255,.62); font-size:14px; line-height:1.75; }
.audio-native-player { width:100%; margin-top:4px; }

@media (max-width:680px) {
  .content-nav { padding-top:20px; gap:22px; }
  .audio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 14px; }
  .audio-meta strong { font-size:15px; }
  .audio-player-topbar { min-height:58px; }
  .audio-player-main { padding-top:18px; justify-content:flex-start; }
  .audio-player-cover-wrap { width:min(78vw,340px); margin-top:4vh; border-radius:18px; }
  .audio-back-button span:last-child { display:none; }
}

/* =========================================================
   知趣 · 2026 品牌视觉层
   仅覆盖书架 / 频道 / 音频视觉，不改变原图书阅读器结构与交互。
   ========================================================= */

:root {
  --paper:#f2eee5;
  --paper-deep:#e3dacb;
  --ink:#201d19;
  --muted:#756e65;
  --accent:#9b5d42;
  --accent-dark:#70402d;
  --soft-line:rgba(62,51,41,.12);
  --soft-line-strong:rgba(62,51,41,.2);
  --card-bg:rgba(255,255,255,.48);
  --card-shadow:0 22px 55px rgba(63,48,35,.09);
}

body {
  background:
    radial-gradient(circle at 8% 0%,rgba(183,145,105,.12),transparent 31rem),
    radial-gradient(circle at 94% 24%,rgba(117,87,65,.06),transparent 28rem),
    linear-gradient(180deg,#f7f4ed 0%,var(--paper) 34%,#f0ebe2 100%);
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.26;
  background-image:
    linear-gradient(rgba(58,47,38,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(58,47,38,.018) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 78%);
}

::selection { color:#fff; background:var(--accent); }

.library-shell {
  position:relative;
  width:min(1220px,calc(100% - 48px));
  padding:70px 0 96px;
}

.library-header {
  position:relative;
  align-items:flex-end;
  min-height:210px;
  gap:44px;
  padding:0 0 36px;
  border-bottom:1px solid var(--soft-line);
}

.library-header::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:84px;
  height:1px;
  background:var(--accent);
}

.brand-lockup { min-width:0; }

.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
  color:var(--accent);
  font:700 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.17em;
}

.eyebrow i {
  width:24px;
  height:1px;
  background:rgba(155,93,66,.45);
}

.brand-title {
  display:flex;
  align-items:center;
  gap:.16em;
  margin:0;
  color:var(--ink);
  font-family:"Songti SC",STSong,"Noto Serif CJK SC",Georgia,serif;
  font-size:clamp(62px,7.8vw,104px);
  font-weight:600;
  line-height:.9;
  letter-spacing:-.08em;
}

.brand-title span:last-child { letter-spacing:-.03em; }

.brand-title b {
  position:relative;
  top:-.05em;
  color:var(--accent);
  font:400 .34em/1 Georgia,serif;
  opacity:.78;
}

.subtitle {
  margin:24px 0 0;
  color:#5f5951;
  font-size:17px;
  line-height:1.6;
  letter-spacing:.08em;
}

.library-actions {
  align-items:flex-end;
  gap:22px;
  padding-bottom:1px;
}

.library-count {
  min-width:108px;
  display:grid;
  grid-template-columns:auto auto;
  grid-template-areas:"caption caption" "number unit";
  align-items:end;
  justify-content:end;
  gap:5px 8px;
  padding:0 0 2px 22px;
  border-left:1px solid var(--soft-line);
}

.library-count .count-caption {
  grid-area:caption;
  margin:0 0 4px;
  color:#988c80;
  font:700 9px/1 ui-monospace,monospace;
  letter-spacing:.18em;
}

.library-count strong {
  grid-area:number;
  color:var(--ink);
  font:500 clamp(38px,4vw,56px)/.88 Georgia,"Times New Roman",serif;
  letter-spacing:-.04em;
}

.library-count .count-unit {
  grid-area:unit;
  margin:0 0 3px;
  color:var(--muted);
  font-size:11px;
  letter-spacing:.08em;
  white-space:nowrap;
}

.install-button {
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid rgba(42,34,28,.12);
  padding:11px 16px;
  color:var(--ink);
  background:rgba(255,255,255,.5);
  box-shadow:none;
  backdrop-filter:blur(12px);
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}

.install-button:hover {
  color:#fff;
  border-color:var(--ink);
  background:var(--ink);
  box-shadow:0 10px 28px rgba(44,34,27,.14);
  transform:translateY(-1px);
}

/* 一级频道：显著高于二级分类，避免“两个小文字按钮”的工具感 */
.content-nav {
  width:min(650px,100%);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:28px 0 18px;
  border:0;
}

.content-tab {
  position:relative;
  min-height:108px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 34px;
  align-items:center;
  gap:12px;
  overflow:hidden;
  border:1px solid var(--soft-line);
  border-radius:16px;
  padding:18px 16px;
  color:var(--ink);
  text-align:left;
  background:rgba(255,255,255,.42);
  box-shadow:0 8px 30px rgba(61,48,37,.025);
  backdrop-filter:blur(12px);
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease,color .2s ease;
}

.content-tab::before {
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-54px;
  top:-64px;
  border-radius:50%;
  background:rgba(155,93,66,.055);
  transition:transform .28s ease,opacity .28s ease;
}

.content-tab::after { display:none; }

.content-tab:hover {
  transform:translateY(-2px);
  border-color:var(--soft-line-strong);
  box-shadow:var(--card-shadow);
}

.content-tab:hover::before { transform:scale(1.25); }

.content-tab-number {
  align-self:start;
  padding-top:3px;
  color:#a2978b;
  font:700 10px/1 ui-monospace,monospace;
  letter-spacing:.12em;
}

.content-tab-copy {
  display:grid;
  align-content:center;
  gap:8px;
}

.content-tab-copy strong {
  font-family:"Songti SC",STSong,Georgia,serif;
  font-size:24px;
  font-weight:600;
  line-height:1;
  letter-spacing:.04em;
}

.content-tab-copy small {
  color:var(--muted);
  font-size:11px;
  line-height:1;
  letter-spacing:.12em;
}

.content-tab-mark {
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  justify-self:end;
  border:1px solid var(--soft-line);
  border-radius:50%;
  color:#81786f;
  font-size:14px;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}

.content-tab.active {
  color:#f7f2e9;
  border-color:var(--ink);
  background:var(--ink);
  box-shadow:0 17px 38px rgba(37,30,24,.16);
}

.content-tab.active::before { background:rgba(193,137,101,.12); }
.content-tab.active .content-tab-number { color:#c99678; }
.content-tab.active .content-tab-copy small { color:rgba(255,255,255,.55); }
.content-tab.active .content-tab-mark {
  color:#fff;
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  transform:rotate(45deg);
}

/* 二级分类 */
.category-nav {
  gap:9px;
  padding:15px 0 34px;
}

.category-chip {
  min-height:38px;
  border:1px solid var(--soft-line);
  padding:9px 17px;
  color:#746d64;
  background:rgba(255,255,255,.32);
  font-size:13px;
  font-weight:500;
  letter-spacing:.02em;
  backdrop-filter:blur(8px);
}

.category-chip:hover {
  color:var(--ink);
  border-color:var(--soft-line-strong);
  background:rgba(255,255,255,.65);
}

.category-chip.active {
  color:#fff;
  border-color:var(--accent);
  background:var(--accent);
  box-shadow:0 7px 18px rgba(155,93,66,.16);
}

/* 图文卡片：保留原 9:16 书封结构，只提升出版物质感 */
.book-grid {
  grid-template-columns:repeat(auto-fill,minmax(205px,1fr));
  gap:44px 26px;
}

.book-card { gap:16px; }

.cover-wrap {
  border:1px solid rgba(62,49,39,.08);
  border-radius:9px;
  background:#d8cfc1;
  box-shadow:0 17px 39px rgba(61,46,34,.12),0 2px 6px rgba(61,46,34,.055);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease;
}

.book-card:hover .cover-wrap {
  transform:translateY(-7px);
  border-color:rgba(62,49,39,.14);
  box-shadow:0 27px 52px rgba(61,46,34,.17),0 4px 10px rgba(61,46,34,.07);
}

.cover-wrap::after {
  box-shadow:inset 1px 0 rgba(255,255,255,.3),inset -1px 0 rgba(0,0,0,.07),inset 0 0 0 1px rgba(255,255,255,.08);
}

.book-meta { gap:7px; padding:0 2px; }
.book-meta strong {
  font-size:18px;
  line-height:1.4;
  letter-spacing:.01em;
}
.book-meta span {
  color:#847c73;
  font-size:11px;
  letter-spacing:.045em;
}

.resume-badge,.access-badge {
  padding:6px 10px;
  background:rgba(29,25,21,.78);
  box-shadow:0 4px 16px rgba(0,0,0,.14);
}

/* 轻听卡片 */
.audio-grid {
  grid-template-columns:repeat(auto-fill,minmax(205px,1fr));
  gap:44px 26px;
}

.audio-card { gap:16px; }

.audio-cover-wrap {
  border:1px solid rgba(62,49,39,.08);
  border-radius:18px;
  background:linear-gradient(145deg,#ded2c1,#bba894);
  box-shadow:0 17px 39px rgba(61,46,34,.12),0 2px 6px rgba(61,46,34,.055);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease;
}

.audio-card:hover .audio-cover-wrap {
  transform:translateY(-7px);
  border-color:rgba(62,49,39,.14);
  box-shadow:0 27px 52px rgba(61,46,34,.17),0 4px 10px rgba(61,46,34,.07);
}

.audio-cover-wrap::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.11),transparent 36%,rgba(0,0,0,.045));
}

.audio-cover-placeholder {
  background:
    radial-gradient(circle at 28% 18%,rgba(255,255,255,.12),transparent 34%),
    linear-gradient(145deg,#946e59,#443831);
  font-size:48px;
}

.audio-play-mark {
  z-index:1;
  right:14px;
  bottom:14px;
  width:45px;
  height:45px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(27,23,20,.78);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}

.audio-meta { gap:7px; padding:0 2px; }
.audio-meta strong { font-size:18px; letter-spacing:.01em; }
.audio-meta span { color:#847c73; font-size:11px; letter-spacing:.045em; }

/* 空状态也沿用品牌语气 */
.empty-state { margin:86px auto; }
.empty-mark {
  border-color:var(--soft-line);
  color:var(--accent);
  background:rgba(255,255,255,.28);
  box-shadow:0 12px 32px rgba(61,48,37,.05);
}

/* 轻听播放器：独立于图书阅读器 */
.audio-player-view {
  background:
    radial-gradient(circle at 50% 18%,rgba(143,101,76,.3),transparent 34rem),
    radial-gradient(circle at 22% 82%,rgba(106,73,55,.13),transparent 28rem),
    #12100e;
}

.audio-player-topbar {
  background:linear-gradient(to bottom,rgba(10,9,8,.9),rgba(10,9,8,.48),transparent);
}

.audio-back-button {
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(12px);
}

.audio-player-main { gap:26px; }
.audio-player-cover-wrap {
  border:1px solid rgba(255,255,255,.08);
  border-radius:26px;
  box-shadow:0 30px 90px rgba(0,0,0,.5),0 2px 0 rgba(255,255,255,.06) inset;
}
.audio-player-eyebrow { color:#d5a181; font-weight:600; letter-spacing:.18em; }
.audio-player-copy h2 { font-size:clamp(28px,6vw,42px); letter-spacing:.02em; }
.audio-player-description { color:rgba(255,255,255,.56); }
.audio-native-player { border-radius:14px; opacity:.92; }

@media (max-width:680px) {
  .library-shell {
    width:min(100% - 30px,560px);
    padding:38px 0 62px;
  }

  .library-header {
    min-height:180px;
    align-items:flex-start;
    gap:20px;
    padding-bottom:28px;
  }

  .eyebrow { margin-bottom:15px; font-size:9px; gap:8px; }
  .eyebrow i { width:17px; }
  .brand-title { font-size:clamp(54px,17vw,76px); }
  .subtitle { margin-top:17px; font-size:15px; letter-spacing:.055em; }

  .library-actions {
    flex-direction:column-reverse;
    align-items:flex-end;
    gap:12px;
  }

  .library-count {
    min-width:74px;
    padding-left:13px;
    gap:4px 5px;
  }
  .library-count strong { font-size:35px; }
  .library-count .count-caption { font-size:7px; letter-spacing:.11em; }
  .library-count .count-unit { font-size:9px; }
  .install-button { padding:9px 12px; font-size:12px; }

  .content-nav {
    width:100%;
    gap:9px;
    padding:20px 0 10px;
  }

  .content-tab {
    min-height:88px;
    grid-template-columns:28px minmax(0,1fr);
    gap:8px;
    border-radius:14px;
    padding:14px 12px;
  }

  .content-tab-number { font-size:9px; }
  .content-tab-copy { gap:7px; }
  .content-tab-copy strong { font-size:21px; }
  .content-tab-copy small { font-size:9px; letter-spacing:.08em; }
  .content-tab-mark { display:none; }

  .category-nav { padding:13px 0 26px; }
  .category-chip { min-height:36px; padding:8px 15px; font-size:12px; }

  .book-grid,.audio-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:31px 14px;
  }

  .book-card,.audio-card { gap:12px; }
  .cover-wrap { border-radius:7px; }
  .audio-cover-wrap { border-radius:14px; }
  .book-meta strong,.audio-meta strong { font-size:15px; }
  .book-meta span,.audio-meta span { font-size:10px; }

  .audio-play-mark {
    right:10px;
    bottom:10px;
    width:38px;
    height:38px;
    font-size:13px;
  }

  .audio-player-cover-wrap { border-radius:21px; }
}

@media (max-width:390px) {
  .library-shell { width:calc(100% - 24px); }
  .library-header { gap:12px; }
  .brand-title { font-size:52px; }
  .library-count .count-caption { display:none; }
  .content-tab { min-height:82px; padding:12px 10px; }
  .content-tab-copy strong { font-size:19px; }
  .content-tab-copy small { font-size:8px; }
}

/* =========================================================
   知趣 · 轻听馆播放器 2026
   仅覆盖音频播放器，不改变图书阅读器与书架逻辑。
   ========================================================= */
.audio-player-view {
  --audio-progress:0%;
  --audio-buffered:0%;
  position:fixed;
  inset:0;
  z-index:80;
  overflow:auto;
  color:#f6f0e8;
  background:#100e0c;
  isolation:isolate;
  overscroll-behavior:contain;
}

.audio-player-ambient {
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 18%,rgba(157,106,77,.28),transparent 34rem),
    radial-gradient(circle at 18% 86%,rgba(113,77,57,.13),transparent 28rem),
    #100e0c;
}

.audio-player-ambient img {
  position:absolute;
  width:118%;
  height:118%;
  left:-9%;
  top:-9%;
  object-fit:cover;
  filter:blur(72px) saturate(.72) brightness(.42);
  opacity:.52;
  transform:scale(1.08);
}

.audio-player-ambient span {
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(9,8,7,.42),rgba(9,8,7,.72) 54%,rgba(9,8,7,.96)),
    radial-gradient(circle at 50% 32%,transparent 0 18rem,rgba(0,0,0,.18) 34rem,rgba(0,0,0,.48) 100%);
}

.audio-player-topbar {
  position:sticky;
  top:0;
  z-index:5;
  min-height:74px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:max(12px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left));
  background:linear-gradient(to bottom,rgba(10,9,8,.82),rgba(10,9,8,.25),transparent);
}

.audio-back-button {
  justify-self:start;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:0 13px;
  color:rgba(255,255,255,.84);
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(14px);
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}

.audio-back-button:hover {
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  transform:translateY(-1px);
}

.audio-back-button span:first-child { font-size:21px; }

.audio-player-brand {
  justify-self:center;
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(255,255,255,.55);
  white-space:nowrap;
}

.audio-player-brand strong {
  color:rgba(255,255,255,.88);
  font:600 15px/1 "Songti SC",STSong,Georgia,serif;
  letter-spacing:.12em;
}

.audio-player-brand i {
  width:1px;
  height:12px;
  background:rgba(255,255,255,.18);
}

.audio-player-brand span {
  font-size:9px;
  letter-spacing:.18em;
}

.audio-player-main {
  width:min(560px,calc(100% - 40px));
  min-height:calc(100dvh - 88px);
  margin:0 auto;
  padding:20px 0 max(48px,env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:25px;
}

.audio-player-cover-wrap {
  position:relative;
  width:min(72vw,365px);
  aspect-ratio:1;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:30px;
  background:linear-gradient(145deg,#3b302a,#1b1714);
  box-shadow:
    0 38px 105px rgba(0,0,0,.52),
    0 10px 28px rgba(0,0,0,.32),
    inset 0 1px rgba(255,255,255,.07);
  transform:translateZ(0);
}

.audio-player-cover-wrap::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(145deg,rgba(255,255,255,.08),transparent 32%,rgba(0,0,0,.08));
}

.audio-player-cover {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.audio-cover-fallback {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.82);
  background:
    radial-gradient(circle at 28% 18%,rgba(255,255,255,.12),transparent 34%),
    linear-gradient(145deg,#916a56,#322923);
  font:500 82px/1 Georgia,serif;
}

.audio-status {
  position:absolute;
  z-index:2;
  left:16px;
  bottom:16px;
  min-height:28px;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  padding:0 10px;
  color:rgba(255,255,255,.76);
  background:rgba(16,14,12,.58);
  box-shadow:0 6px 22px rgba(0,0,0,.18);
  backdrop-filter:blur(14px);
  font-size:10px;
  letter-spacing:.09em;
}

.audio-status[data-mode="playing"] {
  color:#f7dfce;
  border-color:rgba(219,164,128,.3);
  background:rgba(127,75,52,.45);
}

.audio-status[data-mode="buffering"] { animation:audio-status-pulse 1s ease-in-out infinite; }
.audio-status[data-mode="error"] { color:#ffd4c5; border-color:rgba(255,149,120,.28); background:rgba(114,43,26,.42); }

@keyframes audio-status-pulse { 50% { opacity:.52; } }

.audio-player-copy {
  width:100%;
  text-align:center;
}

.audio-player-eyebrow {
  margin:0 0 10px;
  color:#d7a17f;
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.2em;
}

.audio-player-copy h2 {
  max-width:520px;
  margin:0 auto;
  color:#fffaf4;
  font:600 clamp(29px,5.5vw,43px)/1.25 "Songti SC",STSong,Georgia,serif;
  letter-spacing:.018em;
  text-wrap:balance;
}

.audio-player-description {
  max-width:460px;
  margin:13px auto 0;
  color:rgba(255,255,255,.5);
  font-size:13px;
  line-height:1.75;
}

.audio-control-panel {
  width:100%;
  display:grid;
  gap:20px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:24px;
  padding:20px 20px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.027));
  box-shadow:0 18px 56px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(22px);
}

.audio-timeline { display:grid; gap:9px; }

.audio-seek {
  --audio-progress:0%;
  --audio-buffered:0%;
  width:100%;
  height:18px;
  margin:0;
  border:0;
  outline:0;
  background:transparent;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}

.audio-seek::-webkit-slider-runnable-track {
  height:4px;
  border-radius:999px;
  background:linear-gradient(
    to right,
    #d79d78 0 var(--audio-progress),
    rgba(255,255,255,.27) var(--audio-progress) var(--audio-buffered),
    rgba(255,255,255,.11) var(--audio-buffered) 100%
  );
}

.audio-seek::-moz-range-track {
  height:4px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.11);
}

.audio-seek::-moz-range-progress {
  height:4px;
  border-radius:999px;
  background:#d79d78;
}

.audio-seek::-webkit-slider-thumb {
  width:15px;
  height:15px;
  margin-top:-5.5px;
  border:2px solid #f8ede4;
  border-radius:50%;
  background:#b87959;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
  appearance:none;
  -webkit-appearance:none;
  transition:transform .15s ease;
}

.audio-seek::-moz-range-thumb {
  width:13px;
  height:13px;
  border:2px solid #f8ede4;
  border-radius:50%;
  background:#b87959;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}

.audio-seek:active::-webkit-slider-thumb { transform:scale(1.14); }

.audio-time-row {
  display:flex;
  justify-content:space-between;
  color:rgba(255,255,255,.43);
  font:10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.03em;
}

.audio-primary-controls {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  justify-items:center;
  gap:28px;
}

.audio-play-button,
.audio-skip-button,
.audio-rate-button {
  border:0;
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.audio-play-button {
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#211a16;
  background:linear-gradient(145deg,#f4e5d9,#d5a17f);
  box-shadow:0 14px 36px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.8);
  font:600 25px/1 system-ui,sans-serif;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}

.audio-play-button:hover {
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 18px 42px rgba(0,0,0,.33),inset 0 1px rgba(255,255,255,.8);
}

.audio-play-button:active { transform:scale(.96); }
.audio-play-button.playing { filter:saturate(.9); }
.audio-play-button.playing #audioPlayIcon { transform:translateX(0); letter-spacing:-.14em; }
#audioPlayIcon { transform:translateX(2px); }

.audio-skip-button {
  position:relative;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  color:rgba(255,255,255,.77);
  background:rgba(255,255,255,.035);
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}

.audio-skip-button:hover {
  border-color:rgba(255,255,255,.15);
  background:rgba(255,255,255,.075);
  transform:translateY(-1px);
}

.audio-skip-button > span { font-size:25px; line-height:1; }
.audio-skip-button > small {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-42%);
  color:rgba(255,255,255,.86);
  font:700 9px/1 ui-monospace,monospace;
}

.audio-episode-nav {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
}

.audio-episode-button {
  min-width:0;
  min-height:62px;
  display:grid;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:16px;
  padding:10px 12px;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.026);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .17s ease,border-color .17s ease,background .17s ease,opacity .17s ease;
}

.audio-episode-prev {
  grid-template-columns:34px minmax(0,1fr);
  text-align:left;
}

.audio-episode-next {
  grid-template-columns:minmax(0,1fr) 34px;
  text-align:right;
}

.audio-episode-button:not(:disabled):hover {
  transform:translateY(-1px);
  border-color:rgba(215,157,120,.22);
  background:rgba(215,157,120,.07);
}

.audio-episode-button:not(:disabled):active { transform:scale(.985); }

.audio-episode-button:disabled {
  opacity:.34;
  cursor:default;
}

.audio-episode-icon {
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  color:#e1b091;
  background:rgba(255,255,255,.025);
  font:300 26px/1 Georgia,serif;
}

.audio-episode-copy {
  min-width:0;
  display:grid;
  gap:5px;
}

.audio-episode-copy small {
  color:rgba(255,255,255,.34);
  font-size:8px;
  font-weight:600;
  line-height:1;
  letter-spacing:.16em;
}

.audio-episode-copy strong {
  min-width:0;
  overflow:hidden;
  color:rgba(255,255,255,.83);
  font:500 13px/1.3 "Songti SC",STSong,Georgia,serif;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.audio-episode-button:not(:disabled) .audio-episode-copy strong { color:#fff6ef; }

.audio-secondary-controls {
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:2px;
  border-top:1px solid rgba(255,255,255,.055);
}

.audio-control-caption {
  color:rgba(255,255,255,.31);
  font-size:9px;
  letter-spacing:.17em;
}

.audio-secondary-actions {
  display:flex;
  align-items:center;
  gap:8px;
}

.audio-sleep-control {
  position:relative;
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.075);
  border-radius:999px;
  padding:0 12px;
  color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.035);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}

.audio-sleep-control::before {
  content:"◷";
  margin-right:5px;
  color:#d8a482;
  font-size:13px;
}

.audio-sleep-control:hover,
.audio-sleep-control:focus-within {
  color:#fff;
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
}

.audio-sleep-control select {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}

.audio-rate-button {
  min-width:54px;
  min-height:32px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:999px;
  padding:0 11px;
  color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.035);
  font:600 11px/1 ui-monospace,monospace;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}

.audio-rate-button:hover {
  color:#fff;
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
}

.audio-engine { display:none; }

@media (max-width:680px) {
  .audio-player-topbar {
    min-height:60px;
    grid-template-columns:1fr auto 1fr;
    padding-left:max(13px,env(safe-area-inset-left));
    padding-right:max(13px,env(safe-area-inset-right));
  }

  .audio-back-button {
    min-height:38px;
    padding:0 10px;
  }

  .audio-back-button span:last-child { display:none; }
  .audio-player-brand strong { font-size:14px; }
  .audio-player-brand span { font-size:8px; }

  .audio-player-main {
    width:min(100% - 28px,520px);
    min-height:calc(100dvh - 70px);
    justify-content:flex-start;
    gap:20px;
    padding:12px 0 max(30px,env(safe-area-inset-bottom));
  }

  .audio-player-cover-wrap {
    width:min(70vw,310px);
    margin-top:1.5vh;
    border-radius:24px;
    box-shadow:0 28px 74px rgba(0,0,0,.48),0 8px 22px rgba(0,0,0,.28);
  }

  .audio-status { left:12px; bottom:12px; min-height:26px; font-size:9px; }

  .audio-player-eyebrow { margin-bottom:8px; font-size:9px; }
  .audio-player-copy h2 { font-size:clamp(27px,8.2vw,36px); }
  .audio-player-description { margin-top:10px; font-size:12px; line-height:1.65; }

  .audio-control-panel {
    gap:17px;
    border-radius:20px;
    padding:18px 16px 14px;
  }

  .audio-episode-nav { gap:8px; }
  .audio-episode-button { min-height:58px; padding:9px 10px; border-radius:14px; gap:8px; }
  .audio-episode-prev { grid-template-columns:30px minmax(0,1fr); }
  .audio-episode-next { grid-template-columns:minmax(0,1fr) 30px; }
  .audio-episode-icon { width:29px; height:29px; font-size:23px; }
  .audio-episode-copy { gap:4px; }
  .audio-episode-copy strong { font-size:12px; }

  .audio-primary-controls { gap:20px; }
  .audio-play-button { width:70px; height:70px; font-size:23px; }
  .audio-skip-button { width:50px; height:50px; }
}

@media (max-width:390px) {
  .audio-player-main { width:calc(100% - 22px); gap:17px; }
  .audio-player-cover-wrap { width:min(68vw,275px); border-radius:21px; }
  .audio-control-panel { padding:16px 14px 13px; }
  .audio-episode-button { min-height:54px; padding:8px 9px; }
  .audio-episode-copy strong { font-size:11px; }
  .audio-primary-controls { gap:15px; }
  .audio-play-button { width:66px; height:66px; }
  .audio-skip-button { width:47px; height:47px; }
}

@media (prefers-reduced-motion:reduce) {
  .audio-status[data-mode="buffering"] { animation:none; }
  .audio-play-button,.audio-skip-button { transition:none; }
}

/* 主页订阅与联系方式：独立浮层，不改变书架、阅读器和播放器布局。 */
.subscribe-button {
  color:#fff;
  border-color:var(--accent);
  background:var(--accent);
}

.subscribe-button:hover {
  color:#fff;
  border-color:var(--accent-dark);
  background:var(--accent-dark);
}

body.contact-open { overflow:hidden; }

.contact-dialog {
  position:fixed;
  z-index:120;
  inset:0;
  display:grid;
  place-items:center;
  padding:max(20px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
}

.contact-dialog-backdrop {
  position:absolute;
  inset:0;
  border:0;
  background:rgba(24,20,17,.58);
  backdrop-filter:blur(10px);
  cursor:pointer;
}

.contact-card {
  position:relative;
  width:min(520px,100%);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.54);
  border-radius:24px;
  padding:28px;
  color:var(--ink);
  background:rgba(247,243,235,.97);
  box-shadow:0 30px 90px rgba(32,25,20,.3);
  outline:none;
}

.contact-card::before {
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-82px;
  top:-92px;
  border-radius:50%;
  background:rgba(155,93,66,.08);
  pointer-events:none;
}

.contact-card-header {
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  padding-bottom:22px;
  border-bottom:1px solid var(--soft-line);
}

.contact-card-header span {
  color:var(--accent);
  font:700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.16em;
}

.contact-card-header h2 {
  margin:10px 0 8px;
  font:600 30px/1.2 "Songti SC",STSong,Georgia,serif;
  letter-spacing:.02em;
}

.contact-card-header p {
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}

.contact-close-button {
  position:relative;
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--soft-line);
  border-radius:50%;
  padding:0 0 2px;
  color:var(--ink);
  background:rgba(255,255,255,.52);
  cursor:pointer;
  font-size:24px;
  line-height:1;
}

.contact-list { display:grid; gap:10px; padding-top:20px; }

.contact-item {
  min-width:0;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:62px;
  border:1px solid var(--soft-line);
  border-radius:15px;
  padding:10px 12px 10px 15px;
  background:rgba(255,255,255,.48);
}

.contact-kind {
  color:var(--muted);
  font-size:11px;
  letter-spacing:.1em;
}

.contact-value {
  min-width:0;
  overflow-wrap:anywhere;
  color:var(--ink);
  font-size:14px;
  font-weight:600;
  line-height:1.45;
  text-decoration:none;
}

a.contact-value:hover { color:var(--accent); }

.contact-copy-button {
  min-height:34px;
  border:1px solid rgba(155,93,66,.24);
  border-radius:99px;
  padding:7px 12px;
  color:var(--accent-dark);
  background:rgba(155,93,66,.08);
  cursor:pointer;
  font-size:11px;
}

.contact-copy-button:hover { color:#fff; border-color:var(--accent); background:var(--accent); }
.contact-status { min-height:20px; margin:12px 2px -4px; color:var(--accent-dark); font-size:12px; }

@media (max-width:680px) {
  .subscribe-button { padding:9px 12px; font-size:12px; }
  .contact-card { border-radius:21px; padding:22px 18px 18px; }
  .contact-card-header h2 { font-size:27px; }
  .contact-item { grid-template-columns:44px minmax(0,1fr) auto; gap:8px; padding-left:12px; }
  .contact-value { font-size:12px; }
  .contact-copy-button { padding:7px 10px; }
}

/* 2.0 additions preserve the existing reader and audio layout. */
.catalog-sort { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:16px 0 6px; font-size:13px; }
.catalog-sort select { padding:7px 12px; border:1px solid var(--line,#d6cdbf); border-radius:16px; background:transparent; color:inherit; font:inherit; }
.upload-date { display:block; font-size:11px; line-height:1.7; color:var(--muted,#776c61); font-weight:400; }
.audio-duration { position:absolute; left:10px; bottom:10px; z-index:3; padding:5px 8px; border-radius:8px; color:#fff; background:rgba(12,12,12,.76); font-size:12px; font-variant-numeric:tabular-nums; }
.audio-secondary-left { display:flex; align-items:center; gap:8px; min-width:0; }
.audio-list-button { padding:5px 7px; border:0; border-radius:6px; color:rgba(255,255,255,.75); background:#ffffff0a; font:inherit; font-size:11px; line-height:18px; white-space:nowrap; cursor:pointer; }
.mini-audio { position:fixed; z-index:90; right:max(14px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); width:46px; height:46px; border:1px solid #ffffff30; border-radius:50%; background:#24211feb; color:#fff; box-shadow:0 4px 14px #0003; }
.mini-audio button { display:grid; place-items:center; width:100%; height:100%; padding:0; border:0; border-radius:inherit; color:inherit; background:transparent; font-size:21px; cursor:pointer; }
.mini-audio.playing { border-color:#d6aa7d; }
.mini-audio.in-reader { position:static; flex:0 0 34px; width:34px; height:32px; margin-left:auto; box-shadow:none; order:99; border-radius:9px; }
.mini-audio.in-reader button { font-size:18px; }
body.has-mini-audio .library-shell { padding-bottom:72px; }
#audioStopButton { margin-left:auto; color:rgba(255,255,255,.6); }
@media (max-width:480px) {
  .reader-tools:has(.mini-audio:not([hidden])) { gap:3px; }
  .reader-tools:has(.mini-audio:not([hidden])) .tool-button { min-width:28px; padding:0 4px; }
  .reader-tools:has(.mini-audio:not([hidden])) .tool-label { min-width:46px; }
  .reader-tools:has(.mini-audio:not([hidden])) .brightness-control { padding:0 4px; gap:4px; }
  .reader-tools:has(.mini-audio:not([hidden])) .brightness-control input { width:40px; }
  .reader-tools:has(.mini-audio:not([hidden])) .tool-separator { margin:0 3px; }
}
body > .toast { position:fixed; z-index:250; color:#fff; width:max-content; max-width:90vw; text-align:center; }
.v2-dialog { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; }
.v2-scrim { position:absolute; inset:0; background:#0009; border:0; }
.v2-dialog-card { position:relative; width:min(520px,100%); max-height:82dvh; overflow:auto; padding:22px; border-radius:22px; color:var(--ink,#27211a); background:#f6f2ea; box-shadow:0 20px 80px #0006; }
.v2-dialog-card header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.v2-dialog-card h2 { font-size:19px; margin:0 0 14px; }
.v2-dialog-card button { font:inherit; cursor:pointer; }
.v2-dialog-card header button { width:44px; height:44px; background:transparent; border:0; font-size:24px; }
.v2-dialog-card input { width:100%; margin:8px 0 16px; padding:12px; border:1px solid #d4cbbc; border-radius:12px; background:#fff; font:inherit; }
.audio-list-items { display:grid; gap:8px; }
.audio-list-items button { display:flex; flex-direction:column; align-items:flex-start; gap:6px; width:100%; padding:13px; border:1px solid #ddd2c2; border-radius:12px; color:inherit; background:transparent; text-align:left; }
.audio-list-items button.active { border-color:#a87844; background:#eee3d3; }
.audio-list-items small { opacity:.7; }
#installInstructions { line-height:1.9; white-space:pre-line; }
#installCopy { padding:10px 16px; border:1px solid #d4cbbc; border-radius:12px; background:#fff; }
@media(max-width:480px) { .reader-heading { min-width:0; } #listenButton { font-size:12px; padding:7px; } }

/* Compact, anchored collection menu: the audio page stays visible. */
.audio-list-dialog { display:block; padding:0; }
.audio-list-dialog .v2-scrim { background:transparent; }
.audio-list-dialog .v2-dialog-card { position:fixed; left:var(--list-left,12px); top:var(--list-top,20px); width:min(260px,calc(100vw - 24px)); max-height:250px; padding:10px; border:1px solid #d7ccbc; border-radius:14px; box-shadow:0 8px 32px #0005; overflow:hidden; }
.audio-list-dialog header { gap:6px; padding:0 4px 6px; }
.audio-list-dialog h2 { margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:500; }
.audio-list-dialog header button { width:28px; height:28px; flex:none; font-size:20px; }
.audio-list-dialog .audio-list-items { max-height:180px; overflow-y:auto; overscroll-behavior:contain; gap:2px; }
.audio-list-dialog .audio-list-items button { flex-direction:row; align-items:center; padding:10px 8px; min-height:40px; gap:8px; border:0; border-radius:7px; font-size:13px; }
.audio-list-dialog .audio-list-items strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; }
.audio-list-mark { flex:0 0 22px; text-align:center; color:#917454; font-size:11px; }
.audio-list-dialog .audio-list-items button:disabled { opacity:.45; }