/* ============================================================
   共读 · 线上读书讨论版
   ============================================================ */

:root {
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", sans-serif;

  --bg: #f7f5f0;
  --surface: #fffdf9;
  --surface-2: #efebe2;
  --text: #2a2620;
  --text-2: #5d564c;
  --text-3: #8f877a;
  --line: #e2dcd0;
  --line-strong: #cdc4b4;
  --accent: #9c4a2f;
  --accent-soft: #f2e3db;
  --accent-text: #8a3f27;
  --shadow: 0 1px 2px rgba(60, 48, 34, .05), 0 8px 24px -12px rgba(60, 48, 34, .18);
  --shadow-lg: 0 2px 8px rgba(60, 48, 34, .06), 0 24px 60px -24px rgba(60, 48, 34, .28);
  --hl-yellow: #fbe9a8;
  --hl-green: #cfe8c8;
  --hl-blue: #c9e0f2;
  --hl-pink: #f5cddd;
  --radius: 10px;
  --read-measure: 36rem;
  color-scheme: light;
}

[data-theme="sepia"] {
  --bg: #efe6d3;
  --surface: #f8f1e1;
  --surface-2: #e6dbc4;
  --text: #3a3125;
  --text-2: #6b5e4b;
  --text-3: #9a8b73;
  --line: #ddd0b6;
  --line-strong: #c8b799;
  --accent: #8c5433;
  --accent-soft: #ecdfc6;
  --accent-text: #7a4527;
  --shadow: 0 1px 2px rgba(90, 70, 40, .07), 0 8px 24px -12px rgba(90, 70, 40, .2);
  --shadow-lg: 0 2px 8px rgba(90, 70, 40, .08), 0 24px 60px -24px rgba(90, 70, 40, .3);
  --hl-yellow: #f2dd93;
  --hl-green: #c9e0bd;
  --hl-blue: #bfd8ee;
  --hl-pink: #eec5d5;
}

[data-theme="dark"] {
  --bg: #191817;
  --surface: #211f1d;
  --surface-2: #2a2724;
  --text: #e8e2d8;
  --text-2: #b0a898;
  --text-3: #7c7568;
  --line: #34302b;
  --line-strong: #4a443c;
  --accent: #d08a63;
  --accent-soft: #3a2b22;
  --accent-text: #e0a07c;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, .4), 0 24px 60px -24px rgba(0, 0, 0, .7);
  --hl-yellow: #6b5a24;
  --hl-green: #3c5535;
  --hl-blue: #2f4a63;
  --hl-pink: #5d3247;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .25s, color .25s;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--accent-text); }

::selection { background: var(--hl-yellow); color: #2a2620; }
[data-theme="dark"] ::selection { background: #6b5a24; color: #f0eadf; }

/* ------------------------------------------------------------ 通用控件 */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  padding: .5em 1em;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: .875rem;
  transition: .15s;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 500;
}
.btn-primary:hover { filter: brightness(1.07); background: var(--accent); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { padding: .3em .65em; font-size: .8rem; border-radius: 6px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.input, .textarea, .select {
  width: 100%;
  padding: .55em .75em;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-size: .9rem;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea { resize: vertical; min-height: 4.5em; line-height: 1.6; }
.field { margin-bottom: .9rem; }
.field label {
  display: block; font-size: .78rem; color: var(--text-3);
  margin-bottom: .3rem; letter-spacing: .02em;
}
.hint { font-size: .78rem; color: var(--text-3); }
.err { color: #b83b2b; font-size: .82rem; min-height: 1.2em; }
[data-theme="dark"] .err { color: #e88a78; }

.tag {
  display: inline-flex; align-items: center;
  padding: .1em .5em; border-radius: 99px;
  font-size: .7rem; background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--line);
}

.avatar {
  width: 1.9em; height: 1.9em; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 600;
  background: var(--accent-soft); color: var(--accent-text);
  flex: 0 0 auto; user-select: none;
}
.avatar.lg { width: 2.4em; height: 2.4em; font-size: 1rem; }

.spinner {
  width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--accent);
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ 登录页 */

#login-view {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--bg);
}
.login-art {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(156, 74, 47, .16), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(63, 92, 80, .18), transparent 55%),
    linear-gradient(150deg, #241f1a, #3a2f26 55%, #2b2520);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 3.2rem;
  color: #f0e8dc;
}
.login-art::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 26px);
  opacity: .7;
}
.login-art-inner { position: relative; max-width: 24rem; }
.login-art .mark {
  font-family: var(--font-serif);
  font-size: 2.6rem; letter-spacing: .18em; margin: 0 0 1rem;
  color: #f6efe2;
}
.login-art p { color: rgba(240, 232, 220, .66); font-size: .9rem; line-height: 1.9; margin: 0; }
.login-art .rule { width: 3rem; height: 1px; background: rgba(240, 232, 220, .35); margin: 1.4rem 0; }

.login-panel {
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
}
.login-card { width: 100%; max-width: 21rem; }
.login-card h1 { font-size: 1.35rem; margin: 0 0 .35rem; font-weight: 600; letter-spacing: .01em; }
.login-card .sub { color: var(--text-3); font-size: .85rem; margin: 0 0 1.8rem; }

.tabs { display: flex; gap: .25rem; margin-bottom: 1.3rem; background: var(--surface-2); padding: .22rem; border-radius: 9px; }
.tabs button {
  flex: 1; padding: .45em; border-radius: 7px; font-size: .85rem; color: var(--text-2);
  transition: .15s;
}
.tabs button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-weight: 500; }

@media (max-width: 820px) {
  #login-view { grid-template-columns: 1fr; }
  .login-art { display: none; }
}

/* ------------------------------------------------------------ 应用外壳 */

#app { display: none; min-height: 100vh; flex-direction: column; }
#app.on { display: flex; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  height: calc(56px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: flex; align-items: center; gap: 1.2rem;
  padding-left: 1.1rem; padding-right: 1.1rem;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: baseline; gap: .5rem;
  font-family: var(--font-serif); font-size: 1.1rem; letter-spacing: .1em;
  color: var(--text); text-decoration: none; font-weight: 600;
  padding-right: .4rem;
}
.brand small { font-family: var(--font-sans); font-size: .62rem; letter-spacing: .12em; color: var(--text-3); font-weight: 400; }

.nav { display: flex; gap: .15rem; }
.nav button {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .42em .8em; border-radius: 7px; font-size: .875rem; color: var(--text-2);
  transition: .15s;
}
.nav button svg { width: 17px; height: 17px; flex: 0 0 auto; }
.nav button:hover { background: var(--surface-2); color: var(--text); }
.nav button.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: .4rem; }

