/* ═══════════════════════════════════════════════════════════════
   方寸 · 有趣人类书店主题（bookstore）
   套在 style.css 之上，不改任何 JS 逻辑。
   设计取自 book.yes-go.cn/blindbox 的实际样式：
     暖灰纸底 + 纯白圆角卡片 + 深藏青封面块 + 朱红印章色
     宋体（KingHwa）做标题，无衬线做正文，Baskerville 做英文小字
     发丝线、药丸标签、序号、票根式日期
   想回到原样：把 index.html 里的 theme-bookstore.css 换成 theme-paper.css
   或直接删掉这一行。
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Noto Sans SC Local';
  src: url('../assets/fonts/NotoSansSC-sub.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Baskerville Local';
  src: url('../assets/fonts/Baskerville.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* 字体：标题宋、正文黑、英文 Baskerville */
  --song: 'KingHwa', 'Songti SC', 'Noto Serif SC', 'SimSun', serif;
  --serif: var(--song);
  --sans: 'Noto Sans SC Local', 'Noto Sans SC', -apple-system, BlinkMacSystemFont,
          'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font: var(--sans);
  --en: 'Baskerville Local', Baskerville, 'Libre Baskerville', Georgia, serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* 取自原站 :root */
  --desk: #ebeae6;
  --band: #f5f3ee;
  --bg: #f5f3ee;
  --bg-warm: #ebeae6;
  --bg-card: #ffffff;
  --card: #ffffff;
  --ink: #262626;
  --ink-muted: #595959;
  --ink-faint: #8c8c8c;
  --accent: #b23a24;
  --accent-light: #f4ead6;
  --accent-glow: rgba(178, 58, 36, 0.08);
  --accent-line: rgba(178, 58, 36, 0.38);
  --navy: #1f2a38;
  --coral: #e8806a;
  --manila: #f4ead6;
  --manila-ink: #8a7458;

  --border: #e6e3dc;
  --border-strong: #d6d2c9;
  --hair: #e6e3dc;
  --green: #3f7d5a;
  --red: #b23a24;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-card: 16px;

  --shadow-card: 0 1px 2px rgba(38, 38, 38, .04), 0 14px 30px -24px rgba(38, 38, 38, .28);
  --shadow-card-hover: 0 1px 2px rgba(38, 38, 38, .05), 0 18px 38px -24px rgba(38, 38, 38, .34);
  --shadow-glass: var(--shadow-card);
  --shadow-glass-hover: var(--shadow-card-hover);
  --glass-bg: #ffffff;
  --glass-bar: rgba(245, 243, 238, .88);
  --glass-blur: blur(14px) saturate(1.1);

  /* 数据色：低饱和矿物色，只用于习惯/罐子等需要区分的地方 */
  --c-clay: #e0b3a3;
  --c-plum: #cbc0d6;
  --c-slate: #b0cbc6;
  --c-ochre: #e8d0a0;
  --c-rose: #e3c4cb;
  --c-sage: #bdd3b7;

  --transition: 0.16s ease;
}

body.dark {
  --bg: #15171c;
  --bg-warm: #1a1d23;
  --bg-card: #21252c;
  --card: #21252c;
  --ink: #eceff3;
  --ink-muted: #b6bcc5;
  --ink-faint: #8b929c;
  --accent: #e8735c;
  --accent-light: #382420;
  --accent-glow: rgba(232, 115, 92, .12);
  --accent-line: rgba(232, 115, 92, .42);
  --navy: #141a22;
  --coral: #f0917c;
  --manila: #332a1f;
  --manila-ink: #d3bd99;
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .18);
  --hair: rgba(255, 255, 255, .09);
  --green: #62b48a;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 34px -22px rgba(0, 0, 0, .7);
  --shadow-card-hover: 0 1px 2px rgba(0, 0, 0, .4), 0 20px 42px -22px rgba(0, 0, 0, .8);
  --glass-bg: #21252c;
  --glass-bar: rgba(21, 23, 28, .88);
  --c-clay: #a06a58; --c-plum: #7f7195; --c-slate: #5f8a85;
  --c-ochre: #a88a4c; --c-rose: #9d6b78; --c-sage: #6f9669;
}

/* ── 基底 ─────────────────────────────────────────────── */
body {
  background: var(--bg-warm);
  color: var(--ink);
  font-synthesis: none;
  font-size: 14px;
  line-height: 1.65;
}
::selection { background: rgba(178, 58, 36, .16); }
.main { background: transparent; }

