:root {
  --bg-0: #0b0910;
  --bg-1: #14111b;
  --bg-2: #1d1828;
  --fg: #f4f1f8;
  --fg-dim: #9d96ab;
  --accent: #b79cff;
  --accent-2: #7bd3c5;
  --radius: 20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --hairline: rgba(255, 255, 255, 0.075);

  /* 阅读主题（由 JS 覆盖） */
  --read-bg: #faf8f3;
  --read-fg: #1f1f22;
  --read-dim: #6c6a70;

  /* 动效曲线：Apple 那种「起步快、收尾软」的 spring 近似 */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.36s;
  --dur-fast: 0.18s;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
  background: var(--bg-0);
  color: var(--fg);
  font-family: -apple-system, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body { overflow: hidden; }

.screen {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
}
.screen.active { display: flex; }

/* 页面切换的动效：书架淡入，阅读页从「翻上去」的感觉里出来 */
#library.active { animation: screenIn 0.34s var(--ease-out); }
#reader.active { animation: readerIn 0.42s var(--ease-spring); }

@keyframes screenIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes readerIn {
  from { opacity: 0; transform: scale(0.988) translateY(10px); }
  to { opacity: 1; transform: none; }
}

.hidden { display: none !important; }

/* ===================================================================
   书架
   =================================================================== */

#library {
  background:
    radial-gradient(120% 55% at 6% -10%, #2b2242 0%, transparent 58%),
    radial-gradient(90% 50% at 105% 102%, #17313a 0%, transparent 55%),
    linear-gradient(180deg, #0d0a13 0%, #0b0910 60%, #09070d 100%);
  padding-top: calc(var(--safe-top) + 10px);
}

/* 底部渐隐：内容滚到底时不会硬切 */
#library::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  background: linear-gradient(to top, rgba(9, 7, 13, 0.96), rgba(9, 7, 13, 0));
  pointer-events: none;
  z-index: 4;
}

/* —— 大标题 —— */
.lib-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 4px 22px 10px;
  position: relative;
  z-index: 3;
}

/* 滚动后标题栏浮出一层磨砂底，内容从它下面穿过去 */
.lib-header::before {
  content: "";
  position: absolute;
  inset: -12px -22px 0;
  background: rgba(10, 8, 15, 0.74);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  pointer-events: none;
}
#library.compact .lib-header::before { opacity: 1; }

.lib-titles,
.lib-header .round-btn { position: relative; z-index: 1; }

.lib-titles {
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
  transform-origin: left bottom;
}

.eyebrow {
  margin: 0 0 3px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: opacity 0.22s ease, height 0.22s ease, margin 0.22s ease;
}

.lib-header h1 {
  margin: 0;
  font-size: 33px;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-family: "Songti SC", "New York", Georgia, serif;
  transition: font-size 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
}

/* 往下滚时标题收起来一点，像 iOS 的 large title */
#library.compact .lib-header h1 { font-size: 23px; }
#library.compact .eyebrow { opacity: 0; margin-bottom: 0; }

.round-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.075);
  color: var(--fg);
  display: grid;
  place-items: center;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  transition: transform 0.16s ease, background 0.16s ease;
}
.round-btn:active { transform: scale(0.92); background: rgba(255, 255, 255, 0.15); }

/* —— 搜索 —— */
.search-wrap {
  margin: 0 22px 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 12px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.055);
  color: var(--fg-dim);
  overflow: hidden;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    height var(--dur) var(--ease-out),
    margin-bottom var(--dur) var(--ease-out),
    opacity 0.2s ease;
}

/* 往下滚时搜索框收起，标题栏浮出磨砂底 */
#library.compact .search-wrap {
  height: 0;
  margin-bottom: 2px;
  opacity: 0;
  border-color: transparent;
}
.search-wrap:focus-within {
  background: rgba(255, 255, 255, 0.095);
  border-color: rgba(183, 156, 255, 0.35);
}
.search-wrap input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg);
  font-size: 14.5px;
  font-family: inherit;
}
.search-wrap input::placeholder { color: var(--fg-dim); }
.search-wrap input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* —— 滚动区 —— */
.shelf {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 22px calc(var(--safe-bottom) + 44px);
  scrollbar-width: none;
}
.shelf::-webkit-scrollbar { display: none; }

/* —— 继续阅读：横向卡片（像 Apple Books 的 Reading Now） —— */
.continue {
  display: flex;
  gap: 12px;
  margin: 2px -22px 26px 0;
  padding: 2px 22px 4px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.continue::-webkit-scrollbar { display: none; }
.continue.hidden { display: none; }

.cc-card {
  flex: 0 0 auto;
  width: 82%;
  max-width: 310px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.028) 62%),
    rgba(20, 17, 27, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.085);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 20px 44px -26px rgba(0, 0, 0, 0.95);
  transition: transform var(--dur) var(--ease-spring), box-shadow 0.24s ease;
  animation: fadeUp 0.42s var(--ease-out) backwards;
}
.cc-card:active {
  transform: scale(0.981);
  box-shadow: 0 10px 26px -20px rgba(0, 0, 0, 0.9);
}

.cc-cover {
  width: 54px;
  aspect-ratio: 3 / 4.28;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.4);
}

.cc-info { flex: 1; min-width: 0; }

.cc-kicker {
  margin: 0 0 4px;
  font-size: 9px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.92;
}

.cc-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cc-sub {
  margin: 5px 0 0;
  font-size: 11px;
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-bar {
  margin-top: 8px;
  height: 2.5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.13);
  overflow: hidden;
}
.cc-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* —— 分区标题 —— */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 2px 12px;
}
.section-head h2 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.section-head span {
  font-size: 10.5px;
  color: var(--fg-dim);
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}

/* —— 网格：默认三列（更紧凑），可切回两列 —— */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 13px;
}

#library.density-2 .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 17px;
}

.book {
  position: relative;
  animation: fadeUp 0.5s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 24ms);
  transition: transform var(--dur) var(--ease-spring);
}
.book:active { transform: scale(0.964); transition-duration: 0.09s; }

/* Safari 26 支持滚动驱动动画：卡片跟着滚轮「浮上来」，比一次性 stagger 更耐看 */
@supports (animation-timeline: view()) {
  .book {
    animation: bookReveal both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
    animation-delay: 0s;
  }

  @keyframes bookReveal {
    from { opacity: 0.3; transform: translateY(18px) scale(0.955); }
    to { opacity: 1; transform: none; }
  }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(9px) scale(0.986); }
  to { opacity: 1; transform: none; }
}

.cover-wrap {
  position: relative;
  aspect-ratio: 3 / 4.28;
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(155deg, #3a2f50, #171320);
  box-shadow:
    0 12px 22px -14px rgba(0, 0, 0, 0.9),
    0 3px 7px -4px rgba(0, 0, 0, 0.5);
}

.cover-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 26%);
  pointer-events: none;
}

.book-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cover-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5px;
  background: rgba(0, 0, 0, 0.42);
  z-index: 3;
}
.cover-progress i {
  display: block;
  height: 100%;
  background: rgba(255, 255, 255, 0.82);
}

