#market-context-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.05fr 1.05fr 1.05fr 0.95fr 1.15fr 0.8fr;
  gap: 12px;
  align-items: stretch;
}

.mc-card {
  position: relative;
  min-height: 118px;
  border-radius: 18px;
  padding: 14px 16px;
  /* Theme-aware: segue le variabili del tema (--ost-*) impostate su #app-root,
     così in light mode la card non resta un'isola scura. */
  background: var(--ost-card-bg, #0B1221);
  border: 1px solid var(--ost-table-border, #1E293B);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  overflow: hidden;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.mc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top left, rgba(103,232,249,0.08), transparent 32%),
    radial-gradient(circle at bottom right, rgba(249,115,22,0.06), transparent 30%);
}

.mc-metric-card {
  min-height: 142px;
}

.mc-regime-card {
  min-height: 142px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-info-card {
  min-height: 142px;
  display: flex;
  align-items: center;
}

/* Responsive solo quando davvero serve */
@media (max-width: 1650px) {
  #market-context-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1.1fr 0.9fr;
  }
}

@media (max-width: 1350px) {
  #market-context-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 900px) {
  #market-context-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  #market-context-grid {
    grid-template-columns: 1fr;
  }
}