/* 阅读器的常驻五键 Dock 与悬浮菜单：正文不使用模糊材质。 */
.reader {
  --glass-bg: rgba(250, 249, 246, .82);
  --glass-bg-strong: rgba(249, 248, 244, .76);
  --glass-pill: rgba(255, 255, 255, .18);
  --glass-sheen: rgba(249, 248, 244, .24);
  --glass-edge: rgba(255, 255, 255, .67);
  --glass-ink: #252725;
  --glass-muted: #68716b;
  --glass-track: rgba(75, 81, 76, .21);
  --glass-track-active: #61776b;
  --glass-accent: #356b56;
  --glass-shadow: rgba(32, 46, 37, .18);
}
.reader.theme-white {
  --glass-bg: rgba(250, 251, 253, .82);
  --glass-bg-strong: rgba(249, 251, 253, .78);
  --glass-accent: #176ac0;
  --glass-track-active: #6d92bd;
}
.reader.theme-green {
  --glass-bg: rgba(213, 240, 216, .80);
  --glass-bg-strong: rgba(209, 239, 213, .76);
  --glass-pill: rgba(244, 255, 245, .16);
  --glass-sheen: rgba(209, 239, 213, .24);
  --glass-edge: rgba(249, 255, 248, .66);
  --glass-ink: #263e2b;
  --glass-muted: #607867;
  --glass-track: rgba(54, 105, 64, .22);
  --glass-track-active: #419453;
  --glass-accent: #198337;
  --glass-shadow: rgba(31, 83, 39, .13);
}
.reader.theme-night {
  --glass-bg: rgba(20, 22, 29, .84);
  --glass-bg-strong: rgba(22, 24, 31, .80);
  --glass-pill: rgba(245, 247, 255, .075);
  --glass-sheen: rgba(12, 14, 20, .34);
  --glass-edge: rgba(244, 247, 255, .19);
  --glass-ink: #f0f1f4;
  --glass-muted: #a3a7b2;
  --glass-track: rgba(226, 230, 239, .23);
  --glass-track-active: #64aaf7;
  --glass-accent: #60aaff;
  --glass-shadow: rgba(0, 0, 0, .48);
}

