/* Magnet Studio M34 — iPhone editor readability parity.
   M33 fixed the composition. M34 raises the controls to the same optical scale as
   the public app and removes the install prompt from the production workspace. */

@media (max-width: 760px) {
  html[data-magnet-app='studio-m2-v4'] .m32-install-pill,
  html[data-magnet-app='studio-m2-v4'] .m32-install-sheet {
    display: none !important;
  }

  .m11-studio {
    --m11-appbar: 58px !important;
    --m11-dock: 68px !important;
  }

  .m11-studio .m2-project-bar {
    grid-template-columns: 40px minmax(0,1fr) 72px 40px !important;
  }
  .m11-studio .m2-back,
  .m11-studio .m2-history-actions,
  .m11-studio .m2-history-actions button:first-child {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
  .m11-studio .m2-back svg,
  .m11-studio .m2-history-actions svg { width: 21px !important; height: 21px !important; }
  .m11-studio .m2-title-field input { font-size: 16px !important; }
  .m11-mobile-price span { font-size: 9px !important; }
  .m11-mobile-price strong { font-size: 16px !important; }

  .m11-studio .m2-canvas-toolbar {
    min-height: 50px !important;
    padding: 5px !important;
  }
  .m11-studio .m4-preview-tabs,
  .m11-studio .m2-zoom-controls { height: 40px !important; }
  .m11-studio .m4-preview-tabs button,
  .m11-studio .m2-zoom-controls button { width: 35px !important; height: 35px !important; }
  .m11-studio .m4-preview-tabs svg,
  .m11-studio .m2-zoom-controls svg { width: 21px !important; height: 21px !important; }

  .m11-studio .m3-pending-pill,
  .m11-studio .m2-outline-label { font-size: 12.5px !important; }

  .m11-studio .m11-sheet-grabber > span small { font-size: 10px !important; }
  .m11-studio .m11-sheet-grabber > span b { font-size: 16px !important; }
  .m11-studio .m11-sheet-grabber > svg { width: 21px !important; height: 21px !important; }

  .m11-studio .m2-inspector-panel { padding: 12px 16px 20px !important; }
  .m11-studio .m2-panel-heading > span { font-size: 10.5px !important; }
  .m11-studio .m2-panel-heading h2 { font-size: 27px !important; }
  .m11-studio .m2-panel-heading p {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .m11-studio .m2-mode-list button {
    min-height: 72px !important;
    padding: 12px !important;
  }
  .m11-studio .m2-mode-list button > span { width: 36px !important; height: 36px !important; }
  .m11-studio .m2-mode-list button b { font-size: 15.5px !important; }
  .m11-studio .m2-mode-list button small { font-size: 12.5px !important; line-height: 1.4 !important; }

  .m11-studio .m6-cut-presets button,
  .m11-studio .m3-tool-grid button,
  .m11-studio .m7-art-presets button {
    min-height: 62px !important;
    padding: 10px !important;
  }
  .m11-studio .m6-cut-presets button b,
  .m11-studio .m3-tool-grid button b,
  .m11-studio .m7-art-presets button b { font-size: 14.5px !important; }
  .m11-studio .m6-cut-presets button small,
  .m11-studio .m3-tool-grid button small,
  .m11-studio .m7-art-presets button small { font-size: 12px !important; }

  .m11-studio .m2-range {
    padding: 12px 13px !important;
    border-radius: 17px !important;
  }
  .m11-studio .m2-range > span { font-size: 14px !important; }
  .m11-studio .m2-range > span b { font-size: 15px !important; }
  .m11-studio .m7-detail-help {
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px !important;
    font-size: 13px !important;
  }

  .m11-studio .m2-process-state { padding: 12px 13px !important; }
  .m11-studio .m2-process-state b { font-size: 14.5px !important; }
  .m11-studio .m2-process-state svg { width: 22px !important; height: 22px !important; }

  .m11-studio .m4-smart-cut-action,
  .m11-studio .m5-mask-edit-action,
  .m11-studio .m2-primary-button {
    min-height: 56px !important;
    font-size: 15px !important;
  }
  .m11-studio .m4-smart-cut-action svg,
  .m11-studio .m5-mask-edit-action svg,
  .m11-studio .m2-primary-button svg { width: 23px !important; height: 23px !important; }

  .m11-studio .m6-cut-compare header b,
  .m11-studio .m5-mask-edit-card__heading b,
  .m11-studio .m7-art-status b,
  .m11-studio .m7-sheet-presets b { font-size: 14.5px !important; }
  .m11-studio .m6-cut-compare header small,
  .m11-studio .m5-mask-edit-card__heading small,
  .m11-studio .m7-art-status small,
  .m11-studio .m7-sheet-presets small { font-size: 11.5px !important; }

  .m11-studio .m4-processing-overlay h2,
  .m11-studio .m4-processing-overlay b { font-size: 21px !important; }
  .m11-studio .m4-processing-overlay p,
  .m11-studio .m4-processing-overlay small { font-size: 14px !important; }

  .m11-studio .m7-step-progress {
    min-height: var(--m11-dock) !important;
    padding: 6px 5px calc(6px + env(safe-area-inset-bottom)) !important;
  }
  .m11-studio .m7-step-progress button {
    min-height: 56px !important;
    grid-template-rows: 26px 15px !important;
  }
  .m11-studio .m7-step-progress button > svg { width: 23px !important; height: 23px !important; }
  .m11-studio .m7-step-progress button b,
  .m11-studio .m7-step-progress button > small {
    font-size: 9.5px !important;
    line-height: 1 !important;
  }
  .m11-studio .m7-step-progress button > span {
    width: 23px !important;
    height: 23px !important;
    font-size: 8px !important;
  }

  .m11-studio .m3-toast { font-size: 14px !important; }
}

@media (max-width: 390px) {
  .m11-studio .m2-project-bar {
    grid-template-columns: 38px minmax(0,1fr) 60px 38px !important;
  }
  .m11-studio .m2-title-field input { font-size: 14.5px !important; }
  .m11-mobile-price { min-width: 60px !important; }
  .m11-mobile-price strong { font-size: 15px !important; }
  .m11-studio .m7-step-progress button b,
  .m11-studio .m7-step-progress button > small { font-size: 8.8px !important; }
}