/*
 * Proportional desktop canvas.
 *
 * Small desktop and landscape-tablet viewports (1000px through 1527px) render
 * the 1500px desktop composition as one unit.  The scale stops at two-thirds;
 * narrower viewports retain the existing natural-width responsive layouts
 * instead of receiving a minimum canvas wider than the available viewport.
 */

html.is-site-proportional-canvas {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* Final phone manual-control arrangement: keep the preview controls and the
   editing inputs in exactly two compact rows.  The brand selector is promoted
   into the first row, while the second row keeps size, brush color, import,
   and trace controls with enough width for their actual values. */
@media (max-width: 640px) {
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns:
      repeat(3, minmax(40px, 1fr))
      minmax(62px, 1.35fr)
      24px 32px 24px 24px minmax(40px, .8fr);
    grid-template-rows: 30px;
    grid-template-areas: "grid labels ruler brand zoomout zoomtext zoomin reset meta";
    align-items: stretch;
    gap: 2px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-toggle {
    min-width: 0;
    min-height: 30px;
    height: 30px;
    gap: 2px;
    padding-inline: 2px;
    font-size: 8px;
    white-space: nowrap;
  }

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

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-brand-field {
    display: grid;
    grid-area: brand;
    min-width: 0;
    min-height: 30px;
    height: 30px;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding: 0 2px;
    border: 1px solid rgba(203, 184, 201, .92);
    border-radius: 6px;
    background: #fffdf9;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-brand-field > span {
    display: none;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-brand-field .select-input {
    min-width: 0;
    width: 100%;
    min-height: 26px;
    height: 26px;
    padding: 0 13px 0 2px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font-size: 8px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomOutBtn {
    grid-area: zoomout;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomText {
    grid-area: zoomtext;
    min-width: 0;
    justify-self: center;
    font-size: 9px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomInBtn {
    grid-area: zoomin;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomResetBtn {
    grid-area: reset;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #patternPreviewMeta {
    grid-area: meta;
    min-width: 0;
    overflow: hidden;
    padding-inline: 1px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 8px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-icon {
    width: 24px;
    min-width: 0;
    min-height: 30px;
    height: 30px;
    padding: 0;
    font-size: 11px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-toolbar {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: 84px minmax(90px, 1fr) 52px 52px;
    grid-template-rows: 44px;
    grid-template-areas: "size color import trace";
    gap: 3px;
    padding: 2px;
    overflow: visible;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-toolbar .brand-select-field {
    display: none;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-toolbar-width-field {
    grid-area: size;
    min-width: 0;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-toolbar-width-inputs {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-toolbar-width-inputs .select-input,
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-toolbar-width-inputs input.select-input {
    min-width: 0;
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding-inline: 4px;
    font-size: 11px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-color-field {
    grid-area: color;
    min-width: 0;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-color-combobox {
    min-width: 0;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 22px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-color-search {
    min-width: 0;
    width: 100%;
    min-height: 40px;
    height: 40px;
    padding-left: 22px !important;
    padding-right: 2px !important;
    font-size: 9px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-color-toggle {
    min-width: 22px;
    min-height: 40px;
    height: 40px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-unified-import {
    grid-area: import;
    min-width: 0;
    width: 100%;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-trace-mode-field {
    grid-area: trace;
    min-width: 0;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-trace-mode-field > span:not(.sr-only) {
    display: none;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-unified-import .manual-import-menu-trigger,
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-trace-mode-field .select-input {
    width: 100%;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding-inline: 3px;
    font-size: 9px;
  }
}

/* Public profile mirrors the self-profile rhythm on portrait screens while
 * keeping private controls and private content out of the public surface. */
@media (max-width: 900px) {
  #view-user,
  #view-user .public-profile-page,
  #view-user .public-profile-hero,
  #view-user .public-profile-post-panel {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  #view-user {
    overflow-x: hidden;
  }

  #view-user .public-profile-page {
    width: 100%;
    gap: 10px;
  }

  #view-user .public-profile-nav {
    min-height: 40px;
  }

  #view-user .public-profile-hero {
    min-height: 0;
    padding: 20px 18px 16px;
  }

  #view-user .public-profile-identity {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px 16px;
    align-items: center;
  }

  #view-user .public-profile-avatar-wrap {
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  #view-user .avatar-mark.public-user-avatar {
    width: 88px;
    height: 88px;
    flex-basis: 88px;
    border-width: 5px;
    font-size: 28px;
  }

  #view-user .public-profile-copy h1 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 23px;
  }

  #view-user .public-profile-copy p {
    max-width: none;
    margin: 7px 0 5px;
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  #view-user .public-profile-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
  }

  #view-user .public-profile-actions {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  #view-user .public-profile-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-user .public-profile-stats {
    width: 100%;
    margin: 16px 0 0;
    gap: 8px;
  }

  #view-user .public-profile-stats span,
  #view-user .public-profile-stats button {
    min-width: 0;
    padding-inline: 4px;
  }

  #view-user .public-profile-stats strong {
    font-size: 17px;
  }

  #view-user .public-profile-post-panel {
    padding: 14px;
  }

  #view-user .public-profile-content-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #view-user .public-profile-content-tabs button {
    min-width: 0;
    padding-inline: 8px;
  }

  #view-user .public-profile-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  #view-user .public-user-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 620px) {
  #view-user .public-profile-hero {
    padding: 18px 14px 15px;
  }

  #view-user .public-profile-identity {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px 13px;
  }

  #view-user .avatar-mark.public-user-avatar {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
  }

  #view-user .public-profile-copy h1 {
    font-size: 21px;
  }

  #view-user .public-profile-actions .button {
    font-size: 13px;
  }

  #view-user .public-profile-post-panel {
    padding: 12px;
  }

  #view-user .public-profile-content-tabs button {
    min-height: 42px;
    font-size: 13px;
  }
}

html.is-site-proportional-canvas body {
  min-width: var(--site-outer-width) !important;
  overflow-x: visible;
}

.site-scale-frame {
  width: 100%;
  min-width: 0;
}

html.is-site-proportional-canvas .app-shell {
  box-sizing: border-box;
  width: 1500px !important;
  min-width: 1500px !important;
  max-width: 1500px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  zoom: var(--site-content-scale);
}

html.is-site-proportional-canvas #mainContent {
  width: 1500px !important;
  min-width: 1500px !important;
  max-width: 1500px !important;
  padding: 36px 44px 72px;
  zoom: 1 !important;
  transform: none !important;
}

html.is-site-proportional-canvas .topbar {
  box-sizing: border-box;
  width: 1500px !important;
  min-width: 1500px !important;
  max-width: 1500px !important;
  margin: 0 !important;
  grid-template-columns: minmax(190px, auto) minmax(360px, 1fr) auto !important;
  gap: 20px !important;
  padding: 10px 60px !important;
}

