/* ==========================================================================
   Space Cyber Timeline — 深空主题（v3 重设计）
   仅做优雅换肤：保留 TimelineJS 原生布局与比例，只调整色彩/字体/细节。
   设计语言：深空蓝黑 × 柔和青蓝 / 克制的高光 / 清晰层级。
   ========================================================================== */

.stctl-dark {
  /* —— 设计令牌 —— */
  --bg0: #070b1c;
  --bg1: #0b1126;
  --bg2: #111a38;
  --bg3: #1a2649;
  --line: rgba(122, 162, 255, 0.16);
  --line-strong: rgba(122, 162, 255, 0.34);
  --cyan: #22d3ee;
  --cyan-soft: rgba(34, 211, 238, 0.14);
  --blue: #7aa2ff;
  --violet: #a78bfa;
  --text: #eef3fb;
  --text-dim: #c2d0e6;
  --text-faint: #8aa2c8;
  --card: rgba(18, 27, 52, 0.78);
  --card-hover: rgba(22, 34, 64, 0.9);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, "JetBrains Mono", Menlo, monospace;
}

/* ============================================================
   1. 基础：页面与时间轴容器
   ============================================================ */
html.stctl-dark,
body.stctl-dark {
  background: var(--bg0) !important;
  color: var(--text) !important;
}
.stctl-dark .tl-timeline,
.stctl-dark .tl-slider-container-wrapper {
  background: radial-gradient(1100px 560px at 12% -6%, rgba(122, 162, 255, 0.10), transparent 62%),
    radial-gradient(900px 500px at 88% 6%, rgba(34, 211, 238, 0.08), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0)) !important;
  color: var(--text) !important;
}
/* TimelineJS 内联白底全部拦截为透明/深色 */
.stctl-dark .tl-slider-background,
.stctl-dark .tl-slider-container-background,
.stctl-dark .tl-slider-container-mask,
.stctl-dark .tl-slide-background,
.stctl-dark .tl-slideshow,
.stctl-dark .tl-slide,
.stctl-dark .tl-slide-content-container,
.stctl-dark .tl-slide-scrollable-container {
  background-image: none !important;
  background-color: transparent !important;
}

/* ============================================================
   2. 正文排版（原生布局不变，仅配色）
   ============================================================ */
/* 最广泛兜底：时间轴内文本一律浅色，具体元素再细化 */
.stctl-dark .tl-timeline,
.stctl-dark .tl-timeline * {
  color: inherit;
}
.stctl-dark .tl-slider .tl-slide h1,
.stctl-dark .tl-slider .tl-slide h2,
.stctl-dark .tl-slider .tl-slide h3,
.stctl-dark .tl-slider .tl-slide h4,
.stctl-dark .tl-slider .tl-slide h5,
.stctl-dark .tl-text-content h1,
.stctl-dark .tl-text-content h2,
.stctl-dark .tl-text-content h3,
.stctl-dark .tl-text-content h4,
.stctl-dark h2.tl-headline-title,
.stctl-dark .tl-timeline h1,
.stctl-dark .tl-timeline h2,
.stctl-dark .tl-timeline h3,
.stctl-dark .tl-timeline h4 {
  color: var(--text) !important;
}
.stctl-dark .tl-slide h2.tl-headline-title {
  font-weight: 700;
}
.stctl-dark .tl-timeline p,
.stctl-dark .tl-text-content p,
.stctl-dark .tl-credit,
.stctl-dark .tl-slide .tl-text,
.stctl-dark .tl-slide .tl-text p,
.stctl-dark .tl-slide .tl-text span,
.stctl-dark .tl-slide .tl-text time,
.stctl-dark .tl-slide .tl-text blockquote,
.stctl-dark .tl-slide .tl-text li,
.stctl-dark .tl-text-body,
.stctl-dark .tl-media-presentation,
.stctl-dark .tl-slide .tl-text-content {
  color: var(--text-dim) !important;
}
.stctl-dark .tl-slide .tl-text-content p,
.stctl-dark .tl-timeline .tl-text-content p,
.stctl-dark .tl-slide .tl-text .tl-text-content p {
  color: var(--text-dim) !important;
  font-weight: 400;
}
.stctl-dark .tl-timeline p a,
.stctl-dark .tl-text-content a,
.stctl-dark .tl-credit a {
  color: var(--cyan) !important;
  text-decoration: none !important;
}
.stctl-dark .tl-timeline p a:hover {
  color: var(--blue) !important;
}
.stctl-dark .tl-headline-date {
  color: var(--cyan) !important;
}
.stctl-dark .tl-timeline .tl-attribution {
  color: var(--text-faint) !important;
}
.stctl-dark .tl-caption {
  color: var(--text-faint) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
}
.stctl-dark .tl-caption a {
  color: var(--cyan) !important;
}