.book-title {
  margin: 7px 1px 0;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: 0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-meta {
  margin: 3px 1px 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

/* 两列（宽松）模式：恢复大一点的版式 */
#library.density-2 .cover-wrap { border-radius: 9px; }
#library.density-2 .book-title { margin-top: 9px; font-size: 13px; }
#library.density-2 .book-meta { margin-top: 4px; font-size: 10.5px; gap: 6px; }

/* 密度按钮图标：显示当前档位 */
#btn-density svg { display: none; }
#library.density-3 #btn-density .icon-grid-dense { display: block; }
#library.density-2 #btn-density .icon-grid-loose { display: block; }
.book-meta .sep {
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  flex-shrink: 0;
}
.book-meta .host {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* —— 空状态 —— */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 54px 18px 24px;
  animation: fadeUp 0.4s ease backwards;
}
.empty-art { opacity: 0.85; margin-bottom: 2px; }
.empty h2 {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.empty p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--fg-dim);
}

/* ===================================================================
   阅读
   =================================================================== */

#reader { background: var(--read-bg); color: var(--read-fg); }

.reader-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--safe-top) + 64px) 22px calc(var(--safe-bottom) + 120px);
}

.article {
  font-size: var(--read-size, 19px);
  font-family: var(--read-font, "Songti SC", Georgia, serif);
}

.para {
  margin: 0 0 var(--read-gap, 9px);
  line-height: 1.78;
  letter-spacing: 0.012em;
  text-indent: 2em;
  word-break: break-word;
  white-space: pre-wrap;
}

.article .footer-nav {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--read-fg) 14%, transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--read-dim);
  text-indent: 0;
}
.article .footer-nav button {
  border: 1px solid color-mix(in srgb, var(--read-fg) 18%, transparent);
  background: transparent;
  color: var(--read-fg);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-family: inherit;
}
.article .footer-nav button:disabled { opacity: 0.35; }

.chrome {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.chrome.show { opacity: 1; }
/* 关键：隐藏时子元素也不能吃点击；显示时才接管（否则不可见的按钮会抢走正文的点击） */
.chrome > * { pointer-events: none; }
.chrome.show > * { pointer-events: auto; }

.chrome-top {
  position: absolute;
  top: calc(var(--safe-top) + 8px);
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 21px;
  background: rgba(26, 24, 32, 0.6);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 36px -22px rgba(0, 0, 0, 0.9);
  color: #fff;
}

.chrome-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.chrome-title strong {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chrome-title span {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.round-btn.ghost {
  width: 33px;
  height: 33px;
  border: 0;
  background: transparent;
  color: inherit;
}
.round-btn.ghost:active { background: rgba(255, 255, 255, 0.12); }
.aa { font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; }

.chrome-bottom {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: calc(var(--safe-bottom) + 16px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 15px;
  border-radius: 25px;
  background: rgba(26, 24, 32, 0.6);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.95);
  color: #fff;
}

.nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: grid;
  place-items: center;
  transition: transform 0.14s ease;
}
.nav-btn:active { transform: scale(0.92); }
.nav-btn:disabled { opacity: 0.3; }

.progress-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.progress-box span {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.82);
}
.progress-track {
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.18s ease;
}

.loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  background: color-mix(in srgb, var(--read-bg) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--read-dim);
  font-size: 13px;
}
.spinner {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--read-fg) 18%, transparent);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================================================================
   弹层
   =================================================================== */

.sheet {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: none;
  align-items: flex-end;
  z-index: 50;
}
.sheet.show { display: flex; animation: fade 0.18s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet-card {
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg-1);
  border-radius: 24px 24px 0 0;
  padding: 18px 20px calc(var(--safe-bottom) + 22px);
  border-top: 1px solid var(--hairline);
  animation: slideUp 0.26s cubic-bezier(0.2, 0.9, 0.2, 1);
}
@keyframes slideUp {
  from { transform: translateY(18px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.sheet-head h2 { margin: 0; font-size: 18.5px; font-weight: 650; }

.close-btn {
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg-dim);
  font-size: 13px;
  padding: 7px 13px;
  border-radius: 999px;
  font-family: inherit;
}

.hint { font-size: 12px; color: var(--fg-dim); line-height: 1.6; margin: 0 0 10px; }
.status { font-size: 12px; min-height: 18px; color: var(--accent-2); margin: 10px 0 0; }

textarea, input[type="url"], input[type="search"], .toc-search {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
  color: var(--fg);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  resize: none;
}
textarea:focus, input:focus { border-color: rgba(183, 156, 255, 0.55); }

.row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 12px;
  color: var(--fg-dim);
  font-size: 12px;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.primary-btn {
  border: 0;
  background: linear-gradient(135deg, var(--accent), #8b6cf5);
  color: #17111f;
  font-weight: 650;
  font-size: 15px;
  padding: 11px 22px;
  border-radius: 999px;
  font-family: inherit;
  box-shadow: 0 8px 24px -12px rgba(183, 156, 255, 0.9);
  transition: transform 0.14s ease;
}
.primary-btn:active { transform: scale(0.97); }
.primary-btn:disabled { opacity: 0.5; }

.ghost-btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: var(--fg);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-family: inherit;
}

.field { display: block; margin: 16px 0; font-size: 13px; color: var(--fg-dim); }
.field > span { display: block; margin-bottom: 8px; }
.field b { color: var(--fg); font-weight: 600; }
input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.preview {
  font-family: "Songti SC", Georgia, serif;
  font-size: 17px;
  line-height: 1.8;
  padding: 14px 16px;
  border-radius: 16px;
  color: var(--read-fg);
  background: var(--read-bg);
  margin-bottom: 6px;
}

.themes { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-dot {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  border: 2px solid transparent;
  display: grid;
  place-items: center;
  font-family: "Songti SC", serif;
  font-size: 15px;
}
.theme-dot.active { border-color: var(--accent); }

.fonts { display: flex; gap: 8px; flex-wrap: wrap; }
.font-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
}
.font-chip.active { background: rgba(183, 156, 255, 0.2); border-color: rgba(183, 156, 255, 0.5); }

.toc-search { margin-bottom: 10px; }
.toc-list { max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.toc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14.5px;
  font-family: "Songti SC", serif;
  color: var(--fg);
}
.toc-item.current { color: var(--accent); }
.toc-item .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 90px);
  transform: translate(-50%, 10px);
  background: rgba(22, 19, 28, 0.94);
  color: #fff;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 99;
  max-width: 82vw;
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===================================================================
   减弱动效（系统「减弱动态效果」打开时）
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================================================================
   底部 Tab / 站点浏览
   =================================================================== */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(56px + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: flex;
  background: rgba(11, 9, 16, 0.8);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, 0.065);
  z-index: 30;
}
.tabbar.hidden { display: none; }

