/* ── 基础布局 ─────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-size: 16px; font-family: var(--ui-font-family); background: var(--surface); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.container { max-width: 960px; margin: 0 auto; padding: 0; }
.header { padding: 16px 20px 12px; background: none; border-radius: 0; margin-bottom: 8px; }
.header h1 { font-size: var(--text-3xl); font-weight: 800; font-family: var(--heading-font-family); color: var(--brand); margin-bottom: 4px; letter-spacing: 0.04em; }
.header .subtitle { font-size: var(--text-md); color: var(--text-muted); letter-spacing: 0.01em; margin-top: 6px; }
.content { padding: 0; }

/* ── 首页头部操作栏 ─────────────────────────────────────── */
.home-header-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.home-action-btn { padding: 9px 22px; background: var(--surface-alt); color: var(--brand); border: 1.5px solid var(--border); border-radius: 22px; font: inherit; font-size: var(--text-base); font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.2s var(--ease-out, ease); }
.home-action-btn:active { transform: scale(0.97); background: var(--nav-hover); }
.home-action-btn.btn-search { background: var(--brand); color: #fff; border-color: var(--brand); }
.home-action-btn.btn-search:active { opacity: 0.85; }

/* ── 系列标签栏 ─────────────────────────────────────────── */
.series-tabs { display: flex; flex-wrap: nowrap; gap: 8px; padding: 12px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; position: relative; mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%); touch-action: pan-x; }
.series-tabs::-webkit-scrollbar { display: none; }
.series-tab { padding: 7px 18px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: var(--text-base); cursor: pointer; transition: all 0.2s var(--ease-out, ease); -webkit-tap-highlight-color: transparent; white-space: nowrap; flex-shrink: 0; font-weight: 400; }
[data-theme="dark"] .series-tab:not(.active) { color: rgba(255,255,255,0.82); }
.series-tab:active { transform: scale(0.96); }
.series-tab.active { background: var(--accent-color, #3D8A5A); color: white; border-color: var(--accent-color, #3D8A5A); font-weight: 600; transform: scale(1.02); }

/* ── 书籍卡片增强 ───────────────────────────────────────── */
.book-grid { display: grid; gap: 12px; padding: 8px 20px 24px; background: transparent; }
@media (min-width: 768px) { .book-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .book-grid { grid-template-columns: repeat(3, 1fr); } }
.zl-book-card { background: var(--card-bg, var(--surface)); border-radius: 16px; overflow: hidden; transition: background-color .2s, transform 0.25s var(--ease-out, ease); border: 1px solid var(--border); border-top: 3px solid var(--series-color, var(--accent-color, #3D8A5A)); contain: layout style paint; }
.zl-book-card:hover { background: var(--nav-hover); transform: translateY(-2px); }
.zl-book-card:active { transform: scale(0.98); transition-duration: 0.1s; }
/* [data-theme="dark"] book cards: flat, no shadow (Soft Nordic — white cards distinguished by 1px border) */
.zl-book-card .book-card-wrapper { display: flex; align-items: stretch; }
.zl-book-card .book-link { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; text-decoration: none; color: inherit; flex: 1; min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.zl-book-card .book-link:active { background: var(--nav-hover); border-radius: var(--radius-sm); }
/* 方案 5：L3 书卡键盘焦点可见 */
.zl-book-card .book-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); }
.zl-book-card .book-info { position: relative; flex: 1; min-width: 0; }
.zl-book-card .book-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.zl-book-card .book-title-row { display: flex; align-items: center; gap: 6px; }
.zl-book-card .title { font-size: var(--text-md); color: var(--text); line-height: 1.5; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex: 1; }
.zl-book-card .series-tag { font-size: var(--text-xs); color: var(--tag-text, var(--text-muted)); background: var(--tag-bg, rgba(var(--brand-rgb),.08)); margin-top: 6px; display: inline-block; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
.zl-book-card .chapter-count { font-size: var(--text-xs); color: var(--text-muted); margin-top: 6px; opacity: 0.8; }
.zl-book-card .cache-status { margin-left: auto; font-size: var(--text-lg); opacity: 0.55; flex-shrink: 0; transition: opacity 0.2s var(--ease-out, ease), transform 0.2s var(--ease-out, ease); }
.bk-series-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* ── 阅读进度条 ───────────────────────────────────────── */
.reading-progress { height: 3px; background: var(--progress-bg, rgba(var(--brand-rgb),.12)); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.reading-progress-fill { height: 100%; background: var(--progress-fill, var(--brand)); border-radius: 2px; transition: width 0.3s ease; }

/* ── 海报卡组件（Phase 0 抽离：L1 系列 / L2 分类 / L3 书籍 / 书架 四处的共享基底） ──
   新增 .bk-poster-grid / .bk-poster-card / .bk-poster-card__caption 三个 class。
   原三处重复规则下沉到此；各渲染器「追加」这些 class，原 class、data-* 与事件契约保留。
   本块只承载四处完全一致的属性；存在差异者（封面基准字号、L3 静息阴影、书架 align-items 等）
   仍由各专属规则保留覆盖，确保视觉逐像素不变。 */
.bk-poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 8px 16px 24px;
}
@media (min-width: 768px) {
  .bk-poster-grid { gap: 14px; padding: 8px 28px 28px; }
}
.bk-poster-card {
  position: relative;
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* 静息：极轻浮起，比纯 flat 多一分层次又不喧宾夺主（Soft Nordic） */
  box-shadow: 0 1px 4px rgba(60, 40, 10, .08);
  transition: transform .2s var(--ease-out, ease), box-shadow .2s ease, background-color .2s;
}
.bk-poster-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(60, 40, 10, .12); background: var(--nav-hover); }
.bk-poster-card:active { transform: scale(0.98); transition-duration: 0.1s; }
.bk-poster-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* 封面：填满卡顶（16px 圆角由卡片 overflow:hidden 裁切）；overflow:hidden 兜底，杜绝超长书名溢出渗入信息条 */
.bk-poster-card .bk-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
/* 书物质感：左上柔光 + 底部压暗（托住下沉的标题）+ 左书脊 + 右书口，让纯色封面有厚度 */
.bk-poster-card .bk-cover::after {
  content: ''; display: block; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(to top, rgba(0, 0, 0, .26) 0%, rgba(0, 0, 0, 0) 46%),
    linear-gradient(to right, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, 0) 8%),
    linear-gradient(to left, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, 0) 6%);
}
/* 书名块锚定到封面下三分之一（经典书封构图），顶部留白给柔光；文字层压在质感层之上保持清晰 */
/* 封面文字块：系列标线压顶、书名沉底（经典书封上下构图），用两端填满封面、中段留白更显克制平衡，根治顶部太空 */
/* 封面文字块：系列标线压顶、书名沉底（经典书封上下构图），用两端填满封面、中段留白更显克制平衡，根治顶部太空。
   align-items:stretch 覆盖基类 .bk-cover-inner 的 center——否则 flex 项不撑满宽度、长书名以 max-content 单行渲染被右侧裁断（不换行），是超长书名的根因 */
.bk-poster-card .bk-cover-inner { padding: 13% 13% 13%; justify-content: space-between; align-items: stretch; z-index: 1; }
.bk-poster-card .bk-cover-title {
  font-family: var(--reading-font-family, "Songti SC", Georgia, serif);
  color: #FBF8F2;
  font-size: 1.12em; font-weight: 600; line-height: 1.45; letter-spacing: .01em;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  -webkit-line-clamp: 4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .24);
  overflow-wrap: anywhere;
}
/* 系列 kicker：细发丝分隔线，建立「标 → 题」层次而不喧宾夺主。
   margin-bottom:0 覆盖基类 .bk-cover-series 的 8%（poster 用 padding-bottom+border 替代间距） */
.bk-poster-card .bk-cover-series {
  font-size: .8em; font-weight: 500; color: rgba(251, 248, 242, .82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .30);
  padding-bottom: 7%; border-bottom: 1px solid rgba(251, 248, 242, .32);
  margin-bottom: 0;
}
/* 信息条容器：书名 + 元信息两行，统一内边距与行距 */
.bk-poster-card__caption {
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* 共享：信息条书名行（L3 / 书架） */
.bk-poster-card__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 共享：信息条元信息行（章节 / 作者 / 进度 / 来源徽标） */
.bk-poster-card__meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--text-muted);
}
/* 封面已是书名主体（kicker 标线 + 衬线书名），信息条书名行冗余 → 隐藏，卡片聚焦封面、更紧凑。
   完整书名仍由封面 aria-label 读出（无障碍不受损）；长书名点进详情/阅读可见全文。 */
