/* ============================================================================
 * theme-php.css —— PHP 镜像站专属主题层（v2.0 UI 升级）
 *
 * 作用范围：仅 PHP 站（wwwroot/php/）。ASP 主站不引用本文件，因此完全不受影响。
 * 引入方式：在 php/_header.php 与 php/admin/_head.php、php/admin/login.php 中
 *           于 site.css 之后引入。
 *
 * 设计原则：
 *   1. 无边框分层 —— 卡片与背景靠 1%~3% 的微对比色阶区分，不画边框。
 *   2. 宣纸双主题 —— 浅色「宣纸」#F7F4ED / 暗色「夜墨」#171D1B。
 *   3. 暗色字重细一档 —— 暗底浅字自带加粗错觉，整体下调 100。
 *   4. 品牌色来自站点 logo —— 墨绿 #26332F / 主绿 #597568 / 朱红 #B56A52。
 *
 * 与 site.css 的关系：site.css 提供结构与排版，本文件覆盖配色与视觉层。
 * 所有自定义类沿用 yh- 前缀，避免与 Bootstrap 冲突。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. 设计令牌
 * ------------------------------------------------------------------------- */
:root {
  /* ---- 表面层：无边框微对比分层（浅色下卡片比底色沉，模拟纸面叠层）---- */
  --yh-surface-0: #F7F4ED;   /* 页面底 · 宣纸 */
  --yh-surface-1: #F5F1E8;   /* 卡片面 */
  --yh-surface-2: #F2EEE2;   /* 抬升 / 表头 / 侧栏 */
  --yh-surface-3: #F0EADD;   /* 凹陷 / 输入框 */

  /* ---- 墨色 ---- */
  --yh-text-1: #26332F;      /* 正文 */
  --yh-text-2: #55625C;      /* 次要 */
  --yh-text-3: #626E68;      /* 弱化（实测 4.72:1 达标；原 #78847D 仅 3.45 不合格） */

  /* ---- 品牌 ---- */
  --yh-brand: #4F6B5F;       /* 主绿 */
  --yh-brand-hover: #425C51;
  --yh-brand-soft: #E3E4DC;
  --yh-accent: #A85C44;      /* 朱红 */
  --yh-accent-soft: #EEE2D9;

  /* ---- 语义色（值经 WCAG 实测：浅底上的文字均 >= 4.5:1）---- */
  --yh-success: #3E6349;      /* 徽章浅底上 5.09:1 */
  --yh-success-soft: #DDE0D6;
  --yh-warning: #7D5C2B;      /* 徽章浅底上 4.61:1 */
  --yh-warning-soft: #E6DFD2;
  --yh-danger: #99493A;       /* 徽章浅底上 4.66:1 */
  --yh-danger-soft: #EADCD4;

  /* ---- 字重阶梯（暗色模式整体下调一档）---- */
  --yh-w-display: 700;
  --yh-w-title: 600;
  --yh-w-body: 400;

  /* ---- 动效令牌：分性格 ---- */
  --yh-ease-snap: cubic-bezier(.2, 0, 0, 1);            /* 拖拽：瞬间到位 */
  --yh-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);   /* 点赞：Q 弹回弹 */
  --yh-ease-out: cubic-bezier(0, 0, .2, 1);
  --yh-dur-fast: 120ms;
  --yh-dur-base: 240ms;
  --yh-dur-bounce: 320ms;

  /* ---- 阴影：宣纸体系用极轻的暖调阴影，不用冷灰 ---- */
  --yh-shadow-1: 0 1px 2px rgba(38, 51, 47, .04);
  --yh-shadow-2: 0 6px 20px rgba(38, 51, 47, .07);
  --yh-shadow-3: 0 10px 34px rgba(38, 51, 47, .12);
}

/* ---------------------------------------------------------------------------
 * 1.1 旧变量重映射（关键）
 *
 * 说明：site.css 里的前台样式用的是一套「旧变量名」（--yh-card-bg / --yh-text /
 *   --yh-text-muted / --yh-border / --yh-bg / --yh-primary），全站共 69 处引用。
 *   这些变量原本只有浅色值，若不处理，暗色模式下会出现「白底 + 浅色字」，
 *   文字直接看不见（留言卡片、评论卡片、分页条都是这个问题）。
 *
 *   做法：在本主题层把旧变量重新指向新令牌。
 *   —— 一处改动即可让全部 69 处引用自动跟随暗色主题，无需改 site.css。
 *
 *   注意：site.css 是 ASP/PHP 共用文件，不能直接改（会波及 ASP 站），
 *         所以只做「重映射」，不修改原文件。
 * ------------------------------------------------------------------------- */
:root {
  --yh-primary: #4F6B5F;         /* 旧：主色（通用蓝 → 品牌墨绿） */
  --yh-primary-dark: #425C51;    /* 旧：主色 hover */
  --yh-text: #26332F;            /* 旧：正文 */
  --yh-text-muted: #626E68;      /* 旧：次要文字（与 --yh-text-3 同值，保证一致） */
  --yh-border: #F0EADD;          /* 旧：边框色（改用 surface-3 层次） */
  --yh-bg: #F7F4ED;              /* 旧：页面背景 */
  --yh-card-bg: #F5F1E8;         /* 旧：卡片背景 */
}

[data-bs-theme="dark"] {
  /* ★ 暗色模式下旧变量重映射 —— 这是「暗色看不清字」的根因修复 */
  --yh-primary: #8FAA9D;
  --yh-primary-dark: #A6BDB2;
  --yh-text: #E4E9E6;
  --yh-text-muted: #8A958F;
  --yh-border: #252D2A;
  --yh-bg: #171D1B;
  --yh-card-bg: #1A211F;
}