html.is-site-proportional-canvas .topbar .brand {
  min-width: 164px !important;
}

html.is-site-proportional-canvas .main-nav {
  display: flex !important;
  min-width: max-content;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  white-space: nowrap;
}

html.is-site-proportional-canvas .mobile-nav-toggle {
  display: none !important;
}

html.is-site-proportional-canvas .topbar-tools {
  display: flex !important;
  min-width: max-content;
}

html.is-site-proportional-canvas .top-search {
  display: flex !important;
  width: 238px !important;
  max-width: 238px !important;
  flex: 0 0 238px;
}

html.is-site-proportional-canvas .topbar :is(.auth-pill, .quota-pill):not(.is-hidden) {
  display: inline-flex !important;
}

/* The scaled canvas owns width, not document height.  Let entry pages grow
 * naturally when text wraps or the viewport becomes short. */
html.is-site-proportional-canvas body.creation-hub-route-active {
  height: auto;
  min-height: 100dvh;
  overflow-y: auto;
}

html.is-site-proportional-canvas body.creation-hub-route-active .app-shell {
  height: auto !important;
  min-height: 100dvh;
  display: block;
}

html.is-site-proportional-canvas body.creation-hub-route-active #mainContent,
html.is-site-proportional-canvas body.creation-hub-route-active #view-generate.is-active,
html.is-site-proportional-canvas body.creation-hub-route-active #view-generate[data-generator-mode="landing"] .flow-grid,
html.is-site-proportional-canvas body.creation-hub-route-active #view-generate[data-generator-mode="landing"] .generator-panel,
html.is-site-proportional-canvas body.creation-hub-route-active #view-generate[data-generator-mode="landing"] .section-block[data-stage="upload"] {
  height: auto !important;
  min-height: 0;
  overflow: visible;
}

/* The homepage community preview is content, not a fixed-height viewport.
 * Keep the hero and preview in normal document flow so a wrapped heading or
 * empty-state message can never be clipped by the old 190px grid row. */
#view-home.is-active {
  display: block;
  height: auto !important;
  min-height: 0;
  overflow: visible !important;
}

#view-home.is-active .home-community-preview,
#view-home.is-active .home-section-head,
#view-home.is-active .home-preview-grid,
#view-home.is-active .home-preview-grid .empty-state {
  height: auto !important;
  min-height: 0;
  max-height: none !important;
  overflow: visible !important;
}

#view-home.is-active .home-section-head {
  align-items: flex-start;
}

#view-home.is-active .home-section-head h2 {
  height: auto !important;
  max-width: 100%;
  overflow: visible !important;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

/* The removed hero subtitle must not leave a large orphaned gap above the
 * primary actions. */
#view-home.is-active .home-actions {
  margin-top: 18px;
}

/* Desktop home screen: fit the fixed landing content into one viewport.
 * Content-heavy routes keep their own scrolling; this rule is limited to the
 * home route and uses a three-row layout for hero, community preview and
 * legal footer so no implicit grid row pushes the footer below the fold. */
@media (min-width: 1000px) and (min-height: 760px) {
  body.home-route-active {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  body.home-route-active .app-shell {
    height: 100dvh;
    min-height: 0;
    padding-bottom: 0 !important;
    display: grid;
    grid-template-rows: max-content minmax(0, 1fr);
  }

  body.home-route-active #mainContent {
    height: 100%;
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 0;
    overflow: visible;
  }

  body.home-route-active #view-home.is-active {
    height: 100% !important;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 8px;
    overflow: visible !important;
  }

  body.home-route-active #view-home .home-cover {
    height: 100%;
    min-height: 0;
    gap: clamp(20px, 2.8vw, 44px);
    padding: clamp(20px, 2.6dvh, 34px) clamp(30px, 3.4vw, 54px);
  }

  body.home-route-active #view-home .home-visual {
    height: 100%;
    min-height: 0;
    overflow: visible;
  }

  body.home-route-active #view-home .home-saturn-art {
    max-height: min(42dvh, 440px);
  }

  body.home-route-active #view-home .home-copy h1 {
    margin-top: 8px;
    margin-bottom: 10px;
  }

  body.home-route-active #view-home .home-copy p {
    margin-bottom: 0;
  }

  body.home-route-active #view-home .home-actions {
    margin-top: 16px;
  }

  body.home-route-active #view-home .home-community-preview {
    margin-top: 0;
    padding: 10px 18px;
  }

  body.home-route-active #view-home .community-unavailable-banner {
    min-height: 30px;
    margin-bottom: 4px;
    padding-block: 3px;
  }

  body.home-route-active #view-home .home-section-head {
    margin-bottom: 4px;
  }

  body.home-route-active #view-home .home-preview-grid .empty-state {
    min-height: 38px;
    padding-block: 6px;
  }

  body.home-route-active #view-home .site-legal-footer {
    margin-top: 0;
    padding-top: 10px;
    padding-bottom: 2px;
    gap: 6px 18px;
    font-size: 12px;
    line-height: 1.45;
  }
}

/* The proportional canvas is zoomed in CSS pixels.  Convert the physical
 * viewport height back to the canvas coordinate system before fitting it. */
@media (min-width: 1000px) and (min-height: 760px) {
  html.is-site-proportional-canvas body.home-route-active .app-shell {
    height: var(--site-layout-viewport-height);
  }

}

#view-my.is-contained-view .profile-content-panel {
  margin-top: 0;
}

/* Fixed dialogs inherit the shell zoom.  Give their layout viewport the inverse
 * size so the scaled backdrop still covers the physical viewport edge-to-edge. */
html.is-site-proportional-canvas .modal-shell,
html.is-site-proportional-canvas body > .modal-shell,
html.is-site-proportional-canvas body > #profileRuleBox:not(.is-hidden) {
  box-sizing: border-box;
  width: var(--site-layout-viewport-width) !important;
  height: var(--site-layout-viewport-height) !important;
  max-width: none !important;
  max-height: none !important;
}

html.is-site-proportional-canvas .modal-shell > .modal-panel,
html.is-site-proportional-canvas .modal-shell > .modal-card {
  max-width: calc(var(--site-layout-viewport-width) - 64px);
  max-height: calc(var(--site-layout-viewport-height) - 64px);
}

/* These surfaces are deliberately mounted at document.body to escape local
 * clipping.  Match the shell zoom so menus, toolbars and tooltips keep the same
 * proportion as their anchors.  Their viewport coordinates are converted by JS. */
html.is-site-proportional-canvas body > :is(
  #publicRecoveryDialog,
  #profileRuleBox,
  #manualFloatingToolbar,
  #workbenchColorContextMenu,
  #workbenchTitlePopover,
  .site-export-floating-menu,
  .profile-card-menu-floating,
  .manual-trace-color-suggestions
) {
  zoom: var(--site-content-scale);
}