/* ── 侧栏：像书店的一页目录 ───────────────────────────── */
.sidebar {
  background: var(--bg);
  border-right: 1px solid var(--hair);
  box-shadow: none;
}
.sidebar-header { border-bottom: 1px solid var(--hair); }
.brand-full {
  font-family: var(--song);
  font-size: 24px; font-weight: 400; letter-spacing: .05em;
}
.brand:hover .brand-full { color: var(--accent); }
.nav-group-label {
  font-family: var(--en);
  font-size: 10.5px; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint);
}
.nav-item {
  border-radius: 8px;
  padding: 7px 10px 7px 12px;
  color: var(--ink-muted);
  font-size: 13.5px; font-weight: 400;
}
.nav-item:hover { background: rgba(255, 255, 255, .6); color: var(--ink); }
.nav-item.active {
  background: var(--bg-card);
  color: var(--accent);
  font-weight: 500;
  box-shadow: inset 2px 0 0 var(--accent), 0 1px 2px rgba(38, 38, 38, .05);
}
.nav-item::before { display: none; }
.nav-item.active .nav-icon { opacity: 1; }
.sidebar-identity-name { font-family: var(--song); font-size: 16px; font-weight: 400; }
.sidebar-identity-sub { color: var(--ink-faint); }
.sidebar-identity:hover { background: rgba(255, 255, 255, .6); }
.storage-fill { background: var(--accent); opacity: .7; }

/* ── 顶栏 ─────────────────────────────────────────────── */
.topbar {
  background: var(--glass-bar);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--hair);
  box-shadow: none;
}
.topbar::after { display: none; }
.topbar-title {
  font-family: var(--song);
  font-size: 20px; font-weight: 400; letter-spacing: .04em;
}
.topbar-date { font-family: var(--en); letter-spacing: .06em; color: var(--ink-faint); }
.topbar-export {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: none;
}
.topbar-export:hover { border-color: var(--accent); color: var(--accent); }

/* ── 内容版心 ─────────────────────────────────────────── */
.page-content { padding: 34px 36px 72px; max-width: 1040px; }

/* ── 首页：一整块深藏青「封面」 ───────────────────────── */
.home-page { max-width: 780px; margin: 0 auto; }
.home-page .hello-row {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 0;
  overflow: hidden;
  padding: 56px 34px 32px;
  margin: 0;
  background: var(--navy);
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 22px 48px -30px rgba(31, 42, 56, .65);
}
/* 封面上的英文小字 */
.home-page .hello-row::before {
  content: '方寸 · 个人系统';
  position: absolute; top: 24px; left: 34px;
  font-family: var(--en); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--coral);
}
/* 内层虚线框，像票券/书封的压印 */
.home-page .hello-row::after {
  content: '';
  position: absolute; inset: 12px;
  border: 1px dashed rgba(255, 255, 255, .16);
  border-radius: 12px;
  pointer-events: none;
}
.home-page .hello-when {
  display: block;
  margin: 0 0 8px; padding: 0;
  font-family: var(--en);
  font-size: 12px; letter-spacing: .16em;
  color: #aeb9c6;
}
.home-page .hello-who {
  display: block;
  font-family: var(--song);
  font-size: 40px; font-weight: 400;
  line-height: 1.25; letter-spacing: .04em;
  color: #fff;
  white-space: normal;
}
/* 右上角的圆印章 */
.home-page .hello-who::after {
  content: '方寸';
  position: absolute; top: 24px; right: 30px;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(232, 128, 106, .75);
  border-radius: 50%;
  transform: rotate(-10deg);
  font-family: var(--en); font-size: 10.5px; letter-spacing: .06em;
  color: var(--coral);
}

/* 题记：书封下面第一张白卡 */
.home-page .hello-quote {
  display: block;
  margin: 18px 0 0;
  padding: 18px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px 14px 14px 4px;
  font-family: var(--song);
  font-size: 17px; line-height: 1.95; letter-spacing: .03em;
  color: #3a3a3a;
  box-shadow: var(--shadow-card);
}
body.dark .home-page .hello-quote { color: var(--ink); }
.home-page .hello-quote b, .home-page .today-quote { font-weight: 400; color: inherit; }
.today-quote-from {
  display: block; margin-top: 4px;
  font-family: var(--sans); font-size: 12px;
  letter-spacing: 0; color: var(--ink-faint);
}
.home-page .miss-line { margin-top: 18px; }
.home-page > .section-label:first-of-type { margin-top: 52px; }
.home-page .week-line, .home-page .dash-remind { margin-top: 20px; }

/* ── 区块标题：宋体 + 一条发丝线 ──────────────────────── */
.section-label {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--song);
  font-size: 20px; font-weight: 400;
  letter-spacing: .04em; text-transform: none;
  color: var(--ink);
  margin: 38px 0 12px;
}
.section-label::before { display: none; }
.section-label::after {
  content: ''; order: 2; flex: 1; height: 1px;
  background: var(--border); align-self: center;
}
.section-label .section-stat {
  order: 3; margin-left: 0;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0; color: var(--ink-faint);
}
.section-title {
  font-family: var(--song);
  font-size: 28px; font-weight: 400;
  letter-spacing: .03em; line-height: 1.3;
}
.section-desc { color: var(--ink-muted); line-height: 1.8; }