/* ---------------------------------------------------------------------------
 * 2. 暗色模式 · 夜墨
 *    说明：卡片比页面底「浮起」（更亮），层差同样控制在 1%~3%。
 * ------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  --yh-surface-0: #171D1B;
  --yh-surface-1: #1A211F;
  --yh-surface-2: #1E2623;
  --yh-surface-3: #121716;

  --yh-text-1: #E4E9E6;
  --yh-text-2: #A5B0AB;
  --yh-text-3: #8A958F;      /* ★ 由 #7C8781 提亮：原值 on 卡片面仅 4.40，差 0.1 不达标 */

  --yh-brand: #8FAA9D;       /* 提亮以保证深底上的 AA 对比 */
  --yh-brand-hover: #A6BDB2;
  --yh-brand-soft: #2A3430;
  --yh-accent: #CE8A70;
  --yh-accent-soft: #342E29;

  --yh-success: #8FBF9E;
  --yh-success-soft: #24322A;
  --yh-warning: #D9B571;
  --yh-warning-soft: #332E23;
  --yh-danger: #E09A88;
  --yh-danger-soft: #332623;

  /* ★ 第 2 条要求：暗色模式字重悄悄细一档 */
  --yh-w-display: 600;
  --yh-w-title: 500;
  --yh-w-body: 300;

  --yh-shadow-1: 0 1px 2px rgba(0, 0, 0, .30);
  --yh-shadow-2: 0 6px 20px rgba(0, 0, 0, .38);
  --yh-shadow-3: 0 10px 34px rgba(0, 0, 0, .50);
}

/* ---------------------------------------------------------------------------
 * 2.1 暗色模式下的按钮文字色
 *
 * 说明：暗色下品牌绿 #8FAA9D 亮度较高，
 *   白字压在它上面只有 2.50:1（远低于 4.5，不合格）；
 *   而墨字 #171D1B 压在上面有 6.84:1（AAA）。
 *   所以暗色模式的主按钮改用「浅绿底配深墨字」，
 *   既达标又贴合宣纸墨色的品牌调性。
 *
 * ★ 注意：这里必须直接写 color 属性，不能只改 --bs-btn-color。
 *   因为 Bootstrap 在 .btn-primary 类上重新定义了 --bs-btn-color，
 *   而 .btn 基础规则用它取色 —— 只改 :root/[data-bs-theme] 下的同名变量
 *   会被 .btn-primary 的类级定义盖住，表现为「变量对了但文字仍是灰的」。
 * ------------------------------------------------------------------------- */
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: #171D1B;
  --bs-btn-bg: var(--yh-brand);
  --bs-btn-border-color: var(--yh-brand);
  --bs-btn-hover-color: #171D1B;
  --bs-btn-hover-bg: var(--yh-brand-hover);
  --bs-btn-hover-border-color: var(--yh-brand-hover);
  --bs-btn-active-color: #171D1B;
  --bs-btn-active-bg: var(--yh-brand-hover);
  --bs-btn-active-border-color: var(--yh-brand-hover);
  --bs-btn-disabled-color: #171D1B;
  --bs-btn-disabled-bg: var(--yh-brand);
  --bs-btn-disabled-border-color: var(--yh-brand);
  color: #171D1B;
}
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus,
[data-bs-theme="dark"] .btn-primary:active {
  color: #171D1B;
}
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--yh-brand);
  --bs-btn-border-color: var(--yh-brand);
  --bs-btn-hover-color: #171D1B;
  --bs-btn-hover-bg: var(--yh-brand);
  --bs-btn-hover-border-color: var(--yh-brand);
  --bs-btn-active-color: #171D1B;
  --bs-btn-active-bg: var(--yh-brand);
  --bs-btn-active-border-color: var(--yh-brand);
  color: var(--yh-brand);
}
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary:focus,
[data-bs-theme="dark"] .btn-outline-primary:active {
  color: #171D1B;
}
/* 暗色下危险/成功按钮同样改用深字 */
[data-bs-theme="dark"] .btn-danger {
  --bs-btn-color: #171D1B;
  --bs-btn-hover-color: #171D1B;
  color: #171D1B;
}
[data-bs-theme="dark"] .btn-danger:hover,
[data-bs-theme="dark"] .btn-danger:focus {
  color: #171D1B;
}
[data-bs-theme="dark"] .btn-success {
  --bs-btn-color: #171D1B;
  --bs-btn-hover-color: #171D1B;
  color: #171D1B;
}
[data-bs-theme="dark"] .btn-success:hover,
[data-bs-theme="dark"] .btn-success:focus {
  color: #171D1B;
}
/* 分页激活页码同理：浅绿底必须配深墨字 */
[data-bs-theme="dark"] .yh-page .page-item.active .page-link,
[data-bs-theme="dark"] .yh-page .page-item.active .page-link:hover,
[data-bs-theme="dark"] .yh-page .page-item.active .page-link:focus {
  color: #171D1B;
}

/* ---------------------------------------------------------------------------
 * 3. 基础底色与文字
 * ------------------------------------------------------------------------- */
body {
  background: var(--yh-surface-0);
  color: var(--yh-text-1);
  transition: background-color var(--yh-dur-base) var(--yh-ease-out),
              color var(--yh-dur-base) var(--yh-ease-out);
}

a { color: var(--yh-brand); }
a:hover { color: var(--yh-brand-hover); }

/* ---------------------------------------------------------------------------
 * 3.1 接管 Bootstrap 全局变量
 * 说明：Bootstrap 大量组件用 --bs-link-color、--bs-body-bg 等变量取色。
 *       不接管的话，分页、链接、焦点态会漏出默认蓝色，与品牌色打架。
 *       这里在两个主题下分别覆写，保证全站无一处默认蓝。
 * ------------------------------------------------------------------------- */