.tab {
  flex: 1;
  border: 0;
  background: none;
  color: var(--fg-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  font-family: inherit;
  transition: color 0.2s ease;
}
.tab svg { opacity: 0.7; transition: opacity 0.2s ease, transform 0.3s var(--ease-spring); }
.tab.active { color: var(--fg); }
.tab.active svg { opacity: 1; transform: translateY(-1px); }

#library .shelf,
#discover .shelf { padding-bottom: calc(var(--safe-bottom) + 96px); }

/* —— 发现：站点卡 —— */
#discover {
  background:
    radial-gradient(110% 50% at 90% -10%, #26203a 0%, transparent 55%),
    linear-gradient(180deg, #0d0a13 0%, #09070d 100%);
  padding-top: calc(var(--safe-top) + 10px);
}

.site-list { display: flex; flex-direction: column; gap: 12px; }

.site-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform var(--dur) var(--ease-spring), background 0.2s ease;
  animation: fadeUp 0.4s var(--ease-out) backwards;
}
.site-card:active { transform: scale(0.98); background: rgba(255, 255, 255, 0.09); }

.site-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #55447f, #2a2340);
  color: #fff;
  font-family: "Songti SC", serif;
  font-size: 18px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.site-meta { flex: 1; min-width: 0; }
.site-meta h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-meta p {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-chevron { color: var(--fg-dim); opacity: 0.45; flex-shrink: 0; }

/* —— 站点内部 —— */
#site, #detail { background: #0b0910; }

.site-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(var(--safe-top) + 8px) 14px 6px;
}

.site-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  text-align: center;
}
.site-title strong {
  font-size: 15px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-title span {
  font-size: 10.5px;
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seg {
  display: flex;
  gap: 3px;
  margin: 6px 22px 14px;
  padding: 3px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.seg button {
  flex: 1;
  border: 0;
  background: none;
  color: var(--fg-dim);
  font-size: 13px;
  font-family: inherit;
  padding: 7px 0;
  border-radius: 8px;
  transition: background 0.24s var(--ease-out), color 0.24s ease;
}
.seg button.active {
  background: rgba(255, 255, 255, 0.13);
  color: var(--fg);
  font-weight: 600;
}

.site-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 22px calc(var(--safe-bottom) + 30px);
  scrollbar-width: none;
}
.site-body::-webkit-scrollbar { display: none; }

/* —— 分类 chips —— */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 4px 0 10px;
}
.chip {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  padding: 9px 16px;
  border-radius: 999px;
  transition: transform var(--dur) var(--ease-spring), background 0.18s ease;
}
.chip:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.13); }

/* —— 书目列表 —— */
.list { display: flex; flex-direction: column; }

.list-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.16s ease;
}
.list-row:active { background: rgba(255, 255, 255, 0.045); }

.list-index {
  width: 21px;
  text-align: center;
  font-size: 12px;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.list-thumb {
  width: 36px;
  aspect-ratio: 3 / 4.28;
  border-radius: 5px;
  object-fit: cover;
  background: #241d33;
  flex-shrink: 0;
}

.list-main { flex: 1; min-width: 0; }
.list-title {
  margin: 0;
  font-size: 14px;
  font-family: "Songti SC", serif;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list-sub {
  margin: 3px 0 0;
  font-size: 10.5px;
  color: var(--fg-dim);
}
.list-arrow { color: var(--fg-dim); opacity: 0.35; flex-shrink: 0; }

/* —— 书籍详情 —— */
.detail-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 22px calc(var(--safe-bottom) + 30px);
}

.detail-hero { display: flex; gap: 16px; }

.detail-cover {
  width: 102px;
  aspect-ratio: 3 / 4.28;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(155deg, #3a2f50, #171320);
  box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.95), 0 3px 8px rgba(0, 0, 0, 0.35);
}

.detail-info { flex: 1; min-width: 0; }
.detail-info h2 {
  margin: 0;
  font-size: 18px;
  font-family: "Songti SC", serif;
  line-height: 1.32;
  letter-spacing: -0.01em;
}
.detail-info p {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--fg-dim);
}

.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.badge {
  font-size: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg-dim);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-actions { display: flex; gap: 10px; margin: 18px 0 4px; }
.detail-actions .primary-btn { flex: 1; }
.detail-actions .ghost-btn { flex: 1; }

.detail-intro {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--fg-dim);
  white-space: pre-wrap;
}

.chapter-list { display: flex; flex-direction: column; }
.chapter-row {
  padding: 13px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  font-size: 13.5px;
  font-family: "Songti SC", serif;
  color: var(--fg);
  transition: color 0.16s ease;
}
.chapter-row:active { color: var(--accent); }

/* —— 底部操作（发现页） —— */
.footer-actions {
  display: flex;
  gap: 10px;
  margin: 28px 0 6px;
}
.footer-actions .ghost-btn { flex: 1; font-size: 13px; padding: 11px 0; }
.ghost-btn.danger {
  color: #ff9a9a;
  border-color: rgba(255, 120, 120, 0.28);
}
.ghost-btn.danger:active { background: rgba(255, 90, 90, 0.12); }

/* —— 新版本提示条 —— */
.update-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(var(--safe-bottom) + 74px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 11px 16px;
  border-radius: 16px;
  background: rgba(32, 27, 44, 0.94);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.95);
  z-index: 60;
  animation: bannerIn 0.32s var(--ease-spring);
}
.update-banner.hidden { display: none; }
.update-banner span {
  flex: 1;
  font-size: 13px;
  color: var(--fg);
}
.update-banner button {
  border: 0;
  background: linear-gradient(135deg, #d9ccff, var(--accent));
  color: #17111f;
  font-size: 12.5px;
  font-weight: 650;
  font-family: inherit;
  padding: 8px 15px;
  border-radius: 999px;
}
.update-banner button:active { transform: scale(0.96); }

@keyframes bannerIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.version-line {
  margin: 14px 0 0;
  text-align: center;
  font-size: 10.5px;
  color: var(--fg-dim);
  opacity: 0.55;
  letter-spacing: 0.04em;
}

/* —— 站点内搜索 —— */
.site-search {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 22px 12px;
  padding: 0 10px 0 12px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--fg-dim);
}
.site-search:focus-within { border-color: rgba(183, 156, 255, 0.4); }
.site-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg);
  font-size: 13.5px;
  font-family: inherit;
}
.site-search input::placeholder { color: var(--fg-dim); font-size: 12.5px; }
.site-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-go {
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: var(--fg);
  font-size: 12px;
  font-family: inherit;
  padding: 6px 12px;
  border-radius: 8px;
}
.search-go:active { background: rgba(255, 255, 255, 0.18); }

/* —— 排序 chips（比分类小一号） —— */
.chips-sort { margin-top: -2px; }
.chip-sort {
  font-size: 12px;
  padding: 6px 13px;
  background: rgba(183, 156, 255, 0.1);
  border-color: rgba(183, 156, 255, 0.22);
  color: #d9ccff;
}

/* —— 书目上的标签 —— */
.tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 10px;
  color: var(--accent);
  background: rgba(183, 156, 255, 0.12);
  border: 1px solid rgba(183, 156, 255, 0.18);
}

/* 详情页的小标签（#纯爱 这类） */
.tag-lg {
  font-size: 11px;
  padding: 3px 9px;
  margin: 0 6px 6px 0;
  border-radius: 7px;
}
#detail-body .detail-tags { gap: 0; }

/* ===================================================================
   白天 / 夜间（data-theme 挂在 <html> 上）
   =================================================================== */

.lib-header { gap: 8px; }
.lib-titles { flex: 1; }

/* 主题按钮：深色时显示太阳（点了变亮），浅色时显示月亮 */
.theme-btn svg { display: none; }
:root[data-theme="dark"] .theme-btn .icon-sun { display: block; }
:root[data-theme="light"] .theme-btn .icon-moon { display: block; }

/* —— 浅色主题 —— */
:root[data-theme="light"] {
  --bg-0: #f2efe9;
  --bg-1: #ffffff;
  --bg-2: #f7f5f1;
  --fg: #1b1922;
  --fg-dim: #6b6776;
  --accent: #6a4fd8;
  --accent-2: #2f9d8f;
}

:root[data-theme="light"] body { background: var(--bg-0); color: var(--fg); }