.icon-btn {
  width: 34px; height: 34px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2); transition: .15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }

.usermenu { position: relative; }
.usermenu-pop {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow-lg);
  padding: .35rem; min-width: 11rem; display: none; z-index: 60;
}
.usermenu-pop.on { display: block; }
.usermenu-pop button, .usermenu-pop a {
  display: block; width: 100%; text-align: left;
  padding: .5em .7em; border-radius: 6px; font-size: .85rem;
  color: var(--text-2); text-decoration: none;
}
.usermenu-pop button:hover, .usermenu-pop a:hover { background: var(--surface-2); color: var(--text); }
.usermenu-pop .sep { height: 1px; background: var(--line); margin: .3rem 0; }
.usermenu-pop .who { padding: .5em .7em; font-size: .78rem; color: var(--text-3); }

.view { flex: 1; }
.page {
  max-width: 1080px; margin: 0 auto; padding: 2.2rem 1.4rem 5rem;
}
.page-head { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.page-head h1 { font-family: var(--font-serif); font-size: 1.6rem; margin: 0; font-weight: 600; letter-spacing: .02em; }
.page-head .sub { color: var(--text-3); font-size: .85rem; margin: 0 0 .2rem; }
.page-head .spacer { flex: 1; }

/* ------------------------------------------------------------ 书架 */

.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 1.6rem 1rem;
}

.book-card {
  display: flex; flex-direction: column; gap: .62rem;
  padding: 0; background: none; border: none; box-shadow: none;
  text-align: left; transition: transform .18s;
}
.book-card:hover { transform: translateY(-3px); }
.book-card:active { transform: translateY(-1px) scale(.995); }

