/* ===== 折线时间轴 · 完整版（含坐标轴） ===== */
:root{
  --line-color: #667eea;          /* 折线 + 圆点 */
  --popup-bg: #ffffff;
  --popup-border: #e5e5e5;
  --popup-text: #555;
  --popup-title: #222;
  --popup-time: #667eea;
  --popup-shadow: 0 8px 24px rgba(0,0,0,.12);
  --popup-radius: 12px;
  --line-thick: 3px;
  --point-r: 6px;
  --point-r-hover: 8px;
  --axis-color: #ccc;     /* 轴线颜色 */
  --tick-text: #888;      /* 刻度文字 */
  --axis-thick: 2px;      /* 轴线粗细 */
  --radius-cap: round;    /* 圆角首尾 */
}

@media (prefers-color-scheme: dark){
  :root{
    --line-color: #4f46e5;
    --popup-bg: #1e1e1e;
    --popup-border: #444;
    --popup-text: #ddd;
    --popup-title: #f1f1f1;
    --popup-time: #4f46e5;
    --popup-shadow: 0 8px 24px rgba(0,0,0,.4);
    --axis-color: #555;
    --tick-text: #aaa;
  }
}

.line-chart-timeline{
  position: relative;
  margin: 40px auto;
  max-width: 840px;
  padding: 0 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* SVG 折线 */
.line-svg{
  width: 100%;
  height: 200px;
  display: block;
}
.line-path{
  fill: none;
  stroke: var(--line-color);
  stroke-width: var(--line-thick);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.line-point{
  fill: var(--popup-bg);
  stroke: var(--line-color);
  stroke-width: var(--line-thick);
  cursor: pointer;
  transition: r .2s, stroke-width .2s;
  r: var(--point-r);
}
.line-point:hover{
  r: var(--point-r-hover);
  stroke-width: calc(var(--line-thick) + 1px);
}

/* 气泡卡片 */
.line-popup{
  position: absolute;
  background: var(--popup-bg);
  border: 1px solid var(--popup-border);
  border-radius: var(--popup-radius);
  padding: 16px 20px;
  box-shadow: var(--popup-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s;
  z-index: 10;
  min-width: 220px;
}
.line-popup.show{
  opacity: 1;
  transform: translateY(0);
}
.line-time{
  font-size: 12px;
  font-weight: 600;
  color: var(--popup-time);
}
.line-title{
  font-size: 16px;
  font-weight: 700;
  color: var(--popup-title);
  margin: 6px 0 4px;
}
.line-desc{
  font-size: 14px;
  color: var(--popup-text);
  line-height: 1.6;
  margin: 0;
}

/* 移动端 */
@media (max-width: 600px){
  .line-svg{ height: 150px; }
  .line-popup{ min-width: 180px; }
}

/* ========= 坐标轴 & 刻度（仅 X 轴时间） ========= */
.axis{
  stroke: var(--axis-color);
  stroke-width: var(--axis-thick);
  stroke-linecap: var(--radius-cap);
}
.x-axis{ stroke-dasharray: 6 4; }   /* X 轴轻虚线 */
.y-axis{ stroke-dasharray: none; }  /* Y 轴实竖条 */

/* X 轴时间刻度 */
.x-ticks text{
  font-size: 12px;
  fill: var(--tick-text);
  text-anchor: middle;
  dominant-baseline: hanging;   /* 文字悬在轴下方 */
}

/* 黑夜统一 */
@media (prefers-color-scheme: dark){
  .axis{ stroke: var(--axis-color); }
  .x-ticks text{ fill: var(--tick-text); }
}

/* ===== 博客发展史标题 ===== */
.hero-title.plain-center{
  text-align: center;
  padding: 2.5rem 1rem 2rem;          /* 上下留白即可 */
  background: none;                   /* 确保无背景 */
}
.hero-title.plain-center h1{
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: .5px;
  margin: 0 0 .5em;
}
.hero-title.plain-center .hero-sub{
  font-size: 1rem;
  color: #666;
}
@media (prefers-color-scheme: dark){
  .hero-title.plain-center .hero-sub{ color: #aaa; }
}
@media (max-width: 600px){
  .hero-title.plain-center h1{ font-size: 1.8rem; }
}

/* ===== 后台内容 ===== */
.blog-history{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  padding: 60px 20px;
  max-width: 840px;
  margin:  auto;   /* 上边 60px，左右 auto，下边自动 */
}