/* ============================================================
 * guofeng.css — 中国古风设计系统 · 文人雅致 (Direction B)
 * Generated 2026-07-04 · Yijing (I Ching) App
 * ------------------------------------------------------------
 * 设计哲学 (huashu-design · 反 AI slop):
 *   - 从 existing context 出发：seed = fletApp theme.py 朱砂+金+米杏
 *   - 文人雅致 = 墨为主、纸为底、朱砂为钤印、金为发丝
 *   - 留白即设计；一处做到 120%，其它 80%
 *   - 规避: 紫渐变 / 圆角+左 accent / 装饰 icon 满铺 / emoji 当图标
 * ============================================================
 * 用法: 此文件为 OVERRIDE 层，置于 Bootstrap 之后加载。
 *      模板可逐步 opt-in：class="gf-..." 或在容器加 .guofeng 命名空间。
 * ============================================================ */

/* ---------- 1. 设计 Tokens (CSS Custom Properties) ---------- */
:root {
  /* 墨 ink — 文字主色系 */
  --gf-ink:        #1A1614;   /* 深墨，正文 */
  --gf-ink-soft:   #4A3F35;   /* 次级文字 */
  --gf-wash:       #6B5D4F;   /* 淡墨灰，注脚/分隔 */
  --gf-wash-light: #A89888;   /* 最弱文字 */

  /* 宣纸 paper — 底色 */
  --gf-paper:       #F2E8CF;  /* 页面底色，温宣纸 */
  --gf-paper-card:  #FBF5E6;  /* 卡片底，浅一档 */
  --gf-paper-deep:  #E8DBBA;  /* 沉底，用于 hover/强调区块 */

  /* 朱砂 vermillion — 仅作钤印/强调，文人不滥用 */
  --gf-vermillion:       #9B2D20;  /* 真朱砂，印章/点睛 */
  --gf-vermillion-soft:  #B85544;  /* 弱化朱，链接 hover */
  --gf-vermillion-wash:  rgba(155, 45, 32, 0.08); /* 朱砂底纹 */

  /* 鎏金 gold — 发丝/极细描边，文人不铺金 */
  --gf-gold:       #A88B3E;
  --gf-gold-soft:  #C9A04A;

  /* 青瓷 celadon — 功能色: 宜/成功 */
  --gf-celadon:    #7B9B8E;

  /* 暖琥珀 amber — 功能色: 提示 */
  --gf-amber:      #B8843A;

  /* 边框/分隔 */
  --gf-hairline:   #C9B98E;   /* 发丝墨线 */
  --gf-hairline-soft: #E0D3B8;

  /* 字体 — 霞鹜文楷 (LXGW WenKai) 为主, 楷书风文人雅致; 屏幕阅读版优先 */
  --gf-font-serif: "LXGW WenKai Screen", "LXGW WenKai", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", "宋体", serif;
  --gf-font-sans:  "LXGW WenKai Screen", "LXGW WenKai", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
  --gf-font-kai:   "LXGW WenKai Screen", "LXGW WenKai", "STKaiti", "KaiTi", "楷体", serif;

  /* 圆角 — 文人偏直，刻意混用 */
  --gf-radius-sm:  2px;   /* 按钮/标签 */
  --gf-radius-md:  4px;   /* 卡片 */
  --gf-radius-pill: 0;    /* 文人不用 pill */

  /* 阴影 — 极克制，发丝线优先 */
  --gf-shadow-card: 0 1px 0 var(--gf-hairline-soft), 0 2px 8px rgba(74, 63, 53, 0.04);

  /* 行距/度量 */
  --gf-measure: 38rem;  /* 正文行宽 ~60ch */
}

/* ---------- 1.5 YJ Design Token Remap (高杠杆 · 覆盖 design-tokens.css) ----------
 * 把 --yj-color-* 重映射到古风，让 custom.css 里所有用 var() 的元素
 * (链接/按钮/边框/surface/圆角/字体) 自动变古风，不打 specificity 战。
 * .guofeng (class) 特异性 > :root (pseudo-class)，稳赢。
 * ----------------------------------------------------------------------- */
.guofeng {
  --yj-color-primary: #9B2D20;          /* 朱砂 (原 rgb(228 110 35) 橙) */
  --yj-color-link: #9B2D20;             /* 链接朱砂 (原蓝 rgb(55 133 250)) */
  --yj-color-link-hover: #B85544;       /* 朱砂弱化 hover */
  --yj-color-accent: #9B2D20;           /* 按钮 accent (原 Bootstrap 蓝 #0d6efd) */
  --yj-color-text: #1A1614;             /* 墨 (原 #1a1a2e) */
  --yj-color-muted: #6B5D4F;            /* 淡墨灰 (原 #6c757d) */
  --yj-color-border: #C9B98E;           /* 发丝墨线 */
  --yj-color-border-subtle: #E0D3B8;
  --yj-color-surface: #FBF5E6;          /* 卡片宣纸 (原 #fff) */
  --yj-color-surface-muted: #E8DBBA;    /* 沉底 */
  --yj-color-surface-hover: #E8DBBA;
  --yj-radius-sm: 2px;                  /* 古风偏直 */
  --yj-radius-md: 4px;
  --yj-font-sans: var(--gf-font-sans);
}