/* 菜单打开时 Dock 在遮罩之上；抽屉底部与 Dock 顶部始终留有可见间隙。 */
.reader .drawer-scrim { z-index: 4; background: rgba(16, 21, 22, .20); }
.reader.theme-night .drawer-scrim { background: rgba(0, 0, 0, .28); }
.reader .reader-header {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--paper) 97%, transparent),
    color-mix(in srgb, var(--paper) 78%, transparent) 70%,
    transparent);
}
.reader .reader-header .reader-heading,
.reader .reader-header[data-liquid-glass="webgl"] .reader-heading,
.reader.theme-night .reader-header[data-liquid-glass="webgl"] .reader-heading {
  color: var(--glass-ink);
  border-color: var(--glass-edge);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(26px) saturate(120%);
  backdrop-filter: blur(26px) saturate(120%);
}
.reader .reader-header .reader-heading strong { color: var(--glass-ink); font-size: 13px; letter-spacing: 0; }
.reader .reader-header .reader-heading span { color: var(--glass-muted); font-size: 12px; }
.reader .reader-footer,
.reader .reader-footer[data-liquid-glass] {
  z-index: 8;
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  padding: 6px 8px;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  color: var(--glass-ink);
  background: var(--glass-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 9px 28px var(--glass-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}
.reader .reader-footer[data-liquid-glass="webgl"],
.reader .reader-footer[data-liquid-glass="fallback"],
.reader.theme-night .reader-footer[data-liquid-glass="webgl"] {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(19px) saturate(135%);
  backdrop-filter: blur(19px) saturate(135%);
}
.reader .reader-footer > canvas[data-liquid-glass-layer] { opacity: .12; }
.reader .reader-footer .reader-actions {
  margin: 0;
  border: 0;
  gap: 2px;
}
.reader .reader-footer .reader-actions button {
  min-width: 44px;
  min-height: 48px;
  padding: 6px 2px;
  color: var(--glass-muted);
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.reader .reader-footer .reader-actions button[aria-pressed="true"] {
  color: var(--glass-accent);
  background: color-mix(in srgb, var(--glass-accent) 11%, transparent);
}
.reader .reader-footer .reader-actions button:active { transform: scale(.91); }
.reader .reader-actions .action-type {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 29px;
  font-weight: 400;
  line-height: 25px;
}

.reader .reader-drawer,
.reader.theme-night .reader-drawer,
.reader .reader-drawer[data-liquid-glass] {
  z-index: 6;
  left: 12px;
  right: 12px;
  bottom: calc(80px + env(safe-area-inset-bottom) + var(--keyboard-inset, 0px));
  max-height: min(68dvh, calc(100dvh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--keyboard-inset, 0px)));
  padding: 18px 18px 20px;
  border: 1px solid var(--glass-edge);
  border-radius: 26px;
  color: var(--glass-ink);
  background: var(--glass-bg-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 14px 42px var(--glass-shadow);
  -webkit-backdrop-filter: blur(30px) saturate(145%);
  backdrop-filter: blur(30px) saturate(145%);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.reader .reader-drawer[data-liquid-glass="webgl"],
.reader .reader-drawer[data-liquid-glass="fallback"],
.reader.theme-night .reader-drawer[data-liquid-glass="webgl"] {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
}
.reader .reader-drawer[data-liquid-glass="webgl"]::before,
.reader.theme-night .reader-drawer[data-liquid-glass="webgl"]::before {
  background: var(--glass-sheen);
}
.reader .reader-drawer[data-liquid-glass="webgl"] > canvas[data-liquid-glass-layer],
.reader.theme-night .reader-drawer[data-liquid-glass="webgl"] > canvas[data-liquid-glass-layer] { opacity: .25; }
.reader .reader-drawer[data-panel="toc"],
.reader .reader-drawer[data-panel="notes"] {
  max-height: min(76dvh, calc(100dvh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--keyboard-inset, 0px)));
}
.reader .reader-drawer[data-panel="toc"] { padding-bottom: 14px; }
.reader .reader-drawer .drawer-title,
.reader .reader-drawer .stat strong { color: var(--glass-ink); }
.reader .reader-drawer .drawer-close,
.reader .reader-drawer .setting-label,
.reader .reader-drawer .setting-hint,
.reader .reader-drawer .panel-note,
.reader .reader-drawer .stat span { color: var(--glass-muted); }
.reader .reader-drawer .drawer-title-row { margin-bottom: 12px; }

/* 面板的文字层级与正文分离：说明文字仍清晰，滑块与三枚排版按钮更易辨认。 */
.reader .reader-drawer .drawer-title {
  font-size: 18px;
  line-height: 1.34;
  font-weight: 650;
  letter-spacing: -.015em;
}
.reader .reader-drawer .setting-label {
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
}
.reader .reader-drawer .setting-hint,
.reader .reader-drawer .panel-note {
  font-size: 12.5px;
  line-height: 1.55;
}
.reader .reader-drawer .setting-range-row,
.reader .reader-drawer .panel-progress-row {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.reader .reader-drawer .setting-value { font-size: 12px; font-weight: 650; }
.reader .reader-drawer .layout-choice-row {
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  margin-top: 18px;
  gap: 8px;
}
.reader .reader-drawer .layout-pill {
  min-height: 48px;
  padding: 8px 6px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
}
.reader .reader-drawer .layout-choice-row .layout-pill:first-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
}
.reader .reader-drawer .reader-font-option {
  font-size: 12px;
  line-height: 1.35;
  font-weight: 550;
}

/* 调节滑块使用薄透材质；保留对比度，不在正文上叠整块灰色。 */
.reader .reader-drawer .setting-range-row,
.reader .reader-drawer[data-liquid-glass] .setting-range-row,
.reader .reader-drawer .panel-progress-row {
  min-height: 48px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  color: var(--glass-muted);
  background: var(--glass-pill);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-edge) 70%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
}
.reader .reader-drawer .setting-value { color: var(--glass-ink); }
.reader .reader-drawer .setting-range::-webkit-slider-runnable-track,
.reader .reader-drawer .setting-range::-moz-range-track {
  background: linear-gradient(to right, var(--glass-track-active) 0 var(--range-progress, 0%), var(--glass-track) var(--range-progress, 0%) 100%);
}
.reader .reader-drawer .setting-range::-webkit-slider-thumb,
.reader .reader-drawer .setting-range::-moz-range-thumb {
  border-color: var(--glass-edge);
  background: color-mix(in srgb, var(--glass-bg-strong) 30%, #fff);
}
.reader.theme-night .reader-drawer .setting-range::-webkit-slider-thumb,
.reader.theme-night .reader-drawer .setting-range::-moz-range-thumb { background: #c7c9d0; }
.reader .reader-drawer .setting-range-row:focus-within,
.reader .reader-drawer .panel-progress-row:focus-within { outline: 2px solid var(--glass-accent); outline-offset: 2px; }
.reader .reader-drawer .panel-progress-row {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 54px;
  margin: 2px 0 24px;
  padding: 4px 6px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.reader .reader-drawer .panel-progress-row .progress-arrow {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--glass-ink);
}
.reader .reader-drawer .panel-progress-row #progress-label { min-width: 30px; text-align: center; }
.reader .reader-drawer .panel-progress-row #chapter-position { min-width: 41px; text-align: center; }
.reader .reader-drawer .panel-progress-row input {
  flex: 1;
  min-width: 0;
  height: 32px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.reader .reader-drawer .panel-progress-row input::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: var(--glass-track); }
.reader .reader-drawer .panel-progress-row input::-moz-range-track { height: 5px; border-radius: 999px; background: var(--glass-track); }
.reader .reader-drawer .panel-progress-row input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -11.5px;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: var(--glass-track-active);
  box-shadow: 0 2px 8px var(--glass-shadow);
}
.reader .reader-drawer .panel-progress-row input::-moz-range-thumb { width: 28px; height: 28px; border: 1px solid var(--glass-edge); border-radius: 50%; background: var(--glass-track-active); }
.reader .reader-drawer .panel-stats { margin: 0 0 13px; }
.reader .reader-drawer .stat { padding: 10px 3px; border-right-color: color-mix(in srgb, var(--glass-ink) 12%, transparent); }
.reader .reader-drawer .stat strong { font-size: clamp(17px, 5vw, 23px); white-space: nowrap; font-variant-numeric: tabular-nums; }
.reader .reader-drawer .panel-buttons { margin-top: 0; }
.reader .reader-drawer .panel-buttons button,
.reader .reader-drawer .layout-pill,
.reader .reader-drawer .panel-secondary,
.reader .reader-drawer .bookmark-panel-button {
  color: var(--glass-ink);
  border-color: var(--glass-edge);
  background: var(--glass-pill);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.reader .reader-drawer .layout-pill.selected,
.reader.theme-night .reader-drawer .layout-pill.selected,
.reader .reader-drawer .theme-swatch.selected,
.reader .reader-drawer .texture-swatch.selected,
.reader .reader-drawer .font-option.selected,
.reader .reader-drawer .toc-item.active { color: var(--glass-accent); border-color: var(--glass-accent); }
.reader .reader-drawer .panel-primary { background: var(--glass-accent); color: #fff; }
.reader .reader-drawer .note-quote { border-left-color: var(--glass-accent); }
.reader .reader-drawer .note-actions button { color: var(--glass-accent); }
.reader .reader-drawer .note-entry { border-color: var(--glass-edge); background: var(--glass-pill); }
.reader .reader-drawer .reader-font-option { color: var(--glass-ink); border-color: var(--glass-edge); background: var(--glass-pill); }
.reader .reader-drawer .reader-font-option.selected { color: var(--glass-accent); border-color: var(--glass-accent); background: color-mix(in srgb, var(--glass-accent) 12%, transparent); }
.reader .reader-drawer .reader-font-hint { color: var(--glass-muted); }
.reader.theme-night .reader-drawer .note-entry p,
.reader.theme-night .reader-drawer .note-editor { color: var(--glass-ink); }
.reader.theme-night .reader-drawer .note-editor { background: rgba(255,255,255,.07); border-color: var(--glass-edge); }

@media (max-width: 359px) {
  .reader .reader-drawer { left: 8px; right: 8px; padding-inline: 14px; }
  .reader .reader-drawer .panel-progress-row { gap: 3px; font-size: 12px; }
  .reader .reader-drawer .panel-progress-row .progress-arrow { min-width: 34px; width: 34px; }
  .reader .reader-drawer .layout-choice-row .layout-pill {
    padding-inline: 3px;
    white-space: nowrap;
    font-size: 12px;
  }
}
@media (min-width: 360px) {
  .reader .reader-drawer .layout-dual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .reader .reader-drawer .layout-range-cell .setting-range-row { gap: 4px; padding-inline: 7px; }
  .reader .reader-drawer .layout-range-cell .setting-value { min-width: 0; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  .reader .reader-footer,
  .reader .reader-drawer,
  .reader .reader-drawer .setting-range-row { background: var(--chrome); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reader .reader-footer .reader-actions button { transition: none; }
}