/* ==========================================================================
   预测豆 Comadou · 深空主题  「数据星图 × 预测终端」
   依据《预测豆设计规范 v1.0》由 KIMI 产出，本文件在 Django 端落地。
   版本: 1.0.0 · 2026-09
   注意: 本文件必须最后加载（在 base.css / theme.css / detail.css / prism.css 之后）
   ========================================================================== */

/* ---------- 1. 设计变量 ---------- */
:root {
  --space: #0d0f14;            /* 页面主背景 */
  --panel: #12141f;            /* 卡片/侧栏 */
  --panel-2: #151826;          /* 卡片悬浮 */
  --panel-deep: #0a0c11;       /* 代码块/页脚 */
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.15);

  --t1: #f1f5f9;               /* 标题 */
  --t2: #cbd5e1;               /* 正文 */
  --t3: #94a3b8;               /* 摘要/说明 */
  --t4: #64748b;               /* 元信息 */
  --t5: #475569;               /* 编号/占位 */

  --beam: #3245ff;             /* 电光蓝 */
  --mint: #4bf3c8;             /* 薄荷青 */
  --pink: #ff5df9;             /* 品红 */
  --coral: #ff5d5d;            /* 红 */
  --amber: #f8e42e;            /* 明黄 */
  --orange: #ff7d54;           /* 橙 */
  --sky: #40aaff;              /* 天蓝 */
  --gold: #ffc700;             /* 金/琥珀 */
  --violet: #8d46e7;           /* 紫 */

  --grad-beam: linear-gradient(92deg, #3245ff 0%, #4bf3c8 100%);
  --grad-hot: linear-gradient(92deg, #ff5d5d 0%, #ff5df9 100%);
  --grad-warm: linear-gradient(92deg, #ff7d54 0%, #f8e42e 100%);

  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 分类默认色（未知分类回退天蓝） */
  --cat: #40aaff;

  --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", "Noto Sans SC", "PingFang SC", monospace;
}

/* 分类 slug → 颜色 一一对应（新增分类在 adm 端不会自动出现，见规范 §2.3） */
.cat-shujuwajue      { --cat: #4bf3c8; }  /* 数据挖掘 */
.cat-Tech            { --cat: #40aaff; }  /* 技术总结 */
.cat-yiliangjiankang { --cat: #ff5df9; }  /* 医疗健康 */
.cat-suanfayanjiu    { --cat: #8d46e7; }  /* 算法研究 */
.cat-rengongzhineng  { --cat: #40aaff; }  /* 人工智能 */

/* ---------- 2. 基底 ---------- */
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  background-color: var(--space);
  color: var(--t2);
  font-family: var(--font-cn);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--mint); color: #0d0f14; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d0f14; }
::-webkit-scrollbar-thumb { background: #23283b; border-radius: 6px; border: 2px solid #0d0f14; }
::-webkit-scrollbar-thumb:hover { background: #3245ff; }

main { min-height: 60vh; }

a { color: var(--sky); transition: color .3s var(--ease-out); }
a:hover { color: var(--mint); text-decoration: none; }

h1, h2, h3, h4, h5, h6 { color: var(--t1); font-weight: 700; }

/* 等宽：数字/编号/代码/元信息 */
.font-mono-data, .mono {
  font-family: var(--font-mono);
}

/* 渐变文字（只做“点”不做“面”） */
.text-gradient-beam { background: var(--grad-beam); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-gradient-hot  { background: var(--grad-hot);  -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-gradient-warm { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 背景材质 */
.stardust {
  background:
    radial-gradient(ellipse 60% 50% at 18% 12%, rgba(50, 69, 255, .28), transparent 65%),
    radial-gradient(ellipse 50% 45% at 85% 20%, rgba(141, 70, 231, .22), transparent 60%),
    radial-gradient(ellipse 55% 50% at 75% 85%, rgba(75, 243, 200, .12), transparent 65%),
    radial-gradient(ellipse 40% 35% at 12% 82%, rgba(255, 93, 249, .10), transparent 60%);
}
.grid-lines {
  background-image:
    linear-gradient(rgba(120, 140, 220, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 140, 220, .05) 1px, transparent 1px);
  background-size: 56px 56px;
}
.scanline::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(75, 243, 200, .015) 3px, rgba(75, 243, 200, .015) 4px);
}
.glass {
  background: rgba(13, 15, 20, .72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* 动效工具 */
.spring { transition: all .4s var(--ease-spring); }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.link-sweep {
  background-image: var(--grad-beam);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left calc(100% - 2px);
  transition: background-size .45s var(--ease-out);
}
.feed-row:hover .link-sweep { background-size: 100% 2px; }

@keyframes marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.animate-marquee { animation: marquee-x 36s linear infinite; }

@keyframes blink-caret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.caret-blink { animation: blink-caret 1s step-end infinite; }

@keyframes scroll-drip { 0% { transform: translateY(-16px); } 100% { transform: translateY(44px); } }

@keyframes ping-soft { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.2); opacity: 0; } }

/* ---------- 3. Bootstrap 深色映射（全站换血的关键层） ---------- */

/* 大块浅色一律翻成面板色 */
.bg-white { background-color: var(--panel) !important; }
.text-dark { color: var(--t1) !important; }
.text-muted { color: var(--t4) !important; }
.text-secondary { color: var(--t3) !important; }
.text-info { color: var(--mint) !important; }
.text-success { color: var(--mint) !important; }
.text-danger { color: var(--coral) !important; }
.text-warning { color: var(--amber) !important; }
.text-white { color: var(--t1) !important; }

/* 卡片 */
.card {
  background-color: transparent;
  border: 1px solid var(--line) !important;
  border-radius: 16px;
  box-shadow: none;
}
.card .card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--line-soft);
  color: var(--t1);
  font-weight: 700;
}
.card .card-body { color: var(--t2); }
.card .card-title { color: var(--t1); }

/* 列表组 / 媒体 */
.list-group-item {
  background-color: transparent;
  border-color: var(--line-soft);
  color: var(--t2);
}
.list-group-item a { color: var(--t2); }
.list-group-item a:hover { color: var(--mint); }

.media { color: var(--t2); }

/* 表格 */
.table { color: var(--t2); }
.table td, .table th { border-color: var(--line-soft); }
.table-hover tbody tr:hover { color: var(--t1); background-color: rgba(255, 255, 255, .03); }

/* 面包屑 */
.breadcrumb { background-color: transparent; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--t5); }
.breadcrumb-item a { color: var(--t3); }
.breadcrumb-item a:hover { color: var(--mint); }
.breadcrumb-item.active { color: var(--t4); }

/* 表单（终端气质输入） */
.form-control, .form-control:focus {
  background-color: #0d0f14;
  border: 1px solid var(--line-strong);
  color: var(--t1);
  border-radius: 10px;
}
.form-control:focus { border-color: rgba(75, 243, 200, .6); box-shadow: 0 0 0 .15rem rgba(75, 243, 200, .15); }
.form-control::placeholder { color: var(--t5); }
.form-control[type="file"] { padding: .45rem .6rem; }
.custom-file-label, .input-group-text {
  background-color: #0d0f14; border-color: var(--line-strong); color: var(--t3);
}

/* 按钮 */
.btn { border-radius: 999px; transition: all .35s var(--ease-spring); font-weight: 500; }
.btn-primary {
  background-image: var(--grad-beam);
  background-color: transparent;
  border: none;
  color: #0d0f14 !important;
  font-weight: 700;
}
.btn-primary:hover { color: #0d0f14 !important; box-shadow: 0 0 24px rgba(75, 243, 200, .45); transform: translateY(-1px); }
.btn-outline-primary {
  color: var(--t1); border: 1px solid var(--line-strong); background: transparent;
}
.btn-outline-primary:hover { color: var(--mint); border-color: rgba(255, 93, 249, .6); background: transparent; box-shadow: 0 0 18px rgba(255, 93, 249, .12); }
.btn-secondary, .btn-light, .btn-dark {
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: var(--t2);
}
.btn-secondary:hover, .btn-light:hover, .btn-dark:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .2); }

/* 徽章 / 提示 */
.badge { border-radius: 999px; }
.badge-warning { color: #0d0f14; }
.badge-info { color: #0d0f14; }

/* 警告消息块 */
.alert { border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--t2); }
.alert-success { background: rgba(75, 243, 200, .08); border-color: rgba(75, 243, 200, .25); color: var(--mint); }
.alert-info { background: rgba(64, 170, 255, .08); border-color: rgba(64, 170, 255, .25); color: var(--sky); }
.alert-warning { background: rgba(248, 228, 46, .08); border-color: rgba(248, 228, 46, .25); color: var(--amber); }
.alert-danger, .alert-error { background: rgba(255, 93, 93, .08); border-color: rgba(255, 93, 93, .25); color: var(--coral); }
.alert .close { color: var(--t2); text-shadow: none; opacity: .6; }

/* 下拉菜单 */
.dropdown-menu {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.dropdown-item { color: var(--t2); }
.dropdown-item:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.dropdown-divider { border-color: var(--line-soft); }

/* 返回顶部 */
#to-top {
  border: 1px solid var(--line-strong) !important;
  background: var(--panel) !important;
  color: var(--mint) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}

/* 轮播：深色化 */
.carousel-indicators li { border: 1px solid rgba(255, 255, 255, .7); background: transparent; }
.carousel-indicators .active { background: var(--mint); }
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, .8));
}

/* 分页 & 旧页码的通用链接色 */
.pagination .page-link {
  background: transparent; border: none; color: var(--t3);
}
.pagination .page-item.active .page-link { color: var(--mint); font-weight: 700; background: transparent; }

/* 高亮搜索词 */
.highlighted { color: var(--amber); font-style: normal; }

/* ---------- 4. 导航（KIMI Nav 落地，class 仍带 blog-navbar 以兼容 headroom） ---------- */
.blog-navbar {
  min-height: 64px;
  background: rgba(13, 15, 20, .72) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  box-shadow: none !important;
  padding-top: 0; padding-bottom: 0;
  z-index: 1050;
}
.blog-navbar .navbar-brand { display: flex; align-items: center; gap: 10px; padding: 0; }
.nav-logo-badge {
  position: relative;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 700; color: #0d0f14;
  flex: 0 0 32px;
  overflow: hidden;
}
/* 渐变圆盘单独成层：悬停时这一层旋转，豆字保持不动（对齐设计稿
   Nav.tsx：渐变层 group-hover:rotate-180 + 文字 relative） */
.nav-logo-badge::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background-image: linear-gradient(45deg, var(--beam) 0%, var(--mint) 100%);
  opacity: .9;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease-out);
}
.nav-logo-badge .badge-glyph { position: relative; z-index: 1; }
/* 悬停：渐变圆盘旋转半圈（视觉上渐变整体翻转流动） */
a.navbar-brand:hover .nav-logo-badge::before { transform: rotate(180deg); opacity: 1; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text .brand-cn { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .02em; }
.brand-text .brand-en { font-family: var(--font-mono); font-size: 10px; letter-spacing: .28em; color: var(--t4); }

.blog-navbar .navbar-nav .nav-link {
  color: var(--t3);
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.blog-navbar .navbar-nav .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.blog-navbar .navbar-nav .nav-link.active { color: #fff; background: rgba(255, 255, 255, .1); font-weight: 500; }
.blog-navbar .navbar-toggler {
  color: #fff; border-color: rgba(255, 255, 255, .15); border-radius: 10px;
}
.blog-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.blog-navbar .nav-cta-login { color: var(--t3); }
.blog-navbar .nav-cta-login:hover { color: #fff; }
.nav-cta-signup {
  background-image: var(--grad-beam) !important;
  color: #0d0f14 !important;
  border-radius: 999px;
  padding: 7px 20px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: none;
}
.nav-cta-signup:hover { box-shadow: 0 0 24px rgba(75, 243, 200, .45); color: #0d0f14 !important; }
.blog-navbar .get-msg { top: 4px; left: auto; }

/* 折叠后的移动菜单由 .navbar-collapse 处理，Bootstrap 自带 */
@media (max-width: 991.98px) {
  .blog-navbar .navbar-nav { padding: 8px 0; }
  .blog-navbar .navbar-nav .nav-link { padding: 10px 16px; }
}

/* ---------- 5. 首页 Hero ---------- */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-canvas-wrap { position: absolute; inset: 0; }
#network-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 35%, #0d0f14 92%);
}
.hero-inner {
  position: relative; z-index: 10;
  pointer-events: none;
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding: 120px 24px 0;
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
}
.hero-inner > * { pointer-events: auto; }
.hero-system-badge {
  width: fit-content;
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 28px;
}
.hero-system-dot { position: relative; width: 8px; height: 8px; }
.hero-system-dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--mint); animation: ping-soft 1.6s var(--ease-out) infinite;
}
.hero-system-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--mint); }
.hero-system-text { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--t2); }
.hero-title {
  margin: 0;
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.08;
  color: #fff;
}
.hero-sub { margin-top: 28px; max-width: 560px; color: var(--t3); font-size: 16px; line-height: 1.8; }
@media (min-width: 992px) { .hero-sub { font-size: 18px; } }
.hero-terminal {
  font-family: var(--font-mono);
  margin-top: 36px;
  min-height: 24px;
  font-size: 15px;
  color: var(--mint);
}
@media (min-width: 576px) { .hero-terminal { font-size: 16px; } }
.hero-caret {
  display: inline-block; width: 9px; height: 16px; margin-left: 3px;
  transform: translateY(2px); background: var(--mint);
}
.hero-cta { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 16px; }
.hero-btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: 999px; padding: 14px 32px;
  background-image: var(--grad-beam);
  color: #0d0f14 !important; font-weight: 700; font-size: 14px;
}
.hero-btn-primary:hover { box-shadow: 0 0 36px rgba(75, 243, 200, .5); color: #0d0f14 !important; }
.hero-btn-ghost {
  display: inline-block; border-radius: 999px; padding: 14px 32px;
  border: 1px solid rgba(255, 255, 255, .15); color: var(--t2); font-size: 14px; font-weight: 500;
}
.hero-btn-ghost:hover { border-color: rgba(255, 93, 249, .6); color: #fff; }
.hero-stats {
  margin-top: 64px; max-width: 560px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.hero-stat-num { font-family: var(--font-mono); font-size: 26px; font-weight: 700; }
@media (min-width: 576px) { .hero-stat-num { font-size: 30px; } }
.hero-stat-label { margin-top: 6px; font-size: 12px; letter-spacing: .05em; color: var(--t4); }
.hero-scroll {
  position: relative; z-index: 10;
  display: flex; justify-content: center; padding-bottom: 32px;
}
.hero-scroll-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--t4); }
.hero-scroll-word { font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em; }
.hero-scroll-line { height: 40px; width: 1px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.hero-scroll-line i { display: block; height: 16px; width: 1px; background-image: linear-gradient(180deg, transparent, var(--mint), transparent); animation: scroll-drip 1.6s ease-in-out infinite; }

/* ---------- 6. 跑马灯 ---------- */
.ticker {
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: #10121b;
  padding: 16px 0;
}
.ticker-track { display: flex; width: max-content; white-space: nowrap; align-items: center; }
.ticker-half { display: inline-flex; align-items: center; gap: 40px; padding: 0 20px; }
.ticker-item { display: inline-flex; align-items: center; gap: 40px; }
.ticker-tag { font-family: var(--font-mono); font-size: 14px; letter-spacing: .05em; color: var(--t3); }
.ticker-dot { width: 4px; height: 4px; border-radius: 50%; background: #334155; }
.ticker-fade-l, .ticker-fade-r {
  position: absolute; inset: 0 auto 0 0; width: 96px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, #0d0f14, transparent);
}
.ticker-fade-r { left: auto; right: 0; background: linear-gradient(-90deg, #0d0f14, transparent); }

/* ---------- 7. 页头横幅（归档/分类/详情通用） ---------- */
.page-banner { position: relative; overflow: hidden; padding: 130px 0 30px; }
.page-banner .stardust, .page-banner .grid-lines { position: absolute; inset: 0; }
.page-banner .page-head { position: relative; }
.page-banner .page-meta-label {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .35em; margin-bottom: 16px;
}
.page-banner .page-meta-label .meta-line { height: 1px; width: 64px; opacity: .5; }
.page-title { font-weight: 900; letter-spacing: -.01em; font-size: clamp(30px, 4vw, 60px); color: #fff; margin: 0; }
.page-desc { margin-top: 20px; max-width: 560px; color: var(--t3); font-size: 15px; }
.page-count { margin-top: 24px; font-family: var(--font-mono); font-size: 12px; color: var(--t4); }

/* ---------- 8. 文章条目行（数据流核心单元） ---------- */
.feed-wrap { border-top: 1px solid rgba(255, 255, 255, .06); }
.feed-row {
  position: relative;
  display: flex; gap: 20px;
  padding: 28px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  border-left: 2px solid transparent;
  color: inherit;
  transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out);
}
@media (min-width: 576px) { .feed-row { gap: 32px; } }
a.feed-row { color: inherit; display: flex; }
a.feed-row:hover { color: inherit; background: rgba(255, 255, 255, .03); }
.feed-row.is-featured { border-left-color: var(--mint); }
.feed-row:hover { border-left-color: var(--beam); }
.feed-row.is-featured:hover { border-left-color: var(--mint); }
.feed-row .feed-num {
  display: none; flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 14px; color: var(--t5); padding-top: 2px;
  transition: color .3s var(--ease-out);
}
.feed-row:hover .feed-num { color: var(--mint); }
@media (min-width: 576px) { .feed-row .feed-num { display: block; } }

.feed-main { min-width: 0; flex: 1 1 auto; }
.feed-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 10px; border-radius: 999px;
  color: var(--cat);
  border: 1px solid color-mix(in srgb, var(--cat) 33%, transparent);
  background: color-mix(in srgb, var(--cat) 7%, transparent);
}
.cat-chip i { width: 4px; height: 4px; border-radius: 50%; background: var(--cat); font-style: normal; }
.feed-featured {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  padding: 2px 10px; border-radius: 999px;
  background-image: var(--grad-hot); color: #0d0f14;
}
.feed-time { font-family: var(--font-mono); font-size: 12px; color: var(--t4); }

.feed-title {
  display: inline;
  color: #f1f5f9;
  font-weight: 700; line-height: 1.45;
  transition: color .3s var(--ease-out);
}
.feed-row:hover .feed-title { color: #fff; }
.feed-row .feed-title-lg { font-size: 20px; }
@media (min-width: 576px) { .feed-row .feed-title-lg { font-size: 24px; } }
@media (min-width: 992px) { .feed-row .feed-title-lg { font-size: 30px; } }
.feed-title-md { font-size: 17px; }
@media (min-width: 576px) { .feed-title-md { font-size: 20px; } }

.feed-summary {
  margin-top: 12px; max-width: 640px;
  font-size: 14px; line-height: 1.8; color: var(--t3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.feed-tags {
  margin-top: 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  font-family: var(--font-mono); font-size: 12px; color: var(--t4);
}
.feed-tags span { display: inline-flex; align-items: center; gap: 6px; }
.feed-tags .feed-stat { color: var(--t4); }
.feed-tags .feed-tag { color: var(--t5); transition: color .3s; }
.feed-row:hover .feed-tag { color: var(--t3); }
.feed-arrow {
  display: none; flex: 0 0 auto; align-items: center;
  font-size: 20px; color: var(--t5);
  transition: all .5s var(--ease-out);
}
.feed-row:hover .feed-arrow { color: var(--mint); transform: translateX(8px); }
@media (min-width: 576px) { .feed-arrow { display: flex; } }

/* 空状态 */
.empty-zone {
  border: 1px dashed rgba(255, 255, 255, .15); border-radius: 16px;
  padding: 80px 20px; text-align: center;
  font-family: var(--font-mono); font-size: 14px; color: var(--t3);
}

/* ---------- 9. 侧栏面板 ---------- */
.side-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
}
.side-panel + .side-panel { margin-top: 24px; }
.side-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .25em;
  color: var(--t3); margin-bottom: 16px;
}
.side-title .side-mark { font-size: 14px; font-style: normal; }
.side-title .side-mark.mint  { color: var(--mint); }
.side-title .side-mark.pink  { color: var(--pink); }
.side-title .side-mark.violet{ color: var(--violet); }
.side-title .side-mark.hot   { color: var(--coral); }

/* 终端搜索框 */
.terminal-window { overflow: hidden; }
.terminal-bar {
  display: flex; align-items: center; gap: 6px; margin-bottom: 14px;
}
.terminal-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; font-style: normal; }
.terminal-bar .t-red { background: var(--coral); }
.terminal-bar .t-yellow { background: var(--amber); }
.terminal-bar .t-green { background: var(--mint); }
.terminal-bar .t-name {
  margin-left: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--t4);
}
.terminal-input {
  display: flex; align-items: center; gap: 10px;
  background: #0d0f14; border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px; padding: 10px 14px;
  transition: border-color .3s;
}
.terminal-input:focus-within { border-color: rgba(75, 243, 200, .6); }
.terminal-input .prompt { font-family: var(--font-mono); color: var(--mint); font-size: 14px; }
.terminal-input input {
  width: 100%; background: transparent; border: none; outline: none;
  font-family: var(--font-mono); font-size: 14px; color: var(--t1);
}
.terminal-input input::placeholder { color: var(--t5); }
.terminal-hint { margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--t4); }

/* 关键词矩阵 */
.tag-matrix { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chip {
  font-size: 12px; color: var(--t2);
  border-radius: 999px; padding: 4px 12px;
  border: 1px solid var(--line-strong);
  background: transparent;
  transition: all .3s var(--ease-spring);
}
/* 现代浏览器用 chip 自己的主题色描边（33% 透明度） */
.tag-chip { border-color: color-mix(in srgb, var(--tcol, var(--line-strong)) 33%, transparent); }
.tag-chip:hover { color: #0d0f14; background: var(--tcol, var(--mint)); border-color: var(--tcol, var(--mint)); }

/* TOP 热榜 */
.hot-list { list-style: none; margin: 0; padding: 0; }
.hot-item {
  display: block; padding: 8px 8px; border-radius: 10px;
  transition: background-color .3s;
}
a.hot-item:hover { background: rgba(255, 255, 255, .05); color: inherit; }
.hot-row { display: flex; align-items: baseline; gap: 12px; }
.hot-rank {
  font-family: var(--font-mono); font-weight: 700; font-size: 14px;
  width: 24px; flex: 0 0 24px; color: var(--t5);
}
.hot-list li:nth-child(1) .hot-rank, .hot-list li:nth-child(2) .hot-rank, .hot-list li:nth-child(3) .hot-rank {
  background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hot-title {
  min-width: 0; flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; color: var(--t2);
  transition: color .3s;
}
a.hot-item:hover .hot-title { color: #fff; }
.hot-views { font-family: var(--font-mono); flex: 0 0 auto; font-size: 10px; color: var(--t4); }
.heat-track { height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .05); margin: 6px 0 2px 36px; overflow: hidden; }
.heat-bar {
  height: 100%; border-radius: 99px; opacity: .6;
  background-image: var(--grad-hot);
  transition: width 1s var(--ease-out), opacity .3s;
}
.hot-item:hover .heat-bar { opacity: 1; }

/* 最火动弹（动弹页侧栏，与 TOP 热榜同视觉） */
.dd-list { display: flex; flex-direction: column; }
.dd-item {
  display: block; padding: 9px 8px; border-radius: 10px;
  border-bottom: 1px dashed rgba(148, 163, 184, .14);
  transition: background-color .3s;
}
.dd-item:last-child { border-bottom: none; }
a.dd-item:hover { background: rgba(255, 255, 255, .05); text-decoration: none; }
.dd-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 13px; line-height: 1.55; color: var(--t2);
  transition: color .3s;
}
a.dd-item:hover .dd-text { color: #fff; }
.dd-meta {
  display: block; margin-top: 4px;
  font-family: var(--font-mono); font-size: 11px; color: var(--t4);
}

/* 分页（等宽终端风） */
.pagecut-mono {
  display: flex; justify-content: center; align-items: center; gap: 18px;
  margin: 40px 0 8px;
  font-family: var(--font-mono); font-size: 13px;
}
.pagecut-mono .pg-btn {
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1);
  padding: 8px 20px; color: var(--t3); font-size: 12px;
  transition: all .3s var(--ease-out);
}
.pagecut-mono a.pg-btn:hover { border-color: rgba(255, 255, 255, .3); color: #fff; }
.pagecut-mono .pg-btn.pg-next { background: rgba(255, 255, 255, .08); color: #fff; }
.pagecut-mono .pg-btn.pg-next:hover {
  background-image: var(--grad-beam); border-color: transparent; color: #0d0f14;
}
.pagecut-mono .pg-cur { color: var(--t4); }
.pagecut-mono .pg-cur b { color: var(--mint); font-weight: 700; }
.pagecut-mono .disabled { opacity: .45; cursor: not-allowed; }
.pagecut-mono a.pg-btn:hover { border-color: rgba(255, 255, 255, .3); color: #fff; }

/* 小号排序/筛选按钮（tag / category 页） */
.pg-btn {
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1);
  padding: 8px 20px; color: var(--t3); font-size: 12px;
  transition: all .3s var(--ease-out);
}
.pg-btn-sm {
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1);
  padding: 6px 14px; color: var(--t3); font-size: 12px;
  transition: all .3s var(--ease-out);
}
.pg-btn-sm:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.pg-btn-sm.pg-active { background: rgba(255, 255, 255, .08); color: #fff; }

/* ---------- 10. 轮播精选条 ---------- */
.blog-carousel { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); position: relative; }
.blog-carousel .carousel-inner { border-radius: 18px; }
.blog-carousel .carousel-item { max-height: 440px; overflow: hidden; }
.blog-carousel .carousel-item img { width: 100%; height: 100%; max-height: 440px; object-fit: cover; }
.blog-carousel .carousel-item::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(180deg, transparent, rgba(10, 12, 17, .85));
  pointer-events: none;
}
.blog-carousel .carousel-caption { text-align: left; padding: 0 24px 28px; z-index: 2; }
.blog-carousel .carousel-caption h3 { color: #fff; font-weight: 700; font-size: 18px; }
.blog-carousel .carousel-caption p { color: rgba(203, 213, 225, .85); margin: 6px 0 0; font-size: 13px; }
.carousel-band .band-label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em;
  color: var(--mint); margin-bottom: 14px;
}
.carousel-band .band-label::after { content: ""; height: 1px; flex: 1; background: rgba(255, 255, 255, .06); }

/* ---------- 11. 文章详情正文 ---------- */
.article-shell { position: relative; }
.article-head { position: relative; padding: 40px 0 8px; }
.back-feed {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; color: var(--t3);
  transition: color .3s;
}
.back-feed:hover { color: var(--mint); }
.back-feed .arr { transition: transform .3s var(--ease-out); display: inline-block; }
.back-feed:hover .arr { transform: translateX(-4px); }
.article-head .feed-meta-row { margin-top: 32px; }
.article-title {
  margin-top: 24px;
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 900; line-height: 1.18; color: #fff; letter-spacing: -.01em;
}

.article-body { font-size: 15px; line-height: 1.9; color: var(--t2); word-wrap: break-word; }
.article-body p { margin: 0 0 18px; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4 {
  color: #fff; font-weight: 700; margin: 36px 0 14px; line-height: 1.4;
}
.article-body h2 { font-size: 22px; }
.article-body h3 { font-size: 18px; }
.article-body h4 { font-size: 16px; }
.article-body a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(75, 243, 200, .4); }
.article-body a:hover { color: #fff; }
.article-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0; }
.article-body blockquote {
  border-left: 3px solid var(--beam);
  background: rgba(255, 255, 255, .03);
  padding: 12px 20px; margin: 20px 0;
  border-radius: 0 12px 12px 0;
  color: var(--t3);
}
.article-body hr { border-color: var(--line-soft); }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body li { margin: 6px 0; }
.article-body table {
  width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px;
}
.article-body th { background: rgba(255, 255, 255, .04); color: #fff; }
.article-body th, .article-body td { border: 1px solid var(--line-soft); padding: 8px 12px; }
.article-body code:not(.hljs) {
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, .08);
  color: var(--mint);
  padding: 2px 6px; border-radius: 6px; font-size: .88em;
}
.article-body pre {
  background: var(--panel-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  margin: 24px 0;
}
.article-body pre code { background: transparent; color: var(--t2); padding: 0; }
.article-body pre code.hljs { background: transparent; padding: 0; }

/* 代码高亮：hljs atom-one-dark 近似（深色专用） */
.article-body .hljs-comment, .article-body .hljs-quote { color: var(--t4); font-style: normal; }
.article-body .hljs-keyword, .article-body .hljs-selector-tag, .article-body .hljs-literal,
.article-body .hljs-section, .article-body .hljs-link, .article-body .hljs-type,
.article-body .hljs-built_in, .article-body .hljs-title.function_, .article-body .hljs-name { color: var(--mint); }
.article-body .hljs-string, .article-body .hljs-addition, .article-body .hljs-attribute,
.article-body .hljs-symbol, .article-body .hljs-bullet { color: var(--amber); }
.article-body .hljs-number, .article-body .hljs-regexp { color: var(--orange); }
.article-body .hljs-title, .article-body .hljs-title.class_ { color: var(--sky); }
.article-body .hljs-variable, .article-body .hljs-template-variable,
.article-body .hljs-params { color: #e6e6e6; }
.article-body .hljs-meta { color: var(--pink); }
.article-body .hljs-emphasis { font-style: normal; font-weight: 700; }
.article-body .hljs-strong { font-weight: 700; }

/* Prism 兜底深色 */
.article-body pre[class*="language-"], .article-body pre code[class*="language-"] { background: transparent; }
.article-body .token.comment, .article-body .token.prolog, .article-body .token.doctype,
.article-body .token.cdata { color: var(--t4); font-style: normal; }
.article-body .token.punctuation { color: var(--t3); }
.article-body .token.keyword, .article-body .token.selector { color: var(--mint); }
.article-body .token.string, .article-body .token.char, .article-body .token.attr-value { color: var(--amber); }
.article-body .token.number, .article-body .token.boolean, .article-body .token.constant { color: var(--orange); }
.article-body .token.function, .article-body .token.function-variable { color: var(--sky); }
.article-body .token.tag, .article-body .token.attr-name { color: var(--pink); }
/* 运算符(<- ~ = + 等)改用柔和淡紫：品红 #ff5df9 在深空底上过亮刺眼 */
.article-body .token.operator { color: #c792ea; }
.article-body .token.atrule, .article-body .token.rule { color: var(--mint); }

/* 详情页关键词 */
.tag-cloud { margin: 28px 0; }
.tag-cloud p { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--t4); }
.tag-pill {
  display: inline-block; font-size: 12px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 4px 12px; margin: 0 8px 8px 0; color: var(--t3);
  transition: all .3s var(--ease-spring);
}
.tag-pill:hover { color: #0d0f14; border-color: var(--cat); }

/* 上下篇 → 继续阅读卡片 */
.continue-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 576px) { .continue-grid { grid-template-columns: 1fr 1fr; } }
.continue-card {
  display: block; padding: 20px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel);
  transition: all .3s var(--ease-out);
}
.continue-card:hover { border-color: rgba(75, 243, 200, .4); background: var(--panel-2); }
.continue-card .cc-label { font-family: var(--font-mono); font-size: 10px; color: var(--t4); }
.continue-card .cc-label .mint { color: var(--mint); }
.continue-card .cc-title { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--t2); line-height: 1.5; }
.continue-card:hover .cc-title { color: #fff; }

/* 作者卡 */
.author-card {
  margin-top: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); padding: 24px;
}
.author-ident { display: flex; align-items: center; gap: 16px; }
.author-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background-image: var(--grad-beam);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; color: #0d0f14; font-size: 18px;
}
.author-name { font-weight: 700; color: #fff; font-size: 15px; }
.author-role { margin-top: 2px; font-size: 12px; color: var(--t3); }

/* 评论暗色化 */
.comment-block .card { background: transparent; }
.comment-list .card, .comment-item { background: var(--panel); }
.comment-text { color: var(--t2); }
textarea.form-control { background: #0d0f14; }

/* 动弹/画廊等通用 */
.dongdan-item { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }

/* ---------- 12. 页脚 ---------- */
.site-footer {
  position: relative; overflow: hidden;
  background: var(--panel-deep);
  border-top: 1px solid var(--line);
  color: var(--t3);
}
.site-footer .stardust { position: absolute; inset: 0; opacity: .5; }
.site-footer .footer-core { position: relative; padding: 56px 0 0; }
.site-footer p { position: relative; }
.footer-brand-row { display: flex; align-items: center; gap: 12px; }
.footer-brand-row .nav-logo-badge { width: 36px; height: 36px; flex-basis: 36px; }
.footer-brand-cn { color: #fff; font-weight: 700; font-size: 16px; }
.footer-brand-en { font-family: var(--font-mono); font-size: 10px; letter-spacing: .28em; color: var(--t4); }
.footer-desc { margin: 20px 0 0; font-size: 14px; color: var(--t4); max-width: 420px; }
.footer-uptime { margin-top: 24px; font-family: var(--font-mono); font-size: 12px; color: var(--t4); }
.footer-uptime .pf { color: var(--mint); }
.footer-uptime .note { color: var(--t3); }
.footer-col-title {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .3em;
  color: var(--t4); margin-bottom: 20px;
}
.site-footer a.footer-link { color: var(--t3); font-size: 14px; display: inline-block; margin: 0 12px 10px 0; }
.site-footer a.footer-link:hover { color: var(--mint); }
.friend-chip {
  display: inline-block;
  font-family: var(--font-mono); font-size: 12px; color: var(--t3);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px;
  padding: 6px 16px; margin: 0 10px 10px 0;
  transition: all .3s var(--ease-spring);
}
.friend-chip:hover { color: var(--amber); border-color: rgba(248, 228, 46, .6); }
.footer-bottom {
  position: relative;
  margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: 24px 0 28px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.footer-bottom .fb { font-family: var(--font-mono); font-size: 12px; color: var(--t4); margin: 0; }
.footer-bottom .fb .py { color: var(--sky); }
.footer-bottom a.beian { font-family: var(--font-mono); font-size: 12px; color: var(--t4); }
.footer-bottom a.beian:hover { color: var(--t2); }

/* 账号/工具等旧页面里残留的行内小类 */
.btn-toolbar .btn { margin-right: 6px; }
.card-header h5 { margin-bottom: 0; }

/* ---------- 13. 响应式与可达性 ---------- */
@media (max-width: 575.98px) {
  .feed-row { padding: 22px 16px; gap: 0; }
  .hero-inner { padding-top: 104px; }
  .article-title { font-size: 28px; }
}
@media (max-width: 767.98px) {
  .page-banner { padding-top: 110px; }
  .site-footer .footer-core { padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   20. 动弹 / 评论模块深色化
   （覆盖 theme.css 浅色遗留：#comment-list .comment-parent 白底卡片、
     base_comment.css 的 #no-editor / 表情按钮白底等）
   ========================================================================== */
#comment-list .comment-parent {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  transition: transform .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
#comment-list .comment-parent:hover {
  transform: translateY(-3px);
  border-color: rgba(75, 243, 200, .35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
#comment-list .comment-child {
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: .8rem 1rem;
  margin-bottom: .75rem;
}
#comment-list .comment-parent hr { border-top: 1px solid var(--line-soft); }
#comment-list .comment-body { color: var(--t2); }
#comment-list .media-body strong { color: var(--t1); }
#comment-list .text-muted { color: var(--t4) !important; }
#comment-list .text-danger { color: var(--coral) !important; }
#comment-list .rep-btn { color: var(--t4); }
#comment-list .rep-btn:hover { color: var(--mint); }
/* 侧栏「最火动弹」等 text-dark 链接在深色下不可见 */
#comment-list a.text-dark,
.list-group a.text-dark { color: var(--t2) !important; }
.list-group a.text-dark:hover { color: var(--mint) !important; }
.list-group li { border-color: var(--line-soft) !important; }
/* 「吐槽·动弹 分享你的生活」标题 */
#comment-list h2 { color: var(--t1); }

/* 未登录评论提示条（原 #f5f5f5 浅灰） */
#no-editor {
  background: var(--panel-2) !important;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--t3);
}
#no-editor a { color: var(--mint); }
#no-editor a.text-danger { color: var(--coral) !important; }

/* 评论编辑器（CKEditor / SimpleMDE）容器与按钮 */
#emoji-btns,
.editor-btns .btn {
  background: var(--panel-2);
  border-color: var(--line-strong);
  color: var(--t2);
}
#emoji-btns:hover,
.editor-btns .btn:hover { background: #1a1e30; }
.django-ckeditor-widget {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel-deep);
}
#comment-list .form-control,
.card .form-control {
  background: var(--panel-deep);
  border-color: var(--line-strong);
  color: var(--t1);
}
#comment-list .form-control:focus,
.card .form-control:focus {
  background: var(--panel-deep);
  color: var(--t1);
  border-color: rgba(75, 243, 200, .4);
  box-shadow: 0 0 0 3px rgba(75, 243, 200, .12);
}
#comment-list .form-control::placeholder,
.card .form-control::placeholder { color: var(--t5); }
/* 提交评论按钮（原 btn-info 青色） */
#comment-list .btn-info {
  background: var(--grad-beam);
  border: none;
  color: #fff;
}
#comment-list .btn-info:hover { filter: brightness(1.15); }
/* 评论计数标题 */
#comment-list strong { color: var(--t1); }

/* ---------- 21. 画廊页（GDP 图表）深色 ---------- */
.gallery-block .chart-container {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
  padding: 1rem;
  overflow: hidden;
}
.gallery-block .chart-container[style] { color: var(--t2) !important; }

/* 空 main（部分独立模板内容不在 main 内）不应撑出视口空白 */
main:empty { min-height: 0; }

/* ==========================================================================
   22. 文章详情页精修（代码块统一深色卡 / 行号对齐 / 表格 / 引用 / 图片 / 标题）
   ========================================================================== */
/* 1) 代码块统一为深色卡片（修复此前 pre[class*=language-] 被误设透明背景） */
.article-body pre,
.article-body pre[class*="language-"] {
  background: var(--panel-deep);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  margin: 24px 0;
}
.article-body pre code,
.article-body pre code[class*="language-"] {
  background: transparent;
  color: var(--t2);
  padding: 0;
  font-size: 13px;
  text-shadow: none;
}

/* 2) 行号对齐：全文统一无单位行高，中文注释行不再撑高行框（行号不再累计错位） */
.article-body pre,
.article-body pre[class*="language-"],
.article-body pre code,
.article-body pre code[class*="language-"],
.article-body pre code span,
.article-body pre[class*="language-"] .line-numbers-rows,
.article-body pre[class*="language-"] .line-numbers-rows > span,
.article-body pre[class*="language-"] .line-numbers-rows > span::before {
  line-height: 1.75 !important;
}
/* 行号列：深色分隔线 + 暗淡编号 */
.article-body pre .line-numbers-rows {
  border-right: 1px solid var(--line);
}
.article-body pre .line-numbers-rows > span::before {
  color: var(--t5);
  padding-right: 1em;
}

/* 3) 行内代码（非代码块内） */
.article-body code {
  background: rgba(255, 255, 255, .07);
  color: var(--mint);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: .88em;
  border: 1px solid var(--line-soft);
}
.article-body pre code {
  border: none;
  padding: 0;
  background: transparent;
}

/* 4) 表格：深色卡片 + 斑马纹 */
.article-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 26px 0;
  background: var(--panel);
  border-radius: 12px;
  overflow: hidden;
  font-size: 14px;
}
.article-body th,
.article-body td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  color: var(--t2);
  text-align: left;
}
.article-body th {
  background: var(--panel-2);
  color: var(--t1);
  font-weight: 600;
}
.article-body table tr:nth-child(2n) { background: rgba(255, 255, 255, .02); }
.article-body table tr:hover { background: rgba(75, 243, 200, .05); }

/* 5) 图片：圆角卡片化 */
.article-body img {
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  margin: 8px 0;
}

/* 6) 引用块：薄荷青竖线 + 面板底 */
.article-body blockquote {
  border-left: 3px solid var(--mint);
  background: var(--panel);
  border-radius: 0 12px 12px 0;
  padding: 14px 20px;
  margin: 24px 0;
  color: var(--t3);
}
.article-body blockquote p { margin-bottom: .4em; }

/* 7) 标题层级与分隔线 */
.article-body h1, .article-body h2, .article-body h3,
.article-body h4, .article-body h5 {
  color: var(--t1);
  font-weight: 700;
  line-height: 1.4;
  margin: 1.8em 0 .7em;
}
.article-body h2 { font-size: 1.45em; padding-bottom: .35em; border-bottom: 1px solid var(--line); }
.article-body h3 { font-size: 1.2em; }
.article-body h3::before {
  content: "///";
  color: var(--mint);
  font-family: var(--font-mono);
  font-size: .75em;
  margin-right: .6em;
  vertical-align: middle;
}
.article-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 34px 0;
}

/* 8) 正文链接与强调 */
.article-body a { color: var(--sky); text-decoration: none; border-bottom: 1px dashed rgba(64, 170, 255, .4); }
.article-body a:hover { color: var(--mint); border-bottom-color: var(--mint); }
.article-body strong, .article-body b { color: var(--t1); }

/* 22a. 修正：为带行号的代码块保留行号列空间（padding 简写覆盖了 prism 的 padding-left） */
.article-body pre[class*="language-"].line-numbers {
  padding-left: 4.2em;
}
.article-body pre .line-numbers-rows > span::before {
  color: var(--t4);   /* 行号调亮（--t5 在深底上几乎不可见） */
}

/* 22b. 去掉运算符的半透明白底（prism.css 原为浅色主题设计：
   .token.operator/.entity/.url 背景 hsla(0,0%,100%,.5)，深底上是突兀的淡白色块） */
.article-body .token.operator,
.article-body .token.entity,
.article-body .token.url {
  background: transparent;
  text-shadow: none;
}
/* 选中代码时的选区底色也深色化（prism.css 原为浅蓝 #b3d4fc） */
.article-body pre[class*="language-"] ::selection,
.article-body pre[class*="language-"]::selection,
.article-body code[class*="language-"] ::selection,
.article-body code[class*="language-"]::selection {
  background: rgba(75, 243, 200, .25);
  text-shadow: none;
}

/* ==========================================================================
   23. CTA 按钮（注册 / 进入数据流 / 查看热门）
   对齐设计稿：渐变底胶囊 + hover 薄荷青光晕；再加与 Logo 一致的渐变流动
   ========================================================================== */
.nav-cta-signup,
.hero-btn-primary,
.account-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  /* 三色渐变（蓝→青→蓝）铺 200% 画布：hover 窗口从左半滑到右半，
     颜色由「蓝→青」明显反转为「青→蓝」，与 Logo 的对调感一致 */
  background-image: linear-gradient(92deg, var(--beam) 0%, var(--mint) 50%, var(--beam) 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  color: #0d0f14;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background-position .5s var(--ease-spring),
              box-shadow .4s var(--ease-out),
              transform .4s var(--ease-spring);
}
/* 注册按钮（导航，较小） */
.nav-cta-signup { padding: 8px 20px; font-size: 14px; }
/* 进入数据流（Hero 主按钮，较大） */
.hero-btn-primary { padding: 14px 32px; font-size: 15px; }
/* 登录/注册（卡片内整宽提交按钮） */
.account-submit { padding: 11px 24px; font-size: 15px; width: 100%; }

/* 悬停：渐变流动 + 薄荷青光晕 + 轻微放大（与 Logo 一致的渐变动效） */
.nav-cta-signup:hover,
.hero-btn-primary:hover,
.account-submit:hover {
  background-position: 100% 0%;
  color: #0d0f14;
  text-decoration: none;
  transform: scale(1.04);
}
.nav-cta-signup:hover { box-shadow: 0 0 24px rgba(75, 243, 200, .45); }
.hero-btn-primary:hover { box-shadow: 0 0 36px rgba(75, 243, 200, .5); }
.account-submit:hover { box-shadow: 0 0 28px rgba(75, 243, 200, .5); }

/* 进入数据流按钮的 ↓ 箭头悬停微下移 */
.hero-btn-primary span { transition: transform .3s var(--ease-out); }
.hero-btn-primary:hover span { transform: translateY(2px); }

/* 查看热门文章（Hero 幽灵按钮） */
.hero-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 32px; font-size: 15px; font-weight: 600;
  color: var(--t2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  text-decoration: none;
  transition: all .3s var(--ease-out);
}
.hero-btn-ghost:hover {
  color: #fff;
  border-color: var(--mint);
  box-shadow: 0 0 20px rgba(75, 243, 200, .25);
  text-decoration: none;
}

/* 登录（导航文字按钮，保持克制） */
.nav-cta-login { color: var(--t3); text-decoration: none; transition: all .3s var(--ease-out); }
.nav-cta-login:hover { color: #fff; background: rgba(255, 255, 255, .05); text-decoration: none; }