/* 逐章生长 · 新站样式。默认是清爽的浅色主题：冷调浅灰白底、深灰字、青蓝强调（和 logo 里高亮的那一行同色系）、蓝色链接；
   老站的暖黄纸色留作可选的「纸」主题（data-theme="paper"）。
   页面风格分「书香」和「论坛」：论坛只把列表和讨论区变紧凑，章节正文仍是舒适的单栏、不缩小字号。 */
:root {
  --fs: 19px;
  --lh: 1.8;
  --bg: #fbfcfd;
  --bg-2: #f3f6f8;
  --bg-3: #e8edf1;
  --card: #ffffff;
  --fg: #1d2329;
  --fg-2: #46505a;
  --fg-3: #85909b;
  --line: #dde3e9;
  --accent: #0e7490;
  --accent-bg: #e1f5fa;
  --brand-hi: #00c4f0;
  --link: #1f5fbf;
  --quote: #cfd8df;
  --quote-bg: rgba(14, 116, 144, .04);
  --mark: #dcf3fa;
  --mark-strong: #fde4e1;
  --ok: #177245;
  --ok-bg: #e2f2e8;
  --danger: #c0392b;
  --shadow: 0 6px 24px rgba(16, 24, 40, .10);
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --top-h: 3rem;
}
/* 没有 data-theme 时（脚本还没跑）按系统深浅给底色，夜间不闪白 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --bg: #14181c; --fg: #e6ebef; }
}
:root[data-theme="dark"] {
  --bg: #14181c; --bg-2: #1b2025; --bg-3: #242a30; --card: #181d22;
  --fg: #e6ebef; --fg-2: #b6c0c8; --fg-3: #7d8791; --line: #2d343b;
  --accent: #22d3ee; --accent-bg: #0e3440; --brand-hi: #22d3ee; --link: #8ab8f0;
  --quote: #3a434b; --quote-bg: rgba(255, 255, 255, .03);
  --mark: #113a46; --mark-strong: #4b2c36; --ok: #7fd3a6; --ok-bg: #17322a;
  --danger: #ff8a80; --shadow: 0 6px 24px rgba(0, 0, 0, .5);
}
:root[data-theme="paper"] {
  --bg: #f8f6f0; --bg-2: #f1eee6; --bg-3: #e9e4d8; --card: #fffdf8;
  --fg: #1c1b19; --fg-2: #48463f; --fg-3: #8a867c; --line: #d9d3c5;
  --accent: #9a1f16; --accent-bg: #f4e4df; --link: #1d4f91;
  --quote: #d9d3c5; --quote-bg: rgba(255, 255, 255, .55);
  --mark: #f6e7b4; --mark-strong: #fbe0e8; --ok: #1f6a43; --ok-bg: #e4efe6;
  --danger: #a33; --shadow: 0 6px 24px rgba(0, 0, 0, .12);
}
:root[data-theme="white"] {
  --bg: #ffffff; --bg-2: #f5f6f7; --bg-3: #ebedf0; --card: #ffffff; --line: #e1e4e8;
  --quote-bg: rgba(0, 0, 0, .025);
}
:root[data-theme="green"] {
  --bg: #e3eed8; --bg-2: #d8e5cb; --bg-3: #cbdabd; --card: #ecf3e4; --line: #bfd0ae;
  --quote: #b3c6a0; --quote-bg: rgba(255, 255, 255, .35); --mark: #efe4a2; --accent-bg: #eadccf;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: var(--fs); -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font); line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--fg-3); }
.small { font-size: .82em; }
.err-text { color: var(--danger); }
.ok-text { color: var(--ok); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.skip-link { position: absolute; left: -999px; top: 0; }
.skip-link:focus { left: .5rem; top: .5rem; z-index: 99; background: var(--card); padding: .3em .8em; border-radius: .4em; }
.noscript { padding: 2rem; text-align: center; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 顶栏 ---------- */
#topbar {
  position: sticky; top: 0; z-index: 30; height: var(--top-h);
  display: flex; align-items: center; gap: .7rem; padding: 0 .9rem;
  padding-left: max(.9rem, env(safe-area-inset-left)); padding-right: max(.9rem, env(safe-area-inset-right));
  background: var(--bg); border-bottom: 1px solid var(--line);
  font-size: .85rem; transition: transform .2s ease;
}
#brand { display: inline-flex; align-items: center; gap: .45em; font-family: var(--font); font-size: 1.08em; font-weight: 650; color: var(--fg); letter-spacing: .04em; white-space: nowrap; }
#brand:hover { text-decoration: none; }
#brand .brand-mark { width: 1.6em; height: 1.6em; flex: none; }
#brand .brand-hi { stroke: var(--brand-hi); }
#topnav { display: flex; gap: 1.2em; margin-left: 1em; }
#topnav a { color: var(--fg-2); position: relative; padding: .3em 0; }
#topnav a.on { color: var(--accent); font-weight: 600; }
.spacer { flex: 1; }
#top-right { display: flex; align-items: center; gap: .5em; }
.top-link { color: var(--fg-2); font-size: .9em; padding: .3em .35em; white-space: nowrap; }
.top-link:hover, .top-link.on { color: var(--accent); text-decoration: none; }
.top-link.on { font-weight: 600; }
.dot { display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--danger); margin-left: .25em; vertical-align: super; }
.icon-btn, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3em;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg);
  border-radius: .5em; padding: .3em .8em; cursor: pointer; white-space: nowrap; line-height: 1.4;
}
.icon-btn:hover, .btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); }
.btn.primary:hover { color: var(--on-accent, #fff); opacity: .9; }
/* 夜间的强调色是亮青色，按钮上的字改用深色才看得清 */
:root[data-theme="dark"] { --on-accent: #06222b; }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--fg-2); }
.btn.ghost:hover { color: var(--accent); }
.btn.small { font-size: .8em; padding: .15em .65em; }
.btn.big { font-size: 1.02em; padding: .5em 1.3em; min-height: 46px; }
.btn[disabled] { opacity: .5; cursor: default; }
.btn.on { border-color: var(--accent); color: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); }
.me-btn {
  display: inline-flex; align-items: center; gap: .4em; flex: none; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg);
  border-radius: 999px; padding: .15em .75em .15em .2em; font-size: .9em; position: relative;
}
.me-btn:hover { border-color: var(--accent); }
.me-btn .dot { position: absolute; top: 0; left: 1.4em; }

/* ---------- 演示条 ---------- */
#demo-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4em .8em;
  padding: .35rem .9rem; font-size: .78rem; color: var(--fg-2);
  background: var(--bg-2); border-bottom: 1px dashed var(--line);
}
#demo-bar b { color: var(--accent); }

/* ---------- 布局 ---------- */
#layout { min-height: calc(100vh - var(--top-h)); }
#main { padding: 1.6rem 2.2rem 5rem; min-width: 0; outline: none; }
#content { max-width: 760px; margin: 0 auto; }
#content.wide { max-width: 1080px; }
#content.full { max-width: none; }
#sidebar {
  position: fixed; left: 0; top: var(--top-h); bottom: 0; width: min(21rem, 86vw); z-index: 40;
  overflow-y: auto; padding: 1.1rem .9rem 3rem; border-right: 1px solid var(--line); background: var(--bg-2);
  font-size: .82rem; line-height: 1.6;
  transform: translateX(-100%); visibility: hidden;
  transition: transform .18s ease, visibility 0s linear .18s;
}
body.nav-open #sidebar { transform: none; visibility: visible; box-shadow: var(--shadow); transition: transform .18s ease; }
#sidebar-mask { display: none; }
body.nav-open #sidebar-mask { display: block; position: fixed; inset: var(--top-h) 0 0 0; background: rgba(0, 0, 0, .25); z-index: 35; }
.drawer-chs { list-style: none; margin: 0; padding: 0; }
.drawer-chs a { display: flex; align-items: baseline; gap: .5em; padding: .5em .55em; border-radius: .4em; color: var(--fg-2); min-height: 40px; }
.drawer-chs a:hover { background: var(--bg-3); color: var(--fg); text-decoration: none; }
.drawer-chs a.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.drawer-chs .chn { flex: none; min-width: 2.9em; font-size: .85em; font-weight: 600; color: var(--accent); }