:root[data-theme="light"] #library {
  background:
    radial-gradient(120% 55% at 6% -10%, #e8e0ff 0%, transparent 58%),
    radial-gradient(90% 50% at 105% 102%, #d9f1ec 0%, transparent 55%),
    linear-gradient(180deg, #f8f5f0 0%, #f2efe9 60%, #ece9e3 100%);
}
:root[data-theme="light"] #discover {
  background:
    radial-gradient(110% 50% at 90% -10%, #ece3ff 0%, transparent 55%),
    linear-gradient(180deg, #f8f5f0 0%, #ece9e3 100%);
}
:root[data-theme="light"] #site,
:root[data-theme="light"] #detail { background: #f7f5f1; }

:root[data-theme="light"] #library::after {
  background: linear-gradient(to top, rgba(236, 233, 227, 0.96), rgba(236, 233, 227, 0));
}

:root[data-theme="light"] .lib-header::before { background: rgba(248, 245, 240, 0.82); }

:root[data-theme="light"] .round-btn {
  background: rgba(0, 0, 0, 0.045);
  border-color: rgba(0, 0, 0, 0.07);
  color: var(--fg);
}
:root[data-theme="light"] .round-btn:active { background: rgba(0, 0, 0, 0.1); }

:root[data-theme="light"] .search-wrap,
:root[data-theme="light"] .site-search {
  background: rgba(0, 0, 0, 0.045);
  border-color: rgba(0, 0, 0, 0.06);
  color: var(--fg-dim);
}
:root[data-theme="light"] .search-wrap input,
:root[data-theme="light"] .site-search input { color: var(--fg); }

:root[data-theme="light"] .cc-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.72));
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 18px 36px -26px rgba(0, 0, 0, 0.45);
}
:root[data-theme="light"] .cc-bar { background: rgba(0, 0, 0, 0.1); }

:root[data-theme="light"] .book-title { color: var(--fg); }
:root[data-theme="light"] .book-meta { color: var(--fg-dim); }
:root[data-theme="light"] .cover-wrap {
  box-shadow: 0 12px 22px -16px rgba(0, 0, 0, 0.5), 0 3px 8px -5px rgba(0, 0, 0, 0.2);
}
:root[data-theme="light"] .cover-wrap::after {
  border-color: rgba(0, 0, 0, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 26%);
}

:root[data-theme="light"] .empty,
:root[data-theme="light"] .hint,
:root[data-theme="light"] .empty p { color: var(--fg-dim); }
:root[data-theme="light"] .empty h2 { color: var(--fg); }
:root[data-theme="light"] .empty-art { color: rgba(0, 0, 0, 0.26); }
:root[data-theme="light"] .site-avatar { background: linear-gradient(135deg, #7f68cf, #4a3b86); }

:root[data-theme="light"] .site-card {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.06);
}
:root[data-theme="light"] .seg { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.05); }
:root[data-theme="light"] .seg button { color: var(--fg-dim); }
:root[data-theme="light"] .seg button.active { background: rgba(255, 255, 255, 0.9); color: var(--fg); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

:root[data-theme="light"] .chip { background: rgba(0, 0, 0, 0.035); border-color: rgba(0, 0, 0, 0.07); color: var(--fg); }
:root[data-theme="light"] .chip-sort { background: rgba(106, 79, 216, 0.09); border-color: rgba(106, 79, 216, 0.2); color: #4a34a6; }
:root[data-theme="light"] .search-go { background: rgba(0, 0, 0, 0.06); color: var(--fg); }

:root[data-theme="light"] .list-row { border-color: rgba(0, 0, 0, 0.07); }
:root[data-theme="light"] .list-title { color: var(--fg); }
:root[data-theme="light"] .list-sub { color: var(--fg-dim); }
:root[data-theme="light"] .tag { background: rgba(106, 79, 216, 0.1); border-color: rgba(106, 79, 216, 0.18); color: #4a34a6; }

:root[data-theme="light"] .detail-info h2 { color: var(--fg); }
:root[data-theme="light"] .detail-intro { color: var(--fg-dim); }
:root[data-theme="light"] .badge { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.06); color: var(--fg-dim); }
:root[data-theme="light"] .detail-cover { box-shadow: 0 14px 26px -18px rgba(0, 0, 0, 0.5); }
:root[data-theme="light"] .chapter-row { border-color: rgba(0, 0, 0, 0.07); color: var(--fg); }

:root[data-theme="light"] .sheet-card { background: #ffffff; border-top-color: rgba(0, 0, 0, 0.08); }
:root[data-theme="light"] .sheet-head h2 { color: var(--fg); }
:root[data-theme="light"] .close-btn { background: rgba(0, 0, 0, 0.06); color: var(--fg-dim); }
:root[data-theme="light"] .ghost-btn { border-color: rgba(0, 0, 0, 0.14); color: var(--fg); }
:root[data-theme="light"] textarea,
:root[data-theme="light"] input[type="url"],
:root[data-theme="light"] input[type="search"],
:root[data-theme="light"] .toc-search {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--fg);
}
:root[data-theme="light"] .toc-item { border-color: rgba(0, 0, 0, 0.07); color: var(--fg); }
:root[data-theme="light"] .field { color: var(--fg-dim); }
:root[data-theme="light"] .field b { color: var(--fg); }
:root[data-theme="light"] input[type="range"] { background: rgba(0, 0, 0, 0.12); }

:root[data-theme="light"] .tabbar {
  background: rgba(248, 245, 240, 0.86);
  border-top-color: rgba(0, 0, 0, 0.07);
}
:root[data-theme="light"] .tab { color: rgba(27, 25, 34, 0.45); }
:root[data-theme="light"] .tab.active { color: var(--fg); }

:root[data-theme="light"] .update-banner {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.35);
}
:root[data-theme="light"] .update-banner span { color: var(--fg); }

:root[data-theme="light"] .primary-btn { color: #ffffff; }
:root[data-theme="light"] .footer-actions .ghost-btn { color: var(--fg); }

/* ===================================================================
   标签墙
   =================================================================== */

.tag-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 0 10px;
}

.tag-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.045);
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  padding: 8px 12px;
  border-radius: 999px;
  transition: transform var(--dur) var(--ease-spring), background 0.18s ease, border-color 0.18s ease;
}
.tag-chip .hash { color: var(--accent); opacity: 0.85; font-size: 12px; }
.tag-chip .cnt {
  font-size: 9.5px;
  color: var(--fg-dim);
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.tag-chip:active { transform: scale(0.94); }
.tag-chip.on {
  background: rgba(183, 156, 255, 0.18);
  border-color: rgba(183, 156, 255, 0.5);
  color: #e6dcff;
}

.tag-actions {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 18px 0 4px;
}
.tag-actions .primary-btn { flex: 1; }
.tag-actions .ghost-btn { flex: 0 0 auto; font-size: 13px; padding: 10px 16px; }

:root[data-theme="light"] .tag-chip {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.07);
  color: var(--fg);
}
:root[data-theme="light"] .tag-chip.on {
  background: rgba(106, 79, 216, 0.12);
  border-color: rgba(106, 79, 216, 0.42);
  color: #4a34a6;
}

/* —— 设备同步 —— */
.footer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.footer-actions .ghost-btn { padding: 11px 0; font-size: 13px; }
.footer-actions .wide { grid-column: 1 / -1; }

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.toggle-row > span { margin: 0; }
.toggle-row input[type="checkbox"] {
  width: 46px;
  height: 27px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  position: relative;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.toggle-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.22s var(--ease-spring);
}
.toggle-row input[type="checkbox"]:checked { background: var(--accent); }
.toggle-row input[type="checkbox"]:checked::after { transform: translateX(19px); }

