/* =========================================================================
   喵漫 · 设计系统
   移动端优先（基准 390×844），桌面居中限宽成"手机壳"。
   深色为主力场景（漫画站），默认跟随系统，可手动切换。
   ========================================================================= */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 深色（默认） */
  --bg:            #0b0d12;
  --bg-elev:       #10131a;
  --surface:       #171b24;
  --surface-2:     #1f2531;
  --surface-3:     #2a313f;
  --border:        rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .16);
  --text:          #eef1f7;
  --text-2:        #a3abbb;
  --text-3:        #6b7484;
  --accent:        #ff5d73;
  --accent-press:  #e94a61;
  --accent-soft:   rgba(255, 93, 115, .14);
  --accent-2:      #7b8cff;
  --accent-2-soft: rgba(123, 140, 255, .16);
  --ok:            #35c98a;
  --warn:          #ffb454;
  --danger:        #ff5c5c;
  --shadow:        0 10px 30px rgba(0, 0, 0, .45);
  --shadow-sm:     0 4px 14px rgba(0, 0, 0, .32);
  --skeleton:      #1c222d;
  --skeleton-hi:   #262d3a;

  /* 尺寸 / 节奏 */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-full: 999px;
  --gap: 12px;
  --pad: 16px;
  --tab-h: 58px;

  /* 安全区 */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* 动效 */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --dur: .24s;

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

[data-theme="light"] {
  --bg:            #f6f7fa;
  --bg-elev:       #ffffff;
  --surface:       #ffffff;
  --surface-2:     #eef0f5;
  --surface-3:     #e2e6ee;
  --border:        rgba(18, 22, 28, .09);
  --border-strong: rgba(18, 22, 28, .16);
  --text:          #14171f;
  --text-2:        #5a6273;
  --text-3:        #8b93a3;
  --accent:        #f1405c;
  --accent-press:  #d83350;
  --accent-soft:   rgba(241, 64, 92, .12);
  --accent-2:      #5a6cf0;
  --accent-2-soft: rgba(90, 108, 240, .12);
  --shadow:        0 10px 30px rgba(20, 24, 34, .14);
  --shadow-sm:     0 4px 14px rgba(20, 24, 34, .10);
  --skeleton:      #e9ecf2;
  --skeleton-hi:   #f3f5f9;
}

/* ---------- 2. 复位 ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* 必须放在最前：避免组件自身的 display 覆盖 hidden 属性 */
[hidden] { display: none !important; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  font-family: var(--font);
  background: #05070b;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 仿原生：禁选中、禁高亮 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
[data-theme="light"] body { background: #dfe3ea; }

img { display: block; max-width: 100%; -webkit-user-drag: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  outline: none;
}
button { cursor: pointer; }
input, textarea { user-select: text; -webkit-user-select: text; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent-soft); }

/* 通用图标 */
.ic {
  width: 22px;
  height: 22px;
  flex: none;
  display: block;
  pointer-events: none;
}

/* 滚动条（桌面观感） */
.scroll { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.scroll::-webkit-scrollbar { width: 6px; }
.scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

/* ---------- 3. 应用外壳（手机壳） ---------- */
.app {
  position: fixed;
  inset: 0;
  margin: 0 auto;
  max-width: 560px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
  z-index: 1;
}
@media (min-width: 561px) {
  .app {
    box-shadow: 0 0 0 1px var(--border), 0 24px 80px rgba(0, 0, 0, .55);
    border-radius: 0;
  }
}
.viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* 顶部安全区占位（内容区自行处理更灵活的 header） */
.safe-top { padding-top: var(--sat); }

/* ---------- 4. 底部 Tab ---------- */
.tabbar {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tab-h) + var(--sab));
  padding-bottom: var(--sab);
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid var(--border);
  transition: transform var(--dur) var(--ease);
}
.app[data-chrome="hidden"] .tabbar { transform: translateY(120%); }
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: color .18s var(--ease), transform .12s var(--ease);
  padding-top: 6px;
}
.tab .ic { width: 24px; height: 24px; }
.tab[aria-selected="true"] { color: var(--accent); }
.tab:active { transform: scale(.9); }
.tab[aria-selected="true"] .ic { filter: drop-shadow(0 3px 8px var(--accent-soft)); }

