:root {
  --front-ink: #1a1a1a;
  /* 次要文字色。原值 #6b7280 在纸灰底 #f4f4f5 上对比度只有 4.40（WCAG AA 要求 4.5），
     加深到 #666c78 后为 4.80；视觉差异几乎察觉不到。 */
  --front-soft-ink: #666c78;
  /* 深色底（顶栏 / 页脚 #1a1a1a）上的次要文字。
     同一个浅灰放在深底上对比度只有 3.60，因此单独出一个反向变量。 */
  --front-soft-ink-inverse: #9ca3af;
  --front-border: rgba(0, 0, 0, .08);
  --front-card: #ffffff;
  --front-wash: #f4f4f5;
  --front-paper: #fafafa;
  --front-gold: #333333;
  --front-gold-deep: #1a1a1a;
  --front-accent: #1a1a1a;
  --front-shadow: 0 1px 3px rgba(0, 0, 0, .06);

  /* ── z-index 分层 ────────────────────────────────────────────────────
     原先散落 13 种互不成体系的取值（999 / 9999 / 20000 / 99999 /
     2147482000 / 2147483000 …），"谁该压在谁上面"只能靠猜，也没法安全地
     插入新层。这里把它们收进一套带名字的阶梯。

     重要：数值一律保持不变，因此不改变任何现有层叠结果，只是让层级关系
     显式化、可检索、可插入新层。若将来要调整顺序，改这一处即可。

     组件内部那类局部堆叠（0/1/2/3/4/5/10，用于卡片内装饰元素互相遮挡）
     不纳入本表——它们不参与全局争抢，就地书写更直观。
     ─────────────────────────────────────────────────────────────────── */
  --z-float: 999;              /* 悬浮小元件（香案计时器等），低于导航 */
  --z-navbar: 1020;            /* 顶部导航（原 app.css 字面量 1020） */
  --z-mask: 1050;              /* 遮罩层（原 .my_modal_bg） */
  --z-popup: 1060;             /* 遮罩之上的浮层（原 .help_zty） */
  --z-overlay: 2000;           /* 页面级覆盖层：香案遮罩等 */
  --z-panel: 9999;             /* 全屏面板 / 抽屉（原 4 处重复的 9999） */
  --z-modal: 20000;            /* 卦盘等大弹窗（原 #PoPy） */
  --z-toast: 99999;            /* 全局提示，需压过一切面板 */
  --z-drawer: 2147482000;      /* 卦例抽屉：必须压过第三方浮层 */
  --z-drawer-inner: 2147482001;
  --z-drawer-top: 2147483000;  /* 卦盘同参浮层 */

  /* ── 字号阶梯（目标态） ──────────────────────────────────────────────
     现状实测：全站 102 种字号取值（外链 CSS + app/*.php 内联样式合计），
     且 px 与 rem 混用（px 共 87 处）。已确认 html / :root 均未设置
     font-size，即 1rem = 16px 全站成立，所以 px 与 rem 可以精确互换，
     收敛时不会产生换算误差。

     下列 6 档为收敛目标。新增样式请直接取用这些 token；存量 102 种取值的
     逐处归并属于「影响排版的视觉重构」，需配套逐页视觉基线核对，
     不宜与其它改动混在一起做。

       --fs-2xs  11.2px  极小标签（图例、下标、段位号）
       --fs-xs   12.5px  次要说明、元信息
       --fs-sm   13.6px  正文辅助、表单标签
       --fs-base 15.2px  正文
       --fs-lg   17.6px  小标题、区块标题
       --fs-xl   24px    页面级标题
     ─────────────────────────────────────────────────────────────────── */
  --fs-2xs: .7rem;
  --fs-xs: .78rem;
  --fs-sm: .85rem;
  --fs-base: .95rem;
  --fs-lg: 1.1rem;
  --fs-xl: 1.5rem;
}

html.site-grayscale { filter: grayscale(1); -webkit-filter: grayscale(1); }
body {
  letter-spacing: .3px;
  color: var(--front-ink);
  background: #f4f4f5;
}
.front-theme { min-height: 100vh; }
.front-theme h1, .front-theme h2, .front-theme h3, .front-theme h4, .front-theme h5, .front-theme .fw-semibold {
  letter-spacing: .5px;
  color: #1a1a1a;
}
.front-theme a { transition: color .18s ease; }
.front-theme .text-secondary { color: var(--front-soft-ink) !important; }

/* ── 键盘可达性：统一焦点环 ──────────────────────────────────────────────
   站点原有 79 条 :hover 却只有 16 条 :focus，键盘用户几乎得不到可见反馈；
   且多处 `outline:none`（如 .yq-select / .dy-select / 富文本编辑器 / 滑杆）
   把浏览器默认焦点环直接抹掉了。

   两点设计取舍：
   1. 用 :is() 提升权重并加 !important——否则类选择器上的 `outline:none`
      （权重 0,1,0）会盖住焦点环。焦点环属于无障碍底线，这里允许 !important。
   2. 环色用 currentColor 而非某个固定主色：站点主色 --front-accent 本身就是
      墨色 #1a1a1a，固定色在深色导航/页脚上会完全看不见；currentColor 会跟随
      元素自身前景色，而前景色在其背景上本来就是可读的，因此深浅底都保证可见。
   ───────────────────────────────────────────────────────────────────── */
:is(a, button, input, select, textarea, summary, [tabindex], [role="button"], [contenteditable]):focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}
/* 鼠标点击不显示焦点环；不支持 :focus-visible 的旧浏览器整条规则不生效，
   默认焦点环因此得以保留，不会误伤。 */
:is(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus:not(:focus-visible) {
  outline: none;
}

.front-topline {
  background: #1a1a1a;
  color: rgba(255, 255, 255, .7);
  padding: .45rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .78rem;
  letter-spacing: .04em;
}
.front-topline .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .4rem .5rem;
  align-items: center;
}
/* 顶栏是深色底：次要文字必须用反向色，否则对比度只有 3.60 */
.front-topline .text-secondary { color: var(--front-soft-ink-inverse) !important; }
.front-navbar {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  transition: box-shadow .25s ease;
}
.front-navbar.sticky-top {
  top: 0;
  z-index: var(--z-navbar, 1020);
}
.front-brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  letter-spacing: .6px;
  color: var(--front-ink);
  text-decoration: none;
}
.front-brand:hover { color: var(--front-ink); }
.front-brand-mark {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  background: #1a1a1a;
  box-shadow: none;
  transition: opacity .2s ease;
}
.front-brand:hover .front-brand-mark {
  opacity: .85;
}
.front-brand-title { display: block; font-weight: 700; font-size: 1.08rem; color: #1a1a1a; }
.front-brand-subtitle { display: block; font-size: .72rem; color: var(--front-soft-ink); margin-top: .08rem; letter-spacing: .05em; }
.navbar .nav-link { color: var(--front-soft-ink); font-weight: 500; padding: .8rem .95rem !important; border-radius: 6px; margin: 0 .05rem; transition: color .18s ease, background .18s ease; }
.navbar .nav-link:hover { color: var(--front-ink); background: rgba(0, 0, 0, .03); }
.navbar .nav-link.active {
  font-weight: 700;
  color: var(--front-ink);
  background: rgba(0, 0, 0, .04);
}
.navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: .95rem;
  right: .95rem;
  bottom: .45rem;
  height: 2px;
  border-radius: 999px;
  background: #1a1a1a;
}
.front-main { position: relative; }
.card {
  border-radius: 12px;
  border: 1px solid var(--front-border);
  background: var(--front-card);
  transition: box-shadow .2s ease;
}
.card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.btn {
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.2;
  padding: .55rem 1rem;
  gap: .35rem;
}
.btn-sm { font-size: 14px; padding: .48rem .95rem; line-height: 1.2; }
.btn-dark {
  background: #1a1a1a;
  border-color: transparent;
  color: #fff;
}
.btn-dark:hover { background: #333; color: #fff; }
.btn-outline-dark {
  border-color: rgba(0, 0, 0, .15);
  color: var(--front-ink);
  background: #fff;
}
.btn-outline-dark:hover {
  border-color: rgba(0, 0, 0, .3);
  background: #f4f4f5;
  color: var(--front-ink);
}
.admin-action-buttons .btn { min-width: 140px; }
.form-control, .form-select {
  border-radius: 8px;
  border-color: rgba(0, 0, 0, .12);
  background: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: rgba(0, 0, 0, .3);
  box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .06);
}
.shadow-soft { box-shadow: var(--front-shadow); }
.hero {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 16px;
  box-shadow: var(--front-shadow);
}


/* ===== Hero V3 — 书卷气 · 首页主视觉 ===== */
.hero-v3 {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, .06);
  margin-bottom: 1.5rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* 左侧留白装饰 — 淡墨晕 */
.hero-v3-ink {
  display: none;
}

.hero-v3-inner {
  position: relative;
  z-index: 1;
  padding: 3rem 2.4rem;
}
@media (min-width: 768px) {
  .hero-v3-inner { padding: 3.2rem 2.8rem; }
}
@media (min-width: 992px) {
  .hero-v3-inner { padding: 3.6rem 3.2rem; }
}

/* ── 左栏内容 ── */
.hero-v3-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.3rem;
}
@media (min-width: 992px) {
  .hero-v3-content { padding-right: 2rem; }
}

/* 眉标 */
.hero-v3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--front-soft-ink);
}
.hero-v3-eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  border-radius: 1px;
  background: rgba(0, 0, 0, .2);
}

/* 标题 */
.hero-v3-title {
  font-size: clamp(2rem, 4.4vw, 2.65rem);
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: .02em;
  color: #1a1a1a;
  margin: 0;
}
.hero-v3-title-accent {
  background: linear-gradient(135deg, #b85c38 0%, #8b2e1a 40%, #5a1a0e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 描述 */
.hero-v3-desc {
  font-size: .98rem;
  line-height: 1.88;
  color: var(--front-soft-ink);
  max-width: 33rem;
}

/* 操作按钮 */
.hero-v3-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
}
.hero-v3-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .68rem 1.6rem;
  font-size: .9rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all .18s ease;
  line-height: 1.3;
}
.hero-v3-btn-primary {
  background: #1a1a1a;
  color: #fff;
}
.hero-v3-btn-primary:hover {
  background: #333;
  color: #fff;
}
.hero-v3-btn-outline {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .15);
  color: var(--front-ink);
}
.hero-v3-btn-outline:hover {
  border-color: rgba(0, 0, 0, .3);
  background: #f4f4f5;
  color: var(--front-ink);
}
.hero-v3-links {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  margin-left: .6rem;
}
.hero-v3-links a {
  font-size: .83rem;
  color: var(--front-soft-ink);
  text-decoration: none;
  transition: color .18s ease;
}
.hero-v3-links a:hover { color: var(--front-ink); }

