/* KPI 30 Decision Latency — hero highlight (light + dark) */
:root {
  --kpi30-accent: #38BDF8;
  --kpi30-accent-soft: #E0F2FE;
  --kpi30-accent-border: #7DD3FC;
  --kpi30-glow: rgba(56, 189, 248, 0.22);
}

[data-theme="light"] {
  --kpi30-accent-soft: #E0F2FE;
  --kpi30-glow: rgba(56, 189, 248, 0.18);
}

[data-theme="dark"] {
  --kpi30-accent-soft: rgba(56, 189, 248, 0.12);
}

.kpi30-global-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 18px;
  border-radius: var(--radius-lg, 12px);
  border: 2px solid var(--kpi30-accent-border);
  background: linear-gradient(135deg, var(--kpi30-accent-soft) 0%, var(--bg-surface) 55%);
  box-shadow: 0 4px 20px var(--kpi30-glow);
  animation: kpi30-pulse 3s ease-in-out infinite;
}

.kpi30-global-strip .kpi30-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--kpi30-accent);
  padding: 4px 10px;
  border-radius: 6px;
}

.kpi30-global-strip .kpi30-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-primary);
  line-height: 1.3;
}

.kpi30-global-strip .kpi30-sub {
  font-size: 12px;
  color: var(--fg-secondary);
  margin-top: 2px;
}

.kpi30-global-strip .kpi30-metric {
  text-align: right;
  font-family: var(--font-mono);
}

.kpi30-global-strip .kpi30-metric .kpi30-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--kpi30-accent);
}

.kpi30-global-strip .kpi30-metric .kpi30-target {
  font-size: 10px;
  color: var(--fg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.kpi30-global-strip .btn-sm {
  flex-shrink: 0;
}

.metric.kpi30-hero,
#g4-dash-fi-card .metric,
.kpi30-hero-metric .metric {
  border: 2px solid var(--kpi30-accent-border) !important;
  background: linear-gradient(145deg, var(--kpi30-accent-soft), var(--bg-surface)) !important;
  box-shadow: 0 6px 24px var(--kpi30-glow) !important;
}

.metric.kpi30-hero .m-value,
#g4-dash-fi-card .m-value {
  color: var(--kpi30-accent) !important;
  font-size: 26px !important;
}

.kpi30-hero-banner {
  margin-bottom: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-lg, 12px);
  border: 2px solid var(--kpi30-accent-border);
  background: linear-gradient(135deg, var(--kpi30-accent-soft), var(--bg-elevated));
  box-shadow: 0 4px 16px var(--kpi30-glow);
}

.kpi30-hero-banner h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-primary);
}

.kpi30-hero-banner p {
  margin: 0;
  font-size: 12px;
  color: var(--fg-secondary);
  line-height: 1.55;
}

.kpi30-hero-banner .kpi30-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.kpi30-hero-banner .kpi30-stat {
  font-family: var(--font-mono);
  font-size: 11px;
}

.kpi30-hero-banner .kpi30-stat strong {
  display: block;
  font-size: 18px;
  color: var(--kpi30-accent);
  margin-bottom: 2px;
}

.nav-item.kpi30-nav-spotlight {
  border: 1px solid var(--kpi30-accent-border);
  background: var(--kpi30-accent-soft) !important;
  color: var(--kpi30-accent) !important;
  font-weight: 600;
}

.nav-item.kpi30-nav-spotlight .nav-icon {
  color: var(--kpi30-accent);
}

.nav-item.kpi30-nav-spotlight::after {
  content: 'KPI 30';
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--kpi30-accent);
  color: #fff;
}

@keyframes kpi30-pulse {
  0%, 100% { box-shadow: 0 4px 20px var(--kpi30-glow); }
  50% { box-shadow: 0 6px 28px rgba(56, 189, 248, 0.35); }
}

#g4-wc-impact.kpi30-hero,
#kpi30-latency-hero {
  border: 2px solid var(--kpi30-accent-border);
  box-shadow: 0 4px 16px var(--kpi30-glow);
}

[data-theme="light"] #g4-approval-overlay {
  background: rgba(15, 23, 42, 0.45);
}

[data-theme="light"] #g4-approval-modal {
  background: var(--bg-surface, #fff);
  border-color: var(--border, #e2e8f0);
  color: var(--fg-primary, #0f172a);
}

[data-theme="light"] #g4-approval-modal .g4-signal {
  background: var(--bg-elevated, #f1f5f9);
  color: var(--fg-secondary, #475569);
}

[data-theme="light"] .g4-jp-modal {
  background: var(--bg-surface, #fff);
}