/* Missbook · 悦读 — 伪装成正规电子书站 */
:root {
  --bg: #faf7f2;
  --card: #ffffff;
  --ink: #2c2a28;
  --muted: #8a8580;
  --line: #e8e2d9;
  --accent: #b54a3a;
  --accent-soft: #f3e4df;
  --fake: #b0aaa3;
  --real: #1a1a1a;
  --shadow: 0 8px 28px rgba(44, 42, 40, 0.08);
  --radius: 14px;
  --font-ui: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-read: "Songti SC", "SimSun", "Noto Serif SC", serif;
  --reader-size: 18px;
  --reader-lh: 1.9;
  --reader-font: var(--font-read);
  --reader-ink: var(--ink);
  --reader-bg: var(--bg);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* 防止标题/长句被生硬裁切 */
img { max-width: 100%; display: block; }
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 中文断行更自然；长词不硬切开 */
h1, h2, h3, h4, p, .rank-name, .book-meta h3, .new-item .nm, .feature-info h2 {
  overflow-wrap: break-word;
  word-break: break-word;
}

button, input { font-family: inherit; }
button { cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }

/* 关键：hidden 属性必须压过 .panel 的 display:flex，否则抽屉关不掉 */
[hidden] { display: none !important; }

/* ---------- 登录 ---------- */
#view-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1200px 500px at 10% -10%, #f0e6dc 0%, transparent 60%),
    radial-gradient(900px 400px at 100% 100%, #efe2da 0%, transparent 55%),
    var(--bg);
}
.login-wrap { width: 100%; max-width: 380px; }
.brand { text-align: center; margin-bottom: 28px; }
.brand-mark {
  width: 64px; height: 64px; margin: 0 auto 14px;
  border-radius: 18px;
  background: linear-gradient(145deg, #c45c4c, #9a3b2e);
  color: #fff; font-size: 28px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(181, 74, 58, 0.28);
}
.brand h1 { font-size: 28px; letter-spacing: 0.04em; font-weight: 600; }
.brand-sub { color: var(--muted); margin-top: 6px; font-size: 13px; letter-spacing: 0.2em; }
.login-card {
  background: var(--card);
  border-radius: 18px;
  padding: 28px 24px 22px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.field { display: block; margin-bottom: 16px; }
.field span {
  display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px;
}
.field input {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fcfbf9; font-size: 15px; color: var(--ink);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(181, 74, 58, 0.12);
}
.btn-primary {
  width: 100%; height: 48px; margin-top: 8px;
  border-radius: 12px; background: var(--accent); color: #fff;
  font-size: 16px; letter-spacing: 0.15em;
  transition: transform .12s, opacity .12s;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.btn-primary:active { transform: scale(0.98); }
.form-msg { margin-top: 12px; text-align: center; color: var(--accent); font-size: 13px; }
.login-foot {
  text-align: center; color: var(--muted); font-size: 12px;
  margin-top: 22px; letter-spacing: 0.12em;
}

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.topbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 0; flex-wrap: wrap;
}
.topbar-inner > * { min-width: 0; }
.logo-text { font-weight: 600; letter-spacing: 0.08em; color: var(--accent); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.whoami { color: var(--muted); font-size: 13px; }
.btn-ghost {
  padding: 8px 12px; border-radius: 999px; color: var(--ink);
  border: 1px solid var(--line); background: var(--card); font-size: 13px;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 书架首页（单屏） ---------- */
.shelf-top { position: sticky; top: 0; z-index: 25; }
.brand-row { display: flex; align-items: baseline; gap: 8px; }
.brand-tag {
  font-size: 11px; color: var(--accent); letter-spacing: .18em;
  border: 1px solid var(--accent-soft); background: var(--accent-soft);
  padding: 2px 8px; border-radius: 999px;
}
.shelf-search { flex: 1 1 180px; max-width: 320px; min-width: 0; }
.shelf-search input {
  width: 100%; height: 36px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); padding: 0 14px; font-size: 13px; color: var(--ink); outline: none;
}
.shelf-search input:focus { border-color: var(--accent); }

.shelf-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 16px 28px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 210px;
  gap: 14px;
  min-height: calc(100vh - 58px);
  width: 100%;
  overflow-x: hidden;
}
.shelf-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.side-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px;
}
.side-title {
  font-size: 13px; font-weight: 600; margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.hot-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #e2554d; box-shadow: 0 0 0 3px rgba(226,85,77,.15);
}
.cat-list { display: flex; flex-direction: column; gap: 6px; }
.cat-item {
  text-align: left; padding: 8px 10px; border-radius: 10px;
  color: var(--muted); font-size: 13px;
}
.cat-item.on, .cat-item:hover {
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.tip-card p { color: var(--muted); font-size: 12px; line-height: 1.7; }

.shelf-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.feature-strip {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 12px;
}
.feature-main {
  display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 16px;
  background: linear-gradient(135deg, #fff 0%, #f7efe8 100%);
  border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  min-height: 168px;
  min-width: 0; overflow: hidden;
}
body.theme-night .feature-main {
  background: linear-gradient(135deg, #242220 0%, #2c2622 100%);
}
.feature-cover {
  width: 120px; height: 160px; border-radius: 10px; overflow: hidden;
  color: #fff; display: flex; align-items: flex-end; padding: 12px;
  position: relative; box-shadow: 0 10px 24px rgba(44,42,40,.16);
}
.feature-cover .t {
  position: relative; z-index: 1;
  font-size: 14px; font-weight: 600; line-height: 1.4;
  max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.feature-info { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.feature-info h2 {
  font-size: 22px; font-weight: 650; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feature-label {
  font-size: 11px; letter-spacing: .16em; color: var(--accent);
  text-transform: none;
}
.feature-info p {
  color: var(--muted); font-size: 13px; line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.feature-meta { font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.btn-small {
  width: auto; height: 36px; padding: 0 16px; letter-spacing: .12em; font-size: 13px;
  margin-top: 2px; align-self: flex-start; max-width: 100%;
}

.feature-side {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px; display: flex; flex-direction: column; min-height: 168px;
}
.mini-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.new-list { display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.new-item {
  display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 8px;
  cursor: pointer; padding: 4px; border-radius: 8px;
}
.new-item:hover { background: var(--accent-soft); }
.new-thumb {
  width: 36px; height: 48px; border-radius: 4px; color: #fff; font-size: 10px;
  display: flex; align-items: flex-end; padding: 3px;
}
.new-item .nm {
  font-size: 12px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.new-item .ns { font-size: 11px; color: var(--muted); margin-top: 2px; }

.shelf-section {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px 12px 14px; flex: 1;
}
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
.section-head h3 { font-size: 15px; font-weight: 650; }
.section-sub { color: var(--muted); font-size: 12px; }

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 12px;
  min-width: 0;
}
.book-card {
  cursor: pointer; border-radius: 12px; overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.book-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.book-cover {
  aspect-ratio: 3 / 4;
  display: flex; align-items: flex-end; padding: 10px;
  color: #fff; position: relative;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.book-cover.has-img {
  background-size: cover !important;
  background-position: center !important;
}
.book-cover::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(0deg, rgba(20,16,12,.55), rgba(20,16,12,.08) 55%, transparent);
  border-radius: inherit;
}
.book-cover::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: 7%;
  height: 1px; background: rgba(255,255,255,.35);
}
.book-cover .t {
  position: relative; z-index: 1;
  font-size: 12px; font-weight: 600; line-height: 1.4;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  font-family: "Songti SC", "SimSun", serif;
  max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.book-meta { padding: 8px 2px 2px; }
.book-meta h3 {
  font-size: 12px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.book-meta .sub {
  margin-top: 4px; color: var(--muted); font-size: 11px;
  display: flex; justify-content: space-between; gap: 6px;
}

.rank-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.rank-list li {
  counter-increment: rank;
  display: grid; grid-template-columns: 22px minmax(0,1fr) auto;
  gap: 8px; align-items: center;
  padding: 7px 4px; cursor: pointer; border-radius: 8px;
}
.rank-list li:hover { background: var(--accent-soft); }
.rank-list li::before {
  content: counter(rank);
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--bg); color: var(--muted);
  font-size: 11px; display: flex; align-items: center; justify-content: center;
  font-weight: 600;
}
.rank-list li:nth-child(1)::before { background: #f3d0a8; color: #8a4b12; }
.rank-list li:nth-child(2)::before { background: #ddd9d3; color: #5a5650; }
.rank-list li:nth-child(3)::before { background: #e8c2b0; color: #8a3f2c; }
.rank-name {
  font-size: 12px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.rank-score { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 更精致的封面色（文艺封面感） */
.c0 { background: linear-gradient(160deg, #c9826f 0%, #8f3d32 55%, #5c2822 100%); }
.c1 { background: linear-gradient(160deg, #8fa3c7 0%, #4a5f8a 55%, #2c3c5e 100%); }
.c2 { background: linear-gradient(160deg, #d4b483 0%, #9a6b3f 55%, #5e3c22 100%); }
.c3 { background: linear-gradient(160deg, #d991a6 0%, #9c3f62 55%, #5c203c 100%); }
.c4 { background: linear-gradient(160deg, #7fb39d 0%, #3f7562 55%, #23483c 100%); }
.c5 { background: linear-gradient(160deg, #9aa7c0 0%, #4c5b78 55%, #2b3648 100%); }
.c6 { background: linear-gradient(160deg, #c97a68 0%, #8a3a2c 55%, #4e1e18 100%); }
.c7 { background: linear-gradient(160deg, #b48ccb 0%, #6a3f92 55%, #3c205c 100%); }
.c8 { background: linear-gradient(160deg, #7bb0d4 0%, #2f5d86 55%, #1c3a58 100%); }
.c9 { background: linear-gradient(160deg, #c0925c 0%, #7a4e24 55%, #452812 100%); }
.c10 { background: linear-gradient(160deg, #e0a76b 0%, #c06a2e 55%, #6e3814 100%); }
.c11 { background: linear-gradient(160deg, #8fb27d 0%, #4e7842 55%, #2c4826 100%); }
.c12 { background: linear-gradient(160deg, #e08a80 0%, #a83c3c 55%, #5e1e1e 100%); }
.c13 { background: linear-gradient(160deg, #d09398 0%, #8e4658 55%, #542432 100%); }
.c14 { background: linear-gradient(160deg, #7bb0c2 0%, #2d5a74 55%, #173646 100%); }
.c15 { background: linear-gradient(160deg, #c4a574 0%, #8a6430 55%, #4c3416 100%); }

/* 封面色 */
.c0 { background: linear-gradient(155deg, #c97b6b, #8e3d34); }
.c1 { background: linear-gradient(155deg, #7d8fb5, #3f4f72); }
.c2 { background: linear-gradient(155deg, #c4a574, #8b5e3c); }
.c3 { background: linear-gradient(155deg, #d4899c, #8a3f58); }
.c4 { background: linear-gradient(155deg, #6f9e8f, #2f5c50); }
.c5 { background: linear-gradient(155deg, #8f9bb3, #4a5568); }
.c6 { background: linear-gradient(155deg, #b46a5a, #6e2f28); }
.c7 { background: linear-gradient(155deg, #9b7bb8, #4e2f6b); }
.c8 { background: linear-gradient(155deg, #7aa0c2, #2c4d72); }
.c9 { background: linear-gradient(155deg, #a67c52, #5c3a1e); }
.c10 { background: linear-gradient(155deg, #e0a06a, #a85a2a); }
.c11 { background: linear-gradient(155deg, #7f9c7a, #3d5a38); }
.c12 { background: linear-gradient(155deg, #d47373, #8a2e2e); }
.c13 { background: linear-gradient(155deg, #c98b8b, #7a3f4c); }
.c14 { background: linear-gradient(155deg, #6fa3b8, #2d5f75); }
.c15 { background: linear-gradient(155deg, #b89b6e, #6e5230); }

/* ---------- 阅读页 ---------- */
.reader-top .topbar-inner { gap: 10px; }
.reader-title {
  flex: 1; text-align: center; font-weight: 600; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reader-page-label { color: var(--muted); font-size: 12px; min-width: 48px; text-align: right; }
.reader-main {
  max-width: 720px; margin: 0 auto;
  padding: 28px 22px 140px;
}
.reader-content {
  background: var(--reader-bg);
  color: var(--reader-ink);
  font-family: var(--reader-font);
  font-size: var(--reader-size);
  line-height: var(--reader-lh);
  white-space: pre-wrap;
  min-height: 55vh;
}
body.theme-night {
  --bg: #1a1917;
  --card: #242220;
  --ink: #d4cfc7;
  --muted: #8f8982;
  --line: #35322e;
  --real: #e8e2da;
  --fake: #6f6a64;
  --reader-ink: #d4cfc7;
  --reader-bg: #1a1917;
  --shadow: 0 8px 28px rgba(0,0,0,.35);
}
body.theme-night .topbar { background: rgba(26, 25, 23, 0.92); }
body.theme-night .field input { background: #2a2724; color: var(--ink); }
body.theme-night .btn-primary { color: #fff; }
body.theme-sepia {
  --bg: #f3e7d3;
  --card: #f8efe0;
  --ink: #4a3b2a;
  --muted: #8b7355;
  --line: #e2d2b5;
  --reader-ink: #4a3b2a;
  --reader-bg: #f3e7d3;
}
body.theme-sepia .topbar { background: rgba(243, 231, 211, 0.92); }

.reader-pager {
  display: flex; gap: 12px; margin-top: 36px; justify-content: center;
}
.btn-page {
  min-width: 120px; height: 42px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font-size: 14px;
}
.btn-page:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn-page:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- 底部 Dock ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg), transparent);
}
.dock-btn {
  flex: 1; height: 52px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
  color: var(--ink); font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--shadow);
}
.dock-btn:hover { border-color: var(--accent); color: var(--accent); }
.dock-icon {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
body.theme-night .dock-icon { background: #3a2a26; }
body.theme-sepia .dock-icon { background: #e8d4b5; }

/* ---------- 抽屉 ---------- */
.mask {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(20, 18, 16, 0.35);
}
.panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: 66vh;
  background: var(--card);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,.18);
  display: flex; flex-direction: column;
  animation: slideUp .22s ease;
}
@keyframes slideUp {
  from { transform: translateY(30px); opacity: .6; }
  to { transform: translateY(0); opacity: 1; }
}
.panel-handle {
  width: 42px; height: 4px; border-radius: 999px;
  background: var(--line); margin: 10px auto 4px;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.panel-head h3 { font-size: 16px; font-weight: 600; }
.panel-close {
  padding: 6px 12px; border-radius: 999px; background: var(--bg);
  color: var(--muted); font-size: 13px; border: 1px solid var(--line);
}
.panel-body { padding: 18px; overflow: auto; flex: 1; }

/* 设置 */
.settings-body { display: flex; flex-direction: column; gap: 18px; }
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.set-row > span { color: var(--muted); font-size: 14px; min-width: 48px; }
.seg {
  display: flex; background: var(--bg); border-radius: 12px; padding: 4px;
  border: 1px solid var(--line); gap: 2px;
}
.seg button {
  padding: 8px 14px; border-radius: 9px; color: var(--muted); font-size: 13px;
}
.seg button.on {
  background: var(--card); color: var(--accent); font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.set-tip { color: var(--muted); font-size: 12px; margin-top: 6px; }

/* 评论 */
.panel-comments { height: 66vh; }
.comment-list {
  flex: 1; overflow-y: auto; padding: 14px 16px 8px;
}
.cmt {
  padding: 10px 12px; border-radius: 12px; margin-bottom: 10px;
  background: var(--bg);
  animation: fadeIn .25s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none;} }
.cmt.fake { color: var(--fake); background: transparent; border: 1px dashed transparent; }
.cmt.fake.s-short {
  padding: 6px 8px; margin-bottom: 6px;
  color: #9a948c;
}
.cmt.fake.s-emoji {
  padding: 4px 8px; margin-bottom: 4px;
}
.cmt.fake.s-emoji .emoji-only {
  font-size: 18px; line-height: 1.3;
}
.cmt.fake.s-reply {
  margin-left: 18px; margin-bottom: 8px;
  padding: 8px 10px 8px 12px;
  border-left: 2px solid var(--line);
  background: rgba(0,0,0,0.015);
}
.cmt.fake.s-normal {
  margin-bottom: 12px;
  padding: 8px 10px;
}
.cmt.fake.s-normal .cmt-text {
  opacity: 0.92;
}
.cmt.real {
  color: var(--real);
  background: rgba(181, 74, 58, 0.06);
  border: 1px solid rgba(181, 74, 58, 0.12);
  margin-bottom: 10px;
}
body.theme-night .cmt.real {
  background: rgba(220, 120, 100, 0.08);
  border-color: rgba(220, 120, 100, 0.15);
  color: var(--real);
}
.cmt-meta {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 12px; margin-bottom: 4px;
  opacity: 0.9;
}
.cmt.fake .cmt-meta { color: var(--fake); }
.cmt.real .cmt-meta { color: #6b4038; font-weight: 600; }
body.theme-night .cmt.real .cmt-meta { color: #c4a090; }
.cmt-text { font-size: 14px; line-height: 1.65; word-break: break-word; white-space: pre-wrap; }
.cmt-img {
  margin-top: 8px; max-width: 220px; border-radius: 10px;
  border: 1px solid var(--line);
}
.cmt-burn {
  font-size: 11px; color: var(--muted); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.cmt-foot {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
  min-height: 18px;
}
.cmt-recall {
  font-size: 11px; color: var(--accent);
  border: 1px solid rgba(181, 74, 58, 0.35);
  border-radius: 999px; padding: 2px 8px;
  background: transparent;
  line-height: 1.4;
}
.cmt-recall:hover:not(:disabled) {
  background: rgba(181, 74, 58, 0.1);
}
.cmt-recall:disabled { opacity: .45; cursor: default; }
.comment-input {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--card);
}
.img-btn {
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 13px; cursor: pointer;
}
#comment-text {
  flex: 1; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--ink); font-size: 14px; outline: none;
}
#comment-text:focus { border-color: var(--accent); }
.btn-send {
  height: 40px; padding: 0 16px; border-radius: 12px;
  background: var(--accent); color: #fff; font-size: 14px;
}
.btn-send:disabled { opacity: .5; }
.comment-preview {
  padding: 8px 14px 12px; font-size: 12px; color: var(--muted);
  border-top: 1px dashed var(--line);
  display: flex; align-items: center; gap: 10px;
}
.comment-preview img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }

/* 封面真图 */
.book-cover.has-img .t,
.feature-cover.has-img .t,
.new-thumb.has-img {
  font-size: 11px;
}

/* 按钮避免把卡片撑破 */
.btn-primary.btn-small {
  width: auto;
  max-width: 100%;
}
.feature-info { overflow: hidden; }
/* 网格子项一律可收缩，避免把页面撑宽 */
.shelf-layout > *,
.feature-strip > *,
.feature-main > *,
.side-card,
.shelf-section,
.book-card,
.book-meta,
.new-item > *,
.rank-list li {
  min-width: 0;
}
.cat-list, .new-list, .rank-list, .book-grid {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1100px) {
  .shelf-layout {
    grid-template-columns: 132px minmax(0, 1fr);
  }
  .shelf-side-right { display: none; }
}
@media (max-width: 820px) {
  .shelf-layout {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    padding: 12px;
    overflow-x: hidden;
  }
  .shelf-side-left {
    order: -1;
    overflow: hidden;
  }
  .cat-list {
    flex-direction: row; overflow-x: auto; gap: 8px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .cat-item { white-space: nowrap; flex: 0 0 auto; }
  .feature-strip { grid-template-columns: minmax(0, 1fr); }
  .feature-main {
    grid-template-columns: 88px minmax(0,1fr);
    min-height: 140px;
    gap: 12px;
    padding: 12px;
  }
  .feature-cover { width: 88px; height: 118px; padding: 10px; }
  .feature-cover .t { font-size: 12px; -webkit-line-clamp: 3; }
  .feature-info h2 { font-size: 18px; }
  .feature-info p { -webkit-line-clamp: 3; }
  .btn-primary.btn-small {
    width: 100%;
    text-align: center;
    align-self: stretch;
  }
  .book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

  /* 顶栏在中等宽度也换行，避免用户名/按钮被挤出屏幕 */
  .topbar-inner {
    flex-wrap: wrap;
    padding: 12px 12px;
    gap: 10px;
    overflow: hidden;
  }
  .shelf-search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }
  .brand-row { flex: 1 1 auto; min-width: 0; }
  .topbar-actions { margin-left: auto; flex: 0 0 auto; max-width: 50%; }
  .whoami {
    max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: inline-block; vertical-align: middle;
  }
}
@media (max-width: 480px) {
  .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .reader-main { padding: 20px 16px 130px; }
  .feature-main { grid-template-columns: 80px minmax(0,1fr); }
  .feature-cover { width: 80px; height: 108px; }
  .feature-info h2 { font-size: 17px; }
  .side-card { padding: 10px; }
}