/* Final Studio reflow authority v48.
   Loaded after operations v41 so desktop, zoomed desktop, tablet, phone and PWA
   reflow without clipping or overlap. Nara is intentionally untouched. */

html[data-studio-reflow-v48] {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html[data-studio-reflow-v48] body,
html[data-studio-reflow-v48] #root,
html[data-studio-reflow-v48] .sn-shell {
  min-width: 0 !important;
  max-width: 100% !important;
  transform: none !important;
  perspective: none !important;
  filter: none !important;
  contain: none !important;
}

html[data-studio-reflow-v48] .sn-main,
html[data-studio-reflow-v48] .sn-main > *,
html[data-studio-reflow-v48] .sn-view-pad,
html[data-studio-reflow-v48] .sn-view-pad > *,
html[data-studio-reflow-v48] .tn-studio,
html[data-studio-reflow-v48] .tn-studio > *,
html[data-studio-reflow-v48] .op41-host,
html[data-studio-reflow-v48] .op41-panel,
html[data-studio-reflow-v48] .sn-media-library {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html[data-studio-reflow-v48] .sn-main,
html[data-studio-reflow-v48] .sn-view-pad,
html[data-studio-reflow-v48] .tn-studio {
  overflow-x: hidden !important;
}

html[data-studio-reflow-v48] :where(.sn-view-pad, .tn-studio, .op41-panel) :where(h1, h2, h3, p, b, span, small, code, dd, dt, label) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

html[data-studio-reflow-v48] :where(.sn-view-pad, .tn-studio, .op41-panel) :where(img, video, audio, iframe, canvas, svg, table) {
  max-width: 100%;
}

/* Shared page heading: capped typography and predictable vertical flow. */
html[data-studio-reflow-v48] .sn-page-title {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 16px !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  transform: none !important;
}

html[data-studio-reflow-v48] .sn-page-title > div {
  min-width: 0 !important;
}

html[data-studio-reflow-v48] .sn-page-title h1 {
  margin: 0 0 10px !important;
  max-width: 100% !important;
  font-size: clamp(34px, 5vw, 62px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.04em !important;
  white-space: normal !important;
}

html[data-studio-reflow-v48] .sn-page-title p {
  margin: 0 !important;
  max-width: 72ch !important;
  font-size: clamp(14px, 1.35vw, 18px) !important;
  line-height: 1.55 !important;
  white-space: normal !important;
}

html[data-studio-reflow-v48] .sn-page-title > :last-child:not(div) {
  justify-self: end;
  align-self: start;
}

/* Site manager must use the viewport, not the dashboard column. */
html[data-studio-reflow-v48] .sn-modal-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 250000 !important;
  width: 100vw !important;
  height: 100dvh !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(10px, 2vw, 24px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  clip-path: none !important;
  contain: none !important;
}

html[data-studio-reflow-v48] .sn-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  margin: 0 !important;
  transform: none !important;
}

html[data-studio-reflow-v48] .sn-site-manager {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  width: min(1180px, calc(100vw - 48px)) !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100dvh - 48px) !important;
  margin: auto !important;
  overflow: auto !important;
  transform: none !important;
  clip-path: none !important;
  contain: none !important;
}

html[data-studio-reflow-v48] .sn-site-manager > header {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background: #fff !important;
}

html[data-studio-reflow-v48] .sn-site-manager :where(.sn-sites-list, .sn-create-site, .sq-banner) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-studio-reflow-v48] .sn-site-manager .sn-create-site {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
}

html[data-studio-reflow-v48] .sn-site-manager .sn-create-site > div {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}

html[data-studio-reflow-v48] .sn-site-manager .sn-create-site label,
html[data-studio-reflow-v48] .sn-site-manager .sn-create-site input,
html[data-studio-reflow-v48] .sn-site-manager .sn-create-site textarea,
html[data-studio-reflow-v48] .sn-site-manager .sn-create-site select,
html[data-studio-reflow-v48] .sn-site-manager .sn-create-site button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-studio-reflow-v48] .sn-site-manager .sn-create-site label.wide {
  grid-column: 1 / -1 !important;
}

