/* ============================================================
   内容页面模块样式（独立文件，不污染 app.html）
   类名统一加 cp- 前缀，避免与主文件撞名
   复用 app.html 的 CSS 变量；提供 fallback 保证独立也好看
   ============================================================ */
:root{
  --cp-bg: #f6f8fb;
  --cp-surface: #ffffff;
  --cp-fg: #1f2937;
  --cp-muted: #6b7280;
  --cp-line: #e6e9ef;
  --cp-accent: #2563eb;
  --cp-accent-soft: #eef3ff;
  --cp-radius: 14px;
  --cp-shadow: 0 6px 24px rgba(15,23,42,.08);
}

.cp-overlay{
  position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 110;
  background: var(--cp-bg, #f6f8fb);
  color: var(--cp-fg, #1f2937);
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.cp-overlay[hidden]{ display: none; }

/* 顶部栏 */
.cp-topbar{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: var(--cp-surface, #fff);
  border-bottom: 1px solid var(--cp-line, #e6e9ef);
  flex: 0 0 auto;
}
.cp-back{
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--cp-line, #e6e9ef);
  background: #fff; color: var(--cp-fg, #1f2937);
  border-radius: 999px; padding: 7px 14px;
  font-size: 14px; cursor: pointer; transition: .15s;
}
.cp-back:hover{ background: var(--cp-accent-soft, #eef3ff); border-color: var(--cp-accent, #2563eb); color: var(--cp-accent, #2563eb); }
.cp-topbar .cp-crumb{ font-size: 14px; color: var(--cp-muted, #6b7280); }
.cp-topbar .cp-crumb b{ color: var(--cp-fg, #1f2937); }

/* 滚动区 */
.cp-scroll{ flex: 1 1 auto; overflow-y: auto; }
.cp-wrap{ max-width: 980px; margin: 0 auto; padding: 26px 22px 60px; }

/* 列表态 · 标题区 */
.cp-hero{ margin-bottom: 22px; }
.cp-hero h1{ font-size: 28px; margin: 0 0 8px; letter-spacing: .5px; }
.cp-hero p{ margin: 0; color: var(--cp-muted, #6b7280); font-size: 15px; line-height: 1.6; }

/* 分类标签 */
.cp-cats{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.cp-cat{
  border: 1px solid var(--cp-line, #e6e9ef); background: #fff;
  border-radius: 999px; padding: 8px 16px; font-size: 14px; cursor: pointer;
  color: var(--cp-fg, #1f2937); transition: .15s;
}
.cp-cat:hover{ border-color: var(--cp-accent, #2563eb); }
.cp-cat.active{ background: var(--cp-accent, #2563eb); border-color: var(--cp-accent, #2563eb); color: #fff; font-weight: 600; }

/* 卡片网格：固定 3 列，最后一行也整齐 */
.cp-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.cp-card{
  background: var(--cp-surface, #fff);
  border: 1px solid var(--cp-line, #e6e9ef);
  border-radius: var(--cp-radius, 14px);
  overflow: hidden; cursor: pointer; transition: .2s;
  display: flex; flex-direction: column;
}
.cp-card:hover{ transform: translateY(-4px); box-shadow: var(--cp-shadow, 0 10px 28px rgba(15,23,42,.1)); border-color: var(--cp-accent, #2563eb); }
.cp-card .cp-cover{ width: 100%; height: 120px; object-fit: cover; background: var(--cp-accent-soft, #eef3ff); display: block; }
.cp-card .cp-cover-ph{ width: 100%; height: 120px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 6px;
  background: linear-gradient(135deg,#eef3ff,#f6f8fb); color: #fff; position: relative; overflow: hidden; }
.cp-card .cp-cover-ph::before{ content:''; position:absolute; inset:0; opacity:.95; }
.cp-card .cp-cover-icon{ position:relative; font-size: 24px; font-weight: 800; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0,0,0,.12); }
.cp-card .cp-cover-sub{ position:relative; font-size: 12px; opacity:.95; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.22); }
/* 分类色 */
.cp-sub-ats::before{ background: linear-gradient(135deg,#3b82f6,#2563eb); }
.cp-sub-num::before{ background: linear-gradient(135deg,#10b981,#059669); }
.cp-sub-err::before{ background: linear-gradient(135deg,#f59e0b,#d97706); }
.cp-sub-prac::before{ background: linear-gradient(135deg,#8b5cf6,#7c3aed); }
.cp-sub-prep::before{ background: linear-gradient(135deg,#06b6d4,#0891b2); }
.cp-sub-behave::before{ background: linear-gradient(135deg,#ec4899,#db2777); }
.cp-sub-salary::before{ background: linear-gradient(135deg,#14b8a6,#0d9488); }
.cp-sub-default::before{ background: linear-gradient(135deg,#64748b,#475569); }
.cp-card .cp-body{ padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.cp-card .cp-title{ font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--cp-fg, #1f2937); }
.cp-card .cp-excerpt{ font-size: 13px; color: var(--cp-muted, #6b7280); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cp-card .cp-meta{ font-size: 12px; color: var(--cp-muted, #6b7280); display: flex; gap: 14px; margin-top: auto; padding-top: 4px; }

/* 加载态 */
.cp-loading{ text-align: center; color: var(--cp-muted, #6b7280); padding: 60px 0; font-size: 14px; }
.cp-dots::after{ content: ''; animation: cp-dots 1.2s steps(4, end) infinite; }
@keyframes cp-dots{ 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} 100%{content:''} }

/* 空态 */
.cp-empty{ text-align: center; padding: 70px 20px; color: var(--cp-muted, #6b7280); }
.cp-empty .cp-empty-ic{ font-size: 40px; margin-bottom: 10px; }

/* 详情态 */
.cp-detail-title{ font-size: 26px; line-height: 1.35; margin: 4px 0 10px; }
.cp-detail-meta{ font-size: 13px; color: var(--cp-muted, #6b7280); display: flex; gap: 16px; margin-bottom: 18px; }
.cp-detail-cover{ width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--cp-radius, 14px); margin-bottom: 22px; background: var(--cp-accent-soft, #eef3ff); }
.cp-detail-cover-ph{ width: 100%; height: 200px; border-radius: var(--cp-radius, 14px); margin-bottom: 22px;
  display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,#eef3ff,#f6f8fb); color: var(--cp-muted,#6b7280); font-size: 13px; }
/* 正文排版规则统一放在 content-body.css（与后台编辑器共用），此处不再重复定义 */

@media (max-width: 900px){
  .cp-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .cp-grid{ grid-template-columns: 1fr; }
  .cp-hero h1{ font-size: 23px; }
  .cp-wrap{ padding: 18px 14px 50px; }
}