/* Magnet Studio M1.3 — final micro-polish after screenshot review. */

.ms-header a:focus:not(:focus-visible),
.ms-header button:focus:not(:focus-visible) { outline: none; }

.ms-app:has(#smart-cut) .ms-benefits {
  width: min(1180px, calc(100vw - 72px));
  margin-inline: auto;
}

/* The third Smart Cut step is the manufactured magnet: a white outline must read instantly. */
#smart-cut .ms-transform > article:last-child {
  border-radius: 24px;
  background-color: #edf2ff;
  background-size: 88% auto;
  box-shadow: inset 0 0 0 1px rgba(49,88,255,.06), 0 16px 34px rgba(31,43,79,.06);
}

#smart-cut .ms-transform > article:last-child::before {
  content: 'BÍLÝ VÝROBNÍ OBRYS';
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  padding: 6px 9px;
  border-radius: 999px;
  color: #3158ff;
  background: rgba(255,255,255,.94);
  box-shadow: 0 6px 16px rgba(31,43,79,.08);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .10em;
  white-space: nowrap;
}

/* Keep headings optically balanced at desktop widths. */
.ms-app:has(#smart-cut) .ms-sheet > div:first-child { max-width: 560px; }
.ms-app:has(#smart-cut) .ms-use-grid article h3 { letter-spacing: -.035em; }
.ms-app:has(#smart-cut) .ms-final h2 { max-width: 620px; }

/* Studio controls should feel like one inspector, not a stack of cards. */
.ms-inspector .ms-segmented,
.ms-inspector select,
.ms-inspector .ms-qty,
.ms-inspector .ms-upload {
  border-color: rgba(18,30,65,.10) !important;
}
.ms-inspector .ms-segmented { background: #f2f4f9; }
.ms-inspector .ms-segmented button.is-selected { box-shadow: 0 5px 15px rgba(31,43,79,.09); }
.ms-canvas-label { box-shadow: 0 8px 20px rgba(31,43,79,.08); }

@media (max-width: 820px) {
  .ms-app:has(#smart-cut) .ms-benefits { width: calc(100% - 28px); }
  #smart-cut .ms-transform > article:last-child::before { top: 8px; }
}