label.ghost-btn { text-align: center; cursor: pointer; }
:root[data-theme="light"] .toggle-row input[type="checkbox"] { background: rgba(0, 0, 0, 0.14); }

/* ===================================================================
   分类页：常驻筛选面板 + 带封面的书目
   =================================================================== */

.filter-panel {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: -2px -22px 10px;
  padding: 8px 0 10px;
  background: linear-gradient(180deg, #0b0910 0%, #0b0910 76%, rgba(11, 9, 16, 0.92) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.filter-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 22px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filter-scroll::-webkit-scrollbar { display: none; }
.filter-scroll + .filter-scroll { margin-top: 7px; }

.filter-chip {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  color: var(--fg);
  font-size: 12.5px;
  font-family: inherit;
  padding: 7px 13px;
  border-radius: 10px;
  transition: transform 0.2s var(--ease-spring), background 0.18s ease, border-color 0.18s ease;
}
.filter-chip:active { transform: scale(0.94); }
.filter-chip.on {
  border-color: var(--accent);
  background: rgba(183, 156, 255, 0.18);
  color: #efe8ff;
  box-shadow: 0 0 0 1px rgba(183, 156, 255, 0.28) inset;
}
.filter-chip.tag .hash { color: var(--accent); margin-right: 1px; opacity: 0.9; }
.filter-chip.tag .cnt { font-size: 9px; opacity: 0.6; margin-left: 3px; font-variant-numeric: tabular-nums; }
.filter-chip.sort { font-size: 12px; padding: 6px 12px; }

.filter-empty { font-size: 11.5px; color: var(--fg-dim); opacity: 0.7; padding: 6px 0; }

/* —— 书目网格 —— */
.book-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 12px;
  padding: 4px 0 24px;
}

.grid-book {
  animation: fadeUp 0.4s var(--ease-out) backwards;
  transition: transform 0.16s ease;
}
.grid-book:active { transform: scale(0.97); }

.grid-cover {
  position: relative;
  aspect-ratio: 3 / 4.28;
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(155deg, #3a2f50, #171320);
  box-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.9);
}
.grid-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.grid-title {
  margin: 7px 1px 0;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.grid-sub {
  margin: 3px 1px 0;
  font-size: 9.5px;
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:root[data-theme="light"] .filter-panel {
  background: linear-gradient(180deg, #f7f5f1 0%, #f7f5f1 76%, rgba(247, 245, 241, 0.94) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
:root[data-theme="light"] .filter-chip {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--fg);
}
:root[data-theme="light"] .filter-chip.on {
  background: rgba(106, 79, 216, 0.12);
  border-color: rgba(106, 79, 216, 0.45);
  color: #4a34a6;
  box-shadow: none;
}

/* ===================================================================
   沉浸式阅读（参考起点：内容顶到最上，底部只留一行极淡的状态）
   =================================================================== */

/* 纸张质感：一层极淡的噪点，叠在主题底色上 */
#reader::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
:root[data-theme="dark"] #reader::before { opacity: 0.03; mix-blend-mode: screen; }

.reader-scroll {
  padding: calc(var(--safe-top) + 50px) 24px calc(var(--safe-bottom) + 42px);
  z-index: 2;
  position: absolute;
}

/* 底部常驻的一行：章节 · 百分比    时间 */
.reader-status {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: calc(var(--safe-bottom) + 8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--read-fg) 42%, transparent);
  pointer-events: none;
  z-index: 3;
}
.reader-status span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62%;
}

/* 控制层出现时，正文稍微让一让，避免被顶部胶囊压住 */
#reader.chrome-on .reader-scroll { padding-top: calc(var(--safe-top) + 62px); }


/* 小标签：换行铺开，选中的分类下相关标签带一点强调 */
#filter-tags {
  flex-wrap: wrap;
  overflow-x: visible;
  row-gap: 7px;
}
#filter-tags .filter-chip.tag.in-cat {
  border-color: rgba(183, 156, 255, 0.32);
}
#filter-tags .filter-chip.tag.in-cat .cnt {
  color: var(--accent);
  opacity: 0.85;
}
.filter-chip.more {
  border-style: dashed;
  color: var(--fg-dim);
  font-size: 12px;
}
:root[data-theme="light"] #filter-tags .filter-chip.tag.in-cat {
  border-color: rgba(106, 79, 216, 0.35);
}


/* 底部状态行不要盖住控制层按钮 */
#reader-status { z-index: 3; }


/* ===================================================================
   阅读器：把控制条做成「浮在纸上的一层淡雾」，不再是玻璃胶囊
   =================================================================== */

.chrome-top,
.chrome-bottom {
  background: color-mix(in srgb, var(--read-bg) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  border: none;
  border-radius: 14px;
  box-shadow: none;
  padding: 9px 12px;
}
.chrome-top {
  top: calc(var(--safe-top) + 4px);
  left: 14px;
  right: 14px;
}
.chrome-bottom {
  left: 14px;
  right: 14px;
  bottom: calc(var(--safe-bottom) + 10px);
  padding: 10px 14px;
}

/* 控制条里的按钮：细线图标 + 半透明，像起点那样不抢戏 */
.chrome button,
.chrome .icon-btn {
  background: transparent;
  border: none;
  color: color-mix(in srgb, var(--read-fg) 72%, transparent);
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 8px;
}
.chrome button:active { background: color-mix(in srgb, var(--read-fg) 10%, transparent); }

.chrome-title strong {
  font-size: 13px;
  font-weight: 500;
  color: color-mix(in srgb, var(--read-fg) 88%, transparent);
}
.chrome-title span {
  font-size: 10px;
  color: color-mix(in srgb, var(--read-fg) 45%, transparent);
}

/* 正文：更接近起点的呼吸感 */
.article p {
  line-height: 1.92;
  margin-bottom: 0.92em;
  text-indent: 2em;
}

/* ===================================================================
   阅读器最终版：照起点读书 / 番茄小说的结构
   —— 顶栏和底栏不是"容器"，是两条从纸色渐变到透明的遮罩；
      文字直接浮在纸上，正文滑到下面被渐变吃掉，看不到边界。
   =================================================================== */

#chrome .chrome-top {
  top: 0;
  left: 0;
  right: 0;
  padding: calc(var(--safe-top) + 8px) 20px 28px;
  gap: 6px;
  background: linear-gradient(to bottom,
      var(--read-bg) 0%,
      color-mix(in srgb, var(--read-bg) 94%, transparent) 50%,
      transparent 100%);
  border-radius: 0;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#chrome .chrome-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 20px calc(var(--safe-bottom) + 12px);
  gap: 14px;
  background: linear-gradient(to top,
      var(--read-bg) 0%,
      color-mix(in srgb, var(--read-bg) 94%, transparent) 50%,
      transparent 100%);
  border-radius: 0;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 顶栏图标：没有底、没有边，只有一撇淡墨 */
#chrome .round-btn.ghost {
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: none;
  color: color-mix(in srgb, var(--read-fg) 55%, transparent);
}
#chrome .round-btn.ghost:active {
  background: color-mix(in srgb, var(--read-fg) 8%, transparent);
}
#chrome .round-btn.ghost .aa {
  font-size: 13px;
  font-weight: 500;
}