/* ---------- 通用部件 ---------- */
.page-head { display: flex; align-items: baseline; gap: .8em 1em; flex-wrap: wrap; margin: 0 0 1.2em; }
.page-head h1 { margin: 0; font-size: 1.45em; font-family: var(--serif); letter-spacing: .04em; }
.page-head .actions { margin-left: auto; display: flex; gap: .5em; flex-wrap: wrap; }
h2.sec { font-size: 1.02em; color: var(--accent); letter-spacing: .12em; margin: 2em 0 .7em; padding-top: 1em; border-top: 1px solid var(--line); font-weight: 600; }
.card {
  border: 1px solid var(--line); border-radius: .8em; padding: 1.1em 1.3em; margin: 0 0 1.3em; background: var(--card);
  min-width: 0; overflow-wrap: anywhere;
}
.card h2, .card h3 { margin: 0 0 .4em; font-size: 1.1em; font-family: var(--serif); }
.card .sub { color: var(--fg-3); font-size: .85em; margin-bottom: .8em; }
.card .actions { display: flex; gap: .7em; flex-wrap: wrap; margin-top: 1em; align-items: center; }
.empty { padding: 1.2em 1.4em; border: 1px dashed var(--line); border-radius: .8em; color: var(--fg-2); background: var(--bg-2); }
.pill { display: inline-block; font-size: .75em; padding: .05em .6em; border-radius: 999px; background: var(--accent-bg); color: var(--accent); margin-right: .3em; vertical-align: middle; white-space: nowrap; }
.pill.grey { background: var(--bg-3); color: var(--fg-2); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: #f7e3c8; color: #8a4b08; }
[data-theme="dark"] .pill.warn { background: #4a3520; color: #f3c58f; }
.chips { display: flex; flex-wrap: wrap; gap: .4em; margin: .6em 0; }
.chip {
  font-size: .82em; padding: .2em .9em; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--fg-2); min-height: 32px;
}
.chip.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip.drop-target { border-color: var(--accent); border-style: dashed; color: var(--accent); }
.seg { display: inline-flex; flex-wrap: wrap; gap: .3em; }
.seg button { min-height: 38px; min-width: 3em; border: 1px solid var(--line); background: var(--bg); color: var(--fg-2); border-radius: .5em; padding: .2em .8em; cursor: pointer; }
.seg button.on { border-color: var(--accent); color: var(--accent); font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent); }
.seg button.th-paper { background: #f8f6f0; color: #1c1b19; }
.seg button.th-white { background: #ffffff; color: #1c1b19; }
.seg button.th-green { background: #e3eed8; color: #1c1b19; }
.seg button.th-dark { background: #14181c; color: #e6ebef; }
.field { margin: 1em 0; }
.field > label, .field > .label { display: block; font-size: .86em; color: var(--fg-2); margin-bottom: .3em; }
.field .hint { font-size: .78em; color: var(--fg-3); margin-top: .3em; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], textarea, select {
  width: 100%; padding: .55em .8em; border: 1px solid var(--line); border-radius: .55em;
  background: var(--bg); color: var(--fg); outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
select { width: auto; max-width: 100%; }
textarea { min-height: 6em; resize: vertical; line-height: 1.6; }
.check { display: flex; align-items: flex-start; gap: .5em; margin: .5em 0; cursor: pointer; }
.check input { margin-top: .35em; width: 1.05em; height: 1.05em; flex: none; }
.check .desc { display: block; font-size: .8em; color: var(--fg-3); }
.row { display: flex; gap: .6em; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row .left { margin-right: auto; color: var(--fg-3); font-size: .85em; }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain > li { padding: .7em 0; border-bottom: 1px solid var(--line); }
.list-plain > li:last-child { border-bottom: 0; }
.kv { display: grid; grid-template-columns: 6em 1fr; gap: .35em 1em; margin: 0; }
.kv dt { color: var(--fg-3); font-size: .9em; }
.kv dd { margin: 0; }
.avatar {
  --h: 200;
  display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
  width: 1.8em; height: 1.8em; border-radius: 50%;
  background: hsl(var(--h) 42% 45%); color: #fff; font-size: .8em; font-weight: 700; line-height: 1;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.xs { width: 1.45em; height: 1.45em; font-size: .68em; }
.avatar.lg { width: 3.2em; height: 3.2em; font-size: 1.15em; }
.who { display: inline-flex; align-items: center; gap: .3em; color: var(--fg-2); font-weight: 600; }
.who:hover { color: var(--accent); text-decoration: none; }
.crumbs { font-size: .82em; color: var(--fg-3); margin-bottom: .6em; }
.crumbs a { color: var(--fg-3); }
.crumbs a:hover { color: var(--accent); }
.tabs { display: flex; gap: 1.6em; margin: 0 0 1.2em; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs a, .tabs button { flex: none; margin-bottom: -1px; padding: .5em 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--fg-2); font-weight: 500; cursor: pointer; min-height: 40px; }
.tabs a:hover { color: var(--fg); text-decoration: none; }
.tabs .on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.switch { position: relative; display: inline-block; width: 2.6em; height: 1.5em; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); cursor: pointer; transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: .12em; left: .14em; width: 1.12em; height: 1.12em; border-radius: 50%; background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.switch input:checked + span { background: var(--accent); border-color: var(--accent); }
.switch input:checked + span::after { transform: translateX(1.08em); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.set-row { display: flex; align-items: center; gap: .8em 1.2em; flex-wrap: wrap; padding: .8em 0; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-row .set-label { flex: 1 1 14em; min-width: 0; }
.set-row .set-label .desc { display: block; font-size: .8em; color: var(--fg-3); }
.spin { display: inline-block; color: var(--fg-3); }

.menu-item {
  display: flex; align-items: center; gap: .5em; width: 100%; text-align: left; padding: .7em .3em; min-height: 46px; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--fg);
}
.menu-item:hover { color: var(--accent); text-decoration: none; }
.menu-item.danger { color: var(--danger); }

/* ---------- 弹窗、提示、抽屉 ---------- */
#dialog-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; }
#dialog { background: var(--bg); border-radius: 1em; box-shadow: var(--shadow); padding: 1.4em 1.6em; width: min(38rem, 100%); max-height: 90vh; overflow: auto; }
#dialog h3 { margin: 0 0 .6em; font-size: 1.1em; }
#dialog .row.end { margin-top: 1.2em; }
#toast { position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%); max-width: min(90vw, 36rem); background: var(--fg); color: var(--bg); padding: .55em 1.2em; border-radius: 999px; font-size: .85rem; z-index: 60; box-shadow: var(--shadow); text-align: center; }
#toast.err { background: var(--danger); color: #fff; border-radius: .8em; }
#drawer-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .25); z-index: 44; }
#drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(26rem, 92vw); z-index: 45;
  background: var(--bg); border-left: 1px solid var(--line); box-shadow: var(--shadow);
  padding: 1.2em 1.3em calc(2em + env(safe-area-inset-bottom)); overflow-y: auto; font-size: .92em;
}
#drawer h3 { margin: 0 0 .6em; font-family: var(--serif); }
#drawer .close { position: absolute; top: .8em; right: .9em; }
.copy-box { width: 100%; min-height: 9em; font-size: .85em; font-family: var(--mono); }
.secret { font-family: var(--mono); font-size: .9em; padding: .6em .8em; border: 1px dashed var(--accent); border-radius: .5em; background: var(--accent-bg); word-break: break-all; user-select: all; }

/* ---------- 简介页（像 README 的单栏纯文字） ---------- */
.readme { max-width: 720px; margin: 0 auto; line-height: 1.85; }
.readme h1 { font-family: var(--serif); font-size: 1.7em; margin: .2em 0 .5em; padding-bottom: .3em; border-bottom: 1px solid var(--line); letter-spacing: .06em; }
.readme h2 { font-family: var(--serif); font-size: 1.2em; margin: 2em 0 .6em; padding-bottom: .2em; border-bottom: 1px solid var(--line); }
.readme p, .readme li { margin: 0 0 .8em; }
.readme ol, .readme ul { padding-left: 1.4em; }
.readme table { border-collapse: collapse; width: 100%; font-size: .9em; margin: .6em 0 1.2em; }
.readme th, .readme td { border: 1px solid var(--line); padding: .45em .7em; text-align: left; }
.readme th { background: var(--bg-2); }
.readme code { font-family: var(--mono); font-size: .86em; background: var(--bg-3); padding: .1em .4em; border-radius: .3em; }
.readme .updated { color: var(--fg-3); font-size: .85em; margin-top: 2.5em; }
.site-foot { max-width: 760px; margin: 3em auto 0; padding-top: 1em; border-top: 1px solid var(--line); font-size: .8em; color: var(--fg-3); display: flex; gap: 1.2em; flex-wrap: wrap; }
.site-foot a { color: var(--fg-3); }

/* ---------- 登录、注册 ---------- */
.auth-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 1rem 0; }
.auth-card { width: min(25rem, 100%); padding: 1.8em 1.6em; border: 1px solid var(--line); border-radius: 1em; background: var(--card); box-shadow: var(--shadow); }
.auth-card h1 { font-family: var(--serif); margin: 0 0 .3em; letter-spacing: .1em; font-size: 1.45em; }
.auth-card input { font-size: max(16px, 1em); }
.auth-card .btn.big { width: 100%; margin-top: 1.2em; }
.auth-msg { color: var(--danger); margin-top: .8em; min-height: 1.4em; font-size: .9em; }
.auth-links { display: flex; justify-content: space-between; gap: 1em; margin-top: 1em; font-size: .88em; }
.auth-page.with-aside { flex-wrap: wrap; gap: 1.6rem 2.4rem; }
.auth-aside { width: min(25rem, 100%); font-size: .92em; color: var(--fg-2); }
.auth-aside h2 { margin: 0 0 .4em; font-family: var(--serif); font-size: 1.15em; color: var(--fg); }
.auth-aside > p { margin: 0 0 .8em; }
.auth-mock { margin: 0 0 .9em; padding: .7em .9em; border: 1px solid var(--line); border-radius: .7em; background: var(--card); font-size: .9em; }
.auth-mock-h { font-family: var(--serif); font-weight: 600; color: var(--fg); margin-bottom: .4em; }
.auth-mock-w { font-size: .82em; color: var(--fg-3); margin-bottom: .2em; }
.auth-mock ul, .auth-points { list-style: none; margin: 0; padding: 0; }
.auth-mock li { display: flex; align-items: baseline; gap: .5em; padding: .2em 0; }
.auth-points li { margin: 0 0 .35em; }
.auth-points b { color: var(--fg); }

/* ---------- 注册引导、三问 ---------- */
.steps { display: flex; gap: .5em; margin: 0 0 1.4em; font-size: .85em; color: var(--fg-3); flex-wrap: wrap; }
.steps span { padding: .2em .8em; border-radius: 999px; border: 1px solid var(--line); }
.steps span.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.steps span.done { background: var(--bg-3); }
.q-block { margin: 0 0 1.6em; }
.q-block h3 { font-size: 1em; margin: 0 0 .5em; }
.topic-row { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; padding: .4em 0; border-bottom: 1px dashed var(--line); }
.topic-row .t { min-width: 4.5em; font-weight: 600; }
.pair { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; margin: .5em 0; }
.pair .muted { font-size: .85em; }
.store-note { font-size: .82em; color: var(--fg-2); background: var(--bg-2); border-radius: .6em; padding: .8em 1em; line-height: 1.7; }
.store-note b { color: var(--fg); }

/* ---------- 书架、书单 ---------- */
.continue { display: flex; align-items: center; gap: 1em; margin: 0 0 1.8em; padding: .85em 1.1em; border: 1px solid var(--line); border-radius: .8em; background: var(--card); color: var(--fg); box-shadow: var(--shadow); }
.continue:hover { border-color: var(--accent); text-decoration: none; }
.continue-info { flex: 1; min-width: 0; }
.continue-label { font-size: .72em; letter-spacing: .12em; color: var(--accent); }
.continue-book { font-family: var(--serif); font-weight: 700; }
.continue-ch { font-size: .88em; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.continue-go { font-size: 1.4em; color: var(--fg-3); }
.shelf-toolbar { display: flex; align-items: center; gap: .6em 1em; flex-wrap: wrap; margin: 0 0 1em; font-size: .88em; }
.shelf-toolbar select { padding: .3em .5em; }
.shelf-toolbar .grow { flex: 1; }
.manual-hint { font-size: .8em; color: var(--fg-3); margin: -.4em 0 1em; }
.shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 1.7rem 1.4rem; }
.book-tile { position: relative; display: block; min-width: 0; color: var(--fg); -webkit-touch-callout: none; }
.book-tile:hover { text-decoration: none; }
.book-tile:hover .cover { transform: translateY(-3px); }
.book-tile .tile-menu { position: absolute; top: .3em; right: .3em; z-index: 3; min-width: 32px; min-height: 32px; padding: 0 .4em; border-radius: .4em; border: 0; background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; }
.tile-title { margin-top: .6em; font-size: .9em; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-meta { margin-top: .15em; font-size: .74em; color: var(--fg-3); }
.tile-badge { display: inline-block; margin-top: .35em; padding: .05em .55em; border-radius: 999px; font-size: .7em; background: var(--accent-bg); color: var(--accent); }
.tile-badge.st-reading { background: var(--ok-bg); color: var(--ok); }
.tile-badge.st-done, .tile-badge.st-paused { background: var(--bg-3); color: var(--fg-2); }
.progress { height: 3px; margin-top: .45em; border-radius: 2px; background: var(--bg-3); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); }
.cover {
  --c1: hsl(30 46% 40%); --c2: hsl(30 50% 27%);
  position: relative; width: 100%; aspect-ratio: 2 / 3; padding: .95em .85em; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: .25em .55em .55em .25em; color: #fbf7ee;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: inset 4px 0 0 rgba(0, 0, 0, .16), 0 4px 14px rgba(0, 0, 0, .14);
  transition: transform .15s, box-shadow .15s;
}
.cover-title { font-family: var(--serif); font-size: .98em; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.cover-author { font-size: .68em; opacity: .85; }
.cover.mini { width: 2.9rem; flex: none; padding: .35em; }
.cover.mini .cover-title { font-size: .42em; -webkit-line-clamp: 4; }
.cover.mini .cover-author { display: none; }
.cover.big { width: 9rem; flex: none; font-size: 1.05em; }
.cover.has-img { padding: 0; background: var(--bg-3); }
.cover.has-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-theme="dark"] .cover:not(.has-img) { filter: brightness(.82) saturate(.9); }
.shelf-rows { list-style: none; margin: 0; padding: 0; }
.shelf-rows li { display: flex; align-items: center; gap: .9em; padding: .7em .3em; border-bottom: 1px solid var(--line); -webkit-touch-callout: none; }
.shelf-rows .info { flex: 1; min-width: 0; }
.shelf-rows .t { font-weight: 600; color: var(--fg); }
.shelf-rows .m { font-size: .8em; color: var(--fg-3); }
.shelf-grid .book-tile, .shelf-rows li { -webkit-user-select: none; user-select: none; }
.drag-handle { cursor: grab; color: var(--fg-3); padding: .3em .5em; min-width: 36px; min-height: 36px; border: 0; background: none; touch-action: none; }
.dragging { opacity: .35; }
.drag-ghost { position: fixed; z-index: 70; pointer-events: none; opacity: .9; transform: rotate(2deg); box-shadow: var(--shadow); }
.drop-before { box-shadow: -4px 0 0 var(--accent); }
.shelf-rows li.drop-before { box-shadow: 0 -3px 0 var(--accent); }
.lifting { transform: scale(1.04); transition: transform .12s; }
.people-strip { margin: 2.4em 0 0; }
.reader-row { display: flex; gap: .8em; overflow-x: auto; padding: .1em 0 .6em; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.reader { flex: none; display: grid; grid-template-columns: auto 1fr; gap: 0 .55em; align-items: center; min-width: 11em; max-width: 16em; padding: .6em .85em; scroll-snap-align: start; border: 1px solid var(--line); border-radius: .8em; background: var(--card); color: var(--fg); }
.reader:hover { border-color: var(--accent); text-decoration: none; }
.reader .avatar { grid-row: span 3; }
.reader-name { font-weight: 600; font-size: .9em; }
.reader-what { font-size: .8em; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-when { font-size: .72em; color: var(--fg-3); }

/* ---------- 书库、版本卡 ---------- */
.market-search { display: flex; gap: .5em; margin: 0 0 .8em; }
.market-search input { flex: 1; }
.filters { display: flex; gap: .6em 1em; flex-wrap: wrap; align-items: center; font-size: .86em; margin: 0 0 1.2em; }
.filters label { display: inline-flex; align-items: center; gap: .3em; color: var(--fg-2); }
.market-card { display: flex; gap: 1.1em; padding: 1em 0; border-bottom: 1px solid var(--line); }
.market-card .cover { width: 4.6rem; flex: none; font-size: .7em; }
.market-card .body { flex: 1; min-width: 0; }
.market-card .title { font-family: var(--serif); font-weight: 700; font-size: 1.08em; color: var(--fg); }
.market-card .meta { font-size: .82em; color: var(--fg-3); }
.version-list { list-style: none; margin: .6em 0 0; padding: 0; }
.version-card { display: flex; align-items: center; gap: .5em 1em; flex-wrap: wrap; padding: .65em .8em; margin: 0 0 .5em; border: 1px solid var(--line); border-radius: .6em; background: var(--card); font-size: .88em; }
.version-card .vmain { flex: 1 1 16em; min-width: 0; }
.version-card .vby { font-weight: 600; }
.version-card .vmeta { color: var(--fg-3); font-size: .9em; }
.version-card .vact { display: flex; gap: .4em; flex-wrap: wrap; }
.version-card.current { border-color: var(--accent); }

/* ---------- 书页 ---------- */
.book-hero { display: flex; align-items: flex-end; gap: 1.6em; margin: 0 0 1.6em; }
.book-info { flex: 1; min-width: 0; }
.book-info h1 { margin: 0 0 .2em; font-family: var(--serif); font-size: 1.55em; line-height: 1.3; }
.book-info .zh-title { font-size: .9em; color: var(--fg-2); }
.book-info .authors { color: var(--fg-2); margin-top: .2em; }
.book-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; margin-top: 1em; }
.book-actions select { padding: .3em .5em; }
.for-you-card { border: 1px solid var(--accent); border-radius: .8em; padding: 1em 1.3em; margin: 0 0 1.4em; background: var(--card); }
.for-you-card h2 { margin: 0 0 .5em; font-size: 1.08em; font-family: var(--serif); color: var(--accent); }
.for-you-card ul { margin: .2em 0 .6em; padding-left: 1.2em; }
.for-you-card li { margin: 0 0 .35em; }
.for-you-card .label { font-size: .8em; color: var(--fg-3); letter-spacing: .08em; }
.version-bar { display: flex; align-items: center; gap: .4em 1em; flex-wrap: wrap; padding: .7em 1em; margin: 0 0 1.4em; border-radius: .7em; background: var(--bg-2); font-size: .86em; }
.version-bar .vb-main { flex: 1 1 18em; min-width: 0; }
.ch-list { list-style: none; padding: 0; margin: .4em 0 0; }
.ch-list li { border-top: 1px solid var(--line); }
.ch-list li:first-child { border-top: 0; }
.ch-list a { display: block; padding: .65em .5em; border-radius: .4em; color: var(--fg); }
.ch-list a:hover { background: var(--bg-2); text-decoration: none; }
.ch-list .ch-head { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap; }
.ch-list .chn { font-weight: 600; font-size: .78em; color: var(--accent); min-width: 3.2em; }
.ch-list .ch-title { font-weight: 600; flex: 1 1 12em; min-width: 0; }
.ch-list .todo .ch-title, .ch-list .todo .chn { color: var(--fg-3); font-weight: 500; }
.ch-list .ch-summary { font-size: .9em; color: var(--fg-2); margin: .15em 0 0 3.8em; line-height: 1.6; }
.ch-flag { font-size: .72em; padding: .05em .6em; border-radius: 999px; white-space: nowrap; border: 1px solid var(--line); color: var(--fg-3); }
.ch-flag.pick { border-color: var(--accent); color: var(--accent); }
.ch-flag.skip { border-style: dashed; }
.guide { line-height: var(--lh); }
.mark-list { list-style: none; padding: 0; margin: 0; }
.mark-item { padding: .7em 0; border-bottom: 1px solid var(--line); }
.mark-where { font-size: .8em; font-weight: 600; color: var(--accent); margin-right: .6em; }

/* ---------- 章页 ---------- */
.ch-page-head { margin-bottom: 1.2em; padding-bottom: 1em; border-bottom: 1px solid var(--line); }
.ch-page-head h1 { margin: 0 0 .3em; font-size: 1.45em; line-height: 1.35; font-family: var(--serif); }
.ch-page-head h1 .chn { font-family: var(--font); font-size: .68em; color: var(--accent); margin-right: .3em; }
.ch-page-head .byline { font-size: .82em; color: var(--fg-3); }
.ch-page-head .nav { display: flex; gap: .5em; flex-wrap: wrap; align-items: center; margin-top: .7em; }
.adjust-line { margin: 0 0 1.2em; padding: .55em .9em; font-size: .88em; color: var(--fg-2); background: var(--bg-2); border-radius: .5em; }
.adjust-line b { color: var(--accent); font-weight: 600; margin-right: .4em; }
.fy { margin: 0 0 1.8em; padding: 1.1em 1.3em 1em; border: 1px solid var(--accent); border-radius: .9em; background: var(--card); }
.fy > h2 { margin: 0 0 .8em; font-size: 1.1em; font-family: var(--serif); color: var(--accent); letter-spacing: .08em; }
.fy-item { padding: .8em 0; border-top: 1px dashed var(--line); }
.fy-item:first-of-type { border-top: 0; padding-top: .2em; }
.fy-reason { font-weight: 600; color: var(--fg); line-height: 1.65; }
.fy-reason .why { font-size: .72em; color: var(--accent); border: 1px solid var(--accent); border-radius: .3em; padding: 0 .35em; margin-right: .45em; vertical-align: .12em; font-weight: 500; }
.fy-body { margin: .4em 0 0; line-height: var(--lh); color: var(--fg-2); }
.serif-body .fy-body, .serif-body .fy-reason { font-family: var(--serif); }
.fy-excerpt { margin: .5em 0 0; font-size: .9em; }
.fy-excerpt summary { cursor: pointer; color: var(--link); min-height: 32px; display: inline-flex; align-items: center; }
.fy-excerpt blockquote { margin: .4em 0 0; padding: .5em 1em; border-left: 4px solid var(--quote); background: var(--quote-bg); color: var(--fg-2); border-radius: 0 .5em .5em 0; }
.fy-excerpt .loc { display: block; font-size: .78em; color: var(--fg-3); margin-top: .3em; }
.fy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45em; margin-top: .55em; }
.fy-actions .btn { font-size: .8em; padding: .15em .75em; }
.fy-actions .btn.hit.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.fy-actions .btn.miss.on { background: var(--danger); border-color: var(--danger); color: #fff; }
.basis-chip { font-size: .72em; padding: .05em .55em; border-radius: .3em; border: 1px dashed var(--accent); color: var(--accent); background: transparent; cursor: pointer; margin-left: .4em; vertical-align: .12em; }
.basis-chip:hover { background: var(--accent-bg); }
.fy-more { margin-top: .6em; }
.fy-sign { margin-top: .9em; padding-top: .6em; border-top: 1px solid var(--line); font-size: .78em; color: var(--fg-3); }
.fy-alt { margin-top: 1em; padding: .8em 1em; border-radius: .6em; background: var(--bg-2); }
.fy-alt h3 { margin: 0 0 .4em; font-size: .95em; color: var(--fg-2); }
.fy-lead { margin: -.4em 0 .8em; }
.fy-note { margin: 0 0 .4em; }
.fy-note-fb { margin: 1em 0 0; padding-top: .7em; border-top: 1px solid var(--line); }
.fy-legacy { margin: 0 0 .8em; padding: .45em .8em; font-size: .85em; color: var(--fg-2); background: var(--bg-2); border-radius: .5em; }
.fy-nav { margin: 1em 0 0; border: 1px dashed var(--line); border-radius: .7em; padding: .2em 1em; background: var(--bg-2); }
.fy-nav > summary { cursor: pointer; padding: .55em 0; color: var(--fg-2); font-weight: 600; min-height: 40px; }
.fy-nav-part { margin: .8em 0; }
.fy-nav-part h3 { margin: 0 0 .4em; font-size: .95em; color: var(--fg-2); }
.fy-nav-part li { margin: 0 0 .6em; }
.fy-nav-part .why { color: var(--fg-3); font-size: .88em; }
.ol-g { padding: .45em .8em .15em; font-size: .78em; color: var(--fg-3); letter-spacing: .06em; }
.fy-empty { text-align: left; }
.fy-empty p { margin: .2em 0 .8em; color: var(--fg-2); }
.skip-box { margin: 0 0 1.8em; border: 1px dashed var(--line); border-radius: .8em; padding: .3em 1.1em; background: var(--bg-2); }
.skip-box > summary { cursor: pointer; padding: .6em 0; color: var(--fg-2); font-weight: 600; min-height: 40px; }
.skip-box li { margin: 0 0 .6em; }
.skip-box .why { color: var(--fg-3); font-size: .88em; }
.prior-note { font-size: .82em; color: var(--fg-3); margin: 0 0 1em; }
.md { line-height: var(--lh); }
/* 老站的 {{词|注释}}：悬停或点一下（tabindex 让手机上也能聚焦）浮出注释，注释文字在 data-note 里 */
.md .gloss { position: relative; border-bottom: 1px dotted var(--accent); cursor: help; outline: none; }
.md .gloss:hover::after, .md .gloss:focus::after {
  content: attr(data-note); position: absolute; left: 0; top: calc(100% + .35em); z-index: 40;
  width: max-content; max-width: min(28em, 82vw); padding: .65em .85em; white-space: normal;
  background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); font-family: var(--font); font-size: .82em; line-height: 1.6; font-weight: 400;
}
.md p.inference {
  margin: 1.2em 0;
  padding: .7em 1em;
  border-left: 4px solid var(--accent);
  background: var(--bg-2);
  color: var(--fg-2);
  border-radius: 0 .4em .4em 0;
}
.serif-body .md p, .serif-body .md li, .serif-body .md blockquote { font-family: var(--serif); }
.md h1, .md h2, .md h3 { font-family: var(--serif); line-height: 1.4; }
.md h2 { font-size: 1.25em; margin: 1.8em 0 .6em; padding-bottom: .25em; border-bottom: 1px solid var(--line); }
.md h3 { font-size: 1.1em; margin: 1.5em 0 .5em; }
.md p, .md li { margin: 0 0 1em; }
.md ul, .md ol { padding-left: 1.5em; }
.md strong { font-weight: 700; background: linear-gradient(transparent 62%, var(--mark-strong) 62%); padding: 0 .1em; }
.md blockquote { margin: 1.2em 0; padding: .5em 1.2em; border-left: 5px solid var(--quote); background: var(--quote-bg); color: var(--fg-2); border-radius: 0 .5em .5em 0; }
.md code { font-family: var(--mono); font-size: .86em; background: var(--bg-3); padding: .1em .4em; border-radius: .3em; }
.md pre { background: var(--bg-3); padding: 1em; border-radius: .5em; overflow-x: auto; font-size: .82em; }
.md table { border-collapse: collapse; display: block; overflow-x: auto; font-size: .9em; margin: 1.2em 0; }
.md th, .md td { border: 1px solid var(--line); padding: .4em .7em; }
.md img { max-width: 100%; }
.para { position: relative; border-radius: .3em; transition: opacity .15s; }
.para.picked { box-shadow: -4px 0 0 var(--accent); padding-left: .7em; margin-left: -.7em; }
.para.picked::before { content: "为你挑过"; display: block; font-family: var(--font); font-size: .68em; color: var(--accent); letter-spacing: .08em; }
.para.skippable { opacity: .5; }
.para.skippable:hover, .para.skippable:focus-within { opacity: .9; }
.para.bm::after { content: ""; position: absolute; right: -1.1rem; top: .3em; width: .55rem; height: 1.15em; background: var(--accent); opacity: .85; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }
.flash { animation: flash 2.4s ease-out; }
@keyframes flash { from { background: var(--mark); } to { background: transparent; } }
.rate { display: inline-flex; flex-wrap: wrap; gap: .25em; margin-left: .5em; opacity: 0; transition: opacity .12s; user-select: none; vertical-align: baseline; font-family: var(--font); }
.para:hover .rate, .rate:focus-within, .rate.rated { opacity: 1; }
.rate-btn { font-size: .7em; line-height: 1.5; padding: 0 .55em; border-radius: 1em; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--fg-3); white-space: nowrap; }
.rate-btn:hover { border-color: var(--fg-3); color: var(--fg-2); }
.rate-btn.on { font-weight: 600; }
.rate-btn.r-clarity.on { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
.rate-btn.r-clarity.neg.on { background: #b4521f; border-color: #b4521f; color: #fff; }
.rate-btn.r-interest.on { background: #7a5cc4; border-color: #7a5cc4; color: #fff; }
.rate-btn.r-mark.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rate-btn.r-note .n { margin-left: .2em; }
.ch-pager { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin: 2.4em 0 1em; }
.ch-pager a { display: flex; flex-direction: column; gap: .15em; min-width: 0; padding: .75em 1em; border: 1px solid var(--line); border-radius: .7em; background: var(--card); color: var(--fg); }
.ch-pager a:hover { border-color: var(--accent); text-decoration: none; }
.ch-pager .dir { font-size: .75em; color: var(--fg-3); }
.ch-pager .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-pager .next { grid-column: 2; text-align: right; }
.end-prompt { margin: 2em 0 1em; padding: 1em 1.2em; border: 1px dashed var(--line); border-radius: .8em; background: var(--bg-2); }
.end-prompt p { margin: 0 0 .7em; color: var(--fg-2); }

/* 对照：电脑和横屏 iPad 左右双栏同步滚动；窄屏上下切换 */
.compare-bar { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; margin: 0 0 .8em; font-size: .86em; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; }
.cmp-col { height: calc(100vh - var(--top-h) - 9rem); overflow-y: auto; padding: 0 .8em 3em 0; border-right: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
.cmp-col:last-child { border-right: 0; }
.cmp-col .cmp-head { position: sticky; top: 0; background: var(--bg); padding: .4em 0; font-size: .82em; color: var(--fg-3); border-bottom: 1px solid var(--line); margin-bottom: .8em; z-index: 1; }
.cmp-switch { display: none; }
@media (max-width: 899px) {
  .compare { grid-template-columns: 1fr; }
  .cmp-col { height: auto; overflow: visible; border-right: 0; padding-right: 0; }
  .cmp-col:not(.show) { display: none; }
  .cmp-switch { display: inline-flex; }
}

/* ---------- 批注 ---------- */
.ann-box { margin-top: 2.4em; }
.ann-compose { margin: .8em 0 1.2em; }
.ann-compose .row { margin-top: .5em; }
.ann-list { list-style: none; margin: 0; padding: 0; }
.ann { margin: 0 0 .8em; padding: .7em .95em; background: var(--bg-2); border-left: 3px solid var(--line); border-radius: .45em; }
.ann.mine { border-left-color: var(--accent); }
.ann-stamp { display: flex; align-items: center; gap: .4em; flex-wrap: wrap; font-size: .78em; color: var(--fg-3); margin-bottom: .3em; }
.ann-stamp .floor { display: none; font-family: var(--mono); }
.ann-quote { font-size: .85em; color: var(--fg-2); border-left: 2px solid var(--quote); padding-left: .7em; margin-bottom: .4em; }
.ann-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ann-tools { display: flex; gap: .4em; flex-wrap: wrap; margin-top: .35em; }
.ann-tools .btn { font-size: .75em; padding: .05em .6em; }
.ann-children { list-style: none; margin: .6em 0 0 .6em; padding: 0 0 0 .8em; border-left: 1px dashed var(--line); }
.ann-children .ann { background: transparent; }
.ann.collapsed > .ann-text, .ann.collapsed > .ann-quote, .ann.collapsed > .ann-tools, .ann.collapsed > .ann-children { display: none; }
.collapse-btn { display: none; border: 0; background: none; color: var(--fg-3); cursor: pointer; font-family: var(--mono); padding: 0 .3em; min-width: 28px; min-height: 28px; }

/* ---------- 论坛风格：书库、版本列表、批注变紧凑；正文不动 ---------- */
:root[data-style="forum"] .market-card { padding: .45em 0; gap: .7em; font-size: .9em; }
:root[data-style="forum"] .market-card .cover { width: 2.6rem; font-size: .45em; padding: .4em; }
:root[data-style="forum"] .market-card .cover .cover-author { display: none; }
:root[data-style="forum"] .market-card .title { font-family: var(--font); font-size: 1em; }
:root[data-style="forum"] .version-list { margin-top: .3em; }
:root[data-style="forum"] .version-card { border-radius: 0; border-width: 0 0 1px; margin: 0; padding: .35em .2em; background: transparent; font-size: .82em; }
:root[data-style="forum"] .ann { background: transparent; border-left: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin: 0; padding: .4em .2em; font-size: .9em; }
:root[data-style="forum"] .ann-stamp .floor { display: inline; }
:root[data-style="forum"] .collapse-btn { display: inline-block; }
:root[data-style="forum"] .ann-children { margin-left: .9em; padding-left: .7em; border-left: 2px solid var(--line); }
:root[data-style="forum"] .ann-children .ann:last-child { border-bottom: 0; }
:root[data-style="forum"] .shelf-rows li { padding: .4em .2em; }
:root[data-style="forum"] .list-plain > li { padding: .45em 0; }

/* ---------- 设置、阅读档案、好友 ---------- */
.settings-layout { display: grid; grid-template-columns: 11em 1fr; gap: 1.6em; }
.settings-nav { display: flex; flex-direction: column; gap: .2em; position: sticky; top: calc(var(--top-h) + 1rem); align-self: start; }
.settings-nav a { padding: .5em .8em; border-radius: .5em; color: var(--fg-2); min-height: 40px; }
.settings-nav a.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.settings-nav a:hover { text-decoration: none; background: var(--bg-2); }
.settings-body h2 { font-family: var(--serif); font-size: 1.2em; margin: 0 0 .8em; }
.settings-body h3 { font-size: 1em; margin: 1.8em 0 .5em; color: var(--fg-2); }
.preview-box { border: 1px solid var(--line); border-radius: .8em; padding: 1em 1.2em; background: var(--card); }
.look-sample { margin-top: 1em; padding: 1em 1.2em; border: 1px solid var(--line); border-radius: .8em; background: var(--bg); line-height: var(--lh); }
.serif-body .look-sample p { font-family: var(--serif); }
.brain-top { padding: .8em 1em; background: var(--bg-2); border-radius: .6em; font-size: .9em; color: var(--fg-2); margin: 0 0 1.4em; }
.brain-sec { margin: 0 0 2em; }
.brain-sec > h2 { font-family: var(--serif); font-size: 1.1em; margin: 0 0 .5em; display: flex; align-items: baseline; gap: .6em; }
.brain-entry { padding: .75em .9em; margin: 0 0 .6em; border: 1px solid var(--line); border-radius: .6em; background: var(--card); }
.brain-entry.off { opacity: .6; }
.brain-entry.pending { border-style: dashed; border-color: var(--accent); }
.brain-entry .val { white-space: pre-wrap; overflow-wrap: anywhere; }
.brain-entry .meta { font-size: .76em; color: var(--fg-3); margin-top: .3em; display: flex; flex-wrap: wrap; gap: .2em .9em; }
.brain-entry .tools { display: flex; gap: .4em; flex-wrap: wrap; margin-top: .5em; }
.brain-entry .tools .btn { font-size: .78em; padding: .1em .65em; }
.used-in { margin: .5em 0 0; padding-left: 1.1em; font-size: .85em; color: var(--fg-2); }
.used-in li { margin: 0 0 .25em; }
.profile-head { display: flex; gap: 1em; align-items: center; margin: 0 0 1.2em; }
.profile-head h1 { margin: 0; font-family: var(--serif); font-size: 1.45em; }
.person-row { display: flex; align-items: center; gap: .6em 1em; flex-wrap: wrap; }
.person-row .person { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; color: var(--fg); min-width: 9em; }
.person-row .grow { flex: 1; min-width: 0; color: var(--fg-2); font-size: .88em; }
.invite-row { display: flex; gap: .6em 1em; flex-wrap: wrap; align-items: center; }
.invite-row .code { font-family: var(--mono); font-size: .88em; }

/* ---------- 手机、iPad：底栏；读书时往下滑收起顶栏和底栏 ---------- */
#read-bar, #tab-bar { display: none; }
.rb-btn { flex: 1; min-height: 48px; min-width: 0; border: 0; border-radius: .5em; cursor: pointer; background: none; color: var(--fg-2); font-size: .9rem; display: flex; align-items: center; justify-content: center; text-decoration: none; position: relative; }
.rb-btn:hover { text-decoration: none; }
.rb-btn:active { background: var(--bg-3); }
.rb-btn.on { color: var(--accent); font-weight: 600; }
.rb-btn[disabled] { opacity: .3; cursor: default; }
/* 读书时的底栏在 iPad 和触屏上也要；主导航底栏只在顶栏收起主导航的窄屏上出，宽屏顶栏里已经有这几项 */
@media (max-width: 1024px), (hover: none) {
  body.reading #read-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    padding: .2rem max(.4rem, env(safe-area-inset-right)) calc(.2rem + env(safe-area-inset-bottom)) max(.4rem, env(safe-area-inset-left));
    background: var(--bg); border-top: 1px solid var(--line); transition: transform .2s ease;
  }
  body.reading.bars-hidden #read-bar { transform: translateY(110%); }
  body.reading.bars-hidden #topbar { transform: translateY(-100%); }
  body.reading #main { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  body.reading #toast { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 860px) {
  body.tabbed #tab-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    padding: .2rem max(.4rem, env(safe-area-inset-right)) calc(.2rem + env(safe-area-inset-bottom)) max(.4rem, env(safe-area-inset-left));
    background: var(--bg); border-top: 1px solid var(--line); transition: transform .2s ease;
  }
  body.tabbed #main { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  body.tabbed #toast { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 860px) {
  #main { padding: 1.1rem max(1rem, env(safe-area-inset-right)) 4rem max(1rem, env(safe-area-inset-left)); }
  #topnav { display: none !important; }
  .top-link.in-menu { display: none; }
  .me-btn .me-name { display: none; }
  .me-btn { padding: .15em; }
  .book-hero { align-items: flex-start; gap: 1.1em; }
  .cover.big { width: 6.2rem; }
  .shelf-grid { grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr)); gap: 1.3rem .9rem; }
  .ch-list .ch-summary { margin-left: 0; }
  .settings-layout { grid-template-columns: 1fr; gap: .6em; }
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; gap: .3em; padding-bottom: .3em; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .settings-nav a { flex: none; }
  .kv { grid-template-columns: 1fr; gap: .1em; }
  .kv dt { margin-top: .5em; }
  .para.bm::after { right: auto; left: -.85rem; }
  .para.picked { margin-left: -.5em; padding-left: .5em; }
  #dialog-mask { align-items: flex-end; padding: 0; }
  #dialog { width: 100%; max-height: 88vh; border-radius: 1em 1em 0 0; padding: 1.2em 1.1em calc(1.2em + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  html { font-size: calc(var(--fs) - 1px); }
  .market-card .cover { width: 3.6rem; }
}
/* 触屏没有悬停：段落工具常显但压淡；点按目标至少 44px 高 */
@media (hover: none) {
  .rate { opacity: .6; gap: .45em; }
  .rate.rated { opacity: 1; }
  .rate-btn { font-size: .8em; min-height: 36px; padding: 0 .85em; }
  .btn, .icon-btn, .chip, .seg button { min-height: 44px; }
  .btn.small, .fy-actions .btn, .ann-tools .btn, .brain-entry .tools .btn { min-height: 40px; padding: .2em .9em; }
  .basis-chip { min-height: 32px; padding: .1em .7em; }
  input, select, textarea { font-size: max(16px, 1em); }
  .drag-handle { min-width: 44px; min-height: 44px; }
}
@media print {
  #topbar, #read-bar, #tab-bar, #demo-bar, .rate, .fy-actions, .ann-box { display: none !important; }
}

/* ---------- 首页和「关于」：产品落地页（没登录时的 #/ 和 #/about）、中英切换 ----------
   字体固定用系统无衬线、字号从 16px 起算，不跟阅读外观走；颜色只用上面的变量，浅色和夜间主题都能用。
   body.lp-page 由 home.js 加上、换页时去掉，用来让落地页占满整宽。 */
.lang-switch { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang-switch button { border: 0; background: none; color: var(--fg-3); padding: .15em .75em; cursor: pointer; line-height: 1.5; }
.lang-switch button + button { border-left: 1px solid var(--line); }
.lang-switch button:hover { color: var(--accent); }
.lang-switch button.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
@media (hover: none) {
  .lang-switch button { min-height: 36px; }
}
@media (max-width: 480px) {
  .lang-switch { font-size: .9em; }
  .lang-switch button { padding: .15em .45em; }
}

body.lp-page #main { padding: 0; }
@media (max-width: 860px) {
  body.lp-page.tabbed #main { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
}
.lp {
  --lp-w: 1100px; --lp-pad: 28px; --lp-r: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 16px; line-height: 1.7; color: var(--fg);
}
:where(.lp) :where(h1, h2, h3, p, figure, dl, dd) { margin: 0; }
:where(.lp) :where(h1, h2, h3) { color: var(--fg); line-height: 1.25; }
.lp code { font-family: var(--mono); }
.lp [data-anchor] { scroll-margin-top: calc(var(--top-h) + 16px); }
.lp-wrap { max-width: var(--lp-w); margin: 0 auto; padding: 0 var(--lp-pad); }
.lp-sec { padding: 96px 0; }
.lp-sec.alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.lp-sec.tight { padding: 56px 0; }
.lp-head { max-width: 760px; margin: 0 0 44px; }
.lp-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.lp-kicker { margin: 0 0 12px; font-size: 13px; font-weight: 650; letter-spacing: .08em; color: var(--accent); }
.lp:lang(en) .lp-kicker { text-transform: uppercase; }
.lp-h2 { margin: 0 0 14px; font-size: clamp(26px, 3.1vw, 36px); font-weight: 750; text-wrap: balance; }
.lp-h3 { font-size: 20px; font-weight: 700; }
.lp-lead { font-size: 18px; line-height: 1.7; color: var(--fg-2); text-wrap: pretty; }
.lp:lang(en) .lp-h1, .lp:lang(en) .lp-h2 { letter-spacing: -.015em; }

/* 图标：描边跟字色，高亮那一笔用 logo 的青蓝 */
.lp-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lp-icon .hi { stroke: var(--brand-hi); stroke-width: 2.4; }
.lp-icon .dot { fill: currentColor; stroke: none; }
.lp-ico { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--accent-bg); color: var(--accent); }

/* 按钮和小部件 */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--fg);
  font-size: 16px; font-weight: 650; line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: transform .12s ease, border-color .12s, color .12s, filter .12s;
}
.lp-btn:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.lp-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); box-shadow: var(--shadow); }
.lp-btn-primary:hover { color: var(--on-accent, #fff); filter: brightness(1.08); }
.lp-btn[disabled] { opacity: .6; cursor: default; transform: none; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; }
.lp-note { font-size: 14px; color: var(--fg-3); }
.lp-linkbtn { border: 0; background: none; padding: 0; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lp-linkbtn:hover { color: var(--accent); }
.lp-tag { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; line-height: 1.6; white-space: nowrap; background: var(--accent-bg); color: var(--accent); }
.lp-tag.grey { background: var(--bg-3); color: var(--fg-2); }
.lp-where { font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.lp-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg-2); font-size: 13px; white-space: nowrap; }
.lp-chip.ok { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); font-weight: 650; }
.lp-chip.sel { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); font-weight: 650; }
.lp-fake-btn { display: inline-flex; flex-direction: column; justify-content: center; min-height: 32px; padding: 3px 12px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-bg); color: var(--accent); font-size: 13px; font-weight: 650; line-height: 1.35; white-space: nowrap; }
.lp-fake-btn small { font-size: 11px; font-weight: 500; opacity: .8; }
.lp-fake-btn.ghost { border-color: var(--line); background: var(--bg); color: var(--fg-2); font-weight: 500; }
.lp-fake-btn.danger { border-color: var(--danger); background: transparent; color: var(--danger); }
.lp-more { margin-top: 24px; font-size: 15px; color: var(--fg-2); }