/* ---------- 5. 安装 / 离线条 ---------- */
.install-bar, .offline-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  padding-top: calc(9px + var(--sat));
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 13px;
  animation: slideDown .3s var(--ease);
}
.offline-bar {
  background: var(--surface-2);
  color: var(--text-2);
  padding-top: 9px;
  justify-content: center;
  font-size: 12.5px;
}
.install-bar .ic { width: 26px; height: 26px; }
.install-bar__text { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.install-bar__text b { font-size: 13.5px; }
.install-bar__text span { font-size: 11.5px; opacity: .85; }

@keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 6. 页面通用结构 ---------- */
.page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.page__body { flex: 1; min-height: 0; position: relative; }

/* 页面切换动画 */
.view-anim-enter { animation: pageIn .26s var(--ease); }
.view-anim-back  { animation: pageInBack .26s var(--ease); }
@keyframes pageIn { from { opacity: .4; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes pageInBack { from { opacity: .4; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

/* 顶部栏（非 sticky 场景） */
.appbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: calc(8px + var(--sat)) 12px 8px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  position: relative;
  z-index: 20;
}
.appbar--border { border-bottom: 1px solid var(--border); }
.appbar__title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.appbar__sub { font-size: 12px; color: var(--text-3); font-weight: 500; }

/* 品牌头（首页） */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(14px + var(--sat)) var(--pad) 10px;
}
.brand__logo {
  width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 17px;
  box-shadow: var(--shadow-sm);
}
.brand__name { font-size: 21px; font-weight: 900; letter-spacing: -.02em; }
.brand__name em { font-style: normal; color: var(--accent); }
.brand__spacer { flex: 1; }

/* ---------- 7. 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14.5px;
  font-weight: 700;
  transition: transform .1s var(--ease), background .16s var(--ease), opacity .16s;
  white-space: nowrap;
}
.btn:active { transform: scale(.96); }
.btn--accent { background: var(--accent); color: #fff; box-shadow: 0 6px 18px var(--accent-soft); }
.btn--accent:active { background: var(--accent-press); }
.btn--ghost { background: transparent; border: 1.5px solid var(--border-strong); }
.btn--block { width: 100%; }
.btn--sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: var(--r-sm); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.btn--loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.btn--ghost.btn--loading::after { border-color: var(--border-strong); border-top-color: var(--text); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  color: var(--text);
  transition: transform .1s var(--ease), background .16s var(--ease);
}
.icon-btn:active { transform: scale(.9); background: var(--surface-2); }
.icon-btn.is-busy .ic { animation: spin .7s linear infinite; }
.icon-btn--sm { width: 32px; height: 32px; }
.icon-btn--sm .ic { width: 18px; height: 18px; }

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

/* ---------- 8. 频道 tab / 分类 chips ---------- */
.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 var(--pad);
  background: var(--surface-2);
  border-radius: var(--r-full);
}
.seg__item {
  flex: 1;
  height: 36px;
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.seg__item[aria-selected="true"] {
  background: var(--bg);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px var(--pad);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  height: 32px;
  padding: 0 15px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: all .16s var(--ease);
}
.chip:active { transform: scale(.94); }
.chip[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---------- 9. 封面网格 + 卡片 ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px var(--gap);
  padding: 4px var(--pad) 24px;
}
/* 更宽屏（平板/桌面手机壳内仍是两列，保证封面够大） */

.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: cardIn .32s var(--ease) backwards;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.card__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--skeleton);
  box-shadow: var(--shadow-sm);
  transition: transform .16s var(--ease);
}
.card:active .card__cover { transform: scale(.97); }
.card__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.card__cover img.is-loaded { opacity: 1; }
.card__badge {
  position: absolute;
  top: 7px; left: 7px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.card__fav {
  position: absolute;
  top: 6px; right: 6px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.card__fav .ic { width: 17px; height: 17px; }
.card__fav.is-on { color: var(--accent); }
.card__title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__meta {
  font-size: 11.5px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -3px;
}
.card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.card__progress {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
}
.card__progress i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }

/* 封面占位/失败 */
.img-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--text-3);
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
}
.img-fallback .ic { width: 30px; height: 30px; opacity: .7; }

/* ---------- 10. 骨架屏 ---------- */
.sk {
  position: relative;
  overflow: hidden;
  background: var(--skeleton);
  border-radius: var(--r-md);
}
.sk::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--skeleton-hi), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.sk-card__cover { width: 100%; aspect-ratio: 3 / 4; }
.sk-line { height: 12px; border-radius: 6px; margin-top: 8px; }
.sk-line--60 { width: 60%; }