/* 章节名：起点那种"书名在左，淡到几乎看不见" */
#chrome .chrome-title strong {
  font-size: 13px;
  font-weight: 500;
  color: color-mix(in srgb, var(--read-fg) 62%, transparent);
}
#chrome .chrome-title span {
  font-size: 10px;
  color: color-mix(in srgb, var(--read-fg) 36%, transparent);
}

/* 底部进度：一根 2px 的细线，起点的样子 */
#chrome .progress-track {
  height: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--read-fg) 12%, transparent);
}
#chrome .progress-fill {
  background: color-mix(in srgb, var(--read-fg) 46%, transparent);
}
#chrome #reader-percent {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--read-fg) 44%, transparent);
}
#chrome .nav-btn {
  color: color-mix(in srgb, var(--read-fg) 45%, transparent);
  background: transparent;
}

/* 控制层出现时，把底部那行状态让出来，别两条信息打架 */
#reader .reader-status { transition: opacity 0.18s ease; }
#reader.chrome-on .reader-status { opacity: 0; }

/* 正文：贴到遮罩下面，上下留白按起点收 */
.reader-scroll {
  padding-top: calc(var(--safe-top) + 42px);
  padding-bottom: calc(var(--safe-bottom) + 34px);
}
#reader.chrome-on .reader-scroll {
  padding-top: calc(var(--safe-top) + 58px);
  padding-bottom: calc(var(--safe-bottom) + 78px);
}

/* 搜索结果的「加载更多」 */
.more-btn {
  display: block;
  width: 100%;
  margin: 16px 0 26px;
  padding: 12px 0;
  font-size: 13px;
  color: var(--fg);
}
.more-btn:disabled { opacity: 0.5; }

/* 顶栏的「目录」文字按钮 */
#chrome .ghost-text {
  background: transparent;
  border: none;
  color: color-mix(in srgb, var(--read-fg) 62%, transparent);
  font-size: 13px;
  font-family: inherit;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: 8px;
}
#chrome .ghost-text:active {
  background: color-mix(in srgb, var(--read-fg) 10%, transparent);
}

/* 底部状态行本身也能点：点它调出控制条 */
#reader .reader-status {
  pointer-events: auto;
  cursor: pointer;
}

/* ===================================================================
   v21：顶栏/底栏改成「不透明纸色 + 22px 渐隐」
   —— 之前是半透明渐变，正文会透上来跟按钮打架。
   =================================================================== */

#chrome .chrome-top {
  background: linear-gradient(to bottom,
      var(--read-bg) 0%,
      var(--read-bg) calc(100% - 22px),
      transparent 100%);
  padding-bottom: 22px;
}

#chrome .chrome-bottom {
  background: linear-gradient(to top,
      var(--read-bg) 0%,
      var(--read-bg) calc(100% - 22px),
      transparent 100%);
  padding-top: 22px;
}

/* 底部别再空一大截：状态行往下贴，正文留白收窄 */
#reader .reader-status {
  bottom: calc(var(--safe-bottom) + 2px);
}
.reader-scroll {
  padding-bottom: calc(var(--safe-bottom) + 24px) !important;
}
#reader.chrome-on .reader-scroll {
  padding-bottom: calc(var(--safe-bottom) + 66px) !important;
}

/* v22：弹层底部那块白是给 iPhone 小黑条让的位，压到最小 */
.sheet-card {
  padding-bottom: calc(var(--safe-bottom) + 4px);
}
.sheet-card > *:last-child { margin-bottom: 0; }

/* 目录列表最后一条别再多留距离 */
#toc-list { padding-bottom: 2px; }
.toc-item:last-child { border-bottom: none; }

/* ===================================================================
   v23：按钮全部换成「无框玻璃」—— 有底色、有边、有高光、按下有回弹
   =================================================================== */

/* —— 阅读页顶栏/底栏的按钮：玻璃片 —— */
#chrome .round-btn.ghost,
#chrome .ghost-text {
  background: color-mix(in srgb, var(--read-fg) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--read-fg) 10%, transparent);
  border-radius: 11px;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--read-fg) 5%, transparent),
              inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent);
  transition: transform 0.16s var(--ease-spring), background 0.14s ease, border-color 0.14s ease;
}
#chrome .round-btn.ghost:active,
#chrome .ghost-text:active {
  transform: scale(0.92);
  background: color-mix(in srgb, var(--read-fg) 18%, transparent);
  border-color: color-mix(in srgb, var(--read-fg) 18%, transparent);
}

/* 底栏的上一章/下一章按钮同样 */
#chrome .nav-btn {
  background: color-mix(in srgb, var(--read-fg) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--read-fg) 9%, transparent);
  border-radius: 10px;
  width: 34px;
  height: 30px;
  transition: transform 0.16s var(--ease-spring), background 0.14s ease;
}
#chrome .nav-btn:active {
  transform: scale(0.92);
  background: color-mix(in srgb, var(--read-fg) 18%, transparent);
}

/* —— 全局：所有可点的东西按下都要有回弹 —— */
.round-btn,
.chip,
.filter-chip,
.tag-chip,
.ghost-btn,
.primary-btn,
.search-go,
.tag,
.tab,
.toc-item,
.chapter-row,
.site-card,
.list-row,
.grid-book,
.book,
.cc-card {
  transition: transform 0.16s var(--ease-spring),
              background 0.14s ease,
              border-color 0.14s ease,
              box-shadow 0.14s ease,
              filter 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}

.round-btn:active,
.chip:active,
.filter-chip:active,
.tag-chip:active,
.ghost-btn:active,
.search-go:active,
.tab:active { transform: scale(0.93); }

.primary-btn:active { transform: scale(0.96); filter: brightness(0.9); }

.list-row:active,
.chapter-row:active,
.toc-item:active {
  transform: scale(0.985);
  background: rgba(255, 255, 255, 0.06);
}
:root[data-theme="light"] .list-row:active,
:root[data-theme="light"] .chapter-row:active,
:root[data-theme="light"] .toc-item:active { background: rgba(0, 0, 0, 0.05); }

.site-card:active,
.book:active,
.grid-book:active,
.cc-card:active { transform: scale(0.96); }

.tag:active { transform: scale(0.94); }

/* ===================================================================
   v24：全 App 统一「无框玻璃」按钮 —— 底色、描边、高光、按下回弹
   =================================================================== */

:root {
  --glass-bg: rgba(255, 255, 255, 0.085);
  --glass-bg-strong: rgba(255, 255, 255, 0.14);
  --glass-line: rgba(255, 255, 255, 0.14);
  --glass-hi: rgba(255, 255, 255, 0.20);
  --glass-shadow: rgba(0, 0, 0, 0.28);
}

:root[data-theme="light"] {
  --glass-bg: rgba(0, 0, 0, 0.045);
  --glass-bg-strong: rgba(0, 0, 0, 0.085);
  --glass-line: rgba(0, 0, 0, 0.085);
  --glass-hi: rgba(255, 255, 255, 0.75);
  --glass-shadow: rgba(0, 0, 0, 0.10);
}