/* ── 卡片：白纸 + 发丝线 + 很浅的投影 ─────────────────── */
.card {
  background: var(--bg-card);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.card:hover { transform: none; box-shadow: var(--shadow-card); }
.card.clickable:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.tape-a::before, .tape-b::before, .tape-c::before { display: none; }
.card-title { font-size: 15px; font-weight: 600; }
.card-sub { font-family: var(--mono); color: var(--ink-faint); }

/* ── 按钮 / 药丸 / 标签 / 输入 ────────────────────────── */
.btn {
  border-radius: 10px;
  font-weight: 500; letter-spacing: .02em;
  box-shadow: none;
}
.btn .ic { width: 15px; height: 15px; }
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  box-shadow: none;
}
.btn-primary:hover {
  background: #9c2f1c;
  border-color: #9c2f1c;
  transform: none;
  box-shadow: 0 8px 18px -10px rgba(178, 58, 36, .55);
}
.btn-primary:active { transform: scale(.98); }
.btn-secondary {
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.btn-secondary:hover {
  background: #faf8f4;
  border-color: #b9b3a7;
  transform: none;
}
body.dark .btn-secondary:hover { background: #2a2f37; }
.btn-danger { background: #8f2c1b; color: #fff; border-color: #8f2c1b; }
.btn-danger:hover { filter: brightness(1.06); }
.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 8px; }

.pill {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--ink-muted);
  border-radius: 999px;
}
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill.on {
  background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 500;
}
.tag {
  background: var(--manila);
  color: var(--manila-ink);
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 10.5px; font-weight: 500;
  padding: 2px 9px;
  box-shadow: none;
}
.tag-accent { background: rgba(178, 58, 36, .09); color: var(--accent); }

input[type="text"], input[type="number"], input[type="search"],
input[type="password"], input[type="date"], select, textarea {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--ink);
}
input[type="text"]:focus, input[type="number"]:focus, input[type="search"]:focus,
input[type="password"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(178, 58, 36, .10);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); opacity: .8; }