/* ── 右栏视觉 ── */
.hero-v3-visual {
  display: flex;
  flex-direction: column;
  min-height: 300px;
}
@media (max-width: 991.98px) {
  .hero-v3-visual { margin-top: 1.6rem; min-height: 240px; }
}

.hero-v3-frame {
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  min-height: 260px;
}
.hero-v3-frame .carousel,
.hero-v3-frame .carousel-inner,
.hero-v3-frame .carousel-item {
  height: 100%;
}

/* Banner 图片 */
.hero-v3-banner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 260px;
}
.hero-v3-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.4) 100%);
  pointer-events: none;
}
.hero-v3-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16 / 9;
}
.hero-v3-banner-cap {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 2;
}
.hero-v3-banner-tag {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 6px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  font-size: .68rem;
  letter-spacing: .08em;
  font-weight: 500;
  color: #fff;
}
.hero-v3-banner-text {
  margin-top: .45rem;
  max-width: 15rem;
  font-size: .88rem;
  line-height: 1.5;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* 搜索面板 */
.hero-v3-search-frame {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.hero-v3-search {
  padding: 2.2rem 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-height: 260px;
}

.hero-v3-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #f4f4f5;
  color: var(--front-ink);
  margin-bottom: .9rem;
}

.hero-v3-search-label {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: .35rem;
  letter-spacing: .03em;
}

.hero-v3-search-sub {
  font-size: .8rem;
  color: var(--front-soft-ink);
  margin-bottom: 1.15rem;
  line-height: 1.4;
}

.hero-v3-search-row {
  display: flex;
  gap: .55rem;
}

.hero-v3-search-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.hero-v3-search-input-icon {
  position: absolute;
  left: .75rem;
  color: #9ca3af;
  pointer-events: none;
  z-index: 2;
}

.hero-v3-search-input {
  flex: 1;
  padding-left: 2.3rem !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, .15) !important;
  background: #fff !important;
  font-size: .88rem;
  height: 44px;
  transition: all .2s ease;
}

.hero-v3-search-input:focus {
  border-color: rgba(0, 0, 0, .4) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.06) !important;
  background: #fff !important;
}

.hero-v3-search-input::placeholder {
  color: #9ca3af;
}

.hero-v3-search-btn {
  height: 44px;
  padding: 0 1.4rem !important;
  white-space: nowrap;
  font-size: .88rem;
  border-radius: 8px !important;
}

.hero-v3-search-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  margin-top: 1rem;
  font-size: .76rem;
  color: var(--front-soft-ink);
}

.hero-v3-search-tags a {
  color: var(--front-soft-ink);
  text-decoration: none;
  padding: .18rem .58rem;
  border-radius: 999px;
  background: #f4f4f5;
  border: 1px solid rgba(0, 0, 0, .08);
  transition: all .18s ease;
}

.hero-v3-search-tags a:hover {
  background: rgba(0, 0, 0, .05);
  color: var(--front-ink);
  border-color: rgba(0, 0, 0, .15);
}

.hero-v3-visual-note {
  margin-top: .7rem;
  font-size: .78rem;
  line-height: 1.65;
  color: var(--front-soft-ink);
  padding: 0 .15rem;
}
.hero-v3-visual-note a {
  color: var(--front-ink);
  text-decoration: none;
  font-weight: 500;
}
.hero-v3-visual-note a:hover { text-decoration: underline; }

/* ── 响应式 ── */
@media (max-width: 767.98px) {
  .hero-v3-inner { padding: 2rem 1.2rem; }
  .hero-v3-title { font-size: 1.8rem; }
  .hero-v3-desc { font-size: .9rem; }
  .hero-v3-btn { padding: .6rem 1.3rem; font-size: .85rem; }
}
@media (max-width: 575.98px) {
  .hero-v3-inner { padding: 1.6rem 1rem; }
  .hero-v3-title { font-size: 1.55rem; }
  .hero-v3-actions { gap: .5rem; }
  .hero-v3-links { margin-left: 0; width: 100%; margin-top: .2rem; }
}

/* ── 全局工具样式 ── */
.breadcrumb {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 8px;
  padding: .55rem .9rem;
  display: inline-flex;
  flex-wrap: wrap;
}
.badge.text-bg-light.border {
  background: #f4f4f5 !important;
  color: var(--front-ink) !important;
  border-color: rgba(0, 0, 0, .08) !important;
}
.link-muted { color: var(--front-soft-ink); text-decoration: none; }
.link-muted:hover { color: var(--front-ink); }
.front-footer {
  margin-top: 3rem;
  padding: 2.4rem 0 1.5rem;
  background: #1a1a1a;
  border-top: 1px solid rgba(255,255,255,.06);
}
.front-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(180px, .8fr));
  gap: 1.4rem 2rem;
  align-items: start;
}
.front-footer-title, .front-footer-heading { color: #fff; font-weight: 700; letter-spacing: .4px; }
.front-footer-links { display: flex; flex-direction: column; gap: .55rem; }
.front-footer .link-secondary { color: rgba(255, 255, 255, .5) !important; }
.front-footer .link-secondary:hover { color: #fff !important; }
/* 页脚同样是深色底：说明文字、免责声明、版权行的次要文字都要用反向色 */
.front-footer .text-secondary { color: var(--front-soft-ink-inverse) !important; }
.front-footer-bottom {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255, 255, 255, .4);
}
.admin-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.admin-aside { position: sticky; top: 0; height: 100vh; overflow: auto; }
.admin-main { min-width: 0; }
@media (max-width: 991.98px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-aside { position: relative; height: auto; }
  .front-footer-grid { grid-template-columns: 1fr; }
  .front-brand-subtitle { display: none; }
}
.list-group-item.active { background: rgba(0, 0, 0, .06); color: var(--front-ink); border-color: rgba(0, 0, 0, .1); }
.list-group-item.active:hover { background: rgba(0, 0, 0, .1); }
.table td, .table th { vertical-align: middle; }
.badge-soft { background: rgba(0, 0, 0, .06); color: var(--front-ink); }
.front-theme .table { --bs-table-bg: transparent; }
.front-theme .table > :not(caption) > * > * { border-bottom-color: rgba(0, 0, 0, .06); }
.front-theme .card .fw-semibold + .text-secondary.small { line-height: 1.8; }
.front-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--front-ink);
}
.front-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(0, 0, 0, .2);
}

.detail-paper-card {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.detail-paper-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}
.detail-section-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--front-ink);
}
.detail-section-label::before {
  content: "";
  width: 32px;
  height: 1px;
  background: rgba(0, 0, 0, .2);
}
.detail-paper-intro {
  position: relative;
  z-index: 1;
  line-height: 2;
  font-size: 1rem;
}
.detail-note-panel {
  position: relative;
  z-index: 1;
  border-radius: 12px;
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, .06);
}
.seal-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--front-border);
  border-radius: 12px;
}
.seal-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 0;
  background: #1a1a1a;
  opacity: .6;
}
.seal-card-body { position: relative; z-index: 1; }
.seal-ribbon {
  display: inline-flex;
  align-items: center;
  padding: .24rem .65rem;
  border-radius: 999px;
  background: #f4f4f5;
  border: 1px solid rgba(0, 0, 0, .08);
  color: var(--front-ink);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.seal-title {
  display: block;
  line-height: 1.7;
  letter-spacing: .3px;
}
.seal-summary {
  line-height: 1.85 !important;
  color: var(--front-soft-ink) !important;
}
.seal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  color: var(--front-soft-ink) !important;
}
.seal-list-row:last-child { border-bottom: 0 !important; }
.home-side-panel,
.topic-info-card,
.topic-faq-card,
.friend-link-panel {
  background: #fff;
}
.topic-module-card,
.filter-seal-card,
.detail-related-card,
.detail-directory-card,
.detail-comment-card {
  background: #fff;
}
.filter-seal-card .form-label {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--front-ink);
}
.filter-seal-card .input-group-text {
  background: #f4f4f5 !important;
  border-color: rgba(0, 0, 0, .1) !important;
  color: var(--front-ink);
}
.filter-seal-card .form-control,
.filter-seal-card .form-select {
  background: #fff;
}
.filter-seal-card .btn-group .btn {
  border-radius: 8px !important;
}
.pager-seal-wrap { display: flex; justify-content: center; }
.pager-seal {
  gap: .4rem;
  flex-wrap: wrap;
  padding: .4rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.pager-seal .page-item .page-link {
  border: 0;
  border-radius: 6px;
  min-width: 2.4rem;
  text-align: center;
  color: var(--front-ink);
  background: transparent;
}
.pager-seal .page-item.active .page-link {
  background: #1a1a1a;
  color: #fff;
}
.pager-seal .page-item .page-link:hover {
  background: #f4f4f5;
  color: var(--front-ink);
}
.daily-gua-panel {
  background: #fafafa;
}
.daily-gua-panel .daily-gua-tile {
  background: #fff;
  border-color: rgba(0, 0, 0, .08);
  box-shadow: none;
}
.faq-seal-item {
  border: 1px solid rgba(0, 0, 0, .06);
  background: #fff;
  border-radius: 10px;
  padding: .9rem 1rem;
}
.faq-seal-item summary { list-style: none; }
.faq-seal-item summary::-webkit-details-marker { display: none; }
.faq-seal-item[open] {
  background: #fafafa;
  border-color: rgba(0, 0, 0, .1);
}
.friend-link-panel .friend-links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .85rem;
}
.friend-link-panel .friend-link-item {
  padding: .55rem .9rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  color: var(--front-ink);
  text-decoration: none;
}
.friend-link-panel .friend-link-item:hover {
  color: var(--front-ink);
  border-color: rgba(0, 0, 0, .15);
  background: #fafafa;
}
.detail-related-card .border.rounded-4,
.topic-module-card .border.rounded-4,
.detail-directory-card .row .col a {
  background: #fff;
}
.detail-related-item {
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
  background: transparent !important;
  padding-left: 0;
  padding-right: 0;
}
.detail-related-item:last-child { border-bottom: 0 !important; }
.detail-directory-list {
  padding: .35rem;
  border-radius: 10px;
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, .06);
}
.detail-directory-list a {
  padding: .55rem .7rem;
  border-radius: 8px;
  background: #fff;
}
.detail-directory-list a:hover {
  background: #f4f4f5;
  color: var(--front-ink) !important;
}
.detail-comment-card textarea.form-control {
  min-height: 112px;
}
.detail-comment-card .card-body,
.detail-related-card .card-body,
.detail-directory-card .card-body {
  position: relative;
  z-index: 1;
}
.qa-list-card,
.arena-seal-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.qa-list-card:hover,
.arena-seal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* 问答列表卡片 */
a.qa-card-link.card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  border-color: rgba(0, 0, 0, .1);
}

