.planner-controls { position: sticky; top: 1rem; }
.deployment-canvas {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 52px minmax(130px, 1fr) 52px minmax(190px, 1.35fr);
  align-items: center;
  gap: .25rem;
  min-height: 280px;
  padding: 1.5rem;
  border: 1px solid #dfe4ea;
  border-radius: 1rem;
  background: radial-gradient(circle at top right, rgba(0,123,255,.08), transparent 42%), #f8fafc;
}
.deployment-node {
  min-height: 126px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border: 2px solid #d7dee7;
  border-radius: .85rem;
  background: #fff;
  box-shadow: 0 .2rem .8rem rgba(31,45,61,.08);
}
.deployment-node strong { display: block; }
.deployment-node small { color: #6c757d; }
.deployment-icon { font-size: 2rem; color: #1769e0; line-height: 1; margin-bottom: .5rem; }
.deployment-gateway { border-color: #1769e0; }
.deployment-link span { display: block; height: 2px; background: #1769e0; position: relative; }
.deployment-link span::after { content: ''; position: absolute; right: -1px; top: -4px; border-left: 7px solid #1769e0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.deployment-workers { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; }
.deployment-workers .deployment-node { min-height: 88px; padding: .75rem; }
.deployment-workers .deployment-overflow { border-style: dashed; color: #1769e0; }
.deployment-observability { grid-column: 1 / -1; display: flex; justify-content: center; gap: .5rem; color: #53657a; font-size: .875rem; padding-top: 1rem; }
.store-product-card { transition: transform .15s ease, box-shadow .15s ease; }
.store-product-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.2rem rgba(31,45,61,.12); }
.store-price { font-size: 1.8rem; font-weight: 700; }
.store-status { min-height: 1.5rem; }
@media (max-width: 991.98px) {
  .planner-controls { position: static; }
  .deployment-canvas { grid-template-columns: 1fr; gap: .75rem; }
  .deployment-link { height: 30px; }
  .deployment-link span { width: 2px; height: 30px; margin: 0 auto; }
  .deployment-link span::after { right: -4px; top: auto; bottom: -1px; border-top: 7px solid #1769e0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 0; }
  .deployment-observability { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .store-product-card { transition: none; } }