.book-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 5px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(40, 30, 20, .14), 0 12px 26px -14px rgba(40, 30, 20, .45);
}
.book-cover::after {
  content: ""; position: absolute; inset: 0; border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  pointer-events: none;
}
.book-cover img {
  width: 100%; height: 100%; object-fit: cover;
  /* 书封书名通常压在顶部，比例不完全一致时优先保顶部 */
  object-position: center top;
  display: block;
}
.cover-text {
  font-family: var(--font-serif);
  color: rgba(255, 255, 255, .95);
  font-size: 1.02rem; line-height: 1.65; letter-spacing: .08em;
  padding: 1rem; text-align: center;
  word-break: break-word;
}
.cover-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(0, 0, 0, .28);
}
.cover-progress > i { display: block; height: 100%; background: #fff; opacity: .9; }

.accent-sand { background: linear-gradient(160deg, #b5895f, #8d6644); }
.accent-olive { background: linear-gradient(160deg, #6f8264, #4d5f45); }
.accent-clay { background: linear-gradient(160deg, #a86a52, #7d4837); }
.accent-ink { background: linear-gradient(160deg, #5a6270, #3b414c); }
.accent-sea { background: linear-gradient(160deg, #5b7f88, #3c5b63); }

.book-info { min-width: 0; }
.book-info h3 {
  font-family: var(--font-serif); font-size: .94rem; margin: 0 0 .12rem;
  font-weight: 600; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.book-info .author {
  font-size: .74rem; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.book-stats {
  display: flex; gap: .55rem; flex-wrap: wrap;
  font-size: .69rem; color: var(--text-3); margin-top: .28rem;
}

.empty {
  text-align: center; padding: 4rem 1rem; color: var(--text-3);
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface);
}
.empty h3 { font-family: var(--font-serif); color: var(--text-2); font-weight: 500; margin: 0 0 .4rem; }

/* ------------------------------------------------------------ 阅读器 */

.reader {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 330px;
  grid-template-rows: 1fr;
  height: calc(100dvh - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: hidden;
}
.reader.no-aside { grid-template-columns: 250px minmax(0, 1fr); }

.toc-pane {
  border-right: 1px solid var(--line);
  background: var(--surface);
  overflow-y: auto;
  padding: .9rem .6rem 3rem;
  scrollbar-width: thin;
}
.toc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 .5rem .7rem; gap: .4rem;
}
.toc-head .title {
  font-family: var(--font-serif); font-size: .95rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.toc-part {
  font-size: .7rem; letter-spacing: .06em; color: var(--text-3);
  text-transform: none;
  padding: 1rem .6rem .35rem;
  border-top: 1px solid var(--line);
  margin-top: .5rem;
}
.toc-part:first-of-type { border-top: none; margin-top: 0; }
.toc-item {
  display: flex; align-items: center; gap: .4rem;
  width: 100%; text-align: left;
  padding: .4em .6em; border-radius: 6px;
  font-size: .82rem; color: var(--text-2); line-height: 1.45;
  transition: .13s;
}
.toc-item:hover { background: var(--surface-2); color: var(--text); }
.toc-item.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
.toc-item .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-item .badge {
  font-size: .65rem; padding: 0 .35em; border-radius: 99px;
  background: var(--surface-2); color: var(--text-3); flex: 0 0 auto;
  min-width: 1.2em; text-align: center;
}
.toc-item.active .badge { background: rgba(156, 74, 47, .16); color: var(--accent-text); }
.toc-item .badge.disc { background: transparent; color: var(--text-3); }

.read-pane {
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  position: relative;
}
.chapter {
  max-width: var(--read-measure);
  margin: 0 auto;
  padding: 3.2rem 2rem 8rem;
  font-family: var(--font-serif);
  font-size: var(--read-size, 17.5px);
  line-height: 1.92;
  color: var(--text);
  letter-spacing: .012em;
}
.chapter-head { margin-bottom: 2.2rem; }
.chapter-head .part {
  font-family: var(--font-sans); font-size: .72rem; letter-spacing: .14em;
  color: var(--text-3); margin-bottom: .7rem;
}
.chapter-head h2 {
  font-size: 1.55em; font-weight: 600; margin: 0; line-height: 1.4;
  letter-spacing: .015em;
}
.chapter-head .meta {
  font-family: var(--font-sans); font-size: .74rem; color: var(--text-3);
  margin-top: .8rem; display: flex; gap: .8rem; align-items: center;
}
.chapter p { margin: 0 0 1.15em; text-indent: 2em; }
.chapter h3 {
  font-size: 1.06em; font-weight: 600; margin: 2.2em 0 .9em;
  text-indent: 0; letter-spacing: .03em;
  padding-left: .7em; border-left: 3px solid var(--accent);
  line-height: 1.5;
}
.chapter blockquote, .chapter p.quote {
  margin: 1.4em 0; padding: .2em 0 .2em 1.1em;
  border-left: 2px solid var(--line-strong);
  color: var(--text-2); font-style: italic; text-indent: 0;
  font-size: .96em;
}
.chapter .gap { height: .6em; }

/* 正文插图 */
.chapter-fig {
  margin: 1.9em 0;
  text-align: center;
  text-indent: 0;
}
.chapter-fig img {
  max-width: 100%; height: auto;
  border-radius: 4px;
  background: var(--surface-2);
  box-shadow: 0 1px 3px rgba(40, 30, 20, .12), 0 10px 26px -16px rgba(40, 30, 20, .45);
}
.chapter-fig figcaption {
  font-family: var(--font-sans);
  font-size: .74rem;
  color: var(--text-3);
  margin-top: .6rem;
  line-height: 1.65;
  text-indent: 0;
}

/* 脚注标记：空元素 + 伪元素显示编号，保证不占用 Range 的字符长度 */
sup.fn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .62em;
  line-height: 1.2;
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: 3px;
  padding: .1em .3em;
  margin: 0 .12em;
  vertical-align: super;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
sup.fn::before { content: attr(data-n); }
sup.fn:active { background: var(--accent); color: #fff; }
.fn-body {
  font-family: var(--font-serif);
  font-size: .93rem;
  line-height: 1.9;
  color: var(--text-2);
}

/* 划线高亮 */
.hl { border-radius: 2px; padding: .05em 0; cursor: pointer; transition: filter .15s; }
.hl:hover { filter: brightness(.94); }
.hl.yellow { background: var(--hl-yellow); }
.hl.green { background: var(--hl-green); }
.hl.blue { background: var(--hl-blue); }
.hl.pink { background: var(--hl-pink); }
.hl.has-note { border-bottom: 1.5px dotted var(--accent); }
[data-theme="dark"] .hl { color: #f0eadf; }

.chapter-nav {
  max-width: var(--read-measure); margin: 0 auto; padding: 0 2rem 3rem;
  display: flex; gap: .8rem; justify-content: space-between;
  font-family: var(--font-sans);
}
.chapter-nav button {
  flex: 1; padding: .9rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  text-align: left; transition: .15s; font-size: .82rem; color: var(--text-2);
}
.chapter-nav button:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-2); }
.chapter-nav button:disabled { opacity: .35; cursor: default; }
.chapter-nav .dir { display: block; font-size: .7rem; color: var(--text-3); margin-bottom: .15rem; }
.chapter-nav .nm { display: block; color: var(--text); font-weight: 500; }

/* 选中浮动工具条 */
#selbar {
  position: fixed; z-index: 90; display: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow-lg);
  padding: .3rem; gap: .2rem; align-items: center;
}
#selbar.on { display: flex; }
.swatch {
  width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid transparent;
  transition: .13s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.yellow { background: var(--hl-yellow); }
.swatch.green { background: var(--hl-green); }
.swatch.blue { background: var(--hl-blue); }
.swatch.pink { background: var(--hl-pink); }
#selbar .divider { width: 1px; height: 18px; background: var(--line); margin: 0 .15rem; }
#selbar .note-btn {
  font-size: .78rem; padding: .25em .6em; border-radius: 6px; color: var(--text-2);
}
#selbar .note-btn:hover { background: var(--surface-2); color: var(--text); }

/* 右侧面板 */
.aside {
  border-left: 1px solid var(--line);
  background: var(--surface);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.aside-tabs {
  display: flex; border-bottom: 1px solid var(--line); flex: 0 0 auto;
  padding: 0 .4rem;
}
.aside-tabs button {
  flex: 1; padding: .75em .3em; font-size: .8rem; color: var(--text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: .15s;
  display: flex; align-items: center; justify-content: center; gap: .3rem;
}
.aside-tabs button:hover { color: var(--text-2); }
.aside-tabs button.active { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 500; }
.aside-tabs .cnt { font-size: .68rem; color: var(--text-3); }
.aside-body { flex: 1; overflow-y: auto; scrollbar-width: thin; }
.aside-panel { display: none; }
.aside-panel.on { display: block; }

.annot {
  padding: .8rem .9rem; border-bottom: 1px solid var(--line);
  font-size: .82rem; transition: background .15s; position: relative;
}
.annot:hover { background: var(--surface-2); }
.annot .quote {
  font-family: var(--font-serif); font-size: .84rem; color: var(--text-2);
  line-height: 1.7; margin-bottom: .4rem;
  padding-left: .55rem; border-left: 2px solid var(--line-strong);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.annot .note { color: var(--text); line-height: 1.65; white-space: pre-wrap; }
.annot .note.blank { color: var(--text-3); font-style: italic; }
.annot-foot {
  display: flex; align-items: center; gap: .35rem; margin-top: .5rem;
  font-size: .7rem; color: var(--text-3);
}
.annot-foot .ops { margin-left: auto; display: flex; gap: .1rem; opacity: 0; transition: opacity .15s; }
.annot:hover .annot-foot .ops { opacity: 1; }
.annot-foot .ops button { padding: .15em .4em; border-radius: 4px; color: var(--text-3); font-size: .7rem; }
.annot-foot .ops button:hover { background: var(--surface-2); color: var(--accent-text); }

.post {
  padding: .85rem .9rem; border-bottom: 1px solid var(--line); font-size: .82rem;
}
.post-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .4rem; }
.post-head .nm { font-size: .78rem; font-weight: 500; }
.post-head .tm { font-size: .68rem; color: var(--text-3); margin-left: auto; }
.post .quote {
  font-family: var(--font-serif); font-size: .8rem; color: var(--text-3);
  padding-left: .55rem; border-left: 2px solid var(--accent-soft);
  margin: .3rem 0 .5rem; line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post .body { line-height: 1.7; white-space: pre-wrap; word-break: break-word; }

.composer {
  flex: 0 0 auto; border-top: 1px solid var(--line);
  padding: .6rem; display: flex; gap: .4rem; align-items: flex-end;
  background: var(--surface);
}
.composer textarea {
  flex: 1; min-height: 2.4em; max-height: 9em; padding: .5em .65em;
  border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--text); resize: none; outline: none;
  font-size: .82rem; line-height: 1.55;
}
.composer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.composer .send {
  width: 34px; height: 34px; border-radius: 8px; flex: 0 0 auto;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: .15s;
}
.composer .send:hover { filter: brightness(1.1); }
.composer .send:disabled { opacity: .4; }

/* 聊天 */
.chat-body { padding: .6rem .7rem 1rem; display: flex; flex-direction: column; gap: .55rem; }
.msg { display: flex; gap: .45rem; align-items: flex-start; }
.msg.mine { flex-direction: row-reverse; }
.msg .bubble {
  max-width: 78%; padding: .5em .7em; border-radius: 10px;
  background: var(--surface-2); font-size: .82rem; line-height: 1.6;
  word-break: break-word; white-space: pre-wrap;
}
.msg.mine .bubble { background: var(--accent-soft); color: var(--text); }
.msg .who { font-size: .66rem; color: var(--text-3); margin-bottom: .15em; }
.msg.mine .who { text-align: right; }
.msg-day {
  text-align: center; font-size: .68rem; color: var(--text-3);
  margin: .8rem 0 .3rem;
}

/* 空状态 */
.pane-empty { padding: 2.5rem 1.2rem; text-align: center; color: var(--text-3); font-size: .82rem; line-height: 1.9; }
.pane-empty .ico { font-size: 1.4rem; opacity: .5; display: block; margin-bottom: .5rem; }

/* 移动端 */
.mobile-only { display: none; }
@media (max-width: 1180px) {
  .reader { grid-template-columns: 250px minmax(0, 1fr); }
  .aside {
    position: fixed; right: 0; top: 56px; bottom: 0; width: min(340px, 88vw);
    z-index: 50; box-shadow: var(--shadow-lg);
    transform: translateX(102%); transition: transform .22s ease;
  }
  .aside.open { transform: none; }
}
@media (max-width: 860px) {
  .reader { grid-template-columns: minmax(0, 1fr); }
  .toc-pane {
    position: fixed; left: 0; top: 56px; bottom: 0; width: min(280px, 84vw);
    z-index: 50; transform: translateX(-102%); transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
  }
  .toc-pane.open { transform: none; }
  .mobile-only { display: inline-flex; }
  .chapter { padding: 2rem 1.3rem 6rem; }
  .chapter-nav { padding: 0 1.3rem 2rem; flex-direction: column; }
  .nav-label { display: none; }
  .page { padding: 1.4rem 1rem 4rem; }
}

/* ------------------------------------------------------------ 我的笔记 */

.notes-toolbar {
  display: flex; gap: .6rem; align-items: center; margin-bottom: 1.4rem; flex-wrap: wrap;
}
.notes-toolbar .input { max-width: 18rem; }
.notes-toolbar .grow { flex: 1; }

.note-group { margin-bottom: 2rem; }
.note-group > h2 {
  font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600;
  margin: 0 0 .9rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: .6rem;
}
.note-group > h2 .cnt { font-family: var(--font-sans); font-size: .75rem; color: var(--text-3); font-weight: 400; }

.note-item {
  display: flex; gap: .8rem; padding: .9rem 0; border-bottom: 1px solid var(--line);
}
.note-item:last-child { border-bottom: none; }
.note-bar { width: 3px; border-radius: 2px; flex: 0 0 auto; margin: .2rem 0; }
.note-bar.yellow { background: var(--hl-yellow); }
.note-bar.green { background: var(--hl-green); }
.note-bar.blue { background: var(--hl-blue); }
.note-bar.pink { background: var(--hl-pink); }
.note-main { flex: 1; min-width: 0; }
.note-chapter { font-size: .72rem; color: var(--text-3); margin-bottom: .3rem; }
.note-quote {
  font-family: var(--font-serif); font-size: .92rem; line-height: 1.75;
  color: var(--text-2); margin-bottom: .45rem;
}
.note-body { font-size: .86rem; line-height: 1.75; color: var(--text); white-space: pre-wrap; }
.note-foot { display: flex; gap: .6rem; align-items: center; margin-top: .5rem; font-size: .7rem; color: var(--text-3); }
.note-foot button { color: var(--text-3); }
.note-foot button:hover { color: var(--accent-text); }
.note-ops { margin-left: auto; display: flex; gap: .3rem; }

/* ------------------------------------------------------------ 管理台 */

.admin-grid { display: grid; gap: 1.6rem; }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem 1.3rem; box-shadow: var(--shadow);
}
.card > h2 {
  font-size: .95rem; font-weight: 600; margin: 0 0 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.card > h2 .spacer { flex: 1; }

.table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.table th {
  text-align: left; font-weight: 500; font-size: .72rem; color: var(--text-3);
  padding: .5em .6em; border-bottom: 1px solid var(--line); letter-spacing: .04em;
}
.table td { padding: .6em; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--surface-2); }
.table .num { font-variant-numeric: tabular-nums; color: var(--text-2); }
.table .ops { display: flex; gap: .25rem; justify-content: flex-end; }

.invite-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; letter-spacing: .06em;
  background: var(--surface-2); padding: .18em .5em; border-radius: 5px;
  border: 1px solid var(--line);
}

/* ------------------------------------------------------------ 弹窗 / Toast */

.modal-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(30, 24, 18, .38);
  backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center; padding: 1.2rem;
}
.modal-mask.on { display: flex; }
.modal {
  background: var(--surface); border-radius: 14px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  width: 100%; max-width: 30rem; max-height: 86vh; overflow-y: auto;
  animation: pop .18s ease;
}
@keyframes pop { from { transform: translateY(6px) scale(.99); opacity: 0; } }
.modal-head {
  padding: 1.1rem 1.3rem .6rem; display: flex; align-items: center; gap: .5rem;
}
.modal-head h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.modal-head .x { margin-left: auto; }
.modal-body { padding: .4rem 1.3rem 1.2rem; }
.modal-foot {
  padding: .8rem 1.3rem 1.1rem; display: flex; gap: .5rem; justify-content: flex-end;
}
.modal .quotebox {
  font-family: var(--font-serif); font-size: .9rem; line-height: 1.75;
  color: var(--text-2); background: var(--surface-2); padding: .7rem .9rem;
  border-radius: 8px; margin-bottom: 1rem; border-left: 3px solid var(--line-strong);
  max-height: 9em; overflow-y: auto;
}

#toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%) translateY(12px);
  background: var(--text); color: var(--bg);
  padding: .6em 1.1em; border-radius: 999px; font-size: .84rem;
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 200; max-width: 88vw;
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══════════════════════ 移动端专用组件 ══════════════════════ */

/* 阅读页顶栏（精简版） */
.rbar {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; min-width: 0;
}
.rbar .back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 9px; flex: 0 0 auto; color: var(--text-2);
  margin-left: -.35rem;
}
.rbar .back:active { background: var(--surface-2); }
.rbar .rtitle {
  flex: 1; min-width: 0; font-family: var(--font-serif); font-size: .95rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text);
}
.rbar .rtitle small { display: block; font-family: var(--font-sans); font-size: .68rem; color: var(--text-3); }

/* 手机上常驻底部操作栏 */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none;
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  border-top: 1px solid var(--line);
}
.mobile-bar.on { display: block; }
.mobile-bar .row { display: flex; height: 54px; }
.mobile-bar button {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: .66rem; color: var(--text-3); position: relative;
  -webkit-tap-highlight-color: transparent;
}
.mobile-bar button svg { width: 21px; height: 21px; }
.mobile-bar button.active { color: var(--accent-text); }
.mobile-bar .dot {
  position: absolute; top: 7px; right: calc(50% - 15px);
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 99px;
  background: var(--accent); color: #fff; font-size: .6rem;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* 字号 / 主题面板 */
.appearance { display: flex; flex-direction: column; gap: 1rem; }
.appearance .grp > .lbl {
  font-size: .75rem; color: var(--text-3); margin-bottom: .5rem;
}
.size-row { display: flex; align-items: center; gap: .6rem; }
.size-row .btn { flex: 1; }
.size-row .val { font-size: .82rem; color: var(--text-2); min-width: 3.4em; text-align: center; font-variant-numeric: tabular-nums; }
.theme-row { display: flex; gap: .5rem; }
.theme-row button {
  flex: 1; padding: .6em; border-radius: 9px; border: 1.5px solid var(--line-strong);
  font-size: .8rem; color: var(--text-2);
}
.theme-row button.on { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.theme-row .sw { display: block; height: 22px; border-radius: 5px; margin-bottom: .35rem; border: 1px solid var(--line); }
.theme-row .sw.light { background: #f7f5f0; }
.theme-row .sw.sepia { background: #efe6d3; }
.theme-row .sw.dark { background: #191817; }

/* 独立聊天页 */
.chat-page {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  height: calc(100dvh - 56px - env(safe-area-inset-top));
  overflow: hidden;
}
.chat-side {
  border-right: 1px solid var(--line);
  background: var(--surface);
  overflow-y: auto;
  padding: .5rem .45rem calc(1.2rem + env(safe-area-inset-bottom));
  scrollbar-width: thin;
}
.side-title {
  font-size: .68rem; letter-spacing: .1em; color: var(--text-3);
  padding: .9rem .65rem .35rem; font-weight: 500;
}
.side-empty { font-size: .78rem; color: var(--text-3); padding: .3rem .7rem .6rem; }
.person, .room-item {
  display: flex; align-items: center; gap: .55rem;
  width: 100%; padding: .5em .6em; border-radius: 8px;
  font-size: .85rem; color: var(--text-2); text-align: left;
  transition: .13s;
}
.person:hover, .room-item:hover { background: var(--surface-2); color: var(--text); }
.person.active, .room-item.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
.person .nm, .room-item .nm {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.room-item .hint { font-size: .68rem; color: var(--text-3); }
.dot-online {
  width: 7px; height: 7px; border-radius: 50%; background: #3f9c5a; flex: 0 0 auto;
}
.dot-online.away { background: var(--line-strong); }

.chat-main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.chat-head {
  flex: 0 0 auto; height: 50px;
  display: flex; align-items: center; gap: .5rem;
  padding: 0 1rem; border-bottom: 1px solid var(--line);
  font-size: .92rem; font-weight: 500;
  background: var(--surface);
}
.chat-head .hint { font-weight: 400; font-size: .72rem; color: var(--text-3); }
.chat-head .lock {
  font-style: normal; font-size: .65rem; padding: .1em .45em; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent-text); font-weight: 400;
}
.chat-scroll { flex: 1; overflow-y: auto; padding: 1rem 1rem .5rem; scrollbar-width: thin; }
.chat-scroll .msg { margin-bottom: .6rem; }
.chat-compose {
  flex: 0 0 auto;
  display: flex; gap: .5rem; align-items: flex-end;
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.chat-compose textarea {
  flex: 1; min-height: 2.5em; max-height: 8em;
  padding: .55em .7em; border-radius: 9px;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text);
  resize: none; outline: none; font-size: .88rem; line-height: 1.55;
}
.chat-compose textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.chat-compose .send {
  width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.chat-compose .send:active { transform: scale(.96); }

@media (max-width: 860px) {
  .chat-page {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: calc(100dvh - 52px - env(safe-area-inset-top));
  }
  .chat-side {
    display: flex; gap: .4rem; align-items: center;
    overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 1px solid var(--line);
    padding: .55rem .6rem; scrollbar-width: none;
  }
  .chat-side::-webkit-scrollbar { display: none; }
  .side-title, .side-empty { display: none; }
  .person, .room-item {
    flex: 0 0 auto; width: auto; padding: .38em .7em;
    background: var(--surface-2); white-space: nowrap;
  }
  .person .nm, .room-item .nm { max-width: 6em; }
  .person .avatar { width: 1.6em; height: 1.6em; font-size: .74rem; }
  .person .dot-online { margin-left: .1rem; }
  .chat-scroll { padding: .8rem .8rem .3rem; }
  .chat-compose textarea { font-size: 16px; }
  .chat-head { height: 44px; padding: 0 .8rem; }
}

/* 泛读式讨论流 */
.feed { display: flex; flex-direction: column; gap: .9rem; }
.feed-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .95rem 1rem; box-shadow: var(--shadow);
}
.feed-card .fh { display: flex; align-items: center; gap: .45rem; margin-bottom: .55rem; }
.feed-card .fh .nm { font-size: .82rem; font-weight: 500; }
.feed-card .fh .tm { font-size: .7rem; color: var(--text-3); margin-left: auto; }
.feed-card .src {
  font-size: .7rem; color: var(--accent-text); background: var(--accent-soft);
  padding: .12em .5em; border-radius: 5px; display: inline-block; margin-bottom: .55rem;
}
.feed-card .quote {
  font-family: var(--font-serif); font-size: .88rem; color: var(--text-2);
  line-height: 1.78; padding-left: .7rem; border-left: 2px solid var(--line-strong);
  margin-bottom: .6rem;
}
.feed-card .bdy { font-size: .9rem; line-height: 1.78; white-space: pre-wrap; word-break: break-word; }
.feed-card .fo { display: flex; gap: .5rem; margin-top: .6rem; font-size: .72rem; color: var(--text-3); }
.feed-card .fo button { color: var(--text-3); }
.feed-card .fo button:active { color: var(--accent-text); }

/* 移动端：更紧凑、更好点 */
@media (max-width: 860px) {
  body { font-size: 15px; }

  .topbar { gap: .5rem; }
  .brand { font-size: 1rem; letter-spacing: .06em; }
  .brand small { display: none; }
  .icon-btn { width: 40px; height: 40px; }

  .topbar { height: calc(52px + env(safe-area-inset-top)); padding-left: .7rem; padding-right: .7rem; }
  .reader { height: calc(100dvh - 52px - env(safe-area-inset-top)); }
  .reader.has-bar { height: calc(100dvh - 52px - env(safe-area-inset-top) - 54px - env(safe-area-inset-bottom)); }

  .chapter {
    padding: 1.6rem 1.25rem calc(3rem + env(safe-area-inset-bottom));
    font-size: var(--read-size, 17px);
    line-height: 1.95;
    max-width: none;
  }
  .chapter p { margin-bottom: 1.1em; text-indent: 2em; }
  .chapter-head { margin-bottom: 1.6rem; }
  .chapter-head h2 { font-size: 1.35em; }
  .chapter h3 { margin: 1.9em 0 .8em; }

  .chapter-nav { padding: 0 1.25rem calc(2rem + env(safe-area-inset-bottom)); }

  /* 抽屉铺满可视区 */
  .toc-pane { top: calc(52px + env(safe-area-inset-top)); width: min(86vw, 320px); padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
  .aside { top: calc(52px + env(safe-area-inset-top)); width: 100vw; max-width: 100vw; }
  .toc-head button, .aside-tabs button { min-height: 44px; }
  .toc-item { min-height: 42px; }
  .annot-foot .ops { opacity: 1; }

  /* 划线工具条贴底，避开系统选择菜单 */
  #selbar {
    left: 50%; right: auto; bottom: calc(env(safe-area-inset-bottom) + 12px);
    transform: translateX(-50%);
    padding: .45rem .5rem; border-radius: 14px;
    box-shadow: 0 -2px 8px rgba(0,0,0,.06), var(--shadow-lg);
    animation: rise .16s ease;
  }
  @keyframes rise { from { transform: translateX(-50%) translateY(10px); opacity: 0; } }
  #selbar .swatch { width: 34px; height: 34px; border-radius: 9px; }
  #selbar .note-btn { padding: .5em .8em; font-size: .85rem; min-height: 36px; }

  .composer { padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom)); }
  .composer textarea { font-size: 16px; }  /* 防止 iOS 聚焦缩放 */
  .composer .send { width: 40px; height: 40px; }

  .page { padding: 1.2rem .9rem calc(3rem + env(safe-area-inset-bottom)); }
  .page-head h1 { font-size: 1.35rem; }
  .shelf { grid-template-columns: 1fr; gap: .8rem; }
  .book-card { padding: .9rem; }

  .modal-mask { align-items: flex-end; padding: 0; }
  .modal {
    max-width: none; border-radius: 16px 16px 0 0;
    max-height: 88dvh; animation: sheet .2s ease;
    padding-bottom: env(safe-area-inset-bottom);
  }
  @keyframes sheet { from { transform: translateY(30px); opacity: .6; } }
  .modal .input, .modal .textarea { font-size: 16px; }

  .notes-toolbar .input { max-width: none; flex: 1 1 100%; }
  .note-item { padding: .8rem 0; }

  .table { font-size: .8rem; }
  .table .hide-sm { display: none; }

  #toast { bottom: calc(env(safe-area-inset-bottom) + 70px); }

  /* 手机端输入时把阅读区压缩，避免键盘顶飞布局 */
  .kb-open .mobile-bar { display: none; }
}

@media (max-width: 380px) {
  .chapter { padding-left: 1rem; padding-right: 1rem; }
  .mobile-bar button { font-size: .6rem; }
}

/* 大屏：底部栏永远不出现 */
@media (min-width: 861px) {
  .mobile-bar { display: none !important; }
  .reader.has-bar { height: calc(100dvh - 56px - env(safe-area-inset-top)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------ 启动遮罩 */

#boot {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.1rem; background: var(--bg);
  transition: opacity .22s ease;
}
#boot.done { opacity: 0; pointer-events: none; }
.boot-logo {
  font-family: var(--font-serif); font-size: 1.5rem;
  letter-spacing: .24em; color: var(--text-2); margin-left: .24em;
}

/* ------------------------------------------------------------ 搜索面板 */

.search-panel {
  position: fixed; left: 0; right: 0; bottom: 0;
  top: calc(56px + env(safe-area-inset-top));
  z-index: 70;
  background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateY(-8px);
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.search-panel.on { opacity: 1; transform: none; pointer-events: auto; }

.search-bar {
  display: flex; align-items: center; gap: .55rem;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex: 0 0 auto;
}
.search-field {
  flex: 1; display: flex; align-items: center; gap: .45rem;
  padding: .45em .7em;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  transition: border-color .15s, box-shadow .15s;
}
.search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-ico { width: 16px; height: 16px; color: var(--text-3); flex: 0 0 auto; }
.search-field input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-size: .92rem; color: var(--text);
}
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
#search-clear {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  background: var(--line-strong); color: var(--surface);
  font-size: .8rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
#search-close { font-size: .85rem; color: var(--text-2); padding: .3em .2em; }

.search-body { flex: 1; overflow-y: auto; padding: 0 0 3rem; scrollbar-width: thin; }

.sr-group { padding-top: .4rem; }
.sr-title {
  font-size: .7rem; letter-spacing: .1em; color: var(--text-3);
  padding: .9rem 1.1rem .45rem; font-weight: 500;
  display: flex; align-items: center; gap: .4rem;
}
.sr-title span {
  background: var(--surface-2); border-radius: 99px;
  padding: .05em .5em; font-size: .66rem; letter-spacing: 0;
}
.sr-item {
  display: block; width: 100%; text-align: left;
  padding: .7rem 1.1rem; border-bottom: 1px solid var(--line);
  transition: background .13s;
}
.sr-item:hover { background: var(--surface); }
.sr-item:active { background: var(--surface-2); }
.sr-src {
  font-size: .7rem; color: var(--accent-text); margin-bottom: .22rem;
  display: flex; align-items: center; gap: .4rem;
}
.sr-src i {
  font-style: normal; width: 3px; height: 11px; border-radius: 2px;
  background: var(--hl-yellow); display: inline-block;
}
.sr-text {
  font-size: .86rem; line-height: 1.72; color: var(--text-2);
  word-break: break-word;
}
.sr-text .kw {
  background: var(--hl-yellow); color: var(--text);
  border-radius: 2px; padding: .02em .1em;
}
[data-theme="dark"] .sr-text .kw { background: #6b5a24; color: #f5efe4; }
.sr-meta { font-size: .68rem; color: var(--text-3); margin-top: .28rem; }

@media (max-width: 860px) {
  .search-panel { top: calc(52px + env(safe-area-inset-top)); }
  .search-bar { padding: .55rem .7rem; }
  .search-field input { font-size: 16px; }
  .sr-item { padding: .75rem .9rem; }
  .sr-title { padding: .8rem .9rem .4rem; }
}

/* ------------------------------------------------------------ 工具书（iframe） */

.doc-reader {
  height: calc(100dvh - 56px - env(safe-area-inset-top));
  background: var(--bg);
  overflow: hidden;
}
.doc-frame {
  width: 100%; height: 100%;
  border: 0; display: block;
  background: var(--bg);
}

@media (max-width: 860px) {
  .doc-reader { height: calc(100dvh - 52px - env(safe-area-inset-top)); }
  /* 工具书自带底部导航时，给它留出安全区 */
  .doc-frame { padding-bottom: 0; }
}