/* ════════════════════════════════════════════════════════
 * page-growth.css — Turn A
 * 對應 growth_analysis.html 原 inline <style>
 * 全部 token 化、scope 至 .growth-analysis-page
 * ════════════════════════════════════════════════════════ */

.growth-analysis-page {
  display: flex;
  flex-direction: column;
  gap: var(--momo-space-4, 16px);
}

.growth-analysis-page .card {
  border: 1px solid var(--momo-border-strong);
  border-radius: var(--momo-radius-md, 4px);
  box-shadow: var(--momo-shadow-md);
  margin-bottom: var(--momo-space-5, 24px);
  background: var(--momo-bg-surface);
}

.growth-analysis-page .card-header {
  background: var(--momo-bg-elevated);
  border-bottom: 1px solid var(--momo-border-subtle);
  font-size: var(--momo-text-title);
  font-weight: var(--momo-font-weight-bold);
  color: var(--momo-text-primary);
  padding: var(--momo-space-4, 16px) var(--momo-space-5, 24px);
}

/* ── KPI 卡片 ────────────────────────────────────────── */
.growth-analysis-page .kpi-card {
  position: relative;
  overflow: hidden;
  border: none;
}
.growth-analysis-page .kpi-card .icon-bg {
  position: absolute;
  right: calc(var(--momo-space-4, 16px) * -1);
  bottom: calc(var(--momo-space-4, 16px) * -1);
  font-size: 88px;
  opacity: 0.15;
  transform: rotate(-15deg);
  pointer-events: none;
}
.growth-analysis-page .kpi-value {
  font-family: var(--momo-font-mono);
  font-feature-settings: "tnum";
  font-size: var(--momo-text-display);
  font-weight: var(--momo-font-weight-black);
  letter-spacing: 0;
  margin-bottom: var(--momo-space-1, 4px);
}
.growth-analysis-page .kpi-label {
  font-size: var(--momo-text-body-sm);
  font-weight: var(--momo-font-weight-semibold);
  letter-spacing: 0;
  color: var(--momo-text-secondary);
}

/* ── Bootstrap 覆寫：用 page palette 漸層取代原色 ─── */
.growth-analysis-page .bg-primary {
  background: var(--momo-surface-raised) !important;
}
.growth-analysis-page .bg-success {
  background: var(--momo-surface-raised) !important;
}
.growth-analysis-page .bg-info {
  background: var(--momo-surface-raised) !important;
}

/* ── 趨勢色 ─────────────────────────────────────────── */
.growth-analysis-page .text-success,
.growth-analysis-page .trend-up {
  color: var(--momo-warning-text) !important;
}
.growth-analysis-page .trend-down {
  color: var(--momo-danger-text) !important;
}

.ga-competitor-quality {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: baseline;
}

.ga-competitor-quality span {
  min-width: 0;
  color: var(--momo-text-secondary);
  font-size: var(--momo-text-body-sm);
  font-weight: var(--momo-font-weight-semibold);
}

.ga-competitor-quality strong {
  color: var(--momo-text-primary);
  font-weight: var(--momo-font-weight-black);
  text-align: right;
}