/* ── 待办 ─────────────────────────────────────────────── */
.task-item { padding: 13px 18px; border-bottom: 1px solid #f0ede7; }
body.dark .task-item { border-bottom-color: rgba(255, 255, 255, .06); }
.task-item:hover { background: #faf8f3; }
body.dark .task-item:hover { background: rgba(255, 255, 255, .03); }
.task-check {
  width: 18px; height: 18px;
  border: 1.5px solid #cbc5b9;
  border-radius: 50%;
  background: transparent;
}
body.dark .task-check { border-color: rgba(255, 255, 255, .3); }
.task-check:hover { border-color: var(--accent); background: rgba(178, 58, 36, .06); }
.task-check.done {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
  color: #fff;
}
.task-text { font-size: 14px; }
.task-text.done { color: var(--ink-faint); }
.task-date { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
.task-due.today {
  background: rgba(178, 58, 36, .09);
  color: var(--accent);
  border-radius: 999px;
  padding: 1px 8px;
  font-weight: 500;
}
.task-due.overdue { color: #a32d2d; font-weight: 600; }
body.dark .task-due.overdue { color: #f0917c; }

/* ── 提醒 / 本周 ──────────────────────────────────────── */
.week-line {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px 12px 12px 4px;
  padding: 12px 16px;
  box-shadow: var(--shadow-card);
}
.week-line .wl-k { color: var(--accent); font-family: var(--en); letter-spacing: .1em; }
.week-line .wl-d { color: var(--ink-faint); }
.dash-remind {
  background: var(--manila);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--manila-ink);
  padding: 10px 14px;
}
.dash-remind .go { color: var(--accent); font-weight: 500; }
.miss-line { color: var(--ink-muted); }
.miss-line::before { background: var(--accent); opacity: .45; }
.miss-line.ok::before { background: var(--accent); }

/* ── 习惯 / 进度 ──────────────────────────────────────── */
.hrow { --hc: var(--c-ochre); }
.hrow:nth-child(3n+2) { --hc: var(--c-ochre); }
.hrow:nth-child(3n+3) { --hc: var(--c-sage); }
.hrow:nth-child(3n+4) { --hc: var(--c-slate); }
.hcells i { width: 18px; height: 18px; border-radius: 5px; background: rgba(38, 38, 38, .06); }
body.dark .hcells i { background: rgba(255, 255, 255, .07); }
.hcells i.on { background: var(--hc); box-shadow: inset 0 0 0 1px rgba(38, 38, 38, .10); }
.hcells i.td, .hcells i.now { box-shadow: 0 0 0 2px rgba(178, 58, 36, .12), inset 0 0 0 1.5px var(--accent); }
.hcells i.fu { background: transparent; border: 1px dashed var(--border-strong); }
.habit-cell.on { background: var(--c-ochre); }
.wk-bar { height: 6px; border-radius: 3px; background: rgba(38, 38, 38, .07); border: 0; overflow: hidden; }
body.dark .wk-bar { background: rgba(255, 255, 255, .08); }
.wk-bar > i { background: var(--accent); border-right: 0; opacity: .9; }
.wk-num.accent { color: var(--accent); }
.wk-label { color: var(--ink-faint); }

/* ── 折叠区 / 日历 / 轮盘 ─────────────────────────────── */
.dash-more { border-top: 1px solid var(--border); }
.dash-more > summary {
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  padding: 12px 16px;
  background: transparent;
}
.cal-pop {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 28px 70px -30px rgba(38, 38, 38, .45);
}
.cal-mask { background: rgba(20, 24, 30, .38); }
.cal-pop-head b { font-family: var(--song); font-weight: 400; font-size: 16px; }
.cal-nav:hover, .cal-pop-close:hover { background: rgba(178, 58, 36, .08); color: var(--accent); }
.cal-dy.has { background: var(--manila); color: var(--manila-ink); font-weight: 600; }
.cal-dy.td { background: var(--accent); color: #fff; font-weight: 600; }
.qr-cell { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); box-shadow: none; }
.wheel-area-label { fill: var(--ink-muted); }
.wheel-ring { stroke: var(--border-strong); }
.wheel-row input[type="range"]::-webkit-slider-runnable-track { background: rgba(38, 38, 38, .08); }
.wheel-row input[type="range"]::-webkit-slider-thumb { background: var(--accent); }

/* ── 记今天 / 周复盘 / 任务等页面标题 ─────────────────── */
.jt-title, .section-title, .page-title {
  font-family: var(--song);
  font-weight: 400;
  letter-spacing: .03em;
}
.jt-title { font-size: 30px; }
.jt-dock {
  background: var(--glass-bar);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--hair);
}
.jt-datebar { background: var(--bg-card); border: 1px solid var(--border); }
.jt-date.on { background: var(--accent); }
.jt-link { color: var(--accent); }
.jt-sub, .jt-hint, .jt-block-hint { color: var(--ink-faint); }
.jt-block-title { font-family: var(--song); font-weight: 400; }

/* ── 财务 ─────────────────────────────────────────────── */
.fin-hero-v { font-family: var(--en); font-weight: 400; letter-spacing: -.01em; }
.fin-hero-k { font-family: var(--song); color: var(--ink-muted); }
.fin-pace { background: rgba(38, 38, 38, .07); }
.fin-pace > i { background: var(--accent); }
.fin-pace > em { background: var(--ink); }
.fin-jar.c-tomato { --c: var(--c-clay); } .fin-jar.c-lilac { --c: var(--c-plum); } .fin-jar.c-teal { --c: var(--c-slate); }
.fin-jar.c-amber { --c: var(--c-ochre); } .fin-jar.c-pink { --c: var(--c-rose); } .fin-jar.c-sage { --c: var(--c-sage); }
.fin-jar-n { font-family: var(--song); font-weight: 400; }
.fin-badge { background: var(--manila); color: var(--manila-ink); border: 0; }
.fin-jar-flag { color: var(--accent); }
.fin-flight i { border-top-color: var(--accent); }
.fin-flight b { background: var(--manila); border-color: var(--accent); color: var(--accent); }

/* ── 手机底栏：白纸 + 朱红主按钮 ──────────────────────── */
.tabbar { display: none; }
@media (max-width: 768px) {
  /* 2026-10-26 用户定：手机端只用底部栏，藏掉汉堡菜单（侧边栏抽屉）；电脑端侧边栏不动 */
  #btn-mobile-menu { display: none !important; }
}
@media (max-width: 768px) {
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 6px 6px env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--hair);
  }
  body.dark .tabbar { background: rgba(21, 23, 28, .94); }
  .tab-item {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: 0; font-family: inherit;
    font-size: 11px; color: var(--ink-faint);
    min-height: 50px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .tab-ic { display: flex; padding: 3px 16px; border-radius: 14px; }
  .tab-item.active { color: var(--accent); font-weight: 500; }
  .tab-item.active .tab-ic { background: rgba(178, 58, 36, .08); }
  .tab-fab .tab-ic {
    width: 52px; height: 52px; padding: 0; margin-top: -23px;
    align-items: center; justify-content: center; border-radius: 50%;
    background: var(--accent); color: #fff;
    box-shadow: 0 10px 22px -8px rgba(178, 58, 36, .55);
  }
  .tab-fab.active .tab-ic { background: #9c2f1c; color: #fff; }
  .tab-fab { color: var(--ink-muted); }
  .page-content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .page-content { padding-left: 16px; padding-right: 16px; }
  .home-page .hello-row { padding: 54px 22px 26px; }
  .home-page .hello-row::before { left: 22px; top: 20px; }
  .home-page .hello-who { font-size: 32px; }
  .home-page .hello-who::after { width: 52px; height: 52px; right: 20px; top: 20px; font-size: 9.5px; }
  .home-page .hello-quote { font-size: 16px; padding: 15px 18px; }
  .section-label { font-size: 18px; margin-top: 32px; }
  .section-title { font-size: 24px; }
}

/* ── 深色下封面还是深色，但要和页面分开 ───────────────── */
body.dark .home-page .hello-row { background: #0f141b; box-shadow: 0 22px 48px -30px rgba(0, 0, 0, .9); }

/* ── 焦点可见性 ───────────────────────────────────────── */
.btn:focus-visible, .pill:focus-visible, .tab-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   书店版首页 · 布面书封 + 一张张分节卡
   （2026-10-26 落地：与 s9 原型对齐，数据仍来自 DataLayer）
   ═══════════════════════════════════════════════════════════════ */
.home-page.home-book { max-width: 780px; margin: 0 auto; }

.bk-cover {
  position: relative;
  height: 320px;
  margin: 0 0 14px;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  color: #f3efe7;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.10), transparent 60%),
    repeating-linear-gradient(42deg, rgba(255,255,255,.028) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-42deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, #18212d, var(--navy));
  box-shadow: 0 22px 48px -30px rgba(31, 42, 56, .65);
}
.bk-cover::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.16'/></svg>");
}
.bk-frame { position: absolute; inset: 14px; border: 1px solid rgba(243,239,231,.26); border-radius: 6px; }
.bk-frame::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(243,239,231,.10); border-radius: 3px; }
.bk-cover-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bk-kicker {
  font-family: var(--en); font-size: 9px; letter-spacing: .42em; text-indent: .42em;
  color: rgba(243,239,231,.62); margin-bottom: 22px;
}
.bk-cover-inner h1 {
  font-family: var(--en); font-size: 52px; font-weight: 400;
  letter-spacing: .05em; line-height: 1; color: #f6f2e9;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.bk-cn { margin-top: 14px; font-size: 11px; letter-spacing: .5em; text-indent: .5em; color: rgba(243,239,231,.78); }
.bk-rule { width: 44px; height: 1px; background: rgba(243,239,231,.34); margin: 20px 0 12px; }
.bk-tagline { font-size: 10.5px; letter-spacing: .24em; text-indent: .24em; color: rgba(243,239,231,.6); }
.bk-seal {
  position: absolute; left: 24px; bottom: 22px; z-index: 4;
  width: 30px; height: 30px; border-radius: 3px;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-family: var(--song); font-size: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.bk-cover-date {
  position: absolute; right: 24px; bottom: 24px; z-index: 4;
  font-family: var(--en); font-size: 9.5px; letter-spacing: .18em;
  color: rgba(243,239,231,.55);
}

/* 分节卡 */
.bk-sec {
  margin-top: 14px; padding: 26px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
.bk-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.bk-sh h2 {
  font-family: var(--song); font-size: 22px; font-weight: 500;
  line-height: 1.2; letter-spacing: .1em; color: var(--ink);
}
.bk-sh .bk-meta { font-size: 11px; letter-spacing: .04em; color: var(--ink-faint); white-space: nowrap; }
.bk-sh .bk-meta.acc, .bk-meta .acc { color: var(--accent); font-weight: 500; }

/* 今天 */
.bk-hello { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bk-hello b { font-size: 17px; font-weight: 500; letter-spacing: .02em; }
.bk-hello span { font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; }
.bk-quote {
  margin: 14px 0 16px; font-family: var(--song);
  font-size: 15.5px; line-height: 1.9; letter-spacing: .03em; color: var(--ink-muted);
}
.bk-quote em { display: block; margin-top: 5px; text-align: right; font-style: normal; font-family: var(--sans); font-size: 10.5px; color: var(--ink-faint); }
.bk-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--bg-warm); border-radius: 9px;
  font-size: 12.5px; color: var(--ink-muted);
}
.bk-status .miss-line { margin: 0; color: inherit; }
.bk-status .miss-line::before { display: none; }
.bk-status .go { color: var(--accent); cursor: pointer; }
.bk-week { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); cursor: pointer; }
.bk-pill {
  padding: 3px 9px; background: var(--manila); border-radius: 999px;
  font-size: 10.5px; letter-spacing: .06em; color: var(--manila-ink); white-space: nowrap;
}
.bk-wk { flex: 1; font-size: 13px; color: var(--ink); }
.bk-left { font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; }
.bk-remind {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding: 10px 14px;
  background: var(--manila); border-radius: 9px;
  font-size: 12.5px; color: var(--manila-ink); cursor: pointer;
}
.bk-remind .go { color: var(--accent); white-space: nowrap; }

/* 待办 */
.bk-task { display: flex; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); }
.bk-task:last-of-type { border-bottom: 0; }
.bk-cb {
  width: 16px; height: 16px; flex: none; margin-right: 12px;
  border: 1px solid var(--border-strong); border-radius: 50%;
  cursor: pointer; transition: border-color .16s, background .16s;
}
.bk-cb:hover { border-color: var(--accent); background: var(--accent-glow); }
.bk-tx { flex: 1; font-size: 14px; color: var(--ink); cursor: pointer; }
.bk-due {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-warm); font-size: 10px; color: var(--ink-faint); white-space: nowrap;
}
.bk-due.today { background: var(--accent-glow); color: var(--accent); font-weight: 500; }
.bk-due.overdue { background: var(--accent); color: #fff; font-weight: 500; }
.bk-empty { padding: 14px 0; font-size: 12.5px; color: var(--ink-faint); }
.bk-more-line { padding: 10px 0 2px; font-size: 12px; color: var(--ink-muted); cursor: pointer; }
.bk-foot-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; padding-top: 13px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--ink-faint);
}
.bk-foot-row .go { color: var(--accent); cursor: pointer; }

/* 首页习惯格：与原型的深藏青方块对齐 */
.home-book .hgrid-host { margin-top: -2px; }
.home-book .hhead, .home-book .hrow { display: flex; align-items: center; gap: 5px; border: 0; padding: 0; }
.home-book .hhead { margin-bottom: 9px; }
.home-book .hname { width: 82px; flex: none; font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-book .hcells { flex: 1; display: flex; gap: 5px; justify-content: stretch; }
.home-book .hhead .hcells em {
  flex: 1; width: auto; text-align: center; font-size: 9.5px;
  line-height: 1.35; color: var(--ink-faint); font-style: normal;
}
.home-book .hhead .hcells em.td { color: var(--accent); font-weight: 500; }
.home-book .hcells i {
  flex: 1; width: auto; height: 19px; border-radius: 4px;
  background: rgba(38, 38, 38, .07);
}
body.dark .home-book .hcells i { background: rgba(255, 255, 255, .08); }
.home-book .hcells i.on { background: var(--navy); box-shadow: none; }
body.dark .home-book .hcells i.on { background: #4d6b8a; }
.home-book .hcells i.td { border-radius: 4px; box-shadow: 0 0 0 1.5px var(--accent); }
.home-book .hcells i.td.on { background: var(--navy); }
.home-book .hrow { margin-bottom: 8px; }
.home-book .hrow:last-of-type { margin-bottom: 0; }
.home-book .hpct { width: 30px; flex: none; text-align: right; font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
.home-book .hsum {
  display: flex; justify-content: space-between;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--ink-faint);
}
.home-book .hsum b { color: var(--ink-muted); font-weight: 600; }

/* 阅读 */
.bk-book { display: flex; align-items: flex-start; gap: 15px; color: inherit; text-decoration: none; }
.bk-book-cover {
  width: 44px; height: 68px; flex: none;
  display: flex; align-items: center; justify-content: center;
  padding-top: 4px; background: var(--navy); border-radius: 3px;
  box-shadow: 2px 3px 8px rgba(31, 42, 56, .18);
  color: #f3efe7; font-family: var(--song); font-size: 10px;
  letter-spacing: .14em; writing-mode: vertical-rl;
}
.bk-book-main { flex: 1; min-width: 0; display: block; }
.bk-book-title { display: block; font-family: var(--song); font-size: 18px; letter-spacing: .06em; line-height: 1.4; }
.bk-book-author { display: block; margin-top: 2px; font-size: 10.5px; color: var(--ink-faint); letter-spacing: .04em; }
.bk-book-meta { display: block; margin-top: 9px; font-size: 11.5px; color: var(--ink-muted); }
.bk-book-meta b { font-family: var(--song); font-size: 14px; font-weight: 500; }
.bk-bar { display: block; height: 2px; margin-top: 12px; border-radius: 2px; background: rgba(38, 38, 38, .08); overflow: hidden; }
body.dark .bk-bar { background: rgba(255, 255, 255, .09); }
.bk-bar i { display: block; height: 100%; border-radius: 2px; background: var(--navy); }
body.dark .bk-bar i { background: #7f9bb8; }

/* 财务卡放进分节卡里：去掉自己那层框 */
.bk-sec .fin-home-bare { border: 0; box-shadow: none; padding: 0; background: transparent; }
.bk-sec .fin-home-bare:hover { transform: none; box-shadow: none; }

/* 主行动 */
.bk-cta-wrap { margin-top: 18px; }
.bk-cta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-radius: 14px;
  background: var(--navy); color: #f6f2e9; text-decoration: none;
  font-family: var(--song); font-size: 17px; letter-spacing: .12em;
  box-shadow: 0 18px 34px -24px rgba(31, 42, 56, .7);
}
.bk-cta:hover { color: #fff; background: #18212d; }
.bk-arrow { font-family: var(--sans); font-size: 18px; }
.bk-cta-note { margin-top: 8px; text-align: center; font-size: 10.5px; color: var(--ink-faint); }

/* 页脚印章 */
.bk-foot { margin: 38px 0 10px; text-align: center; }
.bk-foot .seal {
  width: 28px; height: 28px; margin: 0 auto 10px;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; border-radius: 3px;
  font-family: var(--song); font-size: 12px;
}
.bk-foot p { font-family: var(--en); font-size: 9.5px; letter-spacing: .18em; color: var(--ink-faint); }

/* ═══ 更多 · 书店目录页 ═══ */
.more-page { max-width: 780px; margin: 0 auto; }
.page-head { padding: 6px 2px 18px; }
.page-head .label { font-family: var(--en); font-size: 10px; letter-spacing: .2em; color: var(--ink-faint); text-transform: uppercase; }
.page-head h1 { margin-top: 8px; font-family: var(--song); font-size: 30px; font-weight: 500; letter-spacing: .1em; line-height: 1.25; color: var(--ink); }
.page-head p { margin-top: 6px; font-size: 12px; color: var(--ink-faint); letter-spacing: .02em; }
.dir-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 6px 26px 14px;
  box-shadow: var(--shadow-card);
}
.dir-group { padding-top: 16px; }
.dir-label {
  font-family: var(--en); font-size: 10px; letter-spacing: .2em;
  color: var(--ink-faint); padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.dir-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; min-height: 56px;
  border-bottom: 1px solid var(--border);
  color: inherit; text-decoration: none;
}
.dir-row:last-child { border-bottom: 0; }
.dir-row:hover .dt b { color: var(--accent); }
.dir-row .no { width: 22px; flex: none; font-family: var(--en); font-size: 10px; color: var(--ink-faint); }
.dir-row .dt { flex: 1; min-width: 0; }
.dir-row .dt b { display: block; font-family: var(--song); font-size: 17px; font-weight: 500; letter-spacing: .05em; color: var(--ink); transition: color .16s; }
.dir-row .dt span { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-faint); }
.dir-meta { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--accent-glow); color: var(--accent); font-size: 10.5px; white-space: nowrap; }
.dir-row .ar { flex: none; color: var(--ink-faint); font-size: 18px; }

/* ═══ 响应式 ═══ */
@media (max-width: 768px) {
  .bk-cover { height: 270px; margin: 0 0 12px; border-radius: 14px; }
  .bk-cover-inner h1 { font-size: 44px; }
  .bk-kicker { margin-bottom: 18px; }
  .bk-seal { left: 20px; bottom: 18px; }
  .bk-cover-date { right: 20px; bottom: 20px; }
  .bk-sec { margin-top: 12px; padding: 22px 20px; border-radius: 14px; }
  .bk-sh h2 { font-size: 20px; }
  .home-book .hname { width: 80px; }
  .home-book .hcells i { height: 22px; }
  .page-head { padding: 4px 0 14px; }
  .page-head h1 { font-size: 26px; }
  .dir-card { padding: 4px 18px 10px; border-radius: 14px; }
  .dir-row { gap: 11px; padding: 13px 0; min-height: 54px; }
  .dir-row .dt b { font-size: 16px; }
  .dir-meta { display: none; }
  .bk-cta { padding: 16px 18px; font-size: 16px; }
}
@media (max-width: 380px) {
  .bk-cover { height: 240px; }
  .bk-cover-inner h1 { font-size: 38px; }
  .bk-cn { letter-spacing: .34em; text-indent: .34em; }
  .bk-sec { padding: 20px 16px; }
  .home-book .hname { width: 76px; }
}

/* ═══════════════════════════════════════════════════════════════
   动效层 · 2026-10-26
   纸和墨，不弹不飘；只动 transform / opacity。
   所有位移类动效都在 prefers-reduced-motion: reduce 下被 style.css 的总开关关掉。
   ═══════════════════════════════════════════════════════════════ */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --dur-press: 120ms;
}

