@font-face {
  font-family: "Miriam Mono CLM";
  src: url("MiriamMonoCLM-Book.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --primary: #5645d4;
  --primary-pressed: #4534b3;
  --primary-deep: #3a2a99;
  --navy: #0a1530;
  --navy-mid: #1a2a52;
  --canvas: #fff;
  --surface: #f6f5f4;
  --surface-soft: #fafaf9;
  --ink: #1a1a1a;
  --charcoal: #37352f;
  --slate: #5d5b54;
  --steel: #787671;
  --muted: #a4a097;
  --line: #e5e3df;
  --line-soft: #ede9e4;
  --line-strong: #c8c4be;
  --lavender: #e6e0f5;
  --peach: #ffe8d4;
  --rose: #fde0ec;
  --mint: #d9f3e1;
  --sky: #dcecfa;
  --yellow: #fef7d6;
  --yellow-bold: #f9e79f;
  --cream: #f8f5e8;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-soft: 0 8px 24px rgb(15 15 15 / 7%);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--surface-soft); }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--surface-soft); font-size: 14px; line-height: 1.5; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid rgb(86 69 212 / 35%); outline-offset: 2px; }
[hidden] { display: none !important; }

.app-shell { width: min(1280px, 100%); margin: 0 auto; padding: 0 32px 32px; }
.app-shell:not(.editing) .stepper, .app-shell:not(.editing) #restartBtn { visibility: hidden; }
.topbar { position: relative; z-index: 2; height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); background: var(--canvas); }
.brand { display: inline-flex; min-width: 0; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.text-button { justify-self: end; min-height: 40px; padding: 8px 12px; border: 0; border-radius: var(--radius-sm); color: var(--slate); background: transparent; font-size: 13px; cursor: pointer; transition: color .16s ease, background .16s ease; }
.text-button:hover { color: var(--ink); background: var(--surface); }
.stepper { display: flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; }
.stepper > b { width: 26px; height: 1px; background: var(--line-strong); }
.step-dot { display: inline-flex; min-height: 40px; align-items: center; gap: 8px; padding: 5px 8px; border: 0; border-radius: var(--radius-md); color: var(--steel); background: transparent; font-size: 12px; cursor: pointer; transition: color .16s ease, background .16s ease; }
.step-dot:hover { background: var(--surface); }
.step-dot i { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: var(--slate); background: #eeedeb; font-size: 11px; font-style: normal; font-weight: 600; }
.step-dot.active { color: var(--ink); font-weight: 600; }
.step-dot.active i, .step-dot.done i { color: #fff; background: var(--primary); }
.module-switcher { display: flex; width: min(360px, 100%); gap: 8px; margin: 16px auto 0; padding: 5px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--canvas); }
.module-switch-button { min-height: 46px; flex: 1; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--slate); background: transparent; font-size: 14px; font-weight: 600; cursor: pointer; transition: color .16s ease, background .16s ease, border-color .16s ease; }
.module-switch-button:hover { background: var(--surface); }
.module-switch-button.active { border-color: var(--primary); color: var(--primary-deep); background: #faf9ff; }
.module-intro { margin-bottom: 28px; text-align: center; }
.module-intro .eyebrow { color: var(--primary); }
.module-intro h1 { margin: 0; font-size: clamp(28px, 5vw, 42px); letter-spacing: -.04em; }
.module-intro p:last-child { margin: 10px 0 0; color: var(--slate); }
.module-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.module-card { position: relative; display: flex; min-height: 290px; flex-direction: column; align-items: flex-start; padding: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); color: var(--ink); background: var(--canvas); text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.module-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-soft); }
.module-number { position: absolute; top: 20px; right: 22px; color: #c7c2df; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.module-card-icon { display: grid; width: 68px; height: 68px; place-items: center; margin-bottom: 25px; border-radius: 18px; color: var(--primary); background: #f2efff; font-size: 39px; }
.module-card strong { margin-bottom: 6px; font-size: 24px; }
.module-card > span:nth-of-type(3) { max-width: 300px; color: var(--slate); line-height: 1.65; }
.module-card > b { display: flex; width: 100%; justify-content: space-between; margin-top: auto; padding-top: 28px; color: var(--primary); font-size: 13px; }
.module-card > b i { font-size: 19px; font-style: normal; }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); align-items: start; gap: 24px; padding: 26px 0 0; }
.preview-column { position: relative; min-width: 0; overflow: hidden; padding: 24px; border-radius: var(--radius-lg); color: #fff; background: var(--navy); isolation: isolate; }
.preview-column::before, .preview-column::after { position: absolute; z-index: -1; width: 190px; height: 190px; border: 1px solid rgb(255 255 255 / 9%); border-radius: 50%; content: ""; pointer-events: none; }
.preview-column::before { top: -108px; right: -45px; box-shadow: 0 0 0 22px rgb(86 69 212 / 13%), 0 0 0 46px rgb(255 100 200 / 8%); }
.preview-column::after { bottom: -145px; left: -86px; width: 230px; height: 230px; border-color: rgb(42 157 153 / 22%); box-shadow: 0 0 0 28px rgb(245 215 94 / 7%); }
.preview-heading { position: relative; display: flex; min-height: 54px; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.eyebrow { margin: 0 0 5px; color: #a99df2; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.preview-heading h1, .panel-heading h2 { margin: 0; font-weight: 600; letter-spacing: -.025em; }
.preview-heading h1 { color: #fff; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.2; }
.privacy { flex: 0 0 auto; padding: 5px 9px; border: 1px solid rgb(255 255 255 / 18%); border-radius: var(--radius-md); color: #d5d8e2; background: rgb(255 255 255 / 6%); font-size: 11px; }
.canvas-wrap { position: relative; display: flex; width: 100%; height: min(68vh, 800px); min-height: 370px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgb(255 255 255 / 9%); border-radius: var(--radius-lg); background-color: var(--navy-mid); background-image: radial-gradient(rgb(255 255 255 / 15%) .7px, transparent .7px); background-size: 15px 15px; touch-action: none; }
.canvas-wrap canvas { display: block; max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 14px 34px rgb(0 0 0 / 30%); object-fit: contain; touch-action: none; }
.canvas-hint { position: absolute; max-width: 80%; color: #d2d5df; font-size: 13px; text-align: center; pointer-events: none; }
.canvas-tools { display: flex; height: 50px; align-items: center; gap: 12px; padding: 7px 2px 0; }
.photo-mode-tools, .artwork-mode-tools { display: flex; width: 100%; min-width: 0; align-items: center; gap: 12px; }
.photo-mode-tools { justify-content: space-between; }
.photo-mode-tools .gesture-note { margin: 0; color: #d4d6df; font-size: 12px; }
.photo-mode-tools .secondary { min-height: 36px; padding: 6px 12px; white-space: nowrap; }
.photo-mode-tools .secondary[aria-pressed="true"] { border-color: #a99df2; color: #fff; background: rgb(86 69 212 / 38%); }
.round-button { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid rgb(255 255 255 / 24%); border-radius: var(--radius-md); color: #f2f1fa; background: rgb(255 255 255 / 8%); font-size: 20px; cursor: pointer; transition: background .16s ease; }
.round-button:hover { background: rgb(255 255 255 / 17%); }
.zoom-control { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; color: #d4d6df; font-size: 12px; }
.zoom-control input { width: 100%; max-width: 290px; accent-color: #a99df2; }
.zoom-control span { width: 40px; color: #fff; }

.editor-panel { display: flex; min-height: 660px; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--canvas); box-shadow: 0 2px 8px rgb(15 15 15 / 3%); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading h2 { color: var(--ink); font-size: 20px; line-height: 1.3; }
.panel-heading .eyebrow { color: var(--steel); }
.help-button { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-md); color: var(--slate); background: var(--canvas); font-weight: 600; cursor: pointer; }
.help-button:hover { border-color: var(--primary); color: var(--primary); }
.panel-copy { margin: 12px 0 17px; color: var(--slate); font-size: 13px; line-height: 1.6; }

.template-list, .material-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.template-card, .material-card { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); background: var(--canvas); text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.template-card:hover, .material-card:hover { border-color: var(--line-strong); box-shadow: 0 3px 10px rgb(15 15 15 / 7%); transform: translateY(-1px); }
.template-card.selected, .material-card.selected { padding: 7px; border: 2px solid var(--primary); box-shadow: 0 0 0 2px rgb(86 69 212 / 9%); }
.template-card:nth-child(6n + 1) .template-thumb { background: var(--lavender); }
.template-card:nth-child(6n + 2) .template-thumb { background: var(--peach); }
.template-card:nth-child(6n + 3) .template-thumb { background: var(--mint); }
.template-card:nth-child(6n + 4) .template-thumb { background: var(--sky); }
.template-card:nth-child(6n + 5) .template-thumb { background: var(--rose); }
.template-card:nth-child(6n) .template-thumb { background: var(--yellow); }
.template-thumb { display: grid; height: 112px; place-items: center; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface); }
.template-thumb img { width: 100%; height: 100%; object-fit: contain; }
.template-meta { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 8px 2px 1px; }
.template-meta strong { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.template-meta span { flex: 0 0 auto; color: var(--steel); font-size: 11px; }
.upload-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line-soft); }
.upload-row > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.upload-row strong, .subheading strong { color: var(--ink); font-size: 14px; font-weight: 600; }
.upload-row span, .subheading span { color: var(--steel); font-size: 11px; }

.primary, .secondary { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; cursor: pointer; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .12s ease; }
.primary { color: #fff; background: var(--primary); }
.primary:hover { background: var(--primary-pressed); }
.primary:active, .secondary:active { transform: translateY(1px); }
.primary:disabled { color: var(--muted); background: var(--line); cursor: not-allowed; }
.primary.small { min-height: 40px; padding: 8px 14px; font-size: 13px; }
.secondary { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.secondary:hover { border-color: var(--ink); background: var(--surface-soft); }
.secondary:disabled { color: var(--muted); background: var(--surface); cursor: not-allowed; }
.photo-list { display: flex; min-height: 24px; gap: 9px; overflow: auto; padding: 11px 2px; }
.photo-chip { position: relative; width: 58px; height: 62px; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.photo-chip.selected { outline: 2px solid var(--primary); outline-offset: 2px; }
.photo-chip img { width: 100%; height: 100%; object-fit: cover; }
.photo-chip button { position: absolute; top: 3px; right: 3px; display: grid; width: 20px; height: 20px; place-items: center; padding: 0; border: 0; border-radius: var(--radius-sm); color: white; background: rgb(10 21 48 / 82%); line-height: 1; cursor: pointer; }
.photo-edit { margin: 0 0 7px; padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface-soft); }
.photo-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.photo-edit-head strong { font-size: 12px; }
.replace-photo { min-height: 32px; padding: 4px 8px; border: 0; border-radius: var(--radius-sm); color: var(--primary); background: transparent; font-size: 12px; cursor: pointer; }
.replace-photo:hover { background: var(--lavender); }
.photo-edit label { display: flex; align-items: center; gap: 9px; margin-top: 7px; color: var(--slate); font-size: 11px; }
.photo-edit input { min-width: 0; flex: 1; accent-color: var(--primary); }
.photo-edit label span { width: 38px; color: var(--steel); text-align: right; }
.calibration { margin-top: 5px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.calibration-toggle { display: flex; width: 100%; min-height: 36px; align-items: center; justify-content: space-between; padding: 5px 0; border: 0; color: var(--slate); background: transparent; font-size: 11px; text-align: left; cursor: pointer; }
.calibration-row { display: grid; grid-template-columns: minmax(54px, 1fr) repeat(5, minmax(36px, 46px)); align-items: center; gap: 5px; padding: 7px 0; border-top: 1px dashed var(--line); color: var(--slate); font-size: 10px; }
.calibration-row label { display: flex; align-items: center; gap: 3px; }
.calibration-row input { width: 100%; min-width: 0; padding: 5px 3px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--canvas); font-size: 10px; }

.material-image { display: grid; height: 132px; place-items: center; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface); }
.material-image img { width: 100%; height: 100%; object-fit: contain; }
.container-list .material-image { background: #fff !important; }
.material-card strong { display: block; margin: 8px 2px 1px; font-size: 12px; font-weight: 600; }
.material-card:nth-child(4n + 1) .material-image { background-color: var(--peach); }
.material-card:nth-child(4n + 2) .material-image { background-color: var(--mint); }
.material-card:nth-child(4n + 3) .material-image { background-color: var(--lavender); }
.material-card:nth-child(4n) .material-image { background-color: var(--sky); }
.no-container-image { color: var(--primary); font-size: 34px; }
.gesture-note { margin-top: 14px; padding: 11px 12px; border: 1px solid #eee9df; border-radius: var(--radius-md); color: var(--charcoal); background: var(--cream); font-size: 11px; text-align: center; }

.ratio-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 21px; }
.ratio-choice { display: flex; min-height: 62px; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--slate); background: var(--canvas); font-size: 13px; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.ratio-choice:hover { border-color: var(--line-strong); }
.ratio-choice.active { border: 2px solid var(--primary); color: var(--primary-deep); background: #faf9ff; font-weight: 600; }
.ratio-icon { display: block; border: 1.5px solid currentColor; border-radius: 3px; }
.ratio-icon.portrait { width: 20px; height: 27px; }
.ratio-icon.portrait-tall { width: 16px; height: 29px; }
.subheading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.backgrounds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.backgrounds .material-card { padding: 5px; }
.backgrounds .material-card.selected { padding: 4px; }
.backgrounds .material-image { height: 76px; }
.backgrounds .material-image img { object-fit: cover; }
.backgrounds .material-card strong { overflow: hidden; margin: 6px 2px 1px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.backgrounds .upload-background { border-style: dashed; border-color: #b7afe9; background: #faf9ff; }
.backgrounds .upload-background .upload-tile { color: var(--primary); background: var(--lavender); }
.backgrounds .upload-tile b { font-size: 25px; font-weight: 400; }
.backgrounds .upload-background:hover { border-color: var(--primary); }
.download-button { width: 100%; margin-top: 19px; }
.export-note { margin: 9px 0; color: var(--steel); font-size: 11px; text-align: center; }
.panel-footer { display: flex; gap: 10px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.panel-footer button { flex: 1; }

.toast { position: fixed; z-index: 30; right: max(16px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px; border: 1px solid rgb(255 255 255 / 10%); border-radius: var(--radius-md); color: #fff; background: var(--navy); box-shadow: var(--shadow-soft); font-size: 13px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.modal-backdrop { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(7 15 36 / 62%); }
.modal { position: relative; width: min(420px, 100%); padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--canvas); box-shadow: 0 24px 60px rgb(0 0 0 / 22%); }
.modal h2 { margin: 0 0 15px; color: var(--ink); font-size: 20px; }
.modal p { color: var(--slate); font-size: 13px; line-height: 1.7; }
.modal p.muted { padding-top: 12px; border-top: 1px solid var(--line); color: var(--steel); }
.modal-close { position: absolute; top: 12px; right: 14px; display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: var(--radius-md); color: var(--slate); background: transparent; font-size: 24px; cursor: pointer; }
.modal-close:hover { background: var(--surface); }

@media (min-width: 1280px) {
  .app-shell { padding-right: 32px; padding-left: 32px; }
  .workspace { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); gap: 24px; }
  .preview-column { padding: 28px; }
  .editor-panel { padding: 24px; }
}

@media (max-width: 1023px) {
  .app-shell { padding-right: 22px; padding-left: 22px; }
  .workspace { grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; }
  .preview-column { padding: 18px; }
  .editor-panel { padding: 18px; }
  .canvas-wrap { height: min(66vh, 720px); }
  .template-thumb { height: 96px; }
  .material-image { height: 112px; }
  .backgrounds .material-image { height: 65px; }
}

@media (max-width: 767px) {
  .app-shell { padding: 0 14px calc(20px + env(safe-area-inset-bottom)); }
  .topbar { height: 64px; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 6px; }
  .brand { gap: 6px; font-size: 11px; }
  .stepper { gap: 3px; }
  .stepper > b { width: 8px; }
  .step-dot { min-height: 38px; gap: 0; padding: 3px; font-size: 0; }
  .step-dot i { width: 23px; height: 23px; font-size: 10px; }
  .text-button { min-height: 36px; padding: 5px 4px; font-size: 10px; white-space: nowrap; }
  .workspace { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
  .module-switcher { margin-top: 12px; }
  .preview-column { width: 100%; padding: 14px; border-radius: var(--radius-lg); }
  .preview-heading { min-height: 44px; gap: 8px; margin-bottom: 11px; }
  .preview-heading h1 { font-size: 19px; }
  .eyebrow { margin-bottom: 3px; font-size: 9px; }
  .privacy { padding: 4px 6px; font-size: 9px; }
  .canvas-wrap { height: min(48vh, 510px); min-height: 245px; border-radius: var(--radius-md); }
  .canvas-tools { height: 46px; gap: 9px; }
  .round-button { width: 36px; height: 36px; flex-basis: 36px; }
  .editor-panel { width: 100%; min-height: 0; padding: 16px 14px 13px; border-radius: var(--radius-lg); }
  .panel-heading h2 { font-size: 18px; }
  .panel-copy { margin: 9px 0 13px; font-size: 12px; }
  .template-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .template-card { padding: 4px; }
  .template-card.selected { padding: 3px; }
  .template-thumb { height: clamp(62px, 19vw, 88px); border-radius: 4px; }
  .template-meta { display: block; padding: 5px 1px 1px; }
  .template-meta strong { display: block; font-size: 9px; }
  .template-meta span { font-size: 9px; }
  .upload-row { margin-top: 13px; padding-top: 12px; }
  .photo-chip { width: 50px; height: 54px; }
  .material-image { height: clamp(88px, 28vw, 128px); }
  .material-card strong { font-size: 12px; }
  .backgrounds { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .backgrounds .material-card { padding: 4px; }
  .backgrounds .material-card.selected { padding: 3px; }
  .backgrounds .material-image { height: clamp(48px, 14vw, 68px); }
  .backgrounds .material-card strong { margin: 5px 1px 1px; font-size: 9px; }
  .ratio-picker { gap: 8px; margin-bottom: 15px; }
  .ratio-choice { min-height: 54px; gap: 8px; font-size: 12px; }
  .panel-footer { gap: 8px; padding-top: 13px; }
  .panel-footer button { min-height: 44px; padding: 9px 12px; }
  .download-button { min-height: 46px; }
  .gesture-note { margin-top: 10px; font-size: 10px; }
  .photo-mode-tools .gesture-note { margin: 0; max-width: 54%; font-size: 10px; line-height: 1.35; }
  .photo-mode-tools .secondary { min-height: 40px; padding: 6px 9px; font-size: 11px; }
  .calibration-row { grid-template-columns: minmax(44px, 1fr) repeat(5, minmax(30px, 39px)); gap: 3px; }
  .calibration-row input { padding: 4px 2px; }
}

@media (max-width: 380px) {
  .app-shell { padding-right: 10px; padding-left: 10px; }
  .brand { gap: 4px; font-size: 9px; }
  .stepper { gap: 2px; }
  .stepper > b { width: 5px; }
  .step-dot i { width: 21px; height: 21px; }
  .text-button { font-size: 9px; }
  .preview-column { padding: 11px; }
  .privacy { max-width: 112px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* One shared editor sequence on phone and desktop: preview, mode, options, action. */
.app-shell { width: min(1280px, 100%); padding: 0 24px 20px; }
.workspace { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding-top: 12px; }
.preview-column { width: 100%; max-width: 1040px; margin-inline: auto; padding: 18px; }
.preview-heading { min-height: 40px; align-items: center; margin-bottom: 10px; }
.preview-heading .eyebrow, .panel-heading, .panel-copy { display: none; }
.preview-heading h1 { font-size: clamp(17px, 2vw, 22px); }
.focus-editor-toggle { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid rgb(255 255 255 / 24%); border-radius: var(--radius-md); color: #fff; background: rgb(255 255 255 / 8%); font-size: 22px; cursor: pointer; }
.focus-editor-toggle:hover { background: rgb(255 255 255 / 17%); }
.canvas-wrap { height: min(57vh, 700px); min-height: 340px; }
.canvas-tools { height: 42px; }
.gesture-note { order: 2; margin: 0; padding: 0; border: 0; color: var(--slate); background: transparent; font-size: 12px; text-align: center; }
.module-switcher { order: 1; width: min(380px, 100%); flex: 0 0 auto; margin: 0 auto; }
.module-switch-button { min-height: 44px; }
.editor-panel { order: 2; width: 100%; max-width: 1040px; min-height: 0; margin: 0 auto; padding: 14px 18px; overflow: hidden; }
.step-panel { min-height: 0; }
.template-list { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.template-card, .template-card.selected { display: flex; min-height: 44px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 8px 12px; }
.template-thumb { display: none; }
.template-meta { justify-content: center; padding: 0; }
.template-meta strong { font-size: 13px; }
.template-meta span { margin-left: 4px; font-size: 10px; }
.upload-row { margin-top: 10px; padding-top: 9px; }
.photo-list { min-height: 0; gap: 8px; padding: 8px 2px; }
.photo-chip { width: 44px; height: 46px; }
.photo-edit { margin: 0 0 5px; padding: 6px 9px; }
.photo-edit-head { margin-bottom: 0; }
.container-list, .backgrounds { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.container-list .material-card, .backgrounds .material-card { width: 92px; min-width: 92px; flex: 0 0 92px; padding: 5px; text-align: center; }
.container-list .material-card.selected, .backgrounds .material-card.selected { padding: 4px; }
.material-image { height: 56px; }
.material-card strong { margin: 4px 1px 1px; font-size: 11px; }
.container-list .material-image { background: #fff !important; }
.backgrounds .material-image { height: 52px; }
.backgrounds .material-card strong { margin: 4px 1px 1px; font-size: 10px; }
.ratio-picker { margin-bottom: 9px; }
.ratio-choice { min-height: 46px; }
.subheading { margin-bottom: 5px; }
.export-note { margin: 5px 0 0; font-size: 10px; }
.panel-footer { gap: 10px; margin-top: 8px; padding-top: 9px; }
.panel-footer button { min-height: 46px; }
.download-button { margin-top: 10px; }
.calibration-row { overflow-x: auto; }

@media (min-width: 768px) {
  .app-shell { padding-inline: 32px; }
  .workspace { gap: 12px; }
  .preview-column { padding: 20px 24px 14px; }
  .canvas-wrap { height: min(55vh, 760px); min-height: 390px; }
  .module-switcher { width: min(420px, 100%); }
  .editor-panel { padding: 15px 22px; }
  .template-list { justify-content: flex-start; }
  .template-card { min-width: 130px; }
  .container-list .material-card, .backgrounds .material-card { width: 108px; min-width: 108px; flex-basis: 108px; }
  .container-list .material-image { height: 62px; }
  .backgrounds .material-image { height: 62px; }
}

@media (max-width: 767px) {
  html, body { height: 100%; }
  body { overflow: hidden; }
  .app-shell { display: flex; width: 100%; height: 100dvh; min-height: 0; flex-direction: column; padding: max(4px, env(safe-area-inset-top)) 10px max(5px, env(safe-area-inset-bottom)); overflow: hidden; }
  .topbar { height: 48px; min-height: 48px; flex: 0 0 48px; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 5px; }
  .brand { gap: 5px; font-size: 10px; }
  .stepper { gap: 1px; }
  .stepper > b { width: 6px; }
  .step-dot { min-height: 34px; padding: 2px; font-size: 0; }
  .step-dot i { width: 21px; height: 21px; font-size: 9px; }
  #restartBtn { min-height: 34px; padding: 4px 5px; font-size: 10px; }
  .workspace { min-height: 0; flex: 1 1 auto; gap: 5px; padding: 5px 0 0; }
  .preview-column { display: flex; min-height: 170px; flex: 1 1 auto; flex-direction: column; padding: 8px; border-radius: 10px; }
  .preview-heading { min-height: 28px; flex: 0 0 28px; margin-bottom: 4px; }
  .preview-heading h1 { font-size: 16px; }
  .focus-editor-toggle { width: 32px; height: 32px; flex-basis: 32px; font-size: 18px; }
  .canvas-wrap { height: auto; min-height: 0; flex: 1 1 auto; border-radius: 7px; }
  .canvas-tools { height: 36px; min-height: 36px; flex: 0 0 36px; padding: 3px 0 0; }
  .round-button { width: 32px; height: 32px; flex-basis: 32px; }
  .module-switcher { width: min(360px, 100%); min-height: 40px; flex: 0 0 40px; gap: 5px; padding: 3px; border-radius: 9px; }
  .module-switch-button { min-height: 32px; font-size: 13px; }
  .editor-panel { height: clamp(172px, 34dvh, 290px); min-height: 0; flex: 0 0 auto; padding: 7px 9px 6px; border-radius: 9px; }
  .step-panel { flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .template-list { gap: 6px; }
  .template-card, .template-card.selected { min-height: 38px; padding: 6px 9px; border-radius: 7px; }
  .template-meta strong { font-size: 11px; }
  .template-meta span { font-size: 9px; }
  .upload-row { gap: 8px; margin-top: 6px; padding-top: 5px; }
  .upload-row strong { font-size: 12px; }
  .upload-row span { font-size: 10px; }
  .upload-row .primary { min-height: 36px; padding: 6px 10px; font-size: 12px; }
  .photo-list { gap: 7px; padding: 6px 2px; }
  .photo-chip { width: 38px; height: 40px; }
  .photo-edit { padding: 4px 7px; }
  .photo-edit-head strong { font-size: 10px; }
  .replace-photo { min-height: 28px; }
  .photo-edit label { display: none; }
  .calibration { display: none !important; }
  .container-list .material-card, .backgrounds .material-card { width: 76px; min-width: 76px; flex-basis: 76px; }
  .material-image, .container-list .material-image { height: 46px; }
  .backgrounds .material-image { height: 44px; }
  .ratio-picker { gap: 6px; margin-bottom: 6px; }
  .ratio-choice { min-height: 38px; gap: 5px; font-size: 10px; }
  .ratio-icon.portrait { width: 14px; height: 19px; }
  .ratio-icon.portrait-tall { width: 12px; height: 21px; }
  .subheading { margin-bottom: 3px; }
  .subheading strong { font-size: 11px; }
  .export-note { font-size: 9px; }
  .gesture-note { padding: 3px 0 0; font-size: 10px; line-height: 1.3; }
  .panel-footer { min-height: 47px; flex: 0 0 47px; gap: 7px; margin-top: 3px; padding-top: 5px; }
  .panel-footer button { min-height: 40px; padding: 6px 9px; font-size: 12px; }
  .focus-editor .panel-footer { display: none; }
}

@media (max-width: 380px) {
  .app-shell { padding-right: 7px; padding-left: 7px; }
  .brand { font-size: 9px; }
  #restartBtn { font-size: 9px; }
  .editor-panel { height: clamp(166px, 33dvh, 260px); }
}

@media (max-height: 560px) and (max-width: 767px) {
  body { overflow-y: auto; }
  .app-shell { height: auto; min-height: 100dvh; overflow: visible; }
  .workspace { flex: none; }
  .preview-column { min-height: 240px; }
  .canvas-wrap { min-height: 170px; }
  .editor-panel { height: auto; min-height: 185px; flex: none; }
  .step-panel { max-height: 260px; }
}

.app-shell.focus-editor { position: fixed; z-index: 50; inset: 0; display: flex; width: 100%; height: 100dvh; max-width: none; flex-direction: column; margin: 0; padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); overflow: hidden; background: var(--surface-soft); }
.focus-editor .topbar, .focus-editor .module-switcher, .focus-editor .editor-panel { display: none !important; }
.focus-editor .workspace { min-height: 0; flex: 1 1 auto; padding: 0; }
.focus-editor .preview-column { display: flex; width: 100%; max-width: none; min-height: 0; flex: 1 1 auto; flex-direction: column; padding: 12px; }
.focus-editor .preview-heading { flex: 0 0 40px; }
.focus-editor .canvas-wrap { height: auto; min-height: 0; flex: 1 1 auto; }

/* Small, low-contrast refinements requested for the current editor. */
#restartBtn.restart-button { justify-self: end; min-height: 38px; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); color: var(--slate); background: var(--canvas); font-size: 12px; font-weight: 500; }
#restartBtn.restart-button:hover { border-color: var(--line-strong); color: var(--ink); background: var(--surface-soft); }
.stage-date { display: block; color: #d4d6df; font-family: "Miriam Mono CLM", monospace; font-size: 12px; font-weight: 400; line-height: 1.2; text-align: left; }
.module-switch-button.active { border-color: #c9c3d2; color: #514a5c; background: #e9e6ee; }
.module-switch-button.active:hover { background: #e3dfe9; }
.locker-templates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: visible; }
.locker-templates .template-card, .locker-templates .template-card.selected { min-width: 0; min-height: 122px; flex: initial; flex-direction: column; justify-content: center; gap: 6px; padding: 8px; text-align: center; }
.locker-templates .template-thumb { display: grid; width: 100%; height: 76px; flex: 0 0 76px; place-items: center; overflow: hidden; border-radius: var(--radius-sm); background: #fff; }
.locker-templates .template-thumb img { width: 100%; height: 100%; object-fit: contain; }
.locker-templates .template-meta { justify-content: center; padding: 0; }
.locker-templates .template-meta strong { font-size: 13px; }
.locker-templates .template-card.selected { border-color: #c9c3d2; color: #514a5c; background: #f3f1f6; box-shadow: 0 0 0 1px rgb(99 91 112 / 10%); }
.locker-templates .template-card:hover { border-color: #c9c3d2; }

@media (max-width: 767px) {
  #restartBtn.restart-button { min-height: 36px; padding: 6px 9px; font-size: 11px; }
  .stage-date { font-size: 12px; }
  .locker-templates { gap: 6px; }
  .locker-templates .template-card, .locker-templates .template-card.selected { min-height: 86px; gap: 4px; padding: 5px; }
  .locker-templates .template-thumb { height: clamp(40px, 12vw, 56px); flex-basis: clamp(40px, 12vw, 56px); }
  .locker-templates .template-meta strong { font-size: 11px; }
}