/* MockupMaker / item.html reference / 2026-09-29
 * Shared proportions and controls; existing component/theme colours stay in
 * their original stylesheets. The important layer intentionally takes priority
 * over older unlayered overrides without escalating selector specificity.
 */
@layer mm-minimal-ui {
  html[data-mm-ui="minimal"] {
    --mm-ui-radius-control: 7px;
    --mm-ui-radius-card: 10px;
    --mm-ui-radius-dialog: 14px;
    --mm-ui-stroke: 1.5px;
    --mm-ui-close-bg: #fff5f5;
    --mm-ui-close-border: #e9a6a6;
    --mm-ui-close-color: #c73636;
    --mm-ui-close-hover-bg: #ffe0e0;
    --mm-ui-close-hover-border: #d9534f;
    --mm-ui-close-hover-color: #a52a2a;
  }

  /* Native range input: outlined 5px rail, solid 14px thumb, 26px hit area.
     Keep the original DOM, event listeners, min/max/step and keyboard controls. */
  html[data-mm-ui="minimal"] input[type="range"] {
    --mm-ui-range-accent: var(--mm-blue-600, #3087d6);
    --mm-ui-range-rail: #cbd4dd;
    --mm-ui-range-outline: rgba(31, 39, 51, .20);
    --mm-ui-range-fill: linear-gradient(to right,
      var(--mm-ui-range-accent) 0%,
      var(--mm-ui-range-accent) var(--range-pct, 0%),
      var(--mm-ui-range-rail) var(--range-pct, 0%),
      var(--mm-ui-range-rail) 100%);
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    direction: ltr !important;
    height: 26px !important;
    min-height: 26px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--mm-ui-radius-control) !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
    vertical-align: middle !important;
  }
  html[data-mm-ui="minimal"] body.night-mode input[type="range"] {
    --mm-ui-range-accent: var(--mm-blue-500, #459be0);
    --mm-ui-range-rail: #555f6b;
    --mm-ui-range-outline: rgba(255, 255, 255, .16);
  }
  /* Studio keeps its existing orange accent; the image editor stays dark. */
  html[data-mm-ui="minimal"] body .mm-studio-controls input[type="range"] {
    --mm-ui-range-accent: #e88414;
  }
  html[data-mm-ui="minimal"] #proTextureEditorOverlay input[type="range"] {
    --mm-ui-range-rail: #555f6b;
    --mm-ui-range-outline: rgba(255, 255, 255, .16);
  }
  html[data-mm-ui="minimal"] input[type="range"]::-webkit-slider-runnable-track {
    height: 5px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--mm-ui-range-fill) !important;
    box-shadow: inset 0 0 0 var(--mm-ui-stroke) var(--mm-ui-range-outline) !important;
  }
  html[data-mm-ui="minimal"] input[type="range"]::-webkit-slider-thumb {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    width: 14px !important;
    height: 14px !important;
    margin-top: -4.5px !important;
    border: var(--mm-ui-stroke) solid var(--mm-ui-range-accent) !important;
    border-radius: 50% !important;
    background: var(--mm-ui-range-accent) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html[data-mm-ui="minimal"] input[type="range"]::-moz-range-track {
    height: 5px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--mm-ui-range-fill) !important;
    box-shadow: inset 0 0 0 var(--mm-ui-stroke) var(--mm-ui-range-outline) !important;
  }
  html[data-mm-ui="minimal"] input[type="range"]::-moz-range-progress {
    height: 5px !important;
    border: 0 !important;
    background: transparent !important;
  }
  html[data-mm-ui="minimal"] input[type="range"]::-moz-range-thumb {
    box-sizing: border-box !important;
    width: 14px !important;
    height: 14px !important;
    border: var(--mm-ui-stroke) solid var(--mm-ui-range-accent) !important;
    border-radius: 50% !important;
    background: var(--mm-ui-range-accent) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html[data-mm-ui="minimal"] input[type="range"]:focus-visible {
    outline: 2px solid var(--mm-ui-range-accent) !important;
    outline-offset: 3px !important;
  }
  html[data-mm-ui="minimal"] input[type="range"]:disabled {
    opacity: .35 !important;
    cursor: not-allowed !important;
  }

  /* Inputs: the reference's compact, quiet outline without replacing colours. */
  html[data-mm-ui="minimal"] :is(input[type="text"], input[type="number"],
    input[type="search"], input[type="email"], input[type="password"], select, textarea) {
    box-sizing: border-box !important;
    border-width: var(--mm-ui-stroke) !important;
    border-radius: var(--mm-ui-radius-control) !important;
    font-family: inherit !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
  }
  html[data-mm-ui="minimal"] input[type="number"] {
    appearance: textfield !important;
    -moz-appearance: textfield !important;
    font-variant-numeric: tabular-nums !important;
  }
  html[data-mm-ui="minimal"] input[type="number"]::-webkit-inner-spin-button,
  html[data-mm-ui="minimal"] input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }
  html[data-mm-ui="minimal"] :is(#leftPanel, #rightPanel) :is(input[type="number"],
    input[data-decimal-friendly], select) {
    height: 30px !important;
    min-height: 30px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding-block: 0 !important;
  }
  html[data-mm-ui="minimal"] :is(#leftPanel, #rightPanel) .slider-input-row :is(input[type="number"], input[data-decimal-friendly]) {
    text-align: center !important;
    direction: ltr !important;
    font-variant-numeric: tabular-nums !important;
    padding-inline: 5px !important;
  }
  html[data-mm-ui="minimal"] :is(#leftPanel, #rightPanel) input[type="color"] {
    border-radius: var(--mm-ui-radius-control) !important;
    height: 28px !important;
    padding: 3px !important;
    cursor: pointer !important;
  }
  html[data-mm-ui="minimal"] input[type="color"]::-webkit-color-swatch {
    border-radius: 3px !important;
  }
  html[data-mm-ui="minimal"] :is(#leftPanel, #rightPanel) :is(input[type="checkbox"], input[type="radio"]) {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
  }

  /* Panel rhythm: section cards retain their identity and current colours. */
  html[data-mm-ui="minimal"] :is(#leftPanel, #rightPanel) .panel-title {
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    gap: 8px !important;
  }
  html[data-mm-ui="minimal"] :is(#leftPanel, #rightPanel) .panel-title i {
    width: 26px !important;
    height: 26px !important;
    border-radius: var(--mm-ui-radius-control) !important;
    font-size: 12px !important;
  }
  html[data-mm-ui="minimal"] :is(#leftPanel .light-section, #rightPanel .mm-flat-section.collapsible) {
    border-radius: var(--mm-ui-radius-card) !important;
    box-shadow: none !important;
  }
  html[data-mm-ui="minimal"] #leftPanel .light-section {
    padding: 0 8px 8px !important;
  }
  html[data-mm-ui="minimal"] :is(#leftPanel .light-section-title, #rightPanel .mm-flat-section-title) {
    min-height: 36px !important;
    padding: 8px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
  }
  html[data-mm-ui="minimal"] :is(#leftPanel .light-section-body, #rightPanel .mm-flat-section > .collapsible-body) {
    padding: 8px 4px 4px !important;
  }
  html[data-mm-ui="minimal"] #leftPanel .light-section-body .control-group {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-top: 6px !important;
    min-height: 32px !important;
  }
  html[data-mm-ui="minimal"] #leftPanel .light-section-body .control-group:first-child {
    margin-top: 0 !important;
  }
  html[data-mm-ui="minimal"] #leftPanel .light-section-body .control-group > label {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    white-space: normal !important;
    line-height: 1.55 !important;
  }
  html[data-mm-ui="minimal"] #leftPanel .slider-input-row {
    gap: 7px !important;
  }
  html[data-mm-ui="minimal"] #leftPanel .slider-input-row > input[type="number"] {
    width: 45px !important;
    min-width: 45px !important;
    flex: 0 0 45px !important;
  }
  html[data-mm-ui="minimal"] #tab-cube .slider-input-row {
    grid-template-columns: 86px minmax(0, 1fr) 48px !important;
    gap: 8px !important;
    min-height: 32px !important;
  }
  html[data-mm-ui="minimal"] #tab-cube .control-group {
    margin-block: 0 5px !important;
  }
  html[data-mm-ui="minimal"] :is(.mm-unit-field, .mm-unit-field input, #cubeFoldInput) {
    width: 48px !important;
    min-width: 48px !important;
  }
  html[data-mm-ui="minimal"] #tab-cube .mm-cube-row-label {
    font-weight: 600 !important;
    font-size: 10.5px !important;
    white-space: normal !important;
    line-height: 1.5 !important;
  }
  html[data-mm-ui="minimal"] :is(#cubeSurfaceSlot, #objSurfaceSlot) {
    margin-top: 8px !important;
    padding-top: 8px !important;
  }
  html[data-mm-ui="minimal"] #rightPanel .obj-selected-panel { gap: 8px !important; }
  html[data-mm-ui="minimal"] #rightPanel .v4-tunes { gap: 5px !important; }
  html[data-mm-ui="minimal"] #rightPanel .v4-tune { min-height: 30px !important; }
  html[data-mm-ui="minimal"] #rightPanel .v4-tune output {
    direction: ltr !important;
    font-variant-numeric: tabular-nums !important;
  }
  html[data-mm-ui="minimal"] :is(.material-hint, .obj-part-empty) {
    border-radius: var(--mm-ui-radius-control) !important;
    line-height: 1.9 !important;
  }

  /* Toolbars: one scale for secondary controls, a distinct scale for actions. */
  html[data-mm-ui="minimal"] #subHeaderBar :is(.shb-group, .shb-preset-group) {
    border-radius: var(--mm-ui-radius-card) !important;
    box-shadow: none !important;
    gap: 6px !important;
  }
  html[data-mm-ui="minimal"] #subHeaderBar :is(input[type="text"], input[type="number"], select) {
    height: 30px !important;
    min-height: 30px !important;
    font-size: 11px !important;
  }
  html[data-mm-ui="minimal"] #subHeaderBar :is(.shb-icon-btn, .shb-preset-btn) {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    flex: 0 0 30px !important;
    gap: 0 !important;
    line-height: 1 !important;
  }
  html[data-mm-ui="minimal"] #subHeaderBar :is(.shb-icon-btn, .shb-preset-btn) > i {
    display: inline-grid !important;
    place-items: center !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    flex: 0 0 14px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }
  html[data-mm-ui="minimal"] :is(#subHeaderBar button, #global-header .header-btn,
    #global-header .subscribe-btn, .mm-tool-icon, .mm-toolbar-select,
    .mm-photo-studio-trigger, #rightPanel button, #leftPanel button,
    .mm-studio-btn, .mm-studio-upload-btn, .mm-studio-category,
    .library-search-row button, .library-header button,
    .modal-card .btn, .reset-app-actions button, .mm-contact-action) {
    border-radius: var(--mm-ui-radius-control) !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease !important;
  }
  html[data-mm-ui="minimal"] :is(#subHeaderBar button, .mm-tool-icon,
    #rightPanel button, #leftPanel button, .library-search-row button,
    .mm-studio-btn, .mm-studio-category):not(.locked) {
    box-shadow: none !important;
    transform: none !important;
  }
  html[data-mm-ui="minimal"] :is(#subscribeBtn, #libraryBtn, #photoStudioBtn) {
    animation: none !important;
    transform: none !important;
    border-radius: 8px !important;
  }
  html[data-mm-ui="minimal"] #libraryBtn::before,
  html[data-mm-ui="minimal"] #libraryBtn::after { animation: none !important; display: none !important; }
  html[data-mm-ui="minimal"] :is(#leftPanel, #rightPanel) button:focus-visible {
    outline: 2px solid var(--mm-blue-600) !important;
    outline-offset: 2px !important;
  }
  html[data-mm-ui="minimal"] #rightPanel .v4-map-launch-primary {
    height: 36px !important;
    min-height: 36px !important;
  }
  html[data-mm-ui="minimal"] #rightPanel .v4-map-launch-secondary button {
    height: 32px !important;
    min-height: 32px !important;
  }
  html[data-mm-ui="minimal"] #rightPanel .v4-material-copy-row { gap: 6px !important; }
  html[data-mm-ui="minimal"] #rightPanel .v4-material-copy-row button {
    min-height: 32px !important;
    padding: 6px 8px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
  }
  html[data-mm-ui="minimal"] .mm-native-color-control {
    min-height: 30px !important;
    gap: 7px !important;
    border-radius: var(--mm-ui-radius-control) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }
  html[data-mm-ui="minimal"] .mm-flat-toolbar {
    gap: 6px !important;
    padding-block: 6px !important;
  }
  html[data-mm-ui="minimal"] .mm-flat-toolbar .mm-tool-group { gap: 4px !important; }
  html[data-mm-ui="minimal"] :is(.shb-format-group, .mm-reflection-blend-options) {
    gap: 3px !important;
    border-radius: 9px !important;
  }
  html[data-mm-ui="minimal"] .mm-reflection-blend-options button {
    border-radius: 6px !important;
    box-shadow: none !important;
  }

  /* Dialogs and galleries share edges, not their size or internal composition. */
  html[data-mm-ui="minimal"] :is(.modal-card, .reset-app-card, .account-dropdown,
    .mm-contact-dialog, .mm-studio-menu, .pro-delete-card, .pro-editor-help-card) {
    border-radius: var(--mm-ui-radius-dialog) !important;
  }
  html[data-mm-ui="minimal"] :is(.model-card, .mm-studio-bg-card, .mm-video-card,
    .plan-card, .v4-lib-card) {
    border-radius: var(--mm-ui-radius-card) !important;
  }
  html[data-mm-ui="minimal"] .model-grid-lib { gap: 12px !important; }
  html[data-mm-ui="minimal"] .library-search-row {
    gap: 8px !important;
    align-items: center !important;
  }
  html[data-mm-ui="minimal"] .library-search-row :is(input, button) {
    min-height: 34px !important;
    border-radius: var(--mm-ui-radius-control) !important;
  }
  html[data-mm-ui="minimal"] :is(.modal-close, .mm-studio-close-btn, .reset-app-close,
    .pro-head-btn, .mm-video-close, .mm-contact-close) {
    border-radius: var(--mm-ui-radius-control) !important;
  }
  /* Every icon-only dismiss button uses one glyph, size and interaction.
     Keep each dialog's existing placement and close handlers. */
  html[data-mm-ui="minimal"] .mm-close-control {
    box-sizing: border-box !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    flex: 0 0 32px !important;
    padding: 0 !important;
    gap: 0 !important;
    border: var(--mm-ui-stroke) solid var(--mm-ui-close-border) !important;
    border-radius: var(--mm-ui-radius-control) !important;
    background: var(--mm-ui-close-bg) !important;
    color: var(--mm-ui-close-color) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
  }
  html[data-mm-ui="minimal"] .mm-close-control > i {
    display: inline-grid !important;
    place-items: center !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1 !important;
    pointer-events: none;
  }
  html[data-mm-ui="minimal"] .mm-close-control:is(:hover, :active) {
    background: var(--mm-ui-close-hover-bg) !important;
    border-color: var(--mm-ui-close-hover-border) !important;
    color: var(--mm-ui-close-hover-color) !important;
  }
  html[data-mm-ui="minimal"] .mm-close-control:focus-visible {
    outline: 2px solid var(--mm-ui-close-color) !important;
    outline-offset: 3px !important;
  }
  html[data-mm-ui="minimal"] :is(body.night-mode, #proTextureEditorOverlay, #proEditorHelpModal) {
    --mm-ui-close-bg: #38272e;
    --mm-ui-close-border: #79434a;
    --mm-ui-close-color: #ff969b;
    --mm-ui-close-hover-bg: #502c35;
    --mm-ui-close-hover-border: #b15a65;
    --mm-ui-close-hover-color: #ffd1d4;
  }
  html[data-mm-ui="minimal"] .mm-studio-modal-head {
    min-height: 66px !important;
    padding: 12px 16px !important;
  }
  html[data-mm-ui="minimal"] .mm-studio-title-icon {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
    border-radius: var(--mm-ui-radius-control) !important;
  }
  html[data-mm-ui="minimal"] .mm-studio-controls { gap: 12px !important; padding: 14px 18px 18px !important; }
  html[data-mm-ui="minimal"] .mm-studio-controls label { gap: 4px !important; }
  html[data-mm-ui="minimal"] .mm-studio-controls output { font-variant-numeric: tabular-nums !important; }

  /* Editing workspace has its own density and stays dark in both site themes. */
  html[data-mm-ui="minimal"] #proTextureEditorWindow { border-radius: var(--mm-ui-radius-dialog) !important; }
  html[data-mm-ui="minimal"] #proTextureEditorWindow.maximized { border-radius: 0 !important; }
  html[data-mm-ui="minimal"] #proTextureEditorOverlay :is(.pro-tool, .pro-foot-btn,
    .pro-surface-btn, .pro-toggle-button, .pro-mini-icon, .pro-zoom-reset) {
    border-radius: var(--mm-ui-radius-control) !important;
    box-shadow: none !important;
  }
  html[data-mm-ui="minimal"] #proTextureEditorOverlay .pro-inspector-section {
    padding-block: 2px !important;
  }
  html[data-mm-ui="minimal"] #proTextureEditorOverlay :is(.pro-three-tools, .pro-two-tools) .pro-tool {
    height: 34px !important;
    min-height: 34px !important;
  }
  html[data-mm-ui="minimal"] #proTextureEditorOverlay .pro-toggle-button {
    min-height: 34px !important;
  }
  html[data-mm-ui="minimal"] #proTextureEditorOverlay :is(.pro-three-tools, .pro-two-tools) { gap: 6px !important; }
  html[data-mm-ui="minimal"] #proTextureEditorOverlay .mm-edit-transfer button {
    height: auto !important;
    min-height: 34px !important;
    padding: 6px !important;
    border-radius: var(--mm-ui-radius-control) !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
  }
  html[data-mm-ui="minimal"] #proTextureEditorOverlay :is(.pro-offset-axis, .mm-gray-adjust-row, .pro-bump-strength-row) {
    gap: 8px !important;
    min-height: 30px !important;
  }
  html[data-mm-ui="minimal"] .pro-ios-track {
    width: 36px !important;
    height: 21px !important;
    flex-basis: 36px !important;
    border-radius: 999px !important;
  }
  html[data-mm-ui="minimal"] .pro-ios-track::after {
    width: 13px !important;
    height: 13px !important;
    top: 4px !important;
    left: 4px !important;
    box-shadow: none !important;
  }
  html[data-mm-ui="minimal"] .pro-ios-switch input:checked + .pro-ios-track::after { transform: translateX(15px) !important; }
  html[data-mm-ui="minimal"] .pro-ios-track.mm-checked::after { transform: translateX(15px) !important; }
  html[data-mm-ui="minimal"] .pro-ios-switch input:focus-visible + .pro-ios-track {
    outline: 2px solid #667eea !important;
    outline-offset: 3px !important;
  }
  html[data-mm-ui="minimal"] :is(.loader-progress, .mm-update-progress-track) {
    height: 6px !important;
    border-radius: 999px !important;
  }

  /* Administration keeps its dark palette, table layout and orange actions. */
  html[data-mm-ui="minimal"][data-mm-admin] body button {
    border-radius: var(--mm-ui-radius-control) !important;
    transition: background .15s ease, border-color .15s ease, filter .15s ease !important;
    transform: none !important;
  }
  html[data-mm-ui="minimal"][data-mm-admin] :is(.card, .lm-inspector-card, .lm-model-card,
    .lm-upload-files, .lm-upload-progress, .lm-checktree) {
    border-radius: var(--mm-ui-radius-card) !important;
  }
  html[data-mm-ui="minimal"][data-mm-admin] .mm-modal-card { border-radius: var(--mm-ui-radius-dialog) !important; }
  html[data-mm-ui="minimal"][data-mm-admin] :is(.lm-search, .lm-field input, .lm-field select) {
    min-height: 34px !important;
    font-size: 11px !important;
  }
  html[data-mm-ui="minimal"][data-mm-admin] .lm-search { height: 36px !important; }
  html[data-mm-ui="minimal"][data-mm-admin] .lm-cat-row { border-radius: var(--mm-ui-radius-control) !important; }
  html[data-mm-ui="minimal"][data-mm-admin] .lm-selected-file { border-radius: var(--mm-ui-radius-control) !important; }
  html[data-mm-ui="minimal"][data-mm-admin] .lm-upload-progress-track { height: 6px !important; }

  @media (max-width: 1250px) {
    html[data-mm-ui="minimal"] #leftPanel .light-section-body .control-group {
      grid-template-columns: 94px minmax(0, 1fr) !important;
      gap: 6px !important;
    }
    html[data-mm-ui="minimal"] #leftPanel .slider-input-row { gap: 5px !important; }
  }
  @media (max-width: 700px) {
    html[data-mm-ui="minimal"] .library-search-row input { min-width: 130px !important; }
    html[data-mm-ui="minimal"] .mm-studio-controls { padding-inline: 14px !important; }
  }
  @media (pointer: coarse) {
    html[data-mm-ui="minimal"] input[type="range"] { height: 32px !important; min-height: 32px !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    html[data-mm-ui="minimal"] :is(input, select, button, .pro-ios-track, .pro-ios-track::after) {
      transition: none !important;
    }
  }
}