/* ============================================================
   主题增强层 · 极光玻璃 (theme-neon.css)
   ------------------------------------------------------------
   这是一个「叠加层」：只覆盖视觉，不动任何结构和逻辑。
   删除 index.html 里引用它的那一行 <link> 即可完全恢复原样。

   ★ 想快速改风格，只需要动下面【调参区】的变量。
   ============================================================ */

/* ---------------------------- 调参区 ---------------------------- */
:root {
  /* 三个主色调，决定整体氛围：极光 = 蓝紫 + 品红 + 青 */
  --tn-c1: #6366f1;   /* 蓝紫 */
  --tn-c2: #a855f7;   /* 品红 */
  --tn-c3: #06b6d4;   /* 青 */

  /* 光晕强度：越大越"霓虹"。设为 0 就是纯净玻璃风 */
  --tn-glow-alpha: 0.30;

  /* 玻璃虚化程度（px），低端设备卡可以调到 0 */
  --tn-blur: 14px;

  /* 卡片入场动画时长 */
  --tn-anim: 0.45s;
}

/* 深色模式下降低一点光晕，避免刺眼 */
@media (prefers-color-scheme: dark) {
  :root {
    --tn-glow-alpha: 0.22;
  }
}

/* ---------------------------- 1. 极光背景 ---------------------------- */
body {
  background-attachment: fixed;
  background-image:
    radial-gradient(1100px 580px at 8% -12%,
      color-mix(in srgb, var(--tn-c1) 30%, transparent), transparent 62%),
    radial-gradient(820px 460px at 102% -4%,
      color-mix(in srgb, var(--tn-c3) 26%, transparent), transparent 58%),
    radial-gradient(900px 720px at 48% 112%,
      color-mix(in srgb, var(--tn-c2) 26%, transparent), transparent 62%);
}

/* 让主容器本身透明，透出上面的极光 */
#app {
  background: transparent;
}

/* ---------------------------- 2. 玻璃卡片 ---------------------------- */
.card,
.list-item,
.stat,
.sheet,
.chart-box,
.auth-wrap {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  -webkit-backdrop-filter: blur(var(--tn-blur)) saturate(160%);
  backdrop-filter: blur(var(--tn-blur)) saturate(160%);
  box-shadow:
    0 1px 0 0 color-mix(in srgb, #fff 8%, transparent) inset,
    0 10px 30px -12px color-mix(in srgb, var(--tn-c1) 45%, transparent);
}

/* 顶部栏 & 底部导航：磨砂悬浮 */
.topbar,
.bottomnav {
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter: blur(calc(var(--tn-blur) + 4px)) saturate(180%);
  backdrop-filter: blur(calc(var(--tn-blur) + 4px)) saturate(180%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.bottomnav {
  border-bottom: none;
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

/* ---------------------------- 3. 渐变主按钮 ---------------------------- */
.btn.primary {
  background-image: linear-gradient(120deg, var(--tn-c1), var(--tn-c2));
  border: none;
  box-shadow:
    0 6px 20px -6px color-mix(in srgb, var(--tn-c1) calc(var(--tn-glow-alpha) * 100%), transparent),
    0 1px 0 0 color-mix(in srgb, #fff 22%, transparent) inset;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.btn.primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.btn.primary:active {
  transform: translateY(0) scale(0.985);
}

/* 次级按钮也给个淡玻璃底，避免在极光背景上"飘" */
.btn.ghost,
.clr-btn {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

/* ---------------------------- 4. 评分按钮的高亮态 ---------------------------- */
.scale button,
.stepper button {
  transition: transform 0.14s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.scale button.on {
  background-image: linear-gradient(135deg, var(--tn-c1), var(--tn-c2));
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px) scale(1.06);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--tn-c2) 22%, transparent),
    0 8px 22px -6px color-mix(in srgb, var(--tn-c1) calc(var(--tn-glow-alpha) * 130%), transparent);
}

/* 有值的「是」按钮 */
.toggle button.on {
  background-image: linear-gradient(135deg, var(--tn-c3), var(--tn-c1));
  border-color: transparent;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--tn-c3) 60%, transparent);
}

/* ---------------------------- 5. 选中态标签页 ---------------------------- */
.tabs button.active {
  background-image: linear-gradient(120deg, var(--tn-c1), var(--tn-c2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--tn-c1) 70%, transparent);
}

/* ---------------------------- 6. 数据区点缀 ---------------------------- */
/* 统计数字用渐变文字，视觉重量更强 */
.stat .value,
.stat .val {
  background-image: linear-gradient(120deg, var(--tn-c1), var(--tn-c3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* 热力图：按强度叠发光 */
.heatmap .cell {
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.heatmap .cell[data-l="3"],
.heatmap .cell[data-l="4"] {
  box-shadow: 0 0 10px -1px color-mix(in srgb, var(--tn-c1) 55%, transparent);
}

.heatmap .cell:hover {
  transform: scale(1.35);
  z-index: 2;
}

/* 徽标 */
.badge {
  background: color-mix(in srgb, var(--tn-c2) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tn-c2) 30%, transparent);
}

/* ---------------------------- 7. 入场动画 ---------------------------- */
@keyframes tn-rise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.card,
.list-item,
.stat,
.field-row {
  animation: tn-rise var(--tn-anim) cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* 依次错开，做出"浮上来"的层次感 */
.card:nth-child(1) { animation-delay: 0.02s; }
.card:nth-child(2) { animation-delay: 0.06s; }
.card:nth-child(3) { animation-delay: 0.10s; }
.card:nth-child(4) { animation-delay: 0.14s; }
.card:nth-child(5) { animation-delay: 0.18s; }
.card:nth-child(n + 6) { animation-delay: 0.22s; }

/* ---------------------------- 8. 滚动条 & 细节 ---------------------------- */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--tn-c1) 40%, transparent);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--tn-c1) 65%, transparent);
  background-clip: content-box;
}

/* 聚焦环统一成主色 */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--tn-c2) 70%, transparent);
  outline-offset: 2px;
}

/* 注意：硬编码的 #fff 在浅色/深色下都是"渐变按钮上的文字"，
   因为渐变本身是深色到中色，所以白字在两种模式下对比度都够。 */

/* ---------------------------- 9. 无障碍：尊重"减少动效" ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .card,
  .list-item,
  .stat,
  .field-row {
    animation: none;
  }

  .scale button.on,
  .btn.primary:hover,
  .heatmap .cell:hover {
    transform: none;
  }
}