/* 回答卡片头像 */
.qa-avatar-gold {
  background: #f4f4f5;
  color: var(--front-ink);
}
.article-paper {
  position: relative;
  z-index: 1;
  color: var(--front-ink);
  line-height: 2.05;
  font-size: 1rem;
}
.article-paper > *:first-child { margin-top: 0; }
.article-paper > *:last-child { margin-bottom: 0; }
.article-paper p { margin-bottom: 1.2rem; text-indent: 2em; }
.article-paper h2,
.article-paper h3,
.article-paper h4 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-left: .9rem;
  border-left: 3px solid rgba(0, 0, 0, .15);
}
.article-paper ul,
.article-paper ol { padding-left: 1.35rem; margin-bottom: 1.2rem; }
.article-paper li { margin-bottom: .55rem; }
.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}
.article-content pre {
  background: #f4f4f5;
  padding: 14px 16px;
  border-radius: 8px;
  overflow: auto;
  border: 1px solid rgba(0, 0, 0, .06);
}
.article-content blockquote {
  border-left: 3px solid rgba(0, 0, 0, .15);
  padding: .2rem 0 .2rem 1rem;
  color: var(--front-soft-ink);
  background: #fafafa;
  border-radius: 0 8px 8px 0;
}
/* ── 国学文章列表页（posts）─ 侧边栏布局 ── */
.posts-layout { display: grid; grid-template-columns: 1fr 260px; gap: 1.5rem; align-items: start; }
.posts-main { min-width: 0; }
.posts-side { display: flex; flex-direction: column; gap: .75rem; }