/* The manual operation rail is a fixed visual-viewport control on tablets.
 * Keeping it outside the page zoom gives pointer/touch client coordinates one
 * coordinate owner on both axes and preserves the physical 44px touch target. */
html.is-site-proportional-canvas.is-viewport-tablet body > #manualFloatingToolbar {
  zoom: 1;
}

@supports not (zoom: 1) {
  html.is-site-proportional-canvas .app-shell {
    zoom: 1;
  }
}

/*
 * Older WebKit releases can visually apply CSS zoom while returning a DOMRect
 * in a different coordinate system. Pointer client coordinates then cannot be
 * mapped back to the canvas reliably. A runtime geometry probe adds this class
 * only on affected engines; transform has consistent DOMRect and hit-testing
 * semantics there. The frame owns the transformed visual size so the document
 * does not retain an invisible 1500px-wide layout box.
 */
html.is-site-proportional-canvas.is-css-zoom-geometry-unreliable .site-scale-frame {
  position: relative;
  width: var(--site-render-width);
  height: var(--site-render-height, auto);
  margin-right: auto;
  margin-left: auto;
}

html.is-site-proportional-canvas.is-css-zoom-geometry-unreliable .site-scale-frame > .app-shell {
  position: absolute;
  inset: 0 auto auto 0;
  margin: 0 !important;
  zoom: 1 !important;
  transform: scale(var(--site-content-scale));
  transform-origin: top left;
}

/*
 * Touch scroll handoff for page-owned collections.
 *
 * Works, colors, messages and palette entries remain independently
 * scrollable, but reaching their top/bottom must hand the gesture back to
 * the surrounding page.  Dialogs are mounted outside .app-shell and keep
 * their deliberate scroll containment.
 */
html.is-viewport-touch body.contained-route-active .app-shell .view.is-active .contained-scroll-region {
  overscroll-behavior-y: auto !important;
}

/*
 * Creation hub recent works: the desktop three-column cards become a compact
 * list on phones.  Keeping a real text column (instead of squeezing three
 * cards into one row) prevents CJK titles and dimensions from becoming
 * character-by-character vertical text.
 */