:root {
  --bs-body-bg: var(--yh-surface-0);
  --bs-body-color: var(--yh-text-1);
  --bs-link-color: var(--yh-brand);
  --bs-link-hover-color: var(--yh-brand-hover);
  --bs-border-color: var(--yh-surface-2);
  --bs-secondary-color: var(--yh-text-2);
  --bs-tertiary-color: var(--yh-text-3);
  --bs-tertiary-bg: var(--yh-surface-2);
  --bs-emphasis-color: var(--yh-text-1);
  --bs-secondary-bg: var(--yh-surface-2);
  --bs-tertiary-bg-rgb: 242, 238, 226;

  /* 分页 */
  --bs-pagination-color: var(--yh-text-2);
  --bs-pagination-bg: var(--yh-surface-1);
  --bs-pagination-border-color: var(--yh-surface-2);
  --bs-pagination-hover-color: var(--yh-text-1);
  --bs-pagination-hover-bg: var(--yh-surface-2);
  --bs-pagination-hover-border-color: var(--yh-surface-3);
  --bs-pagination-focus-color: var(--yh-text-1);
  --bs-pagination-focus-bg: var(--yh-surface-2);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(79, 107, 95, .18);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--yh-brand);
  --bs-pagination-active-border-color: var(--yh-brand);
  --bs-pagination-disabled-color: var(--yh-text-3);
  --bs-pagination-disabled-bg: var(--yh-surface-1);
  --bs-pagination-disabled-border-color: var(--yh-surface-2);

  /* 徽章 / 提示框 */
  --bs-badge-color: var(--yh-text-1);
  --bs-secondary-bg-rgb: 242, 238, 226;
}

[data-bs-theme="dark"] {
  --bs-body-bg: var(--yh-surface-0);
  --bs-body-color: var(--yh-text-1);
  --bs-link-color: var(--yh-brand);
  --bs-link-hover-color: var(--yh-brand-hover);
  --bs-border-color: var(--yh-surface-2);
  --bs-secondary-color: var(--yh-text-2);
  --bs-tertiary-color: var(--yh-text-3);
  --bs-tertiary-bg: var(--yh-surface-2);
  --bs-emphasis-color: var(--yh-text-1);
  --bs-secondary-bg: var(--yh-surface-2);
  --bs-tertiary-bg-rgb: 30, 38, 35;
  --bs-secondary-bg-rgb: 30, 38, 35;

  --bs-pagination-color: var(--yh-text-2);
  --bs-pagination-bg: var(--yh-surface-1);
  --bs-pagination-border-color: var(--yh-surface-2);
  --bs-pagination-hover-color: var(--yh-text-1);
  --bs-pagination-hover-bg: var(--yh-surface-2);
  --bs-pagination-hover-border-color: var(--yh-surface-3);
  --bs-pagination-focus-color: var(--yh-text-1);
  --bs-pagination-focus-bg: var(--yh-surface-2);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(143, 170, 157, .22);
  --bs-pagination-active-color: #171D1B;
  --bs-pagination-active-bg: var(--yh-brand);
  --bs-pagination-active-border-color: var(--yh-brand);
  --bs-pagination-disabled-color: var(--yh-text-3);
  --bs-pagination-disabled-bg: var(--yh-surface-1);
  --bs-pagination-disabled-border-color: var(--yh-surface-2);
}

/* 数字统一等宽，防止跳动时页面抽搐 */
.yh-num,
.yh-stat .num,
.yh-table td,
.yh-table th,
.yh-meta-time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---------------------------------------------------------------------------
 * 4. 前台：导航 / 卡片 / 侧栏 / 文章
 * ------------------------------------------------------------------------- */
.yh-nav {
  background: var(--yh-surface-1) !important;
  border-bottom: 0 !important;
  box-shadow: var(--yh-shadow-1);
}
.yh-nav .navbar-brand span {
  color: var(--yh-text-1);
  font-weight: 600;
  letter-spacing: 1px;
}
/* 品牌 logo：方标（正圆），高度 34px 时圆标正好填满，视觉重心合适 */
.yh-nav .navbar-brand img {
  height: 34px;
  width: 34px;
  object-fit: contain;
  border-radius: 50%;
}
.yh-nav .nav-link { color: var(--yh-text-2); }
.yh-nav .nav-link:hover,
.yh-nav .nav-link:focus { color: var(--yh-brand); }
.yh-nav .navbar-toggler-icon { filter: none; }

/* 导航搜索框：site.css 固定 232px，窄一点时「搜索」按钮会被压扁折行。
   这里放宽到 250px，并禁止按钮文字换行。 */
.yh-nav-search { width: 250px; }
.yh-nav-search .btn { white-space: nowrap; }
@media (max-width: 991.98px) {
  .yh-nav-search { width: 100%; }
}

[data-bs-theme="dark"] .yh-nav .navbar-toggler-icon {
  filter: invert(1) grayscale(100%);
}

/* 卡片：去边框，靠 surface-1 与页面底 surface-0 的层差区分 */
.yh-card {
  background: var(--yh-surface-1);
  border: 0;
  border-radius: 14px;
  box-shadow: var(--yh-shadow-1);
  transition: box-shadow var(--yh-dur-base) var(--yh-ease-out),
              transform var(--yh-dur-base) var(--yh-ease-out);
}
.yh-card:hover {
  box-shadow: var(--yh-shadow-2);
  transform: translateY(-2px);
}
.yh-card-title { font-weight: var(--yh-w-title); }
.yh-card-title a { color: var(--yh-text-1); }
.yh-card-title a:hover { color: var(--yh-brand); }
.yh-card-summary { color: var(--yh-text-2); }
.yh-card-meta { color: var(--yh-text-3); }
.yh-dot { color: var(--yh-text-3); }

/* 侧栏 */
.yh-side {
  background: var(--yh-surface-1);
  border: 0;
  border-radius: 14px;
  box-shadow: var(--yh-shadow-1);
}
.yh-side-title {
  color: var(--yh-text-1);
  font-weight: var(--yh-w-title);
  border-left-color: var(--yh-brand);
}
.yh-side-list li { border-bottom-color: var(--yh-surface-2); }
.yh-side-list a { color: var(--yh-text-2); }
.yh-side-list a:hover { color: var(--yh-brand); }