/* ---------- 1.6 Shop Token Remap (shop.css 的 --shop-* brown/tan → 古风) ----------
 * shop.css 自带 saddle-brown + tan 皮革配色 (与墨·朱砂·鎏金冲突),
 * shop_base.html 在 shop.css 之后二次加载 guofeng.css, 这里把 --shop-* 重映射
 * 让所有 shop 页面跟随古风。
 * ----------------------------------------------------------------------- */
.guofeng {
  --shop-primary: #9B2D20;              /* 朱砂替 saddle brown #8B4513 */
  --shop-accent: #A88B3E;               /* 鎏金替 tan #D4A574 */
  --shop-bg: #F2E8CF;                   /* 宣纸替 #FFF8F0 */
}

/* ---------- 2. 基础 Base ---------- */
.guofeng,
.guofeng body {
  background-color: var(--gf-paper);
  color: var(--gf-ink);
  font-family: var(--gf-font-sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* 背景纸纹理 — 极淡，不抢内容 (opacity ≤ 0.04 per huashu-design) */
.guofeng body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image:
    radial-gradient(circle at 20% 30%, var(--gf-wash) 0.5px, transparent 1px),
    radial-gradient(circle at 70% 60%, var(--gf-wash) 0.5px, transparent 1px);
  background-size: 24px 24px, 32px 32px;
}
.guofeng main,
.guofeng header,
.guofeng footer { position: relative; z-index: 1; }

/* ---------- 3. 排版 Typography ---------- */
.guofeng h1, .guofeng h2, .guofeng h3,
.guofeng h4, .guofeng h5, .guofeng h6 {
  font-family: var(--gf-font-serif);
  color: var(--gf-ink);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.guofeng h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.guofeng h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); }
.guofeng h3 { font-size: 1.3rem; }

.guofeng .gf-title-calligraphy {
  font-family: var(--gf-font-kai);
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* 钤印式小标题 — 一处用，不要满铺 */
.guofeng .gf-section-label {
  display: inline-block;
  font-family: var(--gf-font-serif);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: var(--gf-vermillion);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gf-vermillion);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/* 正文阅读宽度 */
.guofeng .gf-prose { max-width: var(--gf-measure); }
.guofeng .gf-prose p { margin-bottom: 1.1rem; text-indent: 2em; }
.guofeng .gf-prose p:first-child { text-indent: 0; }

/* ---------- 4. 组件: 印章 Seal (文人核心 motif，克制使用) ---------- */
.guofeng .gf-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  background: var(--gf-vermillion);
  color: var(--gf-paper-card);
  font-family: var(--gf-font-kai);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgba(255, 245, 230, 0.25);
  transform: rotate(-2deg);
  vertical-align: middle;
  line-height: 1;
  text-align: center;
  white-space: pre;
}
.guofeng .gf-seal-sm { width: 2.2rem; height: 2.2rem; font-size: 0.8rem; }
.guofeng .gf-seal-round { border-radius: 50%; }

/* ---------- 5. 组件: 墨笔分割线 Brush Divider ---------- */
.guofeng .gf-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem auto;
  color: var(--gf-wash);
}
.guofeng .gf-divider::before,
.guofeng .gf-divider::after {
  content: "";
  height: 1px;
  flex: 0 1 6rem;
  background: linear-gradient(to right, transparent, var(--gf-hairline) 30%, var(--gf-hairline) 70%, transparent);
}
.guofeng .gf-divider-mark {
  font-family: var(--gf-font-serif);
  color: var(--gf-vermillion);
  font-size: 0.9rem;
}

/* 纯发丝线 */
.guofeng hr.gf-hairline {
  border: 0;
  height: 1px;
  background: var(--gf-hairline);
  margin: 2rem 0;
}

/* ---------- 6. 组件: 卡片 Card ---------- */
.guofeng .gf-card {
  background: var(--gf-paper-card);
  border: 1px solid var(--gf-hairline-soft);
  border-radius: var(--gf-radius-md);
  box-shadow: var(--gf-shadow-card);
}
.guofeng .card:not(.shop-card) {
  background: var(--gf-paper-card);
  padding: 1.5rem;
  transition: border-color 0.2s, transform 0.2s;
}
.guofeng .gf-card:hover {
  border-color: var(--gf-hairline);
  transform: translateY(-1px);
}
/* 卡片标题带朱砂左点 — 非 slop 的 left-accent：细且只在标题 */
.guofeng .gf-card-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--gf-font-serif);
  font-size: 1.1rem;
  color: var(--gf-ink);
  margin-bottom: 0.6rem;
}
.guofeng .gf-card-title::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1rem;
  background: var(--gf-vermillion);
  flex-shrink: 0;
}

