/* ============================================================
   kpi-strip.css — KPI 数据条卡片组件
   ------------------------------------------------------------
   依赖：tokens.css（--brand/--info/--down/--warn 及其 *-tint 变体、
         --surface/--border/--text/--text-muted/--r/--r-lg/--r-sm/
         --sh-2/--fs-sm/--fw-regular/--fw-medium/--space-2/--transition-fast）
   用法：
     <link rel="stylesheet" href="/static/components/kpi-strip.css">
     或通过 index.css 统一引入。

   HTML 结构约定（BEM）：
     .kpi-strip__card[.--index|--amt|--north|--south]
       .kpi-strip__head
         .kpi-strip__icon  > svg
         .kpi-strip__name   > (a 或 span)
       .kpi-strip__value
         .kpi-strip__num    > 数值文本
         .kpi-strip__pct    > 分位百分比 pill
       .progress.kpi-strip__progress
         .progress-bar.kpi-strip__bar  (inline style 控制宽度)

   语义变体说明：
     --index : 主指数/基准指标（品牌橙色）
     --amt    : 成交额/金额类（信息蓝）
     --north  : 北向/流入类（正向绿）
     --south  : 南向/流出类（警告琥珀）
   ============================================================ */

/* ---- 容器 ---- */
.kpi-strip__card {
  position: relative;
  background: linear-gradient(135deg, var(--surface, #fff) 0%, #faf9f7 100%);
  border: 0.5px solid var(--border, #eceef1);
  border-radius: var(--r-lg, 12px);
  padding: 12px 16px 11px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  text-align: center;
  transition: box-shadow var(--transition-fast, .15s ease),
    transform var(--transition-fast, .15s ease);
}

.kpi-strip__card:hover {
  box-shadow: var(--sh-2, 0 4px 12px rgba(24, 28, 45, .08));
  transform: translateY(-2px);
}

/* ---- 图标行 ---- */
.kpi-strip__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
}

.kpi-strip__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-strip__icon svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* ---- 图标语义色变体 ---- */
.kpi-strip__card--index .kpi-strip__icon {
  color: var(--brand, #ef6a4c);
  background: var(--brand-tint, #fdeee9);
}

.kpi-strip__card--amt .kpi-strip__icon {
  color: var(--info, #2563eb);
  background: var(--info-tint, #eaf1fe);
}

.kpi-strip__card--north .kpi-strip__icon {
  color: var(--down, #15803d);
  background: var(--down-tint, #e8f5ec);
}

.kpi-strip__card--south .kpi-strip__icon {
  color: var(--warn, #c2840a);
  background: var(--warn-tint, #fbf2dc);
}

/* ---- 名称 ---- */
.kpi-strip__name {
  font-size: var(--fs-sm, 13px);
  color: var(--text-muted, #8b919c);
  font-weight: var(--fw-regular, 400);
  line-height: 1.2;
}

.kpi-strip__name a {
  color: inherit;
  text-decoration: none;
}

.kpi-strip__name a:hover {
  color: var(--brand, #ef6a4c);
}

/* ---- 数值行 ---- */
.kpi-strip__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}

.kpi-strip__num {
  font-size: 1rem;
  font-weight: var(--fw-medium, 500);
  color: var(--text, #1f2430);
  letter-spacing: -0.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.kpi-strip__pct {
  font-size: var(--fs-sm, 13px);
  font-weight: var(--fw-medium, 500);
  padding: 1px 7px;
  border-radius: var(--r-sm, 4px);
  color: var(--brand, #ef6a4c);
  background: var(--brand-tint, #fdeee9);
  white-space: nowrap;
}

/* ---- 进度条 ---- */
.kpi-strip__progress {
  display: block;
  height: 4px;
  background: rgba(24, 28, 45, .06);
  border-radius: 2px;
  overflow: hidden;
}

.kpi-strip__bar {
  display: block;
  height: 100%;
  border-radius: 2px;
}

/* ---- 紧凑变体（指标较多 / 页内空间紧张的页面，如模拟盘账户页） ---- */
.kpi-strip__card--compact {
  padding: 8px 12px 8px;
  gap: 0.375rem;
}

.kpi-strip__card--compact .kpi-strip__icon {
  width: 24px;
  height: 24px;
}

.kpi-strip__card--compact .kpi-strip__icon svg {
  width: 14px;
  height: 14px;
}

.kpi-strip__card--compact .kpi-strip__name {
  font-size: var(--fs-xs, 12px);
}

.kpi-strip__card--compact .kpi-strip__num {
  font-size: var(--fs-base, 14px);
  letter-spacing: -0.3px;
}