:root {
  --bg: #eaeff7;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-solid: #ffffff;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --text: #0f172a;
  --text-2: #475569;
  --text-3: #94a3b8;
  --brand: #0f3f91;
  --brand-2: #2563eb;
  --red: #dc2626;
  --orange: #ea580c;
  --amber: #d97706;
  --green: #059669;
  --cyan: #0891b2;
  --violet: #7c3aed;
  --radius: 16px;
  --shadow: 0 12px 34px -14px rgba(15, 23, 42, 0.24);
  --shadow-sm: 0 2px 8px -2px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 28px 54px -26px rgba(15, 23, 42, 0.4);
  --ease: cubic-bezier(.22, .7, .3, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* 背景光斑 + 缓慢呼吸 */
body::before {
  content: '';
  position: fixed;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 460px at 10% -10%, rgba(37, 99, 235, 0.20), transparent 64%),
    radial-gradient(700px 430px at 94% 2%, rgba(249, 115, 22, 0.14), transparent 62%),
    radial-gradient(620px 420px at 60% 100%, rgba(124, 58, 237, 0.10), transparent 66%);
  animation: breathe 16s ease-in-out infinite alternate;
}
@keyframes breathe {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.07) translate3d(-1.5%, 1%, 0); }
}

.wrap { position: relative; z-index: 1; max-width: 1580px; margin: 0 auto; padding: 0 22px 60px; }

/* ---------------- 顶部加载条 ---------------- */
.loadbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 40%; z-index: 99;
  background: linear-gradient(90deg, transparent, #2563eb, #7c3aed, transparent);
  animation: slide 1.15s linear infinite;
}
.loadbar.done { opacity: 0; transition: opacity .4s .2s; animation: none; width: 100%; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(350%); } }