/* ---------- 7. 组件: 按钮 Button ---------- */
.guofeng .gf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: var(--gf-radius-sm);
  font-family: var(--gf-font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  border: 1px solid var(--gf-ink);
  background: var(--gf-ink);
  color: var(--gf-paper-card);
  cursor: pointer;
  transition: all 0.18s;
  text-decoration: none;
}
.guofeng .gf-btn:hover {
  background: var(--gf-vermillion);
  border-color: var(--gf-vermillion);
  color: var(--gf-paper-card);
}
.guofeng .gf-btn-ghost {
  background: transparent;
  color: var(--gf-ink);
  border-color: var(--gf-hairline);
}
.guofeng .gf-btn-ghost:hover {
  background: var(--gf-vermillion-wash);
  color: var(--gf-vermillion);
  border-color: var(--gf-vermillion);
}

/* ---------- 8. 组件: 导航栏 Navbar (覆写 Bootstrap dark) ---------- */
.guofeng .navbar.gf-navbar {
  background: var(--gf-ink) !important;
  border-bottom: 2px solid var(--gf-gold);
  box-shadow: 0 1px 0 var(--gf-vermillion-wash);
  padding: 0.7rem 0;
}
.guofeng .navbar.gf-navbar .navbar-brand,
.guofeng .navbar.gf-navbar .nav-link {
  color: var(--gf-paper-card) !important;
  font-family: var(--gf-font-serif);
  letter-spacing: 0.05em;
}
.guofeng .navbar.gf-navbar .nav-link:hover {
  color: var(--gf-gold-soft) !important;
}
.guofeng .navbar.gf-navbar .navbar-brand {
  font-weight: 600;
  font-size: 1.2rem;
}
.guofeng .navbar.gf-navbar .dropdown-menu {
  background: var(--gf-paper-card);
  border: 1px solid var(--gf-hairline);
  border-radius: var(--gf-radius-md);
}
.guofeng .navbar.gf-navbar .dropdown-item { color: var(--gf-ink); }
.guofeng .navbar.gf-navbar .dropdown-item:hover {
  background: var(--gf-vermillion-wash);
  color: var(--gf-vermillion);
}

/* ---------- 9. 组件: 页脚 Footer ---------- */
.guofeng .gf-footer {
  background: var(--gf-ink);
  color: var(--gf-paper);
  padding: 2.5rem 0 1.5rem;
  margin-top: 4rem;
  border-top: 2px solid var(--gf-gold);
  font-size: 0.9rem;
}
.guofeng .gf-footer a {
  color: var(--gf-gold-soft);
  text-decoration: none;
}
.guofeng .gf-footer a:hover { color: var(--gf-paper-card); text-decoration: underline; }

/* ---------- 10. 工具网格 Tool Grid (首页命理工具入口) ---------- */
.guofeng .gf-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
}
.guofeng .gf-tool-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--gf-paper-card);
  border: 1px solid var(--gf-hairline-soft);
  border-radius: var(--gf-radius-md);
  text-decoration: none;
  color: var(--gf-ink);
  transition: all 0.2s;
}
.guofeng .gf-tool-card:hover {
  border-color: var(--gf-vermillion);
  box-shadow: 0 4px 16px rgba(155, 45, 32, 0.08);
}
.guofeng .gf-tool-card .gf-tool-glyph {
  font-family: var(--gf-font-kai);
  font-size: 2rem;
  color: var(--gf-vermillion);
  margin-bottom: 0.5rem;
  line-height: 1;
}
.guofeng .gf-tool-card .gf-tool-name {
  font-family: var(--gf-font-serif);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.guofeng .gf-tool-card .gf-tool-desc {
  font-size: 0.8rem;
  color: var(--gf-wash);
}

/* ---------- 11. 反 AI slop 修复 (覆盖 base.html 的紫渐变) ---------- */
/* 原 #checkinModal header 紫渐变 #667eea→#764ba2 = AI slop，改为朱砂 */
.guofeng #checkinModal .modal-header,
.guofeng .modal-header.gf-header {
  background: linear-gradient(135deg, var(--gf-vermillion) 0%, var(--gf-ink) 100%) !important;
  color: var(--gf-paper-card) !important;
  border: none !important;
  padding: 1.25rem 1.5rem !important;
}
.guofeng #checkinModal .modal-content {
  border: 1px solid var(--gf-hairline);
  border-radius: var(--gf-radius-md);
}

/* ---------- 12. Bootstrap 兼容层 (渐进迁移) ---------- */
/* 把 Bootstrap 主色悄悄拢向古风，让未改造的页面也沾染 */
/* 全屏感: 大屏放宽 .container (默认 Bootstrap 上限 1320px 太窄, 留大块空白) */
@media (min-width: 1400px) {
  .guofeng .container,
  .guofeng .container-sm,
  .guofeng .container-md,
  .guofeng .container-lg,
  .guofeng .container-xl,
  .guofeng .container-xxl,
  .guofeng main.container,
  .guofeng main[class*="container"] {
    max-width: 1600px !important;
  }
}
@media (min-width: 1920px) {
  .guofeng .container,
  .guofeng main.container,
  .guofeng main[class*="container"] {
    max-width: 1760px !important;
  }
}
.guofeng .btn-primary {
  background-color: var(--gf-ink);
  border-color: var(--gf-ink);
}
.guofeng .btn-primary:hover {
  background-color: var(--gf-vermillion);
  border-color: var(--gf-vermillion);
}
.guofeng .btn-outline-primary {
  color: var(--gf-ink);
  border-color: var(--gf-ink);
}
.guofeng .btn-outline-primary:hover {
  background-color: var(--gf-vermillion-wash);
  color: var(--gf-vermillion);
  border-color: var(--gf-vermillion);
}
.guofeng a { color: var(--gf-vermillion); text-decoration: none; }
.guofeng a:hover { color: var(--gf-vermillion-soft); text-decoration: underline; }
.guofeng .text-muted { color: var(--gf-wash) !important; }
.guofeng .bg-light { background-color: var(--gf-paper-card) !important; }
.guofeng .blog-footer { background-color: var(--gf-ink) !important; color: var(--gf-paper); }

