/* ============================================================
 * ChainScope AI — design-tokens.css
 * 设计系统唯一真相源(§8)。其它页面 <link> 此文件即可复用。
 * 变量名 --cs-* 在迁移到 Next.js/Tailwind 时保持不变,零成本。
 * dashboard.html 自带内联同名 tokens 以保证 file:// 双击可独立渲染;
 * 二者数值需保持一致 —— 改设计时以本文件为准。
 * ============================================================ */
:root{
  /* 评分语义色(热力矩阵 / 雷达 / KPI / 钱包 共用) */
  --cs-score-strong:#1D9E75;   /* ≥82 强信号 / 高质量确认 */
  --cs-score-high:#378ADD;     /* 74-81 中高 / 值得关注 */
  --cs-score-watch:#EF9F27;    /* 68-73 预警 / 早期信号 */
  --cs-score-weak:#888780;     /* <68  弱 / 噪音 */
  /* 涨跌 / 流入流出 */
  --cs-up:#1D9E75;
  --cs-down:#E24B4A;
  --cs-brand:#378ADD;
  /* 深色表面层次 */
  --cs-bg-page:#0A0C0E;
  --cs-bg-surface:#121519;
  --cs-bg-elevated:#1A1E23;
  --cs-bg-subtle:#1E232A;
  --cs-border:#272D34;
  --cs-border-soft:#1F242A;
  /* 文本 */
  --cs-text:#E9ECEF;
  --cs-text-2:#9AA1A9;
  --cs-text-3:#646B73;
  /* 字号 */
  --fs-display:28px; --fs-h1:22px; --fs-h2:18px; --fs-h3:15px;
  --fs-body:14px; --fs-label:12px; --fs-corner:11px;
  /* 间距 4pt */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px;
  /* 圆角 */
  --r-card:12px; --r-ctrl:8px; --r-pill:6px; --r-round:999px;
}
html[data-theme="light"]{
  --cs-bg-page:#F4F5F7; --cs-bg-surface:#FFFFFF; --cs-bg-elevated:#F8F9FB;
  --cs-bg-subtle:#EEF0F3; --cs-border:#E2E5E9; --cs-border-soft:#ECEEF1;
  --cs-text:#1A1D21; --cs-text-2:#5A626B; --cs-text-3:#9AA1A9;
}

/* ---------- 基础 ---------- */
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",
    "Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--fs-body); font-weight:400; line-height:1.45;
  background:var(--cs-bg-page); color:var(--cs-text);
  -webkit-font-smoothing:antialiased;
}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- 外壳 ---------- */
.cs-shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.cs-sidebar{
  background:var(--cs-bg-surface);border-right:.5px solid var(--cs-border);
  padding:var(--s6) var(--s4);position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;gap:var(--s6);
}
.cs-main{display:flex;flex-direction:column;min-width:0}

/* ---------- 卡片 ---------- */
.cs-card{
  background:var(--cs-bg-surface);border:.5px solid var(--cs-border);
  border-radius:var(--r-card);padding:var(--s4);display:flex;flex-direction:column;
}
.cs-card__title{font-size:var(--fs-h3);font-weight:500;display:flex;align-items:center;gap:8px}

/* ---------- 指标卡 + KPI 网格 ---------- */
.cs-grid--kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.cs-metric{
  background:var(--cs-bg-surface);border:.5px solid var(--cs-border);
  border-radius:var(--r-card);padding:var(--s4) var(--s4) var(--s3);
  display:flex;flex-direction:column;gap:var(--s2);position:relative;overflow:hidden;
}
.cs-metric__label{font-size:var(--fs-label);color:var(--cs-text-3)}
.cs-metric__value{font-size:var(--fs-display);font-weight:500;line-height:1}

/* ---------- 评分药丸 ---------- */
.cs-score{font-size:13px;font-weight:500;padding:3px 9px;border-radius:var(--r-pill);
  font-variant-numeric:tabular-nums;display:inline-flex;min-width:38px;justify-content:center}
.cs-score--strong{color:#fff;background:var(--cs-score-strong)}
.cs-score--high{color:#fff;background:var(--cs-score-high)}
.cs-score--watch{color:#1a1205;background:var(--cs-score-watch)}
.cs-score--weak{color:#fff;background:var(--cs-score-weak)}

/* ---------- 徽章 ---------- */
.cs-badge{font-size:var(--fs-corner);padding:3px 8px;border-radius:var(--r-round);
  border:.5px solid var(--cs-border);display:inline-flex;align-items:center;gap:5px}
.cs-badge--up{color:var(--cs-up);border-color:rgba(29,158,117,.4);background:rgba(29,158,117,.08)}
.cs-badge--down{color:var(--cs-down);border-color:rgba(226,75,74,.4);background:rgba(226,75,74,.08)}
.cs-badge--neutral{color:var(--cs-text-2)}

/* ---------- 状态点(数据源透明度 = 信任) ---------- */
.cs-status{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label);color:var(--cs-text-2)}
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.cs-status--live  .dot,.dot--live{background:var(--cs-up)}
.cs-status--demo  .dot,.dot--demo{background:var(--cs-score-watch)}
.cs-status--offline .dot,.dot--off{background:var(--cs-text-3)}

/* ---------- 按钮 ---------- */
.cs-btn{
  font-family:inherit;font-size:13px;padding:8px 14px;border-radius:var(--r-ctrl);
  border:.5px solid var(--cs-border);background:var(--cs-bg-elevated);
  color:var(--cs-text);cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:background .12s,border-color .12s;
}
.cs-btn:hover{background:var(--cs-bg-subtle)}
.cs-btn--primary{background:var(--cs-brand);border-color:var(--cs-brand);color:#fff}
.cs-btn--primary:hover{background:#2f78c4}
.cs-btn--ghost{background:transparent}

/* ---------- 动画 ---------- */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(29,158,117,.5)}70%{box-shadow:0 0 0 7px rgba(29,158,117,0)}100%{box-shadow:0 0 0 0 rgba(29,158,117,0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}