.posts-split { display: flex; flex-direction: column; }
.posts-split-item { display: flex; gap: 1rem; text-decoration: none; padding: .9rem 1.1rem; background: #fff; border-radius: 6px; margin-bottom: 4px; transition: all .15s ease; box-shadow: 0 0 0 1px rgba(0,0,0,.03); }
.posts-split-item:last-child { margin-bottom: 0; }
.posts-split-item:hover { box-shadow: 0 0 0 1px rgba(184,92,56,.18); background: #fcfaf8; }
.posts-split-date { flex-shrink: 0; width: 3.6rem; font-size: .82rem; font-weight: 500; color: var(--front-soft-ink); line-height: 1.6; padding-top: .1rem; letter-spacing: .3px; }
.posts-split-body { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.posts-split-title { font-size: 1rem; font-weight: 400; line-height: 1.55; color: var(--front-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .3px; }
.posts-split-item:hover .posts-split-title { color: #b85c38; }
.posts-split-meta { flex-shrink: 0; display: flex; align-items: center; gap: .35rem .55rem; font-size: .78rem; color: #aaa; white-space: nowrap; }
.posts-split-cat { background: #fef6f3; color: #a04f2f; padding: .08rem .5rem; border-radius: 3px; font-weight: 500; letter-spacing: .3px; }

/* 侧边栏卡片 */
.posts-side-card { background: #fff; border-radius: 8px; padding: 1.1rem 1.2rem; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.posts-side-title { font-size: .85rem; font-weight: 500; color: var(--front-ink); margin-bottom: .65rem; padding-bottom: .5rem; border-bottom: 2px solid var(--front-ink); letter-spacing: .6px; }
.posts-side-links { display: flex; flex-direction: column; gap: .2rem; }
.posts-side-link { display: block; font-size: .85rem; line-height: 1.5; color: var(--front-soft-ink); text-decoration: none; padding: .3rem .5rem; border-radius: 4px; transition: all .12s ease; letter-spacing: .3px; }
.posts-side-link:hover { color: var(--front-ink); background: #f5f5f5; }
.posts-side-link.active { color: #a04f2f; font-weight: 600; background: #fef6f3; }
.posts-side-link-sm { font-size: .8rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.posts-side-stats { display: flex; flex-direction: column; gap: .35rem; }
.posts-side-stat { display: flex; justify-content: space-between; font-size: .82rem; color: var(--front-soft-ink); padding: .3rem 0; border-bottom: 1px solid rgba(0,0,0,.04); letter-spacing: .3px; }
.posts-side-stat:last-child { border-bottom: 0; }
.posts-side-stat span { font-weight: 600; color: var(--front-ink); }

@media (max-width: 991.98px) {
  .posts-layout { grid-template-columns: 1fr; }
  .posts-side { order: -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
}
@media (max-width: 575.98px) {
  .posts-side { grid-template-columns: 1fr; }
  .posts-split-item { padding: .7rem .8rem; }
  .posts-split-date { width: 2.8rem; font-size: .78rem; }
  .posts-split-title { font-size: .92rem; }
  .posts-split-meta { font-size: .75rem; }
}

/* ── 国学文章详情页（post）- 新版 ── */
.post-detail-layout { display: grid; grid-template-columns: 1fr 280px; gap: 1.5rem; align-items: start; }
.post-detail-main { min-width: 0; }
.post-detail-side { display: grid; gap: 1rem; }

.post-article { background: #fff; border-radius: 12px; padding: 2rem 2.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.06); }
.post-cover { max-height: 360px; object-fit: cover; border-radius: 12px; margin-bottom: 1.5rem; width: 100%; display: block; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.post-title { font-size: 1.75rem; font-weight: 700; line-height: 1.4; margin-bottom: .75rem; color: #1a1a1a; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; font-size: .85rem; color: var(--front-soft-ink); margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(0,0,0,.06); }
.post-meta-tag { background: #f5f5f5; padding: .1rem .55rem; border-radius: 4px; font-size: .78rem; color: #555; font-weight: 500; }

.post-content { font-size: 1.05rem; line-height: 2; color: var(--front-ink); }
.post-content > *:first-child { margin-top: 0; }
.post-content > *:last-child { margin-bottom: 0; }
.post-content p { margin-bottom: 1.2rem; text-indent: 2em; }
.post-content h2, .post-content h3, .post-content h4 { margin-top: 2rem; margin-bottom: .8rem; padding-left: .9rem; border-left: 3px solid rgba(0,0,0,.12); font-weight: 600; letter-spacing: .5px; scroll-margin-top: 1.5rem; }
.post-content h2 { font-size: 1.35rem; }
.post-content h3 { font-size: 1.15rem; }
.post-content h4 { font-size: 1.05rem; }
.post-content img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.08); margin: 1rem 0; }
.post-content blockquote { border-left: 3px solid rgba(0,0,0,.12); padding: .3rem 0 .3rem 1.2rem; color: var(--front-soft-ink); background: #fafafa; border-radius: 0 8px 8px 0; margin: 1rem 0; }
.post-content blockquote p { text-indent: 0; }
.post-content pre { background: #f4f4f5; padding: 16px 18px; border-radius: 8px; overflow-x: auto; border: 1px solid rgba(0,0,0,.06); font-size: .9rem; line-height: 1.7; margin: 1rem 0; }
.post-content pre code { background: none; padding: 0; }
.post-content code { background: #f4f4f5; padding: .15rem .4rem; border-radius: 4px; font-size: .9em; }
.post-content ul, .post-content ol { padding-left: 1.5rem; margin-bottom: 1.2rem; }
.post-content li { margin-bottom: .5rem; }
.post-content a { color: #b85c38; text-decoration: underline; text-underline-offset: 2px; }
.post-content a:hover { color: #8b2e1a; }

/* 侧边栏卡片 */
.post-side-card { background: #fff; border-radius: 12px; padding: 1.25rem; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.post-side-card-title { font-size: .85rem; font-weight: 700; letter-spacing: .06em; color: #1a1a1a; margin-bottom: .85rem; padding-bottom: .65rem; border-bottom: 2px solid #1a1a1a; text-transform: uppercase; }

/* 目录 */
.post-toc { display: flex; flex-direction: column; gap: .3rem; }
.post-toc-link { font-size: .84rem; line-height: 1.5; color: var(--front-soft-ink); text-decoration: none; padding: .2rem 0 .2rem .65rem; border-left: 2px solid transparent; transition: all .15s ease; }
.post-toc-link:hover { color: #1a1a1a; border-left-color: #b85c38; padding-left: .9rem; }
.post-toc-h3 { padding-left: 1.4rem; font-size: .8rem; }

/* 阅读统计 */
.post-side-stats { display: flex; flex-direction: column; gap: .6rem; }
.post-side-stat { display: flex; justify-content: space-between; align-items: center; padding: .35rem 0; border-bottom: 1px solid rgba(0,0,0,.04); }
.post-side-stat:last-child { border-bottom: 0; }
.post-side-stat-val { font-weight: 700; font-size: 1rem; color: #1a1a1a; }
.post-side-stat-label { font-size: .8rem; color: var(--front-soft-ink); }

/* 相关文章 */
.post-related { margin-top: 1.5rem; background: #fff; border-radius: 12px; padding: 1.5rem; border: 1px solid rgba(0,0,0,.06); }
.post-related-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 1rem; padding-bottom: .65rem; border-bottom: 1px solid rgba(0,0,0,.06); }
.post-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.post-related-item { display: block; background: #fafafa; border-radius: 10px; overflow: hidden; border: 1px solid rgba(0,0,0,.05); text-decoration: none; transition: box-shadow .2s ease; }
.post-related-item:hover { box-shadow: 0 3px 12px rgba(0,0,0,.07); }
.post-related-img { width: 100%; height: 110px; object-fit: cover; display: block; }
.post-related-body { padding: .75rem; }
.post-related-text { font-size: .88rem; line-height: 1.45; color: #1a1a1a; font-weight: 500; margin-bottom: .35rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.post-related-meta { font-size: .75rem; color: #9ca3af; }

.post-back { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(0,0,0,.06); display: flex; gap: .5rem; }

@media (max-width: 991.98px) {
  .post-detail-layout { grid-template-columns: 1fr; }
  .post-detail-side { order: -1; display: flex; flex-wrap: wrap; gap: .75rem; }
  .post-detail-side .post-side-card { flex: 1; min-width: 200px; }
}
@media (max-width: 767.98px) {
  .post-article { padding: 1.25rem 1rem; }
  .post-title { font-size: 1.35rem; }
  .post-content { font-size: 1rem; }
  .post-related-grid { grid-template-columns: 1fr; }
}

.line-clamp-1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.book-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.book-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.06); border-color: rgba(0, 0, 0, .1); }
.book-card.seal-card::before { display: none; }

/* ===== 电子书详情页增强 ===== */

.reading-tip-card {
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  height: 100%;
}
.reading-tip-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--front-ink);
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.reading-tip-text {
  font-size: .84rem;
  line-height: 1.7;
  color: var(--front-soft-ink);
}

/* 延伸链接面板 */
.cross-link-panel {
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .06);
  padding: 1rem;
  height: 100%;
}
.cross-link-panel .fw-semibold { font-size: .88rem; margin-bottom: .55rem; }
.cross-link-panel a {
  display: block;
  padding: .3rem 0;
  font-size: .83rem;
  line-height: 1.55;
  color: var(--front-soft-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, .04);
  transition: color .15s ease, padding .15s ease;
}
.cross-link-panel a:last-child { border-bottom: 0; }
.cross-link-panel a:hover { color: var(--front-ink); padding-left: .3rem; }

/* 目录列表项 */
.toc-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .6rem;
  border-radius: 10px;
  background: rgba(255,255,255,.44);
  border: 1px solid rgba(91,71,50,.05);
  transition: all .18s ease;
  text-decoration: none;
  color: var(--front-ink);
  font-size: .83rem;
}
.toc-link:hover {
  background: #fafafa;
  border-color: rgba(0, 0, 0, .1);
  color: var(--front-ink);
  transform: translateX(2px);
}
.toc-link-text {
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toc-link-page {
  font-size: .7rem;
  color: var(--front-soft-ink);
  padding: .1rem .4rem;
  border-radius: 6px;
  background: rgba(165,122,61,.06);
  font-weight: 700;
  flex-shrink: 0;
}

/* 书封面区域 */
.book-detail-cover-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--front-border);
  background: #fff;
}
.book-detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  padding: .65rem 0;
  border-top: 1px solid rgba(0, 0, 0, .06);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  margin: .75rem 0;
  font-size: .82rem;
  color: var(--front-soft-ink);
}

/* 阅读内容区包裹卡片 */
.reader-content-card {
  background: #fff;
  border: 1px solid var(--front-border);
  border-radius: 12px;
  box-shadow: var(--front-shadow);
  overflow: hidden;
}
.reader-content-card .card-body {
  padding: 1.1rem;
}
@media (min-width: 576px) {
  .reader-content-card .card-body { padding: 1.4rem; }
}

/* ===== 电子书列表页增强 ===== */

/* 筛选卡片 */
.books-filter-card {
  background: #fff;
  border: 1px solid var(--front-border);
  border-radius: 12px;
  box-shadow: var(--front-shadow);
}
.books-filter-card .form-select,
.books-filter-card .form-control {
  border-radius: 8px;
  border-color: rgba(0, 0, 0, .12);
  background: #fff;
  font-size: .84rem;
}
.books-filter-card .form-select:focus,
.books-filter-card .form-control:focus {
  border-color: rgba(0, 0, 0, .3);
  box-shadow: 0 0 0 .15rem rgba(0, 0, 0, .06);
}
.books-filter-card .form-check-input:checked {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
}
.books-filter-card .btn-outline-dark {
  border-radius: 8px;
  font-weight: 600;
  border-color: rgba(0, 0, 0, .15);
  color: var(--front-ink);
  transition: all .2s ease;
}
.books-filter-card .btn-outline-dark:hover {
  background: #f4f4f5;
  border-color: rgba(0, 0, 0, .3);
  color: var(--front-ink);
}

/* 书单网格间距 */
.books-grid {
  --bs-gutter-y: 1.25rem;
}
.books-grid .book-card {
  height: 100%;
}

/* FAQ面板 */
.books-faq-panel {
  background: #fff;
  border: 1px solid var(--front-border);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
}
.books-faq-panel .fw-semibold {
  color: var(--front-ink);
  font-size: .9rem;
  letter-spacing: .5px;
  margin-bottom: .85rem;
}
.books-faq-panel details {
  margin-bottom: .25rem;
}
.books-faq-panel details summary {
  padding: .55rem .7rem;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--front-ink);
  transition: background .15s ease;
  cursor: pointer;
  list-style: none;
}
.books-faq-panel details summary::-webkit-details-marker { display: none; }
.books-faq-panel details summary:hover {
  background: #f4f4f5;
}
.books-faq-panel details[open] summary {
  background: #f4f4f5;
  color: var(--front-ink);
}
.books-faq-panel details .text-secondary {
  padding: .25rem .7rem .5rem;
  line-height: 1.8 !important;
}

/* ===== 电子书详情页增强 ===== */

/* 侧边栏推荐卡片 */
.detail-side-card {
  background: #fff;
  border: 1px solid var(--front-border);
  border-radius: 12px;
  overflow: hidden;
}
.detail-side-card .card-body { position: relative; z-index: 1; }

/* 评论区卡片 */
.detail-comment-form {
  background: #fff;
  border: 1px solid var(--front-border);
  border-radius: 10px;
  padding: 1rem;
}
.detail-comment-form textarea {
  border-radius: 8px;
  border-color: rgba(0, 0, 0, .12);
  background: #fff;
  font-size: .84rem;
}
.detail-comment-form textarea:focus {
  border-color: rgba(0, 0, 0, .3);
  box-shadow: 0 0 0 .15rem rgba(0, 0, 0, .06);
}

.detail-comment-item {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 10px;
  padding: .95rem 1.1rem;
  margin-bottom: .45rem;
  transition: border-color .15s ease;
}
.detail-comment-item:hover {
  border-color: rgba(0, 0, 0, .1);
}
.detail-comment-item .fw-semibold {
  color: var(--front-ink);
  font-size: .88rem;
}

/* 目录预览区 */
.detail-directory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .85rem;
}
.detail-directory-view-all {
  font-size: .78rem;
  font-weight: 600;
  color: var(--front-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s ease;
}
.detail-directory-view-all:hover { opacity: .7; }

/* 无法阅读提示面板 */
.detail-access-alert {
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  padding: 1.2rem 1.35rem;
}
.detail-access-alert .fw-semibold {
  color: var(--front-ink);
  font-size: .95rem;
}

/* 评论无登录提示 */
.detail-comment-login-hint {
  color: var(--front-soft-ink);
  font-size: .84rem;
  padding: .65rem 1rem;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .06);
  margin-bottom: .75rem;
}

/* ===== 通用微交互增强 ===== */

/* 卡片微悬浮 */
.shadow-soft.card { transition: box-shadow .25s ease, border-color .25s ease; }
.shadow-soft.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
  border-color: rgba(0, 0, 0, .1);
}

/* 按钮通用过渡 */
.btn { transition: all .18s ease; }

/* 表单控件聚焦 */
.form-control:focus,
.form-select:focus {
  border-color: rgba(0, 0, 0, .3) !important;
  box-shadow: 0 0 0 .15rem rgba(0, 0, 0, .06) !important;
}

/* 响应式 */
@media (max-width: 767.98px) {
  .books-filter-card { border-radius: 10px; }
  .books-filter-card .card-body { padding: 1rem; }
  .books-faq-panel { border-radius: 10px; padding: 1rem; }
  .detail-side-card { border-radius: 10px; }
  .detail-comment-item { padding: .8rem .95rem; }
}

@media (max-width: 575.98px) {
  .books-filter-card .card-body { padding: .85rem; }
}
.qa-list-card.seal-card::before { display: none; }
.arena-card-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #f8f9fa; display: block; }
.arena-card-cover--placeholder { width: 100%; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: #f4f4f5; color: rgba(0,0,0,.35); font-weight: 700; letter-spacing: .5px; }
.arena-meta { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; color: var(--bs-secondary-color); }
.arena-meta .badge { font-weight: 600; }
.arena-media-box { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #f8f9fa; display: flex; align-items: center; justify-content: center; }
.arena-media-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arena-body { line-height: 1.9; }
.arena-winner-badge { background: #1a1a1a !important; color: #fff !important; box-shadow: none; border: 0; }
.arena-rank-no { font-weight: 800; font-size: 22px; line-height: 1; color: #1a1a1a; letter-spacing: -0.5px; }
.arena-rank-top { background: #fafafa; }
.book-cover { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #f4f4f5; }
.pricing-card { transition: transform .16s ease, box-shadow .16s ease; }
.pricing-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, .08) !important; }
.level-tile { background: #fff; border: 1px solid rgba(0,0,0,.06); }
.option-card { border: 1px solid rgba(0,0,0,.08); border-radius: 8px; padding: 12px 14px; background: #fff; }
.option-card:hover { background: #fafafa; }
.daily-gua-tile { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 10px; padding: 12px; }
.daily-gua-diagram { background: #fff; border: 1px solid var(--front-border); border-radius: 10px; padding: 14px; }
.gua-line { height: 10px; margin: 7px 0; display: flex; align-items: center; justify-content: center; gap: 14px; }
.gua-seg { height: 10px; background: var(--front-ink); border-radius: 999px; }
.gua-yang .gua-seg { width: 100%; }
.gua-yin .gua-seg { flex: 1; }

/* Wear Guide Enhanced UI */
.wear-panel { background: #fff; border: 1px solid var(--front-border); border-radius: 16px; padding: 32px; box-shadow: var(--front-shadow); margin-bottom: 32px; position: relative; }
.wear-layout { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 32px; align-items: start; }
.wear-side, .wear-main { min-width: 0; }
.wear-layout .wear-panel { margin-bottom: 0; box-shadow: 0 8px 30px -8px rgba(0,0,0,0.06); }

/* Left Panel */
.wear-panel--side .wear-topbar { flex-direction: column; align-items: stretch; gap: 24px; margin-bottom: 0; }
.wear-header { text-align: center; margin-bottom: 8px; }
.wear-date-group { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin-bottom: 16px; position: relative; }
.wear-day { font-size: 5rem; font-weight: 800; line-height: 1; letter-spacing: -2px; color: var(--front-ink); font-feature-settings: "tnum"; }
.wear-ym-group { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wear-ym { font-size: 1.1rem; font-weight: 500; color: var(--front-soft-ink); letter-spacing: 1px; text-transform: uppercase; }
.wear-lunar { font-size: 0.95rem; color: var(--front-soft-ink); font-weight: 400; opacity: 0.8; }
.wear-meta-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.wear-tag { font-size: 12px; padding: 4px 10px; background: #f4f4f5; border-radius: 20px; color: var(--front-ink); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; transition: all 0.2s; border: 1px solid rgba(0,0,0,.08); }
.wear-tag:hover { background: rgba(0,0,0,.05); color: var(--front-ink); }
.wear-tag-label { opacity: 0.7; }
.wear-tag-value { font-weight: 600; }
.wear-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center; margin-top: 24px; }
.wear-actions .btn { border-radius: 8px; font-weight: 600; padding: 8px 16px; border: 1px solid var(--front-border); background: #fff; color: var(--front-ink); transition: all 0.2s; }
.wear-actions .btn:hover:not(.disabled) { background: #f4f4f5; color: var(--front-ink); border-color: rgba(0,0,0,.15); }
.wear-actions .btn-dark { background: #1a1a1a; color: #fff; border-color: transparent; }
.wear-actions .btn-dark:hover:not(.disabled) { background: #333; color: #fff; }
.wear-actions form { display: flex; gap: 8px; margin: 0; }
.wear-actions .form-control { width: auto; min-width: 140px; border-radius: 8px; border: 1px solid rgba(0,0,0,.1); background: #fff; font-weight: 500; text-align: center; padding: 8px; }
.wear-actions .form-control:focus { background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.06); }
.wear-actions button { white-space: nowrap; }

/* Reco Box */
.wear-reco { background: #fafafa; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 24px; margin-top: 24px; }
.wear-reco .fw-semibold { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--front-ink); margin-bottom: 16px; display: block; opacity: 0.9; }

/* Archive Box */
.wear-archive { background: #fafafa; border: 1px solid var(--front-border); border-radius: 12px; padding: 24px; margin-top: 24px; }
.wear-archive-title { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--front-soft-ink); margin-bottom: 16px; text-align: center; }
.wear-year-shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.wear-year-btn { display: block; text-align: center; padding: 8px; border-radius: 8px; background: #fff; color: var(--front-ink); font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.2s; border: 1px solid rgba(0,0,0,.08); }
.wear-year-btn:hover { background: #f4f4f5; color: var(--front-ink); }
.wear-date-form { background: #fff; padding: 16px; border-radius: 10px; border: 1px solid rgba(0,0,0,.08); }
.wear-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.wear-form-group label { display: block; font-size: 11px; color: var(--front-soft-ink); margin-bottom: 4px; font-weight: 500; }
.wear-form-group input { border-radius: 6px; border: 1px solid rgba(0,0,0,.1); text-align: center; font-weight: 600; color: var(--front-ink); background: #fff; }

/* Friend Links */
.friend-links { display: flex; flex-wrap: wrap; gap: 12px; }
.friend-link-item { text-decoration: none; color: var(--bs-secondary-color); font-size: 14px; }





.front-topline {
  background: #1a1a1a;
  color: rgba(255, 255, 255, .7);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}



.front-brand-mark {
  border-radius: 10px;
  background: #1a1a1a;
  box-shadow: none;
}



















.home-twin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1rem;
  align-items: start;
}

.home-twin-col {
  display: grid;
  gap: 1rem;
  align-content: start;
  min-width: 0;
  overflow: hidden;
}

/* 研习路径 图标网格 */
.home-path-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
}

.home-path-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  text-decoration: none;
  color: var(--front-ink);
  padding: .75rem .35rem;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--front-border);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-align: center;
}

.home-path-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
  border-color: rgba(0, 0, 0, .15);
  color: var(--front-ink);
}

.home-path-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: #f4f4f5;
  color: var(--front-ink);
}

.home-path-label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
}

@media (max-width: 991.98px) {
  .home-twin-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .home-path-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.article-side-stack {
  display: grid;
  gap: 1rem;
}

.home-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.home-section-kicker {
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--front-soft-ink);
}

.home-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.home-gua-layout {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
}

.home-gua-diagram {
  width: 120px;
  flex: 0 0 120px;
}

/* ── 核心栏目入口 ── */
.home-entry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.home-entry-card,
.home-list-link {
  display: block;
  text-decoration: none;
  color: var(--front-ink);
  border: 1px solid var(--front-border);
  border-radius: 12px;
  background: #fff;
  transition: box-shadow .18s ease, border-color .18s ease;
}

.home-entry-card:hover,
.home-list-link:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  border-color: rgba(0, 0, 0, .15);
}

.home-entry-card {
  padding: 1rem 1.05rem;
  min-height: 132px;
}

.home-entry-name {
  font-weight: 700;
  margin-bottom: .45rem;
}

.home-entry-desc {
  color: var(--front-soft-ink);
  line-height: 1.8;
  font-size: .92rem;
}

.home-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.home-mini-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.home-mini-row:first-child {
  padding-top: 0;
}

.home-mini-row-stack {
  display: block;
}

.home-method-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.home-method-title {
  font-weight: 700;
  margin-bottom: .45rem;
}

.home-inline-detail summary {
  cursor: pointer;
  color: var(--front-soft-ink);
}

.article-header-card {
  background: #fff;
}

.article-header-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 2rem;
  align-items: end;
}

.article-header-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.article-inline-metas {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1rem;
  font-size: .85rem;
  color: var(--front-soft-ink);
}

.journal-meta {
  color: var(--front-soft-ink);
  font-size: .92rem;
  line-height: 1.8;
}

.journal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .8rem;
}

.journal-tags span {
  position: relative;
  color: var(--front-soft-ink);
  font-size: .82rem;
}

.journal-tags span::before {
  content: "·";
  margin-right: .35rem;
  color: rgba(0, 0, 0, .3);
}

.journal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  margin-top: .2rem;
}

.journal-quiet-btn {
  min-height: 36px;
  padding-inline: .9rem;
}

.journal-link-list {
  background: #fff;
  counter-reset: journal-links;
}

.journal-link-list a {
  display: block;
  line-height: 1.8;
  position: relative;
  padding-left: 1.35rem;
}

.journal-link-list a::before {
  counter-increment: journal-links;
  content: counter(journal-links) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(0, 0, 0, .3);
}

.book-journal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.book-journal-side {
  text-align: right;
}

.article-layout {
  align-items: start;
}

@media (max-width: 991.98px) {
  .article-header-grid {
    grid-template-columns: 1fr;
  }

  .home-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-gua-layout {
    grid-template-columns: 1fr;
  }

  .home-gua-diagram {
    width: 100%;
    max-width: 120px;
  }

  .article-header-side {
    align-items: flex-start;
  }

  .book-journal-head {
    flex-direction: column;
  }

  .book-journal-side {
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .home-entry-grid {
    grid-template-columns: 1fr;
  }

  .home-method-grid {
    grid-template-columns: 1fr;
  }
}
.friend-link-item:hover { color: var(--bs-body-color); }

/* Right Panel - List */
.wear-list { display: grid; gap: 12px; }
.wear-list-item { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-radius: 10px; background: #fff; border: 1px solid var(--front-border); transition: border-color .2s ease; }
.wear-list-item:hover { border-color: rgba(0, 0, 0, .15); }
.wear-list-item-head { display: flex; align-items: center; gap: 12px; }
.wear-list-item-title { font-size: 16px; font-weight: 600; }
.wear-list-item-wx { font-size: 13px; color: var(--front-soft-ink); }

/* Color Chips Minimal */
.wear-color-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.wear-color-chip { 
    --wear-color-bg: #ccc;
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; 
    border-radius: 8px; background: #fff; 
    border: 1px solid var(--front-border); 
    cursor: default;
}
.wear-color-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--wear-color-bg); border: 1px solid rgba(0,0,0,0.1); }
.wear-color-text { font-weight: 500; font-size: 13px; color: var(--front-ink); }

/* Responsive */
@media (min-width: 992px) { 
    .wear-side { position: sticky; top: 32px; } 
}
@media (max-width: 991.98px) { 
    .wear-layout { grid-template-columns: 1fr; gap: 24px; } 
    .wear-side { position: static; } 
    .wear-day { font-size: 4rem; }
}
@media (max-width: 767.98px) {
    .wear-panel { padding: 24px; }
    .wear-day { font-size: 3.5rem; }
    .wear-actions { justify-content: center; }
    .wear-actions form { width: 100%; justify-content: center; }
    .wear-actions .form-control { flex: 1; }
    .wear-card { padding: 20px; }
    .wear-card-label { font-size: 16px; }
    .wear-color-chip { padding: 6px 12px; font-size: 13px; }
}

.me-shell { display: grid; grid-template-columns: 440px minmax(560px, 1fr); gap: 24px; align-items: start; overflow-x: auto; padding-bottom: 2px; }
.me-aside, .me-main { min-width: 0; }
@media (min-width: 992px) { .me-aside { position: sticky; top: 24px; } }
.me-aside details > summary { list-style: none; }
.me-aside details > summary::-webkit-details-marker { display: none; }

/* ===== Shared Tool Page Styles ===== */
.tool-section-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.1rem;
}
.tool-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: #1a1a1a;
  color: #fff;
  font-weight: 700;
  font-size: .72rem;
  flex-shrink: 0;
}
.tool-radio-group {
  display: inline-flex;
  gap: 4px;
  background: rgba(91,71,50,.04);
  padding: 3px;
  border-radius: 999px;
}
.tool-radio {
  position: relative;
  margin: 0;
}
.tool-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tool-radio span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .4rem .9rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: .18s ease;
  color: var(--front-soft-ink);
  min-width: 2.8rem;
}
.tool-radio input:checked + span {
  background: #fff;
  color: var(--front-accent);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.tool-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  background: rgba(91,71,50,.04);
  border-radius: 12px;
  margin-bottom: .75rem;
}
.tool-mode-tab {
  flex: 1;
  min-width: 80px;
  padding: .5rem .4rem;
  border: 0;
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: .18s ease;
  color: var(--front-soft-ink);
  background: transparent;
  white-space: nowrap;
  text-align: center;
}
.tool-mode-tab.active {
  background: #fff;
  color: var(--front-accent);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.tool-mode-tab:hover:not(.active) {
  color: var(--front-ink);
  background: rgba(255,255,255,.45);
}
.tool-mode-tip {
  font-size: .78rem;
  color: var(--front-soft-ink);
  margin-bottom: .9rem;
  transition: .2s ease;
  min-height: 1.2em;
}
.tool-mode-panel-inner {
  border: 1px solid rgba(91,71,50,.08);
  border-radius: 14px;
  padding: 1rem;
  background: rgba(255,252,246,.5);
  margin-bottom: .25rem;
}
.tool-yao-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .45rem;
}
.tool-yao-label {
  width: 4rem;
  text-align: right;
  font-size: .78rem;
  font-weight: 600;
  color: var(--front-soft-ink);
}
.tool-yao-row .form-select {
  flex: 1;
  max-width: 220px;
}
.tool-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}
.tool-empty-icon {
  font-size: 3rem;
  opacity: .15;
  margin-bottom: 1rem;
}
.tool-empty-title {
  font-weight: 600;
  margin-bottom: .25rem;
  color: var(--front-ink);
}
.tool-empty-desc {
  color: var(--front-soft-ink);
  font-size: .85rem;
}
.tool-section-divider {
  border-top: 1px solid rgba(91,71,50,.08);
  padding-top: .75rem;
  margin-top: .5rem;
}
.tool-card-compact .card-body {
  padding: .9rem 1.1rem;
}
@media (max-width: 767.98px) {
  .tool-mode-tab { font-size: .74rem; padding: .45rem .3rem; }
  .tool-mode-tip { font-size: .72rem; }
  .tool-yao-row .form-select { max-width: 100%; }
}
@media (max-width: 575.98px) {
  .tool-mode-tabs { flex-direction: column; }
  .tool-mode-tab { text-align: left; padding: .5rem .75rem; }
}

/* ============================================
   电子书阅读器 — 极简大气
   ============================================ */

/* —— 整体布局 —— */
.reader-shell {
  max-width: 780px;
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

/* —— 顶部信息条 —— */
.reader-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.75rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid #e8e2d8;
}

.reader-hero-info { flex: 1; min-width: 0; }

.reader-hero-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -.01em;
  line-height: 1.35;
  margin-bottom: .45rem;
}

.reader-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  font-size: .82rem;
  color: #8c8275;
  align-items: center;
}

.reader-hero-meta span {
  display: flex;
  align-items: center;
  gap: .3rem;
}

.reader-hero-actions {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
  padding-top: .15rem;
}

.reader-hero-actions .btn {
  font-size: .82rem;
  padding: .45rem .9rem;
  border-radius: 8px;
  border-color: #d5cdc0;
  color: #5a5044;
}
.reader-hero-actions .btn:hover {
  border-color: #8c7b6a;
  color: #1a1a1a;
  background: #f5f0e9;
}

/* —— 工具栏 —— */
.reader-toolbar-v2 {
  background: #faf7f2;
  border: 1px solid #e8e2d8;
  border-radius: 12px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.reader-toolbar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.25rem;
  gap: 1rem;
}

.reader-toolbar-title {
  font-size: .8rem;
  font-weight: 600;
  color: #8c8275;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.reader-progress-bar {
  height: 4px;
  background: #e8e2d8;
  border-radius: 2px;
  overflow: hidden;
  width: 140px;
  flex-shrink: 0;
}

.reader-progress-fill {
  height: 100%;
  background: #7c2d12;
  border-radius: 2px;
  transition: width .3s ease;
}

.reader-toolbar-body {
  padding: 0 1.25rem .9rem;
}

.reader-ctrl-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
}

.reader-ctrl-group {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.reader-ctrl-label {
  font-size: .68rem;
  font-weight: 600;
  color: #8c8275;
  letter-spacing: .04em;
}

.reader-ctrl-group .form-control,
.reader-ctrl-group .form-select {
  border: 1px solid #d5cdc0;
  border-radius: 8px;
  font-size: .82rem;
  padding: .45rem .65rem;
  background: #fff;
  color: #1a1a1a;
  transition: border-color .18s ease;
}

.reader-ctrl-group .form-control:focus,
.reader-ctrl-group .form-select:focus {
  border-color: #7c2d12;
  box-shadow: 0 0 0 3px rgba(124,45,18,.08);
  outline: 0;
}

.reader-toolbar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem 1.25rem;
  border-top: 1px solid #e8e2d8;
  background: #fff;
}

.reader-actions-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.reader-actions-v2 .btn {
  font-size: .8rem;
  font-weight: 500;
  padding: .4rem .8rem;
  border-radius: 8px;
  border: 1px solid #d5cdc0;
  background: #fff;
  color: #5a5044;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: all .15s ease;
}

.reader-actions-v2 .btn:hover {
  border-color: #7c2d12;
  color: #7c2d12;
  background: #fdf8f3;
}

.reader-quick-btns {
  display: flex;
  gap: .3rem;
}

.reader-quick-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d5cdc0;
  border-radius: 8px;
  background: #fff;
  color: #8c8275;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}

.reader-quick-btn:hover {
  border-color: #7c2d12;
  color: #7c2d12;
  background: #fdf8f3;
}

/* —— 内容区 —— */
.reader-content-v2 {
  background: #fff;
  border: 1px solid #e8e2d8;
  border-radius: 12px;
  overflow: hidden;
}

.reader-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.5rem;
  border-bottom: 1px solid #f0ebe2;
  background: #faf7f2;
}

.reader-page-indicator {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

.reader-page-badge {
  font-size: 1.1rem;
  font-weight: 700;
  color: #7c2d12;
  font-variant-numeric: tabular-nums;
}

.reader-page-divider {
  color: #c4b8a8;
  font-weight: 400;
}

.reader-page-total {
  font-size: .85rem;
  color: #8c8275;
}

.reader-lines-count {
  font-size: .75rem;
  color: #8c8275;
}

/* —— 阅读区域 —— */
.reader-display { position: relative; }

.reader {
  white-space: pre-wrap;
  font-size: var(--reader-font-size, 18px);
  line-height: var(--reader-line-height, 1.9);
  padding: 2.5rem 3rem;
  min-height: 60vh;
  scroll-behavior: smooth;
  color: #1a1a1a;
}

/* 主题配色 */
.reader-paper {
  background: #fefcf8;
  color: #1a1a1a;
}

.reader-light {
  background: #ffffff;
  color: #1a1a1a;
}

.reader-dark {
  background: #1a1d23;
  color: #c8ccd2;
}

.reader-dark mark { background: rgba(255, 193, 7, .25); color: inherit; }

.reader mark.reader-mark-saved {
  background: rgba(124,45,18,.12);
  color: inherit;
  border-radius: 2px;
}

.reader mark.reader-mark-fav {
  background: rgba(124,45,18,.22);
  color: inherit;
  border-radius: 2px;
}

/* 段落 */
.reader-para {
  scroll-margin-top: 90px;
  margin-bottom: .15rem;
  padding: .2rem .4rem;
  border-radius: 4px;
  transition: background .12s ease;
}

.reader-para:target {
  background: rgba(124,45,18,.06) !important;
}

.reader-dark .reader-para:target {
  background: rgba(255,255,255,.06) !important;
}

/* 行 */
.reader-ln {
  scroll-margin-top: 90px;
  padding: .05rem .15rem;
  border-radius: 3px;
  transition: background .1s ease;
  display: inline;
}

.reader-ln:hover {
  background: rgba(0,0,0,.03);
}

.reader-dark .reader-ln:hover {
  background: rgba(255,255,255,.04);
}

.reader-ln:target {
  background: rgba(124,45,18,.12);
}

.reader-dark .reader-ln:target {
  background: rgba(255,255,255,.08);
}

/* —— 底部导航 —— */
.reader-content-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-top: 1px solid #f0ebe2;
  background: #faf7f2;
  gap: 1rem;
}

.reader-nav-v2 {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.reader-nav-v2 .btn {
  font-size: .85rem;
  font-weight: 500;
  padding: .5rem 1.15rem;
  border-radius: 8px;
  border: 1px solid #d5cdc0;
  background: #fff;
  color: #5a5044;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: all .15s ease;
  min-width: 90px;
  justify-content: center;
}

.reader-nav-v2 .btn:hover:not(.disabled) {
  border-color: #7c2d12;
  color: #fff;
  background: #7c2d12;
}

.reader-nav-v2 .btn-primary {
  border-color: #7c2d12;
  background: #7c2d12;
  color: #fff;
}

.reader-nav-v2 .btn-primary:hover:not(.disabled) {
  background: #6a2610;
  border-color: #6a2610;
  color: #fff;
}

.reader-nav-v2 .btn.disabled {
  opacity: .28;
  pointer-events: none;
}

.reader-swipe-zone {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: #b5a899;
  font-size: .72rem;
}

/* —— 目录侧栏 —— */
.reader-offcanvas {
  --bs-offcanvas-width: 300px;
}

.reader-offcanvas .offcanvas-header {
  border-bottom: 1px solid #e8e2d8;
  padding: 1rem 1.25rem;
  background: #faf7f2;
}

.reader-offcanvas .offcanvas-title {
  font-size: .95rem;
  font-weight: 600;
  color: #1a1a1a;
}

.reader-offcanvas .offcanvas-body {
  padding: .75rem 1rem;
  background: #fff;
}

.reader-offcanvas .list-group-item {
  border: 0;
  border-radius: 8px !important;
  margin-bottom: 2px;
  padding: .55rem .75rem;
  font-size: .84rem;
  color: #5a5044;
  transition: background .12s ease;
}

.reader-offcanvas .list-group-item:hover {
  background: #f5f0e9;
  color: #1a1a1a;
}

/* 目录链接 */
.toc-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .75rem;
  border-radius: 8px;
  text-decoration: none;
  color: #5a5044;
  font-size: .84rem;
  transition: all .12s ease;
}

.toc-link:hover {
  background: #f5f0e9;
  color: #1a1a1a;
}

.toc-link-text {
  flex: 1;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toc-link-page {
  font-size: .7rem;
  color: #8c8275;
  font-weight: 500;
  flex-shrink: 0;
}

/* —— 笔记面板 —— */
.reader-note-form {
  background: #faf7f2;
  border: 1px solid #e8e2d8;
  border-radius: 10px;
  padding: .9rem;
  margin-bottom: 1rem;
}

.reader-note-form textarea {
  border: 1px solid #d5cdc0;
  border-radius: 8px;
  font-size: .84rem;
  background: #fff;
  resize: vertical;
}

.reader-note-form textarea:focus {
  border-color: #7c2d12;
  box-shadow: 0 0 0 3px rgba(124,45,18,.08);
}

.note-card {
  padding: .85rem;
  margin-bottom: .5rem;
  border: 1px solid #e8e2d8;
  border-radius: 10px;
  background: #fff;
  transition: border-color .12s ease;
}

.note-card:hover {
  border-color: #c4b8a8;
}

.annot-item {
  padding: .75rem;
  margin-bottom: .4rem;
  border: 1px solid #e8e2d8;
  border-radius: 10px;
  background: #fff;
  transition: border-color .12s ease;
}

.annot-item:hover {
  border-color: #c4b8a8;
}

.annot-section-title {
  font-size: .75rem;
  font-weight: 600;
  color: #8c8275;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 1.25rem;
  margin-bottom: .6rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid #e8e2d8;
}

/* —— 搜索结果 —— */
.search-result-item {
  border-bottom: 1px solid #f0ebe2;
  padding: .75rem;
  transition: background .12s ease;
  border-radius: 8px;
  margin-bottom: 3px;
}

.search-result-item:hover {
  background: #faf7f2;
}

.search-result-item:last-child { border-bottom: 0; }

.search-result-meta {
  font-size: .74rem;
  color: #8c8275;
  display: flex;
  gap: .5rem;
  align-items: center;
}

.search-hit-badge {
  font-size: .68rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: rgba(124,45,18,.08);
  color: #7c2d12;
  font-weight: 600;
}

/* —— 无权限卡片 —— */
.reader-access-card {
  background: #faf7f2;
  border: 1px solid #e8e2d8;
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
}

.reader-access-card .fw-semibold {
  font-size: 1.15rem;
  color: #1a1a1a;
  margin-bottom: .5rem;
}

.reader-access-card .text-secondary {
  color: #8c8275;
  line-height: 1.75;
  max-width: 360px;
  margin: 0 auto 1.5rem;
}

/* —— 标注工具浮层 —— */
.reader-annot-tool {
  position: fixed;
  z-index: var(--z-overlay, 2000);
  transform: translate(-50%, -110%);
}

.reader-annot-tool .card {
  border: 1px solid #d5cdc0;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.1);
  overflow: hidden;
}

.reader-annot-tool .card-body {
  padding: .4rem;
  display: flex;
  gap: .25rem;
  background: #fff;
}

.reader-annot-tool .btn {
  padding: .35rem .65rem;
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 500;
  border: 1px solid #d5cdc0;
  background: #fff;
  color: #5a5044;
  transition: all .12s ease;
}

.reader-annot-tool .btn:hover {
  border-color: #7c2d12;
  color: #7c2d12;
  background: #fdf8f3;
}

/* —— 键盘快捷提示 —— */
.reader-shortcuts-hint {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: rgba(255,255,255,.92);
  border: 1px solid #d5cdc0;
  border-radius: 10px;
  padding: .6rem .9rem;
  font-size: .72rem;
  color: #8c8275;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  z-index: 100;
  display: flex;
  gap: .6rem;
  align-items: center;
  backdrop-filter: blur(12px);
}

.reader-shortcuts-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .1rem .35rem;
  background: #f5f0e9;
  border: 1px solid #d5cdc0;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 600;
  color: #5a5044;
}

/* —— 响应式 —— */
@media (max-width: 767.98px) {
  .reader-shell { padding: 1.25rem 0 2.5rem; }

  .reader-hero {
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 1.25rem;
  }

  .reader-hero-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .reader-ctrl-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .reader {
    padding: 1.5rem;
  }

  .reader-content-header,
  .reader-content-footer {
    padding: .75rem 1rem;
  }

  .reader-nav-v2 .btn {
    min-width: 80px;
    font-size: .8rem;
  }

  .reader-offcanvas {
    --bs-offcanvas-width: 85vw;
  }

  .reader-shortcuts-hint {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .reader-hero-title { font-size: 1.25rem; }

  .reader-toolbar-v2 { border-radius: 10px; }
  .reader-toolbar-body,
  .reader-toolbar-footer { padding: .65rem .85rem; }

  .reader-ctrl-grid { grid-template-columns: 1fr 1fr; gap: .4rem; }
  .reader-content-v2 { border-radius: 10px; }

  .reader { padding: 1rem; font-size: 16px; }
  .reader-paper, .reader-light, .reader-dark { border-radius: 0; }

  .reader-actions-v2,
  .reader-quick-btns { width: 100%; }
  .reader-quick-btns { margin-top: .4rem; justify-content: center; }
}

@media print {
  .reader-toolbar-v2,
  .reader-hero-actions,
  .reader-content-header,
  .reader-content-footer,
  .reader-offcanvas,
  .reader-shortcuts-hint {
    display: none !important;
  }

  .reader-shell { max-width: 100%; padding: 0; }
  .reader-content-v2 { border: 0; box-shadow: none; }
  .reader { min-height: auto; padding: 1.5rem 0; }
}

/* ============================================
   许愿树 V5 — 国风许愿树风格
   ============================================ */

.wish-wall { max-width:1100px; margin:0 auto; padding-bottom:2.5rem; }

/* ---- Hero ---- */
.wish-hero {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 12px;
  padding: 2.2rem 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--front-shadow);
}
.wish-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(0, 0, 0, .03) 0%, transparent 55%),
    radial-gradient(circle at 82% 72%, rgba(0, 0, 0, .02) 0%, transparent 55%);
  pointer-events: none;
}
.wish-hero::after {
  content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .08), transparent);
}
.wish-hero>* { position: relative; }
.wish-hero-icon { margin-bottom: .3rem; font-size: 2.6rem; }
.wish-hero-title {
  color: var(--front-ink);
  font-size: 1.6rem; font-weight: 700; margin: 0 0 .2rem;
  letter-spacing: .12em;
}
.wish-hero-sub { color: var(--front-soft-ink); font-size: .85rem; margin: 0 0 1rem; }

/* 统计 */
.wish-hero-stats { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:1rem; }
.whs-item { text-align:center; padding:0 1rem; }
.whs-num { display:block; color:var(--front-ink); font-size:1.3rem; font-weight:800; line-height:1.2; }
.whs-label { display:block; color:var(--front-soft-ink); font-size:.66rem; }
.whs-div { width:1px; height:22px; background:rgba(0,0,0,.08); align-self:center; }

/* 许愿按钮 */
.wish-hero-action { margin-top:.2rem; }
.wish-btn-main {
  display:inline-flex; align-items:center; gap:.4rem;
  background: var(--front-ink);
  color: #fff; border: 1px solid transparent;
  padding:.5rem 1.6rem; border-radius:8px;
  font-size:.88rem; font-weight:600; cursor:pointer;
  transition:all .18s ease; text-decoration:none;
  box-shadow: var(--front-shadow);
}
.wish-btn-main:hover:not(:disabled) {
  background: #333; color: #fff;
  transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.wish-btn-main:disabled { opacity:.4; cursor:not-allowed; }
.wish-hero-limit { color:var(--front-soft-ink); font-size:.68rem; margin-top:.3rem; }

/* ---- 筛选 ---- */
.wish-filters { margin-bottom:1.5rem; }
.wish-filters-row { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.wish-filters-row + .wish-filters-row { margin-top:.5rem; }
.wf-tag {
  display:inline-block; padding:.28rem .75rem; border-radius:6px;
  font-size:.76rem; font-weight:500; color:var(--front-soft-ink,#6b7280);
  background:var(--front-wash,#f4f4f5); text-decoration:none;
  border:1px solid transparent; transition:all .18s ease;
}
.wf-tag:hover { background:#e5e7eb; color:var(--front-ink,#1a1a1a); }
.wf-tag.wf-active { background:var(--front-ink); color:#fff; font-weight:600; }
.wf-tag.wf-accent1 { color:#d84315; }
.wf-tag.wf-accent2 { color:#2e7d32; }
.wf-tag.wf-accent3 { color:#6a1b9a; }
.wf-tag.wf-accent1.wf-active { background:#d84315; color:#fff; border-color:#d84315; }
.wf-tag.wf-accent2.wf-active { background:#2e7d32; color:#fff; border-color:#2e7d32; }
.wf-tag.wf-accent3.wf-active { background:#6a1b9a; color:#fff; border-color:#6a1b9a; }

/* ========== 祈福牌墙主体 ========== */
.wish-rack {
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:1.5rem .8rem 2rem;
  box-shadow:inset 0 0 30px rgba(0,0,0,.02);
}

/* 每一行挂杆 */
.wish-rack-row {
  position:relative;
  margin-bottom:1.2rem;
}
.wish-rack-row:last-child { margin-bottom:0; }

/* 黑色挂杆 */
.rack-bar {
  position:absolute; top:0; left:0; right:0;
  height:8px;
  background:linear-gradient(180deg, #4a4a4a 0%, #1a1a1a 40%, #000 100%);
  border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15);
  z-index:1;
}

/* 祈福牌容器 */
.rack-cards {
  display:flex;
  justify-content:space-evenly;
  align-items:flex-start;
  padding-top:10px;
  position:relative;
  z-index:2;
}

/* 单个祈福牌 */
.wish-plaque {
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  width:76px; min-height:130px;
  background:linear-gradient(180deg, #e53935 0%, #c62828 60%, #b71c1c 100%);
  border:2px solid #ffd700;
  border-radius:4px;
  padding:.5rem .35rem .45rem;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.18), inset 0 0 10px rgba(255,255,255,.08);
  transition:transform .22s ease, box-shadow .22s ease;
  cursor:pointer;
}
.wish-plaque:hover {
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 6px 18px rgba(0,0,0,.25), inset 0 0 10px rgba(255,255,255,.12);
}

/* 挂环 */
.wish-plaque::before {
  content:''; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  width:14px; height:16px;
  border:2px solid #d4af37;
  border-radius:50% 50% 0 0;
  border-bottom:none;
  background:transparent;
  z-index:3;
}
/* 挂绳 */
.wish-plaque::after {
  content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  width:2px; height:12px;
  background:#d4af37;
  z-index:2;
}

/* 牌面内容（竖排） */
.wp-body {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; text-align:center;
}
.wp-content {
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-family:"STKaiti","KaiTi","楷体",serif;
  font-size:.9rem; font-weight:600;
  color:#ffd700; letter-spacing:.12em;
  line-height:1.2;
  max-height:92px; overflow:hidden;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.wp-content.wp-secret { font-size:.7rem; opacity:.85; }
.wp-content.wp-done { text-decoration:line-through; opacity:.65; }

/* 分类小标签 */
.wp-cat {
  margin-top:.35rem;
  font-size:.52rem; color:#fff;
  padding:1px 4px; border-radius:3px;
  background:rgba(0,0,0,.18);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}

/* 已还愿/秘密角标 */
.wp-badge {
  position:absolute; top:-2px; right:-2px;
  width:16px; height:16px; border-radius:50%;
  background:#ffd700; color:#b71c1c;
  font-size:.55rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}

/* ---- 空状态 ---- */
.wish-empty { text-align:center; padding:5rem 1rem; }
.wish-empty-icon { font-size:3rem; margin-bottom:.6rem; opacity:.3; }
.wish-empty p { font-size:1rem; color:var(--front-soft-ink,#6b7280); margin:0 0 .25rem; }
.wish-empty span { font-size:.8rem; color:#bbb; }

/* ---- 响应式 ---- */
@media (max-width: 767.98px) {
  .wish-rack { padding:1rem .5rem 1.5rem; }
  .wish-plaque { width:62px; min-height:108px; padding:.4rem .25rem .35rem; }
  .wp-content { font-size:.78rem; max-height:76px; }
  .wp-cat { font-size:.45rem; }
  .rack-bar { height:6px; }
  .wish-plaque::before { width:11px; height:13px; top:-10px; }
  .wish-plaque::after { height:10px; top:-8px; }
}
@media (max-width:480px) {
  .wish-plaque { width:54px; min-height:96px; padding:.35rem .2rem .3rem; }
  .wp-content { font-size:.72rem; max-height:66px; }
}

/* ---- 旧卡片兼容（供详情/我的许愿复用） ---- */
.wish-list { display:grid; grid-template-columns:1fr; gap:.75rem; }
.wish-card {
  display:flex; border-radius:12px; overflow:hidden;
  background:var(--front-card,#fff);
  border:1px solid var(--front-border);
  box-shadow:var(--front-shadow);
  transition:box-shadow .2s ease, transform .2s ease; position:relative;
}
.wish-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.06); }
.wish-card.wish-done { opacity:.55; }
.wish-card.wish-pinned { border-color:rgba(0,0,0,.12); }
.wc-accent { width:4px; flex-shrink:0; }
.wc-pin {
  position:absolute; top:0; right:0;
  background:var(--front-ink,#1a1a1a); color:#fff;
  font-size:.6rem; font-weight:700; padding:.18rem .55rem;
  border-radius:0 12px 0 8px; letter-spacing:.03em;
}
.wc-body { flex:1; padding:.9rem 1.1rem; min-width:0; }
.wc-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:.45rem; flex-wrap:wrap; gap:.25rem; }
.wc-tags { display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.wc-cat {
  display:inline-block; padding:.12rem .5rem; border-radius:6px;
  font-size:.68rem; font-weight:700; letter-spacing:.03em;
}
.wc-type { display:inline-block; padding:.08rem .45rem; border-radius:5px; font-size:.62rem; font-weight:600; }
.wc-type-strong { background:#fce4ec; color:#c62828; }
.wc-type-secret { background:#f3e5f5; color:#6a1b9a; }
.wc-type-done { background:#e8f5e9; color:#2e7d32; }
.wc-time { font-size:.68rem; color:#b0b0b0; white-space:nowrap; }
.wc-content { font-size:.9rem; color:var(--front-ink,#1a1a1a); line-height:1.75; margin-bottom:.55rem; word-break:break-word; }
.wc-content.wc-secret { color:#9e9e9e; font-style:italic; }
.wc-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.35rem; }
.wc-user { display:flex; align-items:center; gap:.4rem; }
.wc-avatar {
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:var(--front-wash,#f4f4f5); color:var(--front-soft-ink,#6b7280);
  font-size:.7rem; font-weight:700; flex-shrink:0;
}
.wc-nick { font-size:.78rem; color:var(--front-soft-ink,#6b7280); }
.wc-actions { display:flex; gap:.35rem; }
.wc-btn {
  font-size:.7rem; padding:.18rem .65rem; border-radius:6px; text-decoration:none; border:none;
  cursor:pointer; font-weight:600; transition:all .18s ease; display:inline-flex; align-items:center; gap:.15rem;
}
.wc-btn-info { background:#ecf5fd; color:#2980b9; }
.wc-btn-info:hover { background:#d6eaf8; }
.wc-btn-success { background:#e8f5e9; color:#27ae60; }
.wc-btn-success:hover { background:#c8e6c9; color:#1b5e20; }

/* ---- 分页 ---- */
.wish-pager { display:flex; justify-content:center; gap:.3rem; margin-top:1.5rem; flex-wrap:wrap; }
.wp-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 .55rem; border-radius:6px;
  font-size:.78rem; font-weight:500; color:var(--front-soft-ink,#6b7280);
  background:var(--front-wash,#f4f4f5);
  text-decoration:none; border:1px solid transparent; transition:all .18s ease;
}
.wp-btn:hover { background:#e5e7eb; color:var(--front-ink,#1a1a1a); }
.wp-btn.wp-active { background:var(--front-ink); color:#fff; font-weight:700; }
.wish-pager-info { text-align:center; color:#bbb; font-size:.68rem; margin-top:.45rem; }

/* ---- 许愿弹窗 ---- */
.wish-modal-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:var(--z-panel, 9999); align-items:center; justify-content:center;
}
.wish-modal-overlay.wish-modal-open { display:flex; }
.wish-modal-box {
  background:#fff; border-radius:12px; width:90%; max-width:460px; max-height:90vh;
  overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,.15);
}
.wish-modal-head {
  padding:1.4rem 1.5rem 1rem; text-align:center; position:relative;
  border-bottom:1px solid var(--front-border);
}
.wish-modal-head h3 { font-size:1.1rem; font-weight:700; color:var(--front-ink,#1a1a1a); margin:0 0 .2rem; }
.wish-modal-head p { font-size:.75rem; color:var(--front-soft-ink,#6b7280); margin:0; }
.wish-modal-close {
  position:absolute; top:10px; right:14px; background:none; border:none;
  color:#999; font-size:1.4rem; cursor:pointer; line-height:1; padding:0;
  width:26px; height:26px; border-radius:50%; transition:all .18s ease;
}
.wish-modal-close:hover { color:var(--front-ink,#1a1a1a); background:var(--front-wash,#f4f4f5); }

/* 表单 */
.wish-modal-form { padding:1.3rem 1.5rem 1.6rem; }
.wmf-group { margin-bottom:.95rem; }
.wmf-label { display:block; font-size:.78rem; font-weight:600; color:#5C3D0E; margin-bottom:.3rem; }
.wmf-required { color:#c62828; font-weight:400; }
.wmf-input, .wmf-textarea {
  width:100%; padding:.48rem .7rem; border:1px solid var(--front-border);
  border-radius:8px; font-size:.88rem; outline:none;
  transition:border-color .18s ease; background:#fff; color:var(--front-ink,#1a1a1a);
}
.wmf-input:focus, .wmf-textarea:focus { border-color:#8B6914; }
.wmf-textarea { resize:vertical; min-height:80px; }
.wmf-hint { display:block; font-size:.7rem; color:#bbb; margin-top:.2rem; }

/* Radio */
.wmf-radios { display:flex; flex-wrap:wrap; gap:.35rem; }
.wmf-radio { cursor:pointer; }
.wmf-radio input { display:none; }
.wmf-radio span {
  display:inline-block; padding:.25rem .65rem; border-radius:6px;
  font-size:.74rem; color:var(--front-soft-ink,#6b7280);
  background:var(--front-wash,#f4f4f5); border:1px solid transparent;
  transition:all .18s ease; user-select:none;
}
.wmf-radio span:hover { background:#e5e7eb; }
.wmf-radio span.wmf-active { color:#fff; background:#8B6914; border-color:#8B6914; font-weight:600; }

/* 提交按钮 */
.wmf-submit {
  width:100%; padding:.6rem; border:none; border-radius:8px; cursor:pointer;
  background:linear-gradient(160deg, #5C3D0E 0%, #8B6914 100%);
  color:#f5e6c8;
  font-size:.95rem; font-weight:600; letter-spacing:.04em;
  transition:all .18s ease; margin-top:.2rem;
}
.wmf-submit:hover { opacity:.92; }

/* ---- 心愿详情 ---- */
.wish-detail-card {
  background:var(--front-card,#fff); border-radius:12px; overflow:hidden;
  border:1px solid var(--front-border);
  box-shadow:var(--front-shadow);
}
.wdc-top {
  padding:1.2rem 1.5rem; display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--front-border);
}
.wdc-tags { display:flex; gap:.35rem; flex-wrap:wrap; justify-content:center; }
.wdc-cat { display:inline-block; padding:.15rem .6rem; border-radius:6px; font-size:.75rem; font-weight:700; }
.wdc-type { display:inline-block; padding:.12rem .55rem; border-radius:5px; font-size:.68rem; font-weight:600; }
.wdc-body { padding:1.8rem 1.5rem; text-align:center; }
.wdc-content {
  font-size:1.15rem; line-height:2.1; color:var(--front-ink,#1a1a1a);
  max-width:500px; margin:0 auto 1.4rem;
}
.wdc-content.wish-secret { color:#9e9e9e; font-style:italic; }
.wdc-meta { display:flex; align-items:center; justify-content:center; gap:.8rem; }
.wdc-user { display:flex; align-items:center; gap:.35rem; }
.wdc-avatar {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--front-wash,#f4f4f5); color:var(--front-soft-ink,#6b7280);
  font-size:.75rem; font-weight:700;
}
.wdc-nick { font-size:.8rem; color:var(--front-soft-ink,#6b7280); }
.wdc-time { font-size:.72rem; color:#bbb; }
.wdc-repaid { color:#43a047; font-size:.8rem; margin-top:.4rem; }
.wdc-footer { padding:0 1.5rem 1.6rem; text-align:center; }
.wdc-repay-btn {
  background:#43a047; color:#fff; border:none;
  padding:.48rem 1.8rem; border-radius:8px; font-size:.88rem; font-weight:600; cursor:pointer;
  transition:all .18s ease;
}
.wdc-repay-btn:hover { background:#388e3c; }

/* ---- 移动端适配 ---- */
@media (max-width: 767.98px) {
  .wish-hero { padding:1.5rem 1rem; }
  .wish-hero-title { font-size:1.3rem; }
  .whs-item { padding:0 .6rem; }
  .whs-num { font-size:1.1rem; }
  .wc-body { padding:.7rem .85rem; }
  .wc-content { font-size:.85rem; }
  .wish-modal-box { width:94%; max-height:85vh; }
  .wish-modal-form { padding:1rem 1.1rem 1.3rem; }
  .wish-tree-wrapper { min-height:600px; }
  .tree-trunk { height:200px; width:40px; bottom:40px; }
  .tree-foliage { transform:scale(.75); }
  .tree-branch { transform-origin:left center; }
  .tree-branch.br-l1,
  .tree-branch.br-l2,
  .tree-branch.br-l3 { width:120px; }
  .tree-branch.br-l4,
  .tree-branch.br-l5 { width:140px; }
  .tree-branch.br-r1,
  .tree-branch.br-r2,
  .tree-branch.br-r3 { width:100px; }
  .tree-branch.br-r4,
  .tree-branch.br-r5 { width:110px; }
  .tree-branch { transform:rotate(0deg) !important; }
  .tree-branch.br-l1 { top:220px; left:calc(50% - 60px); transform:rotate(-20deg) !important; }
  .tree-branch.br-l2 { top:195px; left:calc(50% - 80px); transform:rotate(-24deg) !important; }
  .tree-branch.br-l3 { top:170px; left:calc(50% - 100px); transform:rotate(-28deg) !important; }
  .tree-branch.br-l4 { top:145px; left:calc(50% - 110px); transform:rotate(-32deg) !important; }
  .tree-branch.br-l5 { top:118px; left:calc(50% - 100px); transform:rotate(-30deg) !important; }
  .tree-branch.br-r1 { top:220px; left:calc(50% - 50px); transform:rotate(20deg) !important; }
  .tree-branch.br-r2 { top:195px; left:calc(50% - 20px); transform:rotate(24deg) !important; }
  .tree-branch.br-r3 { top:170px; left:calc(50% + 10px); transform:rotate(28deg) !important; }
  .tree-branch.br-r4 { top:145px; left:calc(50% + 20px); transform:rotate(32deg) !important; }
  .tree-branch.br-r5 { top:118px; left:calc(50% + 10px); transform:rotate(30deg) !important; }
  .wish-tag { width:90px; }
  .wish-tag .wt-content { font-size:.62rem; }
  .wish-tag .wt-nick { font-size:.55rem; }
}
@media (max-width:480px) {
  .wish-hero-stats { gap:0; }
  .whs-item { padding:0 .35rem; }
  .whs-div { height:18px; }
  .wf-tag { font-size:.7rem; padding:.22rem .55rem; }
}
@media (max-width:380px) {
  .wish-tree-wrapper { min-height:500px; }
  .tree-trunk { height:160px; width:32px; bottom:35px; }
  .tree-foliage { transform:scale(.55); }
  .tree-branch { height:4px; }
  .wish-tag { width:78px; }
  .wish-tag .wt-content { font-size:.58rem; line-clamp:1; -webkit-line-clamp:1; }
  .wish-tag .wt-body { padding:4px 5px 3px; }
}

/* ====== 许愿状态标记 ====== */
.wc-badge-status {
  display:inline-block; padding:2px 8px; border-radius:4px; font-size:.72rem; font-weight:600;
}
.wc-badge-pending { background:#fff3e0; color:#e65100; }
.wc-badge-approved { background:#e8f5e9; color:#2e7d32; }
.wc-badge-rejected { background:#ffebee; color:#c62828; }

/* ====== 许愿审核通知 Toast ====== */
#wish-toast {
  animation: wishSlideIn .4s ease;
}
@keyframes wishSlideIn {
  from { transform:translateX(120%); opacity:0; }
  to { transform:translateX(0); opacity:1; }
}
#wish-toast:hover {
  box-shadow:0 6px 24px rgba(0,0,0,.2);
  transform:translateY(-2px);
  transition:all .2s;
}