/* Mad Crown Maker — redesign ("Atelier combined" direction).
   Light is the default; dark mirrors the same tokens. */
:root {
  --f-ui: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-display: 'Montserrat', var(--f-ui);
  --f-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --bg: #FAFAF8;
  --stage: #F3F3F0;
  --surface: #F3F3F0;
  --surface-2: #EFEFEC;
  --soft: #F5F5F2;
  --ink: #0B0B0C;
  --ink-2: #354155;
  --muted: #5A6270;
  --faint: #969EAA;
  --line: #E3E4E7;
  --line-2: #EBECEE;
  --line-strong: #D5D8DD;
  --tick: #B8BEC7;
  --dash: #C9CDD3;
  --solid: #111214;
  --solid-hover: #2A2C30;
  --on-solid: #FAFAFA;
  --plate: #E9E9E5;
  --plate-dark: #3C3C3C;
  --checker-a: #ECECE8;
  --checker-b: #F5F5F2;
  --ok: oklch(0.62 0.12 150);
  --ok-ink: oklch(0.5 0.12 150);
  --ok-bright: oklch(0.72 0.14 150);
  --danger: oklch(0.5 0.15 25);
  --glass: #FAFAF859;
  --glass-edge: #FFFFFF80;
  --shadow-soft: 0 1px 2px #0B0B0C1A;
  --shadow-pop: 0 6px 20px #0B0B0C33;
  --blend: multiply;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #131416;
  --stage: #1B1C1F;
  --surface: #1E2024;
  --surface-2: #25272C;
  --soft: #1A1B1E;
  --ink: #F2F2F0;
  --ink-2: #C9CDD3;
  --muted: #9AA1AC;
  --faint: #6F7580;
  --line: #2A2C30;
  --line-2: #232529;
  --line-strong: #3A3D42;
  --tick: #50545B;
  --dash: #45484E;
  --solid: #F2F2F0;
  --solid-hover: #D8D8D4;
  --on-solid: #111214;
  --plate: #2A2C30;
  --plate-dark: #3C3C3C;
  --checker-a: #25272B;
  --checker-b: #2C2E33;
  --ok-ink: oklch(0.72 0.12 150);
  --danger: oklch(0.7 0.14 25);
  --glass: #1B1C1F80;
  --glass-edge: #FFFFFF1F;
  --shadow-soft: 0 1px 2px #00000066;
  --shadow-pop: 0 6px 20px #00000080;
  --blend: normal;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 400 14px/1.4 var(--f-ui); -webkit-font-smoothing: antialiased; overflow: hidden; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
:focus-visible { outline: 2px solid var(--solid); outline-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; }
.mono { font-family: var(--f-mono); font-size: 11px; line-height: 1; font-weight: 400; }
.eyebrow { font: 600 11px/1 var(--f-ui); letter-spacing: .24em; color: var(--ink-2); white-space: nowrap; }
.label { font: 600 10.5px/1 var(--f-ui); letter-spacing: .22em; color: var(--muted); white-space: nowrap; }
.hint { font-size: 12px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.hint:empty { display: none; }
.lede { font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; padding-bottom: 4px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
.chev-r, .chev-l { display: inline-block; width: 7px; height: 7px; border-top: 1.75px solid currentColor; border-right: 1.75px solid currentColor; }
.chev-r { transform: translateX(-1.5px) rotate(45deg); }
.chev-l { transform: translateX(1.5px) rotate(-135deg); }
@media (min-width: 821px) { .mobile-only { display: none !important; } }
@media (max-width: 820px) { .desktop-only { display: none !important; } }

/* ---------- buttons ---------- */
.pill-btn { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; transition: background .15s, border-color .15s; }
.pill-btn:hover:not(:disabled) { background: var(--surface-2); }
.pill-btn.solid { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.pill-btn.solid:hover:not(:disabled) { background: var(--solid-hover); }
.pill-btn.wide { width: 100%; }
.pill-btn.tall { height: 42px; font-size: 13px; }
.pill-btn.span { grid-column: 1 / -1; }
.primary-btn { flex: 1; height: 42px; border: 0; border-radius: 999px; background: var(--solid); color: var(--on-solid); font: 600 13px var(--f-ui); transition: background .15s; }
.primary-btn:hover { background: var(--solid-hover); }
.chip-btn { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg); font: 600 12px var(--f-ui); color: var(--ink-2); white-space: nowrap; }
.chip-btn:hover { background: var(--surface-2); color: var(--ink); }
.link-btn { border: 0; background: none; padding: 0; font: 600 12px var(--f-ui); color: var(--ink-2); border-bottom: 1px solid var(--tick); align-self: flex-start; }
.link-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--ink); }
.link-btn.plain { border-bottom: 0; }
.link-btn.danger { color: var(--danger); border-color: transparent; }
.link-btn.end { align-self: flex-end; }
.link-row { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.link-row .link-btn { border-bottom: 0; }
.icon-btn { width: 28px; height: 28px; border: 0; background: none; border-radius: 6px; color: var(--muted); font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn.is-on { color: var(--ink); }
.round-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: none; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ghost-btn { min-height: 36px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.ghost-btn:hover:not(:disabled) { background: var(--surface-2); }

/* ---------- segmented, checkbox, sliders ---------- */
.seg { display: flex; background: var(--surface-2); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { flex: 1; min-width: 0; padding: 7px 0; border: 0; border-radius: 999px; background: none; font-size: 12px; font-weight: 600; color: var(--muted); transition: background .15s, color .15s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-soft); }
.check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--on-solid); }
.check input:checked + .box { background: var(--solid); border-color: var(--solid); }
.check input:checked + .box::after { content: '✓'; }
.check input:focus-visible + .box { outline: 2px solid var(--solid); outline-offset: 2px; }
.slider { display: flex; flex-direction: column; gap: 8px; }
.slider-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; }
.slider-head label, .field-label { color: var(--ink-2); font-size: 12.5px; }
.slider-head output { color: var(--ink); }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 16px; margin: 0; cursor: pointer; background:
    linear-gradient(var(--solid), var(--solid)) 0 50% / var(--p, 0%) 2px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 50% / 100% 2px no-repeat;
}
input[type="range"].bipolar {
  background:
    linear-gradient(var(--tick), var(--tick)) 50% 50% / 1px 10px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 50% / 100% 2px no-repeat;
}
input[type="range"]::-webkit-slider-runnable-track { height: 16px; background: transparent; }
input[type="range"]::-moz-range-track { height: 16px; background: transparent; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--solid); box-shadow: 0 1px 3px #0B0B0C1F; }
input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--solid); box-shadow: 0 1px 3px #0B0B0C1F; }
input[type="range"]:disabled { opacity: .4; cursor: not-allowed; }
input[type="range"]:focus-visible { outline-offset: 4px; }

