/* =====================================================================
   星舰7 证据库 · 亮色清新主题
   在 main.css 之后加载：白底 + 清蓝，通透轻量
   ===================================================================== */

:root {
  --bg: #f6f9ff;
  --bg-2: #ffffff;
  --bg-3: #eef4ff;

  --line: rgba(20, 70, 140, 0.11);
  --line-2: rgba(20, 70, 140, 0.22);

  --fg: #0d1e35;
  --fg-2: #4a5d7a;
  --fg-3: #8496ae;

  --blue: #1f6feb;
  --blue-dim: rgba(31, 111, 235, 0.08);
  --cyan: #0fa3c0;
  --cyan-dim: rgba(15, 163, 192, 0.08);
  --red: #d93a3a;
  --red-dim: rgba(217, 58, 58, 0.07);
  --amber: #b87a14;

  --shadow-soft: 0 10px 30px -14px rgba(24, 78, 155, 0.16);
  --shadow-card: 0 18px 44px -22px rgba(24, 78, 155, 0.22);

  color-scheme: light;
}

body {
  background: var(--bg);
  background-image:
    radial-gradient(1100px 560px at 50% -10%, #e6f1ff 0%, rgba(246, 249, 255, 0) 66%),
    radial-gradient(760px 420px at 92% 2%, rgba(15, 163, 192, 0.07) 0%, rgba(246, 249, 255, 0) 62%);
  background-repeat: no-repeat;
  color: var(--fg);
}

/* ---------- 光标光晕在亮色下会发灰，直接关掉 ---------- */

.cursor-glow {
  display: none;
}

.scroll-progress i {
  box-shadow: none;
}

/* ---------- 导航 ---------- */

.nav {
  background: rgba(246, 249, 255, 0.72);
  border-bottom: 1px solid transparent;
}

.nav.is-stuck {
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -18px rgba(24, 78, 155, 0.4);
}

.logo-mark {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
}

.nav-links a {
  color: var(--fg-2);
}

.nav-links a:hover {
  color: var(--fg);
  background: rgba(31, 111, 235, 0.07);
}

.nav-cta {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 8px 20px -12px rgba(31, 111, 235, 0.8);
}

.nav-cta:hover {
  background: #145fd6;
}

/* ---------- 首屏 ---------- */

.hero {
  background: linear-gradient(180deg, #eef6ff 0%, #f8fbff 62%, var(--bg) 100%);
}

.hero-grid {
  background-image:
    linear-gradient(rgba(31, 111, 235, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 111, 235, 0.10) 1px, transparent 1px);
  opacity: 0.6;
}

.hero-orb {
  opacity: 0.55;
  filter: blur(90px);
}

.orb-1 {
  background: radial-gradient(circle, rgba(80, 160, 255, 0.42), rgba(80, 160, 255, 0) 68%);
}

.orb-2 {
  background: radial-gradient(circle, rgba(64, 210, 230, 0.34), rgba(64, 210, 230, 0) 68%);
}

.hero-noise {
  opacity: 0.02;
}

.hero-eyebrow {
  color: var(--fg-2);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-eyebrow .dot {
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(31, 111, 235, 0.14);
}

.hero-title {
  color: var(--fg);
}

.hero-title .line:nth-child(2) .line-inner {
  background: linear-gradient(96deg, #0d1e35 0%, #1f6feb 36%, #12a8c6 64%, #0d1e35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  color: var(--fg-2);
}

.hero-sub b {
  color: var(--blue);
  background: rgba(31, 111, 235, 0.08);
}

.hero-meta,
.hero-meta span {
  color: var(--fg-3);
}

.hero-meta .sep {
  background: var(--line-2);
}

.scroll-hint span {
  color: var(--fg-3);
}

.scroll-hint i {
  background: var(--line-2);
}

/* ---------- 按钮 ---------- */

.btn-primary {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 12px 26px -14px rgba(31, 111, 235, 0.9);
}

.btn-primary:hover {
  background: #145fd6;
  box-shadow: 0 16px 34px -14px rgba(31, 111, 235, 1);
}

.btn-ghost {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line-2);
}

.btn-ghost:hover {
  background: #fff;
  border-color: rgba(20, 70, 140, 0.32);
}

/* ---------- 区块 ---------- */

.sec-kicker {
  color: var(--blue);
}

.sec-title {
  background: linear-gradient(180deg, #0d1e35 20%, #2b6bb5);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sec-lead {
  color: var(--fg-2);
}

/* ---------- 数字卡 ---------- */

.stat-grid {
  background: var(--line);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

.stat-card {
  background: #fff;
}

.stat-card:hover {
  background: #f7fbff;
}

.stat-value {
  background: linear-gradient(180deg, #0d1e35 10%, #1f6feb);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-value em {
  color: var(--fg-3);
  -webkit-text-fill-color: var(--fg-3);
}

.stat-label {
  color: var(--fg-2);
}

/* ---------- 型号对照 ---------- */

.vs-side {
  background: #fff;
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

.vs-side-warn {
  background: linear-gradient(180deg, #fff6f6, #fffdfd);
  border-color: rgba(217, 58, 58, 0.28);
}

.vs-tag {
  color: var(--fg-3);
  background: var(--bg-3);
}

.vs-tag-warn {
  color: var(--red);
  background: var(--red-dim);
}

.vs-name {
  color: var(--fg);
}

.vs-side-warn .vs-name {
  color: var(--red);
  text-shadow: none;
}

.vs-alias,
.vs-list span {
  color: var(--fg-3);
}

.vs-list b {
  color: var(--fg);
}

.vs-list li {
  border-bottom: 1px solid var(--line);
}

.vs-neq {
  color: var(--blue);
  border-color: var(--line-2);
  background: #fff;
}

.chip-proof img,
.proof-fig img {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.proof-fig figcaption {
  color: var(--fg-3);
}

/* ---------- 证据库 ---------- */

.tab {
  color: var(--fg-2);
  background: #fff;
  border-color: var(--line);
}

.tab span {
  background: var(--bg-3);
  color: var(--fg-3);
}

.tab:hover {
  color: var(--fg);
  border-color: var(--line-2);
}

.tab.is-on {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 10px 22px -12px rgba(31, 111, 235, 0.9);
}

.tab.is-on span {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.ecard {
  background: #fff;
  border-color: var(--line);
}

.ecard:hover {
  border-color: rgba(31, 111, 235, 0.42);
  box-shadow: var(--shadow-card);
}

.ecard-img {
  background: var(--bg-3);
}

.ecard-tag {
  color: var(--blue);
  background: rgba(255, 255, 255, 0.94);
}

.ecard-cap {
  color: var(--fg-2);
}

.ecard-zoom {
  background: #fff;
  color: var(--blue);
  border: 1px solid var(--line-2);
}

/* ---------- 时间线 ---------- */

.tl::before {
  background: linear-gradient(180deg, rgba(31, 111, 235, 0.55), rgba(15, 163, 192, 0.28) 30%, rgba(20, 70, 140, 0.14) 90%, transparent);
}

.tl-dot {
  background: #fff;
  border: 2px solid rgba(31, 111, 235, 0.45);
}

.tl-item.is-in .tl-dot {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(31, 111, 235, 0.12);
}

.tl-hot .tl-dot {
  border-color: var(--red);
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(217, 58, 58, 0.14);
}

.tl-item time {
  color: var(--blue);
}

.tl-item h3 {
  color: var(--fg);
}

.tl-item p {
  color: var(--fg-2);
}

/* ---------- 行动卡 ---------- */

.action-card {
  background: #fff;
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

.action-card:hover {
  background: #f7fbff;
  border-color: rgba(31, 111, 235, 0.36);
  box-shadow: var(--shadow-card);
}

.action-idx {
  color: var(--blue);
}

.action-card h3 {
  color: var(--fg);
}

.action-card p {
  color: var(--fg-2);
}

.action-go {
  color: var(--blue);
}

/* ---------- 结尾 ---------- */

.outro {
  border-top-color: var(--line);
  background: linear-gradient(180deg, #f8fbff, #eef5ff);
}

.outro::before {
  background: radial-gradient(circle, rgba(31, 111, 235, 0.10), transparent 64%);
}

.outro-title {
  color: var(--fg);
}

.outro-text {
  color: var(--fg-2);
}

/* ---------- 页脚 ---------- */

.foot {
  background: #eaf1fb;
  border-top-color: var(--line);
}

.foot p {
  color: #61738c;
}

/* ---------- 灯箱（看图仍用深底，保证原图对比） ---------- */

.lightbox {
  background: rgba(10, 20, 36, 0.93);
}

/* ---------- 打印 ---------- */

@media print {
  body {
    background: #fff !important;
    background-image: none !important;
  }
}

/* ---------- 亮底下的深色专用色修正 ---------- */

.vs-list b.warn {
  color: #c02626;
}

.tl-hot h3 {
  color: #c02626;
}

.vs-side-warn .vs-list b {
  color: #b32b2b;
}

.hero-meta span,
.scroll-hint span {
  color: #6d7f99;
}

.ecard-tag {
  color: #145fd6;
}

/* ---------- 手机端细节 ---------- */

@media (max-width: 720px) {
  /* 首屏底部两行说明：去掉中间的小圆点，改成规整的两行 */
  .hero-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .hero-meta .sep {
    display: none;
  }

  .hero-foot {
    padding: 0 4px;
  }

  /* 数字卡在窄屏更紧凑，避免一屏只看到两张 */
  .stat-card {
    padding: 26px 18px 22px;
  }

  .stat-value {
    font-size: clamp(30px, 9vw, 42px);
  }

  /* 证据卡说明文字多一行也留够高度 */
  .ecard-cap {
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  .hero-title {
    letter-spacing: -0.05em;
  }

  .stat-card {
    padding: 22px 14px 18px;
  }
}