/* 首屏：左边文字，右边「为你提炼」预览；背景是淡网格加一团青蓝的光 */
.lp-hero { position: relative; isolation: isolate; padding: 64px 0 96px; }
.lp-hero::before, .lp-pagehead::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(ellipse 75% 70% at 72% 30%, transparent 0%, var(--bg) 75%), linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px; background-position: center, center top, center top;
}
.lp-hero::after { content: ""; position: absolute; z-index: -1; top: 0; right: 4%; width: 620px; height: 620px; max-width: 100%; border-radius: 50%; background: radial-gradient(circle, var(--accent-bg) 0%, transparent 65%); pointer-events: none; }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.lp-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 4px 14px 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 600; color: var(--fg-2); }
.lp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-hi); box-shadow: 0 0 0 3px var(--accent-bg); }
.lp .lp-h1 { margin: 0 0 20px; font-size: clamp(38px, 4.3vw, 52px); line-height: 1.15; font-weight: 800; }
.lp-h1 span { display: inline-block; }
.lp-h1 .hl { color: var(--accent); }
.lp:lang(en) .lp-hero .lp-h1 { font-size: clamp(36px, 3.9vw, 48px); }
.lp-sub { margin: 0 0 28px; max-width: 34em; font-size: 18.5px; line-height: 1.75; color: var(--fg-2); text-wrap: pretty; }
.lp-points { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 16px; }
.lp-point { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; align-items: start; }
.lp-point .lp-ico { grid-row: span 2; }
.lp-point b { font-weight: 700; line-height: 1.5; }
.lp-point span:last-child { font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.lp-hero-visual { position: relative; }
.lp-hero-visual::before { content: ""; position: absolute; inset: 22px -14px -14px 22px; border: 1px dashed var(--line); border-radius: 18px; background: var(--bg-2); }

/* 像应用窗口的预览卡片 */
.lp-window { position: relative; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.lp-win-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.lp-win-dots { display: inline-flex; gap: 6px; }
.lp-win-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-3); }
.lp-win-title { flex: 1; margin-right: 42px; text-align: center; font-size: 12px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-win-body { display: grid; grid-template-columns: 58px minmax(0, 1fr); }
.lp-win-rail { display: flex; flex-direction: column; gap: 8px; padding: 20px 12px; border-right: 1px solid var(--line); background: var(--bg); }
.lp-win-rail span { display: block; height: 5px; border-radius: 3px; background: var(--bg-3); }
.lp-win-rail span.pick { height: 6px; background: var(--brand-hi); }
.lp-win-rail span.skip { background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 7px); }
.lp-win-main { min-width: 0; padding: 18px 20px 14px; }
.lp-win-kicker { font-size: 12px; color: var(--fg-3); }
.lp-win-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin: 2px 0 10px; }
.lp-win-h strong { font-size: 19px; font-weight: 750; color: var(--accent); }
.lp-win-h small { font-size: 12px; color: var(--fg-3); }
.lp-win-adjust { margin: 0 0 6px; padding: 7px 10px; border-left: 3px solid var(--brand-hi); border-radius: 0 8px 8px 0; background: var(--bg-2); font-size: 12.5px; line-height: 1.55; color: var(--fg-2); }
.lp-win-note { margin-top: 4px; }
.lp-win-sub { margin: 10px 0 4px; font-size: 14px; font-weight: 700; }
.lp-win-points { margin: 0; padding-left: 1.2em; }
.lp-win-points li { margin: 3px 0; font-size: 14px; line-height: 1.6; }
.lp-win-para { font-size: 14px; line-height: 1.7; }
.lp-win-fb { display: flex; gap: 6px; margin-top: 10px; }
.lp-win-fb .lp-chip { min-height: 24px; font-size: 12px; }
.lp-win-cap { padding: 9px 16px; border-top: 1px solid var(--line); background: var(--bg-2); font-size: 12px; line-height: 1.5; color: var(--fg-3); }