/* 按压：按下快、回弹慢 */
.btn, .pill, .topbar-export, .bk-cta,
.card.clickable, .nav-item, .dir-row,
.task-check, .bk-cb, .hcells i, .habit-cell {
  transition:
    transform 160ms var(--ease-out),
    background-color .16s ease,
    color .16s ease,
    border-color .16s ease,
    opacity .16s ease;
}
.btn:active, .pill:active, .topbar-export:active,
.bk-cta:active, .card.clickable:active, .nav-item:active, .dir-row:active {
  transform: scale(.98);
  transition-duration: 80ms, .16s, .16s, .16s, .16s;
}
.task-check:active, .bk-cb:active, .hcells i:active { transform: scale(.9); transition-duration: 80ms, .16s, .16s, .16s, .16s; }
.tab-item { transition: transform 160ms var(--ease-out), color .16s ease; }
.tab-item:active .tab-ic { transform: scale(.9); transition-duration: 80ms, .16s; }
.tab-ic { transition: transform 160ms var(--ease-out), background-color .16s ease; }
.nav-item .nav-icon { transition: transform 160ms var(--ease-out), opacity .16s ease; }
.nav-item:active .nav-icon { transform: scale(.9); transition-duration: 80ms, .16s; }

/* 文字链：只降透明度，不做位移 */
.go, .jt-link, .mini-go, .section-label-go, .arch-line,
.bk-foot-row .go, .bk-more-line, .dash-more > summary,
.bk-status .go, .miss-line .go {
  transition: opacity 120ms ease;
}
.go:active, .jt-link:active, .mini-go:active, .section-label-go:active,
.arch-line:active, .bk-foot-row .go:active, .bk-more-line:active,
.dash-more > summary:active, .bk-status .go:active, .miss-line .go:active {
  opacity: .55;
}

