/* ============================================================
   BN-PIPE 百年烟斗 · 数据看板样式 v1.1
   配色方案 C：清新薄荷绿（现代电商风）
   背景暖白 + 薄荷绿主色 + 珊瑚橙强调，年轻清爽
   ============================================================ */

:root {
  /* 方案C 主色系（清新薄荷绿） */
  --brand:      #2EB872;   /* 主色：薄荷绿 */
  --brand-dark: #239B5E;   /* 深薄荷 */
  --brand-light:#7ED3A5;   /* 浅薄荷 */
  --wine:       #FF7F50;   /* 强调：珊瑚橙（替代酒红） */
  --bg:         #F7F9F9;   /* 页面背景：暖白 */
  --card:       #FFFFFF;   /* 卡片白 */
  --ink:        #2D3339;   /* 主文字：深灰蓝 */
  --ink-soft:   #6B7480;   /* 次级文字 */
  --line:       #E4EAE7;   /* 分割线 */
  --green:      #2EB872;   /* 正向 */
  --amber:      #F5A623;   /* 警告 */
  --red:        #E5533D;   /* 高风险 */
  --shadow:     0 2px 8px rgba(46,184,114,.10);
}

* { margin:0; padding:0; box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑","Noto Sans SC","WenQuanYi Micro Hei",sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size:14px;
  line-height:1.6;
}

/* ── 顶栏 ─────────────────────────── */
.topbar {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  color:#fff;
  padding:14px 24px;
  display:flex;            /* flex 现代浏览器均支持 */
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  box-shadow: var(--shadow);
}
.topbar h1 { font-size:20px; font-weight:700; letter-spacing:.5px; }
.topbar h1 .logo-mark { color:#A8E6C5; margin-right:6px; }
.topbar .meta { font-size:12px; opacity:.85; }

/* ── 页签 ─────────────────────────── */
.tabs {
  background:var(--card);
  border-bottom:1px solid var(--line);
  display:flex;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.tab {
  padding:12px 22px;
  border:none;
  background:none;
  font-size:14px;
  color:var(--ink-soft);
  cursor:pointer;
  border-bottom:3px solid transparent;
  font-family:inherit;
  white-space:nowrap;
  transition:color .15s,border-color .15s;
}
.tab:hover { color:var(--brand); }
.tab.active { color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }

/* ── 主体 ─────────────────────────── */
.main { max-width:1280px; margin:0 auto; padding:20px; }
.page { display:none; }
.page.active { display:block; }

/* ── KPI 卡片 ─────────────────────── */
.kpi-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;
  margin-bottom:20px;
}
.kpi-card {
  background:var(--card);
  border-radius:10px;
  padding:16px 18px;
  box-shadow:var(--shadow);
  border-left:4px solid var(--brand);
}
.kpi-card .label { font-size:13px; color:var(--ink-soft); }
.kpi-card .value { font-size:30px; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums; }
.kpi-card .sub { font-size:12px; color:var(--ink-soft); margin-top:2px; }
.kpi-card.warn { border-left-color:var(--red); }
.kpi-card.good { border-left-color:var(--green); }

/* ── 图表容器 ─────────────────────── */
.chart-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.chart-row.one { grid-template-columns:1fr; }
.chart-card {
  background:var(--card);
  border-radius:10px;
  padding:14px;
  box-shadow:var(--shadow);
}
.chart-card h3 {
  font-size:15px;
  font-weight:600;
  margin-bottom:4px;
  color:var(--ink);
}
.chart-card .desc { font-size:12px; color:var(--ink-soft); margin-bottom:10px; }
.chart { width:100%; height:320px; }

/* ── 筛选工具条 ───────────────────── */
.toolbar {
  background:var(--card);
  border-radius:10px;
  padding:12px 16px;
  box-shadow:var(--shadow);
  margin-bottom:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.toolbar label { font-size:13px; color:var(--ink-soft); }
.toolbar select, .toolbar input {
  font-family:inherit;
  font-size:13px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  color:var(--ink);
  outline:none;
  min-width:120px;
}
.toolbar select:focus, .toolbar input:focus { border-color:var(--brand); }
.toolbar input { min-width:200px; }
.season-btn {
  border:1px solid var(--line);
  border-radius:6px;
  padding:6px 10px;
  background:#fff;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  color:var(--ink-soft);
}
.season-btn:hover { border-color:var(--brand); color:var(--brand); }
.season-btn.on { background:var(--brand); border-color:var(--brand); color:#fff; }

/* ── 表格 ─────────────────────────── */
.table-wrap {
  background:var(--card);
  border-radius:10px;
  box-shadow:var(--shadow);
  overflow-x:auto;
}
table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
thead th {
  background:#F2F9F5;
  color:var(--ink-soft);
  font-weight:600;
  text-align:left;
  padding:10px 14px;
  border-bottom:2px solid var(--line);
  white-space:nowrap;
}
tbody td {
  padding:9px 14px;
  border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
tbody tr:hover { background:#F0F8F4; }
tbody tr.clickable { cursor:pointer; }
.num { text-align:right; }
.tag {
  display:inline-block;
  padding:2px 8px;
  border-radius:10px;
  font-size:12px;
  font-weight:600;
}
.tag.hot    { background:#E7F0EA; color:var(--green); }
.tag.rank   { background:#E3F2FD; color:#1565C0; }
.tag.watch  { background:#FBF0DD; color:var(--amber); }
.tag.fill   { background:#EDE8F7; color:#6A4FA3; }
.tag.clear  { background:#F9E3E0; color:var(--red); }

/* ── 下钻弹窗 ─────────────────────── */
.modal-mask {
  display:none;
  position:fixed; inset:0;
  background:rgba(45,42,38,.55);
  z-index:100;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  padding:40px 16px;
}
.modal-mask.show { display:flex; }
.modal {
  background:#fff;
  border-radius:12px;
  width:100%;
  max-width:860px;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.modal-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
}
.modal-head h3 { font-size:17px; }
.modal-close {
  border:none; background:none;
  font-size:22px; color:var(--ink-soft);
  cursor:pointer; line-height:1;
}
.modal-close:hover { color:var(--red); }
.modal-body { padding:20px; }
.modal-body .chart { height:260px; }

/* ── 状态徽标 ─────────────────────── */
.badge { padding:2px 10px; border-radius:10px; font-size:12px; }
.badge.ok   { background:#E7F0EA; color:var(--green); }
.badge.mid  { background:#FBF0DD; color:var(--amber); }
.badge.bad  { background:#F9E3E0; color:var(--red); }

/* ── 响应式：窄屏单列 ─────────────── */
@media (max-width:860px) {
  .chart-row { grid-template-columns:1fr; }
  .kpi-card .value { font-size:24px; }
  .topbar { padding:12px 14px; }
  .tab { padding:10px 14px; font-size:13px; }
}

/* ── 空态/加载 ────────────────────── */
.hint { color:var(--ink-soft); font-size:13px; padding:8px 0; }