/* B012 unified responsive system.
 * Loaded last so every responsive surface consumes the same control, icon,
 * spacing and popup scales without changing existing markup or behavior. */

:root {
  --rs-space-1: 4px;
  --rs-space-2: 8px;
  --rs-space-3: 12px;
  --rs-control-desktop: 44px;
  --rs-control-touch: 44px;
  --rs-control-editor: 40px;
  --rs-icon-slot: 32px;
  --rs-menu-item: 40px;
  --rs-font-control: 12px;
  --rs-font-dense: 11px;
  --rs-radius-control: 10px;
  --rs-mobile-nav-clearance: calc(var(--mobile-nav-height, 64px) + 32px + env(safe-area-inset-bottom));
}

/* The proportional desktop canvas owns its visual scale. The document itself
 * must never become wider than the CSS viewport. */
html.is-site-proportional-canvas,
html.is-site-proportional-canvas body {
  max-width: 100vw;
  overflow-x: clip !important;
}

html.is-site-proportional-canvas .topbar :is(.nav-button, .icon-button, .auth-pill, .quota-pill),
html.is-site-proportional-canvas .button,
html.is-site-proportional-canvas .select-input,
html.is-site-proportional-canvas input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
html.is-site-proportional-canvas select {
  min-height: var(--rs-control-desktop);
}

/* Shared touch rules. Visual glyphs can remain compact, but their hit boxes
 * and the fields that contain them stay predictable. */
html.is-viewport-touch :is(button, [role="button"], [role="tab"], [role="menuitem"], [role="menuitemradio"], select) {
  touch-action: manipulation;
}

html.is-viewport-tablet .topbar :is(.nav-button, .icon-button, .auth-pill, .quota-pill),
html.is-viewport-tablet #view-palette .palette-default-button,
html.is-viewport-tablet #view-my :is(.button, .profile-tab),
html.is-viewport-tablet .admin-tab {
  min-height: var(--rs-control-touch) !important;
}

html.is-viewport-tablet .login-panel label:has(input[type="checkbox"]),
html.is-viewport-phone .login-panel label:has(input[type="checkbox"]) {
  min-height: var(--rs-control-touch);
  display: flex;
  align-items: center;
  gap: var(--rs-space-2);
}

html.is-viewport-touch .login-panel input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

html.is-viewport-touch .login-panel :is(#loginRecoveryBtn, [data-close-login]) {
  min-height: var(--rs-control-touch) !important;
}

/* Tablet manual editor: one stable row, equal field height, no vertical labels.
 * The five columns remain in the established order: size, color, brand,
 * import, trace. */
html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .editor-toolbar {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  height: 52px !important;
  margin: 0;
  padding: var(--rs-space-1) !important;
  display: grid !important;
  grid-template-columns: minmax(150px, 160px) minmax(170px, 1.15fr) minmax(130px, .95fr) 80px 96px;
  grid-template-rows: var(--rs-control-touch);
  grid-template-areas: "size color brand import trace";
  align-items: stretch;
  gap: var(--rs-space-1);
  overflow: visible !important;
}

html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .editor-toolbar > * {
  min-width: 0;
  width: 100%;
  max-width: none;
  min-height: var(--rs-control-touch);
  height: var(--rs-control-touch);
  margin: 0;
}

html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .editor-toolbar :is(.manual-field-label, .manual-field-label-wide, .manual-field-label-phone),
html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .editor-toolbar .brand-select-field > span:first-child,
html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .editor-toolbar .manual-trace-mode-field > span:not(.sr-only) {
  display: none !important;
}

html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .manual-toolbar-width-field {
  grid-area: size;
  grid-template-columns: minmax(0, 1fr);
}

html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .editor-color-field {
  grid-area: color;
  grid-template-columns: minmax(0, 1fr);
}

html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .brand-select-field {
  grid-area: brand;
  grid-template-columns: minmax(0, 1fr);
}

html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .manual-unified-import {
  grid-area: import;
}

html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .manual-trace-mode-field {
  grid-area: trace;
  grid-template-columns: minmax(0, 1fr);
}

html.is-viewport-tablet #view-generate[data-generator-mode="manual"] :is(
  .manual-toolbar-width-inputs,
  .editor-color-picker,
  .editor-color-combobox
) {
  width: 100%;
  min-width: 0;
  height: var(--rs-control-touch);
}

html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .manual-toolbar-width-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rs-control-touch);
  gap: var(--rs-space-1);
}

html.is-viewport-tablet #view-generate[data-generator-mode="manual"] :is(
  .select-input,
  .editor-color-search,
  .editor-color-toggle,
  .manual-import-menu-trigger
) {
  min-width: 0;
  min-height: var(--rs-control-touch) !important;
  height: var(--rs-control-touch) !important;
  font-size: var(--rs-font-control) !important;
  line-height: 1.2;
}

