/* ============================================================
   DataPulse 主题 · 鲜亮配色（浅色底）
   - 主色系：靛蓝 → 品红 渐变
   - 类别色板与 config/taxonomy.json 保持一致
   - 涨=红 / 跌=绿（中国市场惯例）
   ============================================================ */
:root{
  --bg:#F5F7FD;
  --card:#FFFFFF;
  --ink:#0F172A;
  --ink-2:#475569;
  --ink-3:#94A3B8;
  --line:#E7EAF4;
  --line-2:#F1F3FA;

  --brand:#6366F1;
  --brand-2:#4F46E5;
  --brand-soft:#EEF0FE;
  --pink:#EC4899;
  --pink-soft:#FDF2F8;
  --cyan:#06B6D4;
  --mint:#10B981;
  --amber:#F59E0B;
  --violet:#A855F7;
  --rose:#F43F5E;
  --blue:#3B82F6;
  --teal:#14B8A6;
  --orange:#F97316;
  --sky:#0EA5E9;

  --up:#EF4444;      /* 涨 → 红 */
  --down:#10B981;    /* 跌 → 绿 */

  --r:16px;
  --r-s:10px;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 28px rgba(99,102,241,.09);
  --shadow-lift:0 2px 6px rgba(15,23,42,.06), 0 18px 42px rgba(99,102,241,.16);
  --grad:linear-gradient(120deg,#6366F1 0%,#A855F7 45%,#EC4899 100%);
  --grad-soft:linear-gradient(120deg,#EEF0FE 0%,#FAF0FE 50%,#FDF2F8 100%);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 520px at 8% -8%, #E8EBFF 0%, rgba(232,235,255,0) 62%),
    radial-gradient(900px 460px at 96% 2%, #FCE9F4 0%, rgba(252,233,244,0) 60%),
    radial-gradient(800px 500px at 50% 108%, #E4F7FB 0%, rgba(228,247,251,0) 62%),
    var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  font-size:14px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1360px;margin:0 auto;padding:26px 22px 64px}
.wrap-narrow{max-width:1000px;margin:0 auto;padding:26px 22px 64px}

/* ---------------- 顶部导航 ---------------- */
.nav{
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(14px);
  background:rgba(255,255,255,.82);
  border-bottom:1px solid var(--line);
}
.nav-in{max-width:1360px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;letter-spacing:.2px}
.logo .dot{
  width:26px;height:26px;border-radius:9px;background:var(--grad);
  box-shadow:0 5px 14px rgba(139,92,246,.4);
}
.logo small{color:var(--ink-3);font-weight:500;font-size:11.5px;letter-spacing:0}
.nav-links{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav-links a{
  padding:6px 13px;border-radius:999px;color:var(--ink-2);font-size:13px;
  transition:.16s;
}
.nav-links a:hover{background:var(--brand-soft);color:var(--brand-2);text-decoration:none}
.nav-links a.on{
  background:var(--grad);color:#fff;font-weight:600;
  box-shadow:0 6px 16px rgba(139,92,246,.28);
}

/* ---------------- 标题 ---------------- */
h1{font-size:26px;font-weight:700;margin:0 0 6px;letter-spacing:-.3px}
h2{font-size:17px;font-weight:650;margin:0 0 12px}
h3{font-size:14.5px;font-weight:650;margin:0 0 8px}
.sub{color:var(--ink-2);font-size:13px}
.muted{color:var(--ink-3);font-size:12.5px}

.page-head{margin:6px 0 18px}
.page-head .kicker{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:650;letter-spacing:.6px;text-transform:uppercase;
  color:var(--brand-2);background:var(--brand-soft);
  padding:3px 11px;border-radius:999px;margin-bottom:10px;
}

/* ---------------- 卡片 ---------------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;box-shadow:var(--shadow);
}
.card.tight{padding:14px}
.card.hover:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px);transition:.2s}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mt{margin-top:14px}
.mt-l{margin-top:22px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* ---------------- 徽章 / 标签 ---------------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--brand-soft);color:var(--brand-2);
  border-radius:999px;padding:3px 11px;font-size:12px;font-weight:600;
}
.chip.pink{background:var(--pink-soft);color:#BE185D}
.chip.mint{background:#ECFDF5;color:#047857}
.chip.amber{background:#FFFBEB;color:#B45309}
.chip.gray{background:#F1F5F9;color:#475569}
.chip.rose{background:#FFF1F2;color:#BE123C}
.chip.sky{background:#F0F9FF;color:#0369A1}

.dot-live{width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.dot-warn{width:7px;height:7px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.dot-err{width:7px;height:7px;border-radius:50%;background:var(--rose);
  box-shadow:0 0 0 3px rgba(244,63,94,.18)}

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:10px 17px;border-radius:11px;font-size:13.5px;font-weight:600;
  cursor:pointer;transition:.16s;font-family:inherit;
}
.btn:hover{border-color:#CFD6EA;background:#FCFDFF;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.primary{
  background:var(--grad);color:#fff;border:none;
  box-shadow:0 8px 22px rgba(139,92,246,.32);
}
.btn.primary:hover{box-shadow:0 12px 30px rgba(139,92,246,.42)}
.btn.lg{padding:14px 26px;font-size:15px;border-radius:13px}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--brand-soft);color:var(--brand-2)}

/* ---------------- 表单 ---------------- */
textarea,input[type=text],select{
  width:100%;font-family:inherit;font-size:14px;color:var(--ink);
  border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;
  background:#fff;outline:none;transition:.16s;
}
textarea:focus,input[type=text]:focus,select:focus{
  border-color:var(--brand);box-shadow:0 0 0 4px rgba(99,102,241,.13);
}
textarea{resize:vertical;min-height:104px;line-height:1.7}
label.f{display:block;font-size:12.5px;font-weight:650;color:var(--ink-2);margin-bottom:6px}
select{cursor:pointer;padding:9px 12px;font-size:13px}

.quick{display:flex;flex-wrap:wrap;gap:7px}
.quick button{
  background:#fff;border:1px dashed #C9D0E8;color:var(--ink-2);
  padding:6px 12px;border-radius:999px;font-size:12.5px;cursor:pointer;
  font-family:inherit;transition:.16s;
}
.quick button:hover{border-color:var(--brand);color:var(--brand-2);background:var(--brand-soft)}

/* ---------------- KPI ---------------- */
.kpi{position:relative;overflow:hidden}
.kpi::after{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);
  opacity:.85;
}
.kpi:nth-child(2)::after{background:linear-gradient(90deg,#06B6D4,#10B981)}
.kpi:nth-child(3)::after{background:linear-gradient(90deg,#F59E0B,#F43F5E)}
.kpi:nth-child(4)::after{background:linear-gradient(90deg,#A855F7,#EC4899)}
.kpi:nth-child(5)::after{background:linear-gradient(90deg,#3B82F6,#06B6D4)}
.kpi:nth-child(6)::after{background:linear-gradient(90deg,#10B981,#14B8A6)}
.kpi .k-label{color:var(--ink-2);font-size:12.5px;font-weight:600;margin-bottom:5px}
.kpi .k-val{font-size:25px;font-weight:700;letter-spacing:-.5px;line-height:1.2}
.kpi .k-note{color:var(--ink-3);font-size:11.5px;margin-top:4px}

/* ---------------- 表格 ---------------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line-2)}
th{color:var(--ink-2);font-weight:650;font-size:12px;background:#FAFBFF;
   position:sticky;top:0;z-index:1}
tbody tr:hover{background:#FAFBFF}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.up{color:var(--up);font-weight:650}
.down{color:var(--down);font-weight:650}
.scroll{max-height:430px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-s)}
.tag{
  display:inline-block;padding:1.5px 9px;border-radius:999px;font-size:11.5px;
  font-weight:650;white-space:nowrap;
}

/* ---------------- 步骤条 ---------------- */
.steps{display:flex;flex-direction:column;gap:2px}
.step{display:flex;gap:13px;padding:11px 0;position:relative}
.step:not(:last-child)::before{
  content:"";position:absolute;left:11px;top:36px;bottom:-4px;width:2px;background:var(--line);
}
.step.done:not(:last-child)::before{background:linear-gradient(#10B981,#06B6D4)}
.step .bullet{
  width:24px;height:24px;border-radius:50%;flex:0 0 24px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;background:#F1F5F9;color:var(--ink-3);
  border:2px solid var(--line);z-index:1;transition:.2s;
}
.step.running .bullet{background:var(--brand-soft);color:var(--brand-2);
  border-color:var(--brand);animation:pulse 1.3s infinite}
.step.done .bullet{background:var(--mint);color:#fff;border-color:var(--mint)}
.step.failed .bullet{background:var(--rose);color:#fff;border-color:var(--rose)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.45)}
  50%{box-shadow:0 0 0 7px rgba(99,102,241,0)}}
.step .s-body{flex:1;min-width:0}
.step .s-title{font-weight:650;font-size:13.5px}
.step .s-detail{color:var(--ink-3);font-size:12.5px;margin-top:2px}
.step .s-time{color:var(--ink-3);font-size:11.5px;font-variant-numeric:tabular-nums}

/* ---------------- 进度条 ---------------- */
.bar{height:7px;background:#EEF1F9;border-radius:999px;overflow:hidden}
.bar > i{display:block;height:100%;width:0;background:var(--grad);
  border-radius:999px;transition:width .5s ease}

/* ---------------- 日志 ---------------- */
.logs{
  background:#FBFCFE;border:1px solid var(--line);border-radius:var(--r-s);
  padding:12px 14px;max-height:300px;overflow:auto;
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:12px;line-height:1.85;color:var(--ink-2);
}
.logs .t{color:var(--ink-3);margin-right:9px}

/* ---------------- 图表容器 ---------------- */
.chart{width:100%}
.empty{color:var(--ink-3);padding:30px;text-align:center;font-size:13px}

/* ---------------- 结论文本 ---------------- */
.finding{
  border-left:3px solid var(--brand);background:#FDFDFF;
  border-radius:0 var(--r-s) var(--r-s) 0;padding:12px 15px;margin-bottom:10px;
}
.finding.high{border-color:var(--mint)}
.finding.medium{border-color:var(--amber)}
.finding.low{border-color:var(--ink-3)}
.finding .f-title{font-weight:650;font-size:13.5px;margin-bottom:3px}
.finding .f-text{color:var(--ink-2);font-size:13px}
.finding .f-ev{font-size:11.5px;color:var(--ink-3);margin-top:5px;
  font-family:ui-monospace,Consolas,monospace}

/* ---------------- 报告 ---------------- */
.summary{
  background:var(--grad-soft);border:1px solid #E4E7FB;border-radius:var(--r);
  padding:20px 22px;
}
.summary ol{margin:0;padding-left:20px}
.summary li{margin-bottom:7px;color:var(--ink)}
.sec{padding:22px 0;border-top:1px solid var(--line)}
.sec:first-of-type{border-top:none}
.sec .s-title{font-size:17px;font-weight:700;margin-bottom:10px}
.sec p{margin:0 0 10px;color:#334155}
.recs{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.recs li{
  display:flex;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-s);padding:10px 13px;font-size:13px;color:#334155;
}
.recs li b{
  flex:0 0 20px;height:20px;border-radius:6px;background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;
}
.cav{background:#FFFBEB;border:1px solid #FDE68A;border-radius:var(--r-s);
  padding:14px 16px;font-size:12.5px;color:#78350F}
.cav ul{margin:6px 0 0;padding-left:18px}
.cav li{margin-bottom:4px}
.gloss{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 20px;font-size:12.5px}
.gloss dt{font-weight:650;color:var(--ink)}
.gloss dd{margin:0 0 6px;color:var(--ink-2)}

/* ---------------- 页脚 ---------------- */
.foot{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:12px;line-height:1.85}

@media (max-width:1100px){
  .g6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:780px){
  .g2,.g3,.g4,.g6{grid-template-columns:1fr}
  .gloss{grid-template-columns:1fr}
  .nav-in{padding:10px 14px}
  .wrap,.wrap-narrow{padding:18px 14px 48px}
  h1{font-size:21px}
}