/* 图片收个角 */
.stctl-dark .tl-media-content-container .tl-media-content img,
.stctl-dark .tl-media img {
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

/* ============================================================
   3. 顶部菜单栏
   ============================================================ */
.stctl-dark .tl-menubar {
  background: var(--card) !important;
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.stctl-dark .tl-menubar .tl-menubar-button {
  color: var(--text-dim) !important;
  filter: none !important;
}
.stctl-dark .tl-menubar .tl-menubar-button:hover {
  color: var(--cyan) !important;
}
.stctl-dark .tl-menubar .tl-menubar-button svg,
.stctl-dark .tl-menubar .tl-menubar-button * {
  fill: currentColor !important;
}

/* ============================================================
   4. 左右上一篇 / 下一篇
   ============================================================ */
.stctl-dark .tl-slidenav {
  background: transparent !important;
  background-image: none !important;
}
.stctl-dark .tl-slidenav-content,
.stctl-dark .tl-slidenav-content-container {
  background: var(--card) !important;
  background-image: none !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 10px;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 2px;
}
.stctl-dark .tl-slidenav:hover .tl-slidenav-content {
  background: var(--card-hover) !important;
  border-color: rgba(34, 211, 238, 0.5) !important;
}
.stctl-dark .tl-slidenav-title,
.stctl-dark .tl-slidenav-next .tl-slidenav-title,
.stctl-dark .tl-slidenav-previous .tl-slidenav-title {
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4;
  text-indent: 0 !important;
  white-space: nowrap !important;
  width: auto !important;
  display: block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.stctl-dark .tl-slidenav-description,
.stctl-dark .tl-slidenav-next .tl-slidenav-description,
.stctl-dark .tl-slidenav-previous .tl-slidenav-description {
  display: none !important;
}
.stctl-dark .tl-slidenav-icon {
  color: var(--cyan) !important;
  filter: none !important;
  font-size: 18px !important;
  display: block !important;
  line-height: 1;
}

/* ============================================================
   5. 底部时间导航条
   ============================================================ */
.stctl-dark .tl-timenav {
  background: linear-gradient(180deg, rgba(9, 13, 30, 0.85), var(--bg1)) !important;
  background-image: none !important;
  border-top: 1px solid var(--line) !important;
}
.stctl-dark .tl-timenav-slider,
.stctl-dark .tl-timenav-slider-background,
.stctl-dark .tl-timenav-container-mask,
.stctl-dark .tl-timenav-container {
  background-image: none !important;
  background-color: transparent !important;
}
.stctl-dark .tl-timenav .tl-timenav-line {
  background: linear-gradient(90deg, transparent, rgba(122, 162, 255, 0.5), rgba(34, 211, 238, 0.6), rgba(122, 162, 255, 0.5), transparent) !important;
  height: 2px !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.4);
}
.stctl-dark .tl-timenav .tl-timenav-line-emphasis {
  background: linear-gradient(90deg, var(--cyan), var(--blue)) !important;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.6) !important;
}
.stctl-dark .tl-timenav .tl-timenav-time {
  color: var(--cyan) !important;
  font-weight: 600;
}

/* ============================================================
   6. 事件选项卡（timemarker）
   ============================================================ */
.stctl-dark .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content {
  background: var(--card) !important;
  background-image: none !important;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.stctl-dark .tl-timemarker:hover .tl-timemarker-content-container .tl-timemarker-content {
  background: var(--card-hover) !important;
  border-color: rgba(122, 162, 255, 0.5);
}
.stctl-dark .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline,
.stctl-dark .tl-timemarker h2.tl-headline {
  color: var(--text-dim) !important;
  font-weight: 600;
  font-size: 12px !important;
  line-height: 15px !important;
  height: auto !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin: 0;
}
/* 事件选项卡：默认即显示标题（不依赖 hover），隐藏装饰性 icon */
.stctl-dark .tl-timemarker .tl-timemarker-text,
.stctl-dark .tl-timemarker .tl-timemarker-text h2.tl-headline {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}
.stctl-dark .tl-timemarker .tl-timemarker-media-container {
  display: none !important;
}
.stctl-dark .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text {
  margin-left: 0;
  padding-left: 4px;
}
.stctl-dark .tl-timemarker .tl-timemarker-content-container {
  width: auto !important;
  min-width: 128px;
}
.stctl-dark .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline,
.stctl-dark .tl-timemarker h2.tl-headline {
  color: var(--text-dim) !important;
  font-weight: 600;
  font-size: 12px !important;
  line-height: 15px !important;
  height: auto !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin: 0;
}
.stctl-dark .tl-timemarker:hover .tl-timemarker-text h2.tl-headline,
.stctl-dark .tl-timemarker.active .tl-timemarker-text h2.tl-headline {
  color: var(--text) !important;
  -webkit-line-clamp: 2;
}
.stctl-dark .tl-timemarker .tl-timemarker-media-container [class^="tl-icon-"],
.stctl-dark .tl-timemarker .tl-timemarker-media-container [class*=" tl-icon-"] {
  color: var(--blue) !important;
  filter: none !important;
  font-size: 16px !important;
}
.stctl-dark .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text {
  min-width: 90px !important;
}
/* 当前激活的选项卡 */
.stctl-dark .tl-timemarker.active .tl-timemarker-content-container .tl-timemarker-content,
.stctl-dark .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container .tl-timemarker-content {
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.20), rgba(34, 211, 238, 0.06)) !important;
  border-color: var(--cyan) !important;
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.3),
    0 6px 22px rgba(34, 211, 238, 0.22) !important;
}
.stctl-dark .tl-timemarker.active .tl-timemarker-text h2.tl-headline {
  color: #fff !important;
}
/* 年份刻度点 */
.stctl-dark .tl-timemarker .tl-timemarker-timespan .tl-timemarker-line-right,
.stctl-dark .tl-timemarker .tl-timemarker-timespan .tl-timemarker-line-left {
  display: none !important;
}