/* 页面加载 spinner */
.spinner {
  width: 26px; height: 26px; margin: 26px auto;
  border-radius: 50%;
  border: 2.5px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}

/* ---------- 11. 下拉刷新 ---------- */
.ptr {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  color: var(--text-3);
  font-size: 11.5px;
  pointer-events: none;
  z-index: 5;
  transform: translateY(-56px);
  transition: transform .22s var(--ease);
}
.ptr .ic { width: 20px; height: 20px; }
.ptr.is-spin .ic { animation: spin .7s linear infinite; }

/* ---------- 12. Toast ---------- */
.toast-layer {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--tab-h) + var(--sab) + 18px);
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  z-index: 200;
  pointer-events: none;
  padding: 0 20px;
}
.toast {
  max-width: 340px;
  padding: 11px 16px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-3) 92%, transparent);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: toastIn .3s var(--ease-spring);
  text-align: center;
  border: 1px solid var(--border);
}
.toast--err { background: var(--danger); color: #fff; border-color: transparent; }
.toast--ok { background: var(--ok); color: #06281c; border-color: transparent; }
.toast.is-out { animation: toastOut .24s var(--ease) forwards; }
/* 阅读器沉浸模式：toast 上移，避免遮挡工具条 */
body.reading .toast-layer { bottom: 32%; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(.96); } }

/* ---------- 13. 底部 Sheet ---------- */
.sheet-layer {
  position: fixed; inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, .5);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade .22s var(--ease);
}
.sheet-layer.is-out { animation: fadeOut .2s var(--ease) forwards; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }

.sheet {
  width: 100%;
  max-width: 560px;
  max-height: 82vh;
  display: flex; flex-direction: column;
  background: var(--bg-elev);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding-bottom: var(--sab);
  animation: sheetUp .3s var(--ease);
  overflow: hidden;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 10px auto 4px; flex: none; }
.sheet__head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.sheet__title { font-size: 16px; font-weight: 800; flex: 1; }
.sheet__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 12px; }

/* 列表行 */
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  font-size: 15px;
  transition: background .16s var(--ease);
}
.row:active { background: var(--surface-2); }
.row--btn { width: 100%; text-align: left; }
.row__label { flex: 1; font-weight: 600; }
.row__hint { font-size: 12.5px; color: var(--text-3); font-weight: 500; }
.row .ic { color: var(--text-3); }
.row__ic-wrap { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); flex: none; }
.row__ic-wrap .ic { width: 19px; height: 19px; }

/* ---------- 14. Dialog（登录引导等） ---------- */
.dialog-layer {
  position: fixed; inset: 0; z-index: 320;
  background: rgba(0, 0, 0, .55);
  display: grid; place-items: center;
  padding: 24px;
  animation: fade .2s var(--ease);
}
.dialog {
  width: 100%; max-width: 340px;
  background: var(--bg-elev);
  border-radius: var(--r-lg);
  padding: 22px 20px 16px;
  text-align: center;
  box-shadow: var(--shadow);
  animation: popIn .28s var(--ease-spring);
  border: 1px solid var(--border);
}
@keyframes popIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.dialog__ic { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.dialog__ic .ic { width: 26px; height: 26px; }
.dialog__title { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.dialog__text { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin-bottom: 18px; }
.dialog__actions { display: flex; gap: 10px; }
.dialog__actions .btn { flex: 1; }

/* ---------- 15. 空状态 ---------- */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 64px 32px;
  text-align: center;
  color: var(--text-3);
}
.empty .ic { width: 54px; height: 54px; opacity: .35; }
.empty__title { font-size: 15px; font-weight: 700; color: var(--text-2); }
.empty__text { font-size: 13px; line-height: 1.6; max-width: 260px; }
.empty .btn { margin-top: 10px; }

/* 列表到底提示 */
.the-end { text-align: center; font-size: 12px; color: var(--text-3); padding: 18px 0 26px; }

/* ---------- 16. 搜索页 ---------- */
.search-head {
  padding: calc(10px + var(--sat)) var(--pad) 8px;
  background: var(--bg);
  position: relative; z-index: 10;
}
.searchbox {
  display: flex; align-items: center; gap: 9px;
  height: 44px;
  padding: 0 6px 0 14px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1.5px solid transparent;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.searchbox:focus-within { border-color: var(--accent); background: var(--bg-elev); }
.searchbox .ic { color: var(--text-3); }
.searchbox input { flex: 1; height: 100%; font-size: 15px; background: none; }
.searchbox input::placeholder { color: var(--text-3); }
.searchbox__go {
  height: 34px; padding: 0 16px; border-radius: var(--r-full);
  background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 700;
}
.searchbox__go:active { transform: scale(.95); }

.section { padding: 8px 0 4px; }
.section__head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px var(--pad) 10px;
}
.section__title { font-size: 15px; font-weight: 800; }
.section__spacer { flex: 1; }
.section__action { font-size: 12.5px; color: var(--text-3); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.section__action .ic { width: 15px; height: 15px; }

.history-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--pad) 8px; }