@media (max-width: 640px) {
  #view-generate[data-generator-mode="landing"] .generator-recent-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list > a,
  #view-generate[data-generator-mode="landing"] .generator-recent-list > button {
    min-width: 0;
    min-height: 68px;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 3px 10px;
    padding: 8px 10px;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list .home-preview-thumb {
    width: 56px;
    height: 52px;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list strong,
  #view-generate[data-generator-mode="landing"] .generator-recent-list small {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list strong {
    font-size: 15px;
    line-height: 1.35;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list small {
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Manual color summary: the manual view only renders two summary metrics.
   Keep them as two equal columns so the unused third desktop column cannot
   leave a blank strip on phones or tablets.  Color cards use a compact,
   proportional size in the same breakpoints instead of the desktop card
   width that is needed for wide editing layouts. */
@media (max-width: 900px) {
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-metric-row {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(5px, 1vw, 8px) !important;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-metric-row .metric {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: stretch;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-row {
    box-sizing: border-box;
    flex: 0 0 clamp(152px, 24vw, 190px);
    width: clamp(152px, 24vw, 190px);
    min-width: 152px;
    min-height: clamp(88px, 12vw, 108px);
    height: clamp(88px, 12vw, 108px);
    padding: clamp(5px, .8vw, 7px);
    grid-template-columns: clamp(12px, 1.8vw, 16px) minmax(0, 1fr) auto;
    grid-template-rows: minmax(34px, 1fr) 36px;
    gap: clamp(4px, .7vw, 6px);
    font-size: clamp(10px, 1.45vw, 12px);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-row .swatch {
    width: clamp(12px, 1.8vw, 16px);
    height: clamp(12px, 1.8vw, 16px);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-name {
    min-width: 0;
    align-self: center;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-name strong {
    min-width: 0;
    font-size: clamp(12px, 1.8vw, 14px);
    line-height: 1.15;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-name small {
    min-width: 0;
    margin-top: 2px;
    font-size: clamp(10px, 1.5vw, 12px);
    line-height: 1.15;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-count {
    font-size: clamp(14px, 2vw, 16px);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-actions {
    min-width: 0;
    gap: clamp(4px, .7vw, 6px);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-actions .mini-danger,
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-actions .mini-action {
    min-width: 0;
    min-height: 36px;
    height: 36px;
    padding-inline: 4px;
    font-size: clamp(10px, 1.5vw, 12px);
  }
}

/* Final phone manual-control arrangement: two rows only. */
@media (max-width: 640px) {
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(40px, 1fr)) minmax(62px, 1.35fr) 24px 32px 24px 24px minmax(40px, .8fr);
    grid-template-rows: 30px;
    grid-template-areas: "grid labels ruler brand zoomout zoomtext zoomin reset meta";
    align-items: stretch;
    gap: 2px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-toggle {
    min-width: 0;
    min-height: 30px;
    height: 30px;
    gap: 2px;
    padding-inline: 2px;
    font-size: 8px;
    white-space: nowrap;
  }

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

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-brand-field {
    display: grid;
    grid-area: brand;
    min-width: 0;
    min-height: 30px;
    height: 30px;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding: 0 2px;
    border: 1px solid rgba(203, 184, 201, .92);
    border-radius: 6px;
    background: #fffdf9;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-brand-field > span {
    display: none;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-brand-field .select-input {
    min-width: 0;
    width: 100%;
    min-height: 26px;
    height: 26px;
    padding: 0 13px 0 2px;
    border: 0;
    background: transparent;
    font-size: 8px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomOutBtn { grid-area: zoomout; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomText { grid-area: zoomtext; min-width: 0; justify-self: center; font-size: 9px; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomInBtn { grid-area: zoomin; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomResetBtn { grid-area: reset; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #patternPreviewMeta { grid-area: meta; min-width: 0; overflow: hidden; padding-inline: 1px; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-icon {
    width: 24px;
    min-width: 0;
    min-height: 30px;
    height: 30px;
    padding: 0;
    font-size: 11px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-toolbar {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: 84px minmax(90px, 1fr) 52px 52px;
    grid-template-rows: 44px;
    grid-template-areas: "size color import trace";
    gap: 3px;
    padding: 2px;
    overflow: visible;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-toolbar .brand-select-field { display: none; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-toolbar-width-field { grid-area: size; min-width: 0; width: 100%; grid-template-columns: minmax(0, 1fr); }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-toolbar-width-inputs { width: 100%; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-toolbar-width-inputs .select-input,
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-toolbar-width-inputs input.select-input { min-width: 0; width: 100%; height: 40px; min-height: 40px; padding-inline: 4px; font-size: 11px; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-color-field { grid-area: color; min-width: 0; width: 100%; grid-template-columns: minmax(0, 1fr); }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-color-combobox { min-width: 0; width: 100%; grid-template-columns: minmax(0, 1fr) 22px; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-color-search { min-width: 0; width: 100%; min-height: 40px; height: 40px; padding-left: 22px !important; padding-right: 2px !important; font-size: 9px; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-color-toggle { min-width: 22px; min-height: 40px; height: 40px; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-unified-import { grid-area: import; min-width: 0; width: 100%; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-trace-mode-field { grid-area: trace; min-width: 0; width: 100%; grid-template-columns: minmax(0, 1fr); }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-trace-mode-field > span:not(.sr-only) { display: none; }
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-unified-import .manual-import-menu-trigger,
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-trace-mode-field .select-input { width: 100%; min-width: 0; height: 40px; min-height: 40px; padding-inline: 3px; font-size: 9px; }
}

@media (min-width: 641px) and (max-width: 900px) {
  #view-generate[data-generator-mode="landing"] .generator-recent-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Crop controls share one action vocabulary across the image and avatar
 * editors.  The quarter-turn action is explicit; the existing center control
 * remains available for fine, free-form rotation. */
.crop-toolbar-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}

.workbench-missing-beads.is-dragover {
  border-color: var(--pink-deep, #a8345d);
  background: rgba(255, 245, 250, .98);
  box-shadow: 0 0 0 3px rgba(185, 130, 158, .18), 0 12px 24px rgba(83, 69, 92, .1);
}

.crop-quarter-turn-button,
.avatar-crop-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  gap: 6px;
  white-space: nowrap;
  touch-action: manipulation;
}

.crop-quarter-turn-button svg,
.avatar-crop-actions .button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avatar-crop-rotation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line, rgba(203, 184, 201, .66));
  border-radius: 10px;
  color: var(--muted, #756b78);
  font-size: 13px;
  font-weight: 750;
}

#avatarCropRotationValue {
  color: var(--pink-deep, #a8345d);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}

.avatar-crop-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.avatar-crop-actions .button {
  min-width: 0;
  padding-inline: 10px;
}

@media (max-width: 900px) {
  .avatar-crop-panel {
    width: min(calc(100vw - 16px), 560px);
    max-height: calc(100dvh - 16px);
    padding: 16px;
    overflow-y: auto;
  }

  .avatar-crop-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .avatar-crop-canvas-shell {
    width: min(100%, 420px);
  }

  .avatar-crop-controls {
    width: min(100%, 480px);
    justify-self: center;
    gap: 12px;
  }
}

@media (max-width: 640px) {
  #view-generate[data-active-stage="crop"] .crop-canvas-toolbar {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.9fr) !important;
    min-height: 44px;
    height: 44px;
    gap: 6px;
  }

  #view-generate[data-active-stage="crop"] .crop-rotation-readout {
    min-height: 40px;
    padding-inline: 8px;
    gap: 4px;
    font-size: 10px;
  }

  #view-generate[data-active-stage="crop"] .crop-rotate-handle {
    width: 44px;
    height: 44px;
  }

  #view-generate[data-active-stage="crop"] .crop-toolbar-actions {
    gap: 4px;
  }

  #view-generate[data-active-stage="crop"] .crop-quarter-turn-button,
  #view-generate[data-active-stage="crop"] .crop-reset-button {
    min-width: 0;
    min-height: 40px;
    height: 40px;
    padding-inline: 7px;
    gap: 3px;
    font-size: 10px;
  }

  #view-generate[data-active-stage="crop"] .crop-quarter-turn-button svg,
  #view-generate[data-active-stage="crop"] .crop-reset-button svg {
    width: 15px;
    height: 15px;
  }

  .avatar-crop-panel {
    width: calc(100vw - 16px);
    padding: 14px;
    gap: 12px;
  }

  .avatar-crop-actions {
    gap: 6px;
  }

  .avatar-crop-actions .button {
    min-height: 44px;
    padding-inline: 7px;
    font-size: 12px;
  }

  /* Manual editor: give the color picker a real reading width on phones.
   * The color menu stays dense enough to show two touchable choices per row
   * without turning each short color code into a full-width empty card. */
  /* Keep the five manual-editor controls in one compact touch row on phones.
   * The row can scroll horizontally on very narrow screens, so controls never
   * collapse into a second line or become too small to use. */
  #view-generate[data-generator-mode="manual"] .preview-card {
    grid-template-rows: 52px minmax(0, 1fr);
  }

  #view-generate[data-generator-mode="manual"] .editor-toolbar {
    grid-template-columns: 78px 100px 78px 48px 58px;
    grid-template-rows: 44px;
    grid-template-areas: "size color brand import trace";
    gap: 4px;
    padding: 2px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
  }

  #view-generate[data-generator-mode="manual"] .editor-toolbar::-webkit-scrollbar {
    display: none;
  }

  #view-generate[data-generator-mode="manual"] .editor-toolbar > * {
    overflow: visible;
  }

  #view-generate[data-generator-mode="manual"] .editor-toolbar:has(.editor-color-picker.is-open),
  #view-generate[data-generator-mode="manual"] .editor-toolbar:has(.manual-unified-import.is-open) {
    overflow: visible;
  }

  #view-generate[data-generator-mode="manual"] .compact-select-field {
    min-height: 44px;
    height: 44px;
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    font-size: 9px;
    line-height: 1;
  }

  #view-generate[data-generator-mode="manual"] .editor-color-field {
    width: auto;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  #view-generate[data-generator-mode="manual"] .editor-color-picker,
  #view-generate[data-generator-mode="manual"] .editor-color-combobox {
    width: 100%;
    min-width: 0;
  }

  #view-generate[data-generator-mode="manual"] .editor-color-combobox {
    grid-template-columns: minmax(0, 1fr) 44px;
    min-height: 42px;
  }

  #view-generate[data-generator-mode="manual"] .editor-color-search {
    min-width: 0;
    min-height: 42px;
    padding-left: 30px !important;
    padding-right: 8px !important;
    font-size: 13px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-generate[data-generator-mode="manual"] .editor-color-current-swatch {
    left: 7px;
    width: 16px;
    height: 16px;
  }

  #view-generate[data-generator-mode="manual"] .editor-color-toggle {
    min-width: 44px;
    min-height: 42px;
  }

  #view-generate[data-generator-mode="manual"] .brand-select-field,
  #view-generate[data-generator-mode="manual"] .manual-trace-mode-field {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  #view-generate[data-generator-mode="manual"] .brand-select-field .select-input,
  #view-generate[data-generator-mode="manual"] .manual-trace-mode-field .select-input {
    min-width: 0;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding-inline: 5px 16px;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-generate[data-generator-mode="manual"] .manual-toolbar-width-inputs {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
  }

  #view-generate[data-generator-mode="manual"] .manual-toolbar-width-inputs .select-input,
  #view-generate[data-generator-mode="manual"] .manual-toolbar-width-inputs input.select-input {
    min-width: 0;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding-inline: 5px;
    font-size: 11px;
  }

  #view-generate[data-generator-mode="manual"] .manual-import-menu-trigger {
    width: 100%;
    min-width: 0 !important;
    min-height: 44px;
    height: 44px;
    max-width: 100%;
    justify-content: center;
    padding-inline: 4px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: clip;
    white-space: nowrap;
  }

  #view-generate[data-generator-mode="manual"] .editor-color-palette {
    top: calc(100% + 6px);
    right: auto;
    width: 100%;
    min-width: 100%;
    max-height: min(38dvh, 320px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    gap: 8px;
    padding: 8px;
  }

  #view-generate[data-generator-mode="manual"] .editor-color-chip {
    min-height: 44px;
    height: auto;
    padding: 6px 8px;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 6px;
    font-size: 14px;
    line-height: 1.25;
  }

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

  #view-generate[data-generator-mode="manual"] .editor-color-code,
  #view-workbench #workbenchColorList .color-chip-code,
  .missing-bead-color-code {
    display: block;
    min-width: 3ch;
    color: var(--ink, #403343);
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    letter-spacing: .02em;
    line-height: 1.25;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  #view-workbench #workbenchColorList .color-chip-code {
    font-size: 13px;
  }

  .manual-trace-upload-panel {
    gap: 10px;
    padding: 14px;
  }

  .manual-trace-upload-panel #manualTraceUploadDescription,
  .manual-trace-upload-zone > span:not(.manual-trace-upload-mark),
  .manual-trace-upload-zone > small {
    display: none;
  }

  .manual-trace-upload-zone {
    min-height: clamp(156px, 28dvh, 220px);
    padding: 24px 16px;
    gap: 8px;
  }

  .manual-trace-upload-zone > strong {
    font-size: 18px;
  }

  .manual-trace-upload-status:empty {
    display: none;
  }

  .manual-trace-upload-status {
    min-height: 0;
    font-size: 13px;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list,
  html.is-viewport-phone #view-generate .generator-recent-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100%;
    min-width: 0;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list > a,
  #view-generate[data-generator-mode="landing"] .generator-recent-list > button,
  html.is-viewport-phone #view-generate .generator-recent-list > a,
  html.is-viewport-phone #view-generate .generator-recent-list > button {
    width: 100%;
    min-width: 0 !important;
    min-height: 68px !important;
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-auto-flow: row;
    align-items: center;
    gap: 3px 10px !important;
    padding: 8px 10px !important;
    overflow: hidden;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list .home-preview-thumb,
  html.is-viewport-phone #view-generate .generator-recent-list .home-preview-thumb {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 56px;
    height: 52px;
    min-width: 0;
    min-height: 0;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list strong,
  #view-generate[data-generator-mode="landing"] .generator-recent-list small,
  html.is-viewport-phone #view-generate .generator-recent-list strong,
  html.is-viewport-phone #view-generate .generator-recent-list small {
    grid-column: 2;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list strong,
  html.is-viewport-phone #view-generate .generator-recent-list strong {
    font-size: 15px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #view-generate[data-generator-mode="landing"] .generator-recent-list small,
  html.is-viewport-phone #view-generate .generator-recent-list small {
    font-size: 13px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-generate.is-active[data-generator-mode="auto"][data-active-stage="settings"] .preview-metric-row,
  html.is-viewport-phone #view-generate[data-generator-mode="auto"] .preview-metric-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.7fr) !important;
    gap: 4px !important;
  }

  #view-generate.is-active[data-generator-mode="auto"][data-active-stage="settings"] .preview-metric-row .metric,
  html.is-viewport-phone #view-generate[data-generator-mode="auto"] .preview-metric-row .metric {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding-inline: 4px;
    gap: 2px;
    font-size: 10px;
    line-height: 1.1;
  }

  #view-generate.is-active[data-generator-mode="auto"][data-active-stage="settings"] .preview-metric-row .metric > span,
  html.is-viewport-phone #view-generate[data-generator-mode="auto"] .preview-metric-row .metric > span {
    flex: 0 0 auto;
    min-width: 0;
    white-space: nowrap;
    word-break: keep-all;
    writing-mode: horizontal-tb;
    text-align: center;
  }

  #view-generate.is-active[data-generator-mode="auto"][data-active-stage="settings"] .preview-metric-row .metric > strong,
  html.is-viewport-phone #view-generate[data-generator-mode="auto"] .preview-metric-row .metric > strong {
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.1;
    text-align: center;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Manual color cards contain two actions in addition to the code, HEX and
   * count.  The compact workspace previously reserved only 52px for this
   * region, so the action row was clipped by the preview panel.  Give the
   * collection a real touch-sized row and let each card breathe horizontally. */
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel:has(> .stats-list:not(:empty)) {
    grid-template-rows: 64px minmax(0, 1fr) 44px 104px !important;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list {
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
    padding: 6px 3px 6px 0;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: stretch;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-row {
    flex: 0 0 min(224px, calc(100vw - 34px));
    width: min(224px, calc(100vw - 34px));
    min-width: 190px;
    min-height: 92px;
    height: 92px;
    padding: 8px;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    grid-template-rows: minmax(40px, auto) 36px;
    gap: 7px 6px;
    align-content: stretch;
    font-size: 12px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-row .swatch {
    width: 18px;
    height: 18px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-name {
    min-width: 0;
    align-self: center;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-name strong {
    min-width: 0;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-name small {
    min-width: 0;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-count {
    align-self: center;
    font-size: 16px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-actions {
    min-width: 0;
    gap: 6px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-actions .mini-danger,
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-actions .mini-action {
    min-width: 0;
    min-height: 36px;
    height: 36px;
    padding: 5px 6px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
  }

  #view-messages .interaction-message {
    height: 64px;
    min-height: 64px;
    padding: 8px 10px;
    grid-template-columns: auto minmax(0, .9fr) minmax(0, 1.45fr) minmax(0, 76px);
    gap: 0 8px;
  }

  #view-messages .interaction-message > span {
    min-width: 40px;
    padding: 4px 6px;
    font-size: 11px;
  }

  #view-messages .interaction-message > strong {
    font-size: 14px;
  }

  #view-messages .interaction-message > small,
  #view-messages .interaction-message > em {
    font-size: 11px;
  }

  #view-messages .interaction-message > em {
    text-align: right;
  }

  /* Message work picker: keep two readable columns without horizontal overflow. */
  .message-pattern-dialog-panel {
    width: min(calc(100vw - 20px), 560px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 16px 14px calc(14px + env(safe-area-inset-bottom));
    overflow: hidden;
  }

  .message-pattern-dialog-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
  }

  .message-pattern-view-tabs {
    width: 100%;
  }

  .message-pattern-search-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  #messagePatternSelectionStatus {
    justify-self: start;
  }

  .message-pattern-dialog-body {
    min-height: 180px;
    max-height: min(52dvh, 520px);
    padding: 2px 1px;
  }

  .message-pattern-dialog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .message-pattern-dialog-card {
    min-height: 0;
    padding: 10px 8px;
    gap: 8px;
  }

  .message-pattern-dialog-card:has(> .content-pin-badge) {
    padding-top: 32px;
  }

  .message-pattern-dialog-thumb {
    width: 100%;
    max-width: none;
  }

  .message-pattern-dialog-copy strong {
    font-size: 14px;
  }

  .message-pattern-dialog-copy small {
    font-size: 11px;
  }

  .message-pattern-dialog-state {
    min-height: 44px;
    padding-inline: 4px;
    font-size: 12px;
  }

  .message-pattern-dialog-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .message-pattern-dialog-footer > p {
    line-height: 1.45;
  }

  .message-pattern-dialog-footer .button-row {
    width: 100%;
  }

  .message-pattern-dialog-footer .button-row .button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
  }
}

/* Mobile search follows the familiar app pattern: a compact icon in the
 * header opens the full, grouped search surface with a focused input. */
.mobile-global-search-button {
  display: none;
}

/* Phone and compact tablet headers share the same search entry. */
@media (max-width: 999px) {
  .mobile-global-search-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid rgba(203, 184, 201, .72);
    border-radius: 14px;
    background: rgba(255, 255, 255, .74);
    color: #695866;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
  }

  .mobile-global-search-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-global-search-button:hover,
  .mobile-global-search-button:focus-visible,
  .mobile-global-search-button:active {
    border-color: rgba(176, 48, 97, .42);
    background: rgba(248, 200, 200, .3);
    color: #a6335d;
  }

  .mobile-global-search-button:focus-visible {
    outline: 2px solid rgba(176, 48, 97, .5);
    outline-offset: 2px;
  }
}

@media (max-width: 640px) {
  .topbar-tools {
    gap: 6px !important;
  }

  .topbar-tools .top-search {
    display: none !important;
  }

  #view-search .global-search-layout {
    width: 100%;
    min-width: 0;
  }

  #view-search .global-search-panel {
    min-height: 0;
    padding: 16px 12px;
  }

  #view-search .global-search-head {
    margin-bottom: 14px;
  }

  #view-search .global-search-head h1 {
    font-size: 24px;
  }

  #view-search .global-search-head p {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.5;
  }

  #view-search .global-search-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  #view-search .global-search-form .search-input {
    min-height: 46px;
    min-width: 0;
    font-size: 16px;
  }

  #view-search .global-search-form .button {
    min-height: 46px;
    padding-inline: 15px;
  }

  #view-search .global-search-tabs {
    margin-top: 14px;
    gap: 16px;
    scrollbar-width: none;
  }

  #view-search .global-search-tabs::-webkit-scrollbar,
  #view-search .global-search-personal-tabs::-webkit-scrollbar {
    display: none;
  }

  #view-search .global-search-tabs button {
    min-height: 44px;
    font-size: 14px;
  }

  #view-search .global-search-status {
    min-height: 30px;
    padding-top: 10px;
    font-size: 12px;
  }

  #view-search .global-search-user-row {
    min-height: 76px;
    padding: 10px 2px;
    gap: 8px;
  }

  #view-search .global-search-user-main {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }

  #view-search .global-search-user-main .avatar-mark {
    width: 48px;
    height: 48px;
  }

  #view-search .global-search-user-actions,
  #view-search .global-search-content-actions {
    gap: 6px;
  }

  #view-search .global-search-user-actions .button,
  #view-search .global-search-content-actions .button {
    min-height: 42px;
    padding-inline: 10px;
    white-space: nowrap;
  }

  #view-search .global-search-content-card {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    min-height: 88px;
    padding: 10px 2px;
  }

  #view-search .global-search-content-thumb,
  #view-search .global-search-missing-preview {
    width: 64px;
    height: 64px;
    min-height: 64px;
  }

  #view-search .global-search-content-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  #view-search .global-search-personal-tabs {
    padding-bottom: 6px;
    gap: 7px;
    scrollbar-width: none;
  }

  #view-search .global-search-personal-tabs button {
    min-height: 40px;
    padding-inline: 12px;
  }
}

