/* k3-hub 共享基础样式 —— 6 个数据看板统一引用
   覆盖：设计令牌、页面骨架、头部、统计卡片、面板、范围按钮、footer
   各类名兼容两套历史命名：.cards/.card(.label/.value/.delta) 与 .kpis/.kpi(.k/.v/.s)、.card-label/.card-value/.card-sub */
:root {
  --bg: #fafafa;
  --card: #ffffff;
  --border: #ebebeb;
  --text: #1a1a1a;
  --text-2: #6b7280;
  --text-3: #9ca3af;
  --accent: #2563eb;
  --accent-soft: #eff4ff;
  --up: #dc2626;
  --down: #16a34a;
  --radius: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 40px 24px 64px; }

/* ---- top nav（仅保留语言切换按钮） ---- */
.topnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.topnav button {
  margin-left: auto; border: 1px solid var(--border); background: var(--card); color: var(--text-2);
  font-size: 12.5px; padding: 5px 14px; border-radius: 999px; cursor: pointer;
  font-family: inherit; transition: all .15s ease;
}
.topnav button:hover { border-color: var(--accent); color: var(--accent); }

/* ---- header ---- */
header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
header h1, .title h1 { font-size: 26px; font-weight: 700; letter-spacing: .5px; }
header .sub, .title p { margin-top: 6px; font-size: 13px; color: var(--text-3); }
header a, .title a { color: var(--text-3); text-decoration: none; border-bottom: 1px solid var(--border); }
header a:hover, .title a:hover { color: var(--accent); border-color: var(--accent); }
.updated { font-size: 12px; color: var(--text-3); white-space: nowrap; }

/* ---- stat cards ---- */
.cards, .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 14px; }
.card, .kpi {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; transition: box-shadow .2s ease;
}
.card:hover, .kpi:hover { box-shadow: 0 4px 16px rgba(0,0,0,.05); }
.card .label, .card .card-label, .kpi .k { font-size: 13px; color: var(--text-2); }
.card .value, .card .card-value, .kpi .v { margin-top: 8px; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.card .value small { font-size: 14px; font-weight: 500; color: var(--text-2); margin-left: 2px; }
.card .delta, .card .card-sub, .kpi .s { margin-top: 6px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-3); }
.card .delta b { font-weight: 600; }
.up b, .up { color: var(--up); }
.down b, .down { color: var(--down); }

/* ---- chart panels ---- */
.panel, section {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 22px 12px; margin-top: 14px;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.panel-head h2, section h2 { font-size: 15px; font-weight: 600; }
.panel-head .sub { font-size: 12px; color: var(--text-3); margin-left: 8px; font-weight: 400; }
section .cap { font-size: 12px; color: var(--text-3); margin: 4px 0 10px; }

/* ---- range buttons ---- */
.ranges, .win { display: flex; gap: 6px; }
.ranges button, .win button {
  border: 1px solid var(--border); background: transparent; color: var(--text-2);
  font-size: 12px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  font-family: inherit; transition: all .15s ease;
}
.ranges button:hover, .win button:hover { border-color: var(--accent); color: var(--accent); }
.ranges button.active, .win button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- chart ---- */
.chart { width: 100%; height: 380px; }

/* ---- footer ---- */
footer { margin-top: 32px; font-size: 12px; color: var(--text-3); line-height: 1.8; }
footer a { color: var(--text-3); text-decoration: none; border-bottom: 1px solid var(--border); }
footer a:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 640px) {
  .wrap { padding: 24px 16px 48px; }
  .chart { height: 300px; }
}