/* ---------- app frame ---------- */
#app { height: 100dvh; display: grid; grid-template-rows: 64px minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); background: var(--bg); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 28px; border-bottom: 1px solid var(--line); min-width: 0; }
.brand { display: flex; flex-direction: column; gap: 2px; font: 600 12px/1 var(--f-ui); letter-spacing: .32em; white-space: nowrap; }
.brand span + span { color: var(--faint); }
.mode-switch { display: flex; background: var(--surface-2); border-radius: 999px; padding: 4px; gap: 2px; }
.mode-switch button { padding: 9px 20px; border: 0; border-radius: 999px; background: none; font: 600 12px/1 var(--f-ui); letter-spacing: .14em; color: var(--ink-2); transition: background .2s, color .2s; }
.mode-switch button[aria-selected="true"] { background: var(--solid); color: var(--on-solid); }
.mode-switch .sm { display: none; }
.top-actions { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--ink-2); min-width: 0; }
.theme-switch { display: flex; gap: 10px; }
.theme-switch button { border: 0; background: none; padding: 0 0 3px; font: 600 11px/1 var(--f-ui); letter-spacing: .16em; color: var(--faint); border-bottom: 1px solid transparent; }
.theme-switch button[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.top-divider { width: 1px; height: 20px; background: var(--line); }
.save-status { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.save-status.is-error .status-dot { background: var(--danger); }
.save-status.is-error { color: var(--danger); }

.shell {
  --tools-w: 320px; --order-w: 360px;
  position: relative; min-height: 0; display: grid;
  grid-template-columns: 104px var(--tools-w) minmax(0, 1fr) var(--order-w);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "rail tools stage order";
}
#app.tools-closed .shell { --tools-w: 0px; }
#app.tools-closed .tools { display: none; }
#app.order-closed .shell { --order-w: 0px; }
#app.order-closed .order { display: none; }
#app[data-mode="tryon"] .shell { grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: "tpanel stage"; }
#app[data-mode="tryon"] .rail, #app[data-mode="tryon"] .tools, #app[data-mode="tryon"] .order, #app[data-mode="tryon"] .edge-btn { display: none; }
.sheet { display: contents; }
.sheet-grab { display: none; }

/* ---------- step rail ---------- */
.rail { grid-area: rail; position: relative; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--bg); min-height: 0; }
.rail-stitch { position: absolute; left: 47px; top: 42px; height: 336px; border-left: 2px dashed var(--line-strong); pointer-events: none; }
.rail-stitch.is-done { height: calc(var(--step, 0) * 84px); border-color: var(--solid); transition: height .3s ease; }
.rail-steps { display: flex; flex-direction: column; }
.rail-step { position: relative; height: 84px; width: 100%; flex: none; border: 0; border-bottom: 1px solid var(--line-2); padding: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.rail-step .step-circle { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 600 14px/1 var(--f-display); letter-spacing: -.01em; color: var(--faint); background: var(--bg); border: 1px solid var(--line-strong); transition: background .2s, color .2s; }
.rail-step .step-label { position: relative; z-index: 1; font: 600 10px/1.2 var(--f-ui); letter-spacing: .16em; color: var(--faint); background: inherit; padding: 2px 5px; }
.rail-step.is-done .step-circle { color: var(--ink); border: 1.5px solid var(--solid); }
.rail-step.is-done .step-label { color: var(--ink-2); }
.rail-step.is-current { background: var(--surface); box-shadow: inset 2px 0 0 var(--solid); }
.rail-step.is-current .step-circle { background: var(--solid); color: var(--on-solid); border: 0; }
.rail-step.is-current .step-label { color: var(--ink); }
.rail-step:hover:not(.is-current) .step-label { color: var(--ink-2); }
.rail-help { margin-top: auto; height: 64px; flex: none; border: 0; border-top: 1px solid var(--line-2); background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font: 600 10px/1.2 var(--f-ui); letter-spacing: .16em; color: var(--muted); }
.help-q { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); font: 600 13px/24px var(--f-ui); letter-spacing: 0; text-align: center; color: var(--ink-2); }
.rail-help:hover .help-q { border-color: var(--solid); color: var(--ink); }

/* ---------- tools panel ---------- */
.tools, .tryon-panel { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--bg); border-right: 1px solid var(--line); }
.tools { grid-area: tools; }
.tryon-panel { grid-area: tpanel; }
.tools-head { padding: 18px 22px 16px; border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 12px; column-gap: 10px; }
.tools-head h2 { grid-column: 1 / -1; font: 600 22px/1 var(--f-display); letter-spacing: -.01em; }
.tools-head-actions { grid-row: 1; grid-column: 2; display: flex; gap: 6px; }
.tools-body { flex: 1; min-height: 0; overflow: auto; padding: 18px 22px; scrollbar-width: thin; }
.tools-foot { padding: 14px 22px 18px; border-top: 1px solid var(--line-2); display: flex; align-items: center; gap: 14px; }
.pane { display: flex; flex-direction: column; gap: 10px; }
.block { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line-2); }
.block.first { border-top: 0; padding-top: 0; }
.block-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pane[data-pane="artwork"], .pane[data-pane="text"], .pane[data-pane="review"] { gap: 0; }
fieldset.settings { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.settings:disabled { opacity: .5; }
.edge-btn { position: absolute; top: 50%; width: 22px; height: 64px; margin-top: -32px; border: 1px solid var(--line-strong); background: var(--bg); font: 600 18px/1 var(--f-ui); color: var(--ink); padding: 0 0 2px; z-index: 5; box-shadow: 2px 0 6px #0B0B0C0F; }
.edge-btn:hover { background: var(--surface-2); }
.edge-left, .edge-open-left { border-left: 0; border-radius: 0 10px 10px 0; }
.edge-left { right: -23px; }
.edge-open-left { left: 0; }
.edge-right, .edge-open-right { border-right: 0; border-radius: 10px 0 0 10px; box-shadow: -2px 0 6px #0B0B0C0F; }
.edge-right { left: -23px; }
.edge-open-right { right: 0; }

/* style */
.style-list { display: flex; flex-direction: column; gap: 10px; }
.style-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); text-align: left; transition: box-shadow .15s, background .15s; }
.style-card:hover { box-shadow: inset 0 0 0 1px var(--tick); }
.style-card[aria-pressed="true"] { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--solid); }
.style-thumb { width: 112px; height: 56px; flex: none; border-radius: 8px; overflow: hidden; background: var(--surface-2); display: block; }
/* Thumbnails are 2:1 renders (¾ front + ¾ rear) with the studio sweep baked in. */
.style-thumb:has(img) { background: #EEEEEB; }
.style-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.style-thumb.is-fallback { background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M14 27c0-10 8-18 18-18s18 8 18 18' fill='%2396A0AA'/%3E%3Cpath d='M12 27h40c4 0 8 2 9 4H10c0-2 1-4 2-4z' fill='%236F7580'/%3E%3C/svg%3E") center / 64% no-repeat; }
.style-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.style-text strong { font-size: 13.5px; font-weight: 600; }
.style-sub { font-size: 12px; color: var(--muted); }
.style-tag, .card-check { display: none; }
.card-check { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; border-radius: 50%; background: var(--solid); color: var(--on-solid); font-size: 10px; font-weight: 700; align-items: center; justify-content: center; }

/* color */
.color-current { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: var(--surface); }
.cc-swatch { width: 44px; height: 44px; flex: none; border-radius: 10px; box-shadow: inset 0 0 0 1px #0B0B0C1A; transition: background .3s; }
.cc-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cc-text strong { font: 600 16px/1 var(--f-display); letter-spacing: -.01em; }
.cc-text .mono { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.color-scroll { position: relative; padding-top: 6px; }
.color-groups { display: flex; flex-direction: column; gap: 16px; }
.color-group { display: flex; flex-direction: column; gap: 10px; }
.group-label .rule { display: none; }
.swatch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
.swatch-btn { border: 0; background: none; padding: 0; display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 0; }
.swatch-chip { height: 40px; border-radius: 9px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px #0B0B0C1A; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; transition: box-shadow .15s; }
.swatch-btn:hover .swatch-chip { box-shadow: inset 0 0 0 1px #0B0B0C1A, 0 0 0 2px var(--bg), 0 0 0 3px var(--tick); }
.swatch-btn[aria-pressed="true"] .swatch-chip { box-shadow: inset 0 0 0 1px #0B0B0C1A, 0 0 0 2px var(--bg), 0 0 0 3.5px var(--solid); }
.swatch-btn[aria-pressed="true"] .swatch-chip::after { content: '✓'; text-shadow: 0 0 3px #0000004D; }
.swatch-name { font-size: 11.5px; line-height: 1.1; text-align: center; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swatch-btn[aria-pressed="true"] .swatch-name { color: var(--ink); font-weight: 600; }
.color-more { position: absolute; right: 4px; top: 28px; width: 28px; height: 36px; border-radius: 9px; border: 0; background: var(--glass); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); box-shadow: inset 0 0 0 1px #0B0B0C1A, 0 2px 8px #0B0B0C14; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.color-more:active { transform: scale(.94); }

/* artwork */
.upload-card { width: 100%; border-radius: 14px; border: 1.5px dashed var(--dash); background: var(--bg); padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 14px; text-align: left; transition: background .15s, border-color .15s; }
.upload-card:hover:not(:disabled), .upload-card.is-drop { background: var(--surface); border-color: var(--solid); }
.upload-row { display: flex; align-items: center; gap: 12px; }
.plus-tile { position: relative; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--solid); }
.plus-tile::before, .plus-tile::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--on-solid); border-radius: 1px; }
.plus-tile::before { width: 14px; height: 1.75px; margin: -.875px 0 0 -7px; }
.plus-tile::after { width: 1.75px; height: 14px; margin: -7px 0 0 -.875px; }
.upload-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.upload-text strong { font: 600 14px/1 var(--f-display); letter-spacing: -.01em; }
.upload-text > span { font-size: 12px; line-height: 1.2; color: var(--muted); }
.upload-text u { text-decoration: none; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--tick); }
.format-row { display: flex; align-items: center; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.fmt { padding: 4px 5px; border-radius: 5px; background: var(--surface-2); font: 500 10px/1 var(--f-mono); color: var(--ink-2); }
.fmt-size { margin-left: auto; white-space: nowrap; font: 400 10px/1 var(--f-mono); color: var(--faint); }
.tip { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--surface); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.tip > span:first-child { font-size: 14px; line-height: 1.3; }
.pane[data-pane="artwork"] .block.first { gap: 10px; }
.layer-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.layer-list:empty { display: none; }
.layer { display: flex; align-items: center; gap: 4px; padding: 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.layer.is-selected { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--solid); }
.layer.is-hidden-layer .layer-thumb, .layer.is-hidden-layer .layer-text { opacity: .45; }
.layer-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; text-align: left; }
.layer-thumb { width: 36px; height: 36px; flex: none; border-radius: 6px; background: repeating-linear-gradient(45deg, var(--checker-a) 0 5px, var(--checker-b) 5px 10px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.layer-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.layer-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.layer-text strong { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer-text .mono { color: var(--faint); white-space: nowrap; }
.size-row { display: flex; align-items: center; gap: 10px; }
.num-field { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--line-strong); border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; cursor: text; }
.num-field:focus-within { border-color: var(--solid); }
.num-field input { width: 100%; min-width: 0; border: 0; background: none; font-size: 14px; font-weight: 600; padding: 0; outline: none; -moz-appearance: textfield; }
.num-field input::-webkit-outer-spin-button, .num-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num-field .mono { color: var(--faint); white-space: nowrap; }

/* text */
.text-field, .name-field { width: 100%; border-radius: 10px; background: transparent; padding: 0 12px; outline: none; }
.text-field { height: 44px; border: 1.5px solid var(--solid); font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.text-field::placeholder { color: var(--faint); }
.name-field { height: 40px; border: 1px solid var(--line-strong); font: 600 14px/1 var(--f-display); letter-spacing: -.01em; }
.name-field:focus { border-color: var(--solid); }
.pane[data-pane="text"] .block.first, .pane[data-pane="review"] .block.first { gap: 8px; }
.count { color: var(--faint); align-self: flex-end; }
.text-settings { transition: opacity .2s; }
.text-settings.is-disabled { opacity: .45; }
.font-list { display: flex; flex-direction: column; gap: 6px; }
.font-option { display: flex; justify-content: space-between; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.font-option:hover { box-shadow: inset 0 0 0 1px var(--tick); }
.font-option[aria-pressed="true"] { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--solid); }
.font-sample { font-size: 15px; font-weight: 700; }
.font-name { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.thread-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
/* Text outlines: one row per outline (colour chips + thickness). */
.outline-list { display: flex; flex-direction: column; gap: 8px; }
.outline-list:empty { display: none; }
.outline-row { display: grid; gap: 10px; padding: 10px 12px 12px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.outline-head { display: flex; align-items: center; gap: 10px; }
.outline-name { font: 600 13px/1 var(--f-ui); color: var(--ink); }
.outline-head output { margin-left: auto; font-size: 12px; color: var(--muted); }
.outline-head .link-btn { font-size: 12px; }
.outline-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.outline-chip { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px #0B0B0C26; }
.outline-chip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--solid); }
.outline-width { width: 100%; }

/* review */
.checklist { display: flex; flex-direction: column; }
.check-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.check-mark { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-strong); font-size: 10px; line-height: 15px; text-align: center; }
.check-mark.is-done { border-color: var(--solid); }
.check-label { color: var(--muted); width: 58px; flex: none; }
.check-value { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check-row .link-btn { align-self: center; }
.design-list { display: flex; flex-direction: column; }
.design-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.design-thumb { width: 44px; height: 36px; border-radius: 6px; background: var(--surface-2); overflow: hidden; flex: none; }
.design-thumb img { width: 100%; height: 100%; object-fit: cover; }
.design-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.design-meta strong { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.design-meta .mono { color: var(--faint); }
.menu { position: relative; }
.menu summary { list-style: none; width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--faint); cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { background: var(--surface-2); color: var(--ink); }
.menu-list { position: absolute; right: 0; top: 30px; z-index: 10; min-width: 150px; padding: 6px; border-radius: 10px; background: var(--bg); box-shadow: 0 0 0 1px var(--line), var(--shadow-pop); display: flex; flex-direction: column; }
.menu-list button { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; }
.menu-list button:hover { background: var(--surface-2); }
.menu-list .danger { color: var(--danger); }

/* ---------- stage ---------- */
.stage { grid-area: stage; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--stage); container: stage / inline-size; }
.viewer { position: absolute; inset: 0; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
.viewer.is-drop::after { content: ''; position: absolute; inset: 12px; border: 2px dashed var(--solid); border-radius: 16px; pointer-events: none; }
/* Selected artwork/text on the hat: frame, corner handles, name tag, remove. */
.selection-box { position: absolute; z-index: 2; pointer-events: none; border: 1.5px solid #FAFAF8; border-radius: 4px; box-shadow: 0 0 0 1px #11121440, inset 0 0 0 1px #11121440; animation: sel-in .18s ease-out; }
.selection-box.is-locked { border-style: dashed; }
.sel-handle { position: absolute; width: 8px; height: 8px; margin: -4px; background: #FAFAF8; border: 1px solid #111214; border-radius: 2px; }
.sel-handle.bl { left: 0; top: 100%; }
.sel-tag { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -10px); display: flex; align-items: center; gap: 6px; max-width: 220px; padding: 6px 10px; border-radius: 999px; background: #111214; color: #FAFAFA; font: 600 10px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 8px #0B0B0C33; }
.sel-tag .status-dot { background: var(--ok-bright); }
.sel-tag #selection-label { overflow: hidden; text-overflow: ellipsis; }
.selection-box.is-below .sel-tag { bottom: auto; top: 100%; transform: translate(-50%, 10px); }
.sel-btn { position: absolute; width: 28px; height: 28px; margin: -14px; border: 0; border-radius: 50%; background: #FAFAF833; backdrop-filter: blur(6px) saturate(1.3); -webkit-backdrop-filter: blur(6px) saturate(1.3); color: #0B0B0C; font: 600 14px/1 var(--f-ui); text-shadow: 0 0 3px #FAFAF8, 0 0 1px #FAFAF8; display: flex; align-items: center; justify-content: center; padding: 0; pointer-events: auto; touch-action: none; box-shadow: inset 0 0 0 1.5px #FAFAF8CC, 0 0 0 1px #0B0B0C33; transition: background .15s, color .15s; }
.sel-btn:hover, .sel-btn.is-active { background: #111214CC; color: #FAFAFA; text-shadow: none; }
.sel-rotate { left: 0; top: 0; cursor: grab; }
.sel-remove { left: 100%; top: 0; font-size: 11px; }
.sel-scale { left: 100%; top: 100%; font-size: 13px; cursor: nwse-resize; }
.sel-rotate.is-active { cursor: grabbing; }
.selection-box.is-locked .sel-btn:not(.sel-remove) { display: none; }
.selection-box.is-locked .sel-remove, .selection-box.is-locked .sel-handle { display: none; }
@keyframes sel-in { from { opacity: 0; } }
.drop-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: 999px; background: var(--solid); color: var(--on-solid); font-size: 13px; font-weight: 600; pointer-events: none; z-index: 3; }
.loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--stage); color: var(--muted); font-size: 13px; z-index: 4; transition: opacity .5s ease; text-align: center; padding: 20px; }
.loader.is-hidden { opacity: 0; pointer-events: none; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--solid); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 999px; background: #111214; color: #FAFAFA; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-pop); z-index: 20; max-width: calc(100% - 32px); }
.toast .status-dot { width: 7px; height: 7px; background: var(--ok-bright); }
.toast-msg { overflow: hidden; text-overflow: ellipsis; }
.toast button { border: 0; background: #FAFAF81F; color: #FAFAFA; border-radius: 999px; padding: 6px 12px; font: 600 12px var(--f-ui); }
.history-bar { position: absolute; left: 24px; bottom: 18px; display: flex; gap: 8px; z-index: 2; }
.history-bar button { display: flex; align-items: center; gap: 4px; padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); font-size: 13px; font-weight: 600; color: var(--ink); }
.history-bar button:hover:not(:disabled) { background: var(--surface-2); }
.history-bar button:disabled { opacity: 1; color: var(--tick); border-color: var(--line); }
.view-bar { position: absolute; right: 24px; bottom: 22px; display: flex; align-items: center; gap: 14px; font-size: 12.5px; white-space: nowrap; z-index: 2; }
.view-list { display: flex; gap: 14px; }
.view-btn, .view-tool { border: 0; background: none; padding: 5px 0 3px; font-size: 12.5px; color: var(--faint); border-bottom: 1.5px solid transparent; }
.view-btn:hover { color: var(--ink-2); }
.view-btn[aria-pressed="true"] { color: var(--ink); font-weight: 600; border-color: var(--ink); }
.view-tool { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.view-tool span { font-size: 14px; }
.view-tool:hover, .view-tool[aria-pressed="true"] { color: var(--ink); }
.view-tool[aria-pressed="true"] { font-weight: 600; border-color: var(--ink); }
.view-divider { width: 1px; height: 16px; background: var(--line-strong); }
.view-pager, .view-stack { display: none; }
/* The viewport controls follow the 3D area's own width, so open side panels on
   a laptop get the same compact layout as a phone instead of overlapping. */
@container stage (max-width: 879px) {
  .view-bar { display: none; }
  .history-bar { left: 12px; bottom: 20px; }
  .view-stack { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
  .view-pager { position: absolute; right: 12px; bottom: 20px; display: flex; z-index: 2; }
  .pager button { width: 40px; }
  .pager-mid { min-width: 70px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .pager-mid > span:first-child { font: 600 14px/1 var(--f-ui); white-space: nowrap; }
  .dots { display: flex; gap: 3px; }
  .dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--tick); transition: width .2s; }
  .dots span.is-on { width: 12px; border-radius: 2px; background: var(--solid); }
  .view-stack button[aria-pressed="true"] { color: var(--on-solid); background: var(--solid); border-radius: 50%; }
}
@container stage (max-width: 419px) {
  .history-bar { left: 10px; gap: 6px; }
  .view-pager { right: 10px; }
  .pager button { width: 34px; }
  .pager-mid { min-width: 60px; }
}
.glass { height: 44px; display: flex; align-items: center; border-radius: 999px; background: var(--glass); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 2px 10px #0B0B0C0F; }
.glass button { width: 44px; height: 44px; border: 0; background: none; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--ink); }
.glass.round { width: 44px; justify-content: center; }

/* ---------- order ---------- */
.order { grid-area: order; position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--bg); border-left: 1px solid var(--line); }
.order-head { padding: 22px 24px 18px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line-2); }
.order-head h2 { font: 600 23px/1 var(--f-display); letter-spacing: -.01em; }
.order-body { flex: 1; min-height: 0; overflow: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; scrollbar-width: thin; }
.qty-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.stepper { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; }
.stepper button { width: 32px; padding: 8px 0; border: 0; background: none; color: var(--muted); font-size: 14px; }
.stepper button:hover:not(:disabled) { color: var(--ink); }
.stepper input { width: 44px; border: 0; background: none; text-align: center; font-weight: 600; padding: 0; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.price strong { font: 600 29px/1 var(--f-display); letter-spacing: -.01em; }
.price span { font-size: 12px; color: var(--muted); }
#tier-note { font-size: 12.5px; margin-top: -8px; }
#tier-note b { color: var(--ink); font-weight: 600; }
.delivery { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--soft); }
.delivery strong { font: 600 16px/1.1 var(--f-display); letter-spacing: -.01em; }
.delivery > span:last-child { font-size: 12.5px; color: var(--muted); }
.delivery u { text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--tick); }
.order .btn-grid .pill-btn { height: 40px; font-size: 13px; }
.summary { display: flex; flex-direction: column; }
.summary .eyebrow { padding-bottom: 6px; }
.summary-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.summary-top strong { font-weight: 600; }
.summary-color { display: flex; align-items: center; gap: 8px; color: var(--muted); white-space: nowrap; }
.summary-color .dot, .order-text .dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px #0B0B0C1A; flex: none; }
.spec-list { margin: 0; padding: 10px 0 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.spec-list li { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.spec-list li::before { content: ''; width: 4px; height: 4px; flex: none; border-radius: 50%; background: var(--faint); transform: translateY(-3px); }
.in-order { display: flex; flex-direction: column; gap: 10px; }
.in-order .mono { color: var(--muted); }
.order-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.order-card { position: relative; border-radius: 12px; padding: 5px; display: flex; flex-direction: column; gap: 7px; cursor: pointer; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s, background .15s; }
.order-card:hover { box-shadow: inset 0 0 0 1px var(--tick); }
.order-card.is-active { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--solid); cursor: default; }
.order-plate { display: block; height: 64px; border-radius: 8px; overflow: hidden; background: var(--plate); }
.order-plate img { width: 100%; height: 100%; object-fit: contain; }
.order-text { display: flex; flex-direction: column; gap: 4px; padding: 0 3px 3px; min-width: 0; }
.order-text strong { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-text .mono { display: flex; align-items: center; gap: 5px; font-size: 9.5px; letter-spacing: .04em; color: var(--faint); white-space: nowrap; overflow: hidden; }
.order-text .dot { width: 7px; height: 7px; }
.order-card .card-check { display: flex; }
.card-remove { position: absolute; top: 9px; right: 9px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: #FAFAF8CC; color: #354155; font-size: 10px; padding: 0; box-shadow: 0 0 0 1px #0B0B0C1A; }
.card-remove:hover { background: #111214; color: #FAFAFA; }
.add-card { width: 100%; height: 100%; min-height: 104px; border-radius: 12px; border: 1.5px dashed var(--dash); background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font: 600 12.5px var(--f-ui); color: var(--ink-2); }
.add-card:hover { border-color: var(--solid); color: var(--ink); }
.add-plus { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--ink); }
.order-add.is-open { grid-column: 1 / -1; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.add-head { display: flex; justify-content: space-between; align-items: baseline; }
.add-head strong { font: 600 14px/1 var(--f-display); letter-spacing: -.01em; }
.add-option { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-strong); text-align: left; color: var(--ink); }
.add-option:hover { box-shadow: inset 0 0 0 1.5px var(--solid); }
.add-glyph { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.add-copy { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.add-copy strong { font-size: 13px; font-weight: 600; }
.add-copy span { font-size: 11.5px; color: var(--muted); }
.add-option .chev-r { width: 6px; height: 6px; margin-right: 4px; }
.order-foot { padding: 16px 24px 20px; border-top: 1px solid var(--line-2); }
.cart-btn { width: 100%; height: 52px; border: 0; border-radius: 999px; background: var(--solid); color: var(--on-solid); font: 600 12px/1 var(--f-ui); letter-spacing: .2em; transition: background .15s; }
.cart-btn:hover { background: var(--solid-hover); }

/* ---------- try-on ---------- */
.tryon { position: absolute; inset: 0; background: #1B1C1F; overflow: hidden; color: #FAFAFA; }
.ar-stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: radial-gradient(ellipse 50% 60% at 50% 52%, #34363B, #1B1C1F 75%); touch-action: none; }
#cam, #ar { position: absolute; inset: 0; width: 100%; height: 100%; }
#cam { object-fit: cover; transform: scaleX(-1); }
#ar { transform: scaleX(-1); pointer-events: none; }
.tryon.is-unmirrored #cam, .tryon.is-unmirrored #ar { transform: none; }
.ar-guide { position: absolute; left: 50%; top: 50%; width: 300px; height: 390px; margin: -195px 0 0 -150px; border: 2px dashed #FAFAF84D; border-radius: 50%; pointer-events: none; }
.tryon:has(.ar-badge[data-phase="tracking"]) .ar-guide { display: none; }
.ar-stage.is-flash::after { content: ''; position: absolute; inset: 0; background: #fff; animation: flash .35s ease-out forwards; pointer-events: none; }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }
.ar-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; background: #1B1C1FE6; color: #FAFAF8CC; font-size: 14px; line-height: 1.5; z-index: 3; transition: opacity .4s; }
.ar-status.is-hidden { display: none; }
.ar-status[data-phase="searching"] { inset: auto 50% 150px auto; transform: translateX(50%); width: max-content; max-width: calc(100% - 32px); padding: 10px 14px; border-radius: 12px; background: #111214CC; font-size: 12.5px; pointer-events: none; }
.ar-badge { position: absolute; left: 24px; top: 20px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #111214CC; color: #FAFAFA; font-size: 12.5px; font-weight: 600; white-space: nowrap; z-index: 4; }
.ar-badge .status-dot { width: 7px; height: 7px; background: #969EAA; }
.ar-badge[data-phase="tracking"] .status-dot { background: var(--ok); }
.ar-badge[data-phase="error"] .status-dot { background: oklch(0.62 0.15 25); }
#ar-retry { position: absolute; left: 50%; bottom: 130px; transform: translateX(-50%); z-index: 5; background: #FAFAF8; color: #0B0B0C; border-color: #FAFAF8; }
.ar-cart { position: absolute; right: 24px; top: 20px; padding: 9px 16px; border: 0; border-radius: 999px; background: #FAFAF8; color: #0B0B0C; font: 600 11.5px/1 var(--f-ui); letter-spacing: .16em; white-space: nowrap; z-index: 4; }
.ar-countdown { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 600 96px/1 var(--f-display); color: #FAFAFA; text-shadow: 0 2px 16px #00000080; z-index: 6; pointer-events: none; }
.ar-bottom { position: absolute; left: 0; right: 0; bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 4; pointer-events: none; }
.ar-bottom > * { pointer-events: auto; }
.ar-controls { display: flex; align-items: center; justify-content: center; gap: 28px; }
.ar-round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #FAFAF84D; background: none; color: #FAFAFA; font-size: 16px; display: flex; align-items: center; justify-content: center; padding: 0; }
.ar-round.mono { font: 500 12px/1 var(--f-mono); }
.ar-round:hover { background: #FAFAF81A; }
.ar-round[aria-pressed="false"] { opacity: .6; }
.shutter { width: 68px; height: 68px; border-radius: 50%; border: 3px solid #FAFAFA; background: none; display: flex; align-items: center; justify-content: center; padding: 0; }
.shutter span { width: 52px; height: 52px; border-radius: 50%; background: #FAFAFA; transition: transform .1s; }
.shutter:active span { transform: scale(.9); }
.ar-color { position: absolute; right: 24px; bottom: 36px; display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: #FAFAF899; z-index: 4; }
.ar-color-dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px #1B1C1F, 0 0 0 3.5px #FAFAFA; }
.ar-color strong { color: #FAFAFA; font-weight: 600; }
.tracking { display: flex; align-items: center; gap: 6px; color: var(--faint); }
.tracking .status-dot { background: var(--faint); }
.tracking[data-phase="tracking"] { color: var(--ok-ink); }
.tracking[data-phase="tracking"] .status-dot { background: var(--ok); }
#fit-sliders { display: flex; flex-direction: column; gap: 14px; }
.tryon-panel .block .slider + .slider { margin-top: 0; }
.snap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.snap { aspect-ratio: 1; border-radius: 8px; border: 0; padding: 0; background: repeating-linear-gradient(45deg, var(--checker-a) 0 5px, var(--checker-b) 5px 10px) center / cover; box-shadow: inset 0 0 0 1px var(--line); }
.snap:not(.is-empty) { background-size: cover; }
.snap.is-empty { background: none; border: 1px dashed var(--line-strong); box-shadow: none; }
.snap.is-empty:hover { border-color: var(--solid); }
.tryon-panel .tools-foot .pill-btn { flex: 1; }

/* ---------- dialogs ---------- */
.modal, .artwork-picker, #production-dialog { border: 0; border-radius: 16px; padding: 22px; background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 20px 60px #0B0B0C40; width: min(460px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); overflow: auto; }
.modal::backdrop, .artwork-picker::backdrop, #production-dialog::backdrop { background: #0B0B0C59; }
.modal-head, .upload-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.modal-head h2, .upload-heading h2 { font: 600 20px/1.1 var(--f-display); letter-spacing: -.01em; }
.help-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.help-list li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); }
.help-list strong { color: var(--ink); font-weight: 600; }
.preview-dialog { width: min(760px, calc(100vw - 28px)); }
.preview-dialog img { display: block; width: 100%; max-height: calc(100dvh - 180px); object-fit: contain; border-radius: 10px; background: var(--surface-2); margin: 14px 0; }
.upload-sources { display: grid; gap: 8px; margin: 16px 0; }
.upload-sources .ghost-btn { display: grid; gap: 4px; text-align: left; padding: 14px; border-radius: 12px; min-height: 64px; }
.upload-sources strong { font-size: 14px; }
.upload-sources span { font-size: 12px; color: var(--muted); font-weight: 400; }
#production-dialog { width: min(920px, calc(100vw - 28px)); }
#production-dialog label { display: block; font-size: 12.5px; color: var(--ink-2); margin: 10px 0 4px; }
#production-dialog input:not([type=checkbox]), #production-dialog textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; }
#production-dialog table { width: 100%; border-collapse: collapse; font-size: 12px; }
#production-dialog td, #production-dialog th { padding: 6px; border-bottom: 1px solid var(--line-2); text-align: left; }
#production-pages canvas { max-width: 100%; height: auto; border: 1px solid var(--line); margin: 8px 0; }
.production-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.production-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.design-file-progress:not([hidden]) { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--ink); font-size: 16px; cursor: progress; }

/* ---------- mobile ---------- */
@media (max-width: 820px) {
  #app { grid-template-rows: 52px minmax(0, 1fr); height: 100dvh; }
  .topbar { padding: 0 16px; gap: 10px; }
  .brand { font-size: 10px; letter-spacing: .3em; }
  .mode-switch { padding: 3px; }
  .mode-switch button { padding: 8px 12px; font-size: 10.5px; letter-spacing: .12em; }
  .mode-switch .lg { display: none; }
  .mode-switch .sm { display: inline; }
  .top-actions { gap: 6px; }
  .save-status { gap: 0; }
  .save-status .status-dot { width: 8px; height: 8px; }
  .save-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  .shell, #app[data-mode="tryon"] .shell { display: flex; flex-direction: column; }
  .stage { order: 1; flex: 1; }
  .sheet { order: 2; display: flex; flex-direction: column; flex: none; position: relative; z-index: 2; margin-top: -12px; background: var(--bg); border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; box-shadow: 0 -6px 20px #0B0B0C0F; padding-bottom: env(safe-area-inset-bottom); }
  #app[data-mode="tryon"] .sheet, .tryon-panel { display: none !important; }
  .sheet-grab { display: flex; height: 16px; border: 0; background: none; align-items: center; justify-content: center; padding: 0; flex: none; touch-action: none; }
  .sheet-grab span { width: 40px; height: 5px; border-radius: 3px; background: var(--dash); }
  #app.tools-closed .tools { display: flex; }

  .rail { flex-direction: row; height: 48px; padding: 0 22px; border: 0; background: none; touch-action: pan-x; }
  .rail-stitch { left: 46px; right: 46px; top: 14px; height: 0; border-left: 0; border-top: 2px dashed var(--line-strong); }
  .rail-stitch.is-done { right: auto; height: 0; width: calc((100% - 92px) * var(--step, 0) / 4); border-color: var(--solid); transition: width .3s ease; }
  .rail-steps { position: relative; flex: 1; flex-direction: row; justify-content: space-between; }
  .rail-step { width: 48px; height: auto; border: 0; background: none !important; box-shadow: none !important; gap: 4px; justify-content: flex-start; }
  .rail-step .step-circle { width: 30px; height: 30px; font-size: 12px; }
  .rail-step .step-label { font-size: 8.5px; letter-spacing: .12em; padding: 0; background: none; }

  .tools { border: 0; background: none; }
  .tools-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 20px 8px; border-bottom: 1px solid var(--line-2); }
  .tools-head .eyebrow { display: none; }
  .tools-head h2 { font-size: 16px; order: -1; }
  .tools-body { max-height: min(38dvh, 300px); padding: 12px 20px; }
  .sheet[data-open="false"] .tools-head, .sheet[data-open="false"] .tools-body { display: none; }
  .tools-foot { height: 56px; padding: 0 16px; border-top: 1px solid var(--line-2); }
  .foot-price { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); padding: 7px 10px; text-align: left; }
  .foot-price:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .foot-price strong { font: 600 16px/1 var(--f-display); color: var(--ink); }
  .foot-price span { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--ink); }
  .tools-foot .primary-btn { flex: none; margin-left: auto; height: 40px; padding: 0 18px; }

  /* mobile step layouts */
  .style-list { flex-direction: row; overflow-x: auto; gap: 8px; margin: 0 -2px; padding: 2px; scrollbar-width: none; }
  .style-list::-webkit-scrollbar, .color-groups::-webkit-scrollbar { display: none; }
  .style-card { width: 112px; flex: none; flex-direction: column; align-items: stretch; gap: 7px; padding: 5px; }
  .style-thumb { width: 100%; height: 52px; }
  .style-text { padding: 0 3px 2px; gap: 3px; }
  .style-text strong { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .style-sub { display: none; }
  .style-tag { display: block; font-size: 9.5px; letter-spacing: .04em; color: var(--faint); white-space: nowrap; }
  .style-card[aria-pressed="true"] .card-check { display: flex; }
  .lede { display: none; }
  .pane[data-pane="color"] { flex-direction: column-reverse; gap: 8px; }
  .color-current { background: none; padding: 2px; justify-content: space-between; }
  .cc-swatch { display: none; }
  .cc-text { flex-direction: row; align-items: baseline; justify-content: space-between; flex: 1; gap: 12px; }
  .cc-text strong { font-size: 14px; }
  .color-scroll { margin: 0 -4px; padding-top: 0; }
  .color-groups { flex-direction: row; gap: 18px; overflow-x: auto; padding: 4px 44px 4px 14px; scrollbar-width: none; }
  .color-group { flex: none; position: relative; gap: 8px; }
  .group-label { display: flex; align-items: center; gap: 8px; }
  .group-label .label { font-size: 10px; letter-spacing: .2em; }
  .group-label .rule { display: block; flex: 1; height: 1px; background: var(--dash); }
  .swatch-grid { display: flex; gap: 8px; }
  .swatch-btn { width: 48px; flex: none; gap: 5px; }
  .swatch-chip { height: 36px; }
  .swatch-name { font-size: 10.5px; }
  .color-more { top: 26px; }
  .thread-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .thread-grid .swatch-chip { height: 36px; }
  .upload-card { flex-direction: row; padding: 12px 14px; }
  .format-row { display: none; }
  input[type="range"] { height: 24px; }
  input[type="range"]::-webkit-slider-runnable-track { height: 24px; }
  input[type="range"]::-moz-range-track { height: 24px; }
  input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; }
  input[type="range"]::-moz-range-thumb { width: 21px; height: 21px; }
  .font-list { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .font-option { flex: none; padding: 0 16px; }
  .font-option .font-name { display: none; }
  .check-row { padding: 12px 0; font-size: 13.5px; }
  .pill-btn { height: 44px; font-size: 13.5px; }
  .chip-btn { height: 30px; }

  /* mobile stage chrome */
  .toast { left: 16px; right: 16px; top: 12px; transform: none; border-radius: 14px; min-height: 48px; padding: 8px 8px 8px 16px; white-space: normal; max-width: none; }
  .toast-msg { flex: 1; min-width: 0; white-space: nowrap; }
  .toast button { height: 36px; border-radius: 10px; padding: 0 14px; font-size: 13px; }
  /* mobile order sheet */
  .order { position: fixed; left: 0; right: 0; bottom: 0; height: min(640px, 88dvh); z-index: 60; border: 0; border-radius: 22px 22px 0 0; transform: translateY(105%); transition: transform .3s ease; box-shadow: 0 -10px 30px #0B0B0C33; padding-bottom: env(safe-area-inset-bottom); }
  #app.order-closed .order { display: flex; }
  #app.order-sheet-open .order { transform: none; }
  #app[data-mode="tryon"] .order { display: none; }
  .order .sheet-grab { display: flex; height: 26px; }
  .order-head { padding: 4px 20px 14px; gap: 6px; }
  .order-head h2 { font-size: 22px; }
  .order-body { padding: 16px 20px; gap: 16px; }
  .stepper button { width: 44px; padding: 11px 0; font-size: 15px; }
  .price strong { font-size: 28px; }
  .order-foot { padding: 12px 16px 24px; }
  .order-backdrop:not([hidden]) { position: fixed; inset: 0; background: #0B0B0C59; z-index: 55; }

  /* mobile try-on */
  .ar-stage { background: radial-gradient(ellipse 60% 45% at 50% 42%, #34363B, #1B1C1F 75%); }
  .ar-guide { top: 42%; width: 200px; height: 260px; margin: -130px 0 0 -100px; }
  .ar-badge { left: 14px; top: 14px; padding: 7px 12px; font-size: 12px; gap: 7px; }
  .ar-status[data-phase="searching"] { bottom: 190px; }
  #ar-retry { bottom: 200px; }
  .ar-bottom { bottom: calc(16px + env(safe-area-inset-bottom)); padding: 0 14px; gap: 10px; }
  .ar-fit-m { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .fit-chips { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
  .fit-chips button { height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: #111214A6; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #FAFAFA; font-size: 12px; font-weight: 600; }
  .fit-chips button[aria-pressed="true"] { background: #FAFAFA; color: #0B0B0C; }
  .fit-slider { width: 260px; display: flex; align-items: center; gap: 10px; }
  .fit-slider input[type="range"] { flex: 1; background: linear-gradient(#FAFAFA, #FAFAFA) 0 50% / var(--p, 0%) 2px no-repeat, linear-gradient(#FAFAF880, #FAFAF880) 0 50% / 100% 2px no-repeat; }
  .fit-slider input[type="range"].bipolar { background: linear-gradient(#FAFAFA, #FAFAFA) 50% 50% / 1px 10px no-repeat, linear-gradient(#FAFAF880, #FAFAF880) 0 50% / 100% 2px no-repeat; }
  .fit-slider input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; background: #FAFAFA; border: 0; box-shadow: 0 1px 4px #00000080; }
  .fit-slider input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: #FAFAFA; border: 0; box-shadow: 0 1px 4px #00000080; }
  .fit-slider output { color: #FAFAFA; width: 38px; text-align: right; text-shadow: 0 1px 3px #000000B3; }
  .ar-controls { width: 100%; justify-content: space-between; gap: 0; padding: 0 10px; }
  .snap-thumb { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid #FAFAFA; padding: 0; background: repeating-linear-gradient(45deg, #3A3C41 0 5px, #2A2C30 5px 10px); background-size: cover; background-position: center; }
  .ar-round { width: 40px; height: 40px; border: 0; background: #111214A6; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  #fit-toggle-m { font: 600 10px/1 var(--f-ui); letter-spacing: .08em; }
  #fit-toggle-m[aria-pressed="false"] { opacity: .75; }
  .shutter { width: 60px; height: 60px; box-shadow: 0 1px 6px #00000066; }
  .shutter span { width: 46px; height: 46px; }
  .ar-cart-m { height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: #FAFAFA; color: #0B0B0C; font: 600 12px/1 var(--f-ui); white-space: nowrap; }
}
@media (max-width: 380px) {
  .brand { display: none; }
}
/* ================= Readability pass =================
   Larger type and touch targets for all ages: body copy ~15-16px, no label
   under 11px, controls 44px+ (48px+ on phones), inputs >=16px on phones so iOS
   Safari does not zoom the page when a field is focused. */
body { font-size: 15px; }
.mono { font-size: 12px; }
.eyebrow { font-size: 12px; letter-spacing: .2em; }
.label { font-size: 12px; letter-spacing: .18em; }
.hint { font-size: 13.5px; line-height: 1.5; }
.lede { font-size: 14.5px; }
.pill-btn { height: 44px; padding: 0 16px; font-size: 14px; }
.chip-btn { height: 36px; padding: 0 14px; font-size: 13.5px; }
.link-btn { font-size: 13.5px; }
.icon-btn { width: 36px; height: 36px; font-size: 15px; }
.primary-btn { height: 48px; font-size: 15px; }
.seg button { padding: 10px 0; font-size: 14px; }
.check { font-size: 14px; gap: 10px; }
.check .box { width: 20px; height: 20px; font-size: 12px; }
.slider { gap: 10px; }
.slider-head, .slider-head label, .field-label { font-size: 14px; }
.slider-head output { font-size: 12.5px; }
input[type="range"] { height: 22px; }
input[type="range"]::-webkit-slider-runnable-track { height: 22px; }
input[type="range"]::-moz-range-track { height: 22px; }
input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: 1px; }
input[type="range"]::-moz-range-thumb { width: 17px; height: 17px; }

.brand { font-size: 13px; }
.mode-switch button { padding: 11px 22px; font-size: 13px; }
.theme-switch button { font-size: 12px; }
.save-status { font-size: 14px; }

.rail-step { height: 92px; }
.rail-stitch { left: 51px; top: 44px; height: 368px; }
.rail-stitch.is-done { height: calc(var(--step, 0) * 92px); }
.rail-step .step-circle { width: 40px; height: 40px; font-size: 15px; }
.rail-step .step-label { font-size: 11.5px; letter-spacing: .14em; }
.rail-help { height: 72px; font-size: 11.5px; }
.help-q { width: 30px; height: 30px; font-size: 15px; line-height: 28px; }

.tools-head { padding: 20px 24px 18px; }
.tools-head h2 { font-size: 25px; }
.tools-body { padding: 20px 24px; }
.tools-foot { padding: 16px 24px 20px; }
.block { gap: 14px; padding: 18px 0; }

.style-card { gap: 14px; padding: 10px; }
.style-thumb { width: 120px; height: 60px; }
.style-text strong { font-size: 15.5px; }
.style-sub { font-size: 13.5px; }
.cc-swatch { width: 52px; height: 52px; }
.cc-text strong { font-size: 19px; }
.swatch-grid { gap: 12px 10px; }
.swatch-chip { height: 48px; border-radius: 10px; font-size: 15px; }
.swatch-name { font-size: 13px; }

.upload-text strong { font-size: 16.5px; }
.upload-text > span { font-size: 14px; }
.plus-tile { width: 46px; height: 46px; }
.fmt { font-size: 11px; padding: 5px 6px; }
.fmt-size { font-size: 11px; }
.tip { font-size: 14px; padding: 12px 14px; }
.layer { padding: 10px; }
.layer-thumb { width: 44px; height: 44px; }
.layer-text strong { font-size: 14.5px; }
.num-field { height: 46px; }
.num-field input { font-size: 16px; }

.text-field { height: 52px; font-size: 17px; }
.name-field { height: 48px; font-size: 16px; }
.font-option { height: 52px; padding: 0 14px; }
.font-sample { font-size: 17px; }
.font-name { font-size: 13px; }
.check-row { padding: 12px 0; font-size: 15px; }
.check-mark { width: 22px; height: 22px; font-size: 12px; line-height: 19px; }
.check-label { width: 68px; }
.design-thumb { width: 52px; height: 42px; }
.design-meta strong { font-size: 14.5px; }
.menu summary { width: 36px; height: 36px; font-size: 16px; }
.menu-list button { padding: 11px 12px; font-size: 14px; }

.toast { font-size: 14.5px; padding: 12px 14px 12px 18px; }
.toast button { padding: 8px 14px; font-size: 13.5px; }
.history-bar button { padding: 11px 18px; font-size: 15px; }
.view-bar, .view-btn, .view-tool { font-size: 14px; }
.edge-btn { width: 26px; height: 72px; margin-top: -36px; font-size: 20px; }
.edge-left { right: -27px; }
.edge-right { left: -27px; }

.order-head h2 { font-size: 26px; }
.order-body { gap: 22px; }
.stepper button { width: 42px; padding: 10px 0; font-size: 17px; }
.stepper input { width: 52px; font-size: 16px; }
.price strong { font-size: 30px; }
.price span, #tier-note { font-size: 14px; }
.delivery strong { font-size: 18px; }
.delivery > span:last-child { font-size: 14px; }
.summary-top, .spec-list li { font-size: 15px; }
.order-text strong { font-size: 14px; }
.order-text .mono { font-size: 11px; }
.order-plate { height: 76px; }
.add-card { font-size: 14px; min-height: 120px; }
.add-copy strong { font-size: 14.5px; }
.add-copy span { font-size: 13px; }
.cart-btn { height: 56px; font-size: 13.5px; }

.ar-badge, .ar-color { font-size: 14px; }
.ar-cart { font-size: 12.5px; padding: 11px 18px; }
.ar-round { width: 50px; height: 50px; font-size: 18px; }
.ar-round.mono { font-size: 13px; }
.shutter { width: 74px; height: 74px; }
.shutter span { width: 58px; height: 58px; }
.sel-tag { font-size: 11px; padding: 7px 12px; }
.help-list li { font-size: 15px; grid-template-columns: 130px 1fr; }
.modal-head h2, .upload-heading h2 { font-size: 22px; }
.upload-sources strong { font-size: 16px; }
.upload-sources span { font-size: 14px; }

@media (max-width: 820px) {
  /* Nothing inside the sheet may widen the page; sideways rows scroll. */
  .shell > *, .sheet, .tools, .tools-body, .pane, .tools-foot, .color-scroll { min-width: 0; max-width: 100%; }

  #app { grid-template-rows: 60px minmax(0, 1fr); }
  .topbar { padding: 0 16px; }
  .brand { font-size: 11px; }
  .mode-switch button { padding: 10px 16px; font-size: 12.5px; }
  .round-btn { width: 44px; height: 44px; font-size: 17px; }

  .sheet-grab { height: 22px; }
  .sheet-grab span { width: 44px; height: 5px; }
  .rail { height: 66px; padding: 0 18px; }
  .rail-step { width: 60px; height: auto; gap: 6px; }
  .rail-step .step-circle { width: 38px; height: 38px; font-size: 14px; }
  .rail-step .step-label { font-size: 11px; letter-spacing: .08em; }
  .rail-stitch { left: 48px; right: 48px; top: 19px; height: 0; }
  .rail-stitch.is-done { height: 0; width: calc((100% - 96px) * var(--step, 0) / 4); }

  .tools-head { padding: 4px 20px 12px; }
  .tools-head h2 { font-size: 21px; }
  .tools-body { max-height: min(40dvh, 360px); padding: 14px 20px 16px; }
  .tools-foot { height: 76px; padding: 0 16px; }
  .foot-price strong { font-size: 21px; }
  .foot-price span { font-size: 11px; }
  .tools-foot .primary-btn { height: 52px; padding: 0 26px; font-size: 16px; }

  .style-card { width: 140px; padding: 6px; gap: 8px; }
  .style-thumb { width: 100%; height: 66px; }
  .style-text strong { font-size: 15px; }
  .style-tag { font-size: 11px; }
  .card-check { width: 22px; height: 22px; font-size: 12px; }
  .cc-text strong { font-size: 17px; }
  .color-groups { gap: 20px; padding: 4px 48px 4px 14px; }
  .group-label .label { font-size: 12px; }
  .swatch-btn { width: 62px; gap: 6px; }
  .swatch-chip { height: 50px; }
  .swatch-name { font-size: 12.5px; }
  .color-more { width: 34px; height: 50px; top: 30px; }
  .thread-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .thread-grid .swatch-chip { height: 48px; }
  .upload-card { padding: 14px 16px; }
  .text-field { height: 54px; font-size: 18px; }
  .name-field, .num-field input, .stepper input { font-size: 17px; }
  .font-option { height: 54px; padding: 0 18px; }
  .font-sample { font-size: 18px; }
  .pill-btn { height: 50px; font-size: 15.5px; }
  .chip-btn { height: 40px; font-size: 14px; padding: 0 16px; }
  .seg button { padding: 12px 0; font-size: 15px; }
  .link-btn { font-size: 15px; }
  .link-row { gap: 8px 20px; }
  .icon-btn { width: 44px; height: 44px; font-size: 17px; }
  .layer-text strong { font-size: 15px; }
  .check-row { padding: 14px 0; font-size: 16px; }
  .check-row .link-btn { padding: 6px 0; }
  input[type="range"] { height: 32px; }
  input[type="range"]::-webkit-slider-runnable-track { height: 32px; }
  input[type="range"]::-moz-range-track { height: 32px; }
  input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: 2px; }
  input[type="range"]::-moz-range-thumb { width: 25px; height: 25px; }

  .toast { font-size: 15px; }
  .order-head h2 { font-size: 25px; }
  .stepper button { width: 50px; padding: 13px 0; font-size: 18px; }
  .cart-btn { height: 58px; font-size: 14px; }
  .order-foot { padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); }

  .fit-chips button { height: 40px; padding: 0 16px; font-size: 14.5px; }
  .fit-slider { width: min(300px, 86vw); }
  .fit-slider output { font-size: 13px; width: 46px; }
  .snap-thumb { width: 48px; height: 48px; }
  .ar-round { width: 48px; height: 48px; }
  #fit-toggle-m { font-size: 12px; }
  .shutter { width: 70px; height: 70px; }
  .shutter span { width: 54px; height: 54px; }
  .ar-cart-m { height: 48px; padding: 0 16px; font-size: 14.5px; }
  .ar-badge { font-size: 13.5px; padding: 9px 14px; }
  .sel-btn { width: 36px; height: 36px; margin: -18px; font-size: 16px; }
}
@container stage (max-width: 879px) {
  .glass { height: 48px; }
  .glass button { width: 48px; height: 48px; font-size: 18px; }
  .glass.round { width: 48px; }
  .history-bar button { height: 48px; padding: 0 18px; font-size: 15px; }
}
@container stage (max-width: 419px) {
  .history-bar button { padding: 0 13px; }
}

/* ================= Round 2: sheet, full screen, handles, backdrop ================= */
/* Neutral studio sweep behind the transparent 3D canvas: a soft top light
   falling off to the edges. Independent of the page theme — src/backdrop.js
   sets the stops (Auto picks a grey that contrasts with the hat). Registered
   as colours so a change fades instead of jumping. */
@property --backdrop-center { syntax: '<color>'; inherits: false; initial-value: #9C9C9C; }
@property --backdrop-mid { syntax: '<color>'; inherits: false; initial-value: #8B8B8B; }
@property --backdrop-edge { syntax: '<color>'; inherits: false; initial-value: #747474; }
.viewer {
  background: radial-gradient(120% 95% at 50% 36%, var(--backdrop-center) 0%, var(--backdrop-mid) 53%, var(--backdrop-edge) 100%);
  transition: --backdrop-center .35s ease, --backdrop-mid .35s ease, --backdrop-edge .35s ease;
}
/* View controls sit on a solid pill so they read over any backdrop. */
.view-bar { padding: 6px 18px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line-strong); box-shadow: var(--shadow-soft); }
@media (prefers-reduced-motion: reduce) { .viewer { transition: none; } }

/* ================= Compact viewport: fewer floating controls ================= */
/* Popover menus for the view tools (⋯) and the view picker chip. */
.view-menu { position: absolute; right: 0; z-index: 5; min-width: 176px; display: flex; flex-direction: column; padding: 6px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); }
.view-menu[hidden] { display: none; }
.view-stack .view-menu { top: calc(100% + 8px); }
.view-pager .view-menu { bottom: calc(100% + 8px); }
/* The view list is a compact two-column grid so it fits short phone viewports. */
.view-list-menu:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 212px; }
.view-list-menu button { height: 36px; }
.view-menu button { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: 500 14px/1 var(--f-ui); text-align: left; white-space: nowrap; }
.view-menu button span[aria-hidden] { width: 18px; text-align: center; font-size: 15px; }
.view-menu button:hover, .view-menu button:focus-visible, .view-menu button[aria-checked="true"] { background: var(--surface-2); }
.view-stack, .view-pager, .history-bar { transition: opacity .2s ease; }
@container stage (max-width: 879px) {
  /* One chip names the view and opens the picker; arrows and dots go. */
  #view-prev, #view-next, .view-pager .dots { display: none; }
  .glass.pager { padding: 0; }
  .glass .pager-mid { width: auto; min-width: 0; height: 40px; padding: 0 14px; flex-direction: row; gap: 6px; border: 0; background: none; color: var(--ink); }
  .pager-mid > span:first-child { font: 600 14px/1 var(--f-ui); }
  .chip-caret { font-size: 10px; opacity: .6; }
  .glass.pager { height: 40px; }
  /* Controls step aside while a finger or pointer is on the hat. */
  .viewer.is-touching .view-stack, .viewer.is-touching .view-pager, .viewer.is-touching .history-bar { opacity: .12; pointer-events: none; }
}
@media (max-width: 820px) {
  /* Undo / Redo live in the sheet header on phones. */
  .history-bar { display: none; }
  .icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 40px; padding: 0; font-size: 16px; }
  .icon-chip:disabled { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) { .view-stack, .view-pager, .history-bar { transition: none; } }
/* Collapsed phone sheet: a single slim row (current step + Next) so the 3D
   view gets most of the screen. Tapping or dragging the row reopens it. */
.foot-peek { display: none; }
@media (max-width: 820px) {
  .sheet[data-open="false"] .rail, .sheet[data-open="false"] .foot-price { display: none; }
  .sheet[data-open="false"] .foot-peek { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; border: 0; background: none; padding: 0; text-align: left; touch-action: none; }
  .foot-peek strong { font: 600 15px/1.1 var(--f-display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .foot-peek span { font-size: 12px; color: var(--muted); }
  .sheet[data-open="false"] .tools-foot { border-top: 0; }
}
.loader { background: transparent; }

/* Editor handles: solid, no transparency. */
.sel-btn { background: #FAFAF8; backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: none; box-shadow: 0 0 0 1px #0B0B0C1A, 0 2px 8px #0B0B0C2E; }
.sel-btn:hover, .sel-btn.is-active { background: #111214; color: #FAFAFA; }

/* True full screen of the 3D view (plus the Fullscreen API where supported). */
#app.is-fullscreen { grid-template-rows: minmax(0, 1fr); }
#app.is-fullscreen .topbar { display: none; }
#app.is-fullscreen .shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage"; }
#app.is-fullscreen .rail, #app.is-fullscreen .tools, #app.is-fullscreen .order, #app.is-fullscreen .tryon-panel,
#app.is-fullscreen .edge-btn, #app.is-fullscreen .sheet, #app.is-fullscreen .order-backdrop { display: none !important; }
#fullscreen-toggle[aria-pressed="true"] { color: var(--ink); font-weight: 600; border-color: var(--ink); }

@media (max-width: 820px) {
  /* The menu sheet takes half the screen when open and collapses to a grab
     handle for a full-screen view. Height animates; dragging follows the finger. */
  .sheet { height: 50dvh; overflow: hidden; transition: height .34s cubic-bezier(.22, .8, .24, 1); }
  .sheet[data-open="false"] { height: calc(34px + env(safe-area-inset-bottom)); }
  .sheet.is-dragging { transition: none; }
  .sheet[data-open="false"] .tools-head, .sheet[data-open="false"] .tools-body { display: revert; }
  .sheet-grab { height: 34px; cursor: grab; }
  .tools { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .tools-head { display: flex; }
  .sheet[data-open="false"] .tools-head { display: flex; }
  .tools-body { flex: 1; min-height: 0; max-height: none; }
  .rail, .tools-head { touch-action: none; }
  .order.is-dragging { transition: none; }
  .order-head { touch-action: none; }
  #app.is-fullscreen { grid-template-rows: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Collapsed phone sheet = grab handle + the slim step/Next row (after the base
   sheet rules above so it wins over their handle-only height). */
@media (max-width: 820px) {
  .sheet[data-open="false"] { height: calc(98px + env(safe-area-inset-bottom)); }
  .sheet[data-open="false"] .tools-head, .sheet[data-open="false"] .tools-body { display: none; }
  .sheet[data-open="false"] .tools-foot { height: 64px; }
}