/* ============================================================
 * view-tpl-common-single-page.css
 * V1.78.0 · #813-X 从内联 <style> 抽离（原位置：app/Site/Template/common/single_page.php）
 *
 * 为什么抽出来：项目红线「视图里禁止内联 <style>，一律抽成 CSS 类」。
 *   内联块的三个实际问题：① 每页重复下载、无法缓存；② CSP 下要额外放行；
 *   ③ 同一段样式散落在 PHP 里，改色要满仓库找。
 * 本文件由脚本按原块顺序原样搬迁，规则与选择器未作任何改动。
 * ============================================================ */

/* ============ V1.73.0 · 自定义单页专属样式（继承品牌 CSS 变量） ============ */
.sp-wrap { max-width: 880px; margin: 0 auto; padding: 52px 24px; }
.sp-cat {
  display: inline-block; padding: 3px 12px; margin-bottom: 18px;
  background: var(--surface2, #f1f5f9); border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px; font-size: 12.5px; color: var(--muted, #64748b);
}
.sp-title { font-size: 30px; font-weight: 600; color: var(--text, #1e293b); margin: 0 0 20px; letter-spacing: -.3px; line-height: 1.3; }
.sp-content { font-size: 16px; line-height: 1.95; color: #334155; word-break: break-word; }
.sp-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 18px 0; box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.sp-content a { color: var(--primary, #2563eb); text-decoration: none; border-bottom: 1px solid rgba(37,99,235,.3); }
.sp-content a:hover { border-bottom-color: var(--primary, #2563eb); }
.sp-content h1, .sp-content h2, .sp-content h3 { color: var(--text, #1e293b); margin: 28px 0 12px; line-height: 1.4; }
.sp-content h1 { font-size: 24px; }
.sp-content h2 { font-size: 21px; }
.sp-content h3 { font-size: 18px; }
.sp-content ul, .sp-content ol { padding-left: 1.4em; margin: 14px 0; }
.sp-content li { margin: 6px 0; }
.sp-content blockquote {
  margin: 18px 0; padding: 12px 18px; border-left: 4px solid var(--primary, #2563eb);
  background: var(--surface2, #f1f5f9); border-radius: 0 8px 8px 0; color: var(--muted, #64748b);
}
.sp-content table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
.sp-content th, .sp-content td { border: 1px solid var(--border, #e2e8f0); padding: 10px 12px; text-align: left; }
.sp-content th { background: var(--surface2, #f1f5f9); }

@media (max-width: 768px) {
  .sp-wrap { padding: 34px 18px; }
  .sp-title { font-size: 24px; }
  .sp-content { font-size: 15px; }
}