/**
 * 亮色 / 暗色主题（html 上挂 data-theme="light" 为亮色；默认暗色）
 */

:root {
  --bg-page: #0f0c29;
  --modal-bg: rgba(15, 12, 41, 0.95);
  --overlay: rgba(0, 0, 0, 0.7);
  --text-primary: #ffffff;
  --title-gradient: linear-gradient(90deg, #ffffff 0%, #667eea 50%, #00d4ff 100%);
  --star-dot: #ffffff;
  --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.5);

  --w03: rgba(255, 255, 255, 0.03);
  --w04: rgba(255, 255, 255, 0.04);
  --w05: rgba(255, 255, 255, 0.05);
  --w06: rgba(255, 255, 255, 0.06);
  --w08: rgba(255, 255, 255, 0.08);
  --w10: rgba(255, 255, 255, 0.1);
  --w12: rgba(255, 255, 255, 0.12);
  --w15: rgba(255, 255, 255, 0.15);
  --w20: rgba(255, 255, 255, 0.2);
  --w40: rgba(255, 255, 255, 0.4);
  --w50: rgba(255, 255, 255, 0.5);
  --w55: rgba(255, 255, 255, 0.55);
  --w60: rgba(255, 255, 255, 0.6);
  --w70: rgba(255, 255, 255, 0.7);
  --w78: rgba(255, 255, 255, 0.78);
  --w80: rgba(255, 255, 255, 0.8);
  --w90: rgba(255, 255, 255, 0.9);

  --code-bg: rgba(0, 0, 0, 0.3);
  --pre-bg: rgba(0, 0, 0, 0.4);
  --md-blockquote-border: rgba(255, 255, 255, 0.4);
  --md-hr: rgba(255, 255, 255, 0.2);
  --md-table-border: rgba(255, 255, 255, 0.2);
  --md-th-bg: rgba(0, 0, 0, 0.2);

  --shadow-card: rgba(0, 0, 0, 0.2);
  --shadow-card-hover: rgba(0, 0, 0, 0.3);
  --divider-row: rgba(255, 255, 255, 0.08);

  --chart-well-bg: transparent;

  --inv-panel-bg: rgba(0, 0, 0, 0.25);

  --link: #66b3ff;
  --link-hover: #99ccff;
}

[data-theme="light"] {
  --bg-page: linear-gradient(165deg, #eef2ff 0%, #f8fafc 42%, #e4e9ff 100%);
  --modal-bg: rgba(255, 255, 255, 0.98);
  --overlay: rgba(15, 23, 42, 0.45);
  --text-primary: #0f172a;
  --title-gradient: linear-gradient(90deg, #312e81 0%, #6366f1 48%, #0891b2 100%);
  --star-dot: rgba(99, 102, 241, 0.35);
  --shadow-deep: 0 24px 48px rgba(79, 70, 229, 0.12);

  --w03: rgba(255, 255, 255, 0.55);
  --w04: rgba(255, 255, 255, 0.65);
  --w05: rgba(255, 255, 255, 0.82);
  --w06: rgba(255, 255, 255, 0.72);
  --w08: rgba(255, 255, 255, 0.92);
  --w12: rgba(79, 70, 229, 0.14);
  --w10: rgba(79, 70, 229, 0.1);
  --w15: rgba(79, 70, 229, 0.12);
  --w20: rgba(79, 70, 229, 0.2);
  --w40: rgba(30, 41, 59, 0.42);
  --w50: rgba(30, 41, 59, 0.48);
  --w55: rgba(30, 41, 59, 0.62);
  --w60: rgba(30, 41, 59, 0.55);
  --w70: rgba(30, 41, 59, 0.68);
  --w78: rgba(30, 41, 59, 0.78);
  --w80: rgba(30, 41, 59, 0.82);
  --w90: rgba(15, 23, 42, 0.92);

  --code-bg: rgba(241, 245, 249, 0.95);
  --pre-bg: rgba(226, 232, 240, 0.95);
  --md-blockquote-border: rgba(99, 102, 241, 0.35);
  --md-hr: rgba(148, 163, 184, 0.45);
  --md-table-border: rgba(148, 163, 184, 0.4);
  --md-th-bg: rgba(238, 242, 255, 0.95);

  --shadow-card: rgba(79, 70, 229, 0.08);
  --shadow-card-hover: rgba(79, 70, 229, 0.14);
  --divider-row: rgba(15, 23, 42, 0.08);

  /* 与浅色卡片一致；勿用深色井底，否则 ECharts 画布外圈深色且与亮色坐标轴冲突 */
  --chart-well-bg: transparent;

  --inv-panel-bg: rgba(248, 250, 252, 0.95);

  --link: #2563eb;
  --link-hover: #1d4ed8;
}

.theme-toggle {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 10050;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--w20);
  background: var(--w05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px var(--shadow-card);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.theme-toggle:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 24px var(--shadow-card-hover);
  border-color: rgba(102, 126, 234, 0.45);
}

.theme-toggle:active {
  transform: scale(0.98);
}

/* 桌面端：与 .home-search-fab 的位置规则保持一致，确保两个按钮纵坐标对齐 */
@media (min-width: 1024px) {
  .theme-toggle {
    top: 24px;
    right: 24px;
  }
}

[data-theme="light"] .chart {
  background: var(--chart-well-bg);
  border-radius: 14px;
}