/* ---------- 13. 工具类 Utilities ---------- */
.guofeng .gf-text-ink { color: var(--gf-ink) !important; }
.guofeng .gf-text-wash { color: var(--gf-wash) !important; }
.guofeng .gf-text-vermillion { color: var(--gf-vermillion) !important; }
.guofeng .gf-bg-paper { background: var(--gf-paper) !important; }
.guofeng .gf-bg-card { background: var(--gf-paper-card) !important; }
.guofeng .gf-serif { font-family: var(--gf-font-serif) !important; }
.guofeng .gf-kai { font-family: var(--gf-font-kai) !important; }
.guofeng .gf-measure { max-width: var(--gf-measure); }

/* ---------- 14. 印章装饰: 角落水印 (仅 hero/封面用，不滥用) ---------- */
.guofeng .gf-hero-seal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 4rem;
  height: 4rem;
  background: var(--gf-vermillion);
  color: var(--gf-paper-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gf-font-kai);
  font-size: 1.3rem;
  border-radius: 4px;
  transform: rotate(4deg);
  box-shadow: inset 0 0 0 3px rgba(255, 245, 230, 0.2);
  opacity: 0.95;
}

/* ============================================================
 * END guofeng.css
 * 迁移指南: 在 base.html 的 <html> 或 <body> 加 class="guofeng"
 *          逐步把 navbar 加 gf-navbar class，卡片用 gf-card。
 *          未改造的页面通过 §12 兼容层也沾染古风。
 * ============================================================ */

/* ============================================================
 * 15. 万年历弹窗 Calendar Popup (黄历宜忌)
 *    覆写 newclendar.css — 当前 Inter 字体 + 现代边框，改为古风
 *    内容本身已是纯传统 (干支/节气/宜忌/彭祖) — 形式须匹配内容
 * ============================================================ */
.guofeng #container-c,
.guofeng .calender.container {
  background: var(--gf-paper-card) !important;
  border: 1px solid var(--gf-gold) !important;
  border-radius: var(--gf-radius-md) !important;
  box-shadow: 0 8px 40px rgba(26, 22, 20, 0.18) !important;
  font-family: var(--gf-font-sans) !important;
  color: var(--gf-ink) !important;
  padding: 1.5rem !important;
}
.guofeng #container-c .card,
.guofeng #container-c .card-body {
  background: transparent !important;
  border: none !important;
  color: var(--gf-ink) !important;
}
.guofeng #container-c hr {
  border: 0;
  border-top: 1px solid var(--gf-hairline-soft);
  margin: 0.6rem 0;
  opacity: 1;
}
/* 关闭按钮 — 墨圆点，hover 金 */
.guofeng #container-c .close-btn {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gf-ink);
  color: var(--gf-paper-card);
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  border: none;
  transition: background 0.2s;
  z-index: 2;
}
.guofeng #container-c .close-btn:hover { background: var(--gf-vermillion); }

/* 干支 (年/月/日) — 楷体强调，干支用朱砂，生肖/纳音用墨 */
.guofeng #container-c .year {
  font-family: var(--gf-font-kai);
  color: var(--gf-ink-soft) !important;
  font-size: 0.95rem !important;
  margin: 0 0.4rem 0.3rem 0 !important;
  padding: 0 !important;
  background: none !important;
}
.guofeng #container-c .year[style*="font-weight"],
.guofeng #container-c .year:first-child {
  color: var(--gf-vermillion) !important;
  font-weight: 600 !important;
}

/* 宜 / 忌 徽章 — 宜=青瓷(生发)，忌=墨(克制)，非默认红绿 */
.guofeng #container-c .badge-yi,
.guofeng .badge-yi {
  display: inline-block;
  background: var(--gf-celadon) !important;
  color: var(--gf-paper-card) !important;
  font-family: var(--gf-font-serif);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  padding: 0.15rem 0.7rem;
  border-radius: var(--gf-radius-sm);
  margin-bottom: 0.4rem;
}
.guofeng #container-c .badge-ji,
.guofeng .badge-ji {
  display: inline-block;
  background: var(--gf-ink) !important;
  color: var(--gf-paper-card) !important;
  font-family: var(--gf-font-serif);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  padding: 0.15rem 0.7rem;
  border-radius: var(--gf-radius-sm);
  margin-bottom: 0.4rem;
}