html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .editor-color-combobox {
  grid-template-columns: minmax(0, 1fr) var(--rs-control-touch);
}

html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .editor-color-toggle {
  width: var(--rs-control-touch);
  padding: 0;
}

html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .editor-color-search {
  padding-left: 32px !important;
  padding-right: var(--rs-space-2) !important;
}

html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .editor-color-current-swatch {
  left: var(--rs-space-2);
  width: 18px;
  height: 18px;
}

html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .editor-color-palette {
  width: 220px;
  min-width: 220px;
  max-height: min(42dvh, 360px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rs-space-1);
  padding: var(--rs-space-2);
}

html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .editor-color-chip {
  min-height: var(--rs-menu-item);
  height: var(--rs-menu-item);
  padding: 6px 8px;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 6px;
  font-size: var(--rs-font-control);
}

html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .editor-color-swatch {
  width: 20px;
  height: 20px;
}

html.is-viewport-tablet body.manual-editor-active .manual-floating-toolbar {
  width: 50px !important;
  max-width: 50px !important;
  padding: 4px 3px;
}

html.is-viewport-tablet body.manual-editor-active .manual-toolbar-button {
  flex-basis: var(--rs-control-touch);
  width: var(--rs-control-touch);
  min-width: var(--rs-control-touch);
  height: var(--rs-control-touch);
  min-height: var(--rs-control-touch);
}

/* Expanded quick actions stay beside the touch toolbar instead of lengthening
 * it beyond the viewport. This also keeps the nested export trigger reachable. */
html.is-viewport-touch body.manual-editor-active .manual-toolbar-action-group.is-expanded {
  position: absolute;
  z-index: var(--z-floating-layer, 20020);
  top: 0;
  right: auto;
  bottom: auto;
  left: calc(100% + var(--rs-space-2));
  display: flex;
  max-height: none;
  gap: var(--rs-space-1);
  padding: var(--rs-space-1);
  border: 1px solid var(--line);
  border-radius: var(--rs-radius-control);
  background: var(--surface, #fffdf9);
  box-shadow: var(--small-shadow);
  opacity: 1;
  overflow: visible;
  transform: none;
}

html.is-viewport-touch body.manual-editor-active .manual-floating-toolbar.is-near-right .manual-toolbar-action-group.is-expanded {
  right: calc(100% + var(--rs-space-2));
  left: auto;
}

/* Narrow tablets keep the same component scale and use two balanced rows
 * instead of compressing labels or controls. */
@media (min-width: 641px) and (max-width: 760px) {
  html.is-viewport-tablet #view-generate[data-generator-mode="manual"] .editor-toolbar {
    min-height: 100px;
    height: 100px !important;
    grid-template-columns: minmax(150px, .95fr) minmax(180px, 1.15fr) minmax(140px, 1fr);
    grid-template-rows: repeat(2, var(--rs-control-touch));
    grid-template-areas:
      "size color brand"
      "import trace trace";
  }
}