/* Palette cards: expose counts only and keep the visible hierarchy stable across widths. */
#view-palette .palette-brand-copy {
  min-width: 0;
  align-content: center;
}

#view-palette .palette-brand-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-palette .palette-brand-count {
  font-weight: 700;
}

#view-palette .palette-brand-match {
  color: var(--muted);
}

#view-palette .palette-detail-head > div:nth-child(2) {
  min-width: 0;
}

#view-palette #paletteDetailMeta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  #view-palette .palette-brand-card,
  #view-palette .palette-brand-open {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  #view-palette .palette-brand-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center;
  }

  #view-palette .palette-brand-copy {
    gap: 2px;
  }

  #view-palette .palette-brand-copy small {
    max-width: 100%;
  }

  #view-palette .palette-brand-copy > .palette-brand-match {
    display: block;
    font-size: 10px !important;
    line-height: 1.3;
  }

  #view-palette .palette-brand-action,
  #view-palette .palette-default-button {
    white-space: nowrap;
  }

  #view-palette .palette-detail-head {
    min-width: 0;
  }

  #view-palette #paletteDetailMeta {
    font-size: 12px;
  }
}

/*
 * Adaptive manual workspace.
 *
 * A short landscape viewport must not turn a square bead canvas into a
 * shallow strip.  Keep the editor canvas proportional, then let that canvas
 * and the color collection scroll inside their own regions.  The surrounding
 * page remains a normal document so the header, controls, cards and text can
 * keep their readable size instead of being squeezed into a fixed-height
 * desktop composition.
 */