html[data-studio-reflow-v48] .sn-domain-input {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
}

html[data-studio-reflow-v48] .sn-domain-input > span {
  min-width: 0 !important;
  max-width: 12rem !important;
  display: flex !important;
  align-items: center !important;
  overflow-wrap: anywhere !important;
}

html[data-studio-reflow-v48] .sq-banner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  overflow: hidden !important;
}

/* Analytics, members and domain operations. */
html[data-studio-reflow-v48] .op41-host,
html[data-studio-reflow-v48] .op41-panel {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  isolation: isolate;
}

html[data-studio-reflow-v48] .op41-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
}

html[data-studio-reflow-v48] .op41-toolbar {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 16px !important;
}

html[data-studio-reflow-v48] .op41-toolbar > div,
html[data-studio-reflow-v48] .op41-card header > div {
  min-width: 0 !important;
}

html[data-studio-reflow-v48] .op41-toolbar h2 {
  margin: 5px 0 6px !important;
  font-size: clamp(24px, 3vw, 38px) !important;
  line-height: 1.08 !important;
  white-space: normal !important;
}

html[data-studio-reflow-v48] .op41-toolbar p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

html[data-studio-reflow-v48] .op41-toolbar-actions {
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
}

html[data-studio-reflow-v48] .op41-toolbar-actions > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-studio-reflow-v48] .op41-metrics {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html[data-studio-reflow-v48] .op41-metrics > article {
  min-width: 0 !important;
  overflow: hidden !important;
}

html[data-studio-reflow-v48] .op41-metrics article b {
  display: block !important;
  margin: 8px 0 !important;
  font-size: clamp(30px, 4vw, 48px) !important;
  line-height: 1 !important;
  white-space: normal !important;
}

html[data-studio-reflow-v48] .op41-chart-grid,
html[data-studio-reflow-v48] .op41-member-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

html[data-studio-reflow-v48] .op41-chart-grid.equal {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html[data-studio-reflow-v48] .op41-card {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html[data-studio-reflow-v48] .op41-card > header {
  min-width: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

html[data-studio-reflow-v48] .op41-card h2 {
  margin: 5px 0 0 !important;
  font-size: clamp(18px, 2vw, 27px) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

html[data-studio-reflow-v48] .op41-line {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 320px !important;
  overflow: visible !important;
}

html[data-studio-reflow-v48] .op41-donut-wrap {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(170px, .8fr) minmax(0, 1.2fr) !important;
  align-items: center !important;
  gap: 16px !important;
}

html[data-studio-reflow-v48] .op41-donut {
  width: min(220px, 100%) !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  margin-inline: auto !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-studio-reflow-v48] .op41-legend,
html[data-studio-reflow-v48] .op41-bars,
html[data-studio-reflow-v48] .op41-list {
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-studio-reflow-v48] .op41-legend li {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 14px minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
}

html[data-studio-reflow-v48] .op41-table-wrap,
html[data-studio-reflow-v48] .op41-dns-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
}

html[data-studio-reflow-v48] .op41-table {
  min-width: 720px !important;
}

html[data-studio-reflow-v48] .op41-list article {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-content: initial !important;
  gap: 10px !important;
}

html[data-studio-reflow-v48] .op41-list article > div {
  min-width: 0 !important;
}

html[data-studio-reflow-v48] .op41-role {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html[data-studio-reflow-v48] .op41-form {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, .8fr) auto !important;
  align-items: end !important;
  gap: 10px !important;
}

html[data-studio-reflow-v48] .op41-form :where(label, input, select, button) {
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-studio-reflow-v48] .op41-readiness {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr) !important;
  gap: 18px !important;
  margin: 24px 0 0 !important;
  transform: none !important;
}

html[data-studio-reflow-v48] .op41-readiness h2 {
  margin: 6px 0 8px !important;
  font-size: clamp(24px, 3vw, 38px) !important;
  line-height: 1.1 !important;
}

html[data-studio-reflow-v48] .op41-domain-list,
html[data-studio-reflow-v48] .op41-domain {
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-studio-reflow-v48] .op41-domain > header,
html[data-studio-reflow-v48] .op41-domain > footer {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html[data-studio-reflow-v48] .op41-domain h3 {
  margin: 4px 0 0 !important;
  font-size: clamp(18px, 2vw, 26px) !important;
  line-height: 1.15 !important;
}

html[data-studio-reflow-v48] .op41-dns {
  min-width: 760px !important;
}

html[data-studio-reflow-v48] .sn-domain-card,
html[data-studio-reflow-v48] .sn-launch,
html[data-studio-reflow-v48] .op41-host[data-surface="domains"] {
  position: relative !important;
  inset: auto !important;
  z-index: 0 !important;
  width: 100% !important;
  margin-top: 18px !important;
  transform: none !important;
  clear: both !important;
}

/* Media page: header, upload target and controls stay in normal document flow. */
html[data-studio-reflow-v48] .sn-media-library {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px !important;
}

html[data-studio-reflow-v48] .sn-media-library .sn-page-title {
  margin-bottom: 0 !important;
}

html[data-studio-reflow-v48] .sn-upload-zone {
  position: relative !important;
  inset: auto !important;
  z-index: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 220px !important;
  margin: 0 !important;
  transform: none !important;
  clear: both !important;
}

html[data-studio-reflow-v48] .sn-media-tools {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 12px !important;
}

html[data-studio-reflow-v48] .sn-media-tools :where(label, nav, input, button, span) {
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-studio-reflow-v48] .sn-media-tools nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

/* Theme Studio: remove the malformed oval/glow and keep every control in flow. */
html[data-studio-reflow-v48] .tn-studio {
  width: 100% !important;
  isolation: isolate;
}

html[data-studio-reflow-v48] .tn-hero,
html[data-studio-reflow-v48] .tn-library,
html[data-studio-reflow-v48] .tn-blueprints,
html[data-studio-reflow-v48] .tn-command,
html[data-studio-reflow-v48] .tn-active-stage,
html[data-studio-reflow-v48] .tn-frame-shell,
html[data-studio-reflow-v48] .tn-theme-grid,
html[data-studio-reflow-v48] .tn-modal,
html[data-studio-reflow-v48] .tn-modal-body,
html[data-studio-reflow-v48] .tn-code-workspace,
html[data-studio-reflow-v48] .tn-code-pane {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html[data-studio-reflow-v48] .tn-hero-copy h1 {
  margin: 14px 0 18px !important;
  font-size: clamp(36px, 4vw, 62px) !important;
  line-height: 1.02 !important;
  white-space: normal !important;
}

html[data-studio-reflow-v48] .tn-hero-copy p,
html[data-studio-reflow-v48] .tn-library header p {
  font-size: clamp(13px, 1.2vw, 16px) !important;
  line-height: 1.55 !important;
}

html[data-studio-reflow-v48] .tn-active-stage,
html[data-studio-reflow-v48] .tn-frame-shell,
html[data-studio-reflow-v48] .tn-frame-shell iframe {
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

html[data-studio-reflow-v48] .tn-active-stage {
  box-shadow: 0 12px 36px rgba(28, 53, 91, .12) !important;
}

html[data-studio-reflow-v48] .tn-active-stage::before,
html[data-studio-reflow-v48] .tn-active-stage::after,
html[data-studio-reflow-v48] .tn-frame-shell::before,
html[data-studio-reflow-v48] .tn-frame-shell::after,
html[data-studio-reflow-v48] .tn-modal::before,
html[data-studio-reflow-v48] .tn-modal::after {
  display: none !important;
  content: none !important;
}

html[data-studio-reflow-v48] .tn-frame-shell {
  overflow: auto !important;
  border-radius: 0 !important;
  background: #e8edf4 !important;
  box-shadow: none !important;
}

html[data-studio-reflow-v48] .tn-frame-shell iframe {
  display: block !important;
  max-width: 100% !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(26, 45, 73, .12) !important;
}

html[data-studio-reflow-v48] .tn-frame-shell.mobile iframe {
  width: min(390px, 100%) !important;
}

html[data-studio-reflow-v48] .tn-stage-toolbar {
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-studio-reflow-v48] .tn-device-switch {
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-studio-reflow-v48] .tn-library > header {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) !important;
  align-items: end !important;
  gap: 20px !important;
}

html[data-studio-reflow-v48] .tn-library header h2,
html[data-studio-reflow-v48] .tn-blueprints h2 {
  margin: 8px 0 6px !important;
  font-size: clamp(28px, 3.2vw, 44px) !important;
  line-height: 1.08 !important;
  white-space: normal !important;
}

html[data-studio-reflow-v48] .tn-library header label {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-studio-reflow-v48] .tn-category-tabs {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  width: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  margin: 18px 0 !important;
  padding: 2px 0 8px !important;
  overflow-x: auto !important;
  transform: none !important;
}

html[data-studio-reflow-v48] .tn-category-tabs button {
  flex: 0 0 auto !important;
  min-height: 38px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

html[data-studio-reflow-v48] .tn-theme-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

html[data-studio-reflow-v48] .tn-modal-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 260000 !important;
  width: 100vw !important;
  height: 100dvh !important;
  margin: 0 !important;
  transform: none !important;
  contain: none !important;
}

html[data-studio-reflow-v48] .tn-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
}

html[data-studio-reflow-v48] .tn-modal {
  position: relative !important;
  inset: auto !important;
  margin: auto !important;
  transform: none !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .35) !important;
}

html[data-studio-reflow-v48] .tn-code-workspace {
  overflow: hidden !important;
}

html[data-studio-reflow-v48] .tn-code-pane textarea {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: pre !important;
  overflow: auto !important;
}

@media (max-width: 1200px) {
  html[data-studio-reflow-v48] .tn-hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-studio-reflow-v48] .tn-theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-studio-reflow-v48] .op41-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-studio-reflow-v48] .op41-chart-grid,
  html[data-studio-reflow-v48] .op41-chart-grid.equal,
  html[data-studio-reflow-v48] .op41-member-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 900px) {
  html[data-studio-reflow-v48] .sn-page-title,
  html[data-studio-reflow-v48] .op41-toolbar,
  html[data-studio-reflow-v48] .op41-readiness,
  html[data-studio-reflow-v48] .tn-library > header {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-studio-reflow-v48] .sn-page-title > :last-child:not(div),
  html[data-studio-reflow-v48] .op41-toolbar-actions {
    justify-self: stretch !important;
    justify-content: flex-start !important;
  }

  html[data-studio-reflow-v48] .sn-site-manager .sn-create-site > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-studio-reflow-v48] .op41-form {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  html[data-studio-reflow-v48] .sn-media-tools {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  html[data-studio-reflow-v48] .op41-donut-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 700px) {
  html[data-studio-reflow-v48] .sn-view-pad {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  html[data-studio-reflow-v48] .sn-page-title {
    gap: 12px !important;
    margin-bottom: 18px !important;
  }

  html[data-studio-reflow-v48] .sn-page-title h1 {
    font-size: clamp(30px, 9vw, 40px) !important;
    line-height: 1.04 !important;
  }

  html[data-studio-reflow-v48] .sn-page-title p {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  html[data-studio-reflow-v48] .sn-site-manager {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  html[data-studio-reflow-v48] .sn-modal-layer {
    padding: 0 !important;
  }

  html[data-studio-reflow-v48] .sn-site-manager .sn-create-site > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-studio-reflow-v48] .sn-domain-input {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-studio-reflow-v48] .sn-domain-input > span {
    max-width: none !important;
    min-height: 42px !important;
  }

  html[data-studio-reflow-v48] .sq-banner,
  html[data-studio-reflow-v48] .op41-metrics,
  html[data-studio-reflow-v48] .op41-chart-grid,
  html[data-studio-reflow-v48] .op41-chart-grid.equal,
  html[data-studio-reflow-v48] .op41-member-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-studio-reflow-v48] .op41-toolbar h2,
  html[data-studio-reflow-v48] .op41-readiness h2 {
    font-size: clamp(24px, 8vw, 34px) !important;
  }

  html[data-studio-reflow-v48] .op41-card h2 {
    font-size: 21px !important;
  }

  html[data-studio-reflow-v48] .op41-metrics article b {
    font-size: 36px !important;
  }

  html[data-studio-reflow-v48] .op41-toolbar-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  html[data-studio-reflow-v48] .op41-toolbar-actions > *,
  html[data-studio-reflow-v48] .op41-form button {
    width: 100% !important;
  }

  html[data-studio-reflow-v48] .op41-list article {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  html[data-studio-reflow-v48] .op41-list article .op41-role {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  html[data-studio-reflow-v48] .sn-upload-zone {
    min-height: 190px !important;
    padding: 18px !important;
  }

  html[data-studio-reflow-v48] .tn-studio {
    padding: 16px 12px 92px !important;
  }

  html[data-studio-reflow-v48] .tn-hero-copy,
  html[data-studio-reflow-v48] .tn-library,
  html[data-studio-reflow-v48] .tn-blueprints {
    padding: 20px 16px !important;
  }

  html[data-studio-reflow-v48] .tn-hero-copy h1 {
    font-size: clamp(32px, 10vw, 42px) !important;
  }

  html[data-studio-reflow-v48] .tn-active-stage {
    min-height: 560px !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(28, 53, 91, .1) !important;
  }

  html[data-studio-reflow-v48] .tn-stage-toolbar {
    height: auto !important;
    min-height: 76px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    padding: 10px !important;
  }

  html[data-studio-reflow-v48] .tn-device-switch {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html[data-studio-reflow-v48] .tn-device-switch button {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding-inline: 4px !important;
  }

  html[data-studio-reflow-v48] .tn-device-switch button span {
    display: none !important;
  }

  html[data-studio-reflow-v48] .tn-frame-shell {
    padding: 8px !important;
  }

  html[data-studio-reflow-v48] .tn-frame-shell iframe {
    min-height: 500px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  html[data-studio-reflow-v48] .tn-library header h2,
  html[data-studio-reflow-v48] .tn-blueprints h2 {
    font-size: clamp(28px, 9vw, 38px) !important;
  }

  html[data-studio-reflow-v48] .tn-theme-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-studio-reflow-v48] .tn-modal-layer {
    padding: 0 !important;
  }

  html[data-studio-reflow-v48] .tn-modal,
  html[data-studio-reflow-v48] .tn-modal.large,
  html[data-studio-reflow-v48] .tn-modal.fullscreen,
  html[data-studio-reflow-v48] .tn-modal.preview {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  html[data-studio-reflow-v48] .tn-code-workspace,
  html[data-studio-reflow-v48] .tn-customizer {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: auto !important;
  }

  html[data-studio-reflow-v48] .tn-code-pane {
    min-height: 58dvh !important;
    border-right: 0 !important;
  }

  html[data-studio-reflow-v48] .tn-code-pane > nav {
    overflow-x: auto !important;
  }

  html[data-studio-reflow-v48] .tn-code-pane > nav button {
    flex: 0 0 auto !important;
  }

  html[data-studio-reflow-v48] .tn-code-workspace > .tn-frame-shell,
  html[data-studio-reflow-v48] .tn-customizer > .tn-frame-shell {
    min-height: 52dvh !important;
  }
}

@media (max-width: 390px) {
  html[data-studio-reflow-v48] .tn-device-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-studio-reflow-v48] .tn-stage-toolbar {
    min-height: 112px !important;
  }
}