/* 分组色带（地面段/通信链路/供应链/空间段/GNSS-PNT） */
.stctl-dark .tl-timegroup,
.stctl-dark .tl-timegroup.tl-timegroup-alternate {
  background: linear-gradient(90deg, rgba(13, 22, 48, 0.95), rgba(20, 32, 64, 0.72)) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--line);
}
.stctl-dark .tl-timegroup .tl-timegroup-message {
  color: var(--cyan) !important;
  text-shadow: none !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-left: 40px !important;
}
.stctl-dark .tl-timenav-item .tl-timenav-tick .tl-timenav-tick-inner {
  background-color: #3c5587 !important;
  height: 9px !important;
  width: 9px !important;
  border-radius: 50% !important;
}
.stctl-dark .tl-timenav-item.current .tl-timenav-tick .tl-timenav-tick-inner {
  background-color: var(--cyan) !important;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.8) !important;
}

/* ============================================================
   7. 滚动条 / 焦点
   ============================================================ */
.stctl-dark .tl-timeline ::-webkit-scrollbar { width: 10px; height: 10px; }
.stctl-dark .tl-timeline ::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 6px; }
.stctl-dark .tl-timeline ::-webkit-scrollbar-track { background: var(--bg0); }
.stctl-dark .tl-timeline :focus-visible {
  outline: 2px solid var(--cyan) !important;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .stctl-dark .tl-timeline,
  .stctl-dark .tl-timeline * {
    animation: none !important;
    transition: none !important;
  }
}