:root {
  color: #172033;
  background: #f4f6fa;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
body.mp-creator-page { margin: 0; min-width: 320px; min-height: 100vh; min-height: 100dvh; overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { touch-action: manipulation; }

.mp-creator-skip-link {
  position: fixed; top: .5rem; left: .5rem; z-index: 100;
  padding: .65rem 1rem; color: #fff; background: #3226a8; border-radius: .5rem;
  transform: translateY(-150%);
}
.mp-creator-skip-link:focus { transform: none; }

.mp-creator-shell {
  min-height: 100vh; min-height: 100dvh; display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  background: #f4f6fa;
}
.mp-creator-shell.is-loading .mp-creator-step,
.mp-creator-shell.is-loading .mp-creator-preview-card { visibility: hidden; }

.mp-creator-header, .mp-creator-footer {
  display: flex; align-items: center; gap: 1rem; background: #fff;
  padding: max(.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .75rem max(1rem, env(safe-area-inset-left));
  box-shadow: 0 1px 10px rgba(20, 35, 65, .09); z-index: 3;
}
.mp-creator-header { justify-content: space-between; min-width: 0; }
.mp-creator-brand, .mp-creator-header-actions { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.mp-creator-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-creator-version { color: #667085; font-size: .82rem; }
.mp-creator-preview-badge { padding: .25rem .55rem; border-radius: 999px; background: #fff1c2; color: #6c4b00; font-size: .78rem; }
.mp-creator-save-status { color: #667085; font-size: .8rem; text-align: right; }
.mp-creator-save-status.is-error { color: #b42318; }
.mp-creator-save-status.is-success { color: #087443; }
.mp-creator-icon-button {
  width: 2.75rem; height: 2.75rem; display: inline-grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: #172033; font-size: 1.75rem; line-height: 1; cursor: pointer;
}
.mp-creator-icon-button:hover { background: #eef0f5; }

.mp-creator-progress-region { padding: .55rem 1.25rem .7rem; background: #fff; border-top: 1px solid #eef0f5; }
.mp-creator-progress-copy { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; color: #5d6678; font-size: .8rem; }
.mp-creator-progress { height: .35rem; overflow: hidden; border-radius: 999px; background: #e1e5ee; }
.mp-creator-progress > span { display: block; width: 0; height: 100%; background: #5145cd; transition: width .2s ease; }

.mp-creator-workspace { min-height: 0; display: grid; grid-template-columns: minmax(18rem, 42%) minmax(20rem, 58%); overflow: hidden; }
.mp-creator-preview-panel, .mp-creator-form-panel { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.mp-creator-preview-panel { display: grid; place-items: center; padding: clamp(1rem, 3vw, 3rem); background: #e9edf5; }
.mp-creator-form-panel { position: relative; padding: clamp(1rem, 3vw, 3rem); background: #f8f9fc; }
.mp-creator-preview-card {
  width: min(31rem, 100%); min-height: 23rem; display: grid; place-items: center; align-content: center; gap: 1rem;
  padding: 2rem; border-radius: 1.25rem; background: #fff; box-shadow: 0 18px 50px rgba(36, 46, 80, .12); text-align: center;
}
.mp-creator-preview-card img { width: min(18rem, 80%); max-height: 18rem; object-fit: contain; }
.mp-creator-preview-placeholder { width: 8rem; height: 8rem; display: grid; place-items: center; border-radius: 1rem; background: #eef0f7; color: #727b8f; font-weight: 700; }
.mp-creator-preview-card h2, .mp-creator-preview-card p { margin: 0; }
.mp-creator-preview-card p { color: #667085; }

.mp-creator-step { width: min(50rem, 100%); margin: 0 auto; }
.mp-creator-card { padding: clamp(1.25rem, 3vw, 2.25rem); border: 1px solid #e3e7ef; border-radius: 1.1rem; background: #fff; box-shadow: 0 14px 45px rgba(35, 44, 80, .09); }
.mp-creator-card h1 { margin: 0 0 .4rem; font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: 1.2; }
.mp-creator-card-intro { margin: 0 0 1.5rem; color: #667085; }
.mp-creator-eyebrow { display: block; margin-bottom: .45rem; color: #6257c7; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.mp-creator-options { display: grid; gap: .75rem; margin-top: 1.25rem; }
.mp-creator-option {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem;
  padding: .9rem 1rem; border: 1px solid #cfd5e1; border-radius: .8rem; background: #fff; color: #172033; text-align: left; cursor: pointer;
}
.mp-creator-option:hover { border-color: #7a6fe2; }
.mp-creator-option.is-selected { border-color: #5145cd; background: #f2f0ff; box-shadow: inset 0 0 0 1px #5145cd; }
.mp-creator-option-image { width: 3.75rem; height: 3.75rem; object-fit: contain; border-radius: .5rem; background: #f3f5f8; }
.mp-creator-option-copy { min-width: 0; display: grid; }
.mp-creator-option-copy small { color: #667085; }
.mp-creator-option-marker { color: #5145cd; font-weight: 700; }

.mp-creator-field { display: grid; gap: .4rem; margin: 1rem 0; }
.mp-creator-field > span:first-child, .mp-creator-field legend { font-weight: 650; }
.mp-creator-field input:not([type="checkbox"]):not([type="radio"]),
.mp-creator-field select, .mp-creator-field textarea {
  width: 100%; min-height: 2.8rem; padding: .7rem .8rem; color: #172033; background: #fff;
  border: 1px solid #bfc6d4; border-radius: .55rem;
}
.mp-creator-field textarea { min-height: 8rem; resize: vertical; }
.mp-creator-checkbox { display: flex; align-items: flex-start; gap: .65rem; }
.mp-creator-checkbox input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; }
.mp-creator-help { color: #667085; font-size: .85rem; }
.mp-creator-field-error { color: #b42318; font-size: .85rem; }

.mp-creator-validation-summary { width: min(50rem, 100%); margin: 0 auto 1rem; padding: 1rem 1.15rem; border: 1px solid #f0b8b3; border-radius: .8rem; background: #fff6f5; color: #912018; }
.mp-creator-validation-summary[hidden] { display: none; }
.mp-creator-validation-summary strong { display: block; margin-bottom: .45rem; }
.mp-creator-validation-summary ul { margin: 0; padding-left: 1.2rem; }
.mp-creator-validation-summary button { padding: .15rem 0; border: 0; background: transparent; color: inherit; text-align: left; text-decoration: underline; cursor: pointer; }
[aria-invalid="true"] { border-color: #d92d20 !important; box-shadow: 0 0 0 2px rgba(217, 45, 32, .13); }

.mp-creator-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; }
.mp-creator-choice { min-height: 6rem; padding: 1rem; border: 1px solid #cfd5e1; border-radius: .75rem; background: #fff; cursor: pointer; }
.mp-creator-choice.is-selected { border-color: #5145cd; background: #f2f0ff; }
.mp-creator-notice { padding: .9rem 1rem; border-left: .25rem solid #7a6fe2; border-radius: .25rem; background: #f3f1ff; color: #443a91; }
.mp-creator-upload-preview { width: min(16rem, 100%); max-height: 16rem; object-fit: contain; border-radius: .75rem; background: #f2f4f8; }
.mp-creator-summary { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: .6rem 1rem; }
.mp-creator-summary dt { color: #667085; }
.mp-creator-summary dd { margin: 0; font-weight: 650; }

.mp-creator-footer { justify-content: space-between; padding-top: .8rem; padding-bottom: max(.8rem, env(safe-area-inset-bottom)); }
.mp-button { min-height: 2.8rem; padding: .7rem 1.2rem; border: 0; border-radius: .6rem; font-weight: 700; cursor: pointer; }
.mp-button--primary { color: #fff; background: #5145cd; }
.mp-button--primary:hover { background: #4035b1; }
.mp-button--secondary { color: #172033; background: #e7eaf1; }
.mp-button:disabled { opacity: .48; cursor: not-allowed; }

.mp-creator-loading { width: min(50rem, 100%); margin: 0 auto; padding: 2rem; border-radius: 1rem; background: #fff; }
.mp-creator-loading span { display: block; height: 1rem; margin: .9rem 0; border-radius: .35rem; background: linear-gradient(90deg, #e9ecf2 25%, #f5f6f9 45%, #e9ecf2 65%); background-size: 300% 100%; animation: mp-skeleton 1.2s infinite; }
.mp-creator-loading span:first-child { width: 42%; height: 1.8rem; }
.mp-creator-loading span:nth-child(3) { width: 75%; }
.mp-creator-error-boundary { width: min(42rem, 100%); margin: 0 auto; padding: 2rem; border: 1px solid #f0b8b3; border-radius: 1rem; background: #fff6f5; }
.mp-creator-error-boundary h1 { margin-top: 0; }
.mp-creator-error-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.mp-creator-live-region { position: fixed; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mp-creator-mobile-tabs { display: none; }

:focus-visible { outline: 3px solid #f7a500; outline-offset: 3px; }
@keyframes mp-skeleton { from { background-position: 100% 0; } to { background-position: 0 0; } }


/* MC-25: at 150% browser zoom a desktop viewport commonly falls below ~960px.
   Keep both work areas usable without forcing horizontal scrolling. */
@media (max-width: 960px) and (min-width: 761px) {
  .mp-creator-header { flex-wrap: wrap; align-items: flex-start; }
  .mp-creator-header-actions { margin-left: auto; }
  .mp-creator-workspace { grid-template-columns: minmax(14rem, 38%) minmax(0, 62%); }
  .mp-creator-preview-panel, .mp-creator-form-panel { padding: 1rem; }
  .mp-creator-preview-card { min-height: 18rem; padding: 1.25rem; }
  .mp-creator-preview-card img { max-height: 13rem; }
  .mp-creator-summary { grid-template-columns: 1fr; }
  .mp-creator-summary dd { margin-bottom: .45rem; }
}
@media (max-width: 760px) {
  body.mp-creator-page { overflow: auto; }
  .mp-creator-shell { min-height: 100dvh; grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
  .mp-creator-header { align-items: flex-start; }
  .mp-creator-preview-badge, .mp-creator-save-status { display: none; }
  .mp-creator-mobile-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .45rem 1rem; background: #fff; border-top: 1px solid #eef0f5; }
  .mp-creator-mobile-tabs button { padding: .55rem; border: 0; border-radius: .45rem; color: #4d5668; background: transparent; font-weight: 700; }
  .mp-creator-mobile-tabs button.is-active { color: #3529a5; background: #eeecff; }
  .mp-creator-workspace { display: block; overflow: hidden; }
  .mp-creator-preview-panel, .mp-creator-form-panel { height: 100%; max-height: none; }
  .mp-creator-preview-panel { display: none; padding: 1rem; }
  .mp-creator-preview-card { min-height: calc(100dvh - 15rem); }
  .mp-creator-form-panel { padding: 1rem; }
  .mp-creator-workspace.is-preview .mp-creator-preview-panel { display: grid; }
  .mp-creator-workspace.is-preview .mp-creator-form-panel { display: none; }
  .mp-creator-option { grid-template-columns: auto 1fr; }
  .mp-creator-option-marker { grid-column: 2; }
  .mp-creator-footer { position: sticky; bottom: 0; }
}

@media (max-width: 430px) {
  .mp-creator-brand { gap: .4rem; }
  .mp-creator-version { display: none; }
  .mp-creator-card { padding: 1.1rem; }
  .mp-button { min-width: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* MC-20 — CollageLayout selection from the shared Asset Library. */
.mp-creator-layout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem; }
.mp-creator-layout { display: grid; gap: .5rem; padding: .7rem; border: 1px solid #cfd5e1; border-radius: .75rem; background: #fff; color: inherit; text-align: left; cursor: pointer; }
.mp-creator-layout.is-selected { border-color: #5145cd; box-shadow: inset 0 0 0 1px #5145cd; background: #f7f5ff; }
.mp-creator-layout-preview { position: relative; display: block; width: 100%; min-height: 7rem; overflow: hidden; border-radius: .5rem; background: #f2f4f8; }
.mp-creator-layout-slot { position: absolute; box-sizing: border-box; border: 2px solid #697386; border-radius: .2rem; background: rgba(255,255,255,.78); }
.mp-creator-layout strong { line-height: 1.2; }
.mp-creator-layout small { color: #667085; }
.mp-creator-layout-warning { margin-top: 1rem; padding: .9rem; border: 1px solid #f0a531; border-radius: .7rem; background: #fff8e7; color: #6b4500; }
.mp-creator-layout-warning p, .mp-creator-layout-warning ul { margin: .45rem 0; }
.mp-creator-layout-warning ul { padding-left: 1.25rem; }
.mp-creator-layout-warning > div { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.mp-creator-layout-warning button { min-height: 2.4rem; padding: .45rem .7rem; border: 1px solid currentColor; border-radius: .45rem; background: #fff; color: inherit; cursor: pointer; }

/* MC-20: shared CollageLayout step source/crop editor. */
.mp-creator-layout-sources{display:grid;gap:1rem;margin-top:1.25rem}.mp-creator-layout-sources>h3{margin:0}.mp-creator-layout-source{border:1px solid #d9e0e8;border-radius:12px;padding:1rem;background:#fff}.mp-creator-layout-source-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.75rem}.mp-creator-layout-source-head small{color:#667085;overflow-wrap:anywhere}.mp-creator-layout-source-preview{position:relative;display:grid;place-items:center;overflow:hidden;min-height:180px;border:1px dashed #bdc7d4;border-radius:10px;background:#f7f9fb}.mp-creator-layout-source-preview img{position:absolute;inset:0;margin:auto;max-width:none;max-height:none;transform-origin:center center}.mp-creator-layout-source-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.mp-creator-layout-upload{display:inline-flex;align-items:center;gap:.5rem}.mp-creator-layout-upload input{max-width:220px}.mp-creator-layout-library{margin-top:.75rem;padding:.75rem;border:1px solid #e2e7ed;border-radius:10px;background:#fafbfc}.mp-creator-layout-library-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem;margin:.75rem 0}.mp-creator-layout-library-item{display:grid;gap:.35rem;align-content:start;text-align:left;padding:.45rem;border:1px solid #d9e0e8;border-radius:8px;background:#fff}.mp-creator-layout-library-item img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px}.mp-creator-layout-crop{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.6rem;margin-top:.85rem;padding:.75rem;border:1px solid #e2e7ed;border-radius:10px}.mp-creator-layout-crop legend{padding:0 .25rem;font-weight:600}.mp-creator-layout-crop label{display:grid;gap:.3rem}

/* MC-27 upload transfer state and asset quality. */
.mp-creator-upload-state{width:min(50rem,100%);margin:0 auto 1rem;padding:.85rem 1rem;border:1px solid #d8dee8;border-radius:.8rem;background:#fff}.mp-creator-upload-state[hidden]{display:none}.mp-creator-upload-state>div:first-child{display:flex;justify-content:space-between;gap:1rem}.mp-creator-upload-state progress{width:100%;height:.7rem;margin:.55rem 0}.mp-creator-upload-actions{display:flex;gap:.5rem}.mp-creator-quality{margin:.55rem 0 0;padding:.45rem .6rem;border-radius:.45rem;font-size:.82rem;background:#eef7ef;color:#246b35}.mp-creator-quality.is-warning{background:#fff6df;color:#8a5a00}.mp-creator-quality.is-block{background:#fff0ee;color:#b42318}.mp-creator-asset-browser{display:grid;gap:.75rem}.mp-creator-asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.65rem}.mp-creator-asset-card{display:grid;gap:.4rem;padding:.5rem;text-align:left;border:1px solid #d9e0e8;border-radius:.65rem;background:#fff}.mp-creator-asset-card.is-selected{border-color:#5145cd;box-shadow:0 0 0 2px rgba(81,69,205,.12)}.mp-creator-asset-card img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#f5f7fa;border-radius:.45rem}.mp-creator-asset-pagination{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.mp-creator-layout-crop .mp-creator-crop-rect{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(90px,1fr));gap:.5rem}@media(max-width:640px){.mp-creator-layout-crop .mp-creator-crop-rect{grid-template-columns:repeat(2,minmax(90px,1fr))}}

/* 3.35.20 — nawigacja również u góry oraz wybór wariantu po cechach. */
.mp-creator-progress-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .45rem; }
.mp-creator-progress-topline .mp-creator-progress-copy { flex: 1 1 auto; margin-bottom: 0; min-width: 0; }
.mp-creator-top-navigation { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; }
.mp-button--compact { min-height: 2.35rem; padding: .45rem .8rem; font-size: .86rem; }

.mp-creator-variant-picker { display: grid; gap: 1.15rem; }
.mp-creator-variant-picker > .mp-creator-help { margin: 0; }
.mp-creator-attribute-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.mp-creator-attribute-group legend { width: 100%; margin: 0 0 .55rem; padding: 0; font-weight: 750; color: #172033; }
.mp-creator-attribute-options { display: flex; flex-wrap: wrap; gap: .55rem; }
.mp-creator-attribute-option {
  min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .55rem .9rem; border: 1px solid #c7ceda; border-radius: .65rem; background: #fff; color: #172033;
  font-weight: 650; cursor: pointer;
}
.mp-creator-attribute-option:hover:not(:disabled) { border-color: #7a6fe2; }
.mp-creator-attribute-option.is-selected { border-color: #5145cd; background: #f2f0ff; box-shadow: inset 0 0 0 1px #5145cd; }
.mp-creator-attribute-option:disabled { opacity: .38; cursor: not-allowed; }
.mp-creator-attribute-swatch { width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; border: 1px solid rgba(0,0,0,.18); border-radius: 50%; box-shadow: inset 0 0 0 2px #fff; }

@media (max-width: 760px) {
  .mp-creator-progress-topline { align-items: flex-start; }
  .mp-creator-progress-copy { display: grid; gap: .1rem; }
  .mp-creator-top-navigation { gap: .35rem; }
  .mp-button--compact { min-width: 0; padding: .42rem .62rem; font-size: .8rem; }
  .mp-creator-attribute-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-creator-attribute-option { width: 100%; }
}

@media (max-width: 430px) {
  .mp-creator-progress-topline { display: grid; grid-template-columns: 1fr; }
  .mp-creator-top-navigation { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .mp-button--compact { width: 100%; }
}

/* 3.35.22 — desktop editor workspace: use the viewport instead of centering two small cards. */
@media (min-width: 761px) {
  .mp-creator-shell.is-editor-step .mp-creator-workspace {
    grid-template-columns: minmax(32rem, 3fr) minmax(30rem, 2fr);
    gap: 0;
  }

  .mp-creator-shell.is-editor-step .mp-creator-preview-panel {
    align-items: stretch;
    justify-items: stretch;
    overflow: hidden;
    padding: .85rem 1rem;
  }

  .mp-creator-shell.is-editor-step .mp-creator-form-panel {
    display: flex;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    padding: .85rem 1rem;
  }

  .mp-creator-shell.is-editor-step .mp-creator-preview-card {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    padding: .85rem;
    overflow: hidden;
    border-radius: .9rem;
  }

  .mp-creator-shell.is-editor-step .mp-creator-step {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    height: 100%;
    margin: 0;
  }

  .mp-creator-shell.is-editor-step .mp-creator-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: .95rem 1rem;
    overflow: hidden;
    border-radius: .9rem;
  }

  .mp-creator-shell.is-editor-step .mp-creator-card h1 {
    margin-bottom: .2rem;
    font-size: clamp(1.25rem, 1.45vw, 1.7rem);
  }

  .mp-creator-shell.is-editor-step .mp-creator-card-intro {
    margin-bottom: .65rem;
    font-size: .84rem;
  }

  .mp-creator-shell.is-editor-step [data-editor-controls] {
    flex: 1 1 auto;
    min-height: 0;
  }

  .mp-creator-shell.is-editor-step .mp-creator-validation-summary,
  .mp-creator-shell.is-editor-step .mp-creator-upload-state {
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: .55rem;
  }

  .mp-creator-shell.is-editor-step .mp-creator-footer {
    padding-top: .5rem;
    padding-bottom: max(.5rem, env(safe-area-inset-bottom));
  }
}

@media (min-width: 1600px) {
  .mp-creator-shell.is-editor-step .mp-creator-workspace {
    grid-template-columns: minmax(0, 61%) minmax(32rem, 39%);
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .mp-creator-shell.is-editor-step .mp-creator-workspace {
    grid-template-columns: minmax(0, 52%) minmax(0, 48%);
  }

  .mp-creator-shell.is-editor-step .mp-creator-preview-panel,
  .mp-creator-shell.is-editor-step .mp-creator-form-panel {
    padding: .65rem;
  }
}

/* 3.35.23 — desktop editor uses natural content height; the form pane owns scrolling. */
@media (min-width: 761px) {
  .mp-creator-shell.is-editor-step .mp-creator-form-panel {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .mp-creator-shell.is-editor-step .mp-creator-step {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
  }

  .mp-creator-shell.is-editor-step .mp-creator-card {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .mp-creator-shell.is-editor-step [data-editor-controls] {
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
}


/* 3.35.24 — one top navigation and a genuinely bounded desktop editor viewport. */
.mp-creator-shell { grid-template-rows: auto auto auto minmax(0, 1fr); }

@media (min-width: 761px) {
  .mp-creator-shell.is-editor-step .mp-creator-form-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    scrollbar-gutter: auto;
  }

  .mp-creator-shell.is-editor-step .mp-creator-step {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .mp-creator-shell.is-editor-step .mp-creator-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .mp-creator-shell.is-editor-step .mp-creator-card > *:not([data-editor-controls]) {
    flex: 0 0 auto;
  }

  .mp-creator-shell.is-editor-step [data-editor-controls] {
    flex: 1 1 auto;
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .mp-creator-shell { grid-template-rows: auto auto auto minmax(0, 1fr); }
}

/* 3.35.25 — bind the desktop editor to the viewport so the right pane owns scrolling. */
@media (min-width: 761px) {
  body.mp-creator-page {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden;
  }

  .mp-creator-shell,
  .mp-creator-shell.is-editor-step {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden;
  }

  .mp-creator-shell.is-editor-step .mp-creator-workspace,
  .mp-creator-shell.is-editor-step .mp-creator-form-panel,
  .mp-creator-shell.is-editor-step .mp-creator-step,
  .mp-creator-shell.is-editor-step .mp-creator-card {
    min-height: 0;
    max-height: 100%;
  }

  .mp-creator-shell.is-editor-step .mp-creator-form-panel,
  .mp-creator-shell.is-editor-step .mp-creator-step,
  .mp-creator-shell.is-editor-step .mp-creator-card {
    overflow: hidden;
  }
}