/* 宜忌 / 吉神 列表 — 发丝线分隔，宋体 */
.guofeng #container-c .calendar-list,
.guofeng #container-c .jishen-list {
  list-style: none;
  padding: 0;
  margin: 0.3rem 0;
  font-family: var(--gf-font-serif);
  color: var(--gf-ink-soft);
  font-size: 0.9rem;
}
.guofeng #container-c .calendar-list li,
.guofeng #container-c .jishen-list li {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--gf-hairline-soft);
  border-radius: var(--gf-radius-sm);
  margin: 0.15rem 0.2rem;
  font-size: 0.85rem;
}

/* 大日号 — 宋体大字，墨色，左右翻页箭头朱砂 */
.guofeng #container-c .big-day {
  font-family: var(--gf-font-serif);
  color: var(--gf-ink);
  margin: 0.5rem 0;
}
.guofeng #container-c .big-day #date-day,
.guofeng #container-c .big-day span {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--gf-ink);
  padding: 0 0.8rem;
}
.guofeng #container-c .big-day a.prev,
.guofeng #container-c .big-day a.next {
  color: var(--gf-vermillion);
  font-size: 1.2rem;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.guofeng #container-c .big-day a.prev:hover,
.guofeng #container-c .big-day a.next:hover { opacity: 1; }

/* 公历/农历显示 */
.guofeng #container-c .date-display,
.guofeng #container-c .lunar-date,
.guofeng #container-c .position-info {
  font-family: var(--gf-font-serif);
  color: var(--gf-wash) !important;
  font-size: 0.9rem;
}
.guofeng #container-c .lunar-date {
  color: var(--gf-vermillion) !important;
  font-size: 1rem;
  font-weight: 500;
}
/* 日期输入控件 — 墨边 */
.guofeng #container-c .date-select select,
.guofeng #container-c .date-select input {
  border: 1px solid var(--gf-hairline);
  border-radius: var(--gf-radius-sm);
  padding: 0.15rem 0.4rem;
  background: var(--gf-paper);
  color: var(--gf-ink);
  font-family: var(--gf-font-sans);
}
.guofeng #container-c .date-select select:focus,
.guofeng #container-c .date-select input:focus {
  outline: none;
  border-color: var(--gf-vermillion);
}

/* ---------- 16. 分类菜单 SVG 标记 (categorys.html) ----------
 * 图标 key 由后台 categories.icon 字段决定 (admin 下拉选), 模板 macro 映射 key→SVG.
 * 墨色默认, hover 朱砂, 发丝线分隔. 无实物图.
 * -------------------------------------------------------- */
.guofeng .category-sidebar h4,
.guofeng .category-sidebar .menu-title {
  font-family: var(--gf-font-serif);
  color: var(--gf-ink);
  letter-spacing: 0.15em;
}
.guofeng .category-sidebar .cat-item,
.guofeng .user-sidebar-menu .cat-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.2rem;
  text-decoration: none;
  color: var(--gf-ink);
  transition: color .2s, padding-left .2s;
}
.guofeng .category-sidebar .cat-item {
  border-bottom: 1px solid var(--gf-hairline-soft);
}
.guofeng .category-sidebar li:last-child .cat-item { border-bottom: 0; }
.guofeng .category-sidebar .cat-item:hover,
.guofeng .user-sidebar-menu .cat-item:hover {
  color: var(--gf-vermillion);
  padding-left: 0.5rem;
}
.guofeng .category-sidebar .cat-item:hover .glyph,
.guofeng .user-sidebar-menu .cat-item:hover .glyph { color: var(--gf-vermillion); }

