/* ============================================================================
 * site.css —— 全站自定义样式（前台 + 后台共用）
 * 用途：在 Bootstrap 5 基础上做站点主题；所有自定义类统一加 yh- 前缀，
 *       避免与 Bootstrap 自带类冲突。配色取自站点 logo 的蓝青色系。
 * ========================================================================== */

:root {
  --yh-primary: #1668dc;          /* 主色：链接、按钮、强调 */
  --yh-primary-dark: #0f4fa8;     /* 主色深色：hover 态 */
  --yh-text: #1f2329;             /* 正文文字 */
  --yh-text-muted: #6b7280;       /* 次要文字 */
  --yh-border: #e6e8eb;           /* 边框 */
  --yh-bg: #f6f7f9;               /* 页面背景 */
  --yh-card-bg: #ffffff;          /* 卡片背景 */
  --yh-code-bg: #1e1e1e;          /* 代码块背景（黑底） */
  --yh-code-bar: #2b2b2b;         /* 代码块顶栏 */
}

body {
  background: var(--yh-bg);
  color: var(--yh-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-size: 15px;
  line-height: 1.75;
}

a { color: var(--yh-primary); text-decoration: none; }
a:hover { color: var(--yh-primary-dark); }

/* ---------- 导航 ---------- */
.yh-nav { background: #fff !important; }
.yh-nav .navbar-brand span { letter-spacing: .5px; }
.yh-nav .nav-link { color: var(--yh-text); }
.yh-nav .nav-link:hover { color: var(--yh-primary); }

/* 导航搜索框：强制输入框与按钮同一行。
   不加这几条时，菜单项一多可用宽度不够，按钮会被挤到第二行。 */
.yh-nav .navbar-nav .nav-item { display: flex; align-items: center; }
.yh-nav-search { flex-wrap: nowrap; width: 232px; }
.yh-nav-search .form-control { min-width: 0; }   /* 允许输入框被压缩，否则撑破容器导致换行 */
@media (max-width: 991.98px) {
  /* 折叠菜单里导航变纵向，搜索框改为占满一行 */
  .yh-nav-search { width: 100%; margin: 10px 0 4px; }
}

/* ---------- 主体容器 ---------- */
.yh-main { padding-top: 28px; padding-bottom: 40px; min-height: calc(100vh - 220px); }

/* ---------- 文章卡片 ---------- */
.yh-card {
  background: var(--yh-card-bg);
  border: 1px solid var(--yh-border);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 16px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.yh-card:hover { box-shadow: 0 6px 20px rgba(15, 35, 70, .08); transform: translateY(-1px); }
.yh-card-title { font-size: 19px; font-weight: 600; margin: 0 0 8px; line-height: 1.5; }
.yh-card-title a { color: var(--yh-text); }
.yh-card-title a:hover { color: var(--yh-primary); }
.yh-card-summary { color: var(--yh-text-muted); font-size: 14px; margin: 0 0 10px; }
.yh-card-meta { color: var(--yh-text-muted); font-size: 13px; }
.yh-dot { margin: 0 6px; color: #c9ced6; }

/* ---------- 标签 ---------- */
.yh-tag {
  display: inline-block;
  padding: 1px 9px;
  margin: 0 4px 4px 0;
  font-size: 12px;
  color: var(--yh-primary);
  background: #eef4ff;
  border: 1px solid #d8e6ff;
  border-radius: 999px;
  line-height: 1.7;
}
a.yh-tag:hover { background: var(--yh-primary); color: #fff; border-color: var(--yh-primary); }
/* 标签徽章的容器（文章卡片/详情页里包住多个 .yh-tag，保证换行时纵向不挤） */
.yh-tags { display: inline; }
.yh-cloud .yh-tag em { font-style: normal; opacity: .65; font-size: 11px; }

/* ---------- 侧边栏 ---------- */
.yh-side {
  background: var(--yh-card-bg);
  border: 1px solid var(--yh-border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.yh-side-title { font-size: 15px; font-weight: 600; margin: 0 0 10px; padding-left: 9px; border-left: 3px solid var(--yh-primary); line-height: 1.2; }
.yh-side-list { list-style: none; padding: 0; margin: 0; }
.yh-side-list li { padding: 6px 0; border-bottom: 1px dashed var(--yh-border); font-size: 14px; }
.yh-side-list li:last-child { border-bottom: 0; }
.yh-side-list a { color: var(--yh-text); }
.yh-side-list a:hover { color: var(--yh-primary); }

/* ---------- 文章详情 ---------- */
.yh-article {
  background: var(--yh-card-bg);
  border: 1px solid var(--yh-border);
  border-radius: 10px;
  padding: 28px 32px;
}
.yh-article-title { font-size: 26px; font-weight: 700; line-height: 1.45; margin: 0 0 12px; }
.yh-article-meta { color: var(--yh-text-muted); font-size: 13px; padding-bottom: 14px; border-bottom: 1px solid var(--yh-border); margin-bottom: 20px; }

/* 正文排版 */
.yh-content { font-size: 15.5px; line-height: 1.9; word-break: break-word; }
.yh-content img { max-width: 100%; height: auto; border-radius: 6px; }
.yh-content h1, .yh-content h2, .yh-content h3, .yh-content h4 { font-weight: 600; margin: 22px 0 10px; line-height: 1.5; }
.yh-content h2 { font-size: 21px; }
.yh-content h3 { font-size: 18px; }
.yh-content p { margin: 0 0 14px; }
.yh-content blockquote {
  margin: 16px 0; padding: 10px 16px; color: var(--yh-text-muted);
  background: #f7f9fc; border-left: 4px solid #cfe0f8; border-radius: 0 6px 6px 0;
}
.yh-content table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.yh-content table th, .yh-content table td { border: 1px solid var(--yh-border); padding: 7px 10px; }
.yh-content table th { background: #f3f5f8; }
.yh-content code { background: #f2f3f5; color: #c7254e; padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.yh-content video { max-width: 100%; border-radius: 6px; }

/* 正文分页条 */
.yh-content-page { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--yh-border); }

/* 上下篇 */
.yh-adj { margin-top: 16px; font-size: 14px; padding: 0 4px; }

/* ---------- 代码块：黑底白字 + 语言标识 + 复制按钮 ---------- */
.yh-code {
  margin: 18px 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--yh-code-bg);
  border: 1px solid #2f2f2f;
}
.yh-code-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px; background: var(--yh-code-bar); border-bottom: 1px solid #333;
}
.yh-code-lang {
  color: #9aa4b2; font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.yh-code-copy {
  border: 1px solid #4a4a4a; background: transparent; color: #cfd6df;
  font-size: 12px; line-height: 1; padding: 4px 10px; border-radius: 4px; cursor: pointer;
  transition: all .15s ease;
}
.yh-code-copy:hover { background: #3a3a3a; color: #fff; }
.yh-code-copy.is-done { color: #7ee787; border-color: #2ea043; }
.yh-code-pre { margin: 0 !important; padding: 14px 16px !important; background: transparent !important; overflow: auto; }
.yh-code-pre code {
  background: transparent !important; color: #e6edf3 !important;
  padding: 0 !important; font-size: 13px !important; line-height: 1.7 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  white-space: pre;
}

/* ---------- 分页 ---------- */
.yh-page { margin-top: 20px; }
.yh-page .page-link { color: var(--yh-text); border-color: var(--yh-border); }
.yh-page .active .page-link { background: var(--yh-primary); border-color: var(--yh-primary); }

/* ---------- 空态 ---------- */
.yh-empty {
  background: var(--yh-card-bg); border: 1px dashed #d5dae1; border-radius: 10px;
  padding: 44px 20px; text-align: center; color: var(--yh-text-muted);
}

/* ---------- 归档 ---------- */
.yh-archive { list-style: none; padding: 0; margin: 0; }
.yh-archive li { padding: 9px 2px; border-bottom: 1px dashed var(--yh-border); font-size: 14.5px; }
.yh-archive li:last-child { border-bottom: 0; }
.yh-archive a { color: var(--yh-text); font-weight: 500; }
.yh-archive a:hover { color: var(--yh-primary); }

/* ---------- 留言本 ---------- */
.yh-msg {
  background: var(--yh-card-bg); border: 1px solid var(--yh-border);
  border-radius: 10px; padding: 16px 18px; margin-bottom: 14px;
}
.yh-msg-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--yh-text-muted); padding-bottom: 8px; border-bottom: 1px dashed var(--yh-border); margin-bottom: 10px; }
.yh-msg-phone { font-weight: 600; color: var(--yh-text); letter-spacing: .3px; }
.yh-msg-ip { color: #8b93a1; }
.yh-msg-time { margin-left: auto; }
/* 纯文本留言：保留用户输入的换行（由 Nl2Br/nl2br 转成 <br>），长串英文或网址自动折行不撑破卡片 */
.yh-msg-body { font-size: 14.5px; word-break: break-word; }
.yh-msg-body img, .yh-msg-body video { max-width: 100%; border-radius: 6px; }
.yh-msg-body p:last-child { margin-bottom: 0; }

/* 管理员回复 */
.yh-msg-reply { margin-top: 12px; padding-left: 12px; border-left: 3px solid #cfe0f8; }
.yh-reply-item { padding: 6px 0; }
.yh-reply-tag { font-size: 12px; color: #fff; background: var(--yh-primary); border-radius: 3px; padding: 1px 7px; margin-right: 8px; }
.yh-reply-time { font-size: 12px; color: var(--yh-text-muted); }
.yh-reply-text { font-size: 14px; color: #3a4150; margin-top: 4px; }

/* 留言本改为上下排版后卡片整行铺满，表单若也跟着拉满会过宽，这里限制舒适的最大宽度 */
/* 留言表单：与卡片同宽，内部标签、输入框、按钮左边缘全部对齐 */
.yh-gb-form { max-width: 100%; }
.yh-gb-form .form-label { margin-bottom: 4px; font-weight: 600; color: var(--yh-text); }
.yh-gb-form .form-control { width: 100%; }

/* ---------- 页脚 ---------- */
.yh-footer { padding: 26px 0 34px; color: var(--yh-text-muted); font-size: 13px; border-top: 1px solid var(--yh-border); background: #fff; }

/* ---------- 面包屑 ---------- */
.yh-crumb { font-size: 14px; color: var(--yh-text-muted); }

/* ============================================================================
 * 会员系统
 * ========================================================================== */

/* 导航栏右侧的会员入口 */
.yh-member-nav { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.yh-member-btn { white-space: nowrap; }
/* 已登录时显示的会员标识（打码手机号） */
.yh-member-chip {
  display: inline-block;
  padding: 2px 10px;
  font-size: 13px;
  color: var(--yh-primary);
  background: #eef4ff;
  border: 1px solid #d8e6ff;
  border-radius: 999px;
  white-space: nowrap;
}
.yh-member-logout { font-size: 14px; color: var(--yh-text-muted); cursor: pointer; }
.yh-member-logout:hover { color: var(--yh-primary); }

/* 已读文章：标题置灰，表示这篇读过 */
.yh-card-title a.yh-read,
.yh-archive a.yh-read,
.yh-side-list a.yh-read {
  color: var(--yh-text-muted);
  font-weight: 400;
}
.yh-card-title a.yh-read:hover,
.yh-archive a.yh-read:hover,
.yh-side-list a.yh-read:hover {
  color: var(--yh-text-muted);
  text-decoration: underline;
}

/* ============================================================================
 * 文章评论
 * ========================================================================== */
.yh-comments { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--yh-border); }
.yh-comments-title { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.yh-comment {
  background: var(--yh-card-bg);
  border: 1px solid var(--yh-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.yh-comment-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--yh-text-muted); margin-bottom: 6px; }
.yh-comment-name { font-weight: 600; color: var(--yh-text); }
.yh-comment-body { font-size: 14.5px; word-break: break-word; }
/* 评论下方的管理员回复 */
.yh-comment-reply { margin-top: 8px; padding-left: 12px; border-left: 3px solid #cfe0f8; }
.yh-comment-reply-tag { font-size: 12px; color: #fff; background: var(--yh-primary); border-radius: 3px; padding: 1px 7px; margin-right: 6px; }
.yh-comment-reply-time { font-size: 12px; color: var(--yh-text-muted); }
.yh-comment-reply-text { font-size: 14px; color: #3a4150; margin-top: 3px; }
/* 评论输入区 */
.yh-comment-form { background: var(--yh-card-bg); border: 1px solid var(--yh-border); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.yh-comment-form textarea { font-size: 14.5px; }
.yh-comment-hint { font-size: 13px; color: var(--yh-text-muted); }

/* ============================================================================
 * 后台样式（/admin/ 与 /php/admin/ 共用）
 * ========================================================================== */
.yh-admin-body { background: #f2f4f7; }
.yh-admin-side {
  background: #1f2937; min-height: 100vh; padding: 18px 0;
}
.yh-admin-side .brand { color: #fff; font-weight: 600; padding: 0 20px 16px; font-size: 15px; border-bottom: 1px solid #374151; margin-bottom: 10px; }
.yh-admin-side a {
  display: block; color: #c9d1d9; padding: 10px 20px; font-size: 14px; border-left: 3px solid transparent;
}
.yh-admin-side a:hover { background: #111827; color: #fff; }
.yh-admin-side a.active { background: #111827; color: #fff; border-left-color: var(--yh-primary); }
.yh-admin-main { padding: 22px 26px; }
.yh-admin-top { background: #fff; border-bottom: 1px solid var(--yh-border); padding: 12px 26px; display: flex; align-items: center; justify-content: space-between; }
.yh-panel { background: #fff; border: 1px solid var(--yh-border); border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; }
.yh-panel-title { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.yh-stat { background: #fff; border: 1px solid var(--yh-border); border-radius: 10px; padding: 16px 18px; }
.yh-stat .num { font-size: 26px; font-weight: 700; color: var(--yh-primary); line-height: 1.2; }
.yh-stat .lbl { font-size: 13px; color: var(--yh-text-muted); }
.yh-login { max-width: 380px; margin: 9vh auto; background: #fff; border: 1px solid var(--yh-border); border-radius: 12px; padding: 30px 32px; box-shadow: 0 8px 30px rgba(15, 35, 70, .08); }

/* 移动端微调 */
@media (max-width: 575.98px) {
  .yh-article { padding: 20px 16px; }
  .yh-article-title { font-size: 21px; }
  .yh-card { padding: 16px; }
  .yh-main { padding-top: 16px; }
}