/* 通用摘要和「为你提炼」并排对比，下面一条讲两份提炼 */
.lp-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lp-card { border: 1px solid var(--line); border-radius: var(--lp-r); background: var(--card); padding: 28px; }
.lp-cmp.generic { background: var(--bg); }
.lp-cmp.mine { border-color: var(--accent); box-shadow: var(--shadow); }
.lp-cmp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.lp-cmp-head h3 { font-size: 20px; }
.lp-bars { display: flex; flex-direction: column; gap: 9px; margin: 0 0 22px; padding: 16px 18px; border-radius: 10px; background: var(--bg-2); }
.lp-bars span { display: block; height: 7px; border-radius: 4px; background: var(--bg-3); }
.lp-bars span.hi { height: 8px; background: var(--brand-hi); }
.lp-bars span.dim { background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 9px); }
.lp-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-ticks li { position: relative; padding-left: 28px; color: var(--fg-2); }
.lp-ticks li::before { content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-3); }
.lp-ticks li::after { content: ""; position: absolute; left: 5px; top: calc(.32em + 8px); width: 8px; height: 2px; background: var(--fg-3); }
.mine .lp-ticks li { color: var(--fg); }
.mine .lp-ticks li::before { background: var(--accent-bg); }
.mine .lp-ticks li::after { left: 6px; top: calc(.32em + 5px); width: 6px; height: 4px; background: none; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.lp-layers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; border: 1px solid var(--line); border-radius: var(--lp-r); background: var(--card); overflow: hidden; }
.lp-layers-lead { grid-column: 1 / -1; padding: 16px 24px; border-bottom: 1px solid var(--line); font-weight: 650; }
.lp-layer { padding: 20px 24px 22px; }
.lp-layer + .lp-layer { border-left: 1px solid var(--line); }
.lp-layer h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 17px; }
.lp-layer p { font-size: 15px; color: var(--fg-2); }