html:is(.is-viewport-tablet, .is-viewport-desktop) body.manual-editor-active {
  height: auto !important;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
}

html:is(.is-viewport-tablet, .is-viewport-desktop) body.manual-editor-active .app-shell,
html:is(.is-viewport-tablet, .is-viewport-desktop) body.manual-editor-active #mainContent,
html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"][data-active-stage="settings"],
html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .flow-grid {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  gap: clamp(8px, 1vw, 16px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding-block: clamp(10px, 1.2vw, 20px) !important;
  padding-inline: var(--manual-operation-safe-gutter) !important;
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .preview-panel > .panel-head {
  min-height: clamp(48px, 4.5vw, 68px);
  margin-bottom: 0;
  padding-bottom: clamp(8px, .8vw, 14px);
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .preview-stack,
html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .preview-card,
html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .original-preview-split {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* B266: once the optional artwork preview divides the original work area, the
   editing pane must clip its internally scrollable viewport to its own track.
   This intentionally overrides the legacy full-width editor overflow rule. */
html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"][data-active-stage="settings"]
  .manual-creation-workspace > .original-preview-split {
  overflow: hidden !important;
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .preview-card:not(.crop-preview-card) {
  display: grid;
  grid-template-rows: auto auto;
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .editor-toolbar {
  min-height: clamp(48px, 4.2vw, 64px);
  height: auto;
  padding: clamp(6px, .8vw, 10px);
  gap: clamp(6px, .8vw, 12px);
  align-items: stretch;
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .editor-toolbar > .compact-select-field,
html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .editor-toolbar > .manual-unified-import {
  flex: 1 1 clamp(150px, 16vw, 280px);
  min-width: min(100%, clamp(150px, 16vw, 280px));
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .editor-toolbar > .editor-color-field {
  flex: 2 1 clamp(220px, 24vw, 380px);
  min-width: min(100%, clamp(220px, 24vw, 380px));
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .editor-toolbar .select-input,
html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .editor-toolbar .editor-color-search,
html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .editor-toolbar .manual-import-menu-trigger {
  min-height: clamp(44px, 3.4vw, 52px);
  height: clamp(44px, 3.4vw, 52px);
  font-size: clamp(12px, .95vw, 15px);
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .pattern-preview-viewport {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1;
  overflow: auto !important;
  align-items: flex-start;
  overscroll-behavior: contain;
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .manual-preview-stage,
html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] #patternPreviewCanvas {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .preview-metric-row {
  min-height: clamp(52px, 4.5vw, 72px);
  height: auto !important;
  gap: clamp(6px, .8vw, 12px);
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] .preview-metric-row .metric {
  min-height: clamp(52px, 4.5vw, 72px);
  height: auto !important;
  padding: clamp(8px, .8vw, 12px);
  font-size: clamp(12px, .95vw, 15px);
}

html:is(.is-viewport-tablet, .is-viewport-desktop) #view-generate[data-generator-mode="manual"] > .flow-grid > .preview-panel > .stats-list {
  height: auto !important;
  min-height: clamp(96px, 9vw, 136px);
  max-height: min(260px, 28dvh) !important;
  padding: clamp(6px, .8vw, 10px) 3px clamp(6px, .8vw, 10px) 0;
  overflow-x: auto;
  overflow-y: auto;
}

/* Phone feedback layer: keep transient messages above the fixed bottom nav
   with enough clearance for both the nav surface and the safe-area inset. */
@media (max-width: 640px) {
  .toast {
    bottom: calc(var(--mobile-nav-height) + 22px + env(safe-area-inset-bottom));
    z-index: 2147483647;
    min-width: min(240px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }
}

/* Phone workbench palette: give each color chip enough horizontal room for
   four-digit codes and keep the whole control comfortably touchable. */
@media (max-width: 640px) {
  #view-workbench #workbenchColorList,
  #view-workbench .color-filter-panel.is-missing-collapsed #workbenchColorList {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 4px 4px 6px 0;
  }

  #view-workbench #workbenchColorList .color-chip-shell .color-chip,
  #view-workbench #workbenchColorList .color-chip {
    min-width: 0;
    min-height: 44px !important;
    height: auto;
    padding: 7px 8px;
    grid-template-columns: 18px minmax(4ch, 1fr) minmax(3ch, max-content);
    column-gap: 5px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.2;
  }

  #view-workbench #workbenchColorList .color-chip .swatch {
    width: 18px;
    height: 18px;
    border-radius: 5px;
  }

  #view-workbench #workbenchColorList .color-chip-code,
  #view-workbench #workbenchColorList .color-chip strong {
    min-width: 0;
    font-size: 12px;
    line-height: 1.2;
  }

  #view-workbench #workbenchColorList .color-chip-code {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  #view-workbench #workbenchColorList .color-chip strong {
    min-width: 3ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
}

/* Phone one-click creation selects: use an opaque control surface and reserve
   a clear arrow lane so the selected label never blends into the panel. */
@media (max-width: 640px) {
  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .mobile-parameter-select,
  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .mobile-compact-width-select {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    padding: 0 19px 0 6px;
    border: 1px solid rgba(203, 184, 201, .92);
    border-radius: 10px;
    background-color: #fffdf9 !important;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23403343' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 4px center;
    background-size: 14px 8px;
    background-repeat: no-repeat;
    color: #403343 !important;
    -webkit-text-fill-color: #403343;
    opacity: 1;
    font-size: 10px;
    font-weight: 700;
    line-height: normal;
    text-align: left;
    text-indent: 0;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    color-scheme: light;
  }

  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .manual-width-input-row .number-input {
    box-sizing: border-box;
    min-width: 0;
    padding: 0 4px;
    font-size: 12px;
    text-align: left;
  }

  #view-generate.is-active[data-generator-mode="auto"][data-active-stage="settings"] .manual-width-input-row {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) !important;
    gap: 2px !important;
  }

  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .manual-width-input-row .number-input {
    appearance: textfield;
  }

  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .manual-width-input-row .number-input::-webkit-inner-spin-button,
  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .manual-width-input-row .number-input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
  }

  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .manual-width-input-row .mobile-compact-width-select {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    font-size: 0;
    text-align: center;
    background-position: right 2px center;
    background-size: 8px;
  }

  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .manual-width-input-row .mobile-compact-width-select option {
    font-size: 12px;
  }

  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .mobile-parameter-select:focus-visible,
  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .mobile-compact-width-select:focus-visible {
    outline: 0;
    border-color: rgba(128, 127, 201, .72);
    box-shadow: 0 0 0 3px rgba(128, 127, 201, .18);
  }

  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .mobile-parameter-select option,
  #view-generate[data-generator-mode="auto"][data-active-stage="settings"] .mobile-compact-width-select option {
    background: #fffdf9;
    color: #403343;
  }
}

/* Phone workbench toolbar: separate primary canvas actions from display
   toggles so the four state controls never collapse into distorted pills. */
@media (max-width: 640px) {
  #view-workbench .workbench-main > .toolbar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 6px;
    padding: 6px 4px 8px;
    overflow: visible;
  }

  #view-workbench .workbench-main > .toolbar > .tool-group:first-child,
  #view-workbench .workbench-main > .toolbar > .display-toggle-group,
  #view-workbench .workbench-main > .toolbar > .tool-group:last-child {
    grid-column: 1;
    width: 100%;
  }

  #view-workbench .workbench-main > .toolbar > .tool-group:first-child {
    grid-row: 1;
    gap: 6px;
    overflow: visible;
  }

  #view-workbench .workbench-main > .toolbar > .display-toggle-group {
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    justify-content: stretch;
    overflow: visible;
  }

  #view-workbench .workbench-main > .toolbar > .tool-group:last-child {
    grid-row: 3;
  }

  #view-workbench .workbench-main > .toolbar > #workbenchShareActions:not(.is-hidden) {
    grid-column: 1;
    grid-row: 4;
  }

  #view-workbench .workbench-main > .toolbar .button,
  #view-workbench .workbench-main > .toolbar .icon-button,
  #view-workbench .workbench-main > .toolbar .mini-toggle,
  #view-workbench .workbench-main > .toolbar .workbench-count-control {
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.15;
  }

  #view-workbench #exitWorkbenchBtn {
    width: 56px !important;
    min-width: 56px !important;
    padding-inline: 8px;
  }

  #view-workbench #zoomOutBtn,
  #view-workbench #zoomInBtn,
  #view-workbench #fitBtn,
  #view-workbench #fullscreenBtn {
    width: 44px !important;
    min-width: 44px !important;
    padding: 0;
    font-size: 16px;
  }

  #view-workbench .display-toggle-group .mini-toggle,
  #view-workbench .display-toggle-group .workbench-count-control {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: 1 1 0;
    justify-content: center;
    gap: 5px;
    padding-inline: 6px;
    white-space: nowrap;
  }

  #view-workbench .display-toggle-group .mini-toggle input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }

  #view-workbench .display-toggle-group .mini-toggle span,
  #view-workbench .workbench-count-control > span {
    width: auto;
    min-width: 0;
    overflow: visible;
    white-space: nowrap;
  }

  #view-workbench .workbench-count-control {
    gap: 4px;
    padding-inline: 6px;
  }

  #view-workbench .workbench-count-control select {
    width: auto;
    min-width: 0;
    max-width: 52px;
    min-height: 32px;
    padding: 0 16px 0 4px;
    font-size: 11px;
  }
}