/* 触控目标：文字链的可点区域补到约 44px，视觉上不撑开排版 */
.go, .jt-link, .mini-go, .section-label-go, .bk-foot-row .go {
  position: relative;
}
.go::after, .jt-link::after, .mini-go::after,
.section-label-go::after, .bk-foot-row .go::after {
  content: '';
  position: absolute;
  inset: -14px -10px;
}
.arch-line { min-height: 44px; display: flex; align-items: center; }
.dash-more > summary { min-height: 44px; display: flex; align-items: center; }
.miss-line .go, .bk-status .go { padding: 6px 2px; margin: -6px -2px; }

/* 页面切换：内容淡入（保留 style.css 里已有的 pageIn，这里补一层更轻的） */
@keyframes bkPageIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.page-content.page-enter { animation: bkPageIn 180ms var(--ease-out); }

/* 减弱动效：去掉位移，保留颜色/透明度反馈 */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .pill:active, .topbar-export:active, .bk-cta:active,
  .card.clickable:active, .nav-item:active, .dir-row:active,
  .task-check:active, .bk-cb:active, .hcells i:active,
  .tab-item:active .tab-ic, .nav-item:active .nav-icon {
    transform: none;
  }
  .page-content.page-enter { animation: none; }
}

/* 小控件补一点可点范围（视觉尺寸不变） */
.bk-cb, .bk-tx, .task-check, .tk-check, .tk-edit, .tk-del,
.jd-del, .icon-btn, .ai-mini, .dash-cal-go {
  position: relative;
}
.bk-cb::after, .task-check::after, .tk-check::after {
  content: ''; position: absolute; inset: -11px;
}
.tk-edit::after, .tk-del::after, .jd-del::after, .icon-btn::after {
  content: ''; position: absolute; inset: -9px -7px;
}
.bk-tx::after, .ai-mini::after, .dash-cal-go::after {
  content: ''; position: absolute; inset: -8px -6px;
}