.bk-poster-card .book-caption-title,
.bk-poster-card .bk-shelf-row-title { display: none; }

/* ── 书城 L1/L2 卡片：与 L3 一致的「海报封面 + 信息条」卡片式布局 ──
   L1 系列卡 / L2 分类卡 / L3 书籍卡 三级统一为「海报封面(.bk-cover 填满卡顶) + 信息条」卡片：
   共享 16px 圆角 + 1px 描边 + overflow:hidden + 悬停抬升 + 点击缩放（无系列色左条，更克制），
   网格同为 auto-fill minmax(140px,1fr)（移动端双列），海报复用 .bk-cover。 */
/* L1/L2 网格基础属性已下沉到共享 .bk-poster-grid（网格 div 已追加该类）；本处仅保留语义类名 */

/* L1/L2 卡片外壳已下沉到共享 .bk-poster-card（卡片 div 已追加该类）；本处仅保留语义类名 */

/* L1/L2 封面：基础属性已下沉到共享 .bk-poster-card .bk-cover*；仅保留 L1/L2 专属基准字号 */
.category-card .bk-cover,
.series-catalog-card .bk-cover { font-size: 16px; }
/* 左上角系列名 / 底部「书报」：海报基准 15px 下原 .6em/.56em 仅 9/8.4px，过小；放大并提亮半透明白
   （字体/颜色/阴影已下沉到共享 .bk-poster-card .bk-cover-series） */