/* 所有圆形/文字按钮统一成玻璃片 */
.round-btn,
.ghost-btn,
.close-btn,
.search-go,
.chip,
.filter-chip,
.tag-chip,
.site-search .search-go {
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

.round-btn:active,
.ghost-btn:active,
.close-btn:active,
.search-go:active,
.chip:active,
.filter-chip:active,
.tag-chip:active {
  background: var(--glass-bg-strong);
  border-color: var(--glass-line);
  transform: scale(0.93);
}

/* 底部 Tab：整块是个可点的胶囊，按下有明显底 */
.tabbar .tab {
  border-radius: 12px;
  padding: 4px 10px;
  transition: transform 0.16s var(--ease-spring), background 0.14s ease;
}
.tabbar .tab:active {
  background: var(--glass-bg-strong);
  transform: scale(0.92);
}

/* div 类可点元素（iOS 上 :active 不生效，用 JS 加的 .is-press） */
.is-press {
  transform: scale(0.985);
  background: var(--glass-bg-strong) !important;
}
.grid-book.is-press,
.book.is-press,
.site-card.is-press,
.cc-card.is-press {
  transform: scale(0.955);
  background: transparent !important;
}

/* v25：按钮的「正在处理」状态 —— 点了有没有生效，一眼看得见 */
.ghost-btn.is-busy,
.primary-btn.is-busy,
.round-btn.is-busy {
  opacity: 1;
  animation: busyPulse 0.9s ease-in-out infinite;
  cursor: progress;
}
.ghost-btn.is-busy:active,
.primary-btn.is-busy:active { transform: none; }

@keyframes busyPulse {
  0%   { opacity: 1; background: var(--glass-bg-strong); }
  50%  { opacity: 0.6; background: var(--glass-bg); }
  100% { opacity: 1; background: var(--glass-bg-strong); }
}

/* ===================================================================
   打开书本的展开动画：点哪张封面，它就从哪放大铺满全屏
   =================================================================== */

.book-open-overlay {
  position: fixed;
  z-index: 98;
  border-radius: 14px;
  overflow: hidden;
  background: var(--read-bg, #faf8f3);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  transition: all 0.34s cubic-bezier(0.32, 0.72, 0.25, 1), opacity 0.2s ease;
  will-change: transform, top, left, width, height;
}

.book-open-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-open-overlay.full {
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0;
}

/* ===================================================================
   v28：阅读页内容一直铺到屏幕最底边（Home 指示条浮在文字上）
   —— 底部那一截不再空着，文字可以一直滚到底，实现「无缝」
   =================================================================== */

.reader-scroll {
  padding-bottom: 14px !important;
}

#reader.chrome-on .reader-scroll {
  padding-bottom: 70px !important;
}

#reader .reader-status {
  bottom: 6px;
}

#chrome .chrome-bottom {
  bottom: 0;
  padding: 34px 20px 12px;
}

/* 目录弹层同样铺满底部 */
.sheet-card {
  padding-bottom: 10px !important;
}

/* v29：标签展开改成「面板内滚动」，不再把书目顶出屏幕 */
#filter-tags.expanded {
  max-height: 196px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
#filter-tags.expanded::-webkit-scrollbar { width: 3px; }
#filter-tags.expanded::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}
:root[data-theme="light"] #filter-tags.expanded::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
}

/* ===================================================================
   v30：底部那行时间/进度整个不要了；正文直接滚到屏幕最底边
   =================================================================== */

#reader .reader-status {
  display: none !important;
}

.reader-scroll {
  padding-bottom: 6px !important;
}

#reader.chrome-on .reader-scroll {
  padding-bottom: 66px !important;
}

/* ===================================================================
   v33：根治「底部一截」——用动态视口高度 100dvh 撑满整屏
   iOS 上 100% / 100vh 在 standalone 模式可能不含 Home 指示条区域，
   100dvh = 当前真实可用的整屏高度（iOS 16.4+，你 iOS 26 没问题）。
   =================================================================== */

html, body {
  height: 100%;
  height: 100dvh;
}

.screen {
  height: 100dvh;
}

#reader {
  height: 100dvh;
  min-height: 100dvh;
}

.sheet {
  height: 100dvh;
}

#reader .reader-scroll {
  height: 100dvh;
}

/* 正文容器：滚到底就是屏幕底 */
.reader-scroll {
  padding-bottom: 8px !important;
}

/* v35：滑书目时标签行整个收起 */
#filter-tags.folded { display: none; }
.filter-chip.toggle-tags {
  border-style: dashed;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ===================================================================
   v36：容器高度改用 JS 实测值（--app-height），不再信 iOS 的视口单位
   你手机底部那条约两行字（34px = Home 指示条）的空隙，就是 100vh/100dvh
   在 standalone 下少算的那一段 —— 现在直接拿 screen.height 撑满。
   =================================================================== */

html, body {
  height: var(--app-height, 100dvh);
}

.screen,
.sheet {
  height: var(--app-height, 100dvh);
}

#reader,
#reader .reader-scroll {
  height: var(--app-height, 100dvh);
}

/* ===================================================================
   v37：书架的书改成 3D 立体书 —— 书脊、书页、透视倾斜
   =================================================================== */

.cover-wrap {
  position: relative;
  transform: perspective(560px) rotateY(-13deg);
  transform-origin: left center;
  border-radius: 3px 9px 9px 3px;
  box-shadow:
    -5px 7px 14px -7px rgba(0, 0, 0, 0.55),
    8px 12px 20px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.24s var(--ease-spring), box-shadow 0.2s ease;
}

/* 书脊：左侧一条压出来的深色背 */
.cover-wrap::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(to right,
      rgba(0, 0, 0, 0.62),
      rgba(255, 255, 255, 0.18) 55%,
      rgba(0, 0, 0, 0.38));
  pointer-events: none;
}

/* 书页：右侧一叠纸的切面 */
.cover-wrap::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 1px;
  bottom: 1px;
  width: 5px;
  border: none;
  border-radius: 0 2px 2px 0;
  background: repeating-linear-gradient(to bottom,
      #f8f6f0 0 2px,
      #e9e5da 2px 3px);
  box-shadow: -1px 0 2px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

/* 按下：书稍微立正一点，像被拿起来 */
.book:active .cover-wrap,
.book.is-press .cover-wrap {
  transform: perspective(560px) rotateY(-5deg);
}

/* 浅色主题同样生效 */
:root[data-theme="light"] .cover-wrap {
  box-shadow:
    -5px 7px 14px -8px rgba(0, 0, 0, 0.4),
    8px 12px 20px -10px rgba(0, 0, 0, 0.28);
}

/* ===================================================================
   点开动画：从「斜着的书」立正、放大、翻开铺满
   =================================================================== */

.book-open-overlay {
  transform: perspective(900px) rotateY(-14deg);
  transform-origin: left center;
  border-radius: 3px 9px 9px 3px;
}

.book-open-overlay.full {
  transform: perspective(900px) rotateY(0deg);
  border-radius: 0;
}

.overlay-spine {
  position: absolute;
  left: -9px;
  top: 0;
  bottom: 0;
  width: 9px;
  background: linear-gradient(to right,
      rgba(0, 0, 0, 0.6),
      rgba(255, 255, 255, 0.16) 55%,
      rgba(0, 0, 0, 0.35));
}

.overlay-pages {
  position: absolute;
  right: -6px;
  top: 2px;
  bottom: 2px;
  width: 7px;
  background: repeating-linear-gradient(to bottom, #f8f6f0 0 2px, #e9e5da 2px 3px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.book-open-overlay.full .overlay-pages {
  opacity: 0.35;
}

/* ===================================================================
   v38：滑书目 → 大标签+小标签+排序 全部收起来，整屏都是书
   =================================================================== */

.filter-minibar {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 22px 6px;
  font-size: 11.5px;
  color: var(--fg-dim);
  letter-spacing: 0.01em;
}
.minibar-caret { opacity: 0.6; font-size: 9px; }

.filter-panel.minimized {
  padding: 2px 0 6px;
}
.filter-panel.minimized .filter-minibar { display: flex; }
.filter-panel.minimized #filter-cats,
.filter-panel.minimized #filter-tags,
.filter-panel.minimized #filter-sorts { display: none; }

/* ===================================================================
   v39：把「一件事占满一块屏」贯彻到底
   —— 找书：站点页下滑时，站名头、搜索框、分段、筛选全藏，只剩书
   —— 阅读：顶部留白再压，文字占更多
   =================================================================== */

#site .site-header,
#site .site-search,
#site .seg {
  transition: transform 0.26s var(--ease-spring), opacity 0.18s ease,
              max-height 0.26s var(--ease-spring), margin 0.26s var(--ease-spring);
  overflow: hidden;
}

#site.immersed .site-header {
  transform: translateY(-130%);
  opacity: 0;
  max-height: 0;
  margin: 0;
}
#site.immersed .site-search {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}
#site.immersed .seg {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* 阅读页：顶部再压 6px，文字更多 */
.reader-scroll {
  padding-top: calc(var(--safe-top) + 38px) !important;
}
#reader.chrome-on .reader-scroll {
  padding-top: calc(var(--safe-top) + 56px) !important;
}