/* 首页「继续阅读」横向卡片 */
.continue-wrap { padding: 0 var(--pad) 6px; }
.continue-card {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-align: left;
  transition: transform .12s var(--ease), background .15s var(--ease);
}
.continue-card:active { transform: scale(.985); background: var(--surface-3); }
.continue-card__cover {
  width: 46px; height: 62px; flex: none;
  border-radius: var(--r-sm); overflow: hidden;
  position: relative; background: var(--skeleton);
}
.continue-card__cover img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s var(--ease); }
.continue-card__cover img.is-loaded { opacity: 1; }
.continue-card__main { flex: 1; min-width: 0; }
.continue-card__title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.continue-card__meta { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.continue-card > .ic { color: var(--text-3); flex: none; }

/* ---------- 17. 详情页 ---------- */
.album-hero {
  position: relative;
  padding: calc(var(--sat) + 46px) var(--pad) 18px;
  overflow: hidden;
}
.album-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(34px) saturate(160%) brightness(.6);
  transform: scale(1.35);
  opacity: .5;
}
.album-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 30%, transparent), var(--bg) 90%);
}
.album-hero__inner { position: relative; display: flex; gap: 15px; }
.album-hero__cover {
  width: 118px; flex: none;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--skeleton);
}
.album-hero__cover img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s var(--ease); }
.album-hero__cover img.is-loaded { opacity: 1; }
.album-hero__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding-top: 2px; }
.album-hero__title { font-size: 18px; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.album-hero__author { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.album-hero__stats { display: flex; gap: 14px; margin-top: auto; }
.stat { display: flex; flex-direction: column; gap: 1px; }
.stat b { font-size: 15px; font-weight: 800; }
.stat span { font-size: 10.5px; color: var(--text-3); letter-spacing: .04em; }

.album-actions { display: flex; gap: 10px; padding: 0 var(--pad) 14px; }
.album-actions .btn { flex: 1; }

.tag-list { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 var(--pad) 14px; }
.tag {
  padding: 5px 11px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .15s var(--ease), transform .1s var(--ease);
}
.tag:active { transform: scale(.94); background: var(--surface-3); }

.album-desc { padding: 0 var(--pad) 16px; }
.album-desc__text { font-size: 13.5px; line-height: 1.65; color: var(--text-2); }
.album-desc__text.is-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.album-desc__more { font-size: 12.5px; color: var(--accent); font-weight: 700; margin-top: 6px; }

/* 详情页底部操作条 */
.album-cta {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--pad) calc(10px + var(--sab));
  background: color-mix(in srgb, var(--bg-elev) 90%, transparent);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid var(--border);
}
.album-cta .btn { flex: 1; }
.album-cta .icon-btn {
  width: 48px; height: 48px;
  border: 1.5px solid var(--border-strong);
  color: var(--text-2);
}
.album-cta .icon-btn.is-on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); }
.album-cta .icon-btn .ic { width: 24px; height: 24px; }
.album-body { padding-bottom: 12px; }

/* 章节列表 */
.chapter-list { padding: 0 var(--pad) 20px; display: flex; flex-direction: column; gap: 8px; }
/* 虚拟列表：行高固定 + 绝对定位由 JS 写 top（不能用 transform，
   否则会被 .chapter:active 的 scale 覆盖导致行跳走） */