/* 文章正文 */
.yh-article {
  background: var(--yh-surface-1);
  border: 0;
  border-radius: 14px;
  box-shadow: var(--yh-shadow-1);
}
.yh-article-title {
  color: var(--yh-text-1);
  font-weight: var(--yh-w-display);
}
.yh-article-meta {
  color: var(--yh-text-3);
  border-bottom: 0;
  border-bottom: 1px solid var(--yh-surface-2);
}
.yh-content { color: var(--yh-text-1); }
.yh-content h1, .yh-content h2, .yh-content h3, .yh-content h4 {
  color: var(--yh-text-1);
  font-weight: var(--yh-w-title);
}
.yh-content blockquote {
  color: var(--yh-text-2);
  background: var(--yh-surface-2);
  border-left-color: var(--yh-brand);
}
.yh-content table th, .yh-content table td { border-color: var(--yh-surface-2); }
.yh-content table th { background: var(--yh-surface-2); }

/* 标签 */
.yh-tag {
  color: var(--yh-brand);
  background: var(--yh-brand-soft);
  border: 0;
}
a.yh-tag:hover { background: var(--yh-brand); color: #fff; }

/* 会员 chip */
.yh-member-chip { background: var(--yh-brand-soft); color: var(--yh-brand); }

/* 页脚 */
.yh-footer {
  color: var(--yh-text-3);
  border-top: 0;
  background: var(--yh-surface-2);
}

/* 代码块顶栏 */
.yh-code-bar { background: var(--yh-surface-3); }

/* ---------------------------------------------------------------------------
 * 4.1 硬编码色的暗色覆盖
 *
 * 说明：site.css 里有 17 处写死的颜色（旧蓝灰体系），变量重映射管不到，
 *       必须逐条覆盖，否则暗色下会出现「白底浅字」或「亮蓝块」。
 *       下列选择器与 site.css 中的规则一一对应。
 * ------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  /* 标签（原 #eef4ff 底 / #d8e6ff 边） */
  .yh-tag {
    background: var(--yh-brand-soft);
    color: var(--yh-brand);
    border-color: transparent;
  }
  a.yh-tag:hover { background: var(--yh-brand); color: #171D1B; }

  /* 会员标识（原 #eef4ff 底 / #d8e6ff 边） */
  .yh-member-chip {
    background: var(--yh-brand-soft);
    color: var(--yh-brand);
    border-color: transparent;
  }

  /* 引用块（原 #f7f9fc 底 / #cfe0f8 左条） */
  .yh-content blockquote {
    background: var(--yh-surface-2);
    color: var(--yh-text-2);
    border-left-color: var(--yh-brand);
  }

  /* 正文表格表头（原 #f3f5f8） */
  .yh-content table th {
    background: var(--yh-surface-2);
    color: var(--yh-text-1);
  }
  .yh-content table th, .yh-content table td { border-color: var(--yh-surface-2); }

  /* 行内代码（原 #f2f3f5 底 / #c7254e 字） */
  .yh-content code {
    background: var(--yh-surface-2);
    color: #E29A8A;
  }

  /* 空态（原 #d5dae1 虚线边） */
  .yh-empty {
    background: var(--yh-surface-1);
    border-color: var(--yh-surface-3);
    color: var(--yh-text-2);
  }

  /* 回复区左边条（原 #cfe0f8） */
  .yh-msg-reply,
  .yh-comment-reply { border-left-color: var(--yh-brand); }

  /* 回复正文（原 #3a4150 深灰，暗色下需变浅） */
  .yh-reply-text,
  .yh-comment-reply-text { color: var(--yh-text-1); }

  /* 回复标签（原蓝底白字） */
  .yh-reply-tag {
    background: var(--yh-brand-soft);
    color: var(--yh-brand);
  }

  /* 页脚（原 #fff 底） */
  .yh-footer {
    background: var(--yh-surface-2);
    color: var(--yh-text-3);
    border-top-color: var(--yh-surface-2);
  }

  /* 文章分隔线与归档 */
  .yh-comments,
  .yh-content-page,
  .yh-adj { border-color: var(--yh-surface-2); }
  .yh-archive li { border-bottom-color: var(--yh-surface-2); }

  /* 面包屑 */
  .yh-crumb { color: var(--yh-text-2); }

  /* 代码块保持黑底（本就深色），但边框要跟随 */
  .yh-code { border-color: #2F3A36; }
  .yh-code-hd { border-bottom-color: #333; }
}

/* ---------------------------------------------------------------------------
 * 4.2 弱化信息的统一灰阶
 *
 * 说明：site.css 里 .yh-msg-ip / .yh-comment-area 写死了蓝灰 #8b93a1，
 *   在米色底上只有 2.75:1（远低于 4.5），属于「看不清」的同类问题。
 *   这里统一改用墨绿灰阶，与 --yh-text-3 同族。
 * ------------------------------------------------------------------------- */
.yh-msg-ip,
.yh-comment-area {
  color: var(--yh-text-3);
}

/* 页脚文字同样偏淡，提到次要层级 */
.yh-footer {
  color: var(--yh-text-2);
}
.yh-footer .text-muted {
  color: var(--yh-text-3) !important;
}

/* ---------------------------------------------------------------------------
 * 5. 表单与按钮
 * ------------------------------------------------------------------------- */
.form-control,
.form-select {
  background: var(--yh-surface-3);
  border: 1px solid transparent;
  color: var(--yh-text-1);
  border-radius: 8px;
}
.form-control:focus,
.form-select:focus {
  background: var(--yh-surface-1);
  border-color: var(--yh-brand);
  color: var(--yh-text-1);
  box-shadow: 0 0 0 3px rgba(79, 107, 95, .16);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  box-shadow: 0 0 0 3px rgba(143, 170, 157, .20);
}
.form-control::placeholder { color: var(--yh-text-3); }
.form-label { color: var(--yh-text-2); }

.btn-primary {
  --bs-btn-bg: var(--yh-brand);
  --bs-btn-border-color: var(--yh-brand);
  --bs-btn-hover-bg: var(--yh-brand-hover);
  --bs-btn-hover-border-color: var(--yh-brand-hover);
  --bs-btn-active-bg: var(--yh-brand-hover);
  --bs-btn-active-border-color: var(--yh-brand-hover);
  --bs-btn-disabled-bg: var(--yh-brand);
  --bs-btn-disabled-border-color: var(--yh-brand);
}
.btn-outline-primary {
  --bs-btn-color: var(--yh-brand);
  --bs-btn-border-color: var(--yh-brand);
  --bs-btn-hover-bg: var(--yh-brand);
  --bs-btn-hover-border-color: var(--yh-brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--yh-brand);
  --bs-btn-active-border-color: var(--yh-brand);
}
.btn-outline-secondary {
  --bs-btn-color: var(--yh-text-2);
  --bs-btn-border-color: var(--yh-surface-3);
  --bs-btn-hover-bg: var(--yh-surface-3);
  --bs-btn-hover-border-color: var(--yh-surface-2);
  --bs-btn-hover-color: var(--yh-text-1);
  --bs-btn-active-bg: var(--yh-surface-2);
  --bs-btn-active-border-color: var(--yh-surface-2);
  --bs-btn-active-color: var(--yh-text-1);
}
.btn-light {
  --bs-btn-bg: var(--yh-surface-3);
  --bs-btn-border-color: var(--yh-surface-3);
  --bs-btn-hover-bg: var(--yh-surface-2);
  --bs-btn-hover-border-color: var(--yh-surface-2);
  --bs-btn-color: var(--yh-text-2);
  --bs-btn-hover-color: var(--yh-text-1);
}
.btn-danger {
  --bs-btn-bg: var(--yh-danger);
  --bs-btn-border-color: var(--yh-danger);
  --bs-btn-hover-bg: #8E4536;
  --bs-btn-hover-border-color: #8E4536;
}
.btn-link { color: var(--yh-brand); }

/* 危险操作按钮：弱化描边，避免在米色底上过度抢眼。
   悬停时才显出朱红实心，符合「平时安静、操作时才强调」的原则。 */
.btn-outline-danger {
  --bs-btn-color: var(--yh-danger);
  --bs-btn-border-color: var(--yh-danger-soft);
  --bs-btn-hover-bg: var(--yh-danger);
  --bs-btn-hover-border-color: var(--yh-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--yh-danger);
  --bs-btn-active-border-color: var(--yh-danger);
  --bs-btn-active-color: #fff;
}
.btn-outline-success {
  --bs-btn-color: var(--yh-success);
  --bs-btn-border-color: var(--yh-success-soft);
  --bs-btn-hover-bg: var(--yh-success);
  --bs-btn-hover-border-color: var(--yh-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--yh-success);
  --bs-btn-active-border-color: var(--yh-success);
  --bs-btn-active-color: #fff;
}

/* ---------------------------------------------------------------------------
 * 6. 后台：侧栏 / 顶栏 / 面板 / 统计卡 / 表格
 * ------------------------------------------------------------------------- */
.yh-admin-body { background: var(--yh-surface-0); }

.yh-admin-side {
  background: var(--yh-surface-2);
  border-right: 0;
  box-shadow: var(--yh-shadow-1);
}
.yh-admin-side .brand {
  color: var(--yh-text-1);
  font-weight: var(--yh-w-title);
  border-bottom: 0;
  border-bottom: 1px solid var(--yh-surface-3);
}
.yh-admin-side a {
  color: var(--yh-text-2);
  border-left: 0;
  border-radius: 9px;
  transition: background-color var(--yh-dur-fast) var(--yh-ease-out),
              color var(--yh-dur-fast) var(--yh-ease-out);
}
.yh-admin-side a:hover {
  background: var(--yh-surface-1);
  color: var(--yh-text-1);
}
/* 激活项：墨绿实心块 */
.yh-admin-side a.active {
  background: var(--yh-brand);
  color: #fff;
  border-left-color: transparent;
  font-weight: var(--yh-w-body);
}
[data-bs-theme="dark"] .yh-admin-side a.active { color: #171D1B; }

.yh-admin-top {
  background: var(--yh-surface-1);
  border-bottom: 0;
  box-shadow: var(--yh-shadow-1);
  color: var(--yh-text-1);
}
.yh-admin-top .fw-semibold { font-weight: var(--yh-w-title); }
.yh-admin-top .text-muted { color: var(--yh-text-3) !important; }
.yh-admin-main { padding: 24px 28px; }

/* 面板与统计卡：无边框，靠层差 */
.yh-panel {
  background: var(--yh-surface-1);
  border: 0;
  border-radius: 14px;
  box-shadow: var(--yh-shadow-1);
}
.yh-panel-title {
  color: var(--yh-text-1);
  font-weight: var(--yh-w-title);
}
.yh-stat {
  background: var(--yh-surface-1);
  border: 0;
  border-radius: 14px;
  box-shadow: var(--yh-shadow-1);
}
.yh-stat .num {
  color: var(--yh-text-1);
  font-weight: var(--yh-w-display);
  letter-spacing: -.5px;
}
.yh-stat .lbl { color: var(--yh-text-2); }

/* 表格：斑马纹用 1% 层差替代边框线 */
.yh-table { color: var(--yh-text-1); }
.yh-table thead th,
.yh-table th.yh-th {
  background: var(--yh-surface-2);
  color: var(--yh-text-2);
  font-weight: var(--yh-w-title);
  border-bottom: 0;
  border-bottom: 1px solid var(--yh-surface-3);
  white-space: nowrap;
}
.yh-table tbody td { border-bottom: 0; border-bottom: 1px solid var(--yh-surface-2); }
.yh-table tbody tr:nth-child(even) { background: var(--yh-surface-2); }
.yh-table tbody tr:hover { background: var(--yh-brand-soft); }
.yh-table .text-muted { color: var(--yh-text-3) !important; }

/* 表格内的长文本列：单行截断，避免中文被挤成竖排一字一行 */
.yh-table .yh-truncate {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 鼠标悬停时用 title 提示完整内容（属性由模板输出） */
.yh-table .yh-truncate:hover { cursor: help; }

/* 登录页 */
.yh-login {
  background: var(--yh-surface-1);
  border: 0;
  border-radius: 16px;
  box-shadow: var(--yh-shadow-3);
}
/* 登录页 logo：方标裁成圆形，与导航栏保持一致的品牌呈现 */
.yh-login img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 50%;
}

/* 卡片式列表块（留言本、评论管理）：替代 Bootstrap 的 .border.rounded */
.yh-card-block {
  background: var(--yh-surface-1);
  border: 0;
  border-radius: 14px;
  box-shadow: var(--yh-shadow-1);
  padding: 1rem;
}
[data-bs-theme="dark"] .yh-card-block { background: var(--yh-surface-1); }

/* 引用块（留言/评论正文）：左侧色条替代完整边框 */
.yh-quote-block {
  border-left: 3px solid var(--yh-brand);
  padding-left: 1rem;
  color: var(--yh-text-1);
  background: transparent;
}
.yh-quote-block p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
 * 7. 交互反馈组件外观
 * ------------------------------------------------------------------------- */
.tooltip .tooltip-inner {
  background: var(--yh-text-1);
  color: var(--yh-surface-0);
  border-radius: 7px;
  font-size: 12px;
  padding: 6px 10px;
  box-shadow: var(--yh-shadow-2);
}
.tooltip .tooltip-arrow::before { border-top-color: var(--yh-text-1); }

.yh-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1090;
  background: var(--yh-text-1);
  color: var(--yh-surface-0);
  border: 0;
  border-radius: 10px;
  box-shadow: var(--yh-shadow-3);
}
.yh-toast .toast-body { font-size: 13px; }
.yh-toast .yh-toast-icon { font-weight: 700; }

.yh-alert {
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.yh-alert-warning { background: var(--yh-warning-soft); color: #6B5228; }
.yh-alert-danger  { background: var(--yh-danger-soft);  color: #8A4234; }
.yh-alert-info    { background: var(--yh-brand-soft);   color: var(--yh-brand-hover); }
.yh-alert .btn-close { opacity: .5; }

[data-bs-theme="dark"] .yh-alert-warning { color: #E7CFA0; }
[data-bs-theme="dark"] .yh-alert-danger  { color: #EBA894; }

.modal-content {
  background: var(--yh-surface-1);
  border: 0;
  border-radius: 14px;
  color: var(--yh-text-1);
  box-shadow: var(--yh-shadow-3);
}
.modal-header, .modal-footer { border-color: var(--yh-surface-2); }
.modal-backdrop.show { opacity: .45; }

/* ---------------------------------------------------------------------------
 * 6.1 分页
 * 说明：Bootstrap 把 --bs-pagination-* 定义在 .pagination 类上，
 *       优先级高于 :root 里的同名变量，所以在 :root 覆盖无效。
 *       这里用项目自带的 .yh-page 类做作用域覆盖，优先级高于 .pagination。
 * ------------------------------------------------------------------------- */
.yh-page {
  --bs-pagination-color: var(--yh-text-2);
  --bs-pagination-bg: var(--yh-surface-1);
  --bs-pagination-border-color: var(--yh-surface-2);
  --bs-pagination-hover-color: var(--yh-text-1);
  --bs-pagination-hover-bg: var(--yh-surface-2);
  --bs-pagination-hover-border-color: var(--yh-surface-3);
  --bs-pagination-focus-color: var(--yh-text-1);
  --bs-pagination-focus-bg: var(--yh-surface-2);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(79, 107, 95, .18);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--yh-brand);
  --bs-pagination-active-border-color: var(--yh-brand);
  --bs-pagination-disabled-color: var(--yh-text-3);
  --bs-pagination-disabled-bg: var(--yh-surface-1);
  --bs-pagination-disabled-border-color: var(--yh-surface-2);
}
[data-bs-theme="dark"] .yh-page {
  --bs-pagination-active-color: #171D1B;
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(143, 170, 157, .22);
}
.yh-page .page-link { border-radius: 8px; }

/* 分页文字色：site.css 里的
     .yh-page .page-link { color: var(--yh-text); border-color: var(--yh-border); }
     .yh-page .active .page-link { background: var(--yh-primary); ... }
   这两条会盖住变量（且 .active 那条特异性更高）。
   所以这里用同等或更高特异性的选择器显式写死，保证两个主题都清晰可读。

   注意：.page-item .page-link 这条不能写成通配，否则会把激活态的颜色也覆盖掉，
   所以激活态单独用更靠后的规则处理。 */
.yh-page .page-link {
  color: var(--yh-text-2);
  background-color: var(--yh-surface-1);
  border-color: var(--yh-surface-2);
}
.yh-page .page-item:not(.active) .page-link:hover,
.yh-page .page-item:not(.active) .page-link:focus {
  color: var(--yh-text-1);
  background-color: var(--yh-surface-2);
  border-color: var(--yh-surface-3);
}
.yh-page .page-item.disabled .page-link,
.yh-page .page-item.disabled .page-link:hover {
  color: var(--yh-text-3);
  background-color: var(--yh-surface-1);
  border-color: var(--yh-surface-2);
  opacity: 1;
}

/* Bootstrap 5.3.3 对激活态分页写死了 background-color:#0d6efd（不走变量），
   所以变量覆盖对它无效，必须用类选择器直接盖。
   这条必须放在普通态规则之后，否则会被上面的 color 覆盖。 */
.yh-page .page-item.active .page-link,
.yh-page .page-item.active .page-link:hover,
.yh-page .page-item.active .page-link:focus {
  background-color: var(--yh-brand);
  border-color: var(--yh-brand);
  color: #fff;
}
[data-bs-theme="dark"] .yh-page .page-item.active .page-link,
[data-bs-theme="dark"] .yh-page .page-item.active .page-link:hover,
[data-bs-theme="dark"] .yh-page .page-item.active .page-link:focus {
  color: #171D1B;
}
.yh-page .page-item .page-link:focus {
  box-shadow: 0 0 0 3px rgba(79, 107, 95, .18);
  z-index: 3;
}
[data-bs-theme="dark"] .yh-page .page-item .page-link:focus {
  box-shadow: 0 0 0 3px rgba(143, 170, 157, .22);
}

/* 徽章：Bootstrap 的 bg-success/bg-warning 在暗底上过于刺眼，
   改为「浅底 + 同色文字」的柔和样式，与整体分层一致。 */.badge {
  font-weight: 500;
  border-radius: 999px;
  padding: .3em .7em;
}
.bg-success {
  background-color: var(--yh-success-soft) !important;
  color: var(--yh-success) !important;
}
.bg-warning {
  background-color: var(--yh-warning-soft) !important;
  color: var(--yh-warning) !important;
}
.bg-danger {
  background-color: var(--yh-danger-soft) !important;
  color: var(--yh-danger) !important;
}
.bg-primary {
  background-color: var(--yh-brand-soft) !important;
  color: var(--yh-brand) !important;
}
.bg-secondary {
  background-color: var(--yh-surface-3) !important;
  color: var(--yh-text-2) !important;
}
/* 徽章内若还带 Bootstrap 的 text-dark（模板里的历史写法），
   颜色应跟随徽章自身，不能被下面的 .text-dark 覆盖掉 */
.badge.text-dark { color: inherit !important; }
.text-dark { color: var(--yh-text-1) !important; }
.text-muted { color: var(--yh-text-3) !important; }

/* Popconfirm 气泡 */
.yh-popover {
  background: var(--yh-surface-1);
  border: 0;
  border-radius: 12px;
  color: var(--yh-text-1);
  box-shadow: var(--yh-shadow-3);
  max-width: 280px;
}
.yh-popover .popover-header { background: transparent; color: var(--yh-text-1); }
.yh-popover .popover-body { color: var(--yh-text-2); }
.yh-popconfirm-text { color: var(--yh-text-1); font-size: 13px; }
.yh-popconfirm-anchor { position: relative; }

/* 主题切换按钮 */
.yh-theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 0;
  background: var(--yh-surface-3);
  color: var(--yh-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--yh-dur-fast) var(--yh-ease-out);
}
.yh-theme-toggle:hover { background: var(--yh-surface-2); color: var(--yh-text-1); }
.yh-theme-toggle:focus-visible { outline: 2px solid var(--yh-brand); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
 * 8. 动效性格
 * ------------------------------------------------------------------------- */
/* 拖拽：瞬间到位，零拖影 */
.yh-drop-target { transition: none !important; }

/* 点赞：Q 弹回弹（唯一允许超调的动效） */
.yh-like {
  transition: transform var(--yh-dur-bounce) var(--yh-ease-bounce);
  transform-origin: center bottom;
}
.yh-like:active { transform: scale(1.35); }
.yh-like.is-liked { color: var(--yh-accent); }

/* ---------------------------------------------------------------------------
 * 11. 后台响应式适配
 *
 * 说明：后台原先用 col-md-2 + col-md-10 栅格，Bootstrap 在 <768px 时
 *       会让两列都变 100% 宽 —— 侧栏整个竖着堆到主区上方，
 *       手机上要滚过 10 个菜单项才看得到内容，实测主区被推到 3000px 以下。
 *
 * 本节按三个断点处理（与用户确认的方案一致）：
 *   ≥992px   桌面：现状不变
 *   768~991  平板：保留侧栏，表格横向滚动，列不再被挤成竖排
 *   <768px   手机：侧栏收成抽屉（汉堡按钮 + 遮罩），主区占满
 * ------------------------------------------------------------------------- */

/* 桌面端默认：汉堡按钮隐藏、遮罩不参与布局 */
.yh-admin-burger {
  display: none;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: var(--yh-surface-3);
  color: var(--yh-text-1);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.yh-admin-burger:hover { background: var(--yh-surface-2); }
.yh-admin-burger:focus-visible { outline: 2px solid var(--yh-brand); outline-offset: 2px; }

.yh-admin-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(23, 29, 27, .45);
  z-index: 1035;
}
.yh-admin-scrim[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
 * 11.1 平板端 768~991px —— 保留侧栏，表格横向滚动
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* 侧栏不该被压到 130px：给一个固定宽度并允许标题不折行。
     ★ 关键：Bootstrap 有 .row > * { flex-shrink:0; width:100%; max-width:100% }
       这条规则的特异性是 (0,1,1)，比裸的 .yh-admin-side (0,1,0) 更高 ——
       所以必须写成 .row > .yh-admin-side (0,2,1) 才能压过它。

     ★ 另一个坑：.row 是 flex-wrap:wrap，两列宽度之和一旦超过 100% 就会换行堆叠。
       侧栏 200px + 主区 flex:1 理论上够，但 .row 的 gutter（左右各 -12px）
       会让实际占位多出 24px，从而触发换行。
       解决：平板端把 .row 的横向 gutter 归零，列的 padding 用 0 补偿。 */
  .row > .yh-admin-side {
    flex: 0 0 200px !important;
    width: 200px !important;
    max-width: 200px !important;
    padding-left: 12px;
    padding-right: 0;
  }
  .row > .yh-admin-col {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    /* ★ flex item 默认 min-width:auto，会拒绝收缩到内容宽度以下。
       主区内容是表格（min-width:720px），不设 min-width:0 的话
       主区会被撑到 720px，和侧栏 200px 相加超过视口 → 触发行换行堆叠。
       这是 flex 布局里最经典的一个坑。 */
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
  }
  .yh-admin-side .brand {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 主区内边距收窄，给表格留出更多宽度 */
  .yh-admin-main { padding: 18px 16px; }
  .yh-admin-top { padding: 0 16px; }

  /* 表格横向滚动保护：列不被压扁成竖排 */
  .yh-admin-main .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .yh-admin-main .table-responsive::-webkit-scrollbar { height: 8px; }
  .yh-admin-main .table-responsive::-webkit-scrollbar-thumb {
    background: var(--yh-surface-3);
    border-radius: 4px;
  }
  .yh-admin-main .table { min-width: 720px; }
  .yh-admin-main .table th,
  .yh-admin-main .table td { white-space: nowrap; }
  .yh-admin-main .table td.yh-truncate {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---------------------------------------------------------------------------
 * 11.2 手机端 <768px —— 侧栏抽屉化
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* 侧栏变成固定抽屉，默认移出视口 */
  .row > .yh-admin-side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 264px;
    max-width: 84vw;
    flex: 0 0 auto !important;
    z-index: 1040;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform 240ms var(--yh-ease-out);
    box-shadow: var(--yh-shadow-3);
    padding-top: 20px;
  }
  .yh-admin-body.yh-side-open .yh-admin-side {
    transform: translateX(0);
  }
  /* 主区占满全部宽度 */
  .row > .yh-admin-col {
    flex: 1 1 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;          /* 同上：允许收缩，表格在滚动容器内自己滚 */
    padding-left: 12px;
    padding-right: 12px;
  }
  /* 汉堡按钮只在手机端出现 */
  .yh-admin-burger { display: inline-flex; }
  .yh-admin-scrim:not([hidden]) { display: block; }

  /* 顶栏：标题可省略，管理员文字在极窄屏隐藏 */
  .yh-admin-top {
    padding: 0 14px;
    gap: 10px;
  }
  .yh-admin-top .fw-semibold {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .yh-admin-user { display: none; }
  .yh-admin-main { padding: 16px 14px 24px; }

  /* 统计卡：手机端两列（原来 col-6 col-md-3 在窄屏已是 50%，保持并收窄间距） */
  .yh-admin-main .row { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
  .yh-stat { padding: 14px; }
  .yh-stat .num { font-size: 24px; }

  /* 面板与表格：容器可横向滑动，列不被压扁 */
  .yh-panel { padding: 14px; }
  .yh-admin-main .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* 让滚动条在桌面端也可见，手机端隐藏以免占空间 */
    scrollbar-width: thin;
  }
  .yh-admin-main .table-responsive::-webkit-scrollbar { height: 8px; }
  .yh-admin-main .table-responsive::-webkit-scrollbar-thumb {
    background: var(--yh-surface-3);
    border-radius: 4px;
  }
  /* 表格最小宽度：防止中文被挤成竖排一字一行 */
  .yh-admin-main .table { min-width: 720px; }
  .yh-admin-main .table th,
  .yh-admin-main .table td { white-space: nowrap; }
  .yh-admin-main .table td.yh-truncate {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 表单：按钮组在窄屏竖排，按钮撑满 */
  .yh-admin-main .btn { min-height: 36px; }
  .yh-admin-main form .d-flex.gap-2 { flex-wrap: wrap; }
  .yh-admin-main form .d-flex.gap-2 > .btn { flex: 1 1 auto; }

  /* 复选框：Bootstrap 默认 15×15px，触摸目标过小，放大到 24px（满足最小触摸尺寸） */
  .yh-admin-main .form-check-input {
    width: 24px;
    height: 24px;
    margin-top: 0;
    flex-shrink: 0;
    cursor: pointer;
  }
  .yh-admin-main .form-check-label {
    padding-left: 10px;
    cursor: pointer;
  }

  /* 编辑器（UEditor）在窄屏需要撑满 */
  .yh-admin-main .edui-editor,
  .yh-admin-main .edui-editor-iframeholder { width: 100% !important; }
}

/* ---------------------------------------------------------------------------
 * 11.3 超窄屏 <360px —— 进一步压缩
 * ------------------------------------------------------------------------- */
@media (max-width: 359.98px) {
  .yh-admin-main { padding: 12px 10px 20px; }
  .yh-admin-top { padding: 0 10px; }
  .yh-stat { padding: 12px; }
  .yh-stat .num { font-size: 22px; }
  .yh-stat .lbl { font-size: 12px; }
}

/* ---------------------------------------------------------------------------
 * 12. 无障碍
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .yh-like:active { transform: none; }
  .yh-card:hover { transform: none; }
}

/* Windows 高对比度模式：纯色阶分层会失效，补回边框保证可读 */
@media (forced-colors: active) {
  .yh-card, .yh-article, .yh-side, .yh-panel, .yh-stat,
  .yh-alert, .modal-content, .yh-popover {
    border: 1px solid CanvasText;
  }
}

/* ---------------------------------------------------------------------------
 * 10. 打印：暗色模式下也必须是白底黑字
 * ------------------------------------------------------------------------- */
@media print {
  .yh-nav, .yh-footer, .yh-admin-side, .yh-admin-top, .yh-theme-toggle { display: none !important; }
  .yh-admin-body, .yh-card, .yh-article, .yh-side, .yh-panel, .yh-stat {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  [data-bs-theme="dark"] {
    --yh-surface-0: #fff; --yh-surface-1: #fff; --yh-surface-2: #f4f4f4;
    --yh-text-1: #000; --yh-text-2: #333; --yh-text-3: #666;
  }
}