/* Phone creation hub cards: keep the copy and CTA in separate grid rows so
   the action surface can never cover the muted description text. */
@media (max-width: 640px) {
  #view-generate[data-generator-mode="landing"] .generator-entry-card {
    min-height: 204px;
    height: auto;
    grid-template-rows: auto auto auto auto;
    align-content: start;
    row-gap: 8px;
    overflow: visible;
  }

  #view-generate[data-generator-mode="landing"] .generator-entry-card > small {
    min-height: 0;
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    line-height: 1.5;
  }

  #view-generate[data-generator-mode="landing"] .generator-entry-action {
    position: static;
    align-self: end;
    min-height: 44px;
    padding: 8px 12px;
    white-space: nowrap;
  }
}

/* Phone manual editor: move the wide brand selector into the first control
   row beside the three display toggles.  The original editor-toolbar field
   remains available on larger layouts and is hidden only on phones. */
.manual-mobile-brand-field {
  display: none;
}

@media (max-width: 640px) {
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel > .panel-head {
    display: block;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-heading-block,
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .editor-toolbar .brand-select-field {
    display: none;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.45fr) 28px 34px 28px 28px;
    grid-template-rows: 28px 28px;
    grid-template-areas:
      "grid labels ruler brand brand brand brand brand"
      "zoomout zoomtext zoomin reset meta meta meta meta";
    align-items: stretch;
    gap: 2px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-grid-control {
    grid-area: grid;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-labels-control {
    grid-area: labels;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-ruler-control {
    grid-area: ruler;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-brand-field {
    display: grid;
    grid-area: brand;
    min-width: 0;
    min-height: 28px;
    height: 28px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 3px;
    padding: 0 3px;
    border: 1px solid rgba(203, 184, 201, .92);
    border-radius: 6px;
    background: #fffdf9;
    font-size: 8px;
    line-height: 1;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .manual-mobile-brand-field .select-input {
    min-width: 0;
    width: 100%;
    min-height: 24px;
    height: 24px;
    padding: 0 14px 0 2px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font-size: 9px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-toggle {
    min-width: 0;
    min-height: 28px;
    height: 28px;
    gap: 2px;
    padding-inline: 2px;
    font-size: 9px;
    white-space: nowrap;
  }

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

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomOutBtn {
    grid-area: zoomout;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomText {
    grid-area: zoomtext;
    min-width: 0;
    justify-self: center;
    font-size: 10px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomInBtn {
    grid-area: zoomin;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #previewZoomResetBtn {
    grid-area: reset;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] #patternPreviewMeta {
    grid-area: meta;
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-panel-tools > .mini-icon {
    width: 28px;
    min-width: 0;
    min-height: 28px;
    height: 28px;
    padding: 0;
    font-size: 12px;
  }
}

/* Final responsive sizing for manual summary cards.  This block is kept at
   the end of the proportional stylesheet so it wins over the earlier phone
   action-row sizing rules. */
@media (max-width: 900px) {
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-metric-row {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(5px, 1vw, 8px) !important;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] .preview-metric-row .metric {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: stretch;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-row {
    box-sizing: border-box;
    flex: 0 0 clamp(152px, 24vw, 190px);
    width: clamp(152px, 24vw, 190px);
    min-width: 152px;
    min-height: clamp(88px, 12vw, 108px);
    height: clamp(88px, 12vw, 108px);
    padding: clamp(5px, .8vw, 7px);
    grid-template-columns: clamp(12px, 1.8vw, 16px) minmax(0, 1fr) auto;
    grid-template-rows: minmax(34px, 1fr) 36px;
    gap: clamp(4px, .7vw, 6px);
    font-size: clamp(10px, 1.45vw, 12px);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-row .swatch {
    width: clamp(12px, 1.8vw, 16px);
    height: clamp(12px, 1.8vw, 16px);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-name strong {
    min-width: 0;
    font-size: clamp(12px, 1.8vw, 14px);
    line-height: 1.15;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-name small {
    min-width: 0;
    margin-top: 2px;
    font-size: clamp(10px, 1.5vw, 12px);
    line-height: 1.15;
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-count {
    font-size: clamp(14px, 2vw, 16px);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-actions {
    min-width: 0;
    gap: clamp(4px, .7vw, 6px);
  }

  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-actions .mini-danger,
  #view-generate[data-generator-mode="manual"][data-active-stage="settings"] > .flow-grid > .preview-panel > .stats-list .stat-actions .mini-action {
    min-width: 0;
    min-height: 36px;
    height: 36px;
    padding-inline: 4px;
    font-size: clamp(10px, 1.5vw, 12px);
  }
}