/* 跨境AI全闭环 · BI 数据看板（浅色商务风格） */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", -apple-system, sans-serif;
  background: #f5f7fa; color: #1f2d3d; font-size: 14px;
}
.topbar {
  background: #fff; border-bottom: 1px solid #e4e9f0;
  padding: 14px 28px; display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 12px;
}
.brand h1 { font-size: 20px; color: #1f4e79; }
.badge {
  display: inline-block; margin-left: 10px; padding: 3px 10px;
  border-radius: 12px; font-size: 12px; background: #e8f4fd; color: #1f4e79;
}
.period-switch button, .seg button {
  border: 1px solid #d3dbe6; background: #fff; color: #44566c;
  padding: 6px 14px; cursor: pointer; border-radius: 6px; font-size: 13px;
}
.period-switch button.active, .seg button.active {
  background: #1f4e79; color: #fff; border-color: #1f4e79;
}
main { padding: 22px 28px; max-width: 1280px; margin: 0 auto; }

.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 22px; }
.kpi-card {
  background: #fff; border: 1px solid #e4e9f0; border-radius: 10px;
  padding: 16px 18px; box-shadow: 0 1px 3px rgba(31,45,61,.05);
}
.kpi-label { color: #8492a6; font-size: 12px; margin-bottom: 8px; }
.kpi-value { font-size: 26px; font-weight: 700; color: #1f2d3d; }
.kpi-chg { margin-top: 6px; font-size: 12px; }
.kpi-chg.up { color: #d9534f; }   /* 涨 = 红（中国习惯） */
.kpi-chg.down { color: #1fa46a; } /* 跌 = 绿 */

.panel {
  background: #fff; border: 1px solid #e4e9f0; border-radius: 10px;
  padding: 18px 20px; margin-bottom: 22px;
}
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.panel-head h2 { font-size: 15px; color: #1f4e79; }
.chart-box { height: 320px; position: relative; }
.chart-box.small { height: 260px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
}

.mini-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12px; }
.mini-table th, .mini-table td { border: 1px solid #edf1f6; padding: 6px 8px; text-align: right; }
.mini-table th { background: #f8fafc; color: #44566c; text-align: center; }
.mini-table td:first-child { text-align: left; font-weight: 600; }

footer {
  text-align: center; color: #a0aec0; font-size: 12px; padding: 18px 0 26px;
}