/* ===================================================================
   v40：书架编辑模式（iOS 删 App 那套）—— 红圈 −，书微微摇
   =================================================================== */

.edit-btn {
  font-size: 12px;
  font-weight: 600;
  width: auto !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 17px !important;
}
.edit-btn.on {
  background: var(--glass-bg-strong);
  border-color: var(--accent);
  color: var(--accent);
}

.book { position: relative; }

.book.editing {
  animation: shelfWiggle 2.4s ease-in-out infinite;
}

@keyframes shelfWiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-1.1deg); }
  40% { transform: rotate(0.8deg); }
  60% { transform: rotate(-0.6deg); }
  80% { transform: rotate(0.4deg); }
}

.del-badge {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ff453a;
  color: #fff;
  font-size: 17px;
  line-height: 1;
  border: 2px solid var(--bg-0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(255, 69, 58, 0.4);
}

/* ===================================================================
   v41：点开书 = 真正的「书张开」
   封面绕书脊翻开（rotateY 0 → -178°），露出纸色内页，再放大铺满
   =================================================================== */

.book-open-overlay {
  position: fixed;
  z-index: 98;
  pointer-events: none;
  transform: perspective(900px) rotateY(-14deg);
  transform-style: preserve-3d;
  perspective: 1100px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  border-radius: 0;
  /* 尺寸放大用「先慢后快」曲线：前 1/3 时间里书基本不动，掀皮先被看到 */
  transition:
    transform 0.32s cubic-bezier(0.32, 0.72, 0.25, 1),
    left 0.55s cubic-bezier(0.25, 0.9, 0.3, 1),
    top 0.55s cubic-bezier(0.25, 0.9, 0.3, 1),
    width 0.55s cubic-bezier(0.25, 0.9, 0.3, 1),
    height 0.55s cubic-bezier(0.25, 0.9, 0.3, 1),
    opacity 0.2s ease;
  will-change: transform, top, left, width, height;
}

.book-open-overlay.full {
  transform: perspective(900px) rotateY(0deg);
}

/* 内页：纸色，一开始藏在封面后面 */
.overlay-inner {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  transform: rotateY(180deg);
  transform-origin: left center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--read-bg, #faf8f3);
  border-radius: 4px 10px 10px 4px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0.25, 1);
}

/* 内页左侧一条书脊阴影 */
.overlay-inner::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 14px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.16), transparent);
}

/* 封面（书皮）：绕左缘翻开 */
.overlay-front {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  transform: rotateY(0deg);
  transform-origin: left center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #2a2433;
  border-radius: 4px 10px 10px 4px;
  overflow: hidden;
  box-shadow: 8px 14px 30px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.42s cubic-bezier(0.4, 0.1, 0.2, 1);
}

.overlay-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 翻开状态：封面转到左侧消失，内页转正露出 */
.book-open-overlay.opened .overlay-front {
  transform: rotateY(-178deg);
  box-shadow: 2px 0 14px rgba(0, 0, 0, 0.25);
}
.book-open-overlay.opened .overlay-inner {
  transform: rotateY(0deg);
}


/* ===================================================================
   v43：搜索框重做 —— 只有一个框（图标和按钮都嵌在框内），
   干掉「容器套输入框」的双框感
   =================================================================== */

.search-wrap,
.site-search {
  position: relative;
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0;
}

.search-wrap > svg,
.site-search > svg {
  position: absolute;
  left: 14px;
  z-index: 1;
  pointer-events: none;
  color: var(--fg-dim);
  opacity: 0.8;
}

.search-wrap input,
.site-search input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 42px;
  padding: 0 14px 0 40px;
  border-radius: 13px;
  border: 1px solid var(--glass-line);
  background: var(--glass-bg);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  color: var(--fg);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.search-wrap input:focus,
.site-search input:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--glass-bg-strong);
}

/* 干掉 iOS 给 search 输入框强加的圆角/内阴影/清除钮样式 */
.search-wrap input::-webkit-search-decoration,
.search-wrap input::-webkit-search-cancel-button,
.site-search input::-webkit-search-decoration,
.site-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* 站点搜索框里的「搜索」按钮：嵌在框右侧 */
.site-search input {
  padding-right: 66px;
}
.site-search .search-go {
  position: absolute;
  right: 6px;
  top: 6px;
  bottom: 6px;
  height: 30px;
  width: auto;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: none;
}

/* ===================================================================
   v44：书架右上角四个按钮统一为圆钮（图标），激活态用主题色高亮
   =================================================================== */

#btn-edit.on {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}

/* 统一所有 .round-btn 的几何：一样大、一样圆、图标一样粗细 */
.lib-header .round-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

/* ===================================================================
   v45：去掉打开书后的空屏感
   —— 文字在封面底下先淡入（0.28s、起点 15% 透明度），不再从纯白开始
   —— 抓正文时 loading 用纸色铺底，绝不整屏白
   =================================================================== */

#reader.active { animation: readerIn 0.28s var(--ease-out); }

@keyframes readerIn {
  from { opacity: 0.15; }
  to { opacity: 1; }
}

.loading {
  background: var(--read-bg, #faf8f3);
}

/* ===================================================================
   v46：每章开头写章节名（第X章 + 章名，起点式居中排法）
   =================================================================== */

.chapter-head {
  text-align: center;
  margin: 6px 0 28px;
}

.ch-num {
  font-size: 13px;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--read-fg) 46%, transparent);
  margin: 0 0 8px;
}

.ch-name {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--read-fg);
  margin: 0;
  letter-spacing: 0.02em;
}

.ch-name.only {
  font-size: 20px;
  font-weight: 500;
}

/* ===================================================================
   v47：知道自己在看第几章
   —— 目录里当前章：主题色 + 左侧圆点 + 打开自动定位
   =================================================================== */

.toc-item.current span:first-child {
  color: var(--accent);
  font-weight: 600;
}

.toc-item.current .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ===================================================================
   v48：每章标题绝对居中 + 全书下载按钮
   =================================================================== */

.chapter-head {
  text-align: center !important;
  display: block;
}
.chapter-head .ch-num,
.chapter-head .ch-name {
  text-indent: 0 !important;
  text-align: center !important;
}

.toc-head-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-download {
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 999px;
}
.btn-download:disabled { opacity: 0.7; }