/* SVG glyph container — stroke:currentColor 让墨→朱砂跟随父元素 */
.guofeng .glyph {
  width: 1.4rem; height: 1.4rem;
  flex-shrink: 0;
  color: var(--gf-ink);
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.guofeng .glyph svg { width: 100%; height: 100%; display: block; }
.guofeng .glyph .ink-stroke {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.guofeng .category-sidebar .cat-name {
  font-family: var(--gf-font-serif);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}
/* 兼容: 老的 .text-decoration-none.d-flex 也加上 cat-item 风格 (未加 cat-item class 的) */
.guofeng .category-sidebar .text-decoration-none { color: var(--gf-ink); }

/* ---------- 17. 文章卡片标题字号 (2 列网格里小一号, 避免太抢) ---------- */
.guofeng .gf-card .card-title {
  font-size: 0.92rem;
  line-height: 1.35;
}
.guofeng .gf-card .card-title a { color: var(--gf-ink); }
.guofeng .gf-card .card-title a:hover { color: var(--gf-vermillion); }

/* ---------- 18. 文章详情卡 .detail-card (覆写 detail.css 白底) ----------
 * detail.css 默认 #fff + 圆角 12px + 浅阴影, 像默认 Bootstrap.
 * 改古风: 宣纸底 + 发丝墨边 + 朱砂顶线 (册页感) + 经卷式宽 padding.
 */
.guofeng .detail-card {
  background: var(--gf-paper-card) !important;
  border: 1px solid var(--gf-hairline-soft) !important;
  border-top: 2px solid var(--gf-vermillion) !important;
  border-radius: var(--gf-radius-md) !important;
  box-shadow: var(--gf-shadow-card) !important;
}
.guofeng .detail-card .card-body { padding: 2rem 2.25rem; }
.guofeng .detail-card .blog-post-title,
.guofeng .detail-card h1, .guofeng .detail-card h2, .guofeng .detail-card h3 {
  font-family: var(--gf-font-serif);
  color: var(--gf-ink);
}
.guofeng .detail-card .blog-post,
.guofeng .detail-card .article-body {
  color: var(--gf-ink-soft);
  line-height: 1.85;
  font-size: 1rem;
}
.guofeng .detail-card .blog-post p { margin-bottom: 1.1rem; }

/* ---------- 19. 表单输入古风化 (八字/登录/搜索/所有 form-control) ----------
 * 默认 Bootstrap 白底灰边 → 宣纸底 + 发丝墨边 + 朱砂 focus 晕.
 */
.guofeng .form-control,
.guofeng input[type="text"], .guofeng input[type="number"],
.guofeng input[type="password"], .guofeng input[type="email"],
.guofeng input[type="search"], .guofeng input[type="date"],
.guofeng input[type="tel"], .guofeng input[type="url"],
.guofeng select.form-control, .guofeng textarea.form-control,
.guofeng select, .guofeng textarea {
  background-color: var(--gf-paper) !important;
  border: 1px solid var(--gf-hairline) !important;
  border-radius: var(--gf-radius-sm) !important;
  color: var(--gf-ink) !important;
  font-family: var(--gf-font-sans);
}
.guofeng .form-control:focus,
.guofeng input:focus, .guofeng select:focus, .guofeng textarea:focus {
  border-color: var(--gf-vermillion) !important;
  box-shadow: 0 0 0 2px var(--gf-vermillion-wash) !important;
  background-color: var(--gf-paper-card) !important;
  outline: none;
}
.guofeng .form-control::placeholder,
.guofeng input::placeholder, .guofeng textarea::placeholder {
  color: var(--gf-wash-light);
}
/* select 下拉箭头区也拢一下 */
.guofeng select.form-control { background-image: none; appearance: auto; }

/* ---------- 19b. 全表单元素古风化 (checkbox/radio/file/input-group/label) ---------- */
/* checkbox / radio — appearance:none 自定义古风样式，由 pointer-events:none + JS 接管点击 */
.guofeng input[type="checkbox"],
.guofeng input[type="radio"],
.guofeng input[type="checkbox"].form-check-input,
.guofeng input[type="radio"].form-check-input {
  /* appearance:none 自定义古风外观，用 pointer-events:none + JS wrapper handler 接管交互 */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: var(--gf-paper) !important;
  border: 1.5px solid var(--gf-hairline) !important;
  width: 1.15em; height: 1.15em;
  min-width: 1.15em; min-height: 1.15em;
  cursor: pointer;
  vertical-align: -0.15em;
  flex-shrink: 0;
  position: relative;
  pointer-events: none;
}
/* .form-check 容器设为 cursor:pointer，让用户知道可点击 */
.guofeng .form-check {
  cursor: pointer;
}
.guofeng input[type="checkbox"],
.guofeng input[type="checkbox"].form-check-input { border-radius: 2px !important; }
.guofeng input[type="radio"],
.guofeng input[type="radio"].form-check-input { border-radius: 50% !important; }

/* :checked 视觉反馈 */
.guofeng input[type="checkbox"]:focus-visible,
.guofeng input[type="radio"]:focus-visible,
.guofeng input[type="checkbox"].form-check-input:focus-visible,
.guofeng input[type="radio"].form-check-input:focus-visible {
  outline: 2px solid var(--gf-vermillion);
  outline-offset: 2px;
}
/* :checked 视觉反馈 — pointer-events:none + wrapper handler 接管后仍需显示状态 */
.guofeng input[type="checkbox"]:checked,
.guofeng input[type="checkbox"].form-check-input:checked,
.guofeng input[type="radio"]:checked,
.guofeng input[type="radio"].form-check-input:checked {
  background: var(--gf-vermillion) !important;
  border-color: var(--gf-vermillion) !important;
}
.guofeng input[type="checkbox"]:checked::after,
.guofeng input[type="checkbox"].form-check-input:checked::after {
  content: "";
  position: absolute;
  left: 28%; top: 12%;
  width: 28%; height: 55%;
  border: solid var(--gf-paper-card);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.guofeng input[type="radio"]:checked::after,
.guofeng input[type="radio"].form-check-input:checked::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 42%; height: 42%;
  background: var(--gf-paper-card);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
/* label 统一墨色 */
.guofeng label,
.guofeng .form-label,
.guofeng .form-control-label,
.guofeng .col-form-label {
  color: var(--gf-ink-soft) !important;
  font-family: var(--gf-font-sans);
  font-weight: 500;
}
/* input-group (搜索条等: 输入框 + 附加按钮) — 附加按钮拢古风 */
.guofeng .input-group-text {
  background: var(--gf-paper-card) !important;
  border: 1px solid var(--gf-hairline) !important;
  color: var(--gf-ink-soft);
}
.guofeng .input-group .btn,
.guofeng .input-group-append .btn,
.guofeng .input-group-prepend .btn {
  border: 1px solid var(--gf-hairline) !important;
  background: var(--gf-paper-card) !important;
  color: var(--gf-ink) !important;
}
.guofeng .input-group .btn:hover {
  background: var(--gf-vermillion) !important;
  color: var(--gf-paper-card) !important;
  border-color: var(--gf-vermillion) !important;
}
/* file input — 选择按钮拢墨底, hover 朱砂 */
.guofeng input[type="file"] {
  color: var(--gf-ink-soft);
  font-family: var(--gf-font-sans);
}
.guofeng input[type="file"]::file-selector-button {
  background: var(--gf-ink);
  color: var(--gf-paper-card);
  border: none;
  padding: 0.4rem 0.9rem;
  border-radius: var(--gf-radius-sm);
  margin-right: 0.6rem;
  cursor: pointer;
  font-family: var(--gf-font-sans);
  transition: background 0.18s;
}
.guofeng input[type="file"]::file-selector-button:hover {
  background: var(--gf-vermillion);
}
/* 表单校验状态拢古风 (去 Bootstrap 绿/红, 用青瓷/朱砂) */
.guofeng .form-control:valid { border-color: var(--gf-hairline) !important; background-image: none !important; }
.guofeng .form-control.is-valid,
.guofeng .was-validated .form-control:valid { border-color: var(--gf-celadon) !important; }
.guofeng .form-control.is-invalid,
.guofeng .was-validated .form-control:invalid { border-color: var(--gf-vermillion) !important; }
.guofeng .invalid-feedback { color: var(--gf-vermillion); font-size: 0.8rem; }

/* ---------- 20. 联系/列表古风化 (about 页联系我们) ----------
 * Bootstrap .list-group 默认白底+紧贴. 改: 每项独立宣纸卡 + 间隔 + 发丝墨边 + 朱砂图标.
 */
.guofeng .gf-contact-list {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;                /* 中间间隔 */
  list-style: none;
  padding: 0;
  margin: 0;
}
.guofeng .gf-contact-list .gf-contact-row,
.guofeng .list-group-item {
  background: var(--gf-paper-card) !important;
  border: 1px solid var(--gf-hairline-soft) !important;
  border-radius: var(--gf-radius-md) !important;
  color: var(--gf-ink) !important;
  padding: 0.7rem 1.1rem;
  transition: border-color 0.15s, background 0.15s;
}
.guofeng .gf-contact-list .gf-contact-row:hover {
  border-color: var(--gf-hairline) !important;
  background: var(--gf-paper) !important;
}
.guofeng .gf-contact-list .gf-contact-row > i.bi,
.guofeng .gf-contact-list .gf-contact-row > i.mdi {
  color: var(--gf-vermillion);
  margin-right: 0.5rem;
}
.guofeng .gf-contact-list a { color: var(--gf-vermillion); text-decoration: none; }
.guofeng .gf-contact-list a:hover { text-decoration: underline; }

/* .alert 也拢古风 (about 页可能有提示框) */
.guofeng .alert {
  border-radius: var(--gf-radius-sm) !important;
  border: 1px solid var(--gf-hairline) !important;
  background: var(--gf-paper-card) !important;
  color: var(--gf-ink-soft) !important;
}
.guofeng .alert-warning {
  background: var(--gf-vermillion-wash) !important;
  border-color: var(--gf-vermillion) !important;
  color: var(--gf-vermillion) !important;
}

/* ---------- 21. accordion 古风化 (faq 页) ----------
 * Bootstrap .accordion 默认白底 + .accordion-button:not(.collapsed) 浅蓝底.
 * 改: 宣纸底 + 朱砂晕展开态 + 发丝墨边分隔.
 */
.guofeng .accordion-item {
  background: var(--gf-paper-card) !important;
  border: 1px solid var(--gf-hairline-soft) !important;
  border-radius: var(--gf-radius-md) !important;
  margin-bottom: 0.6rem;
  overflow: hidden;
}
.guofeng .accordion-button {
  background: var(--gf-paper-card) !important;
  color: var(--gf-ink) !important;
  font-family: var(--gf-font-serif);
  font-weight: 600;
  font-size: 1rem;
  border: 0;
  box-shadow: none !important;
  padding: 0.9rem 1.2rem;
}
.guofeng .accordion-button:not(.collapsed) {
  background: var(--gf-vermillion-wash) !important;
  color: var(--gf-vermillion) !important;
  box-shadow: none !important;
}
.guofeng .accordion-button:focus { box-shadow: none !important; border: 0; }
/* chevron 染墨色 (Bootstrap 用 background-image SVG, 用 filter 染) */
.guofeng .accordion-button::after { filter: invert(15%) sepia(20%) saturate(800%) hue-rotate(350deg); }
.guofeng .accordion-button:not(.collapsed)::after { filter: invert(25%) sepia(80%) saturate(2500%) hue-rotate(-5deg); }
.guofeng .accordion-body {
  background: var(--gf-paper) !important;
  color: var(--gf-ink-soft);
  line-height: 1.85;
  padding: 1rem 1.2rem;
}
.guofeng .accordion-collapse { border-top: 1px solid var(--gf-hairline-soft); }

/* ---------- 22. nav-tabs / table 古风化 (其它常见 Bootstrap 组件) ---------- */
.guofeng .nav-tabs {
  border-bottom: 1px solid var(--gf-hairline);
}
.guofeng .nav-tabs .nav-link {
  color: var(--gf-wash);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-family: var(--gf-font-serif);
}
.guofeng .nav-tabs .nav-link:hover { color: var(--gf-ink); border-color: transparent; }
.guofeng .nav-tabs .nav-link.active {
  color: var(--gf-vermillion) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--gf-vermillion);
}
.guofeng .table { color: var(--gf-ink); border-color: var(--gf-hairline-soft); }
.guofeng .table thead th {
  background: var(--gf-paper-deep) !important;
  color: var(--gf-ink) !important;
  border-color: var(--gf-hairline) !important;
  font-family: var(--gf-font-serif);
}
.guofeng .table td, .guofeng .table th { border-color: var(--gf-hairline-soft) !important; }
.guofeng .table-hover tbody tr:hover { background: var(--gf-vermillion-wash) !important; }

/* ---------- 23. FAQ 美化 ---------- */
.guofeng .gf-faq-wrap { padding: 1rem 0; }
.guofeng .gf-faq-title {
  font-family: var(--gf-font-serif);
  font-size: 1.6rem;
  color: var(--gf-ink);
  margin: 0.3rem 0 0.5rem;
  letter-spacing: 0.08em;
}
.guofeng .gf-faq-intro { color: var(--gf-wash); font-size: 0.9rem; margin-bottom: 1.8rem; }
.guofeng .gf-faq-list { gap: 0.7rem; }
/* 问/答 标记 — 朱砂方印感 */
.guofeng .gf-faq-q-mark,
.guofeng .gf-faq-a-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4em; height: 1.4em; flex-shrink: 0;
  background: var(--gf-vermillion); color: var(--gf-paper-card);
  font-family: var(--gf-font-kai); font-size: 0.8em; font-weight: 600;
  border-radius: 2px; margin-right: 0.6em;
  box-shadow: inset 0 0 0 1px rgba(255,245,230,0.25);
  vertical-align: middle;
}
.guofeng .gf-faq-a-mark { background: var(--gf-ink); }
.guofeng .gf-faq-list .accordion-button { padding-left: 1rem; }
.guofeng .gf-faq-list .accordion-body { padding-left: 1rem; }

/* ---------- 24. 标签云美化 + 文章图片统一大小 ---------- */
.guofeng .gf-tags-wrap { padding: 1rem 0; }
.guofeng .gf-tags-title {
  font-family: var(--gf-font-serif); font-size: 1.6rem; color: var(--gf-ink);
  margin: 0.3rem 0 0.5rem; letter-spacing: 0.08em;
}
.guofeng .gf-tags-intro { color: var(--gf-wash); font-size: 0.9rem; margin-bottom: 1.8rem; }
.guofeng .gf-tags-cloud { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.guofeng .gf-tag-chip {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  background: var(--gf-paper-card);
  border: 1px solid var(--gf-hairline);
  border-radius: var(--gf-radius-sm);
  color: var(--gf-ink);
  font-family: var(--gf-font-serif);
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.2s;
}
.guofeng .gf-tag-chip:hover {
  background: var(--gf-vermillion);
  border-color: var(--gf-vermillion);
  color: var(--gf-paper-card);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(155,45,32,0.2);
  text-decoration: none;
}

/* 文章详情图片：每张一行，宽度随正文，高度按比例 */
.guofeng .detail-images {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}
.guofeng .detail-images .detail-image-item {
  margin: 0;
  width: 100%;
  max-height: 288px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gf-radius-md);
  border: 1px solid var(--gf-hairline-soft);
  background: rgba(255, 255, 255, 0.6);
  line-height: 0;
  transition: box-shadow 0.25s, transform 0.25s;
}
.guofeng .detail-images img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  border-radius: 0;
  cursor: zoom-in;
  background: transparent;
  transition: none;
}
.guofeng .detail-images .detail-image-item:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

/* 正文 Markdown/HTML 内嵌图片 */
.guofeng .detail-card .article-body p:has(> img),
.guofeng .detail-card .article-body figure:has(img),
.guofeng .detail-card .article-body a:has(> img) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: 288px;
  overflow: hidden;
  margin: 0.75rem 0;
  border-radius: var(--gf-radius-md);
  border: 1px solid var(--gf-hairline-soft);
  background: rgba(255, 255, 255, 0.6);
  line-height: 0;
  transition: box-shadow 0.25s, transform 0.25s;
}
.guofeng .detail-card .article-body img:not(pre img):not(code img) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border: none;
  border-radius: 0;
  cursor: zoom-in;
  background: transparent;
  box-shadow: none;
  transition: none;
}
.guofeng .detail-card .article-body p:has(> img):hover,
.guofeng .detail-card .article-body figure:has(img):hover,
.guofeng .detail-card .article-body a:has(> img):hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}