.chapter--virt {
  position: absolute; left: var(--pad); right: var(--pad);
  height: 62px; padding: 0 15px;
}
.chapter {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: left;
  transition: transform .12s var(--ease), border-color .18s var(--ease);
}
.chapter:active { transform: scale(.985); }
.chapter.is-current { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--accent-soft); }
.chapter.is-read:not(.is-current) .chapter__name { color: var(--text-3); }
.chapter.is-read:not(.is-current) .chapter__idx { color: var(--text-3); }
.chapter__idx { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--text-2); }
.chapter.is-current .chapter__idx { background: var(--accent); color: #fff; }
.chapter__main { flex: 1; min-width: 0; }
.chapter__name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chapter__sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.chapter .ic { color: var(--text-3); }

/* 详情页悬浮返回 */
.float-back {
  position: absolute;
  top: calc(var(--sat) + 10px);
  left: 12px;
  z-index: 30;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .42);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .12s var(--ease);
}
.float-back:active { transform: scale(.9); }

/* ---------- 会话过期非阻塞提示（v1.4.0） ---------- */
.session-bar {
  position: absolute;
  top: calc(var(--sat) + 6px);
  left: 10px; right: 10px;
  z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px 9px 12px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  transform: translateY(-8px);
  opacity: 0;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.session-bar.is-in { transform: translateY(0); opacity: 1; }
.session-bar .ic { width: 20px; height: 20px; color: var(--accent); }
.session-bar__text { flex: 1; min-width: 0; line-height: 1.35; }
.session-bar__text b { display: block; font-size: 13px; font-weight: 800; }
.session-bar__text span { font-size: 11.5px; color: var(--text-3); }

/* ---------- 18. 阅读器（核心） ---------- */
/* 双页并排：仅在宽视口（≥640px）且 data-pages="2" 时生效。
   单页（手机竖屏）完全不受影响 —— 下面所有规则都以 [data-pages="2"] 为前缀。

   双页时阅读器要**脱离 560px 手机壳**铺满视口：否则宽屏上双页每张只有 280px，
   反而比单页更难看。position:fixed 能生效是因为 .app 没有 transform/filter，
   不构成 fixed 的包含块。 */
.reader[data-pages="2"] {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  width: 100vw;
}
.reader[data-pages="2"] .reader__scroll[data-mode="horizontal"] { scroll-snap-type: none; }
.reader[data-pages="2"] .reader__spread {
  position: relative;
  width: 100%; height: 100%;
  flex: none;
  display: flex; align-items: stretch; justify-content: center;
  gap: 0;
  background: var(--rd-bg);
  overflow: hidden;
  /* 双页时给 spread 一个最大宽度并居中：超宽屏下两页不至于被拉得太宽失真 */
  padding: 0;
}
.reader[data-pages="2"] .reader__spread .reader__page {
  width: 50%; height: 100%;
  max-width: 50vw;
  flex: none;
  background: var(--rd-bg);
  display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center;
}
/* 两页之间不能有缝：宽度用 flex 均分，img 用 contain 居中，
   外层 spread 背景与页面同色，视觉上是一整块 */
.reader[data-pages="2"] .reader__spread .reader__page::before { display: none; }
.reader[data-pages="2"] .reader__spread .reader__page > img {
  position: static;
  width: 100%; height: 100%;
  object-fit: contain;
  margin: 0;
}
/* 奇数页时最后一页只有一张图，占左半边；给右半边补同色底避免视觉空洞 */
.reader[data-pages="2"] .reader__spread .reader__page.is-blank { background: var(--rd-bg); }
.reader[data-pages="2"] .reader__spread .reader__page.is-blank > img { display: none; }

.reader {
  position: absolute; inset: 0;
  /* 外观变量：bg_color / font_size / line_height 由 view-reader.js 写入 root.style */
  --rd-bg: #000;
  --rd-fg: #fff;
  --rd-fg-2: #b7bdc9;
  --rd-fg-3: #8b93a3;
  --rd-bar: linear-gradient(to bottom, rgba(0, 0, 0, .82), rgba(0, 0, 0, .55));
  --rd-track: rgba(255, 255, 255, .22);
  --rd-range: rgba(255, 255, 255, .25);
  --rd-chip: rgba(255, 255, 255, .12);
  --rd-fs: 16px;
  --rd-lh: 1.6;
  background: var(--rd-bg);
  color: var(--rd-fg);
  display: flex; flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
}
/* 浅色背景：工具条/页码/文字一并切深色，避免白底白字 */
.reader[data-bg="light"] {
  --rd-bg: #f4f5f7;
  --rd-fg: #17181c;
  --rd-fg-2: #4b5160;
  --rd-fg-3: #6b7280;
  --rd-bar: linear-gradient(to bottom, rgba(255, 255, 255, .92), rgba(255, 255, 255, .74));
  --rd-track: rgba(0, 0, 0, .16);
  --rd-range: rgba(0, 0, 0, .2);
  --rd-chip: rgba(0, 0, 0, .06);
}
/* 护眼色（sepia） */
.reader[data-bg="sepia"] {
  --rd-bg: #e8dcc3;
  --rd-fg: #3b3222;
  --rd-fg-2: #5d5140;
  --rd-fg-3: #7d6f58;
  --rd-bar: linear-gradient(to bottom, rgba(240, 232, 213, .94), rgba(240, 232, 213, .76));
  --rd-track: rgba(59, 50, 34, .18);
  --rd-range: rgba(59, 50, 34, .22);
  --rd-chip: rgba(59, 50, 34, .08);
}

.reader__stage {
  position: relative;
  flex: 1; min-height: 0;
  overflow: hidden;
}
.reader__scroll {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex; flex-direction: column;
  scroll-behavior: auto;
  background: var(--rd-bg);
}
.reader__scroll[data-mode="horizontal"] {
  flex-direction: row;
  overflow-y: hidden; overflow-x: auto;
  scroll-snap-type: x mandatory;
}

/* 页面：用 ::before 占位撑高（比例来自首图），彻底避免加载跳动 */
.reader__page {
  position: relative;
  width: 100%;
  flex: none;
  background: var(--rd-bg);
}
.reader__page::before {
  content: "";
  display: block;
  padding-bottom: calc(100% / var(--pg-ratio, 0.70));
}
.reader__page > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.reader__page > img.is-loaded { opacity: 1; }
.reader__page > .sk { position: absolute; inset: 0; border-radius: 0; }
.reader__page.is-loaded > .sk { display: none; }

/* 横向翻页 */
.reader__scroll[data-mode="horizontal"] .reader__page {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center;
}
.reader__scroll[data-mode="horizontal"] .reader__page::before { display: none; }
.reader__scroll[data-mode="horizontal"] .reader__page > img {
  position: static; width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  margin: auto;
  object-fit: contain;
}

/* 单图失败就地重试占位（绝对定位铺满，页面高度不受影响，滚动不跳） */
.page-retry {
  position: absolute; inset: 0;
  z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px;
  background: var(--rd-bg);
  color: var(--rd-fg);
  text-align: center;
  padding: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.page-retry:active { filter: brightness(.94); }
.page-retry__icon { color: var(--rd-fg-3); line-height: 0; }
.page-retry__icon .ic { width: 34px; height: 34px; }
.page-retry__text { font-size: 13.5px; font-weight: 600; }
.page-retry__hint { font-size: 12px; font-weight: 600; color: var(--accent); }

/* 亮度遮罩 */
.brightness-veil {
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity .15s linear;
}

/* 章节头/尾 */
.reader__chapter-start,
.reader__chapter-end {
  flex: none;
  padding: 30px 20px calc(40px + var(--sab));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  color: var(--rd-fg); text-align: center;
  background: var(--rd-bg);
}
.reader__chapter-start { padding: calc(24px + var(--sat)) 20px 30px; }
.reader__chapter-end .t,
.reader__chapter-start .t {
  font-size: calc(var(--rd-fs) * .92);
  font-weight: 700;
  line-height: var(--rd-lh);
}
.reader__chapter-end .s,
.reader__chapter-start .s { font-size: calc(var(--rd-fs) * .76); color: var(--rd-fg-2); line-height: var(--rd-lh); }
.reader__chapter-end .btn, .reader__chapter-start .btn { min-width: 190px; }
/* 横向下作为整屏 snap 项 */
.reader__scroll[data-mode="horizontal"] .reader__chapter-start,
.reader__scroll[data-mode="horizontal"] .reader__chapter-end {
  width: 100%; height: 100%;
  scroll-snap-align: center;
  padding: 20px;
}
.reader__auto-hint { font-size: calc(var(--rd-fs) * .72); color: var(--rd-fg-3); }

/* 工具条 */
.reader__bar {
  position: absolute; left: 0; right: 0;
  z-index: 50;
  background: var(--rd-bar);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--rd-fg);
  transition: transform .26s var(--ease), opacity .26s var(--ease);
}
.reader__bar--top {
  top: 0;
  padding: calc(var(--sat) + 8px) 12px 12px;
  display: flex; align-items: center; gap: 10px;
}
.reader__bar--bottom {
  bottom: 0;
  padding: 12px 12px calc(10px + var(--sab));
  display: flex; flex-direction: column; gap: 12px;
}
.reader[data-chrome="hidden"] .reader__bar--top { transform: translateY(-100%); opacity: 0; }
.reader[data-chrome="hidden"] .reader__bar--bottom { transform: translateY(100%); opacity: 0; }

.reader__title { flex: 1; min-width: 0; }
.reader__title b {
  display: block;
  font-size: calc(var(--rd-fs) * .92);
  font-weight: 700; line-height: var(--rd-lh);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reader__title span { font-size: calc(var(--rd-fs) * .72); color: var(--rd-fg-2); line-height: var(--rd-lh); }
.reader__bar .icon-btn { color: var(--rd-fg); }

.reader__progress {
  display: flex; align-items: center; gap: 10px;
  font-size: calc(var(--rd-fs) * .8);
  font-weight: 700;
}
.reader__track { flex: 1; height: 4px; border-radius: 2px; background: var(--rd-track); overflow: hidden; }
.reader__track i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .18s var(--ease); }
.reader__page-num { font-variant-numeric: tabular-nums; }

.reader__tools { display: flex; align-items: center; justify-content: space-around; }
.reader__tool {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--rd-fg); font-size: calc(var(--rd-fs) * .66);
  font-weight: 600;
  padding: 6px 10px; border-radius: var(--r-sm);
  transition: background .16s var(--ease), transform .1s var(--ease);
  min-width: 58px;
  white-space: nowrap;
}
.reader__tool:active { background: var(--rd-chip); transform: scale(.94); }
.reader__tool.is-on { color: var(--accent); }