/* L1 海报左上角「系列」kicker 与 L2/L3 统一：顶部标线压顶、底部书名沉底，三级结构一致；
   信息条仅显示数量（不含系列名），故 kicker 与标题不重复，正常显示即可，无需孤立发丝线填空 */

/* 信息条：封面已显示名称，信息条只留数量 —— 升级为 sage 胶囊，与卡片更融合。
   容器基础属性（padding/flex/gap）已下沉到共享 .bk-poster-card__caption（div 已追加该类）。 */
.collection-caption .series-catalog-card-title,
.collection-caption .category-card-title {
  display: none;
}
.bk-poster-card .collection-caption .series-catalog-card-count,
.bk-poster-card .collection-caption .category-card-count {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--tag-text, #3D8A5A);
  background: var(--tag-bg, rgba(var(--brand-rgb, 61,138,90), .10));
  border-radius: 10px;
  padding: 2px 8px;
  margin: 0;
  align-self: flex-start;
}
/* 隐藏旧版装饰圆点（系列色已由海报封面承担） */
.collection-caption .series-catalog-card-count::before,
.collection-caption .category-card-count::before { content: none; }

/* 旧版返回条（面包屑已取代，保留样式以防历史 DOM 偶发） */
.category-back-bar { padding: 8px 16px; }
.category-back-btn { background: none; border: none; color: var(--brand, var(--accent-color, #3D8A5A)); font-size: var(--text-base); font-weight: 500; cursor: pointer; padding: 8px 0; -webkit-tap-highlight-color: transparent; transition: opacity 0.15s; display: inline-flex; align-items: center; gap: 4px; }
.category-back-btn::before { content: '←'; margin-right: 2px; font-size: 1em; }
.category-back-btn:active { opacity: 0.6; }

/* ── 系列书籍列表头部 ──────────────────────────────────── */
.series-list-header { padding: 20px 16px 12px !important; margin-bottom: 8px !important; }
.series-back-row { display: flex; align-items: flex-start; gap: 10px; }
.series-back-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--surface-alt); color: var(--brand); cursor: pointer; flex-shrink: 0; font-size: 1.25em; line-height: 1; -webkit-tap-highlight-color: transparent; transition: background .15s, transform .15s; }
.series-back-btn:active { background: var(--nav-hover); transform: scale(0.92); }
.series-back-icon { display: block; line-height: 1; }
.series-list-titles { flex: 1; min-width: 0; }
.series-list-title { font-size: var(--text-xl) !important; font-weight: 700 !important; color: var(--heading, var(--text)); margin: 0 !important; line-height: 1.3; }

/* ── 下载管理对话框（居中弹框，基于 BK.openDialog） ─────────── */
.bk-download-dialog { width: min(420px, calc(100vw - 40px)); max-height: 80vh; }
/* 概览统计卡 */
.dl-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.dl-ov-item { background: var(--card-bg, #fff); border: 1px solid var(--border, #E5E2DD); border-radius: var(--radius-md, 12px); padding: 10px 8px; text-align: center; }
.dl-ov-num { font-size: var(--text-lg); font-weight: 700; color: var(--brand, #3D8A5A); line-height: 1.2; font-family: var(--num-font-family, -apple-system, 'Segoe UI', sans-serif); }
.dl-ov-label { font-size: var(--text-xs); color: var(--text-muted, #9A958C); margin-top: 2px; }
.download-storage-info { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 10px; }
.download-resource-summary { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 8px; }
.download-progress { height: 18px; background: var(--border); border-radius: 9px; margin: 8px 0 4px; overflow: hidden; position: relative; }
.download-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent-color, #3D8A5A), var(--brand, #3D8A5A)); border-radius: 9px; transition: width 0.2s ease-out; }
.download-progress-pct { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 11px; font-weight: 700; color: var(--text); mix-blend-mode: difference; pointer-events: none; letter-spacing: 0.3px; }
.download-progress-detail { font-size: var(--text-sm); color: var(--text-muted); margin: 6px 0 4px; }
.dl-detail-line1 { color: var(--text); font-weight: 500; word-break: break-word; line-height: 1.4; }
.dl-detail-line2 { color: var(--text-muted); font-size: var(--text-xs); margin-top: 4px; font-variant-numeric: tabular-nums; }
.dl-current-book { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.dl-current-book-bar-wrap { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.dl-current-book-bar { height: 100%; background: var(--brand, #3D8A5A); border-radius: 2px; transition: width 0.2s ease-out; }
.dl-current-book-pct { font-size: var(--text-xs); color: var(--text-muted); min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.download-bg-hint { font-size: 11px; color: var(--text-muted); background: var(--surface-alt, #f7f6f2); border-radius: 6px; padding: 6px 10px; margin: 6px 0 8px; line-height: 1.4; }
/* 下载悬浮窗 */
.dl-float { position: fixed; bottom: 80px; right: 16px; z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none; transition: opacity .3s ease, transform .3s ease; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dl-float--visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.dl-float--hiding { opacity: 0; transform: translateY(8px) scale(0.9); pointer-events: none; }
.dl-float:active { transform: translateY(0) scale(0.95) !important; }
.dl-float-ring { position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--surface, #fff); box-shadow: 0 2px 12px rgba(0,0,0,.15); overflow: hidden; }
.dl-float-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.dl-float-bg { fill: none; stroke: var(--surface-alt, #f0f0f0); stroke-width: 3; }
.dl-float-progress { fill: none; stroke: var(--brand, #3D8A5A); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.dl-float-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.dl-float-label { font-size: 10px; color: var(--text-muted); line-height: 1; }
.download-progress-text { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 8px; }
.download-controls { display: flex; gap: 8px; margin-bottom: 10px; }
.dl-ctrl-btn { padding: 6px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text); font-size: var(--text-sm); cursor: pointer; transition: background .15s; }
.dl-ctrl-btn:active { transform: scale(0.96); background: var(--nav-hover); }
.download-series-list { margin: 8px 0; }
.download-series-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); gap: 8px; }
.download-series-name { font-size: var(--text-base); color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.series-cache-info { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.download-series-btn { padding: 4px 14px; border-radius: 14px; border: 1px solid var(--accent-color, #3D8A5A); background: transparent; color: var(--accent-color, #3D8A5A); font-size: var(--text-sm); cursor: pointer; transition: all .15s; }
.download-series-btn:active { transform: scale(0.96); background: var(--interactive-soft-bg); }
.download-all-btn { display: block; width: 100%; padding: 12px; margin-top: 10px; border-radius: 12px; border: none; background: linear-gradient(135deg, var(--accent-color, #3D8A5A), var(--brand)); color: #fff; font-size: var(--text-md); font-weight: 600; cursor: pointer; transition: opacity .15s; }
.download-all-btn:active { transform: scale(0.98); opacity: 0.88; }

/* ── 数据管理面板 Tab 栏 ────────────────────── */
.dl-tab-bar { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 12px; gap: 0; }
.dl-tab-btn { flex: 1; padding: 10px 0; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-base); font-weight: 500; cursor: pointer; transition: color .15s, border-color .15s; border-bottom: 2px solid transparent; }
.dl-tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.dl-tab-btn:active { opacity: 0.8; }
.dl-tab-content { overflow-y: auto; }

/* ── 导出 Tab ─────────────────────────────── */
.dl-export-hint { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; }
.dl-export-series-list { margin: 8px 0; max-height: 50vh; overflow-y: auto; }
.dl-export-series-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); gap: 8px; }
.dl-export-label { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.dl-export-check { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; flex-shrink: 0; }
.dl-export-check:disabled { opacity: 0.4; cursor: not-allowed; }
.dl-export-series-name { font-size: var(--text-base); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-export-cache-info { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.dl-export-empty-hint { color: var(--text-muted); opacity: 0.5; }
.dl-export-empty { text-align: center; color: var(--text-muted); padding: 20px 0; font-size: var(--text-sm); }
.dl-export-status { min-height: 0; }
.dl-export-actions { display: flex; gap: 8px; margin-top: 10px; }
.dl-export-btn { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text); font-size: var(--text-sm); cursor: pointer; transition: all .15s; }
.dl-export-btn:active { transform: scale(0.96); }
.dl-export-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dl-export-btn-primary { border-color: var(--brand); background: var(--brand); color: #fff; font-weight: 600; flex: 1; }
.dl-export-progress, .dl-export-done { text-align: center; padding: 16px 0; font-size: var(--text-sm); color: var(--text-muted); }
.dl-export-done { color: var(--success-text, #3D8A5A); }
.dl-export-error { text-align: center; padding: 16px 0; font-size: var(--text-sm); color: var(--danger-text, #C8553D); }

/* ── 导入 Tab ─────────────────────────────── */
.dl-import-hint { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; }
.dl-import-actions { margin: 8px 0; }
.dl-import-btn { padding: 10px 20px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text); font-size: var(--text-base); cursor: pointer; transition: all .15s; }
.dl-import-btn:active { transform: scale(0.96); }
.dl-import-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dl-import-btn-primary { border-color: var(--brand); background: var(--brand); color: #fff; font-weight: 600; display: block; width: 100%; }
.dl-import-status { margin-top: 8px; font-size: var(--text-sm); color: var(--text-muted); min-height: 20px; }
.dl-import-progress { margin-top: 8px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }


/* ── 加载 / 空状态 / 错误 ───────────────────────────────── */
.bk-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: var(--text-muted); }
.bk-spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: bk-spin 0.8s linear infinite; margin-bottom: 12px; }
@keyframes bk-spin { to { transform: rotate(360deg); } }
.bk-empty, .bk-error { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; }
.bk-empty-icon, .bk-error-icon { font-size: 2.5em; margin-bottom: 12px; }
.bk-empty-text, .bk-error-text { font-size: var(--text-md); color: var(--text-muted); }
.bk-error-text { color: var(--danger-text); }
.home-status { padding: 40px 20px; text-align: center; background: var(--surface); color: var(--text-muted); }
.home-status-icon { font-size: 1.5em; margin-bottom: 10px; }

/* ── 底部 ─────────────────────────────────────────────── */
.footer { text-align: center; padding: 16px 16px; color: var(--text-muted); background: transparent; border-top: 1px solid var(--border); font-size: var(--text-xs); margin-top: 8px; letter-spacing: 0.01em; opacity: 0.85; }
.footer-meta { margin-top: 8px; font-size: var(--text-xs); opacity: 0.8; }

/* ── 响应式微调 ─────────────────────────────────────────── */
@media (min-width: 768px) {
  .header { padding: 20px 28px 16px; }
  .series-tabs { padding: 14px 28px; }
  .book-grid { padding: 8px 28px 28px; gap: 14px; }
}

/* ── 首页溢出菜单 ───────────────────────────────────────── */
.home-overflow-menu { position: relative; }
.home-overflow-trigger { min-width: 40px; padding: 8px 12px !important; font-size: 1.125em !important; letter-spacing: 2px; text-align: center; }
.home-overflow-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: var(--card-bg, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius-md, 12px); min-width: 160px; z-index: 100; padding: 6px 0; animation: overflowFadeIn 0.15s ease; }
@keyframes overflowFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.home-overflow-item { display: block; width: 100%; padding: 10px 18px; background: none; border: none; color: var(--text); font-size: var(--text-base); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s; font: inherit; }
.home-overflow-item:active { background: var(--nav-hover); }

/* ── 渲染性能优化：content-visibility ─────────────────── */
/* 让浏览器跳过屏幕外元素的渲染，回前台时只需重建可见区域
   compatible: Chromium 85+ / Android WebView 9+ / Safari 18+
   旧浏览器自动忽略（fallback: 正常渲染）。contain-intrinsic-size
   防止滚动条跳动，给出合理占位高度 */
@supports (content-visibility: auto) {
  .book-card,
  .series-item,
  .chapter-item,
  .book-grid > * {
    content-visibility: auto;
    contain-intrinsic-size: 1px 110px;
  }
}