/* Phone shell and fixed navigation clearance. */
@media (max-width: 640px) {
  html.is-viewport-phone body:not(.manual-editor-active) #mainContent {
    padding-bottom: var(--rs-mobile-nav-clearance) !important;
    scroll-padding-bottom: var(--rs-mobile-nav-clearance);
  }

  html.is-viewport-phone body:not(.manual-editor-active) :is(.view.is-active, .site-footer) {
    scroll-margin-bottom: var(--rs-mobile-nav-clearance);
  }

  html.is-viewport-phone body:not(.manual-editor-active) .site-footer {
    padding-bottom: var(--rs-mobile-nav-clearance);
  }

  html.is-viewport-phone .mobile-bottom-nav {
    min-height: var(--mobile-nav-height, 64px);
  }

  html.is-viewport-phone #view-palette .palette-default-button,
  html.is-viewport-phone #view-my :is(.button, .profile-tab),
  html.is-viewport-phone .admin-tab {
    min-height: var(--rs-control-touch) !important;
  }

  /* Profile identity copy must stay inside its assigned grid column. A
   * max-width on a content-box pill does not include padding, so the account
   * label used to leak toward the avatar as the viewport narrowed. */
  html.is-viewport-phone #view-my :is(
    .profile-title-block,
    .profile-name-line,
    .profile-meta-line
  ) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  html.is-viewport-phone #view-my .profile-meta-line span {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 100%;
  }

  /* Phone admin uses a single content column. Secondary admin navigation is
   * horizontally scrollable instead of consuming half the viewport. */
  html.is-viewport-phone .admin-layout {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--rs-space-2);
  }

  html.is-viewport-phone #view-admin .admin-side {
    width: 100%;
    min-width: 0;
    padding: var(--rs-space-1);
    display: flex !important;
    flex-wrap: nowrap;
    gap: var(--rs-space-1);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }

  html.is-viewport-phone #view-admin .admin-tab {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 112px;
    padding-inline: var(--rs-space-3);
    justify-content: center;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  html.is-viewport-phone .admin-main {
    width: 100%;
    min-width: 0;
    min-height: 420px;
  }

  /* Manual creation keeps the confirmed two-row order. Both rows now share
   * one 40px scale, readable type and consistent arrow slots. */
  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel {
    grid-template-rows: var(--rs-control-editor) minmax(0, 1fr) 44px 104px !important;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel:has(> .stats-list:empty) {
    grid-template-rows: var(--rs-control-editor) minmax(0, 1fr) 44px 0 !important;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .preview-panel > .panel-head,
  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .preview-panel-tools {
    min-height: var(--rs-control-editor);
    height: var(--rs-control-editor);
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .preview-panel-tools {
    grid-template-columns: repeat(3, minmax(38px, .85fr)) minmax(74px, 1.4fr) var(--rs-icon-slot) 34px var(--rs-icon-slot) var(--rs-icon-slot);
    grid-template-rows: var(--rs-control-editor);
    gap: 3px;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .preview-panel-tools > :is(.mini-toggle, .mini-icon) {
    min-height: var(--rs-control-editor);
    height: var(--rs-control-editor);
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .preview-panel-tools > .mini-toggle {
    gap: 2px;
    padding-inline: 1px;
    font-size: 10px;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .preview-panel-tools > .mini-toggle input {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .manual-mobile-size-field {
    min-height: var(--rs-control-editor);
    height: var(--rs-control-editor);
    padding: 2px;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .manual-mobile-size-field .manual-toolbar-width-inputs {
    position: relative;
    grid-template-columns: minmax(0, 1fr) var(--rs-icon-slot);
    gap: 2px;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .manual-mobile-size-field .manual-toolbar-width-inputs::after {
    content: "";
    position: absolute;
    right: 11px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .manual-mobile-size-field .select-input {
    min-height: 36px;
    height: 36px;
    padding-inline: 5px;
    font-size: var(--rs-font-control);
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] #manualToolbarWidthPresetSelectMobile {
    appearance: none;
    color: transparent;
    padding: 0;
    text-indent: -999px;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .preview-card {
    grid-template-rows: var(--rs-control-editor) minmax(0, 1fr);
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .editor-toolbar {
    min-height: var(--rs-control-editor);
    height: var(--rs-control-editor) !important;
    grid-template-columns: 1.15fr 1.35fr .82fr .9fr;
    grid-template-rows: var(--rs-control-editor);
    gap: 3px;
    padding: 1px 2px;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .editor-toolbar > :is(
    .brand-select-field,
    .editor-color-field,
    .manual-unified-import,
    .manual-trace-mode-field
  ) {
    min-height: var(--rs-control-editor);
    height: var(--rs-control-editor);
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] :is(
    .brand-select-field .select-input,
    .editor-color-combobox,
    .editor-color-search,
    .editor-color-toggle,
    .manual-import-menu-trigger,
    .manual-trace-mode-field .select-input
  ) {
    min-height: 38px !important;
    height: 38px !important;
    font-size: var(--rs-font-dense) !important;
    line-height: 1.2;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .editor-color-combobox {
    grid-template-columns: minmax(0, 1fr) var(--rs-icon-slot);
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .editor-color-toggle {
    width: var(--rs-icon-slot);
    min-width: var(--rs-icon-slot);
    padding: 0;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .editor-color-search {
    padding-left: 28px !important;
    padding-right: 3px !important;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .editor-color-current-swatch {
    left: 6px;
    width: 18px;
    height: 18px;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .editor-color-palette {
    width: min(220px, calc(100vw - 76px));
    min-width: 0;
    max-height: min(48dvh, 372px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rs-space-1);
    padding: var(--rs-space-1);
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .editor-color-chip {
    min-height: var(--rs-menu-item);
    height: var(--rs-menu-item);
    padding: 5px 6px;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 5px;
    font-size: var(--rs-font-dense);
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .editor-color-swatch {
    width: 20px;
    height: 20px;
  }

  html.is-viewport-phone body.manual-editor-active .manual-floating-toolbar {
    width: 46px !important;
    max-width: 46px !important;
    padding: 3px;
  }

  html.is-viewport-phone body.manual-editor-active .manual-toolbar-button {
    position: relative;
    flex-basis: var(--rs-control-editor);
    width: var(--rs-control-editor);
    min-width: var(--rs-control-editor);
    height: var(--rs-control-editor);
    min-height: var(--rs-control-editor);
  }

  html.is-viewport-phone body.manual-editor-active .manual-toolbar-button::before {
    content: "";
    position: absolute;
    inset: -2px;
  }

  html.is-viewport-phone body.manual-editor-active .manual-toolbar-menu button,
  html.is-viewport-phone body.manual-editor-active .manual-selection-actions button {
    min-height: var(--rs-control-touch);
    font-size: var(--rs-font-control);
  }
}

/* At the smallest supported phone width, reduce all three profile identity
 * columns together. This preserves the avatar/text/action relationship instead
 * of squeezing only the middle copy column until its children overlap. */
@media (max-width: 359px) {
  html.is-viewport-phone #view-my .profile-identity {
    grid-template-columns: 64px minmax(0, 1fr) 56px;
    gap: 6px;
  }

  html.is-viewport-phone #view-my .avatar-mark.profile-avatar {
    width: 64px;
    height: 64px;
  }
}

/* Phone preview toolbar: reserve enough width for the three toggle labels and
 * the complete zoom value before distributing any remaining space. The older
 * equal-column rule could shrink a toggle below its content width, which made
 * “网格 / 色号 / 边框” paint outside the card and clipped values such as 115%.
 * This override is deliberately phone-only; tablet and desktop keep their
 * existing toolbar proportions. */
@media (max-width: 640px) {
  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools {
    grid-template-columns:
      repeat(3, minmax(46px, 1fr))
      minmax(58px, 1.2fr)
      28px
      minmax(40px, 44px)
      28px
      28px;
    gap: 2px;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-toggle {
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    padding-inline: 2px;
    gap: 2px;
    white-space: nowrap;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-toggle span {
    min-width: 0;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-toggle input {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 0;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomText {
    box-sizing: border-box;
    width: 100%;
    min-width: 40px;
    padding-inline: 1px;
    justify-self: stretch;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-icon {
    box-sizing: border-box;
    width: 28px;
    min-width: 28px;
    padding-inline: 0;
  }
}

@media (max-width: 359px) {
  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools {
    grid-template-columns:
      repeat(3, minmax(40px, 1fr))
      minmax(52px, 1.2fr)
      26px
      minmax(38px, 40px)
      26px
      26px;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomText {
    min-width: 38px;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-icon {
    width: 26px;
    min-width: 26px;
  }
}

/* Width is edited as a value (or chosen from the adjacent preset list), not
 * by repeatedly tapping a one-step spinner. Hide only the browser's native
 * number steppers on phones; the input remains type=number for numeric
 * keyboards and validation, while desktop/tablet retain their native UI. */
@media (max-width: 640px) {
  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .manual-mobile-size-field input[type="number"],
  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .manual-toolbar-width-field input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .manual-mobile-size-field input[type="number"]::-webkit-inner-spin-button,
  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .manual-mobile-size-field input[type="number"]::-webkit-outer-spin-button,
  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .manual-toolbar-width-field input[type="number"]::-webkit-inner-spin-button,
  html.is-viewport-phone #view-generate[data-generator-mode="manual"] .manual-toolbar-width-field input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
  }
}

/* Keep the phone's two compact control rows visually grouped. The first row
 * lives in the preview panel head and the second row is the editor toolbar;
 * remove only their decorative gutters so the canvas gets the reclaimed
 * space. Their control heights and touch targets remain unchanged. */
@media (max-width: 640px) {
  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel {
    gap: 0 !important;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel > .panel-head {
    gap: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-stack,
  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-stack > .preview-card {
    gap: 0;
    margin-top: 0;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-toolbar {
    margin-top: 0;
  }
}

/* Give the editable width control a real three-digit text slot. The zoom
 * percentage is read-only, so it can use a smaller fixed column while the
 * number input remains legible and tappable. */
@media (max-width: 640px) {
  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools {
    grid-template-columns:
      repeat(3, minmax(44px, .95fr))
      minmax(72px, 1.45fr)
      26px
      minmax(32px, 34px)
      26px
      26px;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-size-field .manual-toolbar-width-inputs {
    grid-template-columns: minmax(36px, 1fr) minmax(30px, 32px);
    gap: 2px;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-size-field input[type="number"] {
    min-width: 0;
    color: var(--ink);
    padding-inline: 3px;
    text-align: center;
    text-indent: 0;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomText {
    min-width: 32px;
    padding-inline: 0;
    font-size: 9px;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-icon {
    width: 26px;
    min-width: 26px;
  }
}

@media (max-width: 359px) {
  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools {
    grid-template-columns:
      repeat(3, minmax(40px, .95fr))
      minmax(64px, 1.4fr)
      24px
      minmax(30px, 32px)
      24px
      24px;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-size-field .manual-toolbar-width-inputs {
    grid-template-columns: minmax(32px, 1fr) minmax(28px, 30px);
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomText {
    min-width: 30px;
  }

  html.is-viewport-phone #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-icon {
    width: 24px;
    min-width: 24px;
  }
}