/* 四步上手：横排四张卡片，卡片之间有箭头；下面是「准不准」两层反馈 */
.lp-pre-note { display: flex; align-items: center; gap: 8px; margin: -28px 0 28px; font-size: 14px; color: var(--fg-3); }
.lp-pre-note .lp-icon { width: 18px; height: 18px; }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.lp-step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 20px; border: 1px solid var(--line); border-radius: var(--lp-r); background: var(--card); }
.lp-step:not(:last-child)::after { content: ""; position: absolute; top: 34px; right: -14px; width: 8px; height: 8px; border-top: 2px solid var(--fg-3); border-right: 2px solid var(--fg-3); transform: rotate(45deg); }
.lp-step-n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: var(--on-accent, #fff); font-size: 15px; font-weight: 750; }
.lp-step h3 { font-size: 17px; }
.lp-step p { font-size: 15px; line-height: 1.65; color: var(--fg-2); }
.lp-step-ui { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.lp-fake-reply { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 11px 12px; border-radius: 12px 12px 12px 3px; background: var(--bg-2); }
.lp-fake-reply i { display: block; height: 5px; border-radius: 3px; background: var(--bg-3); }
.lp-fake-reply i:nth-child(2) { width: 82%; background: var(--brand-hi); }
.lp-fake-reply i:nth-child(3) { width: 58%; }
.lp-fb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 24px; padding: 28px 32px; border: 1px solid var(--line); border-radius: var(--lp-r); background: var(--card); }
.lp-fb h3 { margin-bottom: 8px; font-size: 20px; }
.lp-fb p { color: var(--fg-2); }
.lp-fb p + p { margin-top: 6px; }
.lp-fb-demo { display: grid; gap: 10px; padding: 18px 20px; border-radius: 12px; background: var(--bg-2); }
.lp-fb-q { font-size: 13px; color: var(--fg-3); }
.lp-fb-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-fb-sub { display: grid; gap: 8px; margin-left: 12px; padding-left: 14px; border-left: 2px solid var(--line); }
.lp-fake-input { display: block; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-size: 13px; color: var(--fg-3); }

/* 门槛 */
.lp-need, .lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.lp-need .lp-head, .lp-split .lp-head, .lp-wl .lp-head { margin-bottom: 0; }
.lp-ais { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.lp-ais li { padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 15px; font-weight: 650; }
.lp-ais li.more { border-style: dashed; background: transparent; color: var(--fg-3); font-weight: 500; }
.lp-tiles { display: grid; gap: 14px; }
.lp-tile { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--lp-r); background: var(--card); }
.lp-tile .lp-ico { grid-row: span 2; }
.lp-tile span:last-child { font-size: 15px; color: var(--fg-2); }

/* 阅读档案 */
.lp-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.lp-feat { padding: 24px 22px; border: 1px solid var(--line); border-radius: var(--lp-r); background: var(--card); }
.lp-feat .lp-ico { margin-bottom: 16px; }
.lp-feat h3 { margin-bottom: 6px; font-size: 17px; }
.lp-feat p { font-size: 15px; line-height: 1.6; color: var(--fg-2); }

/* 让你的 AI 自己来：左边三条说明，右边一块「AI 接入」示意 */
.lp-facts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.lp-facts li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 14px; }
.lp-facts .n { grid-row: span 2; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 13px; font-weight: 750; }
.lp-facts span:last-child { font-size: 15px; color: var(--fg-2); }
.lp-agent { margin-top: 24px; font-size: 15px; color: var(--fg-2); }
.lp-agent code { padding: 2px 8px; border-radius: 6px; background: var(--bg-3); color: var(--fg); font-size: 14px; }
.lp-panel { border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.lp-panel-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--bg-2); font-size: 13px; font-weight: 650; color: var(--fg-2); }
.lp-panel-head .lp-icon { width: 18px; height: 18px; color: var(--accent); }
.lp-panel-body { display: grid; gap: 12px; padding: 18px; }
.lp-tok-name { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.lp-scope { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg-3); }
.lp-scope.on { color: var(--fg); }
.lp-box { position: relative; flex: none; width: 17px; height: 17px; border: 1.5px solid var(--line); border-radius: 5px; background: var(--bg); }
.lp-scope.on .lp-box { border-color: var(--accent); background: var(--accent); }
.lp-scope.on .lp-box::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px; border-right: 2px solid var(--on-accent, #fff); border-bottom: 2px solid var(--on-accent, #fff); transform: rotate(45deg); }
.lp-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-3); }

/* 原书和版权 */
.lp-note-band { display: flex; align-items: flex-start; gap: 18px; padding: 24px 28px; border: 1px solid var(--line); border-radius: var(--lp-r); background: var(--card); }
.lp-note-band .lp-h3 { margin-bottom: 6px; }
.lp-note-band p { color: var(--fg-2); }

/* 常见问题 */
.lp-faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 18px 4px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 650; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3); transform: translateY(-3px) rotate(45deg); transition: transform .15s; }
.lp-faq details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.lp-faq summary:hover { color: var(--accent); }
.lp-faq details p { max-width: 44em; padding: 0 4px 20px; color: var(--fg-2); }

/* 等候名单 */
.lp-wl { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; padding: 40px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.lp-wl .lp-ico { margin-bottom: 18px; }
.lp-wl-form { display: grid; gap: 14px; }
.lp-field { display: grid; gap: 6px; font-size: 14px; font-weight: 650; color: var(--fg-2); }
.lp-field input, .lp-field textarea { padding: 12px 14px; border-radius: 10px; background: var(--bg); font-size: 16px; font-weight: 400; }
.lp-field textarea { min-height: 80px; }
.lp-wl-msg { min-height: 1.6em; font-size: 15px; }
.lp-wl-msg.err { color: var(--danger); }
.lp-wl-msg.ok { padding: 12px 14px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); }

/* 收尾和页脚 */
.lp-end { position: relative; isolation: isolate; padding: 104px 0; text-align: center; }
.lp-end::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 85% at 50% 100%, var(--accent-bg), transparent 70%); pointer-events: none; }
.lp-end .lp-h2 { font-size: clamp(28px, 3.6vw, 42px); }
.lp-end .lp-lead { max-width: 36em; margin: 0 auto; }
.lp-end .lp-cta { justify-content: center; margin-top: 30px; }
.lp-foot { padding: 44px 0 32px; border-top: 1px solid var(--line); background: var(--bg-2); font-size: 14px; color: var(--fg-2); }
.lp-foot-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px; }
.lp-foot-brand { display: grid; gap: 10px; max-width: 28em; }
.lp-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--fg); }
.lp-logo-mark { width: 26px; height: 26px; flex: none; }
.lp-logo-hi { stroke: var(--brand-hi); }
.lp-foot-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none; }
.lp-foot-links a { color: var(--fg-2); }
.lp-foot-links a:hover { color: var(--accent); }
.lp-foot-copy { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-3); }

