/* ═══════════════════════════════════════════════════════════════
   诸葛 · 经营分析组件
   用于：经营透视 / 客户资产 / 投流数据 / 提成核算

   说明：卡片一律复用 .glass-card + .card-title，古风外观（宣纸底、
   金色描边、L 形角饰）由全局主题 [data-theme="guofeng"] 提供，
   本文件只补充专属部件，避免与既有样式冲突。
   ═══════════════════════════════════════════════════════════════ */

/* ── 标签页：卷轴式，底部与内容区金线相接 ── */
.gz-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 18px; padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.gz-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; cursor: pointer; user-select: none;
  font-size: 14px; font-weight: 600; letter-spacing: 1px;
  /* 深色背景适配：白字 + 亮玻璃底（生产浅色主题页面背景为深色视频） */
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  transition: background .18s cubic-bezier(.23, 1, .32, 1),
              color .18s cubic-bezier(.23, 1, .32, 1),
              transform .18s cubic-bezier(.23, 1, .32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .gz-tab:hover { transform: translateY(-1px); color: #FFD54F; }
}
.gz-tab.on {
  color: #fff;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  border-color: transparent;
  box-shadow: 0 -2px 10px rgba(99, 102, 241, 0.4);
}

/* ── 指标格 ── */
.gz-metrics { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.gz-metrics.c3 { grid-template-columns: repeat(3, 1fr); }
.gz-metrics.c4 { grid-template-columns: repeat(4, 1fr); }
.gz-metric {
  padding: 12px 14px; border-radius: 11px;
  background: var(--glass-quiet);
  border: 1px solid rgba(184, 134, 11, 0.16);
}
.gz-metric .k { font-size: 11.5px; color: var(--text-tertiary); letter-spacing: 1px; }
.gz-metric .v {
  font-size: 25px; font-weight: 900; color: var(--text-primary);
  line-height: 1.25; margin: 3px 0 1px; font-family: var(--font-mono);
}
.gz-metric .d { font-size: 11px; color: var(--text-tertiary); line-height: 1.6; }
.gz-metric.gold  .v { color: #B8860B; }
.gz-metric.navy  .v { color: #3E5C76; }
.gz-metric.green .v { color: #2E8B57; }
.gz-metric.red   .v { color: #C0392B; }

/* ── 抬头说明 ── */
.gz-sub { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.8; margin: -6px 0 12px; }
.gz-note {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed rgba(184, 134, 11, 0.22);
  font-size: 11.5px; color: var(--text-tertiary); line-height: 1.8;
}

/* ── 数据来源标注（自动/手工）── */
.gz-src {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .4px;
  padding: 1px 6px; border-radius: 6px; vertical-align: 1px; white-space: nowrap;
}
.gz-src.auto   { background: rgba(46, 139, 87, 0.14); color: #1F6B40; }
.gz-src.manual { background: rgba(192, 57, 43, 0.12); color: #8B2635; }

/* ── 转化漏斗 ── */
.gz-fr { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.gz-fr:last-child { margin-bottom: 0; }
.gz-fr-name {
  flex: 0 0 96px; font-size: 12.5px; font-weight: 700;
  color: var(--text-secondary);
}
.gz-fr-bar {
  flex: 1; min-width: 0; height: 26px; border-radius: 7px;
  background: var(--glass-quiet); overflow: hidden;
}
.gz-fr-fill {
  height: 100%; border-radius: 7px; min-width: 2px;
  display: flex; align-items: center; padding-left: 9px;
  font-size: 11.5px; font-weight: 800; color: #fff; white-space: nowrap;
  transition: width .5s cubic-bezier(.23, 1, .32, 1);
}
.gz-fr-meta {
  flex: 0 0 88px; text-align: right; font-size: 12px;
  color: var(--text-tertiary); font-family: var(--font-mono);
}
.gz-fr-meta b { color: var(--text-primary); }

/* ── 阶段阶梯 ── */
.gz-lr {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px dashed rgba(184, 134, 11, 0.2);
}
.gz-lr:last-child { border-bottom: none; }
.gz-lr-lv { flex: 0 0 32px; font-size: 11px; font-weight: 800; color: #B8860B; }
.gz-lr-name {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gz-lr-bar {
  flex: 0 0 120px; height: 8px; border-radius: 4px;
  background: var(--glass-quiet); overflow: hidden;
}
.gz-lr-bar i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #C9A227, #B8860B);
}
.gz-lr-cnt {
  flex: 0 0 78px; text-align: right; font-size: 12px; font-weight: 700;
  color: var(--text-primary); font-family: var(--font-mono);
}
.gz-lr-cnt small { color: var(--text-tertiary); font-weight: 400; }

/* ── 空态 ── */
.gz-empty {
  padding: 26px 16px; text-align: center;
  color: var(--text-tertiary); font-size: 12.5px; line-height: 1.9;
}

/* ── 上传区 ── */
.gz-drop {
  padding: 18px; border-radius: 12px; text-align: center;
  border: 1px dashed rgba(184, 134, 11, 0.4);
  background: var(--glass-quiet);
}

/* ═══ 青花留白（龙门账册 qinghua）：补充卡片随主风格单色化 ═══
   作用域锁定 #db-insight-cards.qh，不影响经营透视等其它 gz-* 使用方 */
#db-insight-cards.qh .glass-card {
  background: #FBFCFD;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #EDF1F6;
  border-radius: 16px;
  box-shadow: 0 8px 34px rgba(10, 30, 64, 0.20);
  padding: 24px 28px;
}
#db-insight-cards.qh .glass-card:hover { transform: none; box-shadow: 0 8px 34px rgba(10, 30, 64, 0.20); }
#db-insight-cards.qh .card-title {
  font-size: 12.5px; font-weight: 600; letter-spacing: 3px;
  color: #5A6B84; margin-bottom: 14px;
}
#db-insight-cards.qh .gz-sub { color: #64748B; }
#db-insight-cards.qh .gz-metric {
  background: transparent; border: 1px solid #E7EDF4; border-radius: 10px;
}
#db-insight-cards.qh .gz-metric .k { color: #5A6B84; }
#db-insight-cards.qh .gz-metric .v {
  color: #16305C; font-weight: 300; font-family: inherit;
  font-variant-numeric: tabular-nums; letter-spacing: -0.5px;
}
#db-insight-cards.qh .gz-metric .d { color: #64748B; }
#db-insight-cards.qh .gz-metric.gold  .v { color: #1E50A2; }
#db-insight-cards.qh .gz-metric.navy  .v { color: #16305C; }
#db-insight-cards.qh .gz-metric.green .v { color: #4C6FA8; }
#db-insight-cards.qh .gz-metric.red   .v { color: #64748B; }
#db-insight-cards.qh .gz-lr { border-bottom: 1px dotted #C9D3E0; }
#db-insight-cards.qh .gz-lr-lv { color: #1E50A2; }
#db-insight-cards.qh .gz-lr-name { color: #17253B; }
#db-insight-cards.qh .gz-lr-bar { background: #DFE8F4; }
#db-insight-cards.qh .gz-lr-bar i { background: #1E50A2; }
#db-insight-cards.qh .gz-lr-cnt { color: #16305C; }
#db-insight-cards.qh .gz-empty { color: #64748B; }
#db-insight-cards.qh .gz-note { border-top-color: #E7EDF4; }
#db-insight-cards.qh .gz-fr-bar { background: #DFE8F4; }
#db-insight-cards.qh .gz-fr-fill { background: #1E50A2; }
#db-insight-cards.qh .gz-fr-name { color: #17253B; }
#db-insight-cards.qh .gz-fr-meta { color: #64748B; }
#db-insight-cards.qh .gz-fr-meta b { color: #16305C; }

/* ═══ 移动端：电脑为主，手机可看 ═══ */
@media (max-width: 640px) {
  .gz-tabs { gap: 4px; }
  .gz-tab { padding: 8px 12px; font-size: 13px; letter-spacing: 0; }
  .gz-metrics.c3, .gz-metrics.c4 { grid-template-columns: repeat(2, 1fr); }
  .gz-metric .v { font-size: 21px; }
  .gz-fr-name { flex: 0 0 62px; font-size: 11.5px; }
  .gz-fr-bar { height: 22px; }
  .gz-fr-meta { flex: 0 0 62px; font-size: 11px; }
  .gz-lr-bar { flex: 0 0 64px; }
  .gz-lr-cnt { flex: 0 0 62px; font-size: 11.5px; }
  .gz-lr-name { font-size: 12px; }
}