/* 亮度滑杆 */
.reader__bright {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 6px 0;
  animation: slideDown .2s var(--ease);
}
.reader__bright .ic { width: 18px; height: 18px; color: var(--rd-fg-2); }
.reader__bright input[type="range"] {
  flex: 1; height: 3px; -webkit-appearance: none; appearance: none;
  background: var(--rd-range); border-radius: 2px; outline: none;
}
.reader__bright input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

/* 中央点击热区（透明） */
.reader__tapzone {
  position: absolute; inset: 0; z-index: 30;
}

/* 边缘返回手势提示 */
.reader__edge-hint {
  position: absolute; top: 50%; left: 0;
  width: 5px; height: 74px; transform: translateY(-50%);
  border-radius: 0 4px 4px 0;
  background: rgba(255, 255, 255, .1);
  z-index: 20;
}

/* 章节目录高亮 */
.sheet .chapter.is-current { background: var(--accent-soft); }

/* ---------- 阅读器外观设置面板 ---------- */
.look { padding: 4px 0 8px; }
.look__row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.look__row:last-of-type { border-bottom: none; }
.look__label { font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 10px; }
.look__label b { color: var(--accent); font-variant-numeric: tabular-nums; }
.look__chips { display: flex; gap: 8px; }
.look__chips .chip { flex: 1; }
.chip.is-on, .chip[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.look__stepper { display: flex; align-items: center; gap: 10px; }
.look__step {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 18px; font-weight: 700; line-height: 1;
  transition: transform .1s var(--ease), background .16s var(--ease);
}
.look__step:active { transform: scale(.9); background: var(--surface-3); }
.look__stepper input[type="range"] {
  flex: 1; height: 3px; -webkit-appearance: none; appearance: none;
  background: var(--border-strong); border-radius: 2px; outline: none;
}
.look__stepper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent);
  box-shadow: var(--shadow-sm);
}
.look__preview {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.look__preview-t { font-size: 16px; font-weight: 700; color: var(--text); }
.look__preview-s { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* ---------- 19. 我的 / 表单 ---------- */
.profile {
  display: flex; align-items: center; gap: 14px;
  padding: 18px var(--pad);
}
.avatar {
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center;
  color: #fff; font-size: 22px; font-weight: 900;
  flex: none;
}
.profile__info { flex: 1; min-width: 0; }
.profile__name { font-size: 18px; font-weight: 800; }
.profile__sub { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }

.form { padding: 6px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--text-2); padding-left: 2px; }
.input {
  height: 48px;
  padding: 0 15px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1.5px solid transparent;
  font-size: 15px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.input:focus { border-color: var(--accent); background: var(--bg-elev); }
.field__err { font-size: 12px; color: var(--danger); padding-left: 2px; min-height: 0; }

.tabs-switch { display: flex; gap: 4px; padding: 4px; margin: 4px 18px 8px; background: var(--surface-2); border-radius: var(--r-full); }
.tabs-switch button { flex: 1; height: 38px; border-radius: var(--r-full); font-size: 14px; font-weight: 700; color: var(--text-2); transition: all .18s var(--ease); }
.tabs-switch button[aria-selected="true"] { background: var(--bg); color: var(--accent); box-shadow: var(--shadow-sm); }

.group { margin: 12px 0; border-top: 1px solid var(--border); }
.group__title { font-size: 12px; font-weight: 700; color: var(--text-3); padding: 16px var(--pad) 6px; letter-spacing: .06em; }
.group .row { border-bottom: 1px solid var(--border); }
.group .row:last-child { border-bottom: none; }

/* 开关 */
.switch {
  position: relative; width: 48px; height: 28px; border-radius: var(--r-full);
  background: var(--surface-3); transition: background .2s var(--ease); flex: none;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  transition: transform .2s var(--ease-spring);
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }

/* 分段选择（设置项内） */
.seg-mini { display: flex; gap: 4px; padding: 3px; background: var(--surface-2); border-radius: var(--r-sm); flex: none; }
.seg-mini button { padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.seg-mini button[aria-selected="true"] { background: var(--bg); color: var(--accent); box-shadow: var(--shadow-sm); }

/* ---------- 19b. 书架 / 继续阅读 ---------- */
.guide {
  display: flex; align-items: center; gap: 12px;
  margin: 12px var(--pad);
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.guide__ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: #fff; flex: none; }
.guide__ic .ic { width: 20px; height: 20px; }
.guide__main { flex: 1; min-width: 0; }
.guide__title { font-size: 14px; font-weight: 700; }
.guide__text { font-size: 12px; color: var(--text-2); margin-top: 2px; }

/* ---------- 19c. 关于页 ---------- */
.about-hero {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px var(--pad) 16px; text-align: center;
}
.about-hero__logo {
  width: 64px; height: 64px; border-radius: 18px;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: 30px; font-weight: 800;
  box-shadow: var(--shadow-sm);
}
.about-hero__name { font-size: 19px; font-weight: 800; }
.about-hero__ver { font-size: 12.5px; color: var(--text-3); }
.log { padding: 0 var(--pad) 8px; }
.log__ver { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; font-weight: 800; margin: 12px 0 6px; }
.log__date { font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.log__list { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 13px; line-height: 1.75; }
.log__list li { margin: 2px 0; }
.about-note { font-size: 12.5px; color: var(--text-2); line-height: 1.75; padding: 4px var(--pad) 10px; }

.hscroll { display: flex; gap: 12px; overflow-x: auto; padding: 2px var(--pad) 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hscroll::-webkit-scrollbar { display: none; }
.hcard { flex: none; width: 104px; display: flex; flex-direction: column; gap: 6px; }
.hcard:active { transform: scale(.97); }
.hcard__cover {
  position: relative; width: 104px; aspect-ratio: 3 / 4;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--skeleton); box-shadow: var(--shadow-sm);
}
.hcard__cover img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s var(--ease); }
.hcard__cover img.is-loaded { opacity: 1; }
.hcard__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0, 0, 0, .45); }
.hcard__bar i { display: block; height: 100%; background: var(--accent); }
.hcard__title { font-size: 12.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hcard__meta { font-size: 11px; color: var(--text-3); }

/* ---------- 20. 工具类 ---------- */
.hidden { display: none !important; }
.center { display: grid; place-items: center; }
.row-flex { display: flex; align-items: center; }
.grow { flex: 1; }
.muted { color: var(--text-3); }
.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .05s !important; }
}

/* 横屏/大屏桌面观感微调 */
@media (min-width: 561px) {
  .install-bar { border-radius: 0; }
}