/* 「关于」页：页头、左侧目录、正文 */
.lp-pagehead { position: relative; isolation: isolate; padding: 72px 0 48px; border-bottom: 1px solid var(--line); }
.lp-pagehead .lp-h1 { font-size: clamp(32px, 4vw, 46px); margin-bottom: 14px; }
.lp-pagehead .lp-lead { max-width: 40em; }
.lp-doc { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 56px; padding-top: 56px; padding-bottom: 88px; }
.lp-toc { position: sticky; top: calc(var(--top-h) + 24px); align-self: start; display: grid; gap: 2px; font-size: 14px; }
.lp-toc p { margin-bottom: 8px; font-size: 12px; font-weight: 650; letter-spacing: .08em; color: var(--fg-3); }
.lp-toc a { padding: 6px 12px; border-left: 2px solid var(--line); color: var(--fg-2); }
.lp-toc a:hover { border-left-color: var(--accent); color: var(--accent); text-decoration: none; }
.lp-doc-body { max-width: 720px; }
.lp-doc-sec { margin: 0 0 44px; padding: 0 0 44px; border-bottom: 1px solid var(--line); }
.lp-doc-sec:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.lp-doc-sec h2 { margin-bottom: 16px; font-size: 24px; font-weight: 750; }
.lp-doc-sec p { margin-bottom: 12px; color: var(--fg-2); }
.lp-doc-sec p strong { color: var(--fg); margin-right: .2em; }
.lp-doc-sec .lp-agent { margin-top: 4px; }
.lp-terms { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; margin-top: 8px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.lp-terms dt { font-weight: 650; }
.lp-terms dd { color: var(--fg-2); }

@media (max-width: 960px) {
  .lp-hero-grid, .lp-need, .lp-split, .lp-wl, .lp-fb { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lp-hero-visual { max-width: 560px; }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-step:not(:last-child)::after { display: none; }
  .lp-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-doc { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 32px; }
  .lp-toc { position: static; display: flex; flex-wrap: wrap; gap: 8px; }
  .lp-toc p { width: 100%; margin-bottom: 0; }
  .lp-toc a { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; }
}
@media (max-width: 640px) {
  .lp { --lp-pad: 18px; }
  .lp-sec { padding: 60px 0; }
  .lp-sec.tight { padding: 40px 0; }
  .lp-hero { padding: 40px 0 60px; }
  .lp .lp-h1, .lp:lang(en) .lp-hero .lp-h1 { font-size: clamp(26px, 8.6vw, 34px); }
  .lp-sub { font-size: 17px; }
  .lp-lead { font-size: 16.5px; }
  .lp-head { margin-bottom: 32px; }
  .lp-compare, .lp-layers, .lp-steps, .lp-grid4 { grid-template-columns: minmax(0, 1fr); }
  .lp-layer + .lp-layer { border-left: 0; border-top: 1px solid var(--line); }
  .lp-card, .lp-fb, .lp-wl { padding: 22px 20px; }
  .lp-note-band { flex-direction: column; gap: 12px; padding: 22px 20px; }
  .lp-cta .lp-btn { flex: 1 1 auto; }
  .lp-hero-visual::before { display: none; }
  .lp-win-body { grid-template-columns: 36px minmax(0, 1fr); }
  .lp-win-rail { padding: 16px 8px; gap: 7px; }
  .lp-win-main { padding: 16px 14px 12px; }
  .lp-win-title { margin-right: 0; }
  .lp-pre-note { margin-top: -18px; align-items: flex-start; }
  .lp-end { padding: 72px 0; }
  .lp-terms { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lp-terms dd { margin-bottom: 8px; }
}

/* ---------- 章节页：复制给 AI、贴回 AI 的结果、准不准两层反馈 ---------- */
.copy-mode-desc { margin: .6em 0 0; }
.copy-steps { margin: .7em 0 0; padding-left: 1.5em; font-size: .9em; line-height: 1.7; color: var(--fg-2); }
.copy-steps > li::marker { color: var(--accent); font-weight: 700; }
.write-tip { margin: .8em 0 0; padding: .55em .8em; border-left: 3px solid var(--accent); background: var(--bg-2); border-radius: 4px; font-size: .88em; line-height: 1.65; color: var(--fg-2); }
.paste-box { width: 100%; min-height: 16em; font-family: var(--mono); font-size: .82em; line-height: 1.5; }
.paste-msg { margin: .8em 0 0; padding: .7em .9em; border: 1px solid var(--danger); border-radius: .6em; font-size: .86em; }
.paste-msg > p { margin: 0 0 .3em; color: var(--danger); font-weight: 600; }
.paste-msg ul { margin: .2em 0 .5em; padding-left: 1.2em; }
.paste-msg li { margin: .25em 0; overflow-wrap: anywhere; }
.paste-msg code { font-family: var(--mono); font-size: .92em; padding: 0 .3em; border-radius: .25em; background: var(--bg-3); }
.paste-msg .warn-list { color: var(--fg-2); }
.paste-msg .row { margin-top: .5em; }
.paste-msg .copy-box { margin-top: .4em; }
.fy-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .45em; margin-top: .8em; }
.fy-q { font-size: .8em; color: var(--fg-3); }
.fy-fb-state { font-size: .8em; color: var(--fg-3); overflow-wrap: anywhere; }
.fy-why { margin-top: .5em; padding: .6em .8em .7em; border-radius: .6em; background: var(--bg-2); }
.fy-why > .fy-actions:first-child { margin-top: 0; }
.fy-why input[type=text] { margin-top: .5em; font-size: .88em; }
.redo-box { width: 100%; min-height: 7em; line-height: 1.6; }
.redo-note { margin: .2em 0 .8em; padding: .6em .8em; border-left: 3px solid var(--accent); border-radius: .4em; background: var(--bg-2); font-size: .88em; }
.redo-note > p { margin: 0; }
.redo-note > blockquote { margin: .4em 0 0; color: var(--fg-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.fy-redo-open { flex-basis: 100%; overflow-wrap: anywhere; }
.fy-wait { margin: .2em 0 1em; padding: .6em .8em; border-left: 3px solid var(--accent); border-radius: .4em; background: var(--bg-2); font-size: .88em; }
.fy-wait > p { margin: 0 0 .4em; }
.fy-wait > .row { gap: .45em; align-items: center; flex-wrap: wrap; }
.fy-arrived { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5em .8em; margin: .2em 0 1em; padding: .6em .8em; border-left: 3px solid var(--ok); border-radius: .4em; background: var(--bg-2); font-size: .88em; }
.fy-arrived > p { margin: 0; flex: 1 1 16em; }
.handback-card { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: 1.5rem; z-index: 55; width: min(92vw, 22rem); padding: .8em 1em; background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: .7em; box-shadow: var(--shadow); font-size: .9rem; }
.handback-card > p { display: flex; flex-direction: column; gap: .2em; margin: 0 0 .6em; }
.handback-card > .row { gap: .45em; }
.kind-switch { margin: 0 0 1em; }
.write-init > .btn { margin-top: .2em; }
@media (max-width: 1024px), (hover: none) {
  body.reading .handback-card { bottom: calc(5rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 860px) {
  body.tabbed .handback-card { bottom: calc(5rem + env(safe-area-inset-bottom)); }
}
@media print {
  .fy-tools, .fy-why, .fy-wait, .fy-arrived, .handback-card { display: none !important; }
}

/* 书页「我的习惯」：阅读档案的书级 */
.habit-list, .habit-log { list-style: none; padding: 0; margin: 0 0 1em; }
.habit-list .habit { padding: .6em 0; border-bottom: 1px solid var(--line); }
.habit-list .habit.off { opacity: .6; }
.habit-list .habit .row { margin-top: .4em; gap: .4em; flex-wrap: wrap; }
.habit-log li { padding: .35em 0; line-height: 1.6; }
.habit-list .habit-why { margin-top: .25em; line-height: 1.6; }
.habit-waiting { padding: .2em 0 .2em .8em; border-left: 3px solid #d97706; margin: 0 0 .8em; }

/* ---------- 阅读档案：一行总览、搜索、待确认置顶、分区折叠、一条一行；长文档的列表、阅读视图和编辑 ---------- */
.bp-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .3em; margin: -.3em 0 .4em; color: var(--fg-2); }
.bp-stats b { color: var(--fg); font-weight: 700; margin: 0 .12em; }
.bp-stats .sep { color: var(--fg-3); }
.bp-stats .pend, .bp-stats .pend b { color: var(--accent); }
.bp-intro { font-size: .84em; color: var(--fg-3); margin: 0 0 .9em; }
.bp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5em .7em; margin: 0 0 1em; }
.bp-search { flex: 1 1 15em; width: auto; min-width: 0; min-height: 40px; }
.bp-btns { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; }
.bp-result { display: flex; flex-wrap: wrap; align-items: center; gap: .2em .8em; margin: -.3em 0 .8em; font-size: .86em; color: var(--fg-2); }
.bp-result[hidden], .bp-pending[hidden], .bp-err[hidden] { display: none; }
.bp-groups mark, .bp-pending mark { background: var(--mark); color: inherit; border-radius: .15em; padding: 0 .05em; }
.bp-count { font-family: var(--sans, inherit); font-size: .74em; font-weight: 600; color: var(--fg-3); background: var(--bg-2); border-radius: 999px; padding: .05em .55em; white-space: nowrap; }
.bp-rows { list-style: none; margin: 0; padding: 0; }
.bp-rows > li { border-top: 1px solid var(--line); }
.bp-rows > li:first-child { border-top: 0; }

.bp-pending { margin: 0 0 1.2em; padding: .5em .8em .3em; border: 1px dashed var(--accent); border-radius: .7em; background: var(--card); }
.bp-pend-head { display: flex; flex-wrap: wrap; align-items: center; gap: .2em .7em; margin: 0 0 .2em; }
.bp-pend-head h2 { display: flex; align-items: baseline; gap: .4em; margin: 0; font-family: var(--serif); font-size: 1.05em; }
.bp-pend-head .btn { margin-left: auto; }
.bp-prow { display: flex; align-items: flex-start; gap: .5em; }
.bp-prow > details { flex: 1 1 auto; min-width: 0; }
.bp-pact { flex: none; display: flex; gap: .3em; padding-top: .25em; }

.bp-group { border-top: 1px solid var(--line); }
.bp-group:last-child { border-bottom: 1px solid var(--line); }
.bp-group > summary { display: flex; align-items: center; gap: .55em; min-height: 46px; padding: .3em .2em; cursor: pointer; list-style: none; font-family: var(--serif); font-size: 1.05em; font-weight: 600; }
.bp-group > summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 .25em 0 .1em; border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3); transform: rotate(-45deg); transition: transform .15s; }
.bp-group[open] > summary::before { transform: rotate(45deg); }
.bp-group > summary:hover .bp-gt { color: var(--accent); }
.bp-group > summary::-webkit-details-marker, .bp-row > summary::-webkit-details-marker, .bp-toc > summary::-webkit-details-marker { display: none; }
.bp-cap { margin-left: auto; font-family: var(--sans, inherit); font-size: .74em; font-weight: 400; color: var(--fg-3); white-space: nowrap; }
.bp-gbody { padding: 0 0 .9em 1.25em; }
.bp-gfoot { margin-top: .4em; }

.bp-row > summary { display: flex; align-items: center; gap: .6em; min-height: 38px; padding: .25em .35em; border-radius: .4em; cursor: pointer; list-style: none; }
.bp-row > summary:hover, .bp-row[open] > summary { background: var(--bg-2); }
.bp-text { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bp-row[open] .bp-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.bp-row.off .bp-text { color: var(--fg-3); }
.bp-tags { flex: none; display: inline-flex; align-items: center; gap: .3em; }
.bp-tags .pill { margin: 0; }
.bp-n { font-size: .74em; color: var(--fg-3); white-space: nowrap; }
.bp-body { padding: .3em .35em .8em; font-size: .92em; }
.bp-meta { display: flex; flex-wrap: wrap; gap: .2em .9em; font-size: .82em; color: var(--fg-3); }
.bp-used { margin: .5em 0 0; }
.bp-used .used-in { margin-top: .2em; }
.bp-acts { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .6em; }
.bp-acts .btn { font-size: .8em; padding: .1em .7em; }

.bp-sub { display: flex; align-items: baseline; gap: .4em; margin: .9em 0 .1em; font-size: .88em; color: var(--fg-2); }
.bp-capbar { margin: .1em 0 .3em; font-size: .84em; color: var(--fg-2); }
.bp-capbar .progress { max-width: 24em; }
.bp-doc { display: flex; flex-wrap: wrap; align-items: baseline; gap: .05em .7em; min-height: 40px; padding: .45em .35em; border-radius: .4em; color: var(--fg); }
.bp-doc:hover { background: var(--bg-2); text-decoration: none; }
.bp-doc-t { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.bp-doc-s { order: 3; flex: 1 1 100%; min-width: 0; font-size: .9em; color: var(--fg-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bp-doc-m { flex: none; font-size: .76em; color: var(--fg-3); white-space: nowrap; }
.bp-doc.off .bp-doc-t { color: var(--fg-2); font-weight: 500; }
.bp-warn-t { color: #8a4b08; }
[data-theme="dark"] .bp-warn-t { color: #f3c58f; }

/* 阅读档案的成长过程：顶部总览和每周柱状图、按周看、按书看 */
.bt-body mark { background: var(--mark); color: inherit; border-radius: .15em; padding: 0 .05em; }
.linkish { padding: 0; border: 0; background: none; color: var(--link); font: inherit; cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.bt-hero { margin: -.2em 0 1em; padding: .8em 1em .7em; border: 1px solid var(--line); border-radius: .8em; background: var(--card); }
.bt-headline { margin: 0; font-family: var(--serif); font-size: 1.15em; }
.bt-headline b { color: var(--accent); margin: 0 .1em; }
.bt-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .3em; margin: .2em 0 .6em; font-size: .86em; color: var(--fg-2); }
.bt-sub b { color: var(--fg); margin: 0 .1em; }
.bt-sub .sep { color: var(--fg-3); }
.bt-sub .pend, .bt-sub .pend b { color: var(--accent); }
.bt-chart { display: flex; align-items: flex-end; gap: 3px; height: 4.2rem; padding: 0 0 2px; border-bottom: 1px solid var(--line); }
.bt-bar { position: relative; display: flex; flex-direction: column-reverse; flex: 1 1 0; min-width: 4px; height: 100%; padding: 0; border: 0; border-radius: 3px 3px 0 0; background: transparent; cursor: pointer; }
.bt-bar:hover { background: var(--bg-2); }
.bt-bar .a { display: block; width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; }
.bt-bar .e { display: block; width: 100%; background: var(--quote); }
.bt-bar .z { display: block; width: 100%; height: 2px; background: var(--bg-3); }
.bt-axis { display: flex; justify-content: space-between; gap: .6em; margin-top: .2em; font-size: .74em; color: var(--fg-3); }
.bt-legend i { display: inline-block; width: .7em; height: .7em; margin: 0 .25em 0 .5em; border-radius: 2px; vertical-align: -.05em; }
.bt-legend i.a { background: var(--accent); }
.bt-legend i.e { background: var(--quote); }
.bt-now { margin: .5em 0 0; font-size: .88em; color: var(--fg-2); }
.bt-ctitle { margin: 0 0 .2em; font-size: .74em; color: var(--fg-3); }
.bt-hint { margin: .3em 0 0; padding: .6em .8em; border-radius: .6em; background: var(--bg-2); font-size: .9em; color: var(--fg-2); }
.bt-hint p { margin: 0 0 .5em; }
.bt-terms-box { margin: -.4em 0 1em; }
.bt-terms-box > summary { min-height: 32px; line-height: 32px; cursor: pointer; font-size: .82em; color: var(--fg-2); }
.bt-terms-box[open] > summary { margin-bottom: .2em; }
.bt-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4em 1.2em; margin: 0; font-size: .8em; color: var(--fg-3); }
.bt-terms dt { display: inline; font-weight: 600; color: var(--fg-2); }
.bt-terms dt::after { content: "："; }
.bt-terms dd { display: inline; margin: 0; }
.bt-now .linkish { margin-left: .3em; }
.bt-tabs[hidden] { display: none; }
.bt-tabs { margin-bottom: .8em; }
.bt-viewhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3em 1em; margin: 0 0 .7em; }
.bt-viewhead p { margin: 0; flex: 1 1 18em; }
.bt-viewhead .seg button { min-height: 32px; font-size: .84em; }
.bt-weeks { display: flex; flex-direction: column; gap: .55em; }
.bt-week { border: 1px solid var(--line); border-radius: .75em; background: var(--card); }
.bt-week[open] { box-shadow: 0 2px 10px rgba(16, 24, 40, .05); }
.bt-week > summary { display: flex; flex-direction: column; gap: .15em; padding: .55em .9em .55em 2.1em; position: relative; cursor: pointer; list-style: none; }
.bt-week > summary::-webkit-details-marker { display: none; }
.bt-week > summary::before { content: ""; position: absolute; left: .95em; top: 1.05em; width: 7px; height: 7px; border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3); transform: rotate(-45deg); transition: transform .15s; }
.bt-week[open] > summary::before { transform: rotate(45deg); }
.bt-week > summary:hover .bt-wname, .bt-week > summary:hover .bt-bkt { color: var(--accent); }
.bt-wh { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .6em; }
.bt-wname { font-family: var(--serif); font-weight: 700; font-size: 1.02em; }
.bt-wrange { font-size: .82em; color: var(--fg-3); }
.bt-chips { display: inline-flex; flex-wrap: wrap; gap: .3em; }
.bt-chip { font-size: .74em; padding: .05em .55em; border-radius: 999px; background: var(--bg-2); color: var(--fg-2); white-space: nowrap; }
.bt-chip.add { background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.bt-chip.edit { background: var(--accent-bg); color: var(--accent); }
.bt-chip.off { background: var(--bg-3); color: var(--fg-3); }
.bt-wbooks { font-size: .86em; color: var(--fg); }
.bt-prev { font-size: .84em; color: var(--fg-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bt-week[open] .bt-prev, .bt-week[open] .bt-wbooks { display: none; }
.bt-cbody { padding: 0 .9em .8em 2.1em; }
.bt-wbook { margin: .2em 0 .7em; }
.bt-h3 { display: flex; align-items: baseline; gap: .4em; margin: .7em 0 .2em; font-size: .92em; font-family: var(--serif); color: var(--fg); }
.bt-h3 .linkish { color: var(--fg); font-weight: 700; }
.bt-h3 .linkish:hover { color: var(--accent); }
.bt-read { margin: 0 0 .25em; font-size: .86em; color: var(--fg-2); }
.bt-fit, .bt-plain { list-style: none; margin: 0 0 .3em; padding: 0; font-size: .88em; }
.bt-fit li, .bt-plain li { padding: .15em 0; }
.bt-fit .pill { margin-right: .4em; }
.bt-reason { color: var(--fg-2); }
.bt-lab { flex: none; font-size: .76em; font-weight: 600; padding: .05em .5em; border-radius: .35em; white-space: nowrap; background: var(--accent-bg); color: var(--accent); }
.bt-lab.add { background: var(--ok-bg); color: var(--ok); }
.bt-lab.off { background: var(--bg-3); color: var(--fg-3); }
.bt-plain .bt-lab { margin-right: .5em; }
.bt-line.off .bp-text { color: var(--fg-3); text-decoration: line-through; text-decoration-color: var(--fg-3); }
.bt-chgs { list-style: none; margin: 0 0 .4em; padding: 0 0 0 .7em; border-left: 2px solid var(--line); }
.bt-chgs > li { padding: .25em 0; }
.bt-diff { font-size: .92em; }
.bt-chgs .btn { margin-top: .25em; }
.bt-book > summary { flex-direction: row; align-items: center; gap: .8em; }
.bt-book > summary::before { top: 50%; margin-top: -4px; }
.bt-bk { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.bt-bkt { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; font-family: var(--serif); font-weight: 700; }
.bt-bkt .pill { font-family: var(--font); font-weight: 500; margin: 0; }
.bt-bkm { font-size: .8em; color: var(--fg-3); }
.bt-filters { display: flex; flex-direction: column; gap: .4em; margin: 0 0 .5em; }
.bt-filters .seg button { min-height: 32px; font-size: .82em; padding: .1em .65em; }
.bt-all { margin-bottom: .5em; }
.bt-docs { margin-top: 1.6em; padding-top: .6em; border-top: 1px solid var(--line); }
.bt-h2 { display: flex; align-items: baseline; gap: .5em; margin: 0 0 .3em; font-family: var(--serif); font-size: 1.08em; }
.bt-gap { padding: .1em .9em .1em 2.1em; font-size: .8em; color: var(--fg-3); }
@media (max-width: 640px) {
  .bt-terms { grid-template-columns: 1fr; gap: .2em; }
}
@media (max-width: 480px) {
  .bt-week > summary { padding-left: 1.9em; padding-right: .7em; }
  .bt-cbody { padding: 0 .6em .7em .8em; }
  .bt-chart { gap: 2px; height: 3.4rem; }
  .bt-legend { display: none; }
  .bt-body .bp-row > summary, .bp-pending .bp-row > summary { flex-wrap: wrap; row-gap: .15em; }
  .bt-body .bp-text, .bp-pending .bp-text { flex: 1 1 11em; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .bt-body .bp-row[open] .bp-text, .bp-pending .bp-row[open] .bp-text { display: block; }
  .bt-body .bp-tags, .bp-pending .bp-tags { flex-wrap: wrap; }
}

.bp-doc-h1 { margin: .1em 0 .2em; }
.bp-doc-info { display: flex; flex-wrap: wrap; align-items: center; gap: .1em .3em; margin: 0 0 .6em; font-size: .84em; color: var(--fg-3); }
.bp-doc-info .pill { margin: 0; }
.bp-doc-sum { margin: 0 0 .8em; color: var(--fg-2); }
.bp-doc-top { display: flex; flex-wrap: wrap; gap: .4em; margin: 0 0 1.4em; }
.bp-doc-off { margin: 0 0 .8em; padding: .45em .8em; border-radius: .55em; background: var(--bg-2); color: #8a4b08; font-size: .88em; }
.bp-doc-off[hidden] { display: none; }
[data-theme="dark"] .bp-doc-off { color: #f3c58f; }
.bp-doc-set { margin: 2.6em 0 1em; padding: .9em 1.1em .6em; border: 1px solid var(--line); border-radius: .8em; background: var(--bg-2); }
.bp-doc-set > h2 { margin: 0 0 .1em; font-family: var(--serif); font-size: 1.05em; }
.bp-doc-set > p { margin: 0 0 .5em; }
.bp-set-row { display: flex; align-items: center; justify-content: space-between; gap: .6em 1.4em; padding: .7em 0; border-top: 1px solid var(--line); }
.bp-set-l { display: flex; flex-direction: column; gap: .1em; min-width: 0; }
.bp-set-row.danger b { color: var(--danger); }
.bp-ctl { display: inline-flex; align-items: center; gap: .5em; }
.bp-ctl select { width: auto; padding: .3em .6em; }
.bp-doc-layout.has-toc { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2.2em; align-items: start; }
.bp-doc-body { min-width: 0; }
.bp-doc-body .bp-dup-title { display: none; }
.bp-toc { position: sticky; top: 4.5rem; max-height: calc(100vh - 5.5rem); overflow: auto; font-size: .86em; }
.bp-toc > summary { min-height: 32px; cursor: pointer; list-style: none; font-weight: 600; color: var(--fg-2); }
.bp-toc-list { display: flex; flex-direction: column; margin-top: .2em; border-left: 1px solid var(--line); }
.bp-toc-l { margin-left: -1px; padding: .3em .6em; border: 0; border-left: 2px solid transparent; background: none; color: var(--fg-2); font: inherit; line-height: 1.45; text-align: left; cursor: pointer; }
.bp-toc-l.lv1 { padding-left: 1.5em; font-size: .95em; }
.bp-toc-l.lv2 { padding-left: 2.3em; font-size: .92em; }
.bp-toc-l:hover { color: var(--accent); }
.bp-toc-l.active { border-left-color: var(--accent); color: var(--accent); font-weight: 600; }

.bp-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6em 1.4em; margin: .7em 0; }
.bp-f { display: flex; flex-direction: column; gap: .3em; margin: .7em 0; font-size: .9em; color: var(--fg-2); }
.bp-form-row .bp-f { margin: 0; }
.bp-f.grow { flex: 1 1 16em; }
.bp-f select { width: auto; }
.bp-editor-seg { display: none; }
.bp-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1em; margin: .6em 0; }
.bp-md { width: 100%; min-height: 60vh; font-family: var(--mono); font-size: .86em; line-height: 1.6; resize: vertical; }
.bp-preview { min-height: 60vh; max-height: 75vh; overflow: auto; padding: .6em 1em; border: 1px solid var(--line); border-radius: .55em; background: var(--card); }
.bp-pv-label { margin-bottom: .3em; }
.bp-over { color: var(--danger); font-weight: 600; }
.bp-err { margin: .6em 0; padding: .6em .9em; border: 1px solid var(--danger); border-radius: .6em; color: var(--danger); font-size: .9em; }

@media (max-width: 860px) {
  .bp-doc-layout.has-toc { display: block; }
  .bp-toc { position: static; max-height: none; margin: 0 0 1em; padding: .35em .8em; border: 1px solid var(--line); border-radius: .6em; background: var(--bg-2); }
  .bp-toc > summary { display: flex; align-items: center; min-height: 40px; }
  .bp-toc-l { min-height: 38px; }
  .bp-editor { display: block; }
  .bp-editor-seg { display: flex; margin: .4em 0; }
  .bp-editor.show-md .bp-pane-pv, .bp-editor.show-pv .bp-pane-md { display: none; }
  .bp-set-row { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .bp-search { flex-basis: 100%; }
  .bp-n, .bp-cap { display: none; }
  .bp-group > summary { min-height: 48px; }
  .bp-row > summary { min-height: 44px; }
  .bp-gbody { padding-left: .2em; }
  .bp-tags .pill { font-size: .7em; }
  .bp-prow { flex-wrap: wrap; gap: 0; }
  .bp-pact { width: 100%; justify-content: flex-end; padding: 0 0 .5em; }
  .bp-btns .btn, .bp-acts .btn, .bp-pact .btn, .bp-doc-top .btn { min-height: 40px; padding: .2em .9em; }
  .bp-md, .bp-preview { min-height: 50vh; }
}
@media (hover: none) {
  .bp-row > summary:hover, .bp-doc:hover { background: none; }
  .bp-row[open] > summary { background: var(--bg-2); }
}

/* ---------- 阅读体验：章首摘要、打分说明、选中的句子、本页大纲、注释浮层、目录里的阅读记录 ---------- */
.ch-lead { margin: .25em 0 .55em; font-size: .98em; line-height: 1.7; color: var(--fg-2); }
.cmp-col .ch-lead { font-size: .9em; margin: 0 0 1em; }

.rate-legend { margin: -.2em 0 1.1em; font-size: .85em; color: var(--fg-2); }
.rate-legend > summary { cursor: pointer; color: var(--fg-3); padding: .3em 0; }
.rate-legend ul { margin: .3em 0 0; padding-left: 1.3em; }
.rate-legend li { margin: .15em 0; }
.rate-quote { display: inline-flex; flex-direction: column; gap: .1em; max-width: 100%; font-size: .72em; line-height: 1.5; color: var(--fg-3); }
.rate-quote span { overflow-wrap: anywhere; }

.ch-outline { margin: 0 0 1.2em; padding: .3em .8em; border: 1px solid var(--line); border-radius: .6em; background: var(--bg-2); font-size: .86em; }
.ch-outline > summary { cursor: pointer; padding: .35em 0; font-weight: 600; color: var(--fg-2); }
.ch-outline-list { display: flex; flex-direction: column; margin: .2em 0 .3em; border-left: 1px solid var(--line); }
.ol-l { margin-left: -1px; padding: .3em .6em; min-height: 34px; border: 0; border-left: 2px solid transparent; background: none; color: var(--fg-2); font: inherit; line-height: 1.45; text-align: left; cursor: pointer; }
.ol-l.lv1 { padding-left: 1.5em; font-size: .95em; }
.ol-l:hover { color: var(--accent); }
.ol-l.active { border-left-color: var(--accent); color: var(--accent); font-weight: 600; }
/* 宽屏：正文右侧留得下就固定在那里，跟着滚动 */
@media (min-width: 1320px) {
  .ch-outline { position: fixed; z-index: 5; top: calc(var(--top-h) + 1.4rem); left: calc(50% + 380px + 2rem); width: calc(50% - 380px - 3.5rem); max-width: 17rem; max-height: calc(100vh - var(--top-h) - 3rem); overflow-y: auto; margin: 0; }
}

/* 注释浮层由 gloss.js 管：点开、Esc、点外面关；CSS 的悬停提示只留给能悬停的设备 */
.gloss-pop { position: fixed; z-index: 36; max-width: min(28em, calc(100vw - 16px)); max-height: min(50vh, 22em); overflow-y: auto; padding: .65em .85em; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); font-family: var(--font); font-size: .9rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.md .gloss.open { background: var(--accent-bg); border-radius: .2em; }
.md .gloss:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.md .gloss:focus::after, .md .gloss.open::after { display: none; }
@media (hover: none) {
  .md .gloss:hover::after { display: none; }
}

.ch-flag.here { border-color: var(--accent); background: var(--accent); color: var(--on-accent, #fff); font-weight: 600; }
.ch-flag.read { border-color: var(--fg-3); color: var(--fg-2); }
.ch-list li.here { box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- 私信和加好友链接（wp/social）开始 ---------- */
.dm-head { margin-bottom: .4em; }
.dm-page { display: grid; grid-template-columns: minmax(14rem, 19rem) minmax(0, 1fr); height: calc(100vh - 11rem); min-height: 22rem; border: 1px solid var(--line); border-radius: .8em; overflow: hidden; background: var(--card); }
.dm-list { overflow-y: auto; border-right: 1px solid var(--line); }
.dm-convs { list-style: none; margin: 0; padding: 0; }
.dm-conv { display: flex; align-items: center; gap: .6em; padding: .65em .8em; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.dm-conv:hover { background: var(--bg-2); }
.dm-conv.on { background: var(--bg-2); box-shadow: inset 3px 0 0 var(--accent); }
.dm-conv-main { display: flex; flex: 1; flex-direction: column; gap: .1em; min-width: 0; }
.dm-conv-top { display: flex; justify-content: space-between; gap: .5em; }
.dm-conv-top b, .dm-conv-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-badge { min-width: 1.5em; padding: 0 .4em; border-radius: 1em; background: var(--danger); color: #fff; font-size: .75em; line-height: 1.5; text-align: center; }
.dm-empty { padding: 1em; }
.dm-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dm-placeholder { margin: auto; padding: 1em; text-align: center; }
.dm-thread-head { display: flex; align-items: center; gap: .6em; padding: .55em .8em; border-bottom: 1px solid var(--line); }
.dm-thread-head .person { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; color: var(--fg); }
.dm-back { display: none; }
.dm-msgs { display: flex; flex: 1; flex-direction: column; gap: .55em; min-height: 0; overflow-y: auto; padding: .8em; }
.dm-more { align-self: center; }
.dm-row { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; }
.dm-row.mine { align-self: flex-end; align-items: flex-end; }
.dm-bubble { padding: .5em .8em; border-radius: .9em; background: var(--bg-2); line-height: 1.55; overflow-wrap: anywhere; }
.dm-row.mine .dm-bubble { background: var(--accent-bg); }
.dm-bubble.recalled, .dm-row.mine .dm-bubble.recalled { border: 1px dashed var(--line); background: none; }
.dm-text { white-space: pre-wrap; }
.dm-text a { color: var(--link); text-decoration: underline; }
.dm-meta { display: flex; align-items: center; gap: .7em; margin-top: .15em; }
.dm-act { padding: 0; border: 0; background: none; color: var(--fg-3); font: inherit; cursor: pointer; opacity: 0; }
.dm-row:hover .dm-act, .dm-act:focus-visible { opacity: 1; }
.dm-act:hover { color: var(--accent); }
.dm-compose { padding: .6em .8em; border-top: 1px solid var(--line); }
.dm-input { width: 100%; min-height: 3em; max-height: 12em; resize: vertical; }
.dm-cannot { margin: 0; padding: .8em; border-top: 1px solid var(--line); }
.fl-card .invite-row { margin-top: .4em; }
.fl-befriend { display: flex; align-items: center; gap: .4em; margin: .2em 0 .6em; color: var(--fg-2); }
.fl-who { margin: .6em 0 1em; }
@media (hover: none) {
  .dm-act { opacity: 1; min-height: 32px; }
}
@media (max-width: 860px) {
  .dm-page { display: block; height: calc(100vh - 13rem); }
  .dm-page .dm-list, .dm-page .dm-thread { height: 100%; border-right: 0; }
  .dm-page:not(.has-thread) .dm-thread, .dm-page.has-thread .dm-list { display: none; }
  .dm-back { display: inline-flex; }
  .dm-row { max-width: 88%; }
  .dm-hint { display: none; }
}
/* ---------- 私信和加好友链接（wp/social）结束 ---------- */

/* ---------- 中英双语个人层换行（wp/bilingual） ---------- */
.adjust-line,
.fy-reason,
.fy-body,
.fy-excerpt blockquote,
.fy-excerpt .loc,
.skip-box .why {
  white-space: pre-line;
}
/* ---------- 中英双语个人层换行（wp/bilingual）结束 ---------- */

/* ---------- 版本文档：导读、卡点解释、提到的书（wp/library） ---------- */
.doc-list { display: flex; flex-direction: column; gap: .6em; }
.doc-item { border: 1px solid var(--line); border-radius: .7em; padding: .2em 1em; background: var(--bg-2); }
.doc-item > summary { cursor: pointer; padding: .6em 0; min-height: 40px; }
.doc-item[open] > summary { border-bottom: 1px dashed var(--line); margin-bottom: .6em; }
.doc-title { font-weight: 600; }
.doc-sum { color: var(--fg-2); font-size: .92em; margin-top: .2em; }
.doc-chs { color: var(--fg-3); margin-top: .2em; }
.doc-more > summary { cursor: pointer; color: var(--fg-2); padding: .4em 0; }
.doc-body { padding-bottom: .6em; }
.related-box { margin: 2em 0 0; }
.related { border: 1px dashed var(--line); border-radius: .8em; padding: .3em 1.1em; }
.related > summary { cursor: pointer; padding: .6em 0; color: var(--fg-2); font-weight: 600; min-height: 40px; }
.related[open] > summary { margin-bottom: .4em; }
.md a.concept { text-decoration: underline dotted; text-underline-offset: .2em; }
.concept-refs li { margin: 0 0 .9em; }
.concept-snippet { color: var(--fg-2); font-size: .92em; margin-top: .2em; }
/* ---------- 版本文档结束 ---------- */

/* ---------- 我能读的语言（wp/langs） ---------- */
.prof-block { align-items: flex-start; }
.prof-rows { flex: 1 1 22em; min-width: 0; }
.prof-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .6em; margin: 0 0 .5em; }
.prof-row .prof-code { width: 12em; }
/* ---------- 我能读的语言结束 ---------- */

/* ---------- 换封面（wp/covers） ---------- */
.cover-slot { flex: none; display: flex; flex-direction: column; align-items: center; gap: .55em; }
.cover-edit-preview { display: flex; justify-content: center; margin: .2em 0 1em; }
.cover-edit-preview .cover.big { width: 8rem; }
/* ---------- 换封面结束 ---------- */

/* ---------- 分享链接（wp/share）：不用登录的只读分享页，和分享人那边的弹框、链接列表 ---------- */
.share-page { max-width: 46rem; margin: 0 auto; }
.wide .share-page { max-width: none; }
.share-kicker { font-size: .85em; color: var(--fg-3); margin-bottom: .3em; }
.share-h1 { margin: 0 0 .3em; font-family: var(--serif); font-size: 1.45em; letter-spacing: .04em; }
.share-says { margin: 0 0 1em; padding: .6em 1em; border-left: 4px solid var(--accent); background: var(--bg-2); border-radius: 0 .5em .5em 0; }
.share-grid { margin-top: 1.2em; }
.share-none { opacity: .75; }
.share-summary { color: var(--fg-2); line-height: 1.7; }
.share-chapter h1 { font-family: var(--serif); line-height: 1.4; margin: .2em 0 .3em; }
.share-nav { display: flex; justify-content: space-between; align-items: center; gap: .6em; margin: 2.2em 0 1em; }
.share-nav .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.share-own { margin: .4em 0 1em; color: var(--fg-2); font-size: .88em; }
.cmp-end { height: 1px; }
.share-foot { margin: 3em 0 1em; padding-top: 1em; border-top: 1px solid var(--line); text-align: center; color: var(--fg-2); font-size: .9em; }
.share-warn { padding: .6em .9em; border-radius: .6em; background: #f7e3c8; color: #8a4b08; font-size: .9em; }
.share-warn a { color: inherit; text-decoration: underline; }
.share-link-input { width: 100%; font-family: var(--mono); font-size: .85em; }
.share-links { margin-top: 2em; }
.share-link-row { display: flex; align-items: flex-start; gap: .6em 1em; flex-wrap: wrap; }
.share-link-row.off { opacity: .65; }
.share-link-main { flex: 1 1 18em; min-width: 0; }
.share-url { margin-top: .2em; font-family: var(--mono); font-size: .78em; color: var(--fg-3); word-break: break-all; }
/* ---------- 分享链接结束 ---------- */

/* ---------- 删自己的内容、改自己建的书 ---------- */
.book-owner { margin-top: .6em; gap: .4em; flex-wrap: wrap; }
.ch-owner { margin: 1.2em 0; gap: .6em; align-items: center; flex-wrap: wrap; }
.book-edit .field { display: flex; flex-direction: column; gap: .25em; margin: .6em 0; }
.book-edit .field input, .book-edit .field textarea { width: 100%; }
@media print { .book-owner, .ch-owner { display: none; } }
/* ---------- 删自己的内容结束 ---------- */

/* ---------- 划线（wp/highlight） ----------
   四种颜色浅色、深色主题各一套，字照旧用正文颜色。选区工具条和划线菜单挂在 body 上，在注释浮层之上、弹窗之下；打印时不印。 */
:root { --hl-yellow: #fde68a; --hl-green: #bbf7d0; --hl-blue: #bfdbfe; --hl-pink: #fbcfe8; }
:root[data-theme="dark"] { --hl-yellow: #713f12; --hl-green: #14532d; --hl-blue: #1e3a8a; --hl-pink: #831843; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --hl-yellow: #713f12; --hl-green: #14532d; --hl-blue: #1e3a8a; --hl-pink: #831843; }
}
.md mark.hl { background: var(--hl-yellow); color: inherit; padding: 0; border-radius: .15em; cursor: pointer; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.md mark.hl-green, .hl-dot.hl-green, .hl-item.hl-green { --hl-c: var(--hl-green); }
.md mark.hl-blue, .hl-dot.hl-blue, .hl-item.hl-blue { --hl-c: var(--hl-blue); }
.md mark.hl-pink, .hl-dot.hl-pink, .hl-item.hl-pink { --hl-c: var(--hl-pink); }
.md mark.hl-green, .md mark.hl-blue, .md mark.hl-pink { background: var(--hl-c); }
.hl-bar, .hl-menu { position: fixed; z-index: 37; display: flex; align-items: center; gap: .15em; padding: .25em; border-radius: .6em; box-shadow: var(--shadow); font-family: var(--font); font-size: .85rem; line-height: 1.4; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hl-bar { background: var(--fg); color: var(--bg); }
.hl-bar button, .hl-acts button { border: 0; background: none; color: inherit; font: inherit; padding: .4em .8em; border-radius: .4em; cursor: pointer; white-space: nowrap; }
.hl-bar button:hover, .hl-bar button:focus-visible, .hl-acts button:hover, .hl-acts button:focus-visible { background: rgba(127, 127, 127, .25); }
.hl-menu { flex-direction: column; align-items: stretch; gap: .3em; padding: .4em; background: var(--card); color: var(--fg); border: 1px solid var(--line); }
.hl-acts { display: flex; gap: .15em; }
.hl-dots { display: flex; justify-content: center; gap: .7em; padding: .15em 0 .1em; }
.hl-dot { --hl-c: var(--hl-yellow); width: 1.6em; height: 1.6em; padding: 0; border-radius: 50%; border: 2px solid var(--line); background: var(--hl-c); cursor: pointer; }
.hl-dot.on { border-color: var(--fg); }
.hl-list { list-style: none; padding: 0; margin: 0 0 1em; }
.hl-item { --hl-c: var(--hl-yellow); padding: .5em 0 .5em .8em; border-bottom: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--hl-c); }
.hl-item a { color: var(--fg); }
.hl-ch { margin: 1.2em 0 .3em; font-size: 1em; color: var(--fg-2); }
@media (hover: none) {
  .hl-bar button, .hl-acts button { min-height: 40px; }
  .hl-dot { width: 2.1em; height: 2.1em; }
}
@media print {
  .hl-bar, .hl-menu { display: none !important; }
  .md mark.hl { -webkit-print-color-adjust: exact; print-color-adjust: exact; text-decoration: underline; text-decoration-color: var(--fg-3); text-underline-offset: .18em; }
}
/* ---------- 划线结束 ---------- */

/* ---------- 通知区（wp/notify）：顶栏铃铛和通知页 ---------- */
.bell-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; color: var(--fg-2); }
.bell-btn:hover, .bell-btn.on { color: var(--accent); text-decoration: none; }
.bell-icon { width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bell-badge { position: absolute; top: -.15em; right: -.3em; min-width: 1.5em; padding: 0 .35em; border-radius: 1em; background: var(--danger); color: #fff; font-size: .7em; font-weight: 600; line-height: 1.5; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.ntf-head { justify-content: space-between; align-items: center; }
.ntf-segs { display: flex; flex-wrap: wrap; gap: .4em; margin: 0 0 1em; }
.ntf-seg { display: inline-flex; align-items: center; gap: .35em; padding: .3em .9em; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--fg-2); font: inherit; cursor: pointer; white-space: nowrap; }
.ntf-seg:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.ntf-seg.on { border-color: var(--accent); color: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); }
.ntf-seg-n { min-width: 1.5em; padding: 0 .4em; border-radius: 1em; background: var(--danger); color: #fff; font-size: .75em; font-weight: 600; line-height: 1.5; text-align: center; }
.ntf-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: .8em; overflow: hidden; background: var(--card); }
.ntf-item + .ntf-item { border-top: 1px solid var(--line); }
.ntf-main { display: flex; align-items: flex-start; gap: .7em; width: 100%; padding: .8em 1em; border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.ntf-main:hover { background: var(--bg-2); text-decoration: none; }
.ntf-dot { flex: none; width: .55em; height: .55em; margin-top: .55em; border-radius: 50%; }
.ntf-item.unread .ntf-dot { background: var(--danger); }
.ntf-text { display: flex; flex: 1; flex-direction: column; gap: .15em; min-width: 0; }
.ntf-title { color: var(--fg-2); overflow-wrap: anywhere; }
.ntf-item.unread .ntf-title { color: var(--fg); font-weight: 600; }
.ntf-body { overflow-wrap: anywhere; }
.ntf-time { flex: none; margin-top: .15em; white-space: nowrap; }
.ntf-full { padding: 0 1em 1em 2.25em; }
.ntf-empty { padding: 1.2em 1em; }
.ntf-more { display: block; margin: 1em auto 0; }
@media (hover: none) {
  .bell-btn { min-width: 44px; min-height: 44px; }
}
@media (max-width: 860px) {
  .ntf-segs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2em; scrollbar-width: none; }
  .ntf-seg { flex: none; }
  .ntf-main { padding: .75em .8em; }
  .ntf-full { padding: 0 .8em .9em 2em; }
}
/* ---------- 通知区结束 ---------- */

/* ---------- 反馈区 ---------- */
.fb-intro { margin: -.6em 0 1em; }
.fb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; margin: 0 0 1em; }
.fb-segs { display: flex; flex-wrap: wrap; gap: .4em; }
.fb-seg { display: inline-flex; align-items: center; padding: .3em .9em; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--fg-2); white-space: nowrap; }
.fb-seg:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.fb-seg.on { border-color: var(--accent); color: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); }
.fb-status-filter { margin-left: auto; min-height: 36px; padding: .2em .5em; border: 1px solid var(--line); border-radius: .5em; background: var(--bg); color: var(--fg); font: inherit; font-size: .9em; }
.fb-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: .8em; overflow: hidden; background: var(--card); }
.fb-item + .fb-item { border-top: 1px solid var(--line); }
.fb-item.is-hidden { opacity: .7; }
.fb-main { display: flex; align-items: flex-start; gap: .8em; padding: .8em 1em; color: var(--fg); }
.fb-main:hover { background: var(--bg-2); text-decoration: none; }
.fb-text { display: flex; flex: 1; flex-direction: column; gap: .25em; min-width: 0; }
.fb-title { font-weight: 600; overflow-wrap: anywhere; }
.fb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .6em; }
.fb-meta .pill { margin-right: 0; }
.fb-counts { display: flex; flex-wrap: wrap; gap: .3em 1em; }
.fb-thumb { flex: none; width: 4.5em; height: 4.5em; object-fit: cover; border: 1px solid var(--line); border-radius: .4em; background: var(--bg-2); }
.fb-empty { padding: 1.2em 1em; list-style: none; }
.fb-more { display: block; margin: 1em auto 0; }

.fb-compose, .fb-detail { max-width: 760px; }
.fb-field { display: flex; flex-direction: column; gap: .35em; margin: 0 0 1em; }
.fb-label { font-size: .85em; font-weight: 600; color: var(--fg-2); }
.fb-field input[type="text"], .fb-body-input { width: 100%; box-sizing: border-box; }
.fb-body-input { min-height: 8em; resize: vertical; }
.fb-body-input.fb-drop { outline: 2px dashed var(--accent); outline-offset: 2px; }
.fb-picker { margin: 0 0 1em; }
.fb-thumbs { display: flex; flex-wrap: wrap; gap: .5em; margin: 0 0 .5em; }
.fb-thumbs:empty { display: none; }
.fb-thumb-edit { position: relative; margin: 0; width: 5.5em; height: 5.5em; }
.fb-thumb-edit img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--line); border-radius: .4em; }
.fb-thumb-x { position: absolute; top: -.5em; right: -.5em; width: 1.8em; height: 1.8em; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--fg); font-size: 1em; line-height: 1; cursor: pointer; }
.fb-check { display: flex; align-items: center; gap: .5em; margin: 0 0 .3em; cursor: pointer; }
.fb-env-preview { margin: 0 0 .6em 1.6em; overflow-wrap: anywhere; }
.fb-tip { margin: .4em 0 1em; padding: .5em .8em; border-left: 3px solid var(--danger); border-radius: .3em; background: var(--bg-2); color: var(--fg-2); }

.fb-back { margin: 0 0 .6em; }
.fb-detail-title { margin: 0 0 .3em; font-size: 1.4em; font-family: var(--serif); overflow-wrap: anywhere; }
.fb-hidden-note { padding: .5em .8em; border-radius: .5em; background: var(--bg-3); color: var(--fg-2); }
.fb-body { margin: 1em 0; overflow-wrap: anywhere; }
.fb-body img { max-width: 100%; }
.fb-images { display: flex; flex-wrap: wrap; gap: .5em; margin: .8em 0; }
.fb-image { padding: 0; border: 1px solid var(--line); border-radius: .4em; background: var(--bg-2); cursor: zoom-in; overflow: hidden; }
.fb-image img { display: block; width: 8em; height: 8em; object-fit: cover; }
.fb-env { margin: .8em 0; color: var(--fg-2); }
.fb-env summary { cursor: pointer; }
.fb-env dl { display: grid; grid-template-columns: auto 1fr; gap: .2em .8em; margin: .5em 0 0; }
.fb-env dt { font-weight: 600; }
.fb-env dd { margin: 0; overflow-wrap: anywhere; }
.fb-actions { flex-wrap: wrap; gap: .5em; margin: 1em 0; }
.fb-mod { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1em; margin: 0 0 1em; padding: .6em .9em; border: 1px dashed var(--line); border-radius: .6em; }
.fb-mod select { min-height: 36px; padding: .2em .5em; border: 1px solid var(--line); border-radius: .5em; background: var(--bg); color: var(--fg); font: inherit; }
.fb-comments-wrap h2 { margin: 1.4em 0 .6em; font-size: 1.1em; font-family: var(--serif); }
.fb-comments { list-style: none; margin: 0 0 1em; padding: 0; }
.fb-comment { padding: .7em 0; border-top: 1px solid var(--line); }
.fb-comment.official { padding: .7em .9em; border-left: 3px solid var(--accent); background: var(--accent-bg); }
.fb-comment.is-hidden { opacity: .65; }
.fb-comment .fb-body { margin: .4em 0 0; }
.fb-comment .fb-image img { width: 6em; height: 6em; }
.fb-lightbox img { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto .8em; object-fit: contain; }
@media (max-width: 860px) {
  .fb-filters { flex-direction: column; align-items: stretch; }
  .fb-segs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2em; scrollbar-width: none; }
  .fb-seg { flex: none; }
  .fb-status-filter { margin-left: 0; }
  .fb-main { padding: .75em .8em; }
  .fb-thumb { width: 3.8em; height: 3.8em; }
  .fb-image img { width: 6.5em; height: 6.5em; }
}
@media (hover: none) {
  .fb-thumb-x { width: 2.4em; height: 2.4em; }
  .fb-seg { min-height: 40px; }
}
/* ---------- 反馈区结束 ---------- */