/* 底栏正中的印章（与原型一致） */
.tab-seal {
  font-family: var(--song); font-size: 23px; line-height: 1;
  color: #fff; transform: translateY(-1px);
}
.tab-fab:active .tab-seal { transform: scale(.9) translateY(-1px); transition: transform 80ms var(--ease-out); }

/* 加法项：习惯打卡的墨点 */
@keyframes habitInk {
  0%   { transform: scale(.55); opacity: .35; box-shadow: 0 0 0 6px rgba(178,58,36,.16); }
  55%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(178,58,36,0); }
}
.hcells i.ink { animation: habitInk 420ms var(--ease-out) both; }

/* 加法项：进度条入场（只动 transform，不改真实宽度） */
@keyframes barIn { from { transform: scaleX(0); } }
.wk-bar > i, .bk-bar i, .fin-pace > i, .fin-home .fin-pace > i,
.setup-bar i, .storage-fill {
  transform-origin: left center;
  animation: barIn 520ms var(--ease-out) both;
}

/* 加法项：印章按下去的「盖一下」 */
.tab-fab:active .tab-seal { transform: scale(.86) rotate(-4deg); }
.bk-cta:active { transform: scale(.985); transition-duration: 80ms; }

/* 加法项：折叠区展开 */
@keyframes foldIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.dash-more[open] > :not(summary) { animation: foldIn 220ms var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .hcells i.ink { animation: none; }
  .wk-bar > i, .bk-bar i, .fin-pace > i, .fin-home .fin-pace > i,
  .setup-bar i, .storage-fill { animation: none; }
  .dash-more[open] > :not(summary) { animation: none; }
}

/* 手机底栏会盖住吸底保存条：把保存条抬到底栏上方，正文再留出两者的高度 */
@media (max-width: 768px) {
  .jt-dock { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .jt { padding-bottom: calc(220px + env(safe-area-inset-bottom, 0px)); }
}