@font-face { font-family: 'Inter'; src: url('./assets/fonts/inter-latin.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Shirtinger Condensed'; src: url('./assets/fonts/dejavu-sans-condensed-bold.woff') format('woff'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Shirtinger Serif'; src: url('./assets/fonts/dejavu-serif-bold.woff') format('woff'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Shirtinger Mono'; src: url('./assets/fonts/dejavu-sans-mono-bold.woff') format('woff'); font-style: normal; font-weight: 700; font-display: swap; }
:root { color-scheme: light; --paper: #f4f6f8; --white: #fff; --ink: #20242c; --muted: #667085; --line: #e4e7ec; --surface: #f8fafc; --accent: #3563e9; --accent-hover: #2853d4; --accent-soft: #eef3ff; --accent-line: #cbd7ff; --lime: var(--accent); --emerald: var(--accent); --radius: 8px; font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); min-width: 320px; }
button, input, select { font: inherit; }
button, select, input[type='color'], label[for='logo-upload'] { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button, input, select, a { outline-offset: 4px; }
:focus-visible { outline: 2px solid var(--emerald); }
button:disabled, input:disabled, select:disabled { opacity: .45; cursor: not-allowed; }
[hidden] { display: none !important; }
svg { display: block; flex-shrink: 0; }
button svg { width: 19px; height: 19px; }
.app-shell { max-width: 1576px; margin: 0 auto; padding: 0 40px 30px; }
.app-header { min-height: 106px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { color: var(--ink); display: flex; align-items: center; text-decoration: none; gap: 11px; white-space: nowrap; }
.brand-mark { width: 39px; height: 39px; border-radius: 12px; background: var(--ink); color: var(--lime); display: grid; place-items: center; }
.brand-mark svg { width: 30px; height: 30px; }
.brand-name { font-family: inherit; font-size: 24px; font-weight: 800; letter-spacing: -1.1px; }
.brand-name > span { font-weight: 500; }
.beta-badge { font-size: 9px; line-height: 1; font-weight: 700; letter-spacing: 1.1px; border: 1px solid #cbd5e1; border-radius: 4px; padding: 5px 6px; margin-left: 4px; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.button { min-height: 45px; border-radius: 10px; border: 1px solid transparent; padding: 11px 17px; display: inline-flex; gap: 9px; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; white-space: nowrap; transition: background .18s, transform .18s, border-color .18s; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: var(--white); background: var(--ink); box-shadow: 0 3px 6px #20242c0c; }
.button-primary:hover { background: #475467; }
.button-primary svg { color: var(--lime); }
.button-secondary { background: transparent; color: var(--ink); border-color: #e4e7ec; }
.button-secondary:hover { background: #fff; }
.studio-layout { display: grid; grid-template-columns: minmax(0, 1fr) 358px; gap: 30px; align-items: start; }
.stage-column { min-width: 0; position: sticky; top: 24px; }
.viewport { position: relative; min-height: 510px; height: clamp(510px, 67vh, 750px); border: 1px solid #e4e7ec; border-radius: var(--radius); overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #fff 0%, #f4f6f8 76%); }
#canvas-container { position: absolute; inset: 0; touch-action: none; }
#canvas-container canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.viewport-header { position: absolute; top: 24px; left: 24px; right: 24px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; }
.stage-label { display: flex; align-items: center; gap: 8px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #667085; }
.stage-label h1 { margin: 0; font-size: 11px; font-weight: 500; color: #475467; }
.model-chip { font-size: 10px; color: #667085; background: #ffffff80; border: 1px solid #e4e7ec; padding: 7px 11px; border-radius: 20px; }
.viewport-caption { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; width: max-content; max-width: calc(100% - 24px); font-size: 10px; line-height: 1.45; color: #667085; text-align: center; z-index: 2; pointer-events: none; }
.viewport-caption svg { width: 18px; height: 18px; }
.viewport-caption strong { display: block; color: #667085; font-weight: 500; }
.viewport-caption small { font-size: 9px; }
.desktop-caption { display: block; }
.model-editor-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.editor-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.editor-center-guide { fill: none; stroke: #20242c; stroke-width: 1.75px; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; pointer-events: none; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
.editor-alignment-guide { fill: none; stroke: #08768d; stroke-width: 1.75px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
.editor-alignment-label { position: absolute; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 3px 7px; color: #075b6d; background: #eefbffed; border: 1px solid #a8d8e2; border-radius: 5px; font-size: 10px; line-height: 1.3; white-space: nowrap; pointer-events: none; }
.editor-outline { fill: none; stroke: #20242c; stroke-width: 1.75px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
.model-editor-overlay.is-locked .editor-outline { stroke: #667085; stroke-dasharray: 3 4; }
.model-editor-overlay.is-editing .editor-outline { stroke: #475467; stroke-dasharray: none; }
.editor-handle { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid #cbd5e1; border-radius: 50%; color: #20242c; background: #fff; box-shadow: 0 2px 9px #20242c30; transform: translate(-50%, -50%); pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.editor-handle:hover, .editor-handle:focus-visible { background: #f2f4f7; border-color: #667085; }
.editor-handle[data-editor-action='scale'] { color: #20242c; background: var(--lime); border-color: #667085; cursor: nwse-resize; }
.editor-handle[data-editor-action='rotate'] { cursor: grab; }
.editor-handle[data-editor-action='rotate']:active { cursor: grabbing; }
.editor-handle[data-editor-action='delete']:hover { color: #963e35; background: #fff1ed; }
.editor-handle svg { width: 20px; height: 20px; pointer-events: none; }
.editor-selection-label { position: absolute; transform: translateX(-50%); max-width: 200px; padding: 4px 8px; border-radius: 5px; background: #20242cea; color: #fff; font-size: 10px; line-height: 1.4; text-align: center; pointer-events: none; }
.image-quality-notice { box-sizing: border-box; margin: 10px 0 0; padding: 10px 12px; border: 1px solid #dfb05c; border-radius: 9px; background: #fff5df; color: #754407; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.image-quality-notice strong { display: block; font-weight: 600; }
.image-quality-notice small { display: block; margin-top: 5px; color: #755d36; font-size: 10px; line-height: 1.4; }
.editor-quality-warning { position: absolute; margin: 0; max-width: calc(100% - 24px); box-shadow: 0 3px 14px #3c2a161a; pointer-events: none; overflow: hidden; }
.editor-quality-warning.is-compact { padding: 6px 9px; font-size: 11px; }
.editor-quality-warning.is-compact small { margin-top: 3px; font-size: 9px; }
.editor-quality-warning.is-mobile-detail { padding: 12px 44px 12px 12px; pointer-events: auto; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; }
.model-editor-overlay.has-quality-details { z-index: 2; }
.editor-quality-close { position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #754407; font: 24px/1 system-ui, sans-serif; cursor: pointer; }
.editor-quality-close:focus-visible { outline: 2px solid #754407; outline-offset: -4px; }
.editor-quality-close[hidden] { display: none; }
.model-editor-overlay.has-quality-warning .editor-outline { stroke: #a4640b; }
.model-quality-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.editor-quality-marker { position: absolute; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #ffe1a1; color: #754407; box-shadow: 0 2px 8px #35241426; transform: translate(-50%, -50%); font: 800 18px/1 system-ui, sans-serif; pointer-events: auto; cursor: pointer; }
.editor-quality-marker:hover, .editor-quality-marker:focus-visible { background: #ffcf70; outline: 2px solid #754407; outline-offset: 2px; }
.editor-quality-marker.is-mobile { width: 44px; height: 44px; border: 0; background: radial-gradient(circle, #ffe1a1 12px, #fff 12px, #fff 14px, transparent 14px); box-shadow: none; font-size: 15px; }
.editor-quality-marker.is-mobile:hover, .editor-quality-marker.is-mobile:focus-visible { background: radial-gradient(circle, #ffcf70 12px, #fff 12px, #fff 14px, transparent 14px); }
.editor-quality-marker[hidden], .image-quality-notice[hidden] { display: none; }
.render-message { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; background: #20242cdd; z-index: 3; text-align: center; padding: 30px; }
.render-message strong { font-family: inherit; font-weight: 700; font-size: 18px; letter-spacing: -.5px; }
.render-message > span:last-child { font-size: 12px; color: #667085; }
.loading-symbol { height: 35px; width: 35px; margin-bottom: 7px; border: 2px solid #e4e7ec; border-top-color: #667085; border-radius: 50%; animation: spin 1s linear infinite; }
.render-error { color: #793b35; background: #f8f0eade; font-size: 13px; line-height: 1.6; }
.stage-toolbar { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.view-controls { display: flex; border: 1px solid var(--line); padding: 4px; border-radius: 11px; background: #e4e7ec; }
.view-button { border: 0; background: none; border-radius: 7px; color: #667085; padding: 9px 14px; font-size: 11px; font-weight: 500; transition: background .15s, color .15s; }
.view-button:hover { color: var(--ink); }
.view-button.active { color: var(--ink); background: var(--white); box-shadow: 0 2px 5px #20242c08; }
.camera-options { display: flex; align-items: center; gap: 14px; }
.rotation-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 10px; color: #667085; white-space: nowrap; position: relative; }
.rotation-toggle input { position: absolute; left: 0; margin: 0; width: 29px; height: 18px; opacity: 0; cursor: pointer; }
.toggle-track { width: 29px; height: 17px; border-radius: 20px; background: #cbd5e1; position: relative; transition: background .15s; }
.toggle-track:after { content: ''; position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px #20242c13; }
.rotation-toggle input:checked + .toggle-track { background: var(--emerald); }
.rotation-toggle input:checked + .toggle-track:after { transform: translateX(12px); }
.rotation-toggle input:focus-visible + .toggle-track { outline: 2px solid var(--emerald); outline-offset: 3px; }
.icon-button { border: 1px solid #e4e7ec; width: 36px; height: 36px; border-radius: 10px; color: #667085; background: transparent; display: grid; place-items: center; }
.icon-button:hover { background: white; }
.stage-meta { display: flex; align-items: center; gap: 9px; margin: 21px 0 0 2px; }
.prototype-label { font-size: 8px; color: #667085; letter-spacing: .8px; border: 1px solid #cbd5e1; background: #e4e7ec; border-radius: 4px; padding: 4px 5px; }
.stage-meta p { font-size: 10px; line-height: 1.4; color: #667085; margin: 0; }
.status-line { display: flex; align-items: flex-start; gap: 7px; margin: 15px 0 0 3px; min-height: 30px; }
.status-dot { background: #98a2b3; width: 5px; height: 5px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
#status { color: #667085; font-size: 11px; line-height: 1.5; margin: 0; }
.tools-panel { background: var(--white); border: 1px solid #e4e7ec; border-radius: var(--radius); overflow: hidden; box-shadow: 0 3px 16px #20242c03; }
.tools-heading { display: flex; align-items: center; justify-content: space-between; padding: 23px 25px 21px; background: #f8fafc; border-bottom: 1px solid var(--line); }
.eyebrow { font-size: 8px; line-height: 1.2; font-weight: 700; letter-spacing: 1.35px; color: #667085; }
.tools-heading h2 { font-family: inherit; font-size: 21px; letter-spacing: -.65px; margin: 5px 0 0; font-weight: 700; }
.tools-heading > div { min-width: 0; }
.placement-selection-label { display: none; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #667085; font-size: 10px; line-height: 1.3; }
#placement-controls { display: grid; gap: 16px; }
.placement-fine > .range-field + .range-field { margin-top: 12px; }
.design-counter { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e4e7ec; display: grid; place-items: center; background: #f2f4f7; font-size: 11px; color: #667085; }
.tool-section { padding: 20px 25px 21px; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.section-heading h3 { margin: 0; font-size: 12px; font-weight: 700; }
.section-heading > span { font-size: 9px; color: #98a2b3; font-weight: 500; }
.color-fields { display: flex; gap: 12px; }
.color-field { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; color: #667085; border: 1px solid #e4e7ec; border-radius: 8px; padding: 7px 8px 7px 10px; background: #f8fafc; cursor: pointer; }
.color-input-wrap { display: flex; align-items: center; gap: 4px; }
.color-input-wrap svg { width: 11px; height: 11px; }
input[type='color'] { width: 25px; height: 25px; padding: 0; border: 0; background: transparent; border-radius: 5px; cursor: pointer; }
input[type='color']::-webkit-color-swatch-wrapper { padding: 0; }
input[type='color']::-webkit-color-swatch { border: 1px solid #00000009; border-radius: 4px; }
input[type='color']::-moz-color-swatch { border: 1px solid #00000009; border-radius: 4px; }
.swatches { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-left: 2px; }
.color-swatch { border: 1px solid #00000008; width: 26px; height: 26px; border-radius: 50%; padding: 0; position: relative; transition: transform .15s; }
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.active:after { content: ''; position: absolute; inset: -4px; border: 1px solid #667085; border-radius: 50%; }
.swatch-offwhite { background: #eceee8; }.swatch-charcoal { background: #273832; }.swatch-emerald { background: #2c795b; }.swatch-blue { background: #3976cf; }.swatch-rose { background: #bd7e8e; }.swatch-orange { background: #f1986a; }
.pattern-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pattern-button { border: 1px solid #e4e7ec; border-radius: 9px; padding: 9px 5px 8px; background: #f8fafc; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 9px; color: #667085; transition: border-color .15s, background .15s; }
.pattern-button.active { border-color: #667085; background: #f2f4f7; color: #475467; }
.pattern-button:hover { border-color: #98a2b3; }
.pattern-icon { width: 38px; height: 34px; background: #e6ecdb; border-radius: 4px; display: block; overflow: hidden; position: relative; }
.pattern-clean { background: #dde6ce; }
.pattern-diagonal { background: linear-gradient(140deg, #e5eadb 0 35%, #9eb87b 35% 57%, #d6e2c3 57%); }
.pattern-stripes { background: repeating-linear-gradient(90deg, #e2e9d7 0 9px, #a4bb85 9px 15px); }
.pattern-wave:before { content: ''; position: absolute; width: 64px; height: 46px; border-radius: 50%; background: #a4bb85; left: -32px; top: 12px; transform: rotate(-40deg); }
.pattern-wave:after { content: ''; position: absolute; width: 62px; height: 37px; border-radius: 50%; background: #e5eadb; left: 12px; top: 9px; transform: rotate(30deg); }
.text-input { width: 100%; border-radius: 8px; padding: 12px 12px; background: #f8fafc; border: 1px solid #e4e7ec; color: #475467; font-size: 11px; letter-spacing: .65px; font-weight: 600; }
.text-input::placeholder { color: #98a2b3; font-weight: 400; letter-spacing: 0; }
.text-entry-row, .upload-row { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.text-entry-row .text-input { flex: 1 1 auto; min-width: 0; }
.upload-row .upload-zone { flex: 1 1 auto; min-width: 0; }
.compact-control-row { display: flex; align-items: flex-end; gap: 12px; min-width: 0; }
.logo-options { margin-top: 12px; }
.logo-options .logo-size-field { flex: 1 1 auto; min-width: 0; margin: 0; }
.compact-delete { flex: 0 0 44px; width: 44px; min-height: 44px; display: grid; place-items: center; border: 1px solid #e4e7ec; border-radius: 8px; background: #f8fafc; color: #7e625d; padding: 0; }
.compact-delete:hover { border-color: #dfb7aa; background: #fff5f0; color: #963e35; }
.text-options { display: flex; align-items: center; gap: 17px; margin-top: 13px; }
.range-field { min-width: 0; }
.range-field > label, .text-color-field > span, .select-fields label > span { display: block; color: #667085; font-size: 10px; line-height: 1.2; margin-bottom: 9px; }
.text-size-field { flex: 1; }
.range-row { display: flex; align-items: center; gap: 10px; }
.range-row > span { font-size: 9px; color: #98a2b3; min-width: 24px; }
.range-row > span:last-child { text-align: right; }
.range-row .small-a { font-size: 10px; min-width: auto; }
.range-row .large-a { font-size: 15px; min-width: auto; color: #667085; }
input[type='range'] { flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; background: #e4e7ec; border-radius: 10px; height: 3px; cursor: pointer; margin: 8px 0; accent-color: var(--emerald); }
input[type='range']::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #667085; border: 2px solid #fff; box-shadow: 0 0 0 1px #667085; }
input[type='range']::-moz-range-thumb { width: 9px; height: 9px; border-radius: 50%; background: #667085; border: 2px solid #fff; box-shadow: 0 0 0 1px #667085; }
.text-color-field { flex-shrink: 0; }
.text-color-field input { width: 30px; height: 22px; }
.upload-zone { display: flex; align-items: center; gap: 11px; padding: 13px 12px; border: 1px dashed #cbd5e1; border-radius: 9px; background: #f2f4f7; cursor: pointer; }
.upload-zone:hover { background: #f2f4f7; }
.upload-zone > svg { width: 22px; height: 22px; color: #667085; }
.upload-zone strong { display: block; font-size: 11px; font-weight: 600; color: #667085; }
.upload-zone small { display: block; font-size: 8px; color: #98a2b3; margin-top: 4px; line-height: 1.5; }
.upload-plus { margin-left: auto; color: #667085; font-size: 21px; font-weight: 400; }
.logo-footer { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 10px; }
.logo-size-field { margin-top: 15px; }
.logo-footer p { margin: 0; font-size: 8px; line-height: 1.5; color: #98a2b3; }
.text-button { border: 0; background: transparent; padding: 3px 0 3px 6px; color: #667085; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover { color: var(--ink); }
.select-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 16px; }
.select-fields select { width: 100%; border: 1px solid #e4e7ec; border-radius: 7px; background: #f8fafc; color: #667085; padding: 9px 8px; font-size: 10px; }
.placement-section > .range-field + .range-field { margin-top: 13px; }
.tool-hint { margin: 9px 0 12px; color: #667085; font-size: 10px; line-height: 1.5; }
.add-object-button { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; padding: 9px 10px; border: 1px solid #e4e7ec; border-radius: 8px; background: #f2f4f7; color: #475467; font-size: 11px; font-weight: 500; }
.add-object-button:hover { background: #f2f4f7; border-color: #98a2b3; }
.add-object-button > span { font-size: 18px; line-height: 1; }
.add-object-button.compact-add { flex: 0 0 auto; width: auto; margin: 0; padding: 8px 10px; white-space: nowrap; }
.object-field { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
.rotation-field > label { display: flex; justify-content: space-between; align-items: center; }
#rotation-value { color: #475467; font-variant-numeric: tabular-nums; }
.object-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.object-actions > button { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid #e4e7ec; border-radius: 8px; color: #475467; background: #f8fafc; font-size: 10px; text-align: left; }
.object-actions > button:hover { border-color: #98a2b3; background: #f2f4f7; }
.object-actions > button[aria-pressed='true'] { color: #20242c; border-color: #667085; background: #e4e7ec; }
.object-actions > .object-delete:hover { color: #963e35; border-color: #dfb7aa; background: #fff5f0; }
.object-actions svg { width: 18px; height: 18px; }
.tools-footer { padding: 18px 25px 19px; display: flex; align-items: center; flex-direction: column; gap: 6px; background: #f8fafc; }
.reset-design { border: 0; background: transparent; color: #667085; font-size: 10px; display: flex; align-items: center; gap: 6px; padding: 4px; }
.reset-design svg { width: 14px; height: 14px; }
.reset-design:hover { color: var(--ink); }
.tools-footer > span { font-size: 8px; color: #98a2b3; }
.model-attribution { margin: 0; color: #667085; font-size: 10px; line-height: 1.5; text-align: center; }
.model-attribution > span { display: block; }
.model-attribution a { color: inherit; text-underline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* One set of controls serves the desktop sidebar and the mobile bottom panel. */
.mobile-only, .mobile-caption, .close-tools, .mobile-tool-nav, .mobile-actions { display: none; }
.tools-scroll { min-height: 0; }
@media (min-width: 900px) {
  .tools-panel { display: flex; flex-direction: column; max-height: calc(100dvh - 136px); }
  .tools-heading { flex-shrink: 0; }
  .tools-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 #fff; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .app-shell { padding: 0 24px 28px; }
  .app-header { min-height: 95px; }
  .studio-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; }
  .viewport { min-height: 490px; height: 64vh; }
  .stage-toolbar { flex-direction: column; align-items: flex-start; }
  .camera-options { width: 100%; justify-content: space-between; }
  .tool-section { padding-left: 21px; padding-right: 21px; }
}
@media (max-width: 899px) {
  html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
  body { background: #f4f6f8; }
  .app-shell { width: 100%; height: var(--studio-height, 100dvh); min-height: 0; max-width: none; padding: env(safe-area-inset-top, 0px) 0 0; display: flex; flex-direction: column; overflow: hidden; }
  .app-header { flex: 0 0 58px; min-height: 58px; gap: 12px; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); border-bottom: 1px solid #e4e7ec; background: #fff; z-index: 5; }
  .brand { gap: 8px; min-height: 44px; }
  .brand-mark { width: 30px; height: 30px; border-radius: 8px; }
  .brand-mark svg { width: 26px; height: 26px; }
  .brand-name { font-size: 21px; letter-spacing: -.9px; }
  .beta-badge { display: inline-block; font-size: 8px; padding: 5px; margin-left: 3px; color: #667085; }
  .header-actions { display: none; }
  .studio-layout { position: relative; display: flex; flex-direction: column; align-items: stretch; flex: 1 1 auto; min-height: 0; gap: 0; overflow: visible; }
  .stage-column { position: relative; top: auto; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .viewport { flex: 1 1 0; height: auto; min-height: 0; max-height: none; width: 100%; border: 0; border-radius: 0; background: radial-gradient(ellipse at 50% 42%, #fff 0%, #f4f6f8 74%); }
  .viewport-header { top: 12px; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); gap: 8px; }
  .stage-label { gap: 5px; }
  .stage-label h1 { font-size: 10px; }
  .live-dot { width: 5px; height: 5px; }
  .model-chip { font-size: 10px; padding: 5px 9px; background: #ffffffb3; border-color: #e0e5e5; }
  .viewport-caption { bottom: 6px; gap: 5px; font-size: 9px; color: #667085; }
  .viewport-caption svg { width: 15px; height: 15px; }
  .desktop-caption { display: none; }
  .mobile-caption { display: block; }
  .viewport-caption { line-height: 1.4; }
  .viewport-caption small { font-size: 8px; }
  .stage-toolbar { flex: 0 0 48px; margin: 0; min-height: 48px; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); gap: 7px; display: flex; flex-direction: row; align-items: center; background: #f4f6f8; }
  .view-controls { flex: 1 1 auto; min-width: 0; padding: 0; border: 0; background: transparent; gap: 1px; border-radius: 0; }
  .view-button { flex: 1 1 0; min-width: 44px; min-height: 44px; padding: 0 7px; font-size: 11px; border-radius: 8px; color: #667085; }
  .view-button.active { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px #e4e7ec; }
  .camera-options { flex: 0 0 auto; width: auto; gap: 2px; }
  .rotation-toggle { width: 44px; min-height: 44px; display: grid; place-items: center; }
  .rotation-toggle > span:last-child { display: none; }
  .rotation-toggle input { inset: 0; width: 44px; height: 44px; z-index: 1; }
  .toggle-track { width: 28px; height: 17px; }
  .toggle-track:after { width: 11px; height: 11px; }
  .rotation-toggle input:checked + .toggle-track:after { transform: translateX(11px); }
  .icon-button { width: 44px; height: 44px; border: 0; border-radius: 8px; }
  .icon-button svg { width: 18px; height: 18px; }
  .stage-meta { display: none; }
  .status-line { position: absolute; z-index: 4; bottom: 76px; left: 16px; right: 16px; width: fit-content; max-width: calc(100% - 32px); margin: 0 auto; min-height: 0; padding: 8px 12px; border: 1px solid #e4e7ec; border-radius: 10px; background: #ffffffee; box-shadow: 0 3px 15px #20242c09; opacity: 0; pointer-events: none; transition: opacity .15s; }
  .tool-open .status-line { bottom: calc(var(--tool-keyboard-offset, 0px) + var(--tool-sheet-height, 168px) + 8px); }
  .status-line.is-visible { opacity: 1; }
  #status { font-size: 11px; line-height: 1.4; }
  .status-dot { margin-top: 5px; }
  /* The sheet overlays one stable canvas; opening it never changes flex space. */
  .tools-panel {
    position: absolute;
    inset: auto 0 var(--tool-keyboard-offset, 0px);
    display: flex;
    flex-direction: column;
    height: var(--tool-sheet-height, 168px);
    max-height: var(--tool-sheet-height, 168px);
    min-height: 0;
    width: 100%;
    border: 0;
    border-top: 1px solid #e4e7ec;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -7px 25px #20242c09;
    background: #fff;
    overflow: hidden;
    z-index: 6;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 180ms ease, opacity 180ms ease, visibility 0s linear 180ms;
  }
  .tools-panel.is-open { visibility: visible; pointer-events: auto; opacity: 1; transform: translateY(0); transition-delay: 0s; }
  .tools-heading { flex: 0 0 44px; min-height: 44px; gap: 12px; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); background: #fff; border-bottom: 1px solid #f2f4f7; }
  .tools-heading > div { flex: 1 1 auto; }
  .tools-heading h2 { font-family: inherit; font-size: 13px; line-height: 1.35; letter-spacing: -.3px; margin: 0; }
  .object-tool-open .placement-selection-label { display: block; }
  .tools-heading .eyebrow, .design-counter { display: none; }
  .close-tools { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; border: 0; color: #667085; background: transparent; border-radius: 9px; padding: 0 8px; min-height: 44px; font-size: 11px; font-weight: 600; }
  .close-tools span { font-size: 21px; line-height: 1; font-weight: 400; }
  .tools-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overflow-x: hidden; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  [data-tool-section]:not(.tool-active) { display: none; }
  .tool-section { padding: 6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)); border: 0; }
  .tool-section > .section-heading { display: none; }
  .section-heading h3 { font-size: 12px; color: #667085; font-weight: 500; }
  .section-heading > span { display: none; }
  .color-fields { gap: 8px; }
  .color-field { font-size: 11px; padding: 1px 6px 1px 10px; min-height: 48px; gap: 4px; }
  .color-input-wrap { gap: 0; }
  .color-input-wrap svg { display: none; }
  input[type='color'], .text-color-field input { width: 44px; height: 44px; }
  .swatches { justify-content: space-between; gap: 3px; margin-top: 10px; padding: 0 4px; }
  .color-swatch { width: 44px; height: 44px; margin: 0; flex-shrink: 0; }
  .color-swatch::before { content: ''; position: absolute; inset: -2px; }
  .color-swatch.active:after { inset: -3px; }
  .pattern-grid { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
  .pattern-button { flex: 1 0 64px; min-height: 72px; padding: 7px 4px; font-size: 10px; gap: 5px; }
  .pattern-icon { width: 40px; height: 34px; }
  .text-input { min-height: 44px; padding: 9px 10px; font-size: 16px; letter-spacing: .2px; }
  .text-options, .logo-options { margin-top: 8px; align-items: flex-end; gap: 10px; }
  .range-field > label, .text-color-field > span, .select-fields label > span { font-size: 10px; margin-bottom: 0; }
  .range-row { gap: 10px; min-height: 44px; }
  .range-row > span { font-size: 10px; min-width: 30px; }
  input[type='range'] { margin: 0; height: 44px; border-radius: 0; background: linear-gradient(#e4e7ec, #e4e7ec) center / 100% 3px no-repeat; }
  input[type='range']::-webkit-slider-thumb { width: 19px; height: 19px; }
  input[type='range']::-moz-range-thumb { width: 16px; height: 16px; }
  .upload-zone { min-height: 48px; padding: 5px 9px; gap: 8px; }
  .upload-zone strong { font-size: 12px; }
  .upload-zone small { font-size: 10px; margin-top: 0; }
  .logo-footer { margin-top: 3px; }
  .logo-footer p { font-size: 10px; max-width: 220px; }
  .text-button { min-height: 44px; padding: 0 6px; font-size: 11px; }
  .logo-size-field { margin-top: 3px; }
  .placement-link { display: inline-flex; flex: 0 0 auto; width: auto; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 1px solid #e4e7ec; border-radius: 8px; padding: 0 8px; background: #f8fafc; color: #475467; font-size: 10px; text-align: center; }
  .placement-link span { font-size: 18px; }
  .select-fields { gap: 12px; margin-bottom: 12px; }
  .select-fields select { min-height: 44px; padding: 8px 10px; font-size: 16px; }
  .placement-section > .range-field + .range-field { margin-top: 8px; }
  .tool-hint { font-size: 11px; }
  .add-object-button { font-size: 11px; margin-top: 8px; }
  .add-object-button.compact-add { padding: 8px 10px; min-height: 44px; }
  .logo-options .range-row > span { display: none; }
  .logo-options .range-row { gap: 0; }
  .text-options .range-row { gap: 6px; }
  .object-actions { margin-top: 12px; gap: 8px; }
  .object-actions > button { font-size: 12px; min-height: 48px; padding: 10px 12px; }
  .object-field { margin-bottom: 0; }
  /* Every tool keeps the same shallow sheet and stable 3D viewport. */
  .placement-open .tools-heading { flex-basis: 44px; min-height: 44px; gap: 12px; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); }
  .placement-open .tools-heading > div { flex: 1 1 auto; }
  .placement-open .tools-heading h2 { font-size: 13px; line-height: 1.35; }
  .placement-open .placement-selection-label { display: block; }
  .placement-open .close-tools { min-height: 44px; padding: 0 8px; font-size: 11px; background: transparent; flex: 0 0 auto; }
  .placement-open .tools-scroll { overflow-x: hidden; }
  .placement-open .placement-section { padding: 0; }
  .placement-open .placement-section > .section-heading { display: none; }
  .placement-open .placement-pane { margin: 0; padding: 4px max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left)); }
  .placement-open .object-actions { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
  .placement-open .object-actions > button { flex: 0 0 78px; min-height: 72px; padding: 8px 3px; display: flex; flex-direction: column; justify-content: center; gap: 5px; font-size: 10px; line-height: 1.25; text-align: center; }
  .placement-open .object-actions svg { width: 20px; height: 20px; }
  .placement-open .placement-fine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .placement-open .placement-fine > .range-field { margin: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; }
  .placement-open .placement-fine > .range-field > label { flex: 0 0 52px; font-size: 10px; margin: 0; }
  .placement-open .placement-fine .range-row { flex: 1 1 auto; min-width: 0; gap: 0; }
  .placement-open .placement-fine .range-row > span { display: none; }
  .placement-open .placement-fine .rotation-field { grid-column: 1 / -1; }
  .placement-open .placement-fine .rotation-field > label { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
  .tools-footer { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; padding: 0 max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left)); background: #fff; gap: 10px; }
  .model-attribution { font-size: 10px; line-height: 1.4; text-align: left; }
  .reset-design { font-size: 10px; min-height: 44px; padding: 0 5px; white-space: nowrap; }
  .tools-footer > span { font-size: 10px; }
  .mobile-tool-nav { flex: 0 0 66px; min-height: 66px; display: flex; align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; background: #fff; border-top: 1px solid #e4e7ec; z-index: 7; padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); }
  .mobile-tool-nav::-webkit-scrollbar { display: none; }
  .mobile-tool-tab { flex: 1 0 58px; min-height: 66px; min-width: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; border: 0; border-bottom: 3px solid transparent; background: #fff; color: #667085; font-size: 11px; font-weight: 600; }
  .mobile-tool-tab svg { width: 23px; height: 23px; }
  .mobile-tool-tab.is-active { color: var(--ink); background: #f2f4f7; border-bottom-color: #667085; }
  .mobile-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 0 0 auto; border-top: 1px solid #e4e7ec; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left); background: #fff; z-index: 7; }
  .mobile-actions > button { height: 54px; min-height: 44px; min-width: 0; border: 0; border-radius: 0; padding: 0 6px; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 14px; font-weight: 600; line-height: 1.2; }
  .mobile-actions > button > span { min-width: 0; }
  .mobile-actions svg { width: 19px; height: 19px; }
  .mobile-action-save { color: var(--ink); background: #fff; }
  .mobile-action-order { color: var(--ink); background: var(--lime); }
  .render-message { padding: 16px; gap: 6px; }
  .render-message strong { font-size: 15px; }
  .render-message > span:last-child { font-size: 11px; }
}
@media (max-width: 899px) {
  /* This class follows the unoccluded screen, not the software keyboard. */
  :where(.compact-height) .app-header { flex-basis: 48px; min-height: 48px; }
  :where(.compact-height) .brand-mark { width: 27px; height: 27px; }
  :where(.compact-height) .brand-name { font-size: 19px; }
  :where(.compact-height) .viewport-header { top: 7px; }
  :where(.compact-height) .viewport-caption { display: none; }
  :where(.compact-height) .mobile-tool-nav, :where(.compact-height) .mobile-tool-tab { flex-basis: 52px; min-height: 52px; }
  :where(.compact-height) .mobile-tool-tab { gap: 3px; font-size: 10px; }
  :where(.compact-height) .mobile-tool-tab svg { width: 19px; height: 19px; }
  :where(.compact-height) .mobile-actions > button { height: 44px; }
  :where(.compact-height) .pattern-button { min-height: 68px; padding-block: 5px; }
  :where(.compact-height) .stage-toolbar { flex-basis: 44px; min-height: 44px; }
  :where(.compact-height) .tools-heading { flex-basis: 44px; min-height: 44px; }
  :where(.compact-height) .placement-open .tools-heading { flex-basis: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* Current artwork and saved designs share one compact, visual dialog. */
.design-library { width: min(560px, calc(100vw - 32px)); max-height: min(680px, calc(var(--library-viewport-height, 100dvh) * .85)); padding: 0; border: 1px solid #ffffff80; border-radius: 16px; color: var(--ink); background: #fff; box-shadow: 0 24px 80px #20242c30; overflow: hidden; }
.design-library[open] { display: flex; flex-direction: column; }
.design-library::backdrop { background: #20242c38; }
.design-library-heading { flex: 0 0 64px; display: flex; align-items: center; min-height: 64px; padding: 4px 14px 0 22px; border: 0; gap: 2px; }
.design-library-heading h2 { flex: 1; min-width: 0; font-size: 18px; margin: 0; }
.design-library-heading button { flex: 0 0 44px; width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; }
.design-library-heading button:hover { background: #f2f4f7; }
#design-library-close span { font-size: 26px; font-weight: 400; line-height: 1; }
.design-library-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 4px 22px 22px; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.design-library-draft { padding: 16px; border-radius: 12px; background: #f5f7fa; }
.design-library-current { min-width: 0; margin: 0; color: var(--ink); font-size: 14px; font-weight: 550; line-height: 1.4; overflow-wrap: anywhere; }
.design-library-editor-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; }
.design-library-draft-preview.design-preview { position: relative; display: grid; place-items: center; width: 56px; height: 60px; aspect-ratio: auto; overflow: hidden; border-radius: 9px; background: #edf1f6; }
.design-library-draft-preview.design-preview > canvas { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 1; }
.design-library-draft-preview .design-library-preview-loading { position: absolute; inset: 0; display: grid; place-items: center; padding: 5px; color: var(--muted); font-size: 10px; line-height: 1.3; text-align: center; pointer-events: none; }
.design-library-draft-preview.is-ready .design-library-preview-loading { display: none; }
.design-library-name-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin-top: 12px; color: var(--muted); font-size: 12px; font-weight: 500; }
.design-library-name-field input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #dce2eb; border-radius: 8px; color: var(--ink); background: #fff; font-size: 16px; font-weight: 450; }
.design-library-name-field input:focus { border-color: #dce2eb; box-shadow: none; }
.design-library button:focus-visible, .design-library input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.design-library-save-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.design-library-save-actions > button { flex: 0 1 auto; display: flex; align-items: center; justify-content: center; min-width: 0; width: auto; min-height: 44px; padding: 11px 14px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 550; line-height: 1.4; white-space: normal; overflow-wrap: normal; }
.design-library-save-actions > button:hover:not(:disabled) { background: #e9eef6; color: var(--ink); }
.design-library-save-actions > #design-library-save { flex: 1 1 auto; border-color: var(--accent); background: var(--accent); color: #fff; }
.design-library-save-actions > #design-library-save:hover:not(:disabled) { border-color: var(--accent-hover); background: var(--accent-hover); }
.design-library-save-actions > button:disabled, .design-library-save-actions > #design-library-save:disabled { opacity: 1; border-color: var(--line); background: #f2f4f7; color: #667085; cursor: not-allowed; }
.design-library-list-heading { margin: 22px 0 8px; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.4; }
.design-library-status, .design-library-warning { font-size: 12px; line-height: 1.4; margin: 10px 0 0; }
.design-library-status { color: #475467; }
.design-library-status.is-error { color: #953b32; }
.design-library-warning { padding: 8px 10px; border-radius: 8px; background: #fff6e6; color: #775d2d; }
.design-library-list { display: grid; gap: 4px; border: 0; padding: 0; }
.design-library-empty { margin: 0; padding: 18px 12px; border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }
.design-library-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) 18px; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 8px; border: 0; border-radius: 10px; text-align: left; background: #fff; color: var(--ink); }
.design-library-item:hover, .design-library-item[aria-current='true'] { background: #f2f5fa; }
.design-library-item-preview-wrap { position: relative; display: block; width: 56px; height: 60px; overflow: hidden; border-radius: 8px; }
.design-library-item-preview { display: block; width: 56px; height: 60px; border-radius: 8px; background: #edf1f6; object-fit: contain; }
.design-library-item .design-library-item-preview-status { position: absolute; inset: 0; display: grid; place-items: center; padding: 5px; color: var(--muted); font-size: 9px; line-height: 1.3; text-align: center; pointer-events: none; }
.design-library-item-meta { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.design-library-item strong { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); font-size: 14px; font-weight: 550; line-height: 1.4; }
.design-library-item-meta > span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.design-library-item .design-library-item-chevron { color: #98a2b3; font-size: 25px; line-height: 1; text-align: center; }
.design-library-item[aria-current='true'] .design-library-item-chevron { color: var(--accent); }
.design-library-item-preview.is-loading { background: linear-gradient(100deg, #edf1f6, #f8fafc, #edf1f6); }
.design-library-item-preview.is-error { background: #f1f3f6; }
.design-library-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; border-radius: 10px; }
.design-library-row:has(.design-library-item[aria-current='true']) { background: var(--accent-soft); }
.design-library-row .design-library-item { grid-template-columns: 56px minmax(0, 1fr); background: transparent; }
.design-library-item-menu { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 25px; line-height: 1; }
.design-library-item-menu:hover { background: #e9eef6; color: var(--ink); }
.design-library-item-actions { position: absolute; z-index: 4; right: 4px; top: calc(100% - 8px); display: grid; min-width: 160px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 8px 30px #20242c20; }
.design-library-item-actions.opens-up { top: auto; bottom: calc(100% - 8px); }
.design-library-item-actions button { min-height: 44px; border: 0; padding: 9px 12px; border-radius: 6px; background: transparent; color: var(--ink); text-align: left; font-size: 13px; }
.design-library-item-actions button:hover { background: var(--surface); }
.design-library-item-actions button[data-action='delete'] { color: #953b32; }
.design-library-action { padding: 12px 0 4px; }
.design-library-action h3 { margin: 0; color: var(--ink); font-size: 17px; font-weight: 600; }
.design-library-action-source { margin: 6px 0 22px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.design-library-action label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; }
.design-library-action input { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--ink); font-size: 16px; }
#design-library-action-status { color: #953b32; font-size: 12px; line-height: 1.4; }
#design-library-action-status:empty { display: none; }
.design-library-action-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.design-library-action-buttons button { min-height: 44px; border: 0; border-radius: 8px; padding: 10px 14px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 550; }
.design-library-action-buttons #design-library-action-confirm { background: var(--accent); color: #fff; }
.stage-label { min-width: 0; flex: 1 1 auto; }
.stage-design-identity { min-width: 0; }
.stage-design-identity h1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#design-save-status { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.35; }
#design-save-status[data-state='error'] { color: #953b32; }
.model-chip { flex: 0 0 auto; }
.design-library-more { min-height: 44px; border: 0; border-radius: 8px; background: #f2f4f7; color: #475467; font-size: 12px; }
.design-library-toast { position: fixed; z-index: 25; top: 82px; left: 50%; transform: translateX(-50%); max-width: min(480px, calc(100vw - 32px)); width: max-content; padding: 10px 14px; border: 1px solid #cbd5e1; border-radius: 10px; background: #ffffffef; box-shadow: 0 3px 20px #20242c15; color: #475467; font-size: 12px; line-height: 1.4; pointer-events: none; }
.design-library-toast.is-error { color: #953b32; border-color: #eacac3; }
@media (max-width: 899px) {
  .app-header > .header-actions { display: flex; gap: 0; }
  .header-actions > button:not(#open-profile) { display: none; }
  #open-profile { width: 44px; min-height: 44px; padding: 0; border: 0; box-shadow: none; }
  #open-profile svg { width: 23px; height: 23px; }
  #open-profile span { display: none; }
  .design-library-toast { top: 64px; font-size: 11px; }
  .design-library { position: fixed; inset: auto 0 var(--library-viewport-bottom, 0px); width: 100%; max-width: none; max-height: min(70dvh, calc(var(--library-viewport-height, 100dvh) - 24px)); margin: 0; border: 0; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .design-library-heading { flex-basis: 56px; min-height: 56px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .design-library-heading h2 { font-size: 13px; }
  .design-library-scroll { padding: 4px max(16px, env(safe-area-inset-right)) 18px max(16px, env(safe-area-inset-left)); }
  .design-library-draft { padding: 12px; }
  .design-library-editor-row { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
  .design-library-draft-preview.design-preview { width: 48px; height: 52px; }
  .design-library-name-field { margin-top: 10px; }
  .design-library-save-actions { margin-top: 10px; }
  .design-library-save-actions > button { padding-left: 12px; padding-right: 12px; }
  .design-library-item { gap: 12px; padding-left: 4px; padding-right: 4px; }
}

/* Desktop: a tool rail, one contextual panel, and an uninterrupted 3D stage.
   The controls are shared with the mobile sheet above; only their layout changes. */
.desktop-action-note { display: none; }
@media (max-width: 899px) {
  .app-header { order: 0; }
  .studio-layout { order: 1; }
  .mobile-tool-nav { order: 2; }
  .mobile-actions { order: 3; }
  .stage-column { order: 0; }
  .tools-panel { order: 1; }
}
@media (min-width: 900px) {
  html, body { width: 100%; height: 100%; overflow: hidden; }
  body { background: #f4f6f8; }
  .app-shell {
    --desktop-rail-width: 76px;
    --desktop-panel-width: clamp(280px, 22vw, 350px);
    position: relative; display: grid;
    grid-template-columns: var(--desktop-rail-width) var(--desktop-panel-width) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 60px;
    width: 100%; height: 100vh; height: 100dvh; max-width: none;
    min-height: 0; margin: 0; padding: 0; overflow: hidden;
  }
  .studio-layout { display: contents; }
  .app-header { position: absolute; top: 22px; right: 26px; min-height: 0; height: 40px; padding: 0; gap: 0; z-index: 5; pointer-events: none; }
  .app-header .brand { pointer-events: auto; gap: 9px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .brand-mark svg { width: 27px; height: 27px; }
  .brand-name { font-size: 23px; }
  .app-header .header-actions { display: flex; gap: 0; margin-left: 16px; pointer-events: auto; }
  .app-header .header-actions > button:not(#open-profile) { display: none; }

  .mobile-tool-nav { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: stretch; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 0; background: #fff; border-right: 1px solid #e4e7ec; z-index: 4; scrollbar-width: thin; }
  .mobile-tool-tab { flex: 0 0 82px; width: 100%; min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px 3px; border: 0; border-bottom: 1px solid #f2f4f7; background: #fff; color: #667085; font-size: 11px; font-weight: 600; }
  .mobile-tool-tab svg { width: 23px; height: 23px; }
  .mobile-tool-tab:hover { background: #f8fafc; color: var(--ink); }
  .mobile-tool-tab.is-active { color: #475467; background: #f2f4f7; box-shadow: inset 3px 0 0 #667085; }
  .mobile-tool-tab:focus-visible { outline-offset: -4px; }

  .tools-panel { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; width: 100%; height: 100%; max-height: none; min-height: 0; border: 0; border-right: 1px solid #e4e7ec; border-radius: 0; box-shadow: 4px 0 20px #20242c03; z-index: 3; }
  .tools-heading { flex: 0 0 auto; min-height: 82px; padding: 18px 20px; gap: 8px; background: #fff; border-bottom: 1px solid #f2f4f7; }
  .tools-heading > div { flex: 1 1 auto; }
  .tools-heading h2 { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.5px; }
  .tools-heading .eyebrow, .design-counter, .tool-section > .section-heading { display: none; }
  .object-tool-open .placement-selection-label { display: block; margin-top: 5px; font-size: 11px; }
  .object-tool-open .close-tools { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: #667085; font-size: 11px; font-weight: 600; }
  .close-tools span { font-size: 21px; line-height: 1; font-weight: 400; }
  .tools-scroll { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scrollbar-gutter: stable; }
  [data-tool-section]:not(.tool-active) { display: none; }
  .tool-section { flex: 0 0 auto; min-width: 0; padding: 22px 18px; border: 0; }
  .tools-footer { flex: 0 0 auto; gap: 12px; margin-top: auto; padding: 20px 18px; background: #fff; border-top: 1px solid #f2f4f7; }
  .reset-design { min-height: 36px; font-size: 11px; }
  .model-attribution { font-size: 10px; color: #667085; }

  .pattern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pattern-button { min-height: 122px; padding: 16px 8px 12px; gap: 11px; font-size: 12px; }
  .pattern-icon { width: 64px; height: 60px; border-radius: 6px; }
  .pattern-wave:before { width: 95px; height: 76px; left: -49px; top: 18px; }
  .pattern-wave:after { width: 88px; height: 65px; left: 17px; top: 13px; }
  .color-fields { flex-direction: column; gap: 12px; }
  .color-field { flex: 0 0 auto; min-height: 56px; padding: 9px 12px; font-size: 12px; color: #667085; }
  .color-input-wrap { gap: 7px; }
  input[type='color'] { width: 32px; height: 32px; }
  .swatches { justify-content: space-between; gap: 8px; margin-top: 22px; padding: 0 3px; }
  .color-swatch { flex: 0 0 29px; width: 29px; height: 29px; }
  .text-input { min-height: 46px; font-size: 13px; letter-spacing: .2px; }
  .text-entry-row { gap: 7px; }
  .add-object-button.compact-add { min-height: 44px; font-size: 12px; padding: 8px 11px; }
  .text-options { display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: end; gap: 20px 14px; margin-top: 24px; }
  .range-field > label, .text-color-field > span { font-size: 12px; margin-bottom: 12px; color: #667085; }
  .text-color-field input { width: 32px; height: 32px; }
  .range-row { min-height: 32px; gap: 8px; }
  .range-row > span { font-size: 10px; }
  input[type='range'] { height: 32px; margin: 0; border-radius: 0; background: linear-gradient(#e4e7ec, #e4e7ec) center / 100% 3px no-repeat; }
  input[type='range']::-webkit-slider-thumb { width: 15px; height: 15px; }
  input[type='range']::-moz-range-thumb { width: 12px; height: 12px; }
  .placement-link.mobile-only { grid-column: 1 / -1; display: inline-flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border: 1px solid #e4e7ec; border-radius: 8px; background: #f2f4f7; color: #475467; font-size: 12px; }
  .placement-link span { font-size: 17px; }
  .upload-row { flex-direction: column; gap: 12px; }
  .upload-row .upload-zone { flex: 0 0 auto; min-height: 154px; flex-direction: column; justify-content: center; gap: 13px; padding: 22px 14px; text-align: center; }
  .upload-zone > svg { width: 30px; height: 30px; }
  .upload-zone strong { font-size: 14px; }
  .upload-zone small { font-size: 11px; overflow-wrap: anywhere; }
  .upload-row .compact-add { width: 100%; background: #fff; }
  .logo-options { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 20px 14px; margin-top: 24px; }
  .logo-options .logo-size-field { grid-column: 1; grid-row: 1; }
  .logo-options .placement-link { grid-row: 2; }
  .logo-options .compact-delete { grid-column: 2; grid-row: 1; }
  .logo-options .range-row > span { display: none; }
  .placement-section { padding: 0 18px 22px; }
  .object-actions { margin-top: 0; gap: 9px; }
  .object-actions > button { min-height: 74px; flex-direction: column; justify-content: center; gap: 8px; padding: 10px 4px; font-size: 11px; text-align: center; }
  .object-actions svg { width: 20px; height: 20px; }
  .placement-fine > .range-field + .range-field { margin-top: 22px; }

  .stage-column { grid-column: 3; grid-row: 1; position: relative; top: auto; min-width: 0; min-height: 0; height: 100%; }
  .viewport { width: 100%; height: 100%; min-height: 0; max-height: none; border: 0; border-radius: 0; background: radial-gradient(ellipse at 50% 43%, #fff 0%, #f4f6f8 77%); }
  #canvas-container { inset: 0 0 76px; }
  .viewport-header { top: 30px; left: 24px; right: 225px; justify-content: flex-start; }
  .stage-label h1 { font-size: 11px; color: #667085; }
  .model-chip, .stage-meta { display: none; }
  .viewport-caption { bottom: 82px; font-size: 11px; color: #667085; }
  .viewport-caption strong { font-size: 10px; font-weight: 400; }
  .viewport-caption small { font-size: 10px; }
  .viewport-caption svg { width: 16px; height: 16px; }
  .stage-toolbar { position: absolute; inset: 0; display: block; margin: 0; padding: 0; pointer-events: none; }
  .view-controls { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 2px; width: max-content; max-width: calc(100% - 36px); padding: 4px; border: 1px solid #e4e7ec; border-radius: 10px; background: #ffffffbd; box-shadow: 0 2px 10px #20242c05; pointer-events: auto; }
  .view-button { min-height: 38px; min-width: 58px; padding: 8px 14px; font-size: 11px; }
  .view-button.active { background: #f2f4f7; color: #475467; box-shadow: none; }
  .camera-options { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; width: 46px; gap: 0; padding: 1px; border: 1px solid #e4e7ec; border-radius: 9px; background: #fff; box-shadow: 0 3px 14px #20242c10; pointer-events: auto; }
  .rotation-toggle { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border-bottom: 1px solid #f2f4f7; }
  .rotation-toggle input { inset: 0; width: 44px; height: 44px; z-index: 1; }
  .rotation-toggle > span:last-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .camera-options .icon-button { width: 44px; height: 44px; border: 0; border-radius: 6px; background: #fff; }
  .camera-options .icon-button:hover { background: #f2f4f7; }
  .status-line { position: absolute; top: 74px; left: 24px; right: 85px; width: fit-content; max-width: 360px; min-height: 0; margin: 0; gap: 6px; pointer-events: none; }
  #status { font-size: 10px; color: #667085; }
  .status-dot { width: 4px; height: 4px; margin-top: 5px; }

  .mobile-actions { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: stretch; gap: 0; min-width: 0; padding: 0; border-top: 1px solid #e4e7ec; background: #fff; z-index: 8; }
  .mobile-actions > button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 59px; min-height: 44px; padding: 0 25px; border: 0; border-right: 1px solid #e4e7ec; border-radius: 0; font-size: 13px; font-weight: 600; white-space: nowrap; }
  .mobile-action-save { order: 2; background: #fff; color: var(--ink); }
  .mobile-actions > .mobile-action-order { order: 4; min-width: 176px; background: var(--lime); color: var(--ink); border-right: 0; }
  .mobile-actions > button:not(.mobile-action-order):hover { background: #f2f4f7; }
  .mobile-action-order:hover { background: #667085; }
  .mobile-actions svg { width: 19px; height: 19px; }
  .desktop-action-note { order: 3; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-width: 0; margin: 0; padding: 0 24px; color: #667085; font-size: 11px; line-height: 1.5; text-align: right; }
  .desktop-action-note small { display: block; color: #98a2b3; font-size: 9px; }
  .design-library-toast { top: 22px; }
}

/* The design gallery shows the actual garment; colour editing starts with a
   clear list of areas and opens one compact picker at a time. */
.tool-intro { margin: 0 0 16px; color: #667085; font-size: 12px; line-height: 1.55; }
.design-filters { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; }
.design-filter { flex: 0 0 auto; min-height: 34px; padding: 6px 10px; border: 1px solid #e4e7ec; border-radius: 18px; background: #fff; color: #667085; font-size: 11px; line-height: 1.2; white-space: nowrap; }
.design-filter:hover:not(:disabled) { border-color: #98a2b3; background: #f2f4f7; }
.design-filter[aria-pressed='true'] { border-color: #667085; background: #e4e7ec; color: #475467; }
.design-gallery-status { min-height: 16px; margin: 0 0 10px; color: #667085; font-size: 10px; line-height: 1.5; }
.pattern-grid.design-gallery { gap: 10px; }
.pattern-button.design-card { position: relative; min-width: 0; min-height: 0; padding: 0; gap: 0; overflow: hidden; border: 1px solid #e4e7ec; border-radius: 7px; background: #fff; color: #475467; text-align: left; box-shadow: 0 1px 2px #20242c03; }
.pattern-button.design-card[hidden] { display: none; }
.pattern-button.design-card:hover { border-color: #98a2b3; background: #f8fafc; }
.pattern-button.design-card.active { border-color: #667085; background: #fff; color: #475467; box-shadow: inset 0 0 0 1px #667085; }
.design-card:focus-visible { outline-offset: -4px; }
.design-preview { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 240 / 260; overflow: hidden; background: #f6f8fa; }
.design-preview > canvas { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.design-preview.is-ready > canvas { opacity: 1; }
.design-preview-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; color: #667085; font-size: 10px; line-height: 1.4; text-align: center; }
.design-preview.is-ready .design-preview-loading { display: none; }
.design-preview.is-error .design-preview-loading { color: #82624b; }
.design-card-caption { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-height: 38px; padding: 8px 9px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.design-card-caption > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-card-caption .design-card-check { flex: 0 0 17px; width: 17px; height: 17px; color: #667085; visibility: hidden; }
.design-card.active .design-card-check { visibility: visible; }
.pattern-menu-status { margin: 0 0 10px; color: #667085; font-size: 10px; line-height: 1.5; }
.pattern-elements-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pattern-element-card { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 1px solid #e4e7ec; border-radius: 7px; overflow: hidden; background: #fff; color: #475467; text-align: left; }
.pattern-element-card:hover:not(:disabled), .pattern-element-card.is-selected { border-color: #667085; box-shadow: inset 0 0 0 1px #667085; }
.pattern-element-card:focus-visible { outline-offset: -4px; }
.pattern-element-preview { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 2; background-color: #cbd5e1; background-image: linear-gradient(45deg, #e4e7ec 25%, transparent 25%), linear-gradient(-45deg, #e4e7ec 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e4e7ec 75%), linear-gradient(-45deg, transparent 75%, #e4e7ec 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.pattern-element-preview canvas { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.pattern-element-caption { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 36px; gap: 6px; padding: 7px 8px; font-size: 11px; line-height: 1.3; }
.pattern-element-caption > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pattern-element-caption > span:last-child { color: #667085; font-size: 18px; line-height: 1; }
.pattern-opacity-field > label { display: flex; justify-content: space-between; gap: 8px; }
.pattern-opacity-field output { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 899px) {
  .pattern-elements-section .pattern-elements-help { margin: 0 0 3px; font-size: 10px; line-height: 1.4; }
  .pattern-menu-status { margin-bottom: 5px; font-size: 10px; line-height: 1.3; }
  .pattern-elements-grid { display: flex; gap: 8px; padding: 2px 2px 5px; margin: -2px -2px 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
  .pattern-element-card { flex: 0 0 92px; height: 78px; scroll-snap-align: start; }
  .pattern-element-preview { height: 51px; aspect-ratio: auto; }
  .pattern-element-caption { min-height: 25px; padding: 4px 6px; font-size: 9px; }
  .pattern-element-caption > span:last-child { font-size: 15px; }
  .placement-open .placement-fine .rotation-field { grid-column: auto; }
  .pattern-opacity-field > label { min-height: 15px; font-size: 10px; }
}
.model-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.model-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; border: 1px solid #e4e7ec; border-radius: 7px; background: #fff; color: #475467; text-align: left; box-shadow: 0 1px 2px #20242c03; }
.model-card:hover:not(:disabled) { border-color: #98a2b3; background: #f8fafc; }
.model-card.active { border-color: #667085; color: #475467; box-shadow: inset 0 0 0 1px #667085; }
.model-card .design-card-caption { min-height: 48px; font-size: 11px; }
.model-card .design-card-caption > span { overflow: visible; white-space: normal; }
.model-default-badge { position: absolute; top: 7px; right: 7px; padding: 3px 6px; border-radius: 4px; background: #e4e7ec; color: #475467; font-size: 9px; font-weight: 600; line-height: 1.2; }
.color-area-list { border-top: 1px solid #e4e7ec; }
.color-area-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 16px; align-items: center; gap: 8px; width: 100%; min-height: 74px; padding: 10px 2px; border: 0; border-bottom: 1px solid #e4e7ec; background: #fff; color: var(--ink); text-align: left; }
.color-area-row:hover { background: #f2f4f7; }
.color-area-row:focus-visible { outline-offset: -3px; }
.color-area-dot { display: block; flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid #0000001a; border-radius: 50%; background: var(--swatch-color, #2363bd); box-shadow: inset 0 0 0 1px #ffffff25; }
.color-area-label { min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.4; }
.color-area-label small { display: block; margin-top: 3px; color: #667085; font-size: 10px; font-weight: 400; line-height: 1.4; }
.color-area-value { color: #667085; font-size: 10px; font-weight: 400; font-variant-numeric: tabular-nums; }
.color-area-row > svg { width: 16px; height: 16px; color: #667085; }
.color-picker-heading { display: flex; align-items: center; gap: 7px; min-height: 44px; margin-bottom: 12px; }
.color-picker-heading .color-area-dot { flex-basis: 23px; width: 23px; height: 23px; }
.color-picker-heading > strong { min-width: 0; font-size: 12px; line-height: 1.3; }
.color-picker-pane { padding-top: 16px; }
.color-palette { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.palette-swatch { position: relative; min-width: 0; min-height: 40px; aspect-ratio: 1; padding: 0; border: 1px solid #00000016; border-radius: 5px; background: var(--swatch-color); box-shadow: inset 0 0 0 1px #ffffff26; }
.palette-swatch:hover { box-shadow: inset 0 0 0 2px #ffffffb3, 0 0 0 1px #98a2b3; }
.palette-swatch[aria-pressed='true'] { box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px #667085; }
.palette-swatch[aria-pressed='true']::after { content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-50%, -60%) rotate(45deg); filter: drop-shadow(0 1px 1px #20242c) drop-shadow(0 0 1px #20242c); }
.palette-swatch:focus-visible { outline-offset: 3px; }
.custom-color-fields { display: grid; gap: 12px; }
.native-color-field { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 3px 9px; border: 1px solid #e4e7ec; border-radius: 6px; background: #f8fafc; color: #667085; cursor: pointer; }
.native-color-field > input[type='color'] { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 4px; }
.native-color-field > span { font-size: 11px; line-height: 1.3; }
.color-hex-field { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 0 10px; border: 1px solid #e4e7ec; border-radius: 6px; background: #fff; }
.color-hex-field > span { flex: 0 0 auto; color: #667085; font-size: 10px; letter-spacing: .5px; }
.color-hex-field > input { flex: 1 1 auto; min-width: 0; width: 100%; min-height: 44px; padding: 4px 0; border: 0; background: transparent; color: #475467; font-size: 14px; font-variant-numeric: tabular-nums; }
.color-hex-field:focus-within { border-color: #667085; }
.color-hex-field > input[aria-invalid='true'] { color: #9a4536; }
.color-hex-error { margin: 8px 0 0; color: #9a4536; font-size: 11px; line-height: 1.4; }
.color-reset-part { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 14px; padding: 6px 10px; border: 1px solid #e4e7ec; border-radius: 6px; background: #f2f4f7; color: #475467; font-size: 11px; }
.color-reset-part:hover:not(:disabled) { background: #f2f4f7; }

@media (min-width: 900px) {
  .tool-section[data-tool-section='shirts'], .tool-section[data-tool-section='design'], .tool-section[data-tool-section='colors'] { padding: 18px 14px 22px; }
  .pattern-grid.design-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .tool-section[data-tool-section='shirts'] > .tool-intro, .tool-section[data-tool-section='design'] > .tool-intro, .tool-section[data-tool-section='colors'] > .tool-intro { display: none; }
  .design-filters { flex-wrap: nowrap; gap: 5px; margin: 0 0 2px; padding: 0 0 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .design-filters::-webkit-scrollbar { display: none; }
  .design-filter { min-height: 32px; padding: 5px 9px; font-size: 10px; }
  .design-gallery-status { min-height: 14px; margin-bottom: 4px; font-size: 9px; line-height: 1.4; }
  .model-gallery { display: flex; gap: 8px; padding: 2px 2px 6px; margin: -2px -2px 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
  .model-card { flex: 0 0 145px; height: 112px; min-height: 112px; scroll-snap-align: start; }
  .model-card .design-card-caption { min-height: 32px; padding: 5px 7px; font-size: 10px; }
  .model-default-badge { top: 5px; right: 5px; padding: 2px 5px; font-size: 8px; }
  .pattern-grid.design-gallery { display: flex; gap: 8px; padding: 2px 2px 6px; margin: -2px -2px 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
  .pattern-button.design-card { flex: 0 0 82px; height: 86px; min-height: 86px; scroll-snap-align: start; }
  .pattern-button.design-card .design-preview { height: 60px; }
  .design-preview { height: 78px; aspect-ratio: auto; }
  .design-card-caption { min-height: 26px; padding: 4px 7px; font-size: 10px; }
  .design-card-caption .design-card-check { flex-basis: 14px; width: 14px; height: 14px; }
  .design-preview-loading { padding: 5px; font-size: 9px; }
  .color-area-row { grid-template-columns: 28px minmax(0, 1fr) auto 16px; min-height: 48px; padding: 4px 2px; gap: 10px; }
  .color-area-dot { flex-basis: 28px; width: 28px; height: 28px; }
  .color-area-label { font-size: 12px; line-height: 1.25; }
  .color-area-label small { margin-top: 1px; font-size: 9px; line-height: 1.25; }
  .color-area-value { font-size: 10px; }
  .color-picker-heading { min-height: 44px; margin-bottom: 0; }
  .color-picker-heading .color-area-dot { flex-basis: 20px; width: 20px; height: 20px; }
  .color-picker-heading > strong { font-size: 11px; }
  .color-picker-pane { padding-top: 0; padding-bottom: 0; }
  .color-palette { display: flex; gap: 8px; padding: 3px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .color-palette::-webkit-scrollbar { display: none; }
  .palette-swatch { flex: 0 0 44px; width: 44px; min-height: 44px; height: 44px; aspect-ratio: auto; }
  .custom-color-fields { grid-template-columns: minmax(0, 1fr) 126px; gap: 8px; padding: 0 0 2px; }
  .native-color-field, .color-hex-field { min-height: 44px; padding: 2px 7px; gap: 7px; }
  .native-color-field > input[type='color'] { flex-basis: 32px; width: 32px; height: 32px; }
  .native-color-field > span { font-size: 10px; }
  .color-hex-field > input { min-height: 38px; font-size: 16px; }
  .color-hex-field > span { font-size: 9px; }
  .color-hex-error { margin-top: 4px; font-size: 10px; }
  .tool-section[data-tool-section='colors'] { padding-top: 0; padding-bottom: 0; }
  .color-reset-part { margin-top: 5px; font-size: 10px; }
}

/* V23: one UI typeface, a neutral workspace and one interaction accent.
   Garment colours, artwork typography and quality-warning semantics are kept
   separate from these application controls. */
body { font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
button { touch-action: manipulation; }
.brand-mark { background: var(--ink); color: #fff; border-radius: 8px; }
.brand-name { font-family: inherit; font-weight: 750; letter-spacing: -.8px; }
.brand-name > span { font-weight: 450; }
.header-model-credit { color: var(--muted); pointer-events: auto; }
.header-model-credit a { text-underline-offset: 2px; }
.button { min-height: 44px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.button:hover { transform: none; }
.button-primary { background: var(--accent); color: #fff; box-shadow: none; }
.button-primary:hover { background: var(--accent-hover); }
.button-primary svg { color: currentColor; }
.button-secondary { background: #fff; border-color: var(--line); color: var(--ink); }
.button-secondary:hover { background: var(--surface); border-color: #cbd5e1; }
.tools-panel, .mobile-tool-nav, .mobile-actions { border-color: var(--line); }
.tools-heading, .tools-footer { background: #fff; border-color: var(--line); }
.tools-heading h2 { font-family: inherit; font-size: 22px; font-weight: 650; letter-spacing: -.6px; }
.tool-intro { color: var(--muted); font-size: 14px; line-height: 1.55; }
.section-heading h3 { font-size: 14px; font-weight: 600; }
.tool-hint, .pattern-menu-status, .design-gallery-status, .logo-footer p { color: var(--muted); font-size: 12px; }
.placement-selection-label { color: var(--muted); font-size: 12px; }
.range-field > label, .text-color-field > span, .select-fields label > span, .pattern-color-field { color: var(--muted); font-size: 13px; line-height: 1.35; }
.range-row > span { color: var(--muted); font-size: 12px; }
.range-row .large-a { color: var(--ink); }
.text-input, .select-fields select { min-height: 44px; border-color: var(--line); background: #fff; color: var(--ink); font-size: 14px; letter-spacing: 0; font-weight: 450; }
.text-input::placeholder { color: var(--muted); }
.text-input:focus, .select-fields select:focus { border-color: var(--accent); }
.upload-zone { border-color: #cbd5e1; background: var(--surface); border-radius: 8px; }
.upload-zone:hover { background: var(--accent-soft); border-color: var(--accent); }
.upload-zone > svg, .upload-plus { color: var(--accent); }
.upload-zone strong { color: var(--ink); font-size: 14px; font-weight: 600; }
.upload-zone small { color: var(--muted); font-size: 12px; }
.add-object-button, .placement-link, .placement-link.mobile-only, .color-reset-part { min-height: 44px; border-color: var(--line); background: #fff; color: var(--ink); border-radius: 8px; font-size: 13px; font-weight: 550; }
.add-object-button:hover, .placement-link:hover, .color-reset-part:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.add-object-button.compact-add { font-size: 13px; }
.compact-delete { border-color: var(--line); background: #fff; color: var(--muted); }
.text-button, .reset-design, .model-attribution { color: var(--muted); font-size: 12px; }
.reset-design { min-height: 44px; }
.reset-design:hover, .text-button:hover { color: var(--ink); }
.tools-scroll, .pattern-elements-grid, .model-gallery, .pattern-grid.design-gallery, .placement-open .object-actions { scrollbar-color: #cbd5e1 transparent; }
.mobile-tool-tab { color: var(--muted); font-size: 13px; font-weight: 550; border-color: var(--line); }
.mobile-tool-tab:hover { color: var(--ink); background: var(--surface); }
.mobile-tool-tab.is-active { color: var(--accent); background: var(--accent-soft); border-bottom-color: var(--accent); }
.view-controls { background: #fff; border-color: var(--line); border-radius: 8px; }
.view-button { min-height: 44px; color: var(--muted); font-size: 13px; border-radius: 6px; }
.view-button.active { color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.camera-options, .icon-button { color: var(--muted); border-color: var(--line); }
.camera-options .icon-button:hover, .icon-button:hover { background: var(--surface); }
.rotation-toggle { color: var(--muted); font-size: 12px; }
.toggle-track { background: #cbd5e1; }
.rotation-toggle input:checked + .toggle-track { background: var(--accent); }
.live-dot { background: var(--accent); }
.stage-label h1, .model-chip, .viewport-caption, .viewport-caption strong, .viewport-caption small, #status { color: var(--muted); }
.stage-label h1 { font-size: 12px; font-weight: 500; }
.viewport-caption { font-size: 12px; }
.viewport-caption strong, .viewport-caption small { font-size: 11px; }
.status-dot { background: var(--accent); }
.loading-symbol { border-color: var(--line); border-top-color: var(--accent); }
.render-message { background: #f4f6f8ed; }
.render-message strong { color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.4px; }
.render-message > span:last-child { color: var(--muted); font-size: 13px; }
.render-error { background: #fff4f1ed; color: #963e35; }
.editor-outline, .editor-center-guide, .editor-alignment-guide, .model-editor-overlay.is-editing .editor-outline { stroke: var(--accent); }
.model-editor-overlay.is-locked .editor-outline { stroke: var(--muted); }
.editor-handle { color: var(--ink); border-color: var(--line); box-shadow: 0 2px 9px #20242c20; }
.editor-handle:hover, .editor-handle:focus-visible { background: var(--accent-soft); border-color: var(--accent); }
.editor-handle[data-editor-action='scale'] { color: #fff; background: var(--accent); border-color: var(--accent); }
.editor-handle[data-editor-action='scale']:hover { background: var(--accent-hover); }
.editor-selection-label { background: #20242cea; font-size: 11px; }
.editor-alignment-label { background: #eef3ffed; color: var(--accent); border-color: var(--accent-line); font-size: 11px; }
.model-editor-overlay.has-quality-warning .editor-outline { stroke: #a4640b; }
.image-quality-notice, .editor-quality-marker, .editor-quality-close { font-family: inherit; }
.image-quality-notice { border-radius: 8px; }
.image-quality-notice small { font-size: 11px; }
.tool-empty-state { margin: 0; padding: 20px 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.object-actions > button { border-color: var(--line); background: #fff; color: var(--ink); border-radius: 8px; font-size: 13px; }
.object-actions > button:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.object-actions > button[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
#rotation-value { color: var(--ink); }
input[type='range'] { accent-color: var(--accent); background: linear-gradient(var(--line), var(--line)) center / 100% 3px no-repeat; }
input[type='range']::-webkit-slider-thumb { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
input[type='range']::-moz-range-thumb { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.design-filter { min-height: 44px; color: var(--muted); border-color: var(--line); border-radius: 8px; font-size: 12px; }
.design-filter:hover:not(:disabled) { background: var(--surface); border-color: #cbd5e1; }
.design-filter[aria-pressed='true'] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.pattern-button.design-card, .model-card, .pattern-element-card { border-color: var(--line); border-radius: 8px; color: var(--ink); box-shadow: none; }
.pattern-button.design-card:hover, .model-card:hover:not(:disabled) { background: #fff; border-color: var(--accent-line); }
.pattern-button.design-card.active, .model-card.active, .pattern-element-card.is-selected, .pattern-element-card:hover:not(:disabled) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); background: #fff; }
.design-card-caption { min-height: 44px; font-size: 13px; font-weight: 550; }
.model-card .design-card-caption { font-size: 13px; }
.design-card-caption .design-card-check { color: var(--accent); }
.design-preview { background: var(--surface); }
.design-preview-loading { color: var(--muted); font-size: 12px; }
.model-default-badge { background: var(--accent-soft); color: var(--accent); font-size: 11px; padding: 4px 7px; }
.pattern-element-preview { background-color: #d0d5dd; background-image: linear-gradient(45deg, #e4e7ec 25%, transparent 25%), linear-gradient(-45deg, #e4e7ec 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e4e7ec 75%), linear-gradient(-45deg, transparent 75%, #e4e7ec 75%); }
.pattern-element-caption { min-height: 44px; font-size: 13px; }
.pattern-element-caption > span:last-child { color: var(--accent); }
.color-area-list, .color-area-row { border-color: var(--line); }
.color-area-row:hover { background: var(--surface); }
.color-area-label { color: var(--ink); font-size: 14px; font-weight: 550; }
.color-area-label small, .color-area-value { color: var(--muted); font-size: 12px; }
.color-area-row > svg { color: var(--muted); }
.color-picker-heading > strong { font-size: 13px; }
.palette-swatch { border-radius: 6px; }
.palette-swatch:hover { box-shadow: inset 0 0 0 2px #ffffffb3, 0 0 0 1px #98a2b3; }
.palette-swatch[aria-pressed='true'] { box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--accent); }
.color-swatch.active:after { border-color: var(--accent); }
.native-color-field, .color-hex-field { color: var(--ink); border-color: var(--line); border-radius: 8px; background: #fff; }
.native-color-field > span, .color-hex-field > span { color: var(--muted); font-size: 12px; }
.color-hex-field > input { color: var(--ink); }
.color-hex-field:focus-within { border-color: var(--accent); }
.mobile-actions > button { font-size: 14px; font-weight: 550; border-color: var(--line); }
.mobile-action-save { color: var(--ink); background: #fff; }
.mobile-actions > .mobile-action-order { color: #fff; background: var(--accent); }
.mobile-action-order:hover { background: var(--accent-hover); }
.mobile-actions > button:not(.mobile-action-order):hover { background: var(--surface); }
.mobile-actions > .mobile-action-shirt { width: auto; min-width: 0; flex-direction: row; color: var(--ink); background: #fff; box-shadow: none; }
.mobile-actions > .mobile-action-shirt svg { width: 19px; height: 19px; }
.mobile-actions > .mobile-action-shirt.is-active { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 -3px 0 var(--accent); }
.desktop-action-note, .desktop-action-note small { color: var(--muted); font-size: 12px; }
.design-library { border-radius: 12px; }
.design-library::backdrop { background: #20242c38; }
.design-library-heading h2 { font-size: 20px; font-weight: 600; letter-spacing: -.4px; }
.design-library-heading button:hover { background: var(--surface); }
.design-library-empty, .design-library-item span { color: var(--muted); font-size: 12px; }
.design-library-status, .design-library-more { color: var(--accent); font-size: 13px; }
.design-library-item strong { font-size: 14px; }
.design-library-item:hover { background: var(--surface); }
.design-library-item[aria-current='true'] { background: var(--accent-soft); }
.design-library-more { background: var(--accent-soft); }
.design-library-toast { color: var(--ink); border-color: var(--line); font-size: 13px; }
.design-library-status.is-error, .design-library-toast.is-error { color: #953b32; }

@media (min-width: 900px) {
  .model-attribution.header-model-credit { position: absolute; top: 44px; right: 0; width: max-content; max-width: 210px; margin: 0; font-size: 10px; line-height: 1.4; text-align: right; }
  .app-shell { --desktop-rail-width: 86px; --desktop-panel-width: clamp(300px, 24vw, 364px); }
  .mobile-tool-tab { flex-basis: 88px; min-height: 88px; font-size: 12px; border-bottom: 0; }
  .mobile-tool-tab.is-active { box-shadow: inset 3px 0 0 var(--accent); }
  .tools-heading { min-height: 88px; padding: 20px; }
  .tools-heading h2 { font-size: 22px; }
  .tool-section { padding: 22px 20px; }
  .tool-section[data-tool-section='shirts'], .tool-section[data-tool-section='design'], .tool-section[data-tool-section='colors'] { padding: 20px 18px 22px; }
  .placement-section { padding: 0 18px 22px; }
  .object-tool-open .close-tools { color: var(--muted); font-size: 12px; }
  .text-options, .logo-options { margin-top: 20px; }
  .range-row, input[type='range'] { min-height: 44px; }
  .view-button { min-width: 64px; }
  .model-attribution { font-size: 11px; }
}
@media (max-width: 899px) {
  .app-header { flex-basis: 60px; min-height: 60px; border-color: var(--line); }
  .stage-toolbar, .viewport-caption { display: none; }
  .design-filters, .design-gallery-status, .tools-footer { display: none; }
  .model-attribution.header-model-credit { display: inline-flex; flex: 0 1 145px; flex-direction: column; min-width: 0; max-width: 145px; margin: 0; font-size: 9px; line-height: 1.35; text-align: right; overflow-wrap: normal; }
  .app-header > .header-actions { flex: 0 0 auto; }
  .brand-name { font-size: 21px; }
  .tools-panel { border-color: var(--line); border-radius: 12px 12px 0 0; }
  .tools-heading, .placement-open .tools-heading { display: none; }
  .tools-heading h2, .placement-open .tools-heading h2 { font-size: 16px; letter-spacing: -.3px; }
  .close-tools, .placement-open .close-tools { color: var(--muted); font-size: 13px; }
  .placement-selection-label { font-size: 11px; }
  .placement-open .tool-empty-state { padding: 16px max(12px, env(safe-area-inset-right)) 16px max(12px, env(safe-area-inset-left)); }
  .tool-section { padding-top: 8px; padding-bottom: 8px; }
  .mobile-tool-nav { flex-basis: 64px; min-height: 64px; border-color: var(--line); overflow: visible; }
  .mobile-tool-tab { flex: 1 1 0; min-width: 0; min-height: 64px; padding: 6px 2px; gap: 5px; font-size: 12px; line-height: 1.2; }
  .mobile-tool-tab svg { width: 22px; height: 22px; }
  .mobile-actions > button { font-size: 13px; }
  .mobile-actions > .mobile-action-shirt, .mobile-actions > .mobile-action-save { border-right: 1px solid #d3dae5; }
  .mobile-actions > .mobile-action-save { background: var(--surface); font-size: 12px; }
  .mobile-actions > .mobile-action-save > svg { display: none; }
  .mobile-actions > .mobile-action-save > span { max-width: 14ch; white-space: normal; text-align: center; line-height: 1.25; }
  .mobile-actions > .mobile-action-order { font-size: 12px; }
  .mobile-actions > .mobile-action-order > span { max-width: 10ch; white-space: normal; text-align: center; line-height: 1.25; }
  .view-button { padding-inline: 5px; font-size: 12px; }
  .stage-toolbar { background: var(--paper); }
  .viewport-caption strong, .viewport-caption small { font-size: 10px; }
  #status { font-size: 12px; }
  .text-input, .select-fields select, .color-hex-field > input { font-size: 16px; }
  .range-field > label, .text-color-field > span, .select-fields label > span, .pattern-color-field, .pattern-opacity-field > label { font-size: 12px; }
  .upload-zone strong { font-size: 13px; }
  .upload-zone small { font-size: 11px; }
  .upload-zone { min-height: 52px; }
  .placement-link, .placement-link.mobile-only, .add-object-button, .add-object-button.compact-add { font-size: 12px; }
  .placement-open .placement-pane { padding-top: 6px; padding-bottom: 6px; }
  .placement-open .placement-fine > .range-field > label { flex-basis: 64px; font-size: 12px; }
  .placement-open .object-actions > button { flex-basis: 90px; min-height: 56px; padding-block: 6px; gap: 4px; font-size: 12px; }
  .design-filter { min-height: 44px; padding: 6px 10px; font-size: 12px; }
  .design-gallery-status, .pattern-menu-status, .pattern-elements-section .pattern-elements-help { font-size: 11px; line-height: 1.4; }
  .pattern-button.design-card { flex-basis: 112px; height: 114px; min-height: 114px; }
  .pattern-button.design-card .design-preview { height: 78px; }
  .design-card-caption { min-height: 36px; padding: 6px 8px; font-size: 12px; }
  .model-card { flex-basis: 152px; height: 130px; min-height: 130px; }
  .model-card .design-preview { height: 94px; }
  .model-card .design-card-caption { min-height: 36px; font-size: 12px; }
  .model-default-badge { font-size: 10px; padding: 3px 6px; }
  .design-preview-loading { font-size: 11px; }
  .pattern-element-card { flex-basis: 112px; height: 102px; }
  .pattern-element-preview { height: 66px; }
  .pattern-element-caption { min-height: 36px; padding: 6px 8px; font-size: 12px; }
  .color-area-label { font-size: 13px; }
  .color-area-label small, .color-area-value { font-size: 11px; }
  .color-picker-heading > strong { font-size: 12px; }
  .native-color-field > span, .color-hex-field > span { font-size: 11px; }
  .custom-color-fields { grid-template-columns: minmax(0, 1fr) 132px; }
  .tools-footer { grid-template-columns: 110px minmax(0, 1fr); }
  .reset-design, .model-attribution { font-size: 11px; }
  .render-message strong { font-size: 17px; }
  .render-message > span:last-child { font-size: 12px; }
  .design-library-heading h2 { font-size: 18px; }
}
@media (max-width: 899px) {
  :where(.compact-height) .app-header { flex-basis: 48px; min-height: 48px; }
  :where(.compact-height) .mobile-tool-nav, :where(.compact-height) .mobile-tool-tab { flex-basis: 52px; min-height: 52px; }
  :where(.compact-height) .mobile-tool-tab { font-size: 11px; }
  :where(.compact-height) .mobile-tool-nav > .mobile-tool-tab { padding-block: 4px; gap: 3px; }
  :where(.compact-height) .mobile-tool-nav > .mobile-tool-tab svg { width: 19px; height: 19px; }
  :where(.compact-height) .tools-heading, :where(.compact-height) .placement-open .tools-heading { flex-basis: 44px; min-height: 44px; }
  :where(.compact-height) .tools-heading h2, :where(.compact-height) .placement-open .tools-heading h2 { font-size: 14px; }
  :where(.compact-height) .pattern-button.design-card { height: 90px; min-height: 90px; }
  :where(.compact-height) .pattern-button.design-card .design-preview { height: 56px; }
  :where(.compact-height) .design-card-caption { min-height: 34px; }
}
@media (max-width: 359px) {
  .mobile-tool-nav > .mobile-tool-tab { font-size: 11px; }
  .mobile-actions > button { font-size: 12px; }
}

/* The profile shows the signed-in account and its saved designs. */
#open-profile { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: none; pointer-events: auto; }
#open-profile:hover { background: var(--surface); }
#open-profile svg { width: 23px; height: 23px; }
#open-profile > span { display: none; }
.profile-menu { width: min(400px, calc(100vw - 32px)); max-height: min(520px, calc(var(--profile-viewport-height, 100dvh) - 24px)); margin: auto; padding: 0; border: 1px solid #ffffff80; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 24px 80px #20242c30; overflow: hidden; }
.profile-menu[open] { display: flex; flex-direction: column; }
.profile-menu::backdrop { background: #20242c38; }
.profile-heading { flex: 0 0 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 4px 12px 0 20px; }
.profile-heading h2 { min-width: 0; margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.4px; line-height: 1.3; }
#profile-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
#profile-close:hover { background: var(--surface); }
#profile-close > span { font-size: 26px; font-weight: 400; line-height: 1; }
.profile-body { flex: 1 1 auto; min-height: 0; padding: 4px 20px 20px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
#profile-status { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
#profile-status:empty { display: none; }
#profile-status.is-error { color: #953b32; }
.profile-account-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: #f5f7fa; }
.profile-account-avatar { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--accent); }
.profile-account-avatar svg { width: 24px; height: 24px; }
.profile-account-details { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.profile-account-label { color: var(--muted); font-size: 11px; line-height: 1.35; }
#profile-name { color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
#profile-email { color: var(--muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.profile-note { margin: 12px 2px 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.profile-designs { display: grid; grid-template-columns: 22px minmax(0, 1fr) 14px; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 12px; border: 0; border-radius: 8px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 550; line-height: 1.4; text-align: left; }
.profile-designs:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.profile-designs svg { width: 22px; height: 22px; }
.profile-designs > span:last-child { color: var(--muted); font-size: 25px; line-height: 1; text-align: center; }
.profile-sign-in { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 12px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 550; line-height: 1.4; text-align: center; text-decoration: none; }
.profile-sign-in:hover { background: var(--accent-hover); }
.profile-menu button:focus-visible, .profile-menu a:focus-visible, #open-profile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 899px) {
  .profile-menu { position: fixed; inset: auto 0 var(--profile-viewport-bottom, 0px); width: 100%; max-width: none; max-height: min(66dvh, calc(var(--profile-viewport-height, 100dvh) - 24px)); margin: 0; border: 0; border-radius: 12px 12px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .profile-heading { flex-basis: 56px; min-height: 56px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .profile-heading h2 { font-size: 18px; }
  .profile-body { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}

/* Keep history reachable independently of the non-interactive preview heading. */
.viewport { --history-top: 24px; --history-right: 24px; }
.viewport-header { top: var(--history-top); right: calc(var(--history-right) + 158px); min-height: 44px; }
.stage-design-identity { max-width: 100%; }
#design-save-status { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.design-history-controls { position: absolute; top: var(--history-top); right: var(--history-right); z-index: 3; display: flex; gap: 6px; width: 144px; pointer-events: auto; }
.design-history-controls > button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); touch-action: manipulation; }
.design-history-controls > button:hover:not(:disabled) { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.design-history-controls > button:active:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.design-history-controls > button:disabled { color: var(--muted); background: var(--surface); opacity: .45; }
.design-history-controls > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.design-history-controls svg { width: 22px; height: 22px; pointer-events: none; }
@media (min-width: 900px) {
  /* The existing brand and profile occupy the far right of this same row. */
  .viewport { --history-top: 30px; --history-right: 240px; }
}
@media (max-width: 899px) {
  .viewport { --history-top: 12px; --history-right: max(16px, env(safe-area-inset-right)); }
  .viewport-header .model-chip { display: none; }
}
@media (max-width: 899px) {
  :where(.compact-height) .viewport { --history-top: 7px; }
}

/* Position controls share one compact layout; the surrounding panel keeps its
 * existing height. All dimensions below include borders, with no clipped or
 * independently scrolling controls. */
#placement-controls {
  --placement-row-height: 34px;
  --placement-action-height: 40px;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 4px 0;
}
#placement-controls > .placement-pane { min-width: 0; min-height: 0; margin: 0; padding: 0; }
#placement-controls .placement-fine {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: var(--placement-row-height);
  gap: 0 10px;
}
#placement-controls .placement-fine > .range-field {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  height: var(--placement-row-height);
  margin: 0;
}
#placement-controls .placement-fine > .range-field > label {
  display: block;
  min-width: 0;
  margin: 0;
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
}
#placement-controls .placement-fine .rotation-field { grid-column: auto; }
#placement-controls .placement-fine .rotation-field > label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
#placement-controls .range-row {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  min-height: 0;
  height: var(--placement-row-height);
  margin: 0;
}
#placement-controls .range-row > span { display: none; }
#placement-controls input[type='range'] {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
}
#placement-controls .object-actions {
  display: grid;
  /* Compact mobile tool row: small | small | primary | small | small. */
  grid-template-columns: minmax(0, .86fr) minmax(0, .86fr) minmax(0, 1.28fr) minmax(0, .86fr) minmax(0, .86fr);
  gap: 4px;
  height: var(--placement-action-height);
  overflow: visible;
  overscroll-behavior: auto;
}
#placement-controls .object-actions > button {
  position: relative;
  display: grid;
  place-items: center;
  justify-content: center;
  flex: initial;
  gap: 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: var(--placement-action-height);
  padding: 0;
  margin: 0;
}
#placement-controls .object-actions > button:focus-visible { outline-offset: -3px; }
#placement-controls .object-actions svg { width: 20px; height: 20px; }
#placement-controls .object-actions > button > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Garment and template cards stretch with the mobile panel instead of leaving the area
 * below their former fixed-height previews unused. */
@media (max-width: 899px) {
  #tools[data-active-tool='design'] .tools-scroll,
  #tools[data-active-tool='shirts'] .tools-scroll {
    display: flex;
    flex-direction: column;
  }
  #tools[data-active-tool='design'] .tool-section[data-tool-section='design'],
  #tools[data-active-tool='shirts'] .tool-section[data-tool-section='shirts'] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    padding: 6px max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left));
  }
  #design-gallery, #tools .model-gallery {
    display: flex;
    flex: 1 1 0;
    align-items: stretch;
    min-height: 0;
    margin: 0;
    padding: 0 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  #design-gallery > .design-card, #tools .model-gallery > .model-card {
    display: grid;
    grid-template-rows: minmax(0, 1fr) 36px;
    flex: 0 0 112px;
    align-items: stretch;
    height: 100%;
    min-height: 0;
  }
  #tools .model-gallery > .model-card { flex-basis: 152px; }
  #design-gallery .design-preview, #tools .model-gallery .design-preview {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }
  #design-gallery .design-card-caption, #tools .model-gallery .design-card-caption { height: 100%; min-height: 0; }
}
@media (max-width: 899px) {
  :where(.compact-height) #tools[data-active-tool='design'] .tool-section[data-tool-section='design'],
  :where(.compact-height) #tools[data-active-tool='shirts'] .tool-section[data-tool-section='shirts'] { padding-block: 4px; }
  :where(.compact-height) #design-gallery > .design-card, :where(.compact-height) #tools .model-gallery > .model-card { grid-template-rows: minmax(0, 1fr) 30px; }
}

/* All eight colour targets stay together; choosing a colour never navigates
 * away from the overview. The native dialog escapes the panel's clipping. */
#color-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; border-top: 0; }
#color-options .color-area-row { grid-template-columns: 24px minmax(0, 1fr); gap: 6px; min-height: 64px; padding: 6px 0; }
#color-options .color-area-dot { width: 24px; height: 24px; }
#color-options .color-area-label { font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; }
#color-options .color-area-label small { font-size: 9px; line-height: 1.2; margin-top: 2px; }
#color-row-base small, #color-row-accent small, #color-options .color-area-value, #color-options .color-area-row > svg { display: none; }
#color-options .color-area-row[aria-expanded='true'] { background: var(--accent-soft); }
#color-picker {
  position: fixed; inset: auto; top: calc(var(--color-viewport-top, 0px) + var(--color-viewport-height, 100dvh) / 2);
  left: 50%; transform: translate(-50%, -50%); margin: 0;
  width: min(380px, calc(100vw - 24px)); max-height: calc(var(--color-viewport-height, 100dvh) - 24px);
  padding: 12px; overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink);
  box-shadow: 0 18px 60px #20242c30;
}
#color-picker:not([open]) { display: none; }
#color-picker[open] { display: block; }
#color-picker::backdrop { background: #10182820; }
#color-picker .color-picker-heading { min-height: 44px; gap: 8px; margin: 0 0 8px; }
#color-picker .color-picker-heading > strong { flex: 1; font-size: 14px; }
.color-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.color-close:hover { background: var(--surface); color: var(--ink); }
.color-close svg { width: 22px; height: 22px; }
#color-picker #color-palette { display: flex; gap: 8px; min-height: 56px; padding: 4px 3px 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
#color-picker .palette-swatch { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; aspect-ratio: auto; }
#color-picker .color-picker-pane { padding: 8px 0 0; }
#color-picker .custom-color-fields { grid-template-columns: minmax(0, 1fr) 132px; gap: 8px; padding: 0; }
#color-picker .native-color-field, #color-picker .color-hex-field { min-height: 44px; padding: 2px 7px; gap: 7px; }
#color-picker .native-color-field > input[type='color'] { flex-basis: 32px; width: 32px; height: 32px; }
#color-picker .native-color-field > span { font-size: 11px; }
#color-picker .color-hex-field > input { font-size: 16px; }
#color-picker #color-reset-part { min-height: 40px; margin-top: 10px; }
@media (max-width: 899px) {
  #tools[data-active-tool='colors'] .tools-scroll { display: flex; flex-direction: column; }
  #tools[data-active-tool='colors'] .tool-section[data-tool-section='colors'] {
    display: flex; flex: 1 1 0; flex-direction: column; min-height: 0;
    padding: 4px max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left));
  }
  #color-overview { display: flex; flex: 1 1 0; min-height: 0; }
  #color-options { flex: 1 1 0; min-height: 0; grid-template-rows: repeat(4, minmax(30px, 1fr)); overflow-y: auto; }
  #color-options .color-area-row { height: 100%; min-height: 0; padding: 2px 0; }
  #color-options .color-area-label { font-size: 12px; }
  #color-options .color-area-label small { margin-top: 1px; }
}

/* Mobile Position fills the existing panel. The center action spans both
 * button rows; slider rows share the rest for every selected object type. */
@media (max-width: 899px) {
  .placement-open .tools-scroll {
    display: flex;
    flex-direction: column;
  }
  .placement-open .placement-section {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    padding: 0;
  }
  .placement-open #placement-controls {
    --placement-row-height: 30px;
    display: grid;
    flex: 1 1 0;
    grid-template-areas: "actions" "fine";
    grid-template-rows: minmax(0, 1fr) calc(2 * var(--placement-row-height));
    gap: 6px;
    min-height: 0;
    padding: 6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
  }
  .placement-open #placement-controls > .placement-pane {
    min-height: 0;
    margin: 0;
    padding: 0;
  }
  .placement-open #placement-controls .object-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-areas: "center lock backward" "reset lock forward";
    align-items: stretch;
    gap: 6px;
    height: auto;
    overflow: visible;
  }
  #placement-actions > #object-center { grid-area: center; }
  #placement-actions > #object-rotation-reset { grid-area: reset; }
  #placement-actions > #object-lock { grid-area: lock; }
  #placement-actions > #object-backward { grid-area: backward; }
  #placement-actions > #object-forward { grid-area: forward; }
  .placement-open #placement-controls .object-actions > button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: initial;
    gap: 6px;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    padding: 2px 4px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.15;
  }
  .placement-open #placement-controls .object-actions svg { width: 22px; height: 22px; }
  .placement-open #placement-controls #object-lock svg { width: 26px; height: 26px; }
  .placement-open #placement-controls #object-lock > span {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: nowrap;
    font-weight: 600;
  }
  .placement-open #placement-controls .placement-fine {
    grid-area: fine;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 0 12px;
    height: 100%;
  }
  .placement-open #placement-controls .placement-fine > .range-field {
    grid-template-columns: 56px minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    gap: 4px;
  }
  .placement-open #placement-controls .placement-fine > .range-field > label {
    font-size: 11px;
    line-height: 1.15;
  }
  .placement-open #placement-controls .range-row,
  .placement-open #placement-controls input[type='range'] { height: 100%; min-height: 0; }
}
@media (max-width: 899px) {
  :where(.compact-height) .placement-open #placement-controls {
    --placement-row-height: 22px;
    gap: 3px;
    padding-block: 4px;
  }
  :where(.compact-height) .placement-open #placement-controls .object-actions { gap: 4px; }
  :where(.compact-height) .placement-open #placement-controls #object-lock svg { width: 22px; height: 22px; }
  :where(.compact-height) .placement-open #placement-controls .placement-fine > .range-field > label { font-size: 10px; }
}
@media (min-width: 480px) and (max-width: 899px) {
  :where(.compact-height) .placement-open #placement-controls {
    grid-template-areas: "actions fine";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: 12px;
  }
}

/* Text uses three direct rows; transforms remain available on the shirt. */
#text-tools.tool-active { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }
#text-tools .text-role-row, #text-tools .text-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
  margin: 0;
  align-items: stretch;
}
#text-tools .text-role-button, #text-tools .text-style-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 44px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
}
#text-tools .text-role-button { font-size: 12px; }
#text-tools .text-role-button[aria-pressed='true'], #text-tools #text-outline[aria-pressed='true'] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
#text-tools .text-role-button:hover:not(:disabled), #text-tools .text-style-button:hover:not(:disabled) { border-color: var(--accent); }
#text-tools .text-entry-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 6px; min-width: 0; }
#text-tools .text-input { min-width: 0; min-height: 44px; height: 44px; padding: 6px 8px; }
#text-tools #text-font::after { content: ''; flex: 0 0 6px; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
#text-tools #text-outline[aria-pressed='true'] { box-shadow: inset 0 -2px 0 var(--text-outline-color, var(--accent)); }
#text-tools .text-size-field { margin-top: 8px; }
#text-tools .text-color-field > span { margin: 0; color: var(--ink); font-size: 13px; }
#text-tools #add-text { width: 100%; min-width: 0; min-height: 44px; height: 44px; margin: 0; padding: 4px; white-space: nowrap; font-size: 12px; color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
#text-tools #add-text:hover:not(:disabled) { background: #e2eaff; }
#logo-upload-label[aria-disabled='true'] { opacity: .5; cursor: not-allowed; }
#logo-tools:has(#logo-upload:focus-visible) #logo-upload-label { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 899px) {
  #tools[data-active-tool='text'] .tools-scroll,
  #tools[data-active-tool='logo'] .tools-scroll { display: flex; flex-direction: column; }
  #text-tools.tool-active, #logo-tools.tool-active {
    flex: 1 1 0;
    min-height: 0;
    padding: 6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
  }
  #text-tools.tool-active {
    display: grid;
    grid-template-areas: "roles" "entry" "options";
    grid-template-rows: repeat(3, 44px);
    align-content: center;
    gap: 6px;
  }
  #text-tools .text-role-row { grid-area: roles; }
  #text-tools .text-entry-row { grid-area: entry; }
  #text-tools .text-input { font-size: 16px; }
  #text-tools .text-options { grid-area: options; }
  #text-tools .text-size-field { display: none; }
  #logo-tools.tool-active { display: flex; flex-direction: column; gap: 6px; }
  #logo-tools .upload-row { flex: 1 1 0; min-height: 44px; }
  #logo-tools .upload-zone {
    flex: 1 1 0;
    min-height: 44px;
    justify-content: center;
    gap: 12px;
    padding: 6px 12px;
  }
  #logo-tools .upload-zone > svg { width: 26px; height: 26px; }
  #logo-tools .upload-zone strong { font-size: 14px; }
  #logo-tools .upload-zone small { font-size: 11px; margin-top: 2px; }
  #logo-tools #add-mark, #logo-tools .logo-options { display: none; }
}
@media (max-width: 899px) {
  :where(.compact-height) #logo-tools.tool-active { padding-block: 4px; gap: 4px; }
  :where(.compact-height) #text-tools.tool-active { padding-block: 1px; gap: 1px; }
}
@media (min-width: 480px) and (max-width: 899px) {
  :where(.compact-height) #text-tools.tool-active {
    grid-template-areas: "roles roles" "entry options";
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, 44px);
    padding-block: 6px;
    gap: 6px;
  }
  :where(.compact-height) #text-tools .text-style-button,
  :where(.compact-height) #text-tools .text-color-field > span { font-size: 12px; }
}

/* Text opens the same palette dialog as garment colours. */
#text-color { background: #fff; text-align: left; }
#text-color:hover:not(:disabled) { border-color: var(--accent); }
#text-tools .text-color-dot {
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #20242c26;
  background: var(--text-color, #f1f4f8);
}
.text-style-dialog { width: min(360px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); overflow: auto; overscroll-behavior: contain; box-shadow: 0 18px 60px #20242c30; }
.text-style-dialog::backdrop { background: #10182820; }
.text-style-dialog-heading { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 8px; margin-bottom: 8px; }
.text-style-dialog-heading h2 { margin: 0; font-size: 16px; font-weight: 600; }
.text-style-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 26px; }
.text-style-close:hover { color: var(--ink); background: var(--surface); }
.text-font-options { display: grid; gap: 6px; }
.text-font-option { min-width: 0; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); text-align: left; font-size: 20px; }
.text-font-option[aria-pressed='true'] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.text-font-option:hover:not(:disabled) { border-color: var(--accent); }
.text-font-status { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.text-outline-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 8px; cursor: pointer; font-size: 14px; }
.text-outline-toggle input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.text-outline-color { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 14px; }
.text-outline-color-dot { flex: 0 0 24px; width: 24px; height: 24px; border: 1px solid #20242c26; border-radius: 50%; background: var(--text-outline-color, #20242c); }
.text-outline-strength { margin-top: 12px; }
.text-outline-strength > label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.text-outline-strength output { color: var(--muted); }
#text-outline-width { display: block; width: 100%; height: 44px; min-height: 44px; margin: 0; }

/* A selected pattern keeps its appearance beside the pattern gallery. */
#pattern-appearance {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-top: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  background: #fff;
}
#pattern-color {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 4px 8px 4px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
}
#pattern-color:hover:not(:disabled) { border-color: var(--accent); }
#pattern-tools .pattern-color-dot {
  display: block;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid #20242c26;
  border-radius: 50%;
  background: var(--pattern-color, #f1f4f8);
}
#pattern-appearance .pattern-opacity-field { min-width: 0; margin: 0; }
#pattern-appearance .pattern-opacity-field > label {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
  min-height: 16px;
  margin: 0;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}
#pattern-appearance .range-row,
#pattern-appearance input[type='range'] { min-width: 0; min-height: 32px; height: 32px; margin: 0; }
#pattern-appearance input[type='range'] { width: 100%; }

/* Uploads are reusable assets, displayed beside the upload action. */
.graphic-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 380px; overflow: auto; padding: 2px; }
.graphic-library-items { display: contents; }
.graphic-library .upload-zone, .uploaded-graphic-card, .uploaded-graphic-more {
  min-width: 0;
  min-height: 132px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  overflow: hidden;
}
.graphic-library .upload-zone { flex-direction: column; justify-content: center; gap: 8px; padding: 8px; text-align: center; border-style: dashed; background: var(--accent-soft); }
.graphic-library .upload-zone strong { font-size: 12px; }
.graphic-library .upload-zone small { font-size: 10px; }
.uploaded-graphic-card { display: grid; grid-template-rows: minmax(0, 1fr) 30px; padding: 0; text-align: left; }
.uploaded-graphic-preview {
  position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden;
  background-color: #cbd5e1;
  background-image: linear-gradient(45deg, #e4e7ec 25%, transparent 25%), linear-gradient(-45deg, #e4e7ec 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e4e7ec 75%), linear-gradient(-45deg, transparent 75%, #e4e7ec 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.uploaded-graphic-preview > img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; padding: 6px; }
.uploaded-graphic-fallback { padding: 5px; color: #475467; font-size: 10px; line-height: 1.25; text-align: center; }
.uploaded-graphic-caption { display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: 4px; padding: 4px 6px; font-size: 11px; line-height: 1.2; }
.uploaded-graphic-caption > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uploaded-graphic-caption > span:last-child { color: var(--accent); font-size: 17px; }
.uploaded-graphic-card:hover:not(:disabled), .uploaded-graphic-card.is-selected { border-color: var(--accent); }
.uploaded-graphic-card.is-selected { box-shadow: inset 0 0 0 1px var(--accent); }
.uploaded-graphic-card:focus-visible, .uploaded-graphic-more:focus-visible { outline-offset: -3px; }
.uploaded-graphic-more { padding: 8px; color: var(--accent); font-size: 12px; }
.graphic-library-status:not(.sr-only) { margin: 4px 0 0; color: #8b3d23; font-size: 12px; line-height: 1.3; }
@media (max-width: 899px) {
  #tools[data-active-tool='patterns'] .tools-scroll { display: flex; flex-direction: column; }
  #pattern-tools.tool-active { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; padding: 6px max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left)); }
  #pattern-elements, #logo-tools .graphic-library {
    display: flex; flex: 1 1 0; align-items: stretch; gap: 8px;
    min-height: 0; max-height: none; margin: 0; padding: 0 0 4px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
  }
  #pattern-elements > .pattern-element-card,
  #logo-tools .graphic-library .upload-zone,
  #logo-tools .uploaded-graphic-card, #logo-tools .uploaded-graphic-more {
    flex: 0 0 112px; height: 100%; min-height: 0; scroll-snap-align: start;
  }
  #pattern-elements > .pattern-element-card { display: grid; grid-template-rows: minmax(0, 1fr) 28px; }
  #pattern-elements .pattern-element-preview { min-height: 0; height: 100%; aspect-ratio: auto; }
  #pattern-elements .pattern-element-caption { min-height: 0; height: 100%; padding: 4px 6px; font-size: 10px; }
  #pattern-appearance {
    position: static;
    flex: 0 0 44px;
    grid-template-columns: 104px minmax(0, 1fr);
    min-height: 44px;
    height: 44px;
    margin-top: 6px;
    padding: 0;
    border: 0;
  }
  #pattern-color { height: 44px; }
  #pattern-tools .pattern-color-dot { flex-basis: 28px; width: 28px; height: 28px; }
  #pattern-appearance .pattern-opacity-field {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    height: 44px;
  }
  #pattern-appearance .pattern-opacity-field > label { flex-direction: column; align-items: flex-start; gap: 2px; }
  #pattern-appearance .range-row,
  #pattern-appearance input[type='range'] { min-height: 44px; height: 44px; }
  #logo-tools .graphic-library { min-height: 52px; }
  #logo-tools .graphic-library .upload-zone { gap: 4px; padding: 4px 6px; }
  #logo-tools .graphic-library .upload-zone > svg { width: 20px; height: 20px; }
  #logo-tools .graphic-library .upload-zone strong { font-size: 11px; line-height: 1.2; }
  #logo-tools .graphic-library .upload-zone small { font-size: 9px; margin-top: 3px; }
  #logo-tools .uploaded-graphic-card { grid-template-rows: minmax(0, 1fr) 25px; }
  #logo-tools .uploaded-graphic-caption { font-size: 10px; }
}
@media (max-width: 899px) {
  :where(.compact-height) #pattern-tools.tool-active { padding-block: 4px; }
  :where(.compact-height) #pattern-elements > .pattern-element-card { grid-template-rows: minmax(0, 1fr) 24px; }
  :where(.compact-height) #logo-tools .graphic-library .upload-zone small { display: none; }
}
@media (min-width: 480px) and (max-width: 899px) {
  /* Keep previews tall in the 138px landscape sheet, including its tab row. */
  :where(.compact-height) #pattern-tools.tool-active:has(#pattern-appearance:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
  }
  :where(.compact-height) #pattern-tools.tool-active:has(#pattern-appearance:not([hidden])):has(#pattern-menu-status:not(.sr-only)) { grid-template-rows: auto minmax(0, 1fr); }
  :where(.compact-height) #pattern-tools #pattern-menu-status:not(.sr-only) { grid-column: 1 / -1; margin: 0; }
  :where(.compact-height) #pattern-appearance { align-self: center; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; margin-top: 0; }
  :where(.compact-height) #pattern-color { padding-inline: 8px; font-size: 12px; }
  :where(.compact-height) #pattern-appearance .pattern-opacity-field { grid-template-columns: minmax(0, 1fr); grid-template-rows: 14px 30px; gap: 0; }
  :where(.compact-height) #pattern-appearance .pattern-opacity-field > label { flex-direction: row; align-items: center; min-height: 0; }
  :where(.compact-height) #pattern-appearance .range-row,
  :where(.compact-height) #pattern-appearance input[type='range'] { min-height: 30px; height: 30px; }
}

/* The account expands below the existing header without resizing the studio. */
body.profile-open .app-header { z-index: 102; }
.profile-backdrop { position: fixed; z-index: 100; inset: var(--profile-top, 58px) 0 0; background: #20242c33; }
.profile-menu { position: fixed; z-index: 101; inset: var(--profile-top, 58px) var(--profile-right, 16px) auto auto; width: min(390px, calc(100vw - 32px)); max-width: none; max-height: var(--profile-available-height, calc(100dvh - 70px)); margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 0 0 14px 14px; box-shadow: 0 18px 40px #20242c24; }
.profile-menu[open] { animation: profile-reveal 160ms ease-out; }
.profile-menu.has-section { width: min(680px, calc(100vw - 32px)); }
.profile-heading { flex: 0 0 auto; min-height: 52px; padding: 4px 8px 4px 16px; border-bottom: 1px solid var(--line); }
.profile-heading h2 { flex: 1; font-size: 18px; letter-spacing: -.2px; }
#profile-back { display: grid; place-items: center; width: 40px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 29px; }
.profile-body { padding: 12px 16px 16px; }
.profile-account-card { gap: 10px; padding: 4px 8px 12px; margin-bottom: 4px; border-radius: 0; background: transparent; border-bottom: 1px solid var(--line); }
.profile-account-avatar { flex-basis: 36px; width: 36px; height: 36px; background: var(--surface); }
.profile-account-label { display: none; }
.profile-designs { min-height: 48px; padding: 10px 8px; }
.profile-secondary { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; }
.profile-secondary a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px; color: var(--muted); text-decoration: none; font-size: 13px; }
.profile-secondary a:hover { color: var(--accent); }
.customer-panel { display: grid; gap: 16px; min-width: 0; font-size: 14px; line-height: 1.5; }
.customer-panel h3 { margin: 2px 0 0; font-size: 16px; line-height: 1.4; }
.customer-panel h4 { margin: 0; font-size: 14px; }
.customer-panel p { margin: 0; }
.customer-list { display: grid; gap: 10px; min-width: 0; }
.customer-card { display: grid; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow-wrap: anywhere; }
.customer-card > button { text-align: left; }
.customer-form { display: grid; gap: 14px; min-width: 0; }
.customer-form fieldset { display: grid; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; margin: 0; }
.customer-form legend { padding: 0 5px; font-weight: 600; }
.customer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.customer-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12px; font-weight: 500; color: var(--muted); }
.customer-panel input:not([type=checkbox]), .customer-panel select, .customer-panel textarea { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 10px; border: 1px solid #dce2eb; border-radius: 8px; color: var(--ink); background: #fff; font-family: inherit; font-size: 16px; line-height: 1.4; }
.customer-panel textarea { resize: vertical; }
.customer-panel input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--accent); margin: 0; }
.customer-panel label:has(input[type=checkbox]) { display: flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ink); font-size: 13px; font-weight: 450; }
.customer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.customer-button, .customer-panel button { display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-height: 44px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 550; line-height: 1.4; cursor: pointer; text-decoration: none; overflow-wrap: anywhere; }
.customer-button-primary, .customer-panel button.customer-button-primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.customer-button-danger, .customer-panel button.customer-button-danger { color: #a12d38; }
.customer-panel button:disabled { cursor: wait; opacity: .55; }
.customer-panel button:hover:not(:disabled) { border-color: var(--accent); }
.customer-panel :is(button,input,select,textarea,a,summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.customer-muted { color: var(--muted); font-size: 12px; }
.customer-notice { padding: 10px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 13px; overflow-wrap: anywhere; }
.customer-notice.is-error { background: #fff2f1; color: #9a332f; }
.customer-empty { padding: 18px 12px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 13px; }
.customer-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.customer-reply { padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); font-size: 13px; }
.customer-faq { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.customer-faq summary { min-height: 40px; display: list-item; align-content: center; font-weight: 550; cursor: pointer; }
.customer-faq p { padding-top: 6px; font-size: 13px; color: var(--muted); }
.customer-panel [role=tablist], .customer-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.customer-panel [aria-selected=true], .customer-panel [aria-pressed=true] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.customer-panel table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.customer-panel th, .customer-panel td { padding: 8px 4px; text-align: left; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
@keyframes profile-reveal { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 899px) {
  .profile-menu, .profile-menu.has-section { inset: var(--profile-top, 58px) 0 auto; width: 100%; max-height: var(--profile-available-height, calc(100dvh - 66px)); border: 0; border-radius: 0 0 14px 14px; }
  .profile-body { padding: 12px max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .customer-card { padding: 12px; }
  .customer-grid { gap: 10px; }
}
@media (max-width: 359px) { .customer-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .profile-menu[open] { animation: none; } }

/* Teams use aligned rows; the shirt preview remains untouched behind the panel. */
.team-list-heading, .team-section-heading, .team-editor-header, .team-link-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.team-list-heading > :first-child, .team-section-heading > :first-child, .team-editor-header > :first-child, .team-link-heading > :first-child { min-width: 0; }
.team-list-heading > button, .team-section-heading > button, .team-editor-header > button, .team-link-heading > button { flex-shrink: 0; }
.team-list, .team-link-list { display: grid; gap: 0; min-width: 0; border-top: 1px solid var(--line); }
.team-list:empty, .team-link-list:empty { display: none; }
.customer-panel .team-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; gap: 12px; width: 100%; min-height: 52px; padding: 4px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; text-align: left; }
.customer-panel .team-list-row:hover:not(:disabled) { background: var(--accent-soft); }
.team-list-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: 550; }
.team-list-count { white-space: nowrap; color: var(--muted); font-size: 12px; font-weight: 400; }
.team-chevron { color: var(--muted); font-size: 23px; line-height: 1; text-align: center; }
.team-editor { gap: 8px; }
.team-name-field { display: block; flex: 1; min-width: 0; }
.customer-panel input.team-name-input { min-height: 44px; padding: 8px 6px; border-color: transparent transparent var(--line); border-radius: 0; font-size: 16px; font-weight: 600; text-overflow: ellipsis; }
.customer-panel input.team-name-input:focus { border-color: var(--accent); border-radius: 4px; background: var(--accent-soft); outline-offset: 0; }
.customer-panel .team-options-button, .customer-panel .team-link-more { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 4px; border: 0; background: transparent; font-size: 22px; font-weight: 600; }
.customer-panel .team-options-button[aria-expanded=true], .customer-panel .team-link-more[aria-expanded=true] { background: var(--accent-soft); color: var(--accent); }
.team-disclosure-chevron { display: block; flex: 0 0 10px; width: 10px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform 150ms ease; pointer-events: none; }
.team-options-button[aria-expanded=true] .team-disclosure-chevron { transform: translateY(2px) rotate(225deg); }
.customer-panel .team-editor-header > .customer-button-danger { padding-inline: 8px; white-space: nowrap; font-size: 12px; }
.team-settings-panel { padding: 8px; background: var(--surface); border-radius: 6px; }
.team-settings-panel .customer-card { border: 0; padding: 4px; background: transparent; }
.team-section-heading { margin-top: 4px; }
.team-section-heading h4 { white-space: nowrap; }
.customer-panel .team-section-heading > button { padding: 8px 2px; border-color: transparent; background: transparent; color: var(--accent); font-size: 13px; }
.customer-panel table.team-roster-table { width: 100%; table-layout: fixed; border-collapse: collapse; border-top: 1px solid var(--line); }
.team-roster-number { width: 52px; }
.team-roster-size { width: 76px; }
.team-roster-action { width: 44px; }
.customer-panel .team-roster-table th { padding: 8px 6px; color: var(--muted); font-weight: 500; font-size: 12px; white-space: nowrap; }
.customer-panel .team-roster-table td { padding: 2px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.customer-panel .team-roster-table .team-player-row > td + td { border-left: 1px solid #edf0f5; }
.customer-panel .team-roster-table th:nth-child(2), .customer-panel .team-roster-table th:nth-child(3), .team-roster-table td:nth-child(2) input, .team-roster-table td:nth-child(3) input { text-align: center; }
.customer-panel input.team-cell-input { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 8px 6px; border: 1px solid transparent; border-radius: 4px; background: transparent; font-size: 16px; line-height: 1.4; text-overflow: ellipsis; }
.customer-panel .team-roster-table td:nth-child(3) input.team-cell-input { padding-inline: 3px; }
.customer-panel input.team-cell-input:hover:not(:disabled) { background: var(--surface); }
.customer-panel input.team-cell-input:focus { position: relative; z-index: 1; background: var(--accent-soft); border-color: var(--accent); outline-offset: -1px; }
.customer-panel input.team-cell-input:disabled { opacity: 1; color: var(--muted); background: var(--surface); }
.customer-panel .team-roster-table .team-player-options > td { padding: 6px 8px; background: var(--surface); }
.team-player-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; }
.customer-panel .team-player-actions > label.customer-checkbox { flex: 0 1 auto; gap: 5px; min-width: 0; min-height: 44px; white-space: nowrap; font-size: 12px; line-height: 1.25; }
.customer-panel .team-player-actions input[type=checkbox] { flex: 0 0 18px; width: 18px; height: 18px; }
.customer-panel .team-player-actions .team-player-remove { flex: 0 0 44px; width: 44px; min-width: 44px; min-height: 44px; margin-left: auto; padding: 0; border-color: transparent; background: transparent; color: #a12d38; }
.team-player-remove svg { width: 18px; height: 18px; pointer-events: none; }
.team-savebar { position: sticky; bottom: -16px; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
.team-savebar .customer-button-primary { flex: 1; }
.team-link-heading h3 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.team-link-row { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 52px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.team-link-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.customer-panel button.team-link-name { display: block; padding: 8px 2px; border: 0; border-radius: 0; text-align: left; font-size: 14px; }
.team-link-meta { flex-shrink: 0; white-space: nowrap; color: var(--muted); font-size: 12px; }
.team-link-actions { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 8px; border-bottom: 1px solid var(--line); background: var(--surface); }
.customer-panel .team-link-actions button { border: 0; padding: 8px; background: transparent; font-size: 12px; }
.team-link-assign { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.team-link-assign > label { flex: 1; min-width: 0; }
.team-link-assign > button { flex-shrink: 0; }
.team-designs-inline { display: grid; gap: 8px; min-width: 0; }
.customer-panel table.team-link-table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; border-top: 1px solid var(--line); }
.team-link-table col:nth-child(2) { width: 44px; }
.team-link-table col:nth-child(3) { width: 64px; }
.team-link-table .team-link-inline-row { display: table-row; }
.customer-panel .team-link-table th { padding: 6px 0; color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.customer-panel .team-link-table th:first-child { padding-left: 2px; }
.customer-panel .team-link-table td { padding: 2px 0; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.customer-panel .team-link-table th:not(:first-child), .customer-panel .team-link-table td:not(:first-child) { text-align: center; }
.customer-panel .team-link-table button.team-link-name { display: block; width: 100%; max-width: 100%; min-width: 0; height: 44px; min-height: 44px; padding: 0 6px 0 2px; border: 0; border-radius: 0; background: transparent; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; line-height: 1.4; }
.customer-panel .team-link-table .team-link-assignment, .customer-panel .team-link-table .team-link-order { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); vertical-align: middle; }
.customer-panel .team-link-table .team-link-order { color: var(--accent); }
.customer-panel .team-link-table .team-link-assignment[aria-pressed=true] { background: transparent; color: var(--accent); }
.team-link-assignment-mark { position: relative; display: block; flex: 0 0 18px; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 4px; pointer-events: none; }
.team-link-assignment[aria-pressed=true] .team-link-assignment-mark { border-color: var(--accent); background: var(--accent); }
.team-link-assignment[aria-pressed=true] .team-link-assignment-mark::after { content: ''; position: absolute; top: 1px; left: 5px; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.team-link-order svg { width: 20px; height: 20px; pointer-events: none; }
@media (max-width: 359px) {
  .team-editor-header { gap: 4px; }
  .team-editor-header > button:not(.team-options-button) { padding: 8px; font-size: 12px; }
  .team-roster-number { width: 46px; }
  .team-roster-size { width: 70px; }
}
@media (prefers-reduced-motion: reduce) { .team-disclosure-chevron { transition: none; } }

/* Text roles share the existing compact row; preview controls are an overlay. */
#text-input[readonly] { color: var(--muted); background: var(--surface); }
/* Only the controls receive pointer events; the space above stays draggable.
   The bounded flex column keeps the disclosure inside the unchanged viewport. */
.player-preview { position: absolute; top: calc(var(--history-top, 24px) + 56px); bottom: 128px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column-reverse; gap: 8px; width: min(320px, calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); pointer-events: none; }
.player-preview-row { flex: 0 0 auto; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 3px 14px #20242c12; pointer-events: auto; }
.player-preview-row button { min-width: 0; min-height: 44px; height: 44px; padding: 0 8px; border: 0; border-radius: 13px; background: transparent; color: var(--accent); font: inherit; font-size: 24px; cursor: pointer; }
.player-preview-row .player-preview-trigger { display: flex; align-items: center; justify-content: center; gap: 8px; padding-inline: 6px; color: var(--ink); font-size: 14px; font-weight: 600; }
.player-preview-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.player-preview-chevron { flex: 0 0 auto; color: var(--muted); font-size: 14px; }
.player-preview-trigger[aria-expanded='true'] { background: var(--accent-soft); }
.player-preview-row button:hover:not(:disabled) { background: var(--accent-soft); }
.player-preview-row button:disabled { color: var(--muted); opacity: .35; cursor: default; }
.player-preview :is(button,select):focus-visible, #text-tools button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.player-preview-panel { flex: 0 1 auto; min-height: 0; max-height: 320px; padding: 12px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 5px 24px #20242c1c; pointer-events: auto; }
.player-preview-field { display: grid; gap: 5px; margin-bottom: 10px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.player-preview-field > span:last-child:not(:first-child) { color: var(--ink); font-size: 14px; }
.player-preview-field select { width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; }
.player-preview-manage { width: 100%; min-height: 44px; padding: 8px; border: 0; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; }
.player-preview-notice { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.customer-order-preview-canvas { display: block; width: min(100%, 360px); height: auto; aspect-ratio: 1; margin: 0 auto; border-radius: 10px; background: #f6f7f9; }

/* Order preparation: one editable row per shirt, with optional details nearby. */
.customer-order-preparation { display: grid; gap: 0; min-width: 0; }
.customer-order-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; }
.customer-order-heading > h3 { min-width: 0; font-size: 16px; }
.customer-panel .customer-order-heading > button { flex: 0 0 auto; padding: 6px 0; border: 0; color: var(--muted); font-size: 12px; }
.customer-order-section { min-width: 0; border-top: 1px solid var(--line); }
.customer-panel button.customer-order-section-toggle { display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; column-gap: 9px; row-gap: 1px; width: 100%; min-height: 62px; padding: 10px 2px; border: 0; border-radius: 0; text-align: left; }
.customer-order-step-number { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 12px; }
.customer-order-step-title { grid-column: 2; font-size: 14px; font-weight: 600; }
.customer-order-step-summary { grid-column: 2; color: var(--muted); font-size: 12px; font-weight: 400; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.customer-order-step-chevron { grid-column: 3; grid-row: 1 / span 2; color: var(--muted); font-size: 18px; }
.customer-order-section-toggle[aria-expanded='true'] .customer-order-step-number { color: var(--accent); background: var(--accent-soft); }
.customer-order-section-toggle[aria-expanded='true'] .customer-order-step-title { color: var(--accent); }
.customer-order-section-body { display: grid; gap: 12px; min-width: 0; padding: 2px 0 16px; }
.customer-order-section { scroll-margin-block: 8px 80px; }
.customer-order-preparation :is(input, select, textarea, button, [role='alert']) { scroll-margin-block: 8px 80px; }
.customer-order-section-heading { min-width: 0; }
.customer-field.customer-order-design { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 10px; }
.customer-order-design > span { white-space: nowrap; }
.customer-order-design > select { min-width: 0; }
.customer-order-import { display: flex; align-items: center; gap: 8px; min-width: 0; }
.customer-order-import > label { flex: 1 1 0; min-width: 0; }
.customer-order-import > label > span { white-space: normal; overflow-wrap: anywhere; }
.customer-order-import:has(> label) { align-items: flex-end; }
.customer-order-import-label { flex: 0 1 auto; min-width: 0; color: var(--muted); font-size: 12px; font-weight: 500; }
.customer-order-import > button { flex: 0 0 auto; min-width: 0; max-width: 50%; padding-inline: 10px; }
.customer-order-import-info { flex: 1 1 0; min-width: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.customer-order-roster-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-width: 0; }
.customer-order-total { color: var(--muted); font-size: 12px; }
.customer-order-table-wrap { min-width: 0; }
.customer-panel table.customer-order-table { width: 100%; table-layout: fixed; border-collapse: collapse; border-top: 1px solid var(--line); }
.customer-order-number { width: 44px; }
.customer-order-size { width: 56px; }
.customer-order-quantity { width: 44px; }
.customer-order-options { width: 44px; }
.customer-order-table[data-personalization='none'] .customer-order-size,
.customer-order-table[data-personalization='number'] .customer-order-number { width: auto; }
.customer-order-table[data-personalization='none'] .customer-order-quantity { width: 96px; }
.customer-order-table[data-personalization='number'] .customer-order-size,
.customer-order-table[data-personalization='name'] .customer-order-size { width: 76px; }
.customer-order-table[data-personalization='number'] .customer-order-quantity,
.customer-order-table[data-personalization='name'] .customer-order-quantity { width: 60px; }
.customer-panel .customer-order-table th { padding: 7px 4px; color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.customer-panel .customer-order-table td { padding: 1px 0; vertical-align: middle; }
.customer-order-table th:not(:first-child) { text-align: center; }
.customer-panel .customer-order-table tr > td + td { border-left: 1px solid #edf0f5; }
.customer-order-cell-field { position: relative; display: block; min-width: 0; margin: 0; }
.customer-order-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.customer-panel .customer-order-cell-field input { min-height: 44px; padding: 8px 4px; border: 1px solid transparent; border-radius: 4px; background: transparent; font-size: 16px; text-overflow: ellipsis; }
.customer-order-table td:not(:first-child) input { text-align: center; }
.customer-panel .customer-order-cell-field input:hover:not(:disabled) { background: var(--surface); }
.customer-panel .customer-order-cell-field input:focus { position: relative; z-index: 1; background: var(--accent-soft); border-color: var(--accent); outline-offset: -1px; }
.customer-panel .customer-order-cell-field input:disabled { opacity: 1; color: var(--muted); background: var(--surface); }
.customer-order-cell-field input[type='number'] { appearance: textfield; -moz-appearance: textfield; }
.customer-order-cell-field input[type='number']::-webkit-inner-spin-button, .customer-order-cell-field input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.customer-panel .customer-order-options button { width: 44px; min-width: 44px; padding: 0; border-color: transparent; background: transparent; font-size: 22px; }
.customer-panel .customer-order-next { justify-self: end; padding-inline: 12px; border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.customer-order-section[data-section='shirt'] .customer-order-section-body > button:not(.customer-order-next) { justify-self: start; border: 0; padding: 6px 2px; color: var(--accent); }
.customer-order-contact, .customer-order-address { display: grid; gap: 8px; }
.customer-order-contact-fields, .customer-order-address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.customer-order-contact-fields > label:nth-child(2) { grid-column: 1 / -1; }
.customer-order-contact-fields > label:first-child { grid-column: 1 / -1; }
.customer-order-address-grid > .customer-order-address-city { grid-column: 1 / -1; }
.customer-order-address-row { display: grid; grid-column: 1 / -1; gap: 10px; min-width: 0; align-items: end; }
.customer-order-address-street-row { grid-template-columns: minmax(0, 1fr) 82px; }
.customer-order-address-country-row { grid-template-columns: 104px minmax(0, 1fr); }
.customer-panel .customer-order-address-row > .customer-order-billing-same { flex-direction: row; align-self: end; gap: 8px; min-height: 44px; font-size: 12px; line-height: 1.35; cursor: pointer; }
.customer-order-billing-same > span { min-width: 0; overflow-wrap: anywhere; }
.customer-order-section-body > .customer-card { border: 0; padding: 0; border-radius: 0; }
.customer-order-note { min-width: 0; border-top: 1px solid var(--line); }
.customer-order-note summary { min-height: 44px; align-content: center; color: var(--muted); cursor: pointer; font-size: 13px; }
.customer-order-summary { display: grid; gap: 0; margin: 0; font-size: 13px; }
.customer-order-summary > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.customer-order-summary dt { color: var(--muted); }
.customer-order-summary dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.customer-order-review { display: grid; gap: 8px; min-width: 0; }
.customer-order-review .customer-list { margin: 0; padding-left: 18px; }
.customer-order-preparation .customer-order-preview { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.customer-order-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.customer-order-preview-heading > h3 { font-size: 14px; }
.customer-panel .customer-order-preview-heading > button { border: 0; background: transparent; padding: 4px; font-size: 12px; color: var(--accent); }
.customer-order-preparation .customer-order-preview-canvas { max-width: 240px !important; }
.customer-order-offer-note { color: var(--muted); font-size: 12px; }
.customer-order-footer { position: sticky; bottom: -16px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 0 max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
.customer-order-footer > button { flex: 1; }

/* Checkout: a quiet step rail, distinct product headers and editable tables. */
.profile-menu:has(.order-checkout) .profile-heading { min-height: 48px; }
.profile-menu:has(.order-checkout) .profile-heading h2 { font-size: 16px; }
.profile-body:has(.order-checkout) { background: #f4f6f8; }
.order-checkout { display: grid; gap: 16px; min-width: 0; }
.order-checkout > *, .order-product-header > *, .order-product-body > * { min-width: 0; }
.order-checkout .order-stepbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; border: 0; border-radius: 0; background: transparent; }
.order-checkout .order-step { display: flex; align-items: center; justify-content: flex-start; gap: 5px; min-width: 0; min-height: 44px; padding: 4px 0 10px; border: 0; border-bottom: 2px solid #dce1e8; border-radius: 0; background: transparent; color: var(--muted); font-size: 11px; line-height: 1.3; text-align: left; white-space: normal; }
.order-checkout .order-step[aria-current='step'] { border-bottom-color: var(--accent); color: var(--ink); background: transparent; font-weight: 650; }
.order-step-number { display: grid; place-items: center; flex: 0 0 19px; width: 19px; height: 19px; border-radius: 50%; color: var(--muted); font-size: 10px; background: #e7ebf0; }
.order-step[aria-current='step'] .order-step-number { color: #fff; background: var(--accent); }
.order-step-label { min-width: 0; }
.order-products { display: grid; gap: 16px; min-width: 0; }
.order-checkout .order-product { min-width: 0; border: 1px solid #e1e5eb; border-radius: 10px; background: #fff; box-shadow: 0 2px 4px #18263d04; }
.order-product-header { display: grid; grid-template-columns: 56px minmax(0, 1fr) 76px; align-items: center; gap: 8px 10px; min-width: 0; padding: 12px 12px 5px; }
.order-product-thumbnail { display: grid; place-items: center; width: 56px; height: 68px; max-width: 100%; border-radius: 6px; object-fit: contain; background: #f5f6f8; color: var(--muted); }
.order-product-thumbnail :is(img, canvas, svg) { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
.order-product-identity { display: grid; gap: 3px; min-width: 0; }
.order-product-size-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; min-width: 0; }
.order-product-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.order-product-title { min-width: 0; color: var(--ink); font-size: 15px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.order-product-quantity { flex-shrink: 0; color: var(--ink); font-size: 12px; font-weight: 550; white-space: nowrap; }
.order-product-sizes { display: flex; flex-wrap: wrap; gap: 2px 9px; min-width: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.order-product-size { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-product-personalization { color: var(--muted); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.order-checkout .order-product-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: start; gap: 5px; width: 76px; height: 68px; min-height: 68px; padding: 7px 5px; border: 1px solid var(--accent-line); border-radius: 6px; color: var(--accent); background: var(--accent-soft); text-align: center; }
.order-edit-icon { font-size: 0; width: 17px; height: 17px; }
.order-edit-label { font-size: 11px; line-height: 1.3; font-weight: 600; }
.order-checkout .order-product-toggle[aria-expanded='true'] { border-color: var(--accent); background: #e2e9ff; }
.order-product-actions { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) 36px; align-items: center; column-gap: 16px; min-width: 0; border-top: 1px solid #f0f2f5; padding-top: 2px; }
.order-product-actions:not(:has(.order-product-edit)) { grid-template-columns: minmax(0, 1fr) 36px; }
.order-checkout .order-product-actions > button { display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px; min-width: 0; min-height: 40px; padding: 4px 0; border: 0; background: transparent; color: #53637d; font-size: 11px; font-weight: 500; line-height: 1.4; }
.order-checkout .order-product-actions > .order-product-edit { white-space: nowrap; }
.order-checkout .order-product-actions > .order-product-edit:hover { color: var(--accent); }
.order-edit-icon, .order-product-edit::before { content: ''; flex-shrink: 0; display: inline-block; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' d='m15 5 4 4M4 20l5-1L20 8a2.8 2.8 0 0 0-4-4L5 15l-1 5Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.order-product-edit::before { width: 13px; height: 13px; }
.order-checkout .order-product-actions > .order-product-status { gap: 6px; font-size: 10px; font-weight: 400; text-align: left; line-height: 1.4; }
.order-product-status::before { content: ''; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.order-checkout .order-product-actions > .order-product-status.is-complete { color: #467459; }
.order-checkout .order-product-actions > .order-product-status.is-incomplete { color: #876329; }
.order-checkout .order-product-actions > button:last-child { justify-content: center; width: 36px; padding: 0; color: #788394; font-size: 0; }
.order-checkout .order-product-actions > button:last-child::before { content: ''; display: block; width: 15px; height: 15px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7m4-7v7'/%3E%3C/svg%3E") center / contain no-repeat; }
.order-checkout .order-product-actions > button:last-child:hover { color: #a12d38; }
@media (max-width: 359px) {
 .order-product-header { grid-template-columns: 44px minmax(0, 1fr) 68px; gap: 7px; padding: 9px 9px 3px; }
  .order-product-thumbnail { width: 44px; height: 60px; }
  .order-checkout .order-product-toggle { width: 68px; }
}
.order-product-body { display: grid; gap: 12px; min-width: 0; padding: 12px; border-top: 1px solid #d6dee9; border-radius: 0 0 9px 9px; background: #e9eef5; }
.order-checkout .customer-order-design { gap: 8px; font-size: 11px; }
.order-checkout .customer-order-design > select { font-size: 13px; padding: 6px 24px 6px 8px; border-color: #e6e9ee; border-radius: 5px; background: #fafbfd; }
.order-checkout .customer-order-import { flex-wrap: wrap; gap: 6px; }
.order-checkout .customer-order-import > label { flex-basis: 140px; }
.order-checkout .customer-order-import:not(:has(select)) > .customer-order-import-label { display: none; }
.order-checkout .customer-order-import-info { font-size: 11px; }
.order-checkout .customer-order-roster-heading h4 { font-size: 12px; font-weight: 650; }
.order-checkout .customer-order-table-wrap { width: 100%; min-width: 0; }
.order-checkout .customer-order-table { width: 100%; max-width: 100%; table-layout: fixed; border: 1px solid #dce3ed; }
.order-checkout .customer-order-table[data-personalization='none'] .customer-order-options { width: auto; }
.order-checkout .customer-order-table[data-personalization='none'] .customer-order-inline-actions { justify-content: flex-end; padding-inline: 4px; }
.order-checkout .customer-order-table .customer-order-number { width: 58px; }
.order-checkout .customer-order-table .customer-order-size { width: 60px; }
.order-checkout .customer-order-table .customer-order-quantity { width: 44px; }
.order-checkout .customer-order-table .customer-order-options { width: 72px; }
.order-checkout .customer-order-table thead { background: #e1e8f1; }
.order-checkout .customer-order-table th { color: #4e5a6c; padding: 6px 4px; border-bottom-color: #dce3ed; }
.order-checkout .customer-order-table tbody > .is-odd { --order-row-bg: #fbfcfe; background: var(--order-row-bg); }
.order-checkout .customer-order-table tbody > .is-even { --order-row-bg: #edf2f7; background: var(--order-row-bg); }
.order-checkout .customer-order-table td { border-bottom-color: #e0e6ef; }
.order-checkout .customer-order-table .customer-order-item-row > td + td { border-left-color: #e0e6ef; }
.order-checkout .customer-order-cell-field :is(input, select) { width: 100%; min-width: 0; max-width: 100%; min-height: 40px; padding: 7px 4px; border: 1px solid transparent; border-radius: 4px; background: transparent; font-size: 16px; text-overflow: ellipsis; }
.order-checkout .customer-order-cell-field select { padding-inline: 3px 0; cursor: pointer; }
.order-checkout .customer-order-cell-field :is(input, select):hover:not(:disabled) { background: #ffffff66; }
.order-checkout .customer-order-cell-field :is(input, select):focus { position: relative; z-index: 1; border-color: var(--accent); background: #fff; outline-offset: -1px; }
.order-checkout .customer-order-cell-field :is(input, select):disabled { opacity: 1; color: var(--muted); background: transparent; }
.order-personalization-cell { display: flex; align-items: center; min-width: 0; }
.order-personalization-cell > .customer-order-cell-field { flex: 1 1 0; min-width: 0; }
.order-checkout .order-personalization-cell > .order-print-toggle { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; min-width: 0; min-height: 40px; margin: 0; padding: 0; gap: 0; border-radius: 4px; cursor: pointer; }
.order-checkout .order-print-toggle input[type='checkbox'] { display: block; flex: 0 0 15px; width: 15px; height: 15px; min-width: 0; margin: 0; cursor: pointer; accent-color: var(--accent); }
.order-checkout .order-print-toggle:hover { background: #dfe7f280; }
.order-checkout .order-personalization-cell .customer-order-cell-field input { padding-inline: 2px; }
.order-checkout .order-personalization-cell.is-omitted input:not([type='checkbox']) { color: #788394; -webkit-text-fill-color: #788394; opacity: 1; }
.customer-order-inline-actions { display: flex; align-items: center; justify-content: center; gap: 0; min-width: 0; }
.order-checkout .customer-order-inline-actions > button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 35px; width: 35px; min-width: 0; min-height: 40px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #63718a; font-size: 18px; }
.order-checkout .customer-order-inline-actions > button:hover:not(:disabled) { background: #dfe7f2; color: var(--accent); }
.order-checkout .customer-order-inline-actions > :is(.order-item-preview, .order-item-remove) { font-size: 0; }
.order-item-preview::before, .order-item-remove::before { content: ''; display: block; width: 16px; height: 16px; background: currentColor; }
.order-item-preview::before { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat; }
.order-item-remove::before { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7m4-7v7'/%3E%3C/svg%3E") center / contain no-repeat; }
.order-checkout .customer-order-inline-actions > .order-item-remove:hover:not(:disabled) { color: #a12d38; background: #f7e9ec; }
@media (max-width: 359px) {
  .order-product-body { padding-inline: 8px; }
  .order-checkout .customer-order-table .customer-order-number { width: 52px; }
  .order-checkout .customer-order-table .customer-order-size { width: 52px; }
  .order-checkout .customer-order-table .customer-order-quantity { width: 36px; }
  .order-checkout .customer-order-table .customer-order-options { width: 60px; }
  .order-checkout .order-personalization-cell > .order-print-toggle { flex-basis: 20px; width: 20px; }
  .order-checkout .customer-order-cell-field select { padding-left: 1px; }
  .order-checkout .customer-order-inline-actions > button { flex-basis: 29px; width: 29px; }
}
.order-checkout .order-add-row { justify-self: start; padding: 4px 0; border: 0; color: var(--accent); background: transparent; font-size: 12px; }
.order-checkout .order-add-row::before, .order-checkout .order-add-product::before { content: '+'; font-size: 19px; font-weight: 400; }
.order-checkout .order-add-product { justify-content: center; min-height: 48px; border: 1px dashed #bdc7d5; color: #44536b; background: transparent; font-size: 12px; }
.order-checkout-footer { position: sticky; bottom: calc(-1 * max(16px, env(safe-area-inset-bottom))); z-index: 3; display: grid; gap: 4px; min-width: 0; padding: 10px 0 max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #dce2eb; background: #f4f6f8; box-shadow: 0 -10px 16px #f4f6f8eb; }
.order-checkout-total { min-width: 0; color: var(--ink); font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.order-checkout-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-width: 0; }
.order-checkout-actions.is-first-step { grid-template-columns: minmax(0, 1fr) auto; }
.customer-panel .order-checkout-actions > button { min-width: 44px; min-height: 44px; padding: 10px 12px; font-size: 13px; border-radius: 7px; }
.customer-panel .order-checkout-actions > button:not(.customer-button-primary) { padding-inline: 4px; background: transparent; border: 0; color: var(--muted); font-size: 12px; }
.customer-panel .order-checkout-actions > button.customer-button-primary { min-width: 100px; }
.customer-panel .order-checkout-actions > .order-checkout-save { justify-self: start; padding-inline: 0; text-align: left; }
.order-checkout :is(input, select, textarea, button, [role='alert']) { scroll-margin-block: 10px 80px; }
.order-checkout .customer-order-contact, .order-checkout .customer-order-address { padding: 14px; background: #fff; border: 1px solid #e1e5eb; border-radius: 8px; gap: 12px; }

/* One shared document layout, with compact readable tables on small screens. */
.order-document-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.order-document-toolbar > .customer-muted { margin: 0; font-size: 12px; }
.customer-panel .order-document-download { min-height: 40px; padding: 8px 12px; border-color: #cbd6eb; color: var(--accent); font-size: 12px; background: #fff; }
.order-document { min-width: 0; padding: 18px; border: 1px solid #dae1eb; border-top: 3px solid var(--accent); border-radius: 4px; background: #fff; color: #202a3b; box-shadow: 0 3px 10px #18263d06; }
.order-document-masthead { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.order-document-brand { display: flex; align-items: center; gap: 7px; font-size: 19px; font-weight: 750; letter-spacing: -.6px; }
.order-document-mark { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px; background: #20242c; color: #fff; }
.order-document-mark svg { width: 25px; height: 25px; }
.order-document-status { color: #60718a; font-size: 10px; font-weight: 550; text-align: right; }
.order-document-heading { padding: 20px 0 16px; }
.customer-panel .order-document-heading h2 { margin: 0 0 5px; color: #202a3b; font-size: 22px; font-weight: 700; letter-spacing: -.5px; line-height: 1.2; }
.order-document-heading p { margin: 3px 0 0; color: #6a778b; font-size: 11px; overflow-wrap: anywhere; }
.order-document-addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; padding: 14px 0 18px; border-block: 1px solid #e0e6ef; }
.order-document-contact { grid-column: 1 / -1; }
.order-document-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; margin-bottom: 5px; }
.customer-panel .order-document h3 { margin: 0; color: #68768b; font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.order-document-address { min-width: 0; }
.order-document-address p { margin: 2px 0; color: #354154; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.customer-panel .order-document .order-document-edit { justify-content: flex-start; min-width: 44px; min-height: 32px; padding: 3px 0; border: 0; border-radius: 3px; background: transparent; color: var(--accent); font-size: 11px; font-weight: 500; }
.order-document-positions { padding-top: 17px; }
.customer-panel .order-document .order-document-section-title { margin-bottom: 10px; }
.order-document-product { min-width: 0; margin-top: 18px; border-top: 1px solid #dce3ed; border-radius: 0; }
.order-document-product:first-of-type { margin-top: 0; }
.order-document-product-header { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 13px; align-items: center; padding: 12px 0; }
.order-document-product-visuals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.order-document-preview { min-width: 0; margin: 0; text-align: center; }
.order-document-preview-image { position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 12 / 13; border-radius: 4px; background: #f5f7fa; }
.order-document-preview-canvas { display: block; width: 100%; height: auto; border-radius: 4px; }
.order-document-image-status { position: absolute; inset: 0; display: grid; place-items: center; padding: 4px; color: #738198; font-size: 9px; line-height: 1.25; text-align: center; }
.order-document-preview figcaption { margin-top: 4px; color: #7c8798; font-size: 9px; }
.order-document-product-identity { min-width: 0; }
.order-document-position { color: #718199; font-size: 10px; }
.customer-panel .order-document-product-identity h4 { margin: 2px 0 4px; color: #26334a; font-size: 14px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.order-document-model { margin: 0 0 6px; color: #738198; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.order-document-product-quantity { display: block; color: #354154; font-size: 12px; font-weight: 600; }
.order-document-preview-note { margin: 0; padding: 0 0 8px; color: #7b8799; font-size: 9px; line-height: 1.4; }
.customer-panel table.order-document-table { width: 100%; table-layout: fixed; border-collapse: collapse; border: 0; margin: 0; }
.customer-panel .order-document-table th, .customer-panel .order-document-table td { padding: 7px 7px; border: 1px solid #dce3ed; color: #354154; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; vertical-align: top; }
.customer-panel .order-document-table tr > :first-child { border-left: 0; }
.customer-panel .order-document-table tr > :last-child { border-right: 0; }
.customer-panel .order-document-table th { background: #e9eef5; color: #52617a; font-size: 10px; font-weight: 600; text-align: left; }
.order-document-table tbody tr:nth-child(even) { background: #f5f7fa; }
.order-document-column-name { width: auto; }
.order-document-column-number { width: 62px; }
.order-document-column-size { width: 56px; }
.order-document-column-quantity { width: 42px; }
.order-document-column-actions { width: 34px; }
.customer-panel .order-document-table .order-document-cell-actions { padding: 0; vertical-align: middle; }
.customer-panel .order-document-table .order-document-cell-actions > .order-item-preview { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 34px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #63718a; font-size: 0; }
.customer-panel .order-document-table .order-document-cell-actions > .order-item-preview:hover:not(:disabled) { color: var(--accent); background: #e7edf6; }
.customer-panel .order-document-table .order-document-cell-number, .customer-panel .order-document-table .order-document-cell-size, .customer-panel .order-document-table .order-document-cell-quantity { text-align: center; }
.order-document-size-summary { margin: 0; padding: 8px 0; color: #66768d; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.order-document-totals { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 12px 0; border-top: 2px solid #d3ddec; }
.order-document-totals > span { color: #75829a; font-size: 10px; }
.order-document-totals > strong { flex: 0 0 auto; color: #26334a; font-size: 15px; font-weight: 700; }
.order-document-note { padding: 12px 0; border-top: 1px solid #e0e6ef; }
.order-document-note p { margin: 6px 0 0; color: #53617a; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.order-document-offer-note { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #e0e6ef; color: #758198; font-size: 10px; line-height: 1.5; }

/* Inline controls retain the document's ruled, compact structure. */
.order-document .order-document-design-control { display: block; min-width: 0; margin: 2px 0 5px; }
.customer-panel .order-document .order-document-design-control select,
.customer-panel .order-document select.order-document-design-control { min-width: 0; min-height: 34px; padding: 4px 22px 4px 5px; border: 1px solid #dce3ed; border-radius: 3px; background-color: #fff; color: #26334a; font-size: 14px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; }
.order-document .order-document-product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; min-width: 0; margin-top: 3px; }
.customer-panel .order-document .order-document-product-actions > button { min-width: 0; min-height: 34px; padding: 4px 0; border: 0; border-radius: 3px; background: transparent; color: #576984; font-size: 11px; line-height: 1.35; }
.customer-panel .order-document .order-document-product-actions > button:hover:not(:disabled) { color: var(--accent); }
.customer-panel .order-document .order-document-product-actions > .customer-button-danger:hover:not(:disabled) { color: #a12d38; }
.order-document .order-document-editor { display: grid; gap: 8px; min-width: 0; }
.order-document .order-document-table-wrap { min-width: 0; max-width: 100%; }
.customer-panel .order-document .order-document-table.is-editable { border: 1px solid #d5deea; }
.customer-panel .order-document .order-document-table.is-editable th { padding: 6px 3px; border-color: #d5deea; background: #e9eef5; color: #52617a; font-size: 10px; font-weight: 600; }
.customer-panel .order-document .order-document-table.is-editable td { padding: 0; border-color: #dce3ed; vertical-align: middle; }
.order-document .order-document-table.is-editable tbody > .is-odd { --order-row-bg: #fff; background: var(--order-row-bg); }
.order-document .order-document-table.is-editable tbody > .is-even { --order-row-bg: #f3f6fa; background: var(--order-row-bg); }
.order-document .order-document-table.is-editable .customer-order-name { width: auto; }
.order-document .order-document-table.is-editable .customer-order-number { width: 60px; }
.order-document .order-document-table.is-editable .customer-order-size { width: 58px; }
.order-document .order-document-table.is-editable .customer-order-quantity { width: 42px; }
.order-document .order-document-table.is-editable .customer-order-options { width: 64px; }
.order-document .order-document-table.is-editable[data-personalization='none'] .customer-order-size,
.order-document .order-document-table.is-editable[data-personalization='number'] .customer-order-number { width: auto; }
.order-document .order-document-table.is-editable[data-personalization='none'] .customer-order-options { width: 64px; }
.customer-panel .order-document .customer-order-cell-field :is(input, select) { min-height: 40px; padding: 6px 3px; border: 1px solid transparent; border-radius: 3px; background: transparent; font-size: 15px; line-height: 1.4; }
.customer-panel .order-document .customer-order-cell-field select { padding-inline: 2px 0; }
.customer-panel .order-document .customer-order-cell-field :is(input, select):hover:not(:disabled) { border-color: #b9c9de; background: #fff; }
.customer-panel .order-document .customer-order-cell-field :is(input, select):focus { border-color: var(--accent); outline-offset: -1px; background: #fff; }
.customer-panel .order-document .customer-order-cell-field :is(input, select):disabled { border-color: transparent; background: transparent; }
.customer-panel .order-document .order-personalization-cell > .order-print-toggle { flex-basis: 24px; width: 24px; min-height: 40px; }
.customer-panel .order-document .order-personalization-cell .customer-order-cell-field input { padding-inline: 2px; }
.customer-panel .order-document .customer-order-inline-actions { padding-inline: 0; }
.customer-panel .order-document .customer-order-inline-actions > button { flex-basis: 31px; width: 31px; min-height: 40px; padding: 0; }
.order-document .order-document-editor > .customer-order-import { padding: 3px 0 6px; gap: 6px; }
.order-document .order-document-editor .customer-order-import > label { flex-basis: 130px; font-size: 10px; }
.customer-panel .order-document .customer-order-import select { min-height: 36px; padding: 5px 22px 5px 7px; border-radius: 3px; font-size: 13px; }
.customer-panel .order-document .customer-order-import > button { min-height: 36px; padding: 5px 7px; border-radius: 3px; border-color: #dce3ed; background: #fff; font-size: 11px; }
.customer-panel .order-document .order-add-row { justify-self: start; min-height: 36px; padding: 3px 0; border: 0; border-radius: 3px; background: transparent; color: var(--accent); font-size: 11px; }
.customer-panel .order-document .order-add-product { display: flex; justify-content: flex-start; width: 100%; margin-top: 14px; padding: 8px 0; min-height: 40px; border: 0; border-top: 1px solid #dce3ed; border-radius: 0; background: transparent; color: var(--accent); font-size: 12px; }
.order-document .customer-order-preview { padding: 10px 0; border: 0; border-block: 1px solid #dce3ed; border-radius: 0; background: #f5f7fa; }
.order-document .order-document-address-editor { display: grid; gap: 14px; min-width: 0; padding: 14px 0; border-block: 1px solid #e0e6ef; }
.order-document .order-document-address-editor :is(.customer-order-contact, .customer-order-address) { padding: 0; border: 0; border-radius: 0; background: transparent; gap: 8px; }
.customer-panel .order-document .order-document-address-editor h4 { margin: 0; color: #68768b; font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.order-document .order-document-address-editor .customer-field { font-size: 11px; }
.customer-panel .order-document .order-document-address-editor :is(input:not([type='checkbox']), select, textarea),
.customer-panel .order-document .order-document-note-editor textarea { min-height: 40px; padding: 7px 8px; border-radius: 3px; border-color: #d5deea; font-size: 15px; }
.customer-panel .order-document .order-document-address-editor > button,
.customer-panel .order-document .order-document-address-editor .order-document-section-heading > button { justify-self: start; min-height: 36px; padding: 4px 0; border: 0; border-radius: 3px; color: var(--accent); background: transparent; font-size: 12px; }
.order-document .order-document-note-editor { min-width: 0; padding: 12px 0; border-top: 1px solid #e0e6ef; font-size: 11px; }
.order-document .order-document-note-editor :is(.customer-field, label) { font-size: 11px; }
.order-document .order-document-note-editor textarea { resize: vertical; }
.customer-panel .order-document :is(select, textarea):focus { border-color: var(--accent); }
.order-document .order-document-size-summary[hidden] { display: none; }
@media (max-width: 420px) {
  .order-document { padding: 12px; }
  .order-document-product-header { grid-template-columns: 88px minmax(0, 1fr); gap: 8px; padding: 10px 0; }
  .order-document-column-number { width: 55px; }
  .order-document-column-size { width: 45px; }
  .order-document-column-quantity { width: 34px; }
  .customer-panel .order-document-table th, .customer-panel .order-document-table td { padding-inline: 4px; }
  .order-document .order-document-table.is-editable .customer-order-number { width: 54px; }
  .order-document .order-document-table.is-editable .customer-order-size { width: 50px; }
  .order-document .order-document-table.is-editable .customer-order-quantity { width: 36px; }
  .order-document .order-document-table.is-editable .customer-order-options,
  .order-document .order-document-table.is-editable[data-personalization='none'] .customer-order-options { width: 58px; }
  .customer-panel .order-document .customer-order-inline-actions > button { flex-basis: 28px; width: 28px; }
  .customer-panel .order-document .customer-order-cell-field :is(input, select),
  .customer-panel .order-document .order-document-address-editor :is(input:not([type='checkbox']), select, textarea),
  .customer-panel .order-document .order-document-note-editor textarea { font-size: 16px; }
  .customer-panel .order-document .order-document-design-control select,
  .customer-panel .order-document select.order-document-design-control { min-height: 36px; font-size: 16px; }
  .order-document .order-document-product-actions { gap: 0 10px; }
  .order-document .order-document-totals { flex-wrap: wrap; gap: 4px 10px; }
  .order-document .order-document-address-editor .customer-order-address-country-row { grid-template-columns: 76px minmax(0, 1fr); }
  .customer-panel .order-document .order-document-address-editor .customer-order-billing-same { font-size: 11px; }
}
@media (max-width: 359px) {
  .order-document { padding: 9px; }
  .order-document .order-document-table.is-editable .customer-order-size { width: 48px; }
  .order-document .order-document-table.is-editable .customer-order-quantity { width: 32px; }
  .order-document .order-document-table.is-editable .customer-order-options,
  .order-document .order-document-table.is-editable[data-personalization='none'] .customer-order-options { width: 56px; }
  .customer-panel .order-document .customer-order-inline-actions > button { flex-basis: 27px; width: 27px; }
}
@media (max-width: 899px) {
  .order-checkout .customer-order-design > select { font-size: 16px; }
}

@media (max-width: 899px) {
  .app-shell { --player-preview-lift: 0px; }
  .app-shell.tool-open { --player-preview-lift: var(--tool-sheet-height, 168px); }
  .player-preview { bottom: calc(var(--tool-keyboard-offset, 0px) + var(--player-preview-lift) + 8px); transition: bottom 180ms ease; }
  .player-preview-field select { font-size: 16px; }
  .stage-column:has(.player-preview:not([hidden])) .status-line { bottom: calc(var(--tool-keyboard-offset, 0px) + var(--player-preview-lift) + 64px); }
}
@media (prefers-reduced-motion: reduce) {
  .player-preview { transition: none; }
}

/* The design selector reads as the card title while retaining native behavior. */
.order-product-title-row > .order-product-design-field { width: 100%; min-width: 0; margin: 0; gap: 0; }
.order-checkout .order-product-design-select { width: 100%; min-width: 0; min-height: 34px; padding: 4px 20px 4px 0; border: 1px solid transparent; border-radius: 4px; background-color: transparent; color: var(--ink); font-size: 15px; font-weight: 650; text-overflow: ellipsis; cursor: pointer; }
.order-checkout .order-product-design-select:hover { border-bottom-color: #dce2ed; }
.order-checkout .order-product-design-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) {
  .order-checkout .order-product-design-select { font-size: 16px; }
}
@media (max-width: 359px) {
  .order-product-actions { column-gap: 10px; }
}
.customer-design-reviews { display: grid; gap: 14px; min-width: 0; }
.customer-design-reviews > h3 { margin: 0; }
.design-review-table-wrap { overflow-x: auto; border: 1px solid var(--line, #d8dde5); border-radius: 6px; }
.design-review-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; }
.design-review-table :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--line, #d8dde5); vertical-align: middle; }
.design-review-table th { background: var(--panel, #f1f4f8); font-size: 11px; font-weight: 650; }
.design-review-table tr:nth-child(even) td { background: rgba(128, 145, 166, .045); }
.design-review-table tr:last-child td { border-bottom: 0; }
.design-review-table td:first-child { min-width: 155px; }
.design-review-table td:last-child { width: 1%; text-align: right; }
.design-review-table .customer-button { white-space: nowrap; }
.design-review-detail { display: grid; gap: 14px; min-width: 0; }
.design-review-detail :is(h3, h4, p) { margin: 0; }
.design-review-detail section { display: grid; gap: 6px; }
.design-review-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 560px; }
.design-review-note { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
@media (max-width: 600px) {
  .design-review-table :is(th, td) { padding: 8px; }
  .design-review-table :is(th, td):nth-child(3) { display: none; }
  .design-review-previews { gap: 8px; }
}