/* ---------------- Hero ---------------- */
.hero {
  margin: 18px 0 22px;
  border-radius: 22px;
  padding: 28px 32px 26px;
  color: #fff;
  background: linear-gradient(118deg, #072a61 0%, #0f3f91 44%, #16233d 100%);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  animation: fadeUp .6s var(--ease) both;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(620px 320px at 80% 26%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(620px 320px at 80% 26%, #000, transparent 76%);
  pointer-events: none;
}
.hero::before {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  animation: sheen 7.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sheen {
  0% { transform: translateX(-130%); }
  55% { transform: translateX(330%); }
  100% { transform: translateX(330%); }
}
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; position: relative; z-index: 1; }
.hero h1 {
  margin: 0 0 9px; font-size: 27px; letter-spacing: 1px; font-weight: 700;
  background: linear-gradient(92deg, #ffffff 12%, #a8ccff 60%, #ffd9a8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .sub { color: rgba(226, 236, 255, 0.82); font-size: 13px; line-height: 1.9; }
.hero .sub b { color: #fff; font-weight: 600; }
.hero .sub .scope-only {
  display: inline-block; margin-right: 8px; padding: 1px 9px; border-radius: 999px;
  background: rgba(52, 211, 153, 0.2); border: 1px solid rgba(52, 211, 153, 0.4);
  color: #a7f3d0; font-size: 11.5px; font-weight: 600; vertical-align: 1px;
}
.hero .tagline { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.hero .tag {
  font-size: 12px; padding: 4px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e6efff; backdrop-filter: blur(6px);
  animation: popIn .5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms + 220ms);
}
.hero .stamp { text-align: right; font-size: 12px; color: rgba(214, 228, 255, 0.85); line-height: 2; }
.hero .stamp b { display: block; font-size: 22px; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.hero .stamp .pill {
  display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px;
  background: rgba(52, 211, 153, 0.18); border: 1px solid rgba(52, 211, 153, 0.35); color: #a7f3d0;
}

/* ---------------- 通用面板 ---------------- */
.panel {
  background: var(--panel);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.panel + .panel { margin-top: 16px; }
.panel:hover { box-shadow: 0 18px 42px -18px rgba(15, 23, 42, 0.32); }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.panel-head h2 { margin: 0; font-size: 16px; font-weight: 650; display: flex; align-items: center; gap: 9px; }
.panel-head h2::before {
  content: ''; width: 4px; height: 16px; border-radius: 3px;
  background: linear-gradient(180deg, var(--brand-2), #60a5fa);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}
.panel-head .hint { font-size: 12px; color: var(--text-3); }

/* 进入动画 */
.tabview.active > .panel { animation: fadeUp .52s var(--ease) both; }
.tabview.active > .panel:nth-child(1) { animation-delay: .01s; }
.tabview.active > .panel:nth-child(2) { animation-delay: .07s; }
.tabview.active > .panel:nth-child(3) { animation-delay: .13s; }
.tabview.active > .panel:nth-child(4) { animation-delay: .19s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(8px) scale(.965); }
  to { opacity: 1; transform: none; }
}
@keyframes rankIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

/* ---------------- KPI ---------------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
.kpi {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px 15px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  animation: popIn .5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--k, var(--brand-2)); }
.kpi::after {
  content: ''; position: absolute; right: -30px; top: -30px; width: 84px; height: 84px; border-radius: 50%;
  background: var(--k, var(--brand-2)); opacity: 0.06;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.kpi:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(15, 23, 42, 0.4); border-color: color-mix(in srgb, var(--k, #2563eb) 35%, var(--line)); }
.kpi:hover::after { transform: scale(1.5); opacity: 0.1; }
.kpi .k-label { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.kpi .k-value {
  font-size: 25px; font-weight: 700; letter-spacing: -0.4px; margin: 7px 0 3px; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.kpi .k-value small { font-size: 13px; font-weight: 500; color: var(--text-2); margin-left: 3px; }
.kpi .k-foot { font-size: 11.5px; color: var(--text-3); }
.kpi .k-foot em { font-style: normal; color: var(--text-2); font-weight: 600; }

/* ---------------- 表格 ---------------- */
.table-scroll {
  overflow: auto; border-radius: 12px; border: 1px solid var(--line);
  background: #fff; max-height: 620px;
  scrollbar-width: thin;
}
.table-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.table-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 3px solid #fff; }
.table-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }

table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: #f6f8fc;
  color: var(--text-2); font-weight: 600; text-align: right;
  padding: 9px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
  transition: background .2s, color .2s;
}
thead th:first-child, thead th.l { text-align: left; }
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { background: #eaf1fc; color: var(--brand-2); }
thead th .arrow { font-size: 9px; opacity: 0.45; margin-left: 3px; transition: opacity .2s; }
thead th.sorted .arrow { opacity: 1; color: var(--brand-2); }
tbody td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; text-align: right; white-space: nowrap; color: var(--text); transition: background .2s; }
tbody td:first-child, tbody td.l { text-align: left; }
tbody tr { transition: background .2s; }
tbody tr:hover td { background: #f7fbff; }
tbody tr:last-child td { border-bottom: 0; }
td.name { font-weight: 600; }
td.dim { color: var(--text-3); }
tfoot td { background: #f6f8fc; font-weight: 650; padding: 9px 10px; border-top: 1px solid var(--line-strong); text-align: right; }
tfoot td:first-child { text-align: left; }

.tz { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: #eef2ff; color: #3730a3; }

/* 状态徽标 */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.b-healthy { background: #e8f8f0; color: #059669; }
.b-watch { background: #eef4ff; color: #2563eb; }
.b-improve { background: #fff5e6; color: #d97706; }
.b-urgent { background: #fdecec; color: #dc2626; }
.b-none { background: #f1f5f9; color: #94a3b8; }

/* 异常标签 */
.flag { display: inline-block; margin: 1px 3px 1px 0; padding: 1.5px 7px; border-radius: 5px; font-size: 11px; white-space: nowrap; }
.f-3 { background: #fdecec; color: #dc2626; }
.f-2 { background: #fff4e8; color: #ea580c; }
.f-1 { background: #fffbe6; color: #b45309; }

/* ---------------- 工具条 ---------------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.toolbar select, .toolbar input[type="text"] {
  font: inherit; font-size: 12.5px; padding: 7px 10px; border-radius: 9px;
  border: 1px solid var(--line-strong); background: #fff; color: var(--text); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.toolbar select:focus, .toolbar input:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.toolbar .spacer { flex: 1; }
.btn {
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 9px;
  border: 1px solid var(--line-strong); background: #fff; color: var(--text-2); cursor: pointer;
  transition: all .22s var(--ease); text-decoration: none; display: inline-block;
}
.btn:hover { border-color: var(--brand-2); color: var(--brand-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn.primary { background: linear-gradient(92deg, #0f3f91, #2563eb); color: #fff; border-color: transparent; }
.btn.primary:hover { filter: brightness(1.07); color: #fff; }
.btn.tiny { padding: 5px 11px; font-size: 12px; font-weight: 500; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------------- Tabs ---------------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.tab {
  padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.7); color: var(--text-2);
  transition: all .25s var(--ease);
  animation: popIn .45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.tab:hover { border-color: var(--brand-2); color: var(--brand-2); transform: translateY(-1px); }
.tab.active {
  background: linear-gradient(92deg, #0f3f91, #2563eb); color: #fff; border-color: transparent;
  box-shadow: 0 8px 18px -10px rgba(37, 99, 235, 0.9);
}
.tabview { display: none; }
.tabview.active { display: block; }

/* ---------------- 大区卡 ---------------- */
.zone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.zone-card {
  background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 14px 15px;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  animation: popIn .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.zone-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -20px rgba(15, 23, 42, 0.45); }
.zone-card .zc-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.zone-card .zc-name { font-size: 15px; font-weight: 700; }
.zone-card .zc-name span { font-size: 11.5px; font-weight: 500; color: var(--text-3); margin-left: 6px; }
.zone-card .zc-prov { font-size: 11.5px; color: var(--text-3); }
.zone-card .zc-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 12.5px; }
.zone-card .zc-rows div { display: flex; justify-content: space-between; gap: 8px; }
.zone-card .zc-rows b { font-weight: 650; font-variant-numeric: tabular-nums; }
.zone-card .zc-foot { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); display: flex; gap: 6px; flex-wrap: wrap; }
.zone-card .bar { height: 5px; border-radius: 3px; background: #eef2f7; overflow: hidden; margin-top: 10px; }
.zone-card .bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2563eb, #60a5fa); }

/* 进度条增长动画（通用） */
[data-w] { width: 0; transition: width 1s var(--ease); }

/* ---------------- 渠道分析 ---------------- */
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ch-card {
  background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 14px 15px;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  animation: popIn .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ch-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.ch-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -20px rgba(15, 23, 42, 0.45); }
.ch-card .cc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ch-card .cc-name { font-size: 13.5px; font-weight: 700; color: var(--c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-card .cc-share { font-size: 12px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ch-card .cc-bar { height: 6px; border-radius: 4px; background: #eef2f7; overflow: hidden; }
.ch-card .cc-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 45%, #fff)); }
.ch-card .cc-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; font-size: 12.5px; margin-top: 10px; }
.ch-card .cc-rows div { display: flex; justify-content: space-between; gap: 8px; }
.ch-card .cc-rows b { font-weight: 650; font-variant-numeric: tabular-nums; }
.ch-card .cc-rows span { color: var(--text-3); }
.ch-card .cc-foot { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--text-3); }

.seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: #eef2f8; border: 1px solid var(--line); }
.seg-btn {
  font: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 8px;
  border: 0; background: transparent; color: var(--text-2); cursor: pointer; transition: all .22s var(--ease);
}
.seg-btn:hover { color: var(--brand-2); }
.seg-btn.on { background: #fff; color: var(--brand-2); box-shadow: var(--shadow-sm); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.chip {
  font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: #fff; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 7px;
  transition: all .22s var(--ease);
}
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: .35; transition: opacity .22s, transform .22s; }
.chip em { font-style: normal; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--c); transform: translateY(-1px); }
.chip.on {
  border-color: var(--c); color: #fff; background: var(--c);
  box-shadow: 0 8px 16px -10px var(--c);
}
.chip.on i { background: #fff; opacity: 1; transform: scale(1.15); }
.chip.on em { color: rgba(255, 255, 255, .85); }

.ch-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }

.ch-bars { display: flex; flex-direction: column; gap: 9px; }
.ch-bar-row {
  display: grid; grid-template-columns: 132px 1fr 78px 152px; gap: 10px; align-items: center;
  font-size: 12.5px; animation: popIn .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms);
}
.ch-bar-row .cbr-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-bar-row .cbr-track { height: 12px; border-radius: 7px; background: #eef2f7; overflow: hidden; }
.ch-bar-row .cbr-track i {
  display: block; height: 100%; border-radius: 7px;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 50%, #fff));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset;
}
.ch-bar-row .cbr-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ch-bar-row .cbr-sub { color: var(--text-3); font-size: 11.5px; text-align: right; }
.ch-empty { padding: 26px; text-align: center; color: var(--text-3); background: #f8fafc; border-radius: 12px; border: 1px dashed var(--line-strong); }

.ch-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }

/* 渠道口径提示条 */
.scope {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 13px; margin-bottom: 12px; border-radius: 11px;
  background: linear-gradient(92deg, rgba(37, 99, 235, .08), rgba(124, 58, 237, .06));
  border: 1px solid rgba(37, 99, 235, .18);
  font-size: 12.5px; color: var(--text-2);
  animation: popIn .4s var(--ease) both;
}
.scope .dim { color: var(--text-3); font-size: 11.5px; }
.scope-chip { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); }
.scope-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.scope-chip b { color: var(--c); }

/* ---------------- 榜单 ---------------- */
.rank-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.rank-panel { box-shadow: none; border: 1px solid var(--line); }
.rank-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 2px;
  border-bottom: 1px dashed #eef2f7; font-size: 12.5px;
  animation: rankIn .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms);
}
.rank-item:last-child { border-bottom: 0; }
.rank-no {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px; background: #eef2f7; color: var(--text-2);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.rank-no.top1 { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #fff; }
.rank-no.top2 { background: linear-gradient(135deg, #94a3b8, #cbd5e1); color: #fff; }
.rank-no.top3 { background: linear-gradient(135deg, #d97706, #f59e0b); color: #fff; }
.rank-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-name em { font-style: normal; color: var(--text-3); font-size: 11px; margin-left: 6px; }
.rank-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-val small { font-weight: 500; color: var(--text-3); font-size: 11px; margin-left: 2px; }

/* ---------------- 说明 ---------------- */
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.note {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand-2);
  border-radius: 11px; padding: 12px 14px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.note:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.note h4 { margin: 0 0 6px; font-size: 13px; font-weight: 650; }
.note p { margin: 0; font-size: 12px; color: var(--text-2); line-height: 1.85; }
.note code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 11.5px; color: #334155; }

.empty { text-align: center; padding: 70px 20px; color: var(--text-3); }
.empty h3 { color: var(--text-2); font-weight: 600; }
.empty a { color: var(--brand-2); font-weight: 600; }

.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }

.pager { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }

/* ---------------- 环比 / 期间对比 ---------------- */
.mom {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: 999px; margin-top: 7px;
  background: #f1f5f9; color: var(--text-2);
  border: 1px solid var(--line);
  animation: fadeUp .5s var(--ease) both;
}
.mom em { font-style: normal; font-weight: 500; color: var(--text-3); font-size: 10.5px; }
.mom.up { background: rgba(220, 38, 38, 0.09); color: #b91c1c; border-color: rgba(220, 38, 38, 0.22); }
.mom.down { background: rgba(5, 150, 105, 0.10); color: #047857; border-color: rgba(5, 150, 105, 0.24); }
.mom.flat { background: #f1f5f9; color: var(--text-3); }
.kpi .mom { align-self: flex-start; }

td.dv { font-weight: 700; font-variant-numeric: tabular-nums; }
td.dv.up { color: #b91c1c; }
td.dv.down { color: #047857; }
td.dim { color: var(--text-3); }

.scope-chip i { background: var(--c, var(--brand-2)); }

.trend-wrap { width: 100%; }
.trend-svg { width: 100%; height: 240px; display: block; overflow: visible; }
.trend-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawLine 1.1s var(--ease) forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.trend-svg circle { animation: popIn .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 12ms); }
@keyframes popIn { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
.trend-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); margin-top: 8px; }
.trend-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.trend-legend i.dash {
  background: repeating-linear-gradient(90deg, var(--text-3) 0 5px, transparent 5px 9px);
}

.rank-sub { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 76px; text-align: right; }
.rank-val.up { color: #b91c1c; }
.rank-val.down { color: #047857; }

/* 环比表：对比期列整体弱化 */
#momZoneTable tbody td.dim, #momChTable tbody td.dim { background: rgba(241, 245, 249, 0.55); }
#momZoneTable tfoot td { background: #f8fafc; font-weight: 700; }

/* ============ 数据日报 ============ */
.daily-actions { display: flex; gap: 8px; align-items: center; }
.daily-actions .btn { text-decoration: none; }
.daily-table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 12.5px; background: #fff; }
.daily-table.exporting thead th { position: static !important; }
.daily-table th, .daily-table td {
  border: 1px solid #a7cfba; padding: 7px 9px; text-align: center; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: #1f3b2c;
}
.daily-table thead th { background: #d9f0e1; font-weight: 700; font-size: 12px; }
.daily-table thead tr:first-child th { font-size: 13px; letter-spacing: 2px; }
.daily-table .rowhead { background: #eaf7ef; font-weight: 700; }
.daily-table tbody td { background: #fff; }
.daily-table tbody tr:nth-child(even) td:not(.rowhead) { background: #f4fbf7; }
.daily-table tr.total-row th, .daily-table tr.total-row td { background: #d9f0e1; font-weight: 700; }
.daily-table td.bad { color: #e11d48; background: #fdeef2 !important; font-weight: 600; }
.daily-table td.dim { color: var(--text-3); }
.daily-wrap { background: #fff; padding: 14px; border-radius: 14px; }

/* 日报页：后台上传的日报图片 */
#dailyImageView { background: #fff; padding: 14px; border-radius: 14px; }
#dailyImageView a { display: block; }
.daily-shot {
  display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; cursor: zoom-in;
}
#dailyImageView .shot-hint { margin-top: 10px; font-size: 12px; color: var(--text-3); }

@media (max-width: 860px) {
  .ch-bar-row { grid-template-columns: 100px 1fr 66px; }
  .ch-bar-row .cbr-sub { display: none; }
  .wrap { padding: 0 14px 50px; }
  .hero { padding: 22px 20px; }
  .hero h1 { font-size: 21px; }
}

@media print {
  body::before, .tabs, .toolbar, .loadbar { display: none !important; }
  .tabview { display: block !important; }
  .panel { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .table-scroll { max-height: none; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}