.preview-stage[data-kind^="tray"] {
  aspect-ratio: 157 / 124;
}

/* Load-order final overrides for the latest responsive pass. */
.hero-brand-title { max-width: max-content; font-size: clamp(32px, 4vw, 54px); line-height: .94; letter-spacing: -.06em; white-space: nowrap; overflow-wrap: normal; }
.mockup-page { padding: 0 clamp(18px, 4vw, 56px) 36px; }
.mockup-page-header { display: flex; position: sticky; top: 0; z-index: 31; height: 68px; min-height: 68px; max-width: none; margin: 0 calc(clamp(18px, 4vw, 56px) * -1); padding: 0 clamp(18px, 4vw, 56px); align-items: center; border-bottom: 0; background: transparent; text-align: left; }
.mockup-page-header .brand-logo { display: flex; }
.mockup-page-header .site-dock-brand { top: 50%; }
.mockup-page-intro { max-width: 1720px; margin: 0 auto 22px; padding: 48px 0 36px; }
.mockup-page-intro h1 { max-width: 900px; margin: 0; font: 700 clamp(30px, 4.5vw, 62px)/1.08 Outfit, "Noto Sans SC", sans-serif; letter-spacing: -.05em; }
.mockup-page-header .public-floating-back, .orders-header .public-floating-back { position: fixed !important; top: calc(100dvh - 88px) !important; right: clamp(12px, 2.2vw, 32px) !important; bottom: auto !important; z-index: 45 !important; transform: none; }
.public-floating-back span:first-child { font: 400 27px/1 Arial, sans-serif; }
.mockup-page-header .public-floating-back:hover, .orders-header .public-floating-back:hover { transform: translateX(-4px); }
.submit-bar { transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
.submit-bar.is-guided { border-color: #82a878; background: rgba(244, 252, 225, .97); box-shadow: 0 0 0 3px rgba(201,255,70,.42), 0 18px 44px rgba(23,36,31,.2); }
.submit-bar .primary-button.is-blocked { background: #8f9b91; }
.submit-bar .primary-button.is-ready { background: var(--ink); box-shadow: 0 7px 18px rgba(23,36,31,.18); }
.field.needs-attention, .asset-item.needs-attention, .audio-panel.needs-attention { animation: missing-attention 1.35s ease both; border-color: #d69d32 !important; box-shadow: 0 0 0 4px rgba(214,157,50,.2), 0 10px 26px rgba(23,36,31,.1); }
@keyframes missing-attention { 0%,100% { transform: translateY(0); } 24% { transform: translateY(-3px); } 48% { transform: translateY(2px); } 72% { transform: translateY(-1px); } }

@media (max-width: 760px) {
  .hero-brand-title { max-width: calc(100vw - 28px); font-size: clamp(30px, 9.6vw, 40px); white-space: nowrap; }
  .mockup-page { padding: 0 16px 28px; }
  .mockup-page-header { height: 60px; min-height: 60px; margin: 0 -16px; padding: 0 16px; }
  .mockup-page-header .brand-logo { max-width: 28px; overflow: hidden; }
  .mockup-page-header .brand-logo img { width: 90px; max-width: none; }
  .mockup-page-intro { padding: 34px 0 26px; }
  .mockup-page-intro h1 { font-size: clamp(28px, 9vw, 42px); }
  .mockup-page-header .public-floating-back, .orders-header .public-floating-back { top: 770px !important; right: 12px !important; }
  .public-floating-back span:first-child { font-size: 23px; }
  .submit-bar { width: min(158px, calc(100vw - 22px)); padding: 8px; border-radius: 16px; }
  .submit-bar h2 { white-space: nowrap; font-size: 13px; line-height: 16px; }
  .submit-bar .design-set-status { margin-top: 3px !important; font-size: 9px; }
  .submit-bar .submit-actions { gap: 5px; }
  .submit-bar .submit-actions > button, .submit-bar .draft-action > button { min-height: 30px; padding: 6px 8px; font-size: 10px; line-height: 1; }
}

/* Upload Studio shell: the form keeps its existing IDs and behaviour while
   adopting the same visual language as the template and render pages. */
.upload-document { background: #a9d696; }
.upload-document .page-shell { width: min(1240px, calc(100% - 56px)); padding: 0 0 56px; }
.upload-document .site-header { width: 100%; height: 80px; gap: 18px; border-bottom-color: #5b865b44; color: #356343; }
.upload-document .site-header .brand-logo { width: 48px; height: 48px; max-width: 48px; }
.upload-document .site-header .brand-logo img { height: 100%; }
.upload-document .site-dock-brand { display: grid; gap: 2px; color: var(--ink); text-decoration: none; }
.upload-document .site-dock-title { font: 700 23px/1 "Black Cat Engravers", Georgia, serif; letter-spacing: .015em; }
.upload-document .site-dock-slogan { color: #3f704b; font: 500 10px/1.2 Outfit, sans-serif; letter-spacing: .03em; }
.upload-document .site-context { margin-left: auto; color: #356343; font: 600 10px/1 Outfit, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.upload-document .order-search-link { margin-left: 0; border-color: #386747aa; background: #f7ffe9cc; color: #294b35; }
.upload-document .uploads-landing { min-height: calc(100svh - 80px); padding: 62px 0 52px; }
.uploads-landing-intro { max-width: 900px; margin: 0 auto 36px; text-align: center; }
.uploads-eyebrow { margin: 0 0 20px; color: #3f704b; font: 600 11px/1.2 Outfit, sans-serif; letter-spacing: .16em; }
.uploads-landing-intro h1 { margin: 0; color: var(--ink); font: 700 clamp(34px, 4.5vw, 58px)/1.08 Outfit, "Noto Sans SC", sans-serif; letter-spacing: -.045em; }
.uploads-landing-intro > p:last-child { max-width: 720px; margin: 18px auto 0; color: #52745b; font-size: 14px; line-height: 1.8; }
.uploads-carrier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.uploads-carrier-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #719c73aa; border-radius: 24px; background: rgb(249 255 241 / 84%); color: var(--ink); text-decoration: none; box-shadow: 0 18px 40px rgb(49 95 61 / 13%); transition: transform .25s ease, box-shadow .25s ease; }
.uploads-carrier-card:hover, .uploads-carrier-card:focus-visible { transform: translateY(-5px); box-shadow: 0 23px 46px rgb(49 95 61 / 21%); outline: none; }
.uploads-carrier-preview { display: grid; place-items: center; min-height: 220px; padding: 26px; background: rgb(239 249 224 / 80%); }
.uploads-carrier-visual { --physical-ratio: 1; --asset-ratio: 1; position: relative; width: 100%; height: 195px; overflow: visible; isolation: isolate; }
.uploads-carrier-visual img { display: block; position: absolute; top: 50%; left: 50%; width: auto; height: clamp(120px, calc(156px * var(--physical-ratio)), 238px); max-width: none; max-height: none; aspect-ratio: var(--asset-ratio); object-fit: contain; pointer-events: none; backface-visibility: hidden; transform-origin: center; will-change: transform, opacity; filter: drop-shadow(0 14px 20px rgb(33 69 40 / 18%)); transition: opacity .42s cubic-bezier(.2,.8,.25,1), transform .52s cubic-bezier(.2,.8,.25,1); }
.uploads-carrier-cover { z-index: 2; transform: translate(-50%, -50%) scale(.94); }
.uploads-carrier-object { z-index: 1; opacity: 0; transform: translate(-50%, -50%) scale(.82); }
.uploads-carrier-card:hover .uploads-carrier-cover, .uploads-carrier-card:focus-visible .uploads-carrier-cover { transform: translate(calc(-50% - 34px), -50%) scale(.74); }
.uploads-carrier-card:hover .uploads-carrier-object, .uploads-carrier-card:focus-visible .uploads-carrier-object { opacity: 1; transform: translate(calc(-50% + 34px), -50%) scale(.74); }
.carrier-visual-CD { --physical-ratio: 1; --asset-ratio: 640 / 566; }
.carrier-visual-CassetteTape { --physical-ratio: .872; --asset-ratio: 392 / 600; }
.carrier-visual-Vinyl { --physical-ratio: 2.52; --asset-ratio: 598 / 600; }
.uploads-carrier-body { display: flex; flex: 1; flex-direction: column; padding: 23px 24px 25px; }
.uploads-carrier-kicker { margin: 0 0 9px; color: #527f5b; font: 600 11px/1 Outfit, sans-serif; letter-spacing: .15em; }
.uploads-carrier-body h2 { margin: 0; color: var(--ink); font: 700 24px/1.2 Outfit, "Noto Sans SC", sans-serif; }
.uploads-carrier-body > p:not(.uploads-carrier-kicker) { min-height: 65px; margin: 13px 0 20px; color: #617566; font-size: 13px; line-height: 1.7; }
.uploads-carrier-link { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-top: auto; padding: 0 16px; border: 1px solid #315e3a; border-radius: 999px; background: var(--ink); color: #fff; font: 600 13px/1 "Noto Sans SC", sans-serif; }
.uploads-carrier-link b { color: var(--home-acid, #c9ff46); font: 400 22px/1 Arial, sans-serif; }
.uploads-landing-note { max-width: 760px; margin: 27px auto 0; color: #608068; font: 500 12px/1.7 Outfit, "Noto Sans SC", sans-serif; text-align: center; }
.uploads-landing-credits { margin-top: 31px; }
.upload-form-surface, #upload-form-surface { min-width: 0; }
.upload-document #upload-form-surface[hidden] { display: none !important; }
html.is-upload-landing .upload-document #upload-form-surface { display: none; }
html.is-upload-landing .upload-document .uploads-landing { display: block !important; }
.upload-document .hero { padding: 68px 0 38px; }
.upload-document .hero { text-align: center; }
.upload-document .hero > div { display: flex; flex-direction: column; align-items: center; }
.upload-document .hero-brand-title,
.upload-document .hero h1,
.upload-document .hero-copy { margin-left: auto; margin-right: auto; }
.upload-document .hero h1 { text-align: center; }
.upload-document .hero-copy { text-align: center; }
.upload-breadcrumb { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 24px; color: #3f704b; font: 600 14px/1.2 Outfit, "Noto Sans SC", sans-serif; letter-spacing: .03em; }
.upload-breadcrumb a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.upload-breadcrumb a:hover, .upload-breadcrumb a:focus-visible { color: var(--ink); }
.upload-breadcrumb strong { color: var(--ink); font-weight: 700; }
.upload-breadcrumb[hidden] { display: none; }
.upload-document .hero-brand-title { margin-bottom: 18px; }
.upload-document .hero-copy { max-width: 700px; }
.upload-document .progress-dock { margin-bottom: 14px; }
.upload-document .card { border-color: #719c73aa; border-radius: 24px; background: rgb(249 255 241 / 88%); box-shadow: 0 18px 40px rgb(49 95 61 / 10%); }
.upload-document .order-panel, .upload-document .asset-list, .upload-document .preview-panel, .upload-document .audio-panel { padding: 28px; }
.upload-document .product-summary { margin: 18px 0; padding: 23px 28px; }
.upload-document .substrate-panel { padding: 28px; }
.upload-document .product-kind-switch span, .upload-document .source-switch span, .upload-document .compact-field select, .upload-document .field input, .upload-document .field textarea { border-color: #b7cbb6; border-radius: 12px; background: #fffefa; }
.upload-document .product-kind-switch input:checked + span, .upload-document .source-switch input:checked + span { border-color: #6e9b70; background: #e1f2b8; box-shadow: inset 0 0 0 1px #9fbd7b; }
.upload-document .primary-button, .upload-document .template-download-link { border-radius: 999px; }
.upload-document .asset-item { border-color: #c4d5bf; border-radius: 14px; background: #fffefa; }
.upload-document .asset-item.is-selected { border-color: #6e9b70; box-shadow: 0 0 0 3px #e3f1d7; }
.upload-document .preview-panel { background: rgb(249 255 241 / 88%); }
.upload-document .preview-notes { border-radius: 12px; background: #eef8e1; }
.upload-document .site-credits { margin-top: 31px; }
.upload-document .hero-copy, .upload-document .selection-note, .upload-document .muted, .upload-document .preview-notes, .upload-document .asset-meta, .upload-document .config-option-panel { text-wrap: pretty; word-break: keep-all; line-break: strict; overflow-wrap: normal; }
.upload-document .asset-meta-size, .upload-document .asset-meta-pixels { display: block; }
.upload-document .asset-meta-pixels { margin-top: 2px; white-space: nowrap; }

@media (max-width: 900px) {
  .uploads-carrier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .upload-document .page-shell { width: calc(100% - 28px); padding-bottom: 42px; }
  .upload-document .site-header { width: 100%; height: 64px; }
  .upload-document .site-header .brand-logo { width: 37px; height: 37px; max-width: 37px; }
  .upload-document .site-dock-title { font-size: 16px; }
  .upload-document .site-dock-slogan { font-size: 8px; line-height: 1.25; }
  .upload-document .site-context { display: none; }
  .upload-document .order-search-link { padding: 6px 10px; font-size: 11px; }
  .upload-document .uploads-landing { min-height: calc(100svh - 64px); padding: 45px 0 42px; }
  .uploads-landing-intro { margin-bottom: 27px; }
  .uploads-eyebrow { font-size: 10px; letter-spacing: .11em; }
  .uploads-landing-intro h1 { font-size: clamp(28px, 8.2vw, 38px); white-space: nowrap; }
  .uploads-landing-intro > p:last-child { font-size: 13px; text-wrap: pretty; word-break: keep-all; }
  .uploads-carrier-grid { grid-template-columns: 1fr; gap: 14px; }
  .uploads-carrier-preview { min-height: 180px; }
  .uploads-carrier-visual { height: 160px; }
  .uploads-carrier-visual img { height: clamp(112px, calc(136px * var(--physical-ratio)), 194px); }
  .uploads-carrier-card:hover .uploads-carrier-cover, .uploads-carrier-card:focus-visible .uploads-carrier-cover { transform: translate(-50%, -50%) scale(.94); }
  .uploads-carrier-card:hover .uploads-carrier-object, .uploads-carrier-card:focus-visible .uploads-carrier-object { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  .uploads-carrier-body { padding: 21px 21px 23px; }
  .uploads-carrier-body h2 { font-size: 22px; }
  .uploads-carrier-body > p:not(.uploads-carrier-kicker) { min-height: 0; font-size: 12px; }
  .upload-document .hero { padding: 48px 4px 29px; }
  .upload-breadcrumb { gap: 9px; margin-bottom: 18px; font-size: 12px; }
  .upload-document .hero h1 { font-size: clamp(29px, 8vw, 42px); }
  .upload-document .hero-copy { font-size: 13px; }
  .upload-document .order-panel, .upload-document .asset-list, .upload-document .preview-panel, .upload-document .audio-panel, .upload-document .substrate-panel { padding: 20px; }
  .upload-document .product-summary { padding: 20px; }
  .upload-document .section-heading { gap: 10px; }
  .upload-document .section-heading h2 { font-size: 20px; }
  .upload-document .asset-name { white-space: normal; line-height: 1.35; }
  .upload-document .product-kind-switch b { font-size: 13px; }
  .upload-document .product-kind-switch small { line-height: 1.35; }
  .upload-document .site-credits { margin-top: 26px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .uploads-carrier-card, .uploads-carrier-visual img { transition: none; }
}

/* Vinyl custom artwork is intentionally specification-pending until the final
   finished dimensions and cut lines are supplied. */
.vinyl-sticker-options { margin-top: 14px; padding: 13px; border: 1px solid #b8d4ad; border-radius: 8px; background: #f4faed; }
.vinyl-sticker-options > .picker-label { margin-bottom: 9px; color: #4f7658; }
.vinyl-sticker-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vinyl-sticker-options .compact-field input { width: 100%; height: 42px; border: 1px solid #cdd1c9; border-radius: 7px; padding: 0 9px; background: #fff; color: var(--ink); font: 12px inherit; }
.vinyl-sticker-options > small, .vinyl-option-panel small { display: block; margin-top: 9px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.vinyl-option-panel { border-color: #9fbe96; background: #f4faed; }
.vinyl-option-panel p { color: #315e3a; }
.preview-stage[data-kind="vinyl-spread"] { aspect-ratio: 2 / 1; width: min(100%, 520px); }
.preview-stage[data-kind="vinyl-spread"] .trim-outline,
.preview-stage[data-kind="vinyl-spread"] .safe-outline,
.preview-stage[data-kind="vinyl-spread"] .spine,
.preview-stage[data-kind="vinyl-spread"] .tray-overlay,
.preview-stage[data-kind="vinyl-spread"] .disc-overlay { display: none; }
.preview-stage[data-kind="vinyl-spread"] .slipcase-overlay { display: grid; }
.preview-stage[data-kind="vinyl-spread"] #slipcase-back-image,
.preview-stage[data-kind="vinyl-spread"] #slipcase-front-image { top: 0; bottom: 0; width: 50%; height: 100%; object-fit: cover; z-index: 1; }
.preview-stage[data-kind="vinyl-spread"] #slipcase-back-image { left: 0; right: auto; }
.preview-stage[data-kind="vinyl-spread"] #slipcase-front-image { right: 0; left: auto; }
.preview-stage[data-kind="vinyl-spread"][data-back-uploaded="true"] .slipcase-overlay span:first-child,
.preview-stage[data-kind="vinyl-spread"][data-front-uploaded="true"] .slipcase-overlay span:last-child { display: none; }
.preview-stage[data-kind="vinyl-spread"] .slipcase-overlay span { font-size: clamp(12px, 2vw, 18px); line-height: 1.25; text-align: center; }

@media (max-width: 760px) {
  .vinyl-sticker-fields { grid-template-columns: 1fr; gap: 8px; }
  .preview-stage[data-kind="vinyl-spread"] { width: min(100%, 360px); }
}

/* Draft confirmation keeps the reusable verification code visible until the customer closes it. */
.draft-toast > div { display: grid; gap: 4px; min-width: 0; }
.draft-toast strong { color: #315e3a; font-size: 12px; }
.draft-toast code { overflow-wrap: anywhere; color: #315e3a; font: 700 12px/1.35 Outfit, monospace; letter-spacing: .03em; }
.draft-toast span { color: #7b641f; }

/* Tray-card geometry is calculated from the 157 × 124 mm bleed canvas. */
.preview-stage[data-kind^="tray"] .trim-outline {
  inset: 2.42% 1.91%;
}

.preview-stage[data-kind^="tray"] .safe-outline {
  inset: 6.45% 5.1%;
}

.preview-stage[data-kind="tray-inner"] .tray-overlay {
  inset: 2.42% 1.91%;
}

/* Do not fake the transparent tray with a second oversized circular shadow. */
.preview-stage[data-kind="tray-inner"] .tray-overlay::before {
  display: none;
}

.preview-stage[data-kind="tray-inner"] .tray-disc {
  width: 79.47%;
  left: 13.91%;
  top: -0.3%;
  border: 2px solid rgb(102 126 117 / 45%);
  box-shadow: 0 0 0 3px rgb(102 126 117 / 12%);
}

.preview-stage[data-kind="tray-inner"] .tray-center {
  width: 20.8%;
  left: 43.24%;
  top: 39.6%;
  background: rgb(57 73 67 / 55%);
  border-color: rgb(255 255 255 / 70%);
}

/* Outer tray-card spines start at the trim edge and end 7 mm into the 151 mm finished card. */
.preview-stage[data-kind="tray-outer"] .spine {
  top: 2.42%;
  bottom: 2.42%;
  width: 4.46%;
  background: rgb(119 133 120 / 8%);
}

.preview-stage[data-kind="tray-outer"] .left-spine {
  left: 1.91%;
  border-right: 1px dashed rgb(74 87 79 / 75%);
}

.preview-stage[data-kind="tray-outer"] .right-spine {
  right: 1.91%;
  border-left: 1px dashed rgb(74 87 79 / 75%);
  border-right: 0;
}

/* Tray cards do not expose a customer-facing safety-area overlay. */
.preview-stage[data-kind^="tray"] .safe-outline {
  display: none;
}

/* Inner tray-card guide geometry from the physical Jewel Case reference. */
.preview-stage[data-kind="tray-inner"] .tray-overlay::before {
  display: block;
  inset: 0;
  background:
    linear-gradient(to right, transparent 13.91%, rgb(0 213 210 / 90%) 13.91% 14.12%, transparent 14.12%),
    linear-gradient(to right, transparent 53.64%, rgb(0 213 210 / 90%) 53.64% 53.85%, transparent 53.85%),
    linear-gradient(to bottom, transparent 49.79%, rgb(74 87 79 / 72%) 49.79% 50.21%, transparent 50.21%);
  clip-path: none;
  z-index: 3;
}

.preview-stage[data-kind="tray-inner"] .tray-disc {
  width: 79.47%;
  left: 13.91%;
  top: -.85%;
  border: 2px solid rgb(86 104 96 / 50%);
  box-shadow: 0 0 0 3px rgb(86 104 96 / 11%);
  z-index: 1;
}

.preview-stage[data-kind="tray-inner"] .tray-center {
  width: 19.21%;
  left: 44.03%;
  top: 37.71%;
  background: rgb(57 73 67 / 48%);
  z-index: 2;
}

.preview-stage[data-kind="disc"][data-hub="large"] .disc-hole {
  width: 32.5%;
  height: 32.5%;
  top: 33.75%;
  left: 33.75%;
}

/* Each hub choice keeps its own supplied physical CD substrate. The live
   picker uses downscaled derivatives; the full-resolution PNGs remain reserved
   for the final canvas mockup. */
.preview-stage[data-kind="disc"] {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.preview-stage[data-kind="disc"][data-hub="small"] {
  background-image: url("./assets/ui-optimized/cd-small-hub-preview.webp");
}

.preview-stage[data-kind="disc"][data-hub="large"] {
  background-image: url("./assets/ui-optimized/cd-large-hub-discbase.webp");
}

.preview-stage[data-kind="disc"] .artwork-placeholder { display: none; }

.preview-stage[data-kind="disc"] #artwork-image {
  z-index: 0;
  clip-path: none;
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, transparent 0 20.83%, #000 21.15% 95.83%, transparent 96.1%);
  mask: radial-gradient(circle closest-side at 50% 50%, transparent 0 20.83%, #000 21.15% 95.83%, transparent 96.1%);
  opacity: .68;
  mix-blend-mode: multiply;
}

.preview-stage[data-kind="disc"][data-hub="large"] #artwork-image {
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, transparent 0 32.5%, #000 32.82% 95.83%, transparent 96.1%);
  mask: radial-gradient(circle closest-side at 50% 50%, transparent 0 32.5%, #000 32.82% 95.83%, transparent 96.1%);
}

.preview-stage[data-kind="disc"][data-white-base="white"] #artwork-image { opacity: 1; mix-blend-mode: normal; }

.preview-stage[data-kind="disc"] .trim-outline {
  display: none;
}

.preview-stage[data-kind="disc"] .safe-outline { display: none; }

.preview-stage[data-kind="disc"] .disc-overlay {
  inset: 0;
  z-index: 2;
}

.preview-stage[data-kind="disc"] .disc-laser {
  display: none;
}

.preview-stage[data-kind="disc"] .disc-print {
  inset: 2.08%;
  border-width: 1.5px;
}

.preview-stage[data-kind="disc"] .disc-hole {
  background: transparent;
  border-width: 1.5px;
  z-index: 3;
}

/* Cassette shell: 101 × 63.8 mm finished artwork, with asymmetric safe lines.
   These preview derivatives preserve the supplied alpha/texture while avoiding
   multi-megabyte full-resolution downloads in the picker. */
.preview-stage[data-kind="tape"] { width: min(100%, 500px); aspect-ratio: 101 / 63.8; background-color: #e8e8e6; background-position: center; background-size: cover; background-repeat: no-repeat; }
.preview-stage[data-kind="tape"][data-tape="transparent"] { background-image: url("./assets/ui-optimized/tape-shell-transparent-preview.webp"); }
.preview-stage[data-kind="tape"][data-tape="opaque-large"] { background-image: url("./assets/ui-optimized/tape-shell-opaque-large-preview.webp"); }
.preview-stage[data-kind="tape"][data-tape="opaque-small"] { background-image: url("./assets/ui-optimized/tape-shell-opaque-small-preview.webp"); }
.preview-stage[data-kind="tape"] .trim-outline,
.preview-stage[data-kind="tape"] .safe-outline,
.preview-stage[data-kind="tape"] .spine,
.preview-stage[data-kind="tape"] .tray-overlay,
.preview-stage[data-kind="tape"] .disc-overlay,
.preview-stage[data-kind="tape"] .slipcase-overlay { display: none; }
.preview-stage[data-kind="tape"] .artwork-placeholder { display: none; }
.preview-stage[data-kind="tape"] #artwork-image { inset: 11% 5.5% 21%; z-index: 0; width: 89%; height: 68%; opacity: 1; mix-blend-mode: normal; -webkit-mask: url("./assets/gogorender/ct/cassette-label-horizontal-mask-v01.svg") center / 100% 100% no-repeat; mask: url("./assets/gogorender/ct/cassette-label-horizontal-mask-v01.svg") center / 100% 100% no-repeat; }
.preview-stage[data-kind="tape"][data-tape-white-base="shell"] #artwork-image { opacity: .72; mix-blend-mode: multiply; }
.tape-overlay { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.preview-stage[data-kind="tape"] .tape-overlay { display: block; }
.tape-safe-outline { position: absolute; top: 11%; right: 5.5%; bottom: 21%; left: 5.5%; width: 89%; height: 68%; overflow: visible; fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; }

.legend-print:before { background: var(--cyan); }
.legend-hole:before { background: var(--red); }
.legend-fold:before { background: var(--cyan); }
.legend-spine:before { background: #109fda; }
.legend-fold-green:before { background: #4e9b61; }

/* Slim Case: use the supplied die-line reference over the uploaded full spread. */
.preview-stage[data-kind="slimcase"] { aspect-ratio: 295 / 126; width: min(100%, 540px); }
.preview-stage[data-kind="slimcase"] .trim-outline,
.preview-stage[data-kind="slimcase"] .safe-outline,
.preview-stage[data-kind="slimcase"] .spine,
.preview-stage[data-kind="slimcase"] .tray-overlay,
.preview-stage[data-kind="slimcase"] .disc-overlay,
.preview-stage[data-kind="slimcase"] .slipcase-overlay { display: none; }
.preview-stage[data-kind="slimcase"] #slimcase-guide-image { display: block !important; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: .94; mix-blend-mode: normal; pointer-events: none; z-index: 4; }
.preview-stage[data-kind="slimcase"]::after { content: ""; position: absolute; top: 0; bottom: 0; left: 54.2%; width: 1.5px; background: #4e9b61; pointer-events: none; z-index: 5; }

.preview-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.preview-actions small { color: var(--muted); text-align: center; }
.preview-dialog { width: min(92vw, 1100px); max-width: 1100px; }
#preview-dialog { width: min(92vw, 1100px); max-width: 1100px; max-height: calc(100svh - 28px); padding: 0; overflow: hidden; }
#preview-dialog .dialog-content.preview-dialog { width: 100%; max-width: none; min-width: 0; max-height: calc(100svh - 28px); margin: 0; box-sizing: border-box; overflow: auto; }
.preview-dialog-stage { width: 100%; max-height: 68vh; overflow: auto; display: grid; place-items: center; padding: 12px; background: #f1f3ec; border: 1px solid rgba(24, 52, 39, .18); border-radius: 18px; }
.preview-dialog-artwork { position: relative; width: min(100%, 900px); max-width: 100%; flex: 0 0 auto; transform-origin: center; transition: transform .15s ease-out; }
.preview-dialog-artwork > img { display: block; width: 100%; max-width: none; height: auto; object-fit: fill; }
.preview-dialog-artwork > #preview-dialog-guide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .94; mix-blend-mode: normal; pointer-events: none; }
.preview-dialog-stage.is-zoomed { cursor: grab; touch-action: none; user-select: none; }
.preview-dialog-stage.is-panning { cursor: grabbing; }
.preview-dialog-legend { justify-content: center; margin-top: 12px; }
.preview-zoom-control { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; color: var(--ink); }
.preview-zoom-control input { width: min(360px, 70vw); accent-color: var(--green); }
.slimcase-split-adjust { border: 1px solid var(--green); background: transparent; color: var(--green); }

#crop-dialog.is-fullscreen { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; border-radius: 0; padding: clamp(18px, 3vw, 42px); }
#crop-dialog.is-fullscreen { background: radial-gradient(circle at 50% 8%, #eff8d4 0, transparent 34%), linear-gradient(135deg, #d9edc2 0%, #c6e2b2 52%, #a8d19d 100%); }
#crop-dialog.is-fullscreen::backdrop { background: rgba(8, 24, 18, .78); }
#crop-dialog.is-fullscreen .dialog-content { width: min(100%, 1500px); height: 100%; max-width: none; margin: auto; padding: clamp(24px, 3vw, 46px); border: 1px solid #d2e0c9; border-radius: 28px; background: #fffefa; box-shadow: 0 24px 80px rgba(23, 36, 31, .2); display: flex; flex-direction: column; justify-content: center; overflow: auto; }
#crop-dialog.is-fullscreen .crop-stage { width: min(100%, 1320px); max-height: none; margin: 14px auto; }
#crop-dialog.is-fullscreen #crop-image { max-height: none; }
#crop-dialog.is-fullscreen .lowres-actions { margin-top: 18px; }
#crop-dialog:not(.is-fullscreen) .crop-stage { width: min(100%, 900px); max-height: none; }
#crop-dialog:not(.is-fullscreen) #crop-image { max-height: none; }
#crop-dialog { width: min(92vw, 760px); max-width: 760px; overflow-x: hidden; overflow-y: auto; }
#crop-dialog .dialog-content.crop-dialog { width: 100%; max-width: none; min-width: 0; margin: 0 auto; box-sizing: border-box; }
#crop-dialog .crop-stage { flex: 0 0 auto; }
#crop-dialog .lowres-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; align-items: stretch; gap: 10px; width: min(100%, 660px); margin: 22px auto 0; }
#crop-dialog .lowres-actions:has(#crop-return:not([hidden])) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#crop-dialog.is-fullscreen .lowres-actions { width: min(100%, 860px); margin-top: 18px; }
#crop-dialog .lowres-actions > button { width: 100%; min-width: 0; max-width: none; padding-right: 10px; padding-left: 10px; white-space: nowrap; }
@media (max-width: 760px) {
  #crop-dialog { width: calc(100vw - 20px); max-width: none; max-height: calc(100svh - 20px); }
  #crop-dialog .lowres-actions,
  #crop-dialog .lowres-actions:has(#crop-return:not([hidden])) { grid-template-columns: 1fr; width: 100%; margin-top: 18px; }
}

/* Dynamically assembled C02 and folding-poster previews. */
.preview-stage[data-kind="assembly"] .trim-outline,
.preview-stage[data-kind="assembly"] .safe-outline,
.preview-stage[data-kind="assembly"] .spine,
.preview-stage[data-kind="assembly"] .tray-overlay,
.preview-stage[data-kind="assembly"] .disc-overlay,
.preview-stage[data-kind="assembly"] .slipcase-overlay { display: none; }
.assembly-preview { position: absolute; inset: var(--inset-y, 0) var(--inset-x, 0); display: grid; overflow: hidden; z-index: 3; }
.assembly-preview.has-trim::before { content: ""; position: absolute; inset: var(--trim-inset-y, 0) var(--trim-inset-x, 0); border: 1.5px solid var(--red); pointer-events: none; z-index: 4; }
.assembly-cell { position: relative; display: grid; min-width: 0; min-height: 0; place-items: center; overflow: hidden; outline: 1px solid rgb(0 213 210 / 72%); background: repeating-conic-gradient(#e9ebe6 0 25%, #f8f8f5 0 50%) 50% / 14px 14px; }
.assembly-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.assembly-cell span { padding: 5px; color: #6a756e; font-size: clamp(9px, 1.7vw, 13px); text-align: center; line-height: 1.35; }

/* Slipcase sleeve: two 130 × 130 mm finished files, combined into one 260 × 130 mm preview. */
.preview-stage[data-kind="slipcase-spread"] { aspect-ratio: 260 / 130; width: min(100%, 520px); }
.preview-stage[data-kind="slipcase-spread"] .trim-outline { display: none; }
.preview-stage[data-kind="slipcase-spread"] .safe-outline,
.preview-stage[data-kind="slipcase-spread"] .spine,
.preview-stage[data-kind="slipcase-spread"] .tray-overlay,
.preview-stage[data-kind="slipcase-spread"] .disc-overlay { display: none; }
.slipcase-overlay { display: none; position: absolute; inset: 0; grid-template-columns: 1fr 1fr; pointer-events: none; z-index: 2; }
.preview-stage[data-kind="slipcase-spread"] .slipcase-overlay { display: grid; }
.slipcase-overlay::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1.5px; background: var(--cyan); }
.slipcase-overlay span { display: grid; place-items: center; color: rgb(23 36 31 / 76%); font: 700 clamp(15px, 3vw, 24px) Outfit, "Noto Sans SC", sans-serif; }
.preview-stage[data-kind="slipcase-spread"][data-back-uploaded="true"] .slipcase-overlay span:first-child,
.preview-stage[data-kind="slipcase-spread"][data-front-uploaded="true"] .slipcase-overlay span:last-child { display: none; }
.preview-stage[data-kind="slipcase-spread"] #slipcase-back-image,
.preview-stage[data-kind="slipcase-spread"] #slipcase-front-image { top: 0; bottom: 0; width: 50%; height: 100%; object-fit: cover; z-index: 1; }
.preview-stage[data-kind="slipcase-spread"] #slipcase-back-image { left: 0; right: auto; }
.preview-stage[data-kind="slipcase-spread"] #slipcase-front-image { right: 0; left: auto; }

/* The placeholder and upload status must never cover customer artwork. */
[hidden],
.artwork-placeholder[hidden] {
  display: none !important;
}

/* BLACK CAT RECORDS identity */
@font-face {
  font-family: "Black Cat Engravers";
  src: url("./assets/fonts/EngraversMT-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.brand-logo { display: flex; align-items: center; max-width: 210px; }
.brand-logo img { display: block; width: 100%; height: 36px; object-fit: contain; object-position: left center; }
.hero-logo { display: block; width: min(390px, 100%); margin-top: 22px; object-fit: contain; object-position: left center; }
.hero h1 { white-space: nowrap; font-size: clamp(34px, 4.4vw, 58px); }
.hero-title-line { display: inline; white-space: nowrap; }
.hero-brand-title { margin: 0 0 18px; color: var(--ink); font: 700 clamp(48px, 7.2vw, 92px)/.9 "Black Cat Engravers", Georgia, serif; letter-spacing: -.025em; }

.site-header .order-search-link {
  margin-left: auto;
  padding: 7px 12px;
  border: 1px solid #8da08d;
  border-radius: 999px;
  color: #294b35;
  background: rgb(255 255 255 / 68%);
  font-weight: 700;
  text-decoration: none;
}
.site-header .order-search-link:hover { background: #eff8d4; border-color: #54765a; }
.site-header .order-search-link + .template-tag { margin-left: 0; }

#result-dialog { width: min(560px, calc(100vw - 28px)); max-width: 560px; overflow: hidden; }
.submission-success { width: 100%; min-width: 0; padding: 36px; }
.submission-success h2 { max-width: none; font-size: clamp(25px, 4vw, 34px); line-height: 1.24; white-space: normal; overflow-wrap: anywhere; }
.submission-success p:last-of-type { margin: 18px 0 26px; }
.submission-success .primary-button { width: 100%; }
.verification-code-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; margin: 20px 0 24px; padding: 14px; border: 1px solid #b9c9b8; border-radius: 10px; background: #f2f8e9; }
.verification-code-panel > span { grid-column: 1 / -1; color: #476550; font-size: 11px; font-weight: 700; }
.verification-code-panel code { align-self: center; overflow-wrap: anywhere; color: var(--ink); font: 700 15px/1.4 Outfit, monospace; letter-spacing: .035em; }
.verification-code-panel .secondary-button { padding: 9px 12px; white-space: nowrap; }
.verification-code-panel small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; line-height: 1.5; }
.verification-card-download { width: 100%; margin: 0 0 10px; background: #4f7f58; box-shadow: 0 8px 20px rgb(54 94 63 / 20%); }
.verification-card-download:hover { background: #3f6b48; }

.orders-page { width: min(1180px, calc(100% - 32px)); margin: auto; padding: 24px 0 64px; }
.orders-header { justify-content: space-between; }
.orders-header .secondary-button { color: var(--ink); text-decoration: none; }
.orders-intro { max-width: 780px; padding: 76px 0 28px; }
.orders-intro h1 { margin: 0; font: 700 clamp(38px, 6vw, 66px)/1.05 Outfit, "Noto Sans SC", sans-serif; letter-spacing: -.045em; }
.orders-intro > p:not(.eyebrow) { max-width: 650px; margin: 18px 0 0; color: var(--muted); line-height: 1.7; }
.order-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 30px; }
.order-search-form .primary-button { height: 43px; }
.orders-local-note { margin: 0 0 16px; color: #6d756f; font-size: 12px; }
.order-results { display: grid; gap: 18px; }
.orders-loading { padding: 40px; color: var(--muted); text-align: center; }
.orders-empty { padding: 30px; }
.orders-empty h2 { margin: 0; }
.orders-empty p:last-child { color: var(--muted); }
.order-record { overflow: hidden; }
.order-record-header { display: flex; align-items: start; justify-content: space-between; gap: 24px; padding: 25px 28px; border-bottom: 1px solid var(--line); }
.order-record-header h2 { margin: 0; font: 700 27px Outfit, "Noto Sans SC", sans-serif; }
.order-record-header p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.order-record-header > span { padding: 6px 10px; border-radius: 999px; background: #eff8d4; font-size: 12px; font-weight: 700; }
.order-record-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 25px 28px; }
.order-disc-settings { grid-column: 1 / -1; }
.order-record h3 { margin: 0 0 12px; font: 700 16px Outfit, "Noto Sans SC", sans-serif; }
.order-file-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.order-file-list li { display: grid; gap: 3px; padding: 10px 12px; border-radius: 8px; background: #f4f5f0; }
.order-file-list b { font-size: 12px; }
.order-file-list span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.order-mockup-gallery { padding: 0 28px 28px; }
.order-mockup-gallery > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.order-mockup-gallery figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #f0f0ee; }
.order-mockup-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.order-mockup-gallery figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; background: white; font-size: 12px; }
.order-mockup-gallery .secondary-button { padding: 7px 9px; color: var(--ink); font-size: 11px; text-decoration: none; }

.site-credits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 14px;
  margin: 30px auto 0;
  padding: 0 8px;
  color: #718075;
  font: 500 10px/1.5 Outfit, "Noto Sans SC", sans-serif;
  letter-spacing: .03em;
  text-align: center;
}
.site-credits span + span::before { content: "|"; margin-right: 14px; color: #a0afa0; }
.theend-credits { position: fixed; right: 0; bottom: 22px; left: 0; z-index: 3; color: rgb(23 36 31 / 66%); }
.draft-resume-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 18px; margin: 24px 28px 24px; padding: 15px 16px; border: 1px solid #b9d29f; border-radius: 10px; background: #f0f9de; }
.draft-resume-panel strong { color: #315e3a; font-size: 14px; }
.draft-resume-panel p { grid-column: 1; margin: 0; color: #607663; font-size: 11px; line-height: 1.55; }
.draft-resume-panel .primary-button { grid-column: 2; grid-row: 1 / span 2; min-width: 108px; }

/* Step-one product configuration */
.product-picker { margin-top: 24px; }
.picker-label { margin: 0 0 9px; color: var(--muted); font-size: 12px; font-weight: 600; }
.product-kind-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.product-kind-switch label, .hub-switch label { cursor: pointer; }
.product-kind-switch label { display: block; height: 100%; }
.product-kind-switch input { position: absolute; opacity: 0; }
.product-kind-switch label > span { position: relative; display: grid; align-content: center; gap: 5px; min-height: 78px; height: 100%; box-sizing: border-box; padding: 12px 110px 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.product-kind-switch b { font-size: 14px; }
.product-kind-switch small { color: var(--muted); font-size: 11px; }
.product-kind-switch input:checked + span { border-color: var(--ink); background: #eff8d4; box-shadow: inset 0 0 0 1px #eff8d4; }
.product-kind-switch label:not(.is-coming-soon) span:after { content: "选择"; position: absolute; top: 50%; right: 14px; translate: 0 -50%; color: #7a847e; font: 600 10px Outfit, sans-serif; letter-spacing: .08em; }
.product-kind-switch label:not(.is-coming-soon) input:checked + span:after { content: "已选择"; color: #315e3a; }
.product-kind-switch .is-coming-soon { cursor: not-allowed; }
.product-kind-switch .is-coming-soon span { border-style: dashed; background: #eeefeb; color: #939a94; box-shadow: none; }
.product-kind-switch .is-coming-soon small { color: #9ba19c; }
.product-kind-switch .is-coming-soon em { position: absolute; top: 50%; right: 14px; translate: 0 -50%; padding: 4px 7px; border-radius: 99px; background: #d8dcd6; color: #747c76; font: 600 10px "Noto Sans SC", sans-serif; font-style: normal; }
.product-kind-switch span.has-product-visual { grid-template-columns: minmax(0, 1fr) 126px; align-items: center; min-height: 108px; padding-right: 54px; overflow: hidden; }
.product-kind-copy { display: grid; gap: 5px; min-width: 0; }
.product-kind-visual { position: relative; width: 126px; height: 82px; justify-self: end; pointer-events: none; }
.product-kind-jewel-visual img { position: absolute; top: 50%; left: 50%; display: block; max-width: 96px; max-height: 74px; object-fit: contain; filter: drop-shadow(0 7px 7px rgb(23 36 31 / 22%)); transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .35s ease; }
.product-kind-jewel-visual .product-kind-cover { z-index: 2; transform: translate(-55%, -50%) scale(.92); }
.product-kind-jewel-visual .product-kind-disc { z-index: 1; transform: translate(-39%, -50%) scale(.86); }
.product-kind-cd-package:is(:hover, :focus-within) .product-kind-cover,
.product-kind-cd-package input:checked + span .product-kind-cover { transform: translate(-76%, -50%) scale(.82) rotate(-2deg); }
.product-kind-cd-package:is(:hover, :focus-within) .product-kind-disc,
.product-kind-cd-package input:checked + span .product-kind-disc { transform: translate(-18%, -50%) scale(.82) rotate(4deg); }
.product-kind-disc-visual { display: grid; place-items: center; }
.product-kind-disc-visual img { display: block; width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 7px 7px rgb(23 36 31 / 22%)); }
.product-kind-disc-only:is(:hover, :focus-within) .product-kind-disc-visual img,
.product-kind-disc-only input:checked + span .product-kind-disc-visual img { animation: upload-product-disc-spin 9s linear infinite; }
.product-kind-single-visual { display: grid; place-items: center; }
.product-kind-single-visual img { display: block; width: 88px; height: 76px; object-fit: contain; filter: drop-shadow(0 7px 7px rgb(23 36 31 / 20%)); transition: transform .42s cubic-bezier(.2,.8,.2,1), filter .3s ease; }
.product-kind-vinyl-sticker .product-kind-single-visual img { width: 74px; height: 74px; }
.product-kind-vinyl-card:is(:hover, :focus-within) .product-kind-single-visual img,
.product-kind-vinyl-card input:checked + span .product-kind-single-visual img { transform: translateY(-3px) scale(1.055) rotate(-2deg); filter: drop-shadow(0 10px 9px rgb(23 36 31 / 28%)); }
.product-kind-vinyl-package-visual img { position: absolute; top: 50%; left: 50%; display: block; width: 72px; height: 72px; object-fit: contain; opacity: 1; filter: drop-shadow(0 6px 7px rgb(23 36 31 / 20%)); }
.product-kind-vinyl-package-visual .product-kind-vinyl-cover { z-index: 2; transform: translate(-72%, -50%) scale(.86) rotate(-2deg); }
.product-kind-vinyl-package-visual .product-kind-vinyl-record { z-index: 1; transform: translate(-18%, -50%) scale(.88) rotate(4deg); }
.product-kind-vinyl-package span.has-product-visual { padding-right: 54px; }
.product-kind-vinyl-package em { top: 14px !important; translate: 0 !important; }
.product-kind-switch .product-kind-vinyl-package > span { border-color: #b9c895; border-style: dashed; background: linear-gradient(135deg, #f3f8df, #f8f2d8); color: #344d38; }
.product-kind-switch .product-kind-vinyl-package small { color: #667765; }
.product-kind-switch .product-kind-vinyl-package em { background: #eadca8; color: #5f5738; box-shadow: inset 0 0 0 1px #d9c985; }
.product-kind-tape-package em { top: 14px !important; translate: 0 !important; }
.product-kind-switch .product-kind-tape-package > span { border-color: #a9c6a0; border-style: dashed; background: linear-gradient(135deg, #eef8de, #f8f3dc); color: #344d38; }
.product-kind-switch .product-kind-tape-package small { color: #667765; }
.product-kind-switch .product-kind-tape-package em { background: #dceab5; color: #47604b; box-shadow: inset 0 0 0 1px #bfd18f; }
.product-kind-tape-package-visual::after, .product-kind-tape-shell-visual::after { content: ""; position: absolute; right: 5px; bottom: 8px; z-index: 0; width: 72px; height: 12px; border-radius: 50%; background: radial-gradient(ellipse, rgb(31 48 38 / 25%), rgb(31 48 38 / 0%) 72%); opacity: 0; transform: scale(.7); transition: opacity .35s ease, transform .52s cubic-bezier(.2,.8,.2,1); }
.product-kind-tape-package-visual img { position: absolute; top: 50%; left: 50%; display: block; width: auto; max-width: none; object-fit: contain; transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .35s ease; }
.product-kind-tape-package-visual .product-kind-tape-cover { z-index: 2; height: 74px; filter: drop-shadow(0 6px 6px rgb(23 36 31 / 18%)); transform: translate(-62%, -50%) scale(.9); }
.product-kind-tape-package-visual .product-kind-tape-shell { z-index: 1; height: 82px; clip-path: inset(3.5% 7% 4% 4% round 2%); transform: translate(-38%, -50%) scale(.82); }
.product-kind-tape-package:is(:hover, :focus-within) .product-kind-tape-cover { transform: translate(-92%, -50%) scale(.74) rotate(-2deg); }
.product-kind-tape-package:is(:hover, :focus-within) .product-kind-tape-shell { transform: translate(6%, -50%) scale(.72) rotate(-90deg); }
.product-kind-tape-package:is(:hover, :focus-within) .product-kind-tape-package-visual::after { opacity: 1; transform: scale(1); }
.product-kind-tape-shell-visual { display: grid; place-items: center; }
.product-kind-tape-shell-visual img { position: relative; z-index: 1; display: block; width: 104px; height: 76px; object-fit: contain; transform: scale(.92); transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .35s ease; }
.product-kind-tape-shell-card:is(:hover, :focus-within) .product-kind-tape-shell-visual img, .product-kind-tape-shell-card input:checked + span .product-kind-tape-shell-visual img { filter: drop-shadow(0 8px 8px rgb(23 36 31 / 18%)); transform: translateY(-2px) scale(1.02); }
.product-kind-tape-shell-visual::after { display: none; }
@keyframes upload-product-disc-spin { to { transform: rotate(1turn); } }
.product-options { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.upload-guidance { margin: 0 0 16px; padding: 4px 14px 14px; border: 2px solid #d69a44; border-radius: 10px; background: #fff7e9; box-shadow: 0 5px 14px rgb(173 113 29 / 10%); }
.config-option-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 13px; padding: 12px 13px; border: 1px solid #d69a44; border-radius: 8px; background: #fffdf8; font-size: 12px; }
.config-option-panel p { width: 100%; margin: 0 0 2px; color: var(--muted); font-weight: 600; }
.config-option-panel label { cursor: pointer; padding: 7px 9px; border: 1px solid #d8d1c4; border-radius: 6px; background: #fff; font-weight: 600; }
.config-option-panel label:has(input:checked) { border-color: #9d6927; background: #fff0d7; box-shadow: 0 0 0 1px #f6d59f; }
.config-option-panel label.is-disabled { cursor: not-allowed; opacity: .45; }
.config-option-panel label.is-disabled input { pointer-events: none; }
.tape-option-panel .tape-effect-label { margin-top: 4px; padding-top: 10px; border-top: 1px solid #ead7b8; }
.tape-option-panel small { width: 100%; color: #7c5a31; line-height: 1.5; }
.special-sku-notice { margin: 13px 0 0; padding: 11px 13px; border-radius: 7px; background: #3b3023; color: #fff4dc; font-size: 13px; font-weight: 600; line-height: 1.55; }
.preview-cover-option small { width: 100%; color: #675941; line-height: 1.55; }
.preview-only-tag { display: inline-block; margin-top: 6px; padding: 3px 7px; border-radius: 999px; background: #fff0d7; color: #7b4d14; font-size: 10px; font-weight: 700; }
.delivery-state { color: #357148; font-weight: 600; }
.processed-download { color: #315f86; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.compact-field span { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 600; }
.compact-field select { width: 100%; height: 42px; border: 1px solid #cdd1c9; border-radius: 7px; padding: 0 9px; background: #fff; color: var(--ink); font: 12px inherit; }
.option-button-field { min-width: 0; }
.option-button-field > select { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; }
.detail-popover:not([hidden]) { position: absolute; top: 43px; left: calc(33.333% + 10px); z-index: 12; display: block; width: calc(33.333% - 8px); box-sizing: border-box; padding: 14px; border: 1px solid #789d77; border-radius: 15px; background: #fffefa; box-shadow: 0 18px 44px rgb(35 65 44 / 24%); animation: detail-popover-in .18s ease-out both; }
.detail-popover:not([hidden])::before { content: ""; position: absolute; top: -7px; left: 24px; width: 12px; height: 12px; border-top: 1px solid #789d77; border-left: 1px solid #789d77; background: #fffefa; transform: rotate(45deg); }
.detail-popover > span { margin: 0 28px 10px 0; color: var(--ink); font-size: 12px; font-weight: 700; }
.detail-popover .option-button-group { position: relative; z-index: 1; }
.detail-popover .option-button { min-height: 46px; text-align: center; }
.detail-popover-close { position: absolute; top: 7px; right: 8px; z-index: 2; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #617566; font: 500 22px/1 sans-serif; cursor: pointer; }
.detail-popover-close:hover, .detail-popover-close:focus-visible { background: #edf5df; color: var(--ink); outline: none; }
@keyframes detail-popover-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.option-button-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.option-button { min-height: 42px; border: 1px solid #b7cbb6; border-radius: 8px; padding: 8px 10px; background: #fffefa; color: var(--muted); font: 600 12px/1.25 inherit; cursor: pointer; text-align: left; transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease; }
.option-button:hover { border-color: #6f9a70; background: #f4fae8; color: var(--ink); }
.option-button:disabled, .option-button:disabled:hover { border-color: #d8ded5; background: #eef0eb; color: #a0a8a1; cursor: not-allowed; opacity: .72; }
.compact-field.is-disabled > span { color: #9ba19c; }
.option-button:active { transform: translateY(1px); }
.option-button.is-active { border-color: #315e3a; background: #e3f5b5; color: var(--ink); box-shadow: inset 0 0 0 1px #9dbd7a; }
.option-button:focus-visible { outline: 2px solid #315e3a; outline-offset: 2px; }
.option-button.has-visual { position: relative; display: grid; grid-template-rows: 76px auto; place-items: center; gap: 7px; min-height: 116px; overflow: hidden; padding: 9px 8px 11px; text-align: center; isolation: isolate; }
.option-button.has-visual::after { content: ""; position: absolute; inset: -45% auto -45% -28%; z-index: -1; width: 58%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / 58%), transparent); opacity: 0; transform: translateX(-120%) rotate(8deg); transition: opacity .25s ease, transform .55s ease; }
.option-button.has-visual:hover::after, .option-button.has-visual:focus-visible::after { opacity: 1; transform: translateX(260%) rotate(8deg); }
.option-button.has-visual:hover, .option-button.has-visual:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 18px rgb(49 95 59 / 11%); }
.option-button.has-visual img { display: block; width: 100%; height: 76px; object-fit: contain; filter: drop-shadow(0 7px 7px rgb(23 36 31 / 20%)); transition: transform .4s cubic-bezier(.2,.75,.2,1), filter .3s ease; }
.option-button.has-visual:hover img, .option-button.has-visual:focus-visible img { filter: drop-shadow(0 9px 9px rgb(23 36 31 / 27%)); transform: translateY(-2px) scale(1.035); }
.option-button.has-visual strong { position: relative; z-index: 2; font: 700 11px/1.25 "Noto Sans SC", sans-serif; }
.option-visual-disc2-media-options { grid-template: 54px / 54px minmax(0, 1fr) !important; justify-items: start !important; min-height: 86px !important; gap: 9px !important; padding: 9px 12px !important; }
.option-visual-disc-media-options { grid-template: 74px / 74px minmax(0, 1fr) !important; justify-items: start !important; min-height: 108px !important; gap: 14px !important; padding: 12px 18px !important; }
#disc2-media-options,
#disc-media-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#disc-media-field { grid-column: 1 / -1; }
.option-visual-disc2-media-options img { width: 52px !important; height: 52px !important; }
.option-visual-disc-media-options img { width: 72px !important; height: 72px !important; }
.option-visual-disc2-media-options img[data-disc-media="DVD"],
.option-visual-disc-media-options img[data-disc-media="DVD"] { filter: hue-rotate(105deg) saturate(1.42) brightness(.98) drop-shadow(0 7px 7px rgb(50 42 107 / 24%)); }
.option-visual-disc2-media-options:is(:hover, :focus-visible, .is-active) img[data-disc-media="DVD"],
.option-visual-disc-media-options:is(:hover, :focus-visible, .is-active) img[data-disc-media="DVD"] { filter: hue-rotate(105deg) saturate(1.5) brightness(1.02) drop-shadow(0 9px 9px rgb(50 42 107 / 30%)); }
.option-visual-disc2-media-options strong,
.option-visual-disc-media-options strong { font-size: 13px !important; }
.option-visual-disc2-media-options:is(:hover, :focus-visible, .is-active) img,
.option-visual-disc-media-options:is(:hover, :focus-visible, .is-active) img { animation: upload-option-disc-spin 9s linear infinite; }
@keyframes upload-option-disc-spin { to { transform: rotate(1turn); } }
#cover-options { container-type: inline-size; }
.option-button.has-cover-visual { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 86px; height: 86px; overflow: hidden; padding: 9px 12px; text-align: left; }
.option-button.has-cover-visual strong { font: 650 12px/1.25 "Noto Sans SC", sans-serif; }
.cover-option-art { position: relative; display: block !important; width: 82px; height: 62px; margin: 0 !important; transition: transform .3s ease; }
.cover-option-sheet { position: absolute; display: block; box-sizing: border-box; border: 1px solid #6f8d72; border-radius: 3px; background: linear-gradient(145deg, #dff1b1, #f9fced); box-shadow: 0 4px 7px rgb(37 62 43 / 12%); }
.has-cover-visual:hover .cover-option-art,
.has-cover-visual:focus-visible .cover-option-art,
.has-cover-visual.is-active .cover-option-art { transform: translateY(-2px) rotate(-1deg); }
/* C01: one square card, shown as front and reverse faces. */
.cover-visual-c01 .cover-option-sheet { width: 48px; height: 48px; }
.cover-visual-c01 .cover-option-sheet-1 { top: 10px; left: 4px; background: #f9fbf3; transform: rotate(-6deg); }
.cover-visual-c01 .cover-option-sheet-2 { top: 2px; left: 27px; background: linear-gradient(145deg, #cce99a, #eff8cf); transform: rotate(5deg); }
.cover-visual-c01 .cover-option-sheet:nth-child(n+3) { display: none; }
.cover-visual-c01 .cover-option-art::after { content: "↔"; position: absolute; right: 2px; bottom: -3px; color: #55765a; font: 700 13px/1 sans-serif; }
/* C02: two square panels meeting at a dimensional center fold, with the reverse behind. */
.cover-visual-c02 .cover-option-art { perspective: 110px; }
.cover-visual-c02 .cover-option-sheet-1 { top: 11px; left: 8px; width: 68px; height: 44px; border-style: dashed; background: #f8fbef; opacity: .72; transform: rotate(3deg); }
.cover-visual-c02 .cover-option-sheet-2,
.cover-visual-c02 .cover-option-sheet-3 { top: 4px; width: 35px; height: 48px; box-shadow: 0 6px 8px rgb(37 62 43 / 16%); }
.cover-visual-c02 .cover-option-sheet-2 { left: 7px; border-radius: 3px 0 0 3px; background: linear-gradient(145deg, #d5eca5, #e8f5c5); transform: rotateY(16deg) skewY(-2deg); transform-origin: right center; }
.cover-visual-c02 .cover-option-sheet-3 { left: 42px; border-radius: 0 3px 3px 0; background: linear-gradient(215deg, #f7faec, #e1f0b9); transform: rotateY(-20deg) skewY(2deg); transform-origin: left center; }
.cover-visual-c02 .cover-option-sheet-3::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: -1px; border-left: 1px dashed #58775d; }
.cover-visual-c02 .cover-option-sheet-4 { display: none; }
.cover-visual-c02 .cover-option-art::after { content: "↻"; position: absolute; right: 0; bottom: -2px; color: #55765a; font: 700 13px/1 sans-serif; }
/* C03: three cover-width panels opened horizontally like an accordion. */
.cover-visual-c03 .cover-option-sheet { top: 8px; width: 27px; height: 46px; border-radius: 2px; }
.cover-visual-c03 .cover-option-sheet-1 { left: 0; background: #d8eda9; transform: skewY(-4deg); }
.cover-visual-c03 .cover-option-sheet-2 { left: 27px; background: #f6fae9; transform: skewY(4deg); }
.cover-visual-c03 .cover-option-sheet-3 { left: 54px; background: #e4f2bd; transform: skewY(-4deg); }
.cover-visual-c03 .cover-option-sheet-4 { display: none; }
.cover-visual-c03 .cover-option-art::after { content: "‹  ›"; position: absolute; right: 5px; bottom: -5px; color: #55765a; font: 700 12px/1 sans-serif; letter-spacing: 4px; }
/* C04: several finished square saddle-stitched booklets stacked and fanned. */
.cover-visual-c04 .cover-option-sheet { width: 50px; height: 50px; transform-origin: 5px 45px; }
.cover-visual-c04 .cover-option-sheet-1 { top: 9px; left: 5px; background: #f7faee; transform: rotate(-10deg); }
.cover-visual-c04 .cover-option-sheet-2 { top: 7px; left: 10px; background: #e7f1d1; transform: rotate(-7deg); }
.cover-visual-c04 .cover-option-sheet-3 { top: 5px; left: 15px; background: #cadfa8; transform: rotate(-4deg); }
.cover-visual-c04 .cover-option-sheet-4 { top: 2px; left: 20px; z-index: 4; border-color: #3f6548; background: linear-gradient(#dff0b5, #dff0b5) 11px 11px / 25px 2px no-repeat, linear-gradient(#c5dea0, #c5dea0) 11px 17px / 18px 2px no-repeat, linear-gradient(145deg, #315b3d, #668d58); box-shadow: inset 4px 0 5px rgb(17 35 23 / 24%), 0 7px 9px rgb(37 62 43 / 23%); transform: rotate(1deg); }
.cover-visual-c04 .cover-option-sheet-4::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 5px; border-left: 1px solid rgb(222 235 203 / 48%); }
.cover-visual-c04 .cover-option-sheet-4::after { content: ""; position: absolute; top: 14px; left: 2px; width: 6px; height: 1px; border-radius: 2px; background: #e5eadf; box-shadow: 0 20px 0 #e5eadf; }
/* C07: one square folded poster; a turned corner reveals the printed reverse. */
.cover-visual-c07 .cover-option-sheet-1 { top: 2px; left: 10px; width: 58px; height: 58px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%); background: repeating-linear-gradient(to bottom, #648168 0 3px, transparent 3px 7px) 50% 5px / 1px calc(100% - 10px) no-repeat, repeating-linear-gradient(to right, #648168 0 3px, transparent 3px 7px) 5px 50% / calc(100% - 10px) 1px no-repeat, linear-gradient(145deg, #d9efa8, #edf7cf); box-shadow: 0 6px 8px rgb(37 62 43 / 17%); transform: rotate(-2deg) skewY(.7deg); }
.cover-visual-c07 .cover-option-sheet:nth-child(n+2) { display: none; }
.cover-visual-c07 .cover-option-art::after { content: ""; position: absolute; top: 3px; left: 55px; z-index: 3; width: 13px; height: 13px; clip-path: polygon(0 0, 100% 100%, 0 100%); background: linear-gradient(135deg, #fffef8, #b9d191); filter: drop-shadow(-1px 1px 1px rgb(37 62 43 / 22%)); transform: rotate(-2deg); }
@container (max-width: 360px) {
  .option-button.has-cover-visual { grid-template-columns: 62px minmax(0, 1fr); gap: 4px; padding: 8px; }
  .option-button.has-cover-visual strong { font-size: 10px; word-break: keep-all; }
  .cover-option-art { transform: scale(.72); transform-origin: left center; }
  .has-cover-visual:hover .cover-option-art,
  .has-cover-visual:focus-visible .cover-option-art,
  .has-cover-visual.is-active .cover-option-art { transform: translateY(-2px) rotate(-1deg) scale(.72); }
}
.option-visual-vinyl-size-options { grid-template-rows: 76px auto; }
.option-button.option-visual-vinyl-size-options img { width: 72px; height: 72px; place-self: center; border-radius: 50%; }
.option-visual-vinyl-size-options img[data-vinyl-size="10"] { width: 64px; height: 64px; }
.option-visual-vinyl-size-options img[data-vinyl-size="7"] { width: 54px; height: 54px; }
.option-visual-vinyl-content-options img { width: 76px; }
.option-visual-vinyl-content-options img[src*="inner-sleeve"] { width: 64px; }
.selection-note, .reserve-message { margin: 12px 0 0; color: #58695e; font-size: 12px; line-height: 1.55; }
.reserve-message { padding: 15px; border-radius: 8px; background: #f1f3ed; }
.template-downloads { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 14px; border: 1px solid #cddbc9; border-radius: 9px; background: #f4faed; }
.template-downloads b { font-size: 13px; }
.template-downloads p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.template-download-link { display: inline-flex; align-items: center; width: fit-content; margin-top: 10px; border: 1px solid #789575; border-radius: 7px; padding: 8px 10px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.template-download-link:hover { background: #eff8d4; }
.template-downloads .template-download-link { margin-top: 0; }
.template-download-note { display: block; max-width: 270px; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.order-divider { height: 1px; margin: 25px 0 18px; background: var(--line); }

/* Dialog controls for the low-resolution risk acknowledgement. */
.secondary-button { border: 1px solid #9fa9a0; border-radius: 8px; padding: 12px 15px; background: #fff; color: var(--ink); font: 600 13px inherit; cursor: pointer; }
.lowres-dialog { max-width: 480px; }
.lowres-dialog > p:not(.eyebrow) { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.lowres-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.crop-dialog { max-width: 520px; }
.crop-dialog > p:not(.eyebrow) { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.crop-stage { position: relative; width: min(100%, 430px); margin: 16px auto 0; overflow: hidden; touch-action: none; background: repeating-conic-gradient(#e9ebe6 0 25%, #f8f8f5 0 50%) 50% / 14px 14px; outline: 2px solid var(--cyan); }
.crop-stage img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
.crop-selection { position: absolute; box-shadow: 0 0 0 9999px rgb(17 28 23 / 48%); border: 2px solid var(--cyan); cursor: move; touch-action: none; }
.crop-handle { position: absolute; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: var(--cyan); box-shadow: 0 1px 4px #0006; }
.crop-handle-nw { left: -8px; top: -8px; cursor: nwse-resize; }.crop-handle-ne { right: -8px; top: -8px; cursor: nesw-resize; }.crop-handle-sw { left: -8px; bottom: -8px; cursor: nesw-resize; }.crop-handle-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.crop-hint { font-size: 11px !important; }
.risk-check { display: flex; gap: 9px; margin: 18px 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.risk-check input { flex: 0 0 auto; margin-top: 3px; }
.legal-disclaimer { margin: 12px 0 0 !important; padding: 10px 12px; border-left: 3px solid #e9b36d; border-radius: 0 7px 7px 0; background: #fff9f0; color: #766653 !important; font-size: 12px !important; line-height: 1.55 !important; }

/* C01 customer mockup studio is a full work page, never a constrained browser dialog. */
.mockup-page { min-height: 100vh; padding: 24px clamp(18px, 4vw, 56px) 36px; background: radial-gradient(circle at 78% 4%, #dcebc4 0, transparent 28rem), #f4f5ef; }
.mockup-page-header { display: grid; grid-template-columns: minmax(160px, 220px) 1fr auto; align-items: center; gap: 22px; max-width: 1720px; margin: 0 auto 22px; padding-bottom: 18px; border-bottom: 1px solid #cbd5c7; }
.mockup-page-header h1 { margin: 0; font: 700 clamp(25px, 2.7vw, 38px)/1.14 Outfit, "Noto Sans SC", sans-serif; letter-spacing: -.035em; }
.mockup-page-header .eyebrow { margin-bottom: 4px; }
.mockup-page-layout { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 22px; max-width: 1720px; margin: auto; align-items: start; }
.mockup-sidebar { padding: 19px; border: 1px solid #d5ded0; border-radius: 12px; background: #fffefa; box-shadow: 0 8px 30px rgb(23 36 31 / 6%); }
.mockup-sidebar > .muted { margin: 0 0 16px; font-size: 12px; line-height: 1.65; }
.mockup-controls { display: grid; gap: 13px; padding: 14px; border: 1px solid #d7dfd0; border-radius: 10px; background: #f5f8f1; }
.mockup-controls .field { min-width: 0; margin: 0; }
.mockup-controls .field span { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; }
.mockup-controls input:not([type="color"]):not([type="range"]) { width: 100%; box-sizing: border-box; min-height: 37px; border: 1px solid var(--line); border-radius: 6px; padding: 7px 8px; background: #fff; font: 12px inherit; }
.mockup-controls input[type="color"] { width: 100%; height: 37px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.mockup-controls input[type="range"] { width: 100%; margin: 10px 0 0; accent-color: #4c7654; }
.mockup-controls small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.mockup-tabs { display: grid; gap: 8px; margin: 16px 0; }
.mockup-tabs button { width: 100%; border: 1px solid #cdd6c8; border-radius: 8px; padding: 10px 12px; background: #fff; color: var(--muted); font: 600 12px inherit; cursor: pointer; text-align: left; }
.mockup-tabs button.is-active { border-color: #23422e; background: #eaf5ca; color: var(--ink); }
.mockup-canvas-wrap { position: sticky; top: 18px; overflow: hidden; border: 1px solid #d3dad0; border-radius: 12px; background: #e7ece3; box-shadow: 0 10px 38px rgb(23 36 31 / 10%); }
#mockup-canvas { display: block; width: 100%; height: auto; background: #e9e9e9; }
.mockup-actions { display: grid; gap: 9px; }
.mockup-actions > button { width: 100%; }

@media (max-width: 760px) {
  .hero h1 { white-space: normal; font-size: clamp(34px, 10.6vw, 52px); line-height: 1.12; letter-spacing: -.055em; }
  .hero-title-line { display: block; white-space: nowrap; }
  .hero-brand-title { margin-bottom: 15px; font-size: clamp(42px, 14vw, 64px); line-height: .94; }
  .brand-logo { max-width: 155px; }
  .brand-logo img { height: 28px; }
  .hero-logo { width: 100%; margin-top: 18px; }
  .product-kind-switch, .product-options { grid-template-columns: 1fr; }
  .detail-popover:not([hidden]) { position: fixed; top: auto; right: 14px; bottom: 18px; left: 14px; width: auto; max-height: calc(100svh - 36px); overflow: auto; }
  .detail-popover:not([hidden])::before { display: none; }
  .config-option-panel { display: grid; gap: 8px; }
  .template-downloads { display: grid; gap: 10px; }
  .template-downloads .template-download-link { margin-top: 0; }
  .lowres-actions { flex-direction: column-reverse; }
  .lowres-actions .primary-button, .lowres-actions .secondary-button, #lowres-confirm { width: 100%; }
  .mockup-page { padding: 18px 16px 28px; }
  .mockup-page-header { grid-template-columns: 1fr auto; gap: 13px; }
  .mockup-page-header .brand-logo { display: none; }
  .mockup-page-header > div { grid-column: 1 / -1; grid-row: 1; }
  .mockup-page-header #mockup-close { grid-column: 2; grid-row: 1; padding: 9px 11px; font-size: 12px; }
  .mockup-page-layout { grid-template-columns: 1fr; gap: 14px; }
  .mockup-canvas-wrap { position: static; order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .option-button.has-visual, .option-button.has-visual::after, .option-button.has-visual img { transition: none; }
  .product-kind-jewel-visual img, .product-kind-single-visual img, .cover-option-art { transition: none; }
  .product-kind-disc-visual img, .option-visual-disc2-media-options img, .option-visual-disc-media-options img { animation: none !important; }
  .detail-popover:not([hidden]) { animation: none; }
}

/* Final responsive pass: compact rails and floating controls stay clear of the work area. */
.site-header, .mockup-page-header { isolation: isolate; }
.site-header > *:not(.site-dock-brand), .mockup-page-header > *:not(.site-dock-brand) { position: relative; z-index: 1; }
.site-header .site-dock-brand, .mockup-page-header .site-dock-brand { position: absolute; z-index: 2; }
.site-header .order-search-link { position: relative; z-index: 3; pointer-events: auto; }
.progress-dock { width: 58px; gap: 5px; padding: 6px; border-radius: 18px; }
.progress-dock a { position: relative; display: grid; grid-template-columns: 1fr; place-items: center; width: 44px; min-height: 40px; padding: 5px; border-radius: 12px; }
.progress-dock a span { width: 26px; height: 26px; }
.progress-dock a b { position: absolute; right: calc(100% + 8px); top: 50%; width: max-content; max-width: 130px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fffefa; box-shadow: 0 7px 16px rgba(23,36,31,.12); opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(5px); transition: opacity .16s ease, transform .16s ease; }
.progress-dock a:hover b, .progress-dock a:focus-visible b { opacity: 1; transform: translateY(-50%) translateX(0); }
.public-floating-back { top: 50%; right: clamp(12px, 2.2vw, 32px); width: 60px; height: 60px; min-height: 60px; padding: 0; border-radius: 50%; justify-content: center; font-size: 0; transform: translateY(-50%); }
.public-floating-back span:first-child { font-size: 27px; line-height: 1; }
.public-floating-back span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.public-floating-back:hover { transform: translateY(-50%) translateX(-4px); }
.mockup-page-header .public-floating-back { top: 50%; }
.submit-bar { right: clamp(12px, 2.2vw, 32px); bottom: 18px; width: min(214px, calc(100vw - 28px)); padding: 13px; border-radius: 20px; }
.submit-bar h2 { font-size: 16px; line-height: 1.25; }
.submit-bar .submit-actions { grid-template-columns: 1fr; gap: 7px; }
.submit-bar .submit-actions > #submit-button { order: -1; min-width: 0; }
.submit-bar .submit-actions > button, .submit-bar .draft-action > button { width: 100%; min-height: 36px; padding: 8px 9px; font-size: 11px; }
.submit-bar .draft-action { position: relative; }
.draft-toast { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 2; display: flex; align-items: flex-start; gap: 7px; width: 205px; padding: 9px 10px; border: 1px solid #e1b449; border-radius: 10px; background: #fffaf0; color: #985c00; font-size: 11px; line-height: 1.45; box-shadow: 0 9px 24px rgba(23,36,31,.14); }
.draft-toast button { flex: 0 0 auto; border: 0; padding: 0; background: transparent; color: inherit; font-size: 18px; line-height: .8; cursor: pointer; }
.draft-toast[hidden], .mockup-controls[hidden] { display: none; }
.mockup-custom-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--ink); font-size: 12px; font-weight: 700; }
.mockup-custom-toggle input { accent-color: var(--green); }
.mockup-controls select { width: 100%; min-height: 37px; border: 1px solid var(--line); border-radius: 6px; padding: 7px 8px; background: #fff; font: 12px inherit; }
.mockup-controls output { color: var(--green); font-weight: 700; }
.mockup-page-header { display: block; padding-top: 70px; text-align: center; }
.mockup-page-header .site-dock-brand { top: 13px; }
.mockup-page-header > div:not(.site-dock-brand) { max-width: 760px; margin: 0 auto; }
.mockup-page-header h1 { letter-spacing: 0; }

@media (max-width: 760px) {
  .progress-dock { right: 8px; width: 50px; padding: 5px; }
  .progress-dock a { width: 38px; min-height: 36px; }
  .progress-dock a span { width: 23px; height: 23px; font-size: 11px; }
  .public-floating-back { right: 10px; width: 50px; height: 50px; min-height: 50px; }
  .public-floating-back span:first-child { font-size: 23px; }
  .mockup-page-header .public-floating-back { top: 50%; }
  .submit-bar { right: 10px; bottom: 10px; width: min(184px, calc(100vw - 22px)); padding: 10px; border-radius: 17px; }
  .submit-bar .design-set-status { font-size: 10px; }
  .submit-bar .submit-actions > button, .submit-bar .draft-action > button { min-height: 33px; padding: 7px 8px; font-size: 10px; }
  .draft-toast { right: -2px; width: min(205px, calc(100vw - 32px)); }
  .mockup-page-header { padding-top: 62px; } /* legacy responsive fallback */
}

/* Earlier responsive correction block; final load-order block appears below. */
.hero-brand-title { max-width: max-content; font-size: clamp(32px, 4vw, 54px); line-height: .94; letter-spacing: -.06em; white-space: nowrap; overflow-wrap: normal; }
.mockup-page { padding: 0 clamp(18px, 4vw, 56px) 36px; }
.mockup-page-header { display: flex; position: sticky; top: 0; z-index: 31; height: 68px; min-height: 68px; max-width: none; margin: 0 calc(clamp(18px, 4vw, 56px) * -1); padding: 0 clamp(18px, 4vw, 56px); align-items: center; border-bottom: 0; background: transparent; text-align: left; }
.mockup-page-header .brand-logo { display: flex; }
.mockup-page-header .site-dock-brand { top: 50%; }
.mockup-page-intro { max-width: 1720px; margin: 0 auto 22px; padding: 48px 0 36px; }
.mockup-page-intro h1 { max-width: 900px; margin: 0; font: 700 clamp(30px, 4.5vw, 62px)/1.08 Outfit, "Noto Sans SC", sans-serif; letter-spacing: -.05em; }
.mockup-page-header .public-floating-back, .orders-header .public-floating-back { top: auto !important; bottom: 28px; transform: none; }
.mockup-page-header .public-floating-back:hover, .orders-header .public-floating-back:hover { transform: translateX(-4px); }
.submit-bar { transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
.submit-bar.is-guided { border-color: #82a878; background: rgba(244, 252, 225, .97); box-shadow: 0 0 0 3px rgba(201,255,70,.42), 0 18px 44px rgba(23,36,31,.2); }
.submit-bar .primary-button.is-blocked { background: #8f9b91; }
.submit-bar .primary-button.is-ready { background: var(--ink); box-shadow: 0 7px 18px rgba(23,36,31,.18); }
.field.needs-attention, .asset-item.needs-attention, .audio-panel.needs-attention { animation: missing-attention 1.35s ease both; border-color: #d69d32 !important; box-shadow: 0 0 0 4px rgba(214,157,50,.2), 0 10px 26px rgba(23,36,31,.1); }
@keyframes missing-attention { 0%,100% { transform: translateY(0); } 24% { transform: translateY(-3px); } 48% { transform: translateY(2px); } 72% { transform: translateY(-1px); } }

@media (max-width: 760px) {
  .hero-brand-title { max-width: calc(100vw - 28px); font-size: clamp(30px, 9.6vw, 40px); white-space: nowrap; }
  .mockup-page { padding: 0 16px 28px; }
  .mockup-page-header { height: 60px; min-height: 60px; margin: 0 -16px; padding: 0 16px; }
  .mockup-page-header .brand-logo { max-width: 28px; overflow: hidden; }
  .mockup-page-header .brand-logo img { width: 90px; max-width: none; }
  .mockup-page-intro { padding: 34px 0 26px; }
  .mockup-page-intro h1 { font-size: clamp(28px, 9vw, 42px); }
  .mockup-page-header .public-floating-back, .orders-header .public-floating-back { right: 12px; bottom: 18px; }
  .submit-bar { width: min(158px, calc(100vw - 22px)); padding: 8px; border-radius: 16px; }
  .submit-bar h2 { white-space: nowrap; font-size: 13px; line-height: 16px; }
  .submit-bar .design-set-status { margin-top: 3px !important; font-size: 9px; }
  .submit-bar .submit-actions { gap: 5px; }
  .submit-bar .submit-actions > button, .submit-bar .draft-action > button { min-height: 30px; padding: 6px 8px; font-size: 10px; line-height: 1; }
}

/* Final layout corrections: keep brand, title and action surfaces readable at every width. */
.hero-brand-title { max-width: max-content; margin-right: auto; font-size: clamp(32px, 4vw, 54px); line-height: .94; letter-spacing: -.06em; white-space: nowrap; }
.audio-skip-action { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.audio-skip-action small { color: var(--muted); font-size: 11px; }
.mockup-page { padding: 0 clamp(18px, 4vw, 56px) 36px; }
.mockup-page-header { display: flex; position: sticky; top: 0; z-index: 31; height: 68px; min-height: 68px; max-width: none; margin: 0 calc(clamp(18px, 4vw, 56px) * -1); padding: 0 clamp(18px, 4vw, 56px); align-items: center; border-bottom: 0; background: transparent; text-align: left; }
.mockup-page-header .brand-logo { display: flex; }
.mockup-page-header .site-dock-brand { top: 50%; }
.mockup-page-intro { max-width: 1720px; margin: 0 auto 22px; padding: 48px 0 36px; }
.mockup-page-intro h1 { max-width: 900px; margin: 0; font: 700 clamp(30px, 4.5vw, 62px)/1.08 Outfit, "Noto Sans SC", sans-serif; letter-spacing: -.05em; }
.mockup-page-header .public-floating-back { top: auto !important; bottom: 28px; transform: none; }
.mockup-page-header .public-floating-back:hover { transform: translateX(-4px); }
.orders-header .public-floating-back { top: auto !important; bottom: 28px; transform: none; }
.orders-header .public-floating-back:hover { transform: translateX(-4px); }
.submit-bar { transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
.submit-bar.is-guided { border-color: #82a878; background: rgba(244, 252, 225, .97); box-shadow: 0 0 0 3px rgba(201,255,70,.42), 0 18px 44px rgba(23,36,31,.2); }
.submit-bar .primary-button.is-blocked { background: #8f9b91; }
.submit-bar .primary-button.is-ready { background: var(--ink); box-shadow: 0 7px 18px rgba(23,36,31,.18); }
.submit-bar-peek { display: none; }
.field.needs-attention, .asset-item.needs-attention, .audio-panel.needs-attention { animation: missing-attention 1.35s ease both; border-color: #d69d32 !important; box-shadow: 0 0 0 4px rgba(214,157,50,.2), 0 10px 26px rgba(23,36,31,.1); }
@keyframes missing-attention { 0%,100% { transform: translateY(0); } 24% { transform: translateY(-3px); } 48% { transform: translateY(2px); } 72% { transform: translateY(-1px); } }

@media (max-width: 760px) {
  .hero-brand-title { max-width: calc(100vw - 28px); font-size: clamp(30px, 9.6vw, 40px); }
  .audio-skip-action { display: grid; gap: 6px; justify-items: start; }
  .audio-skip-action button { min-height: 35px; padding: 8px 11px; font-size: 11px; }
  .mockup-page { padding: 0 16px 28px; }
  .mockup-page-header { height: 60px; min-height: 60px; margin: 0 -16px; padding: 0 16px; }
  .mockup-page-header .brand-logo { max-width: 28px; overflow: hidden; }
  .mockup-page-header .brand-logo img { width: 90px; max-width: none; }
  .mockup-page-intro { padding: 34px 0 26px; }
  .mockup-page-intro h1 { font-size: clamp(28px, 9vw, 42px); }
  .mockup-page-header .public-floating-back, .orders-header .public-floating-back { right: 12px; bottom: 18px; }
  .submit-bar { width: min(184px, calc(100vw - 22px)); padding: 9px; border-radius: 16px; }
  .submit-bar h2 { font-size: 14px; }
  .submit-bar .design-set-status { margin-top: 3px !important; font-size: 9px; }
  .submit-bar .submit-actions { gap: 5px; }
  .submit-bar .submit-actions > button, .submit-bar .draft-action > button { min-height: 30px; padding: 6px 8px; font-size: 10px; }
  .submit-bar-peek { display: none; }
  .submit-bar.is-collapsed { width: 62px; min-height: 39px; padding: 4px; border-radius: 999px; }
  .submit-bar.is-collapsed > div:not(.submit-bar-peek) { display: none; }
  .submit-bar.is-collapsed .submit-bar-peek { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 30px; border: 0; border-radius: 999px; background: #eff8d4; color: var(--ink); font: 700 11px inherit; cursor: pointer; }
  .submit-bar.is-collapsed .submit-bar-peek span:last-child { font-size: 15px; line-height: .8; }
}

/* Mobile polish for the brand lockup and fixed action surfaces. */
.site-header .site-context { display: none; }
@media (max-width: 760px) {
  .hero-brand-title { max-width: 100%; font-size: clamp(32px, 11vw, 52px); letter-spacing: -.06em; overflow-wrap: anywhere; }
  .submit-bar { width: min(158px, calc(100vw - 22px)); padding: 9px; }
  .submit-bar h2 { white-space: nowrap; font-size: 13px; }
  .submit-bar .design-set-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 760px) {
  .site-credits { margin-top: 24px; font-size: 9px; gap: 4px 8px; }
  .site-credits span + span::before { margin-right: 8px; }
  .draft-resume-panel { grid-template-columns: 1fr; margin: 20px 20px 20px; gap: 6px; }
  .draft-resume-panel p { grid-column: auto; }
  .draft-resume-panel .primary-button { grid-column: auto; grid-row: auto; width: 100%; margin-top: 7px; }

  #result-dialog { width: calc(100vw - 20px); }
  .submission-success { padding: 26px 22px; }
  .submission-success h2 { font-size: clamp(24px, 8vw, 30px); }
  .verification-code-panel { grid-template-columns: 1fr; }
  .verification-code-panel .secondary-button { width: 100%; }
  .site-header .order-search-link { margin-left: auto; padding: 6px 9px; font-size: 11px; }
  .site-header .order-search-link + .template-tag { display: none; }
  .orders-page { width: min(100% - 20px, 560px); padding-top: 12px; }
  .orders-intro { padding: 48px 4px 22px; }
  .order-search-form { grid-template-columns: 1fr; }
  .order-record-header { display: grid; padding: 20px; }
  .order-record-header > span { justify-self: start; }
  .order-record-grid { grid-template-columns: 1fr; padding: 20px; }
  .order-mockup-gallery { padding: 0 20px 20px; }
  .order-mockup-gallery > div { grid-template-columns: 1fr; }
}

.substrate-panel {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.6fr);
  align-items: start;
  gap: 28px;
  margin: 18px 0;
  padding: 20px 26px;
}

.substrate-intro { padding-top: 3px; }
.disc-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.disc-setting-group { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgb(255 255 255 / 72%); }
.disc-settings-grid:has(#disc2-settings[hidden]) #disc1-settings { grid-column: 1 / -1; }
.disc-setting-group h3 { margin: 0 0 10px; color: #52745a; font: 700 13px Outfit, "Noto Sans SC", sans-serif; letter-spacing: .04em; }

.substrate-panel h2 {
  margin: 0;
  font: 700 19px/1.2 Outfit, "Noto Sans SC", sans-serif;
}

.substrate-panel p:not(.eyebrow) {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.hub-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hub-switch label { cursor: pointer; }
.hub-switch input { position: absolute; opacity: 0; }

.hub-switch span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.hub-switch b { font-size: 13px; }
.hub-switch small { color: var(--muted); font-size: 11px; }
.hub-switch input:checked + span { border-color: var(--ink); background: #eff8d4; box-shadow: inset 0 0 0 1px #eff8d4; }

.print-effect-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.print-effect-switch p { width: 100%; margin: 0 0 1px; color: var(--muted); font-size: 12px; font-weight: 600; }
.print-effect-switch label { cursor: pointer; }
.print-effect-switch input { position: absolute; opacity: 0; }
.print-effect-switch span { display: block; border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px; background: #fff; font-size: 12px; }
.print-effect-switch input:checked + span { border-color: var(--ink); background: #eff8d4; }

.audio-panel { margin-top: 18px; padding: 26px; }
.dvd-content-panel { max-width: 720px; margin: 18px 0; padding: 16px; border: 1px solid #cddbc9; border-radius: 9px; background: #f4faed; }
.dvd-content-panel textarea { width: 100%; resize: vertical; border: 1px solid #cdd1c9; border-radius: 7px; padding: 10px 11px; background: #fff; color: var(--ink); font: 13px/1.55 inherit; outline: none; }
.dvd-content-panel textarea:focus { border-color: #517f5a; box-shadow: 0 0 0 3px #d8edc9; }
.audio-disc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 14px; }
.submit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.upload-progress { margin-top: 14px; max-width: 640px; }
.upload-progress-label { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 6px; color: #52625c; font-size: .9rem; }
.upload-progress progress { width: 100%; height: 10px; accent-color: #5a8665; }
.design-set-status { margin: 9px 0 0 !important; color: #3c6d47 !important; font-weight: 600; }
.audio-disc-box { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcf8; }
.audio-disc-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.audio-disc-title { margin: 0; font: 700 16px Outfit, "Noto Sans SC", sans-serif; }
.audio-total { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.audio-items { display: grid; gap: 8px; }
.audio-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.track-number { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #edf0e9; font: 600 10px Outfit, sans-serif; }
.track-info { min-width: 0; display: grid; gap: 2px; }
.track-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.track-meta { color: var(--muted); font-size: 11px; }
.audio-upload-button { cursor: pointer; border: 1px solid #aeb9aa; border-radius: 6px; padding: 7px 9px; font-size: 12px; white-space: nowrap; }
.audio-input { display: none; }
.track-remove { border: 0; background: none; color: #bb615a; font-size: 18px; cursor: pointer; }
.add-track { margin-top: 13px; }
.track-confirm-list { max-height: 210px; overflow: auto; margin: 16px 0; padding-left: 22px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.track-confirm-list section + section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.track-confirm-list ol { margin: 5px 0 0; padding-left: 22px; }

/* The final action stays in reach while a long artwork/audio form is reviewed. */
.submit-bar { position: sticky; bottom: 12px; z-index: 20; margin-bottom: 12px; border-color: #bdcdb7; box-shadow: 0 18px 44px rgba(23,36,31,.16); background: rgba(255,254,250,.94); backdrop-filter: blur(14px); }
.submit-bar .submit-actions { flex: 0 0 auto; }
.site-header { position: sticky; top: 0; z-index: 30; min-height: 68px; background: rgba(247,245,239,.94); backdrop-filter: blur(14px); }
.site-dock-brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; max-width: 58%; white-space: nowrap; }
.site-dock-brand-link { color: inherit; text-decoration: none; cursor: pointer; }
.site-dock-title { color: #111; font: 700 clamp(17px,2.4vw,27px)/1 "Black Cat Engravers", Georgia, serif; letter-spacing: .065em; text-transform: lowercase; }
.site-dock-slogan { overflow: hidden; max-width: 100%; color: #56815c; font: 600 clamp(7px, .8vw, 10px)/1.15 Outfit, sans-serif; letter-spacing: .04em; text-overflow: ellipsis; }
.site-context { margin: 0 0 0 10px; }
.mockup-page-header { position: sticky; top: 0; z-index: 31; padding-top: 58px; background: rgba(244,245,239,.94); backdrop-filter: blur(14px); }
.mockup-page-header .site-dock-brand { top: 18px; }
.draft-action { display: grid; justify-items: center; gap: 5px; }
.draft-action small { max-width: 180px; color: #a15a1d; font-size: 10px; line-height: 1.35; text-align: center; }

/* Customer order status is the first thing to scan after an exact lookup. */
.order-record-header { align-items: center; }
.order-record-header > div:first-child { min-width: 0; }
.order-record-header h2 { color: #111; }
.order-record-header p:last-child { line-height: 1.5; }
.order-status-panel { display: grid; justify-items: end; gap: 7px; flex: 0 0 auto; }
.order-status-caption { color: var(--muted); font-size: 11px; font-weight: 700; }
.order-status-badge { display: inline-flex; align-items: center; min-height: 46px; padding: 8px 18px; border-radius: 999px; font-size: 18px; font-weight: 900; line-height: 1; }
.status-submitted { background: #e6f5e8; color: #24643a; }
.status-reviewing { background: #e5efff; color: #235b9b; }
.status-needs-more { background: #fff0d7; color: #985c00; }
.status-in-production { background: #e8e5ff; color: #5542a3; }
.status-complete { background: #dff6f1; color: #126a5b; }
.status-cancelled { background: #f4e5e5; color: #9b3434; }
.status-unknown { background: #eef0ed; color: #4f5b53; }

/* Upload progress is intentionally modal so the customer sees that storage is still in progress. */
.upload-progress-dialog { width: min(470px, calc(100% - 32px)); max-width: none; border: 1px solid #d2dfce; border-radius: 26px; padding: 0; background: transparent; overflow: visible; }
.upload-progress-dialog::backdrop { background: rgba(23,36,31,.46); backdrop-filter: blur(5px); }
.upload-progress-card { position: relative; padding: 32px 32px 30px; border: 1px solid #d2dfce; border-radius: 26px; background: #fffefa; box-shadow: 0 24px 80px rgba(23,36,31,.24); overflow: hidden; }
.upload-progress-card::after { content: ""; position: absolute; width: 190px; height: 190px; right: -82px; top: -94px; border-radius: 50%; background: #eff8d4; opacity: .9; }
.upload-progress-orb { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 50%; background: var(--ink); color: var(--acid); font: 700 25px Outfit, sans-serif; animation: upload-pulse 1.45s ease-in-out infinite; }
.upload-progress-card h2 { position: relative; z-index: 1; margin: 0; font: 700 25px/1.2 Outfit, "Noto Sans SC", sans-serif; }
.upload-progress-copy { position: relative; z-index: 1; margin: 11px 0 23px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.upload-progress { position: relative; z-index: 1; max-width: none; margin: 0; }
.upload-progress-label { align-items: baseline; margin-bottom: 10px; color: #52625c; font-size: 12px; }
.upload-progress-label strong { color: var(--ink); font: 700 18px Outfit, sans-serif; }
.upload-progress progress { display: block; width: 100%; height: 13px; border: 0; border-radius: 99px; overflow: hidden; appearance: none; background: #e8eee4; }
.upload-progress progress::-webkit-progress-bar { background: #e8eee4; border-radius: 99px; }
.upload-progress progress::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg, #76a879, #c9ff46); transition: width .25s ease; }
.upload-progress progress::-moz-progress-bar { border-radius: 99px; background: linear-gradient(90deg, #76a879, #c9ff46); }
@keyframes upload-pulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201,255,70,.35); } 50% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(201,255,70,0); } }

@media (max-width: 760px) {
  .site-header { min-height: 60px; }
  .site-header .brand-logo { max-width: 28px; overflow: hidden; }
  .site-header .brand-logo img { width: 90px; max-width: none; }
  .site-context { display: none; }
  .site-dock-brand { max-width: 60%; }
  .site-dock-title { font-size: 15px; }
  .site-dock-slogan { font-size: 7px; }
  .mockup-page-header { padding-top: 54px; }
  .mockup-page-header .site-dock-brand { top: 14px; }
  .draft-action small { max-width: 150px; }
  .order-record-header { align-items: flex-start; }
  .order-status-panel { justify-items: start; }
  .order-status-badge { min-height: 40px; padding: 7px 14px; font-size: 16px; }
  .submit-bar { bottom: 8px; margin-bottom: 8px; padding: 16px; }
  .submit-bar .submit-actions { margin-top: 13px; }
  .upload-progress-card { padding: 26px 22px 24px; }
  .upload-progress-card h2 { font-size: 22px; }
}

@media (max-width: 760px) {
  .substrate-panel { display: block; padding: 20px; margin: 12px 0; }
  .disc-settings-grid { grid-template-columns: 1fr; margin-top: 15px; }
  .hub-switch { margin-top: 0; }
  .hub-switch span { min-width: 0; padding: 10px; }
  .print-effect-switch { display: grid; grid-template-columns: 1fr; }
  .audio-panel { padding: 20px; }
  .audio-disc-grid { grid-template-columns: 1fr; }
  .audio-disc-box { padding: 13px; }
  .audio-item { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .track-remove { grid-column: 3; }
  .submit-actions { width: 100%; }
  .submit-actions > * { flex: 1 1 auto; }
}

/* Keep the brand dock visually continuous across the full viewport. */
.site-header,
.mockup-page-header { background: transparent; }
.site-header::before,
.mockup-page-header::before { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); border-bottom: 1px solid #d7ddd4; background: rgba(247,245,239,.96); box-shadow: 0 8px 24px rgba(23,36,31,.06); }
.mockup-page-header::before { background: rgba(244,245,239,.96); }
.site-dock-title { letter-spacing: 0; text-transform: none; }
.public-floating-back { position: fixed; top: 88px; right: clamp(18px, 4vw, 54px); z-index: 45; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 17px; border: 1px solid #b5c8b1; border-radius: 14px; background: #edf3e8; color: var(--green); box-shadow: 0 10px 24px rgba(23,36,31,.12); transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; }
.public-floating-back:hover { background: #e2eedc; box-shadow: 0 14px 28px rgba(23,36,31,.16); transform: translateX(-4px); }
.mockup-page-header .public-floating-back { top: 88px; }
.draft-action small[hidden] { display: none; }

@media (max-width: 760px) {
  .public-floating-back { top: 72px; right: 12px; min-height: 40px; padding: 9px 12px; border-radius: 12px; font-size: 12px; }
  .mockup-page-header .public-floating-back { top: 68px; }
  .site-dock-title { letter-spacing: 0; }
}

/* Compact right-side step rail and a small, unobtrusive final action dock. */
.page-shell { padding-bottom: 190px; }
.progress-dock { position: fixed; top: 50%; right: clamp(12px, 2.2vw, 32px); z-index: 34; display: grid; width: 156px; gap: 6px; margin: 0; padding: 9px; border: 1px solid #d2dbcf; border-radius: 18px; background: rgba(255,254,250,.91); box-shadow: 0 14px 36px rgba(23,36,31,.13); backdrop-filter: blur(13px); transform: translateY(-50%); white-space: normal; }
.progress-dock a { display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 42px; padding: 7px 8px; border: 1px solid transparent; border-radius: 12px; color: #8b958e; font-size: 12px; line-height: 1.25; text-decoration: none; transition: color .16s ease, background-color .16s ease, transform .16s ease, border-color .16s ease; }
.progress-dock a:hover { color: var(--ink); background: #f5f8f0; transform: translateX(-2px); }
.progress-dock a span { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid currentColor; border-radius: 50%; font: 700 12px Outfit, sans-serif; }
.progress-dock a b { font-weight: 700; }
.progress-dock a.is-active { border-color: #b8d1ad; background: #eff8d4; color: var(--ink); box-shadow: inset 3px 0 0 #6e9b70; }
.progress-dock a.is-active span { border-color: var(--acid); background: var(--acid); }
.progress-dock a[hidden] { display: none; }
.submit-bar { position: fixed; right: clamp(12px, 2.2vw, 32px); bottom: 20px; z-index: 33; display: grid; grid-template-columns: minmax(0, 1fr); width: min(475px, calc(100vw - 32px)); margin: 0; padding: 15px 17px; gap: 10px; align-items: stretch; border-color: #bdcdb7; border-radius: 18px; box-shadow: 0 16px 38px rgba(23,36,31,.18); background: rgba(255,254,250,.94); backdrop-filter: blur(15px); }
.submit-bar h2 { font-size: 17px; }
.submit-bar #submit-message { display: none; }
.submit-bar .design-set-status { margin-top: 5px !important; font-size: 11px; }
.submit-bar .submit-actions { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; align-items: center; }
.submit-bar .submit-actions > button, .submit-bar .draft-action > button { min-height: 40px; padding: 9px 12px; font-size: 12px; }
.submit-bar .submit-actions > #submit-button { min-width: 145px; }
.submit-bar .draft-action { min-width: 0; }
.submit-bar .draft-action small { max-width: 145px; }

@media (max-width: 760px) {
  .page-shell { padding-bottom: 220px; }
  .progress-dock { top: 50%; right: 9px; width: 126px; padding: 7px; border-radius: 15px; }
  .progress-dock a { grid-template-columns: 24px minmax(0, 1fr); gap: 7px; min-height: 37px; padding: 6px; font-size: 11px; }
  .progress-dock a span { width: 24px; height: 24px; font-size: 11px; }
  .submit-bar { right: 10px; bottom: 10px; width: calc(100vw - 20px); padding: 13px; border-radius: 16px; }
  .submit-bar .submit-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .submit-bar .submit-actions > #submit-button { grid-column: 1 / -1; min-width: 0; }
  .submit-bar .draft-action small { max-width: none; }
}

/* Final responsive pass: keep the floating controls out of the primary content. */
.site-header, .mockup-page-header { isolation: isolate; }
.site-header > *:not(.site-dock-brand), .mockup-page-header > *:not(.site-dock-brand) { position: relative; z-index: 1; }
.site-header .site-dock-brand, .mockup-page-header .site-dock-brand { position: absolute; z-index: 2; }
.site-header .order-search-link { position: relative; z-index: 3; pointer-events: auto; }
.progress-dock { width: 58px; gap: 5px; padding: 6px; border-radius: 18px; }
.progress-dock a { position: relative; display: grid; grid-template-columns: 1fr; place-items: center; width: 44px; min-height: 40px; padding: 5px; border-radius: 12px; }
.progress-dock a span { width: 26px; height: 26px; }
.progress-dock a b { position: absolute; right: calc(100% + 8px); top: 50%; width: max-content; max-width: 130px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fffefa; box-shadow: 0 7px 16px rgba(23,36,31,.12); opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(5px); transition: opacity .16s ease, transform .16s ease; }
.progress-dock a:hover b, .progress-dock a:focus-visible b { opacity: 1; transform: translateY(-50%) translateX(0); }
.public-floating-back { position: fixed; top: 50vh !important; right: clamp(12px, 2.2vw, 32px); z-index: 45; width: 60px; height: 60px; min-height: 60px; padding: 0; border-radius: 50%; justify-content: center; font-size: 0; transform: translateY(-50%); }
.public-floating-back span:first-child { font-size: 27px; line-height: 1; }
.public-floating-back span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.public-floating-back:hover { transform: translateY(-50%) translateX(-4px); }
.mockup-page-header .public-floating-back { top: 50%; }
.submit-bar { right: clamp(12px, 2.2vw, 32px); bottom: 18px; width: min(214px, calc(100vw - 28px)); padding: 13px; border-radius: 20px; }
.submit-bar h2 { font-size: 16px; line-height: 1.25; }
.submit-bar .submit-actions { grid-template-columns: 1fr; gap: 7px; }
.submit-bar .submit-actions > #submit-button { order: -1; min-width: 0; }
.submit-bar .submit-actions > button, .submit-bar .draft-action > button { width: 100%; min-height: 36px; padding: 8px 9px; font-size: 11px; }
.submit-bar .draft-action { position: relative; }
.draft-toast { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 2; display: flex; align-items: flex-start; gap: 7px; width: 205px; padding: 9px 10px; border: 1px solid #e1b449; border-radius: 10px; background: #fffaf0; color: #985c00; font-size: 11px; line-height: 1.45; box-shadow: 0 9px 24px rgba(23,36,31,.14); }
.draft-toast button { flex: 0 0 auto; border: 0; padding: 0; background: transparent; color: inherit; font-size: 18px; line-height: .8; cursor: pointer; }
.draft-toast[hidden], .mockup-controls[hidden] { display: none; }
.mockup-custom-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--ink); font-size: 12px; font-weight: 700; }
.mockup-custom-toggle input { accent-color: var(--green); }
.mockup-controls select { width: 100%; min-height: 37px; border: 1px solid var(--line); border-radius: 6px; padding: 7px 8px; background: #fff; font: 12px inherit; }
.mockup-controls output { color: var(--green); font-weight: 700; }
.mockup-page-header { display: block; padding-top: 70px; text-align: center; }
.mockup-page-header .site-dock-brand { top: 13px; }
.mockup-page-header > div:not(.site-dock-brand) { max-width: 760px; margin: 0 auto; }
.mockup-page-header h1 { letter-spacing: 0; }

@media (max-width: 760px) {
  .progress-dock { right: 8px; width: 50px; padding: 5px; }
  .progress-dock a { width: 38px; min-height: 36px; }
  .progress-dock a span { width: 23px; height: 23px; font-size: 11px; }
  .public-floating-back { top: 50vh !important; right: 10px; width: 50px; height: 50px; min-height: 50px; }
  .public-floating-back span:first-child { font-size: 23px; }
  .mockup-page-header .public-floating-back { top: 50%; }
  .submit-bar { right: 10px; bottom: 10px; width: min(184px, calc(100vw - 22px)); padding: 10px; border-radius: 17px; }
  .submit-bar .design-set-status { font-size: 10px; }
  .submit-bar .submit-actions > button, .submit-bar .draft-action > button { min-height: 33px; padding: 7px 8px; font-size: 10px; }
  .draft-toast { right: -2px; width: min(205px, calc(100vw - 32px)); }
  .mockup-page-header { padding-top: 62px; }
}

/* End-of-file corrections take precedence over legacy responsive rules above. */
.hero-brand-title { max-width: max-content; font-size: clamp(32px, 4vw, 54px); line-height: .94; letter-spacing: -.06em; white-space: nowrap; overflow-wrap: normal; }
.mockup-page { padding: 0 clamp(18px, 4vw, 56px) 36px; }
.mockup-page-header { display: flex; position: sticky; top: 0; z-index: 31; height: 68px; min-height: 68px; max-width: none; margin: 0 calc(clamp(18px, 4vw, 56px) * -1); padding: 0 clamp(18px, 4vw, 56px); align-items: center; border-bottom: 0; background: transparent; text-align: left; }
.mockup-page-header .brand-logo { display: flex; }
.mockup-page-header .site-dock-brand { top: 50%; }
.mockup-page-intro { max-width: 1720px; margin: 0 auto 22px; padding: 48px 0 36px; }
.mockup-page-intro h1 { max-width: 900px; margin: 0; font: 700 clamp(30px, 4.5vw, 62px)/1.08 Outfit, "Noto Sans SC", sans-serif; letter-spacing: -.05em; }
.mockup-page-header .public-floating-back, .orders-header .public-floating-back { position: fixed !important; top: calc(100dvh - 88px) !important; right: clamp(12px, 2.2vw, 32px) !important; bottom: auto !important; z-index: 45 !important; transform: none; }
.mockup-page-header .public-floating-back:hover, .orders-header .public-floating-back:hover { transform: translateX(-4px); }
.submit-bar { transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
.submit-bar.is-guided { border-color: #82a878; background: rgba(244, 252, 225, .97); box-shadow: 0 0 0 3px rgba(201,255,70,.42), 0 18px 44px rgba(23,36,31,.2); }
.submit-bar .primary-button.is-blocked { background: #8f9b91; }
.submit-bar .primary-button.is-ready { background: var(--ink); box-shadow: 0 7px 18px rgba(23,36,31,.18); }
.field.needs-attention, .asset-item.needs-attention, .audio-panel.needs-attention { animation: missing-attention 1.35s ease both; border-color: #d69d32 !important; box-shadow: 0 0 0 4px rgba(214,157,50,.2), 0 10px 26px rgba(23,36,31,.1); }
@keyframes missing-attention { 0%,100% { transform: translateY(0); } 24% { transform: translateY(-3px); } 48% { transform: translateY(2px); } 72% { transform: translateY(-1px); } }

@media (max-width: 760px) {
  .hero-brand-title { max-width: calc(100vw - 28px); font-size: clamp(30px, 9.6vw, 40px); white-space: nowrap; }
  .mockup-page { padding: 0 16px 28px; }
  .mockup-page-header { height: 60px; min-height: 60px; margin: 0 -16px; padding: 0 16px; }
  .mockup-page-header .brand-logo { max-width: 28px; overflow: hidden; }
  .mockup-page-header .brand-logo img { width: 90px; max-width: none; }
  .mockup-page-intro { padding: 34px 0 26px; }
  .mockup-page-intro h1 { font-size: clamp(28px, 9vw, 42px); }
  .mockup-page-header .public-floating-back, .orders-header .public-floating-back { inset: auto 12px 18px auto !important; }
  .submit-bar { width: min(158px, calc(100vw - 22px)); padding: 8px; border-radius: 16px; }
  .submit-bar h2 { white-space: nowrap; font-size: 13px; line-height: 16px; }
  .submit-bar .design-set-status { margin-top: 3px !important; font-size: 9px; }
  .submit-bar .submit-actions { gap: 5px; }
  .submit-bar .submit-actions > button, .submit-bar .draft-action > button { min-height: 30px; padding: 6px 8px; font-size: 10px; line-height: 1; }
}

/* Submission dock hierarchy: calm green by default, stronger guidance when ready. */
.submit-bar {
  border-color: #b8c99d;
  background: linear-gradient(135deg, rgba(242, 248, 216, .98), rgba(229, 242, 193, .98));
  box-shadow: 0 16px 38px rgba(78, 103, 61, .18), 0 0 0 1px rgba(188, 209, 148, .2);
}
.submit-bar .submit-actions > button,
.submit-bar .draft-action > button {
  font: 600 15px/1.2 "Noto Sans SC", sans-serif;
  letter-spacing: 0;
}
.submit-bar #submit-button span:first-child { margin-left: 0; font-size: inherit; }
.submit-bar #submit-button span:last-child { margin-left: 8px; font-size: 1.22em; }
.submit-bar.is-ready-state {
  border-color: #8daf63;
  background: linear-gradient(135deg, rgba(231, 247, 177, .99), rgba(207, 235, 139, .99));
  box-shadow: 0 0 0 2px rgba(168, 211, 92, .34), 0 20px 48px rgba(91, 126, 62, .28);
}
.submit-bar.is-guided { animation: submit-guidance-pulse 2.8s ease both; }
@keyframes submit-guidance-pulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 2px rgba(168, 211, 92, .34), 0 20px 48px rgba(91, 126, 62, .28); }
  18% { transform: translateY(-4px); box-shadow: 0 0 0 6px rgba(201, 255, 70, .3), 0 24px 54px rgba(91, 126, 62, .34); }
  36% { transform: translateY(0); }
  54% { transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(201, 255, 70, .22), 0 22px 50px rgba(91, 126, 62, .3); }
}
@media (max-width: 760px) {
  .submit-bar .submit-actions > button,
  .submit-bar .draft-action > button {
    font-size: 14px;
  }
}

/* Audio skip is an explicit top-of-module action and collapses the track editor. */
.audio-skip-action {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 11px 12px;
  border: 1px solid #c7d8ba;
  border-radius: 12px;
  background: #f2f8e5;
}
.audio-skip-action button { flex: 0 0 auto; min-height: 40px; padding: 9px 14px; }
.audio-skip-action small { color: #5b7060; font-size: 12px; line-height: 1.45; }
.audio-panel.is-audio-skipped .audio-skip-action { border-color: #91b47b; background: #e9f5cf; }
.audio-panel.is-audio-skipped .audio-skip-action button { border-color: #6e9b70; background: #d8edae; color: #23442e; }

/* Use a compact 3 × 3 position picker instead of two imprecise slider rails. */
.mockup-position-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 8px; }
.mockup-position-picker button { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border: 1px solid #c7d5c3; border-radius: 8px; background: #fff; color: #6d7f71; font: 600 16px/1 Arial, sans-serif; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.mockup-position-picker button:hover { border-color: #83a775; background: #f1f8df; color: #31583a; transform: translateY(-1px); }
.mockup-position-picker button.is-active { border-color: #5e8b65; background: #e1f2b8; color: #23442e; box-shadow: inset 0 0 0 1px #9fbd7b; }

/* Render transition: keep the page covered until the first complete canvas is ready. */
.mockup-loading { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 40%, rgba(232, 246, 191, .98), rgba(244, 245, 239, .99) 62%); opacity: 1; transition: opacity .56s ease, transform .56s cubic-bezier(.2,.8,.2,1); }
.mockup-loading[hidden] { display: none; }
.mockup-loading.is-finishing { opacity: 0; transform: scale(1.035); pointer-events: none; }
.mockup-loading-card { display: grid; justify-items: center; width: min(420px, 100%); padding: 38px 30px 34px; border: 1px solid #c9dcb8; border-radius: 28px; background: rgba(255, 254, 250, .9); box-shadow: 0 24px 80px rgba(68, 91, 57, .2); text-align: center; }
.mockup-loading-card .eyebrow { margin-bottom: 18px; }
.mockup-loading-card h2 { margin: 0; color: var(--ink); font: 700 clamp(25px, 4vw, 34px)/1.15 Outfit, "Noto Sans SC", sans-serif; }
.mockup-loading-card p:last-child { margin: 12px 0 0; color: #4d7153; font-size: 15px; font-weight: 600; }
.mockup-loading-spinner { position: relative; width: 92px; height: 92px; margin-bottom: 24px; border-radius: 50%; background: conic-gradient(from 25deg, #b7e95d, #73a976, #dff3a1, #b7e95d); animation: render-spinner 1.35s linear infinite; box-shadow: 0 0 0 8px rgba(201,255,70,.16), 0 12px 32px rgba(78, 111, 65, .2); }
.mockup-loading-spinner::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fffefa; }
.mockup-loading-spinner span { position: absolute; inset: 35px; z-index: 1; border-radius: 50%; background: #b8d784; }
@keyframes render-spinner { to { transform: rotate(360deg); } }

/* The canvas is capped by both viewport dimensions, so the preview is always fully visible. */
.mockup-canvas-wrap { width: min(100%, calc((100dvh - 184px) * 1.523)); max-height: calc(100dvh - 184px); display: grid; place-items: center; margin-left: auto; margin-right: auto; }
#mockup-canvas { width: 100%; height: 100%; max-width: 100%; max-height: calc(100dvh - 184px); object-fit: contain; }
.mockup-actions { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 9px; width: min(560px, calc(100vw - 32px)); padding: 8px; border: 1px solid rgba(176, 202, 148, .9); border-radius: 999px; background: rgba(255, 254, 250, .9); box-shadow: 0 16px 42px rgba(23, 36, 31, .2); backdrop-filter: blur(14px); transform: translateX(-50%); }
.mockup-actions #mockup-download { flex: 0 0 155px; min-height: 46px; }
.mockup-actions #mockup-finish { flex: 1 1 auto; min-height: 58px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #c9ff46, #9ed668); color: #14271c; font-size: 16px; box-shadow: 0 8px 22px rgba(104, 150, 71, .32); animation: finish-button-guide 2.4s ease-in-out infinite; }
.mockup-actions #mockup-finish:hover { background: linear-gradient(135deg, #d7ff72, #a9df72); transform: translateY(-2px); }
.mockup-actions #mockup-finish:disabled { animation: none; opacity: .65; }
@keyframes finish-button-guide { 0%,100% { box-shadow: 0 8px 22px rgba(104, 150, 71, .28); } 50% { box-shadow: 0 0 0 6px rgba(201, 255, 70, .2), 0 12px 30px rgba(104, 150, 71, .38); } }
@media (max-width: 760px) {
  .audio-skip-action { display: grid; justify-items: start; gap: 6px; margin-bottom: 13px; padding: 9px 10px; }
  .audio-skip-action button { width: 100%; min-height: 38px; padding: 8px 11px; }
  .audio-skip-action small { font-size: 11px; }
  .mockup-canvas-wrap { width: 100%; max-height: calc(100dvh - 170px); aspect-ratio: 1500 / 985; }
  #mockup-canvas { max-height: calc(100dvh - 170px); }
  .mockup-actions { bottom: max(10px, env(safe-area-inset-bottom)); flex-direction: column; gap: 6px; width: min(360px, calc(100vw - 20px)); padding: 7px; }
  .mockup-actions #mockup-finish { order: -1; width: 100%; min-height: 51px; font-size: 14px; }
  .mockup-actions #mockup-download { width: 100%; min-height: 38px; }
}

/* Navigation uses the supplied circular Logo Top mark without mobile cropping. */
.site-header .brand-logo,
.mockup-page-header .brand-logo,
.orders-header .brand-logo {
  flex: 0 0 46px;
  width: 46px;
  max-width: 46px;
  height: 46px;
  overflow: visible;
}
.site-header .brand-logo img,
.mockup-page-header .brand-logo img,
.orders-header .brand-logo img {
  width: 46px;
  max-width: 46px;
  height: 46px;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 760px) {
  .site-header .brand-logo,
  .mockup-page-header .brand-logo,
  .orders-header .brand-logo {
    flex-basis: 34px;
    width: 34px;
    max-width: 34px;
    height: 34px;
  }
  .site-header .brand-logo img,
  .mockup-page-header .brand-logo img,
  .orders-header .brand-logo img {
    width: 34px;
    max-width: 34px;
    height: 34px;
  }
}

/* 1.0.1 upload/order shell: mirror the homepage header and atmosphere while
   keeping the legacy form DOM and order behaviours untouched. */
.upload-document,
.orders-document {
  background:
    radial-gradient(ellipse at 14% 12%, rgb(201 255 70 / 58%), transparent 32rem),
    radial-gradient(ellipse at 88% 10%, rgb(41 130 78 / 38%), transparent 34rem),
    linear-gradient(120deg, #a9d696 0%, #d8f29d 52%, #8fc68e 100%);
}
.upload-document .page-shell,
.orders-document .orders-page { position: relative; z-index: 0; }
.upload-document .site-header,
.orders-document .site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 80px;
  min-height: 80px;
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
}
.upload-document .site-header::before,
.orders-document .site-header::before {
  border-bottom: 1px solid rgb(91 134 91 / 27%);
  background: transparent;
  box-shadow: none;
}
.upload-document .site-header > *,
.orders-document .site-header > * { position: relative; z-index: 1; }
.upload-document .site-header .brand-logo,
.orders-document .site-header .brand-logo {
  position: static;
  flex: 0 0 48px;
  width: 48px;
  max-width: 48px;
  height: 48px;
  margin: 0;
  overflow: visible;
}
.upload-document .site-header .brand-logo img,
.orders-document .site-header .brand-logo img {
  width: 48px;
  max-width: 48px;
  height: 48px;
}
.upload-document .site-header .site-dock-brand,
.orders-document .site-header .site-dock-brand {
  position: static;
  width: auto;
  max-width: none;
  margin: 0;
  transform: none;
  align-items: flex-start;
  text-align: left;
}
.upload-document .site-header .site-dock-title,
.orders-document .site-header .site-dock-title {
  width: auto;
  color: var(--ink);
  font-size: 23px;
  letter-spacing: .015em;
  text-align: left;
}
.upload-document .site-header .site-dock-slogan,
.orders-document .site-header .site-dock-slogan {
  width: auto;
  color: #3f704b;
  font-size: 10px;
  letter-spacing: .03em;
  text-align: left;
}
.upload-document .site-header .site-context,
.orders-document .site-header .site-context {
  display: block;
  margin-left: auto;
  color: #356343;
}
.upload-document .site-header .order-search-link { margin-left: 0; }
.upload-document .uploads-landing { padding-top: 62px; }
.upload-document #upload-form-surface { position: relative; z-index: 1; }
.mockup-page-header {
  background: transparent;
  backdrop-filter: none;
}
.mockup-page-header::before {
  border-bottom: 1px solid rgb(91 134 91 / 27%);
  background: transparent;
  box-shadow: none;
}
.mockup-page-header > * { position: relative; z-index: 1; }
.mockup-page-header .site-dock-brand {
  position: static;
  width: auto;
  max-width: none;
  margin: 0;
  transform: none;
  align-items: flex-start;
  text-align: left;
}
.mockup-page-header .site-dock-title,
.mockup-page-header .site-dock-slogan { width: auto; text-align: left; }

/* Orders are the default admin-like customer view: green shell, generous
   separation, and the same rounded information surfaces as the new pages. */
.orders-document .orders-page {
  width: min(1240px, calc(100% - 56px));
  padding: 0 0 58px;
}
.orders-document .orders-intro {
  max-width: 820px;
  padding: 72px 0 34px;
}
.orders-document .orders-intro h1 {
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 1.08;
}
.orders-document .orders-intro > p:not(.eyebrow),
.orders-document .orders-local-note {
  text-wrap: pretty;
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: normal;
}
.orders-document .order-search-form {
  margin-top: 28px;
  padding: 20px;
  border: 1px solid rgb(113 156 115 / 67%);
  border-radius: 22px;
  background: rgb(249 255 241 / 78%);
  box-shadow: 0 18px 40px rgb(49 95 61 / 11%);
}
.orders-document .order-search-form .field input {
  border-radius: 12px;
  background: #fffefa;
}
.orders-document .order-search-form .primary-button { border-radius: 999px; }
.orders-document .orders-local-note { margin: 0 0 18px; color: #52745b; }
.orders-document .order-results { gap: 22px; }
.orders-document .order-record.card,
.orders-document .orders-empty.card {
  border-color: rgb(113 156 115 / 67%);
  border-radius: 24px;
  background: rgb(249 255 241 / 88%);
  box-shadow: 0 18px 40px rgb(49 95 61 / 11%);
}
.orders-document .order-record-header { padding: 28px; border-bottom-color: rgb(113 156 115 / 25%); }
.orders-document .order-record-header h2 { font-size: clamp(22px, 3vw, 32px); }
.orders-document .order-record-grid { gap: 22px; padding: 28px; }
.orders-document .order-file-list li { border: 1px solid rgb(196 213 191 / 85%); border-radius: 12px; background: #fffefa; }
.orders-document .draft-resume-panel {
  margin: 24px 28px;
  padding: 18px;
  border-radius: 16px;
  background: #eff8d4;
}
.orders-document .order-mockup-gallery { padding: 0 28px 28px; }
.orders-document .site-credits { margin-top: 34px; }

@media (max-width: 760px) {
  .upload-document .site-header,
  .orders-document .site-header { height: 64px; min-height: 64px; }
  .upload-document .site-header .brand-logo,
  .orders-document .site-header .brand-logo {
    flex-basis: 37px;
    width: 37px;
    max-width: 37px;
    height: 37px;
  }
  .upload-document .site-header .brand-logo img,
  .orders-document .site-header .brand-logo img {
    width: 37px;
    max-width: 37px;
    height: 37px;
  }
  .upload-document .site-header .site-dock-brand,
  .orders-document .site-header .site-dock-brand {
    width: auto;
    max-width: calc(100% - 112px);
    margin-left: 0;
    align-items: flex-start;
  }
  .upload-document .site-header .site-dock-title,
  .orders-document .site-header .site-dock-title {
    font-size: 16px;
    text-align: left;
  }
  .upload-document .site-header .site-dock-slogan,
  .orders-document .site-header .site-dock-slogan {
    font-size: 8px;
    text-align: left;
  }
  .upload-document .site-header .site-context,
  .orders-document .site-header .site-context { display: none; }
  .orders-document .orders-page { width: min(100% - 28px, 560px); }
  .orders-document .orders-intro { padding: 48px 0 26px; }
  .orders-document .orders-intro h1 { font-size: clamp(29px, 8vw, 42px); white-space: nowrap; }
  .orders-document .order-search-form { grid-template-columns: 1fr; padding: 16px; gap: 14px; }
  .orders-document .order-search-form .primary-button { width: 100%; }
  .orders-document .order-record-header,
  .orders-document .order-record-grid { padding: 20px; }
  .orders-document .draft-resume-panel { margin: 20px; }
  .orders-document .order-mockup-gallery { padding: 0 20px 20px; }
  .mockup-page-header .site-dock-brand { max-width: calc(100% - 44px); align-items: flex-end; text-align: right; }
  .mockup-page-header .site-dock-title,
  .mockup-page-header .site-dock-slogan { text-align: right; }
}

@media (max-width: 760px) {
  .upload-document .site-header {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
  }
  .upload-document .site-header .brand-logo {
    flex: none;
    width: 32px;
    max-width: 32px;
    height: 32px;
  }
  .upload-document .site-header .brand-logo img {
    width: 32px;
    max-width: 32px;
    height: 32px;
  }
  .upload-document .site-header .site-dock-brand {
    min-width: 0;
    width: auto;
    max-width: none;
    margin: 0;
  }
  .upload-document .site-header .site-dock-title {
    max-width: 100%;
    font-size: clamp(13px, 3.8vw, 16px);
  }
  .upload-document .site-header .site-dock-slogan {
    max-width: 100%;
    font-size: clamp(6px, 1.9vw, 8px);
  }
  .upload-document .site-header .order-search-link {
    flex: none;
    margin: 0;
    padding: 6px 8px;
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
  }
}

/* Render studio hierarchy: custom text stays in the left rail; views and actions belong to the preview. */
.mockup-page-layout { grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); gap: clamp(28px, 4vw, 54px); max-width: 1540px; align-items: start; }
.mockup-sidebar { padding: 22px; }
.mockup-sidebar > .muted { margin-bottom: 18px; }
.mockup-custom-panel { padding: 13px 14px 12px; border: 1px solid #c8d8bf; border-radius: 14px; background: #f4faea; }
.mockup-custom-toggle { min-height: 42px; margin: 0; padding: 10px 12px; border: 1px solid #9db99a; border-radius: 10px; background: #fffefa; font-size: 14px; font-weight: 800; cursor: pointer; }
.mockup-custom-toggle:hover { border-color: #6e9b70; background: #eff8d4; }
.mockup-custom-toggle:has(input:checked) { border-color: #5e8b65; background: #e1f2b8; box-shadow: inset 0 0 0 1px #9fbd7b; }
.mockup-custom-toggle input { width: 16px; height: 16px; margin: 0; }
.mockup-custom-hint { display: block; margin: 8px 2px 0; color: #66806b; font-size: 11px; line-height: 1.45; }
.mockup-controls { margin-top: 10px; }
.mockup-preview-panel { position: relative; min-width: 0; display: grid; justify-items: center; }
.mockup-view-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(100%, 920px); margin: 0 auto 14px; padding: 14px 18px; border: 1px solid #c8d8bf; border-radius: 16px; background: rgba(255,254,250,.88); box-shadow: 0 8px 24px rgba(23,36,31,.07); }
.mockup-view-toolbar .eyebrow { margin: 0 0 4px; font-size: 10px; }
.mockup-view-toolbar h2 { margin: 0; color: var(--ink); font: 700 18px/1.2 Outfit, "Noto Sans SC", sans-serif; }
.mockup-tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin: 0; }
.mockup-tabs button { width: auto; min-height: 42px; padding: 10px 14px; border: 1px solid #b9cdb5; border-radius: 999px; background: #fffefa; color: #5d7062; font: 600 13px/1.2 "Noto Sans SC", sans-serif; cursor: pointer; text-align: center; transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease; }
.mockup-tabs button:hover { transform: translateY(-1px); border-color: #6e9b70; background: #eff8d4; color: var(--ink); }
.mockup-tabs button.is-active { border-color: #6e9b70; background: #e1f2b8; color: #23442e; box-shadow: inset 0 0 0 1px #9fbd7b, 0 5px 14px rgba(86,129,92,.12); }
.mockup-canvas-wrap { width: min(100%, calc((100dvh - 220px) * 1.523)); max-height: calc(100dvh - 220px); margin: 0 auto; }
#mockup-canvas { max-height: calc(100dvh - 220px); }
.mockup-actions { width: min(720px, calc(100vw - 32px)); gap: 10px; padding: 9px; }
.mockup-actions #mockup-download, .mockup-actions #mockup-finish { min-height: 56px; border-radius: 999px; font: 600 15px/1.2 "Noto Sans SC", sans-serif; }
.mockup-actions #mockup-download { flex: 0 0 220px; border: 1px solid #9db4a2; background: #fffefa; color: var(--ink); box-shadow: 0 6px 16px rgba(23,36,31,.08); }
.mockup-actions #mockup-download:hover { border-color: #6e9b70; background: #eff8d4; transform: translateY(-2px); }
.mockup-actions #mockup-finish { flex: 1 1 auto; min-width: 0; font-size: 16px; }

@media (max-width: 900px) {
  .mockup-page-layout { grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); gap: 20px; }
  .mockup-view-toolbar { display: grid; justify-items: stretch; gap: 11px; }
  .mockup-tabs { justify-content: stretch; }
  .mockup-tabs button { flex: 1 1 auto; }
}

@media (max-width: 760px) {
  .mockup-page-layout { grid-template-columns: 1fr; gap: 18px; }
  .mockup-sidebar { order: 2; width: 100%; }
  .mockup-preview-panel { order: 1; width: 100%; }
  .mockup-view-toolbar { width: 100%; padding: 13px; }
  .mockup-view-toolbar h2 { font-size: 16px; }
  .mockup-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mockup-tabs button { min-height: 40px; padding: 9px 6px; font-size: 13px; }
  .mockup-canvas-wrap { width: 100%; max-height: calc(100dvh - 190px); }
  #mockup-canvas { max-height: calc(100dvh - 190px); }
  .mockup-actions { width: min(430px, calc(100vw - 20px)); }
  .mockup-actions #mockup-download, .mockup-actions #mockup-finish { width: 100%; min-height: 49px; }
  .mockup-actions #mockup-download { flex: 0 0 auto; }
}

/* Give the audio heading and its skip action a clear breathing gap. */
.audio-panel > .section-heading { margin-bottom: 18px; }
@media (max-width: 760px) {
  .audio-panel > .section-heading { margin-bottom: 13px; }
}

/* Audio collapse transition: keep the heading and skip control in place while the editor recedes. */
.audio-panel #audio-description,
.audio-panel #audio-disc-grid {
  max-height: 1800px;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition: max-height .42s ease, opacity .24s ease, transform .42s ease, margin .42s ease;
}
.audio-panel.is-audio-collapsing #audio-description,
.audio-panel.is-audio-collapsing #audio-disc-grid {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .audio-panel #audio-description,
  .audio-panel #audio-disc-grid { transition-duration: .01ms; }
}

/* Render page final composition: one centered preview stage with only essential copy. */
.mockup-page-layout {
  display: block;
  width: min(100%, 1160px);
  max-width: 1160px;
  margin: 0 auto;
}
.mockup-preview-panel {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}
.mockup-description {
  width: min(100%, 760px);
  margin: 0 auto 14px;
  color: #68796d;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}
.mockup-view-toolbar {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(100%, 760px);
  margin: 0 auto 14px;
  padding: 13px 16px;
  text-align: center;
}
.mockup-view-toolbar .eyebrow { margin-bottom: 3px; }
.mockup-view-toolbar h2 { font-size: 17px; }
.mockup-tabs { justify-content: center; }
.mockup-canvas-wrap {
  width: min(100%, 1080px, calc((100dvh - 248px) * 1.523));
  max-height: calc(100dvh - 248px);
  margin: 0 auto;
}
#mockup-canvas {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 248px);
  object-fit: contain;
}
.mockup-actions {
  width: min(590px, calc(100vw - 32px));
  gap: 8px;
  padding: 7px;
}
.mockup-actions #mockup-download,
.mockup-actions #mockup-finish {
  min-height: 46px;
  font-size: 14px;
}
.mockup-actions #mockup-download { flex-basis: 175px; }
.mockup-actions #mockup-finish { min-height: 49px; font-size: 15px; }
@media (max-width: 760px) {
  .mockup-page-layout,
  .mockup-preview-panel { width: 100%; }
  .mockup-description { margin-bottom: 11px; font-size: 11px; }
  .mockup-view-toolbar { width: 100%; padding: 12px; }
  .mockup-view-toolbar h2 { font-size: 16px; }
  .mockup-canvas-wrap { width: 100%; max-height: calc(100dvh - 206px); }
  #mockup-canvas { max-height: calc(100dvh - 206px); }
  .mockup-actions { width: min(340px, calc(100vw - 20px)); }
  .mockup-actions #mockup-finish { min-height: 46px; font-size: 14px; }
  .mockup-actions #mockup-download { min-height: 36px; font-size: 13px; }
}

/* Final render spacing: restore the title, align both panels, and keep actions out of the canvas. */
.mockup-page-intro {
  width: min(100%, 1080px);
  max-width: 1080px;
  margin: 0 auto 20px;
  padding: 34px 0 0;
  text-align: center;
}
.mockup-page-intro h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(32px, 4.2vw, 58px);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.mockup-page-intro .mockup-description {
  width: auto;
  margin: 20px auto 0;
  font-size: 13px;
}
.mockup-page-layout,
.mockup-preview-panel {
  width: min(100%, 1080px);
  max-width: 1080px;
}
.mockup-view-toolbar,
.mockup-canvas-wrap {
  width: 100%;
  max-width: 1080px;
  box-sizing: border-box;
}
.mockup-view-toolbar { margin-bottom: 14px; }
.mockup-canvas-wrap {
  max-height: min(700px, calc(100dvh - 350px));
}
#mockup-canvas { max-height: min(700px, calc(100dvh - 350px)); }
.mockup-actions {
  position: static;
  width: min(590px, calc(100% - 32px));
  margin: 16px auto 0;
  transform: none;
  align-items: stretch;
}
.mockup-actions #mockup-download,
.mockup-actions #mockup-finish {
  box-sizing: border-box;
  height: 49px;
  min-height: 49px;
  white-space: nowrap;
}
.mockup-actions #mockup-download { flex-basis: 220px; }
@media (max-width: 760px) {
  .mockup-page-intro { width: 100%; padding-top: 25px; margin-bottom: 15px; }
  .mockup-page-intro h1 { font-size: clamp(28px, 8.5vw, 40px); }
  .mockup-page-intro .mockup-description { margin-top: 14px; font-size: 11px; }
  .mockup-canvas-wrap { max-height: calc(100dvh - 310px); }
  #mockup-canvas { max-height: calc(100dvh - 310px); }
  .mockup-actions { margin-top: 12px; }
  .mockup-actions #mockup-download,
  .mockup-actions #mockup-finish {
    height: 44px;
    min-height: 44px;
  }
}

/* Keep the render loading headline on one calm, uninterrupted line. */
.mockup-loading-card {
  width: min(620px, 100%);
  padding-right: 24px;
  padding-left: 24px;
}
.mockup-loading-card h2 {
  white-space: nowrap;
  font-size: clamp(18px, 3.2vw, 30px);
}
@media (max-width: 760px) {
  .mockup-loading-card h2 { font-size: clamp(16px, 6vw, 24px); }
}

/* Center every control inside the preview-view container, including its full button row. */
.mockup-view-toolbar {
  grid-template-columns: 1fr;
  justify-items: center;
}
.mockup-view-toolbar > div:first-child {
  width: 100%;
  text-align: center;
}
.mockup-tabs {
  width: 100%;
  justify-content: center;
}

/* Submission confirmation gets its own soft animated green atmosphere instead of the home page backdrop. */
#result-dialog::backdrop {
  background-color: rgb(220 239 201 / 96%);
  background-image:
    radial-gradient(ellipse at 16% 24%, rgb(191 244 104 / 72%) 0 11%, transparent 34%),
    radial-gradient(ellipse at 84% 18%, rgb(91 170 111 / 56%) 0 13%, transparent 37%),
    radial-gradient(ellipse at 64% 86%, rgb(205 255 105 / 60%) 0 12%, transparent 35%),
    radial-gradient(ellipse at 22% 82%, rgb(120 204 136 / 42%) 0 10%, transparent 32%);
  background-size: 138% 148%, 146% 136%, 152% 144%, 134% 150%;
  background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%;
  backdrop-filter: blur(18px) saturate(1.08);
  animation: submission-backdrop-wave 16s ease-in-out infinite alternate;
}
@keyframes submission-backdrop-wave {
  0% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%; }
  34% { background-position: 24% 16%, 78% 28%, 72% 84%, 16% 68%; }
  68% { background-position: 66% 8%, 42% 46%, 28% 72%, 58% 32%; }
  100% { background-position: 100% 28%, 0% 18%, 12% 100%, 88% 76%; }
}
@media (prefers-reduced-motion: reduce) {
  #result-dialog::backdrop { animation: none; }
}

/* Keep the upload-processing headline on one line while scaling it for narrow phones. */
.upload-progress-dialog { width: min(700px, calc(100% - 32px)); }
.upload-progress-card h2 {
  white-space: nowrap;
  font-size: clamp(13px, 2.7vw, 25px);
}
@media (max-width: 760px) {
  .upload-progress-card { padding-right: 18px; padding-left: 18px; }
  .upload-progress-card h2 { font-size: clamp(12px, 3.5vw, 22px); }
}

/* Give the confirmation hand-off a deliberate close, then leave the customer on a calm completion screen. */
#result-dialog .dialog-content {
  transition: opacity .38s ease, transform .42s cubic-bezier(.2,.8,.2,1);
}
#result-dialog::backdrop {
  /* The handoff layer owns the background during close; never fade the native backdrop to white. */
  transition: none;
  background-color: rgb(185 222 164);
  background-image:
    radial-gradient(ellipse at 12% 18%, rgb(180 255 65 / 86%) 0 13%, transparent 34%),
    radial-gradient(ellipse at 88% 22%, rgb(44 135 74 / 78%) 0 14%, transparent 38%),
    radial-gradient(ellipse at 68% 86%, rgb(226 255 120 / 82%) 0 12%, transparent 35%),
    radial-gradient(ellipse at 20% 82%, rgb(92 193 111 / 64%) 0 11%, transparent 34%);
  background-size: 96% 112%, 108% 108%, 112% 118%, 100% 110%;
  background-blend-mode: screen, normal, screen, normal;
  background-repeat: no-repeat;
  animation: submission-backdrop-wave-strong 8s ease-in-out infinite alternate;
}
#result-dialog.is-closing .dialog-content {
  opacity: 0;
  transform: translateY(-16px) scale(.96);
}
#result-dialog.is-closing::backdrop { opacity: 1; }
@keyframes submission-backdrop-wave-strong {
  0% { background-position: -18% -14%, 112% -8%, 108% 112%, -12% 96%; }
  25% { background-position: 24% 20%, 80% 30%, 74% 84%, 18% 70%; }
  50% { background-position: 70% 0%, 34% 52%, 22% 68%, 62% 28%; }
  75% { background-position: 92% 34%, 4% 18%, 54% 104%, 86% 66%; }
  100% { background-position: 118% 52%, -14% 36%, -8% 92%, 108% 18%; }
}

.submission-complete-screen {
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  display: grid;
  place-items: center;
  padding: 32px;
  background-color: rgb(185 222 164);
  background-image:
    radial-gradient(ellipse at 12% 18%, rgb(180 255 65 / 86%) 0 13%, transparent 34%),
    radial-gradient(ellipse at 88% 22%, rgb(44 135 74 / 78%) 0 14%, transparent 38%),
    radial-gradient(ellipse at 68% 86%, rgb(226 255 120 / 82%) 0 12%, transparent 35%),
    radial-gradient(ellipse at 20% 82%, rgb(92 193 111 / 64%) 0 11%, transparent 34%);
  background-size: 96% 112%, 108% 108%, 112% 118%, 100% 110%;
  background-position: -18% -14%, 112% -8%, 108% 112%, -12% 96%;
  background-blend-mode: screen, normal, screen, normal;
  background-repeat: no-repeat;
  backdrop-filter: blur(18px) saturate(1.08);
  animation: submission-backdrop-wave-strong 8s ease-in-out infinite alternate;
  opacity: 0;
  transition: opacity .42s ease;
}
.submission-complete-screen[hidden] { display: none; }
.submission-complete-screen.is-covering,
.submission-complete-screen.is-visible {
  opacity: 1;
  transition: none;
}
.submission-handoff-layer {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  background-color: rgb(185 222 164);
  background-image:
    radial-gradient(ellipse at 12% 18%, rgb(180 255 65 / 86%) 0 13%, transparent 34%),
    radial-gradient(ellipse at 88% 22%, rgb(44 135 74 / 78%) 0 14%, transparent 38%),
    radial-gradient(ellipse at 68% 86%, rgb(226 255 120 / 82%) 0 12%, transparent 35%),
    radial-gradient(ellipse at 20% 82%, rgb(92 193 111 / 64%) 0 11%, transparent 34%);
  background-size: 96% 112%, 108% 108%, 112% 118%, 100% 110%;
  background-position: -18% -14%, 112% -8%, 108% 112%, -12% 96%;
  background-blend-mode: screen, normal, screen, normal;
  background-repeat: no-repeat;
  backdrop-filter: blur(18px) saturate(1.08);
  opacity: 0;
}
.submission-handoff-layer[hidden] { display: none; }
.submission-handoff-layer.is-visible {
  opacity: 1;
  animation: submission-backdrop-wave-strong 8s ease-in-out infinite alternate;
}
.submission-complete-content {
  display: grid;
  justify-items: center;
  max-width: 720px;
  text-align: center;
}
.submission-complete-logo {
  width: min(520px, calc(100vw - 64px));
  height: auto;
  aspect-ratio: 3771 / 1134;
  object-fit: contain;
  opacity: 0;
  transform: translateY(-28px) scale(.72);
}
.submission-complete-screen.is-visible .submission-complete-logo {
  animation: completion-logo-arrive .72s cubic-bezier(.2,.85,.25,1) .08s forwards;
}
.submission-complete-slogan {
  max-width: 520px;
  margin: 20px 0 0;
  color: #56815c;
  font: 600 clamp(11px, 1.3vw, 15px)/1.3 Outfit, sans-serif;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(-8px);
}
.submission-complete-screen.is-visible .submission-complete-slogan {
  animation: completion-copy-in .62s ease .68s forwards;
}
.submission-complete-message {
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--ink);
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.6;
  font-weight: 700;
  opacity: 0;
  transform: translateY(-8px);
}
.submission-complete-screen.is-visible .submission-complete-message {
  animation: completion-copy-in .72s ease 1.06s forwards;
}
@keyframes completion-message-breathe {
  0%, 100% { text-shadow: 0 0 0 rgb(23 36 31 / 0%); }
  50% { text-shadow: 0 0 18px rgb(86 129 92 / 30%); }
}
.submission-complete-screen.is-visible .submission-complete-message {
  animation: completion-copy-in .72s ease 1.06s forwards, completion-message-breathe 4.8s ease-in-out 1.9s infinite;
}
@keyframes completion-logo-arrive {
  from { opacity: 0; transform: translateY(-28px) scale(.72); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes completion-copy-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 760px) {
  .submission-complete-screen { padding: 22px; }
  .submission-complete-logo { width: min(420px, calc(100vw - 44px)); }
  .submission-complete-slogan { margin-top: 16px; font-size: 11px; }
  .submission-complete-message { margin-top: 18px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  #result-dialog::backdrop { animation: none; }
  .submission-complete-screen { animation: none; }
  .submission-handoff-layer { animation: none; }
  #result-dialog .dialog-content,
  .submission-complete-screen { transition: none; }
  .submission-complete-screen.is-visible .submission-complete-logo,
  .submission-complete-screen.is-visible .submission-complete-slogan,
  .submission-complete-screen.is-visible .submission-complete-message {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Paint the completion atmosphere on one oversized surface so gradient image bounds
   can never become visible as vertical or horizontal seams. */
html { background-color: rgb(185 222 164); }
dialog.submission-complete-screen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 32px;
}
dialog.submission-complete-screen::backdrop { background: transparent; }
.submission-complete-screen,
.submission-handoff-layer {
  overflow: hidden;
  isolation: isolate;
  background-color: rgb(185 222 164);
  background-image: none;
}
.submission-complete-screen::before,
.submission-handoff-layer::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 18%, rgb(180 255 65 / 86%) 0 15%, transparent 48%),
    radial-gradient(ellipse at 88% 22%, rgb(44 135 74 / 78%) 0 16%, transparent 52%),
    radial-gradient(ellipse at 68% 86%, rgb(226 255 120 / 82%) 0 14%, transparent 49%),
    radial-gradient(ellipse at 20% 82%, rgb(92 193 111 / 64%) 0 13%, transparent 48%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: blur(24px) saturate(1.06);
  transform: scale(1.06) translate3d(0, 0, 0);
  transform-origin: center;
  animation: submission-atmosphere-wave 12s ease-in-out infinite alternate;
}
.submission-complete-content { position: relative; z-index: 1; }
.submission-complete-content,
.submission-complete-slogan,
.submission-complete-message {
  width: 100%;
  text-align: center;
}
.submission-complete-logo { display: block; margin-right: auto; margin-left: auto; }
@keyframes submission-atmosphere-wave {
  0% { transform: scale(1.06) translate3d(-2%, -1%, 0); }
  24% { transform: scale(1.11) translate3d(2%, 1%, 0); }
  52% { transform: scale(1.08) translate3d(1%, -2%, 0); }
  78% { transform: scale(1.13) translate3d(-2%, 2%, 0); }
  100% { transform: scale(1.07) translate3d(1%, 1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .submission-complete-screen::before,
  .submission-handoff-layer::before { animation: none; }
}

/* Render loading indicator: a slow-turning CD with a separate outer scan light. */
.mockup-loading-spinner {
  width: 108px;
  height: 108px;
  margin-bottom: 24px;
  border: 1px solid rgba(88, 126, 83, .38);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .96) 0 9%, transparent 9.5%),
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .72), transparent 31%),
    repeating-radial-gradient(circle at 50% 50%, rgba(76, 117, 81, .24) 0 1px, transparent 1px 8px),
    conic-gradient(from 18deg, #cce68b, #ecf8cf 18%, #b3d7a8 38%, #f4f5d8 57%, #8fbf91 78%, #cce68b);
  animation: render-disc-spin 4.8s linear infinite;
  box-shadow: 0 0 0 8px rgba(201, 255, 70, .13), 0 14px 34px rgba(78, 111, 65, .2);
}
.mockup-loading-spinner::before {
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, .76);
  background:
    radial-gradient(circle at 50% 50%, transparent 0 31%, rgba(255, 255, 255, .42) 32% 33%, transparent 34%),
    radial-gradient(circle at 50% 50%, transparent 0 68%, rgba(46, 95, 59, .22) 69% 70%, transparent 71%),
    rgba(245, 249, 226, .16);
  box-shadow: inset 0 0 0 1px rgba(72, 111, 76, .14);
}
.mockup-loading-spinner::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: conic-gradient(from -28deg, transparent 0 304deg, rgba(201, 255, 70, .24) 312deg, #f8ffd8 324deg, #a3da55 334deg, transparent 344deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: 6px;
  animation: render-scan-spin 2.2s linear infinite;
  filter: drop-shadow(0 0 4px rgba(201, 255, 70, .68));
}
.mockup-loading-spinner span {
  inset: 37px;
  z-index: 2;
  border: 4px solid rgba(255, 255, 255, .88);
  background: radial-gradient(circle, #b8d784 0 48%, #edf7d7 50% 66%, #8eb58a 68% 100%);
  box-shadow: 0 1px 6px rgba(45, 85, 53, .22);
}
@keyframes render-disc-spin { to { transform: rotate(360deg); } }
@keyframes render-scan-spin { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mockup-loading-spinner,
  .mockup-loading-spinner::after { animation: none; }
}

/* Shared return control: the same dark circular treatment as the upload indicator. */
.public-floating-back {
  width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 !important;
  border: 1px solid rgba(201, 255, 70, .5) !important;
  border-radius: 50% !important;
  justify-content: center;
  background: #17241f !important;
  color: var(--acid) !important;
  box-shadow: 0 12px 30px rgba(23, 36, 31, .24), 0 0 0 6px rgba(201, 255, 70, .08);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.public-floating-back span:first-child {
  display: block;
  width: 28px;
  height: 18px;
  font-size: 0;
  line-height: 0;
  color: var(--acid);
  background: currentColor;
  clip-path: polygon(100% 40%, 34% 40%, 34% 0, 0 50%, 34% 100%, 34% 60%, 100% 60%);
  filter: none;
  text-shadow: none;
}
.public-floating-back:hover {
  background: #101a16 !important;
  box-shadow: 0 16px 34px rgba(23, 36, 31, .3), 0 0 0 8px rgba(201, 255, 70, .12);
}
.public-floating-back:focus-visible {
  outline: 3px solid rgba(201, 255, 70, .72);
  outline-offset: 4px;
}
@media (max-width: 760px) {
  .public-floating-back {
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
  }
  .public-floating-back span:first-child { font-size: 24px; }
}

/* Order lookup mobile header: balance the left logo with a right-aligned brand block. */
@media (max-width: 760px) {
  .orders-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .orders-header .brand-logo { position: static; flex: 0 0 34px; width: 34px; max-width: 34px; margin: 0; }
  .orders-header .site-dock-brand { position: static; width: auto; max-width: calc(100% - 44px); margin-left: auto; transform: none; align-items: flex-end; text-align: right; }
  .orders-header .site-dock-title { width: auto; max-width: 100%; text-align: right; }
  .orders-header .site-dock-slogan { width: auto; max-width: 100%; text-align: right; }
}

/* Mobile brand dock: keep the BCRT title on one line and let the slogan break after the comma. */
.mobile-slogan-break { display: none; }
@media (max-width: 760px) {
  .site-dock-brand { width: calc(100% - 104px); max-width: calc(100% - 104px); }
  .site-dock-title { display: block; width: 100%; overflow: hidden; font-size: clamp(11px, 3.5vw, 15px); letter-spacing: 0; line-height: 1; text-overflow: clip; white-space: nowrap; }
  .site-dock-slogan { display: block; width: 100%; max-width: 100%; overflow: visible; font-size: clamp(6px, 2vw, 8px); line-height: 1.2; text-align: center; text-overflow: clip; white-space: normal; }
  .mobile-slogan-break { display: inline; }
  .hero-brand-title { width: 100%; max-width: 100%; overflow: hidden; font-size: clamp(22px, 6vw, 25px); letter-spacing: -.04em; white-space: nowrap; }
}

/* The order lookup header follows the same left-anchored brand lockup as the
   homepage; the earlier legacy rule used space-between and pushed it right. */
.orders-document .orders-header { justify-content: flex-start; }

/* The render actions stay in the document flow on phones, so they never cover the canvas. */
@media (max-width: 760px) {
  .mockup-page { padding-bottom: 26px; }
  .mockup-actions { position: relative; left: auto; bottom: auto; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.38fr); align-items: stretch; width: 100%; margin: 12px auto 0; padding: 7px; gap: 7px; transform: none; }
  .mockup-actions #mockup-download,
  .mockup-actions #mockup-finish { width: 100%; min-width: 0; min-height: 48px; padding: 8px 9px; border-radius: 999px; font-size: 12px; line-height: 1.25; }
  .mockup-actions #mockup-download { flex: none; }
  .mockup-actions #mockup-finish { order: initial; }
}

/* Mobile submission dock: animate the automatic collapse/expand instead of swapping it abruptly. */
@media (max-width: 760px) {
  .submit-bar {
    position: fixed;
    overflow: hidden;
    transition:
      width .42s cubic-bezier(.2, .8, .2, 1),
      min-height .42s cubic-bezier(.2, .8, .2, 1),
      padding .42s cubic-bezier(.2, .8, .2, 1),
      border-radius .42s cubic-bezier(.2, .8, .2, 1),
      box-shadow .3s ease,
      background-color .3s ease;
  }

  .submit-bar > div:not(.submit-bar-peek) {
    display: block;
    max-height: 220px;
    overflow: hidden;
    opacity: 1;
    transform: scale(1) translateY(0);
    visibility: visible;
    transition:
      max-height .36s cubic-bezier(.2, .8, .2, 1),
      opacity .2s ease,
      transform .36s cubic-bezier(.2, .8, .2, 1),
      visibility 0s linear;
  }

  .submit-bar > .submit-actions { display: grid; }

  .submit-bar-peek {
    position: absolute;
    inset: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    min-height: 30px;
    border: 0;
    border-radius: 999px;
    background: #eff8d4;
    color: var(--ink);
    font: 700 11px inherit;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: scale(.72);
    transition:
      opacity .2s ease,
      transform .42s cubic-bezier(.2, .8, .2, 1),
      visibility 0s linear .42s;
  }

  .submit-bar.is-collapsed {
    width: 62px;
    min-height: 39px;
    padding: 4px;
    border-radius: 999px;
  }

  .submit-bar.is-collapsed > div:not(.submit-bar-peek) {
    display: block;
    max-height: 0;
    opacity: 0;
    transform: scale(.84) translateY(5px);
    visibility: hidden;
    pointer-events: none;
    transition:
      max-height .36s cubic-bezier(.2, .8, .2, 1),
      opacity .18s ease,
      transform .36s cubic-bezier(.2, .8, .2, 1),
      visibility 0s linear .36s;
  }

  .submit-bar.is-collapsed > .submit-actions { display: grid; }

  .submit-bar.is-collapsed .submit-bar-peek {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition:
      opacity .2s ease .12s,
      transform .42s cubic-bezier(.2, .8, .2, 1),
      visibility 0s linear;
  }

  .submit-bar.is-collapsed .submit-bar-peek span:last-child {
    font-size: 15px;
    line-height: .8;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .submit-bar,
  .submit-bar > div:not(.submit-bar-peek),
  .submit-bar-peek {
    transition: none;
  }
}

/* Final mobile typography and render controls: break copy only after punctuation. */
.upload-copy-break { display: none; }
.upload-progress-copy-lead { white-space: normal; }
.theend-message-break { display: none; }
.mockup-page-intro h1 {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

@media (max-width: 760px) {
  .upload-progress-copy { font-size: clamp(9px, 2.9vw, 13px); }
  .upload-copy-break { display: inline; }
  .upload-progress-copy-lead { white-space: nowrap; }
  .theend-message-break { display: inline; }

  /* Keep the render header balanced like the mobile order header: mark left, brand block right. */
  .mockup-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 60px;
    min-height: 60px;
    padding: 0 16px;
  }
  .mockup-page-header .brand-logo {
    display: flex;
    position: static;
    flex: 0 0 34px;
    width: 34px;
    max-width: 34px;
    height: 34px;
    margin: 0;
  }
  .mockup-page-header .brand-logo img {
    width: 34px;
    max-width: 34px;
    height: 34px;
  }
  .mockup-page-header .site-dock-brand {
    position: static;
    width: auto;
    max-width: calc(100% - 44px);
    margin-left: auto;
    transform: none;
    align-items: flex-end;
    text-align: right;
  }
  .mockup-page-header .site-dock-title {
    width: auto;
    max-width: 100%;
    text-align: right;
  }
  .mockup-page-header .site-dock-slogan {
    width: auto;
    max-width: 100%;
    text-align: right;
  }

  /* The Chinese render heading is one visual unit: scale it down instead of orphaning a character. */
  .mockup-page-intro h1 {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(18px, 6.2vw, 40px);
    line-height: 1.15;
    letter-spacing: -.055em;
    white-space: nowrap;
    text-overflow: clip;
  }

  /* Center the two render actions as one compact control group on phones. */
  .mockup-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    width: min(100%, 380px);
    margin-inline: auto;
  }
  .mockup-actions #mockup-download,
  .mockup-actions #mockup-finish {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-inline: 8px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
  }

  /* The slimcase/slipcase view switch has two buttons; keep the pair centered
     instead of leaving the second button in a three-column grid. */
  .mockup-view-toolbar {
    gap: 15px;
    padding: 16px 12px 20px;
  }
  .mockup-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 340px);
    margin: 2px auto 0;
    gap: 9px;
    justify-content: center;
  }
  .mockup-tabs:has(> button:nth-child(3):not([hidden])) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .mockup-tabs button {
    width: 100%;
    min-width: 0;
  }
}

/* Keep every action inside one control group on the same shape system.
   Primary and secondary buttons still use color to show hierarchy. */
.upload-document .lowres-actions > button,
.upload-document .submit-actions > button,
.upload-document .submit-actions .draft-action > button,
.upload-document .mockup-actions > button,
.mockup-actions > button {
  box-sizing: border-box;
  min-height: 48px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 999px !important;
}
.upload-document .lowres-actions > .primary-button,
.upload-document .submit-actions > .primary-button,
.upload-document .submit-actions .draft-action > .primary-button,
.mockup-actions > .primary-button,
.mockup-actions #mockup-finish {
  border-radius: 999px !important;
}
@media (max-width: 760px) {
  .upload-document .lowres-actions > button,
  .upload-document .submit-actions > button,
  .upload-document .submit-actions .draft-action > button,
  .mockup-actions > button {
    min-height: 42px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* The confirmation studio now uses the same green atmosphere and translucent
   card surfaces as Upload Studio, Template Library, and Render Studio. */
.upload-document .mockup-page {
  background:
    radial-gradient(ellipse at 14% 12%, rgb(201 255 70 / 48%), transparent 32rem),
    radial-gradient(ellipse at 88% 10%, rgb(41 130 78 / 32%), transparent 34rem),
    linear-gradient(120deg, #a9d696 0%, #d8f29d 52%, #8fc68e 100%);
}
.upload-document .mockup-view-toolbar,
.upload-document .mockup-sidebar,
.upload-document .mockup-canvas-wrap {
  border-color: #719c73aa;
  background: rgb(249 255 241 / 88%);
  box-shadow: 0 18px 40px rgb(49 95 61 / 10%);
}
.upload-document .mockup-canvas-wrap {
  background:
    radial-gradient(circle at 18% 14%, rgb(255 255 255 / 25%) 0%, rgb(255 255 255 / 5%) 42%, rgb(255 255 255 / 0%) 82%),
    linear-gradient(135deg, #f7f8f5 0%, #e8ece8 46%, #f1f3ef 100%);
}

/* Upload flow headers stay in normal document flow, matching the other pages. */
.upload-document .site-header,
.upload-document .mockup-page-header {
  position: relative;
  top: auto;
}
.upload-document .hero > div {
  width: 100%;
}
.orders-document .site-header {
  position: relative;
  top: auto;
}
.orders-document .orders-intro {
  max-width: 1040px;
  margin: 0 auto;
  padding: 76px 0 30px;
  text-align: center;
}
.orders-document .orders-intro > p:not(.eyebrow) {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.orders-document .order-search-form {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.orders-document .orders-local-note {
  text-align: center;
}
.orders-document .orders-header .site-context {
  display: block;
  margin: 0 0 0 auto;
  color: #356343;
  font: 600 10px/1 Outfit, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .orders-document .orders-intro {
    padding-top: 48px;
  }
  .orders-document .orders-header .site-context {
    display: none;
  }
}

/* Keep the mobile submission dock readable: two secondary actions share a row,
   while the primary preview action gets the full width like the desktop dock. */
@media (max-width: 760px) {
  .upload-document .submit-bar {
    right: 10px;
    bottom: 10px;
    width: min(320px, calc(100vw - 20px));
    padding: 12px;
    border-radius: 18px;
  }
  .upload-document .submit-bar > div:first-of-type {
    min-width: 0;
  }
  .upload-document .submit-bar h2 {
    max-width: 100%;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .upload-document .submit-bar .design-set-status {
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .upload-document .submit-bar .submit-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 7px;
  }
  .upload-document .submit-bar .submit-actions > #add-design-set,
  .upload-document .submit-bar .submit-actions > .draft-action,
  .upload-document .submit-bar .submit-actions > #submit-button {
    min-width: 0;
    width: 100%;
  }
  .upload-document .submit-bar .submit-actions > #submit-button {
    grid-column: 1 / -1;
    order: initial;
  }
  .upload-document .submit-bar .submit-actions > button,
  .upload-document .submit-bar .draft-action > button {
    min-height: 38px;
    padding: 8px 6px;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .upload-document .submit-bar.is-collapsed {
    width: 62px;
    min-height: 39px;
    padding: 4px;
    border-radius: 999px;
  }
}

/* Slim Case: beginners can upload four template regions while the existing
   full-spread path stays available. The split cards are deliberately scoped
   to this one asset so other upload modules keep their current layout. */
.upload-document .asset-item:has(.slimcase-mode-switch) {
  align-items: start;
}
.slimcase-mode-switch,
.slimcase-split-interface {
  grid-column: 1 / -1;
  min-width: 0;
}
.slimcase-mode-switch {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid #dce8d6;
}
.slimcase-mode-heading {
  margin: 0;
  color: #52745a;
  font-size: 12px;
  font-weight: 700;
}
.slimcase-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.slimcase-mode-option {
  min-width: 0;
  cursor: pointer;
}
.slimcase-mode-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.slimcase-mode-option span {
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #b7cbb6;
  border-radius: 10px;
  background: #fffefa;
  color: #496b51;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.slimcase-mode-option:hover span,
.slimcase-mode-option:focus-within span {
  border-color: #78a277;
  transform: translateY(-1px);
}
.slimcase-mode-option input:checked + span {
  border-color: #6e9b70;
  background: #e1f2b8;
  box-shadow: inset 0 0 0 1px #9fbd7b, 0 5px 12px rgb(89 126 76 / 12%);
  color: #23442e;
}
.slimcase-split-interface {
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding: 13px;
  border: 1px solid #c6dcb9;
  border-radius: 14px;
  background: linear-gradient(135deg, #f5fbe9, #edf8df);
}
.slimcase-split-intro,
.slimcase-split-footnote {
  margin: 0;
  color: #5d7463;
  font-size: 11px;
  line-height: 1.6;
}
.slimcase-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.slimcase-split-slot {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 11px;
  border: 1px solid #cbd8c4;
  border-radius: 11px;
  background: rgb(255 254 250 / 88%);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.slimcase-split-slot.is-ready {
  border-color: #78a277;
  background: #f7fce9;
  box-shadow: inset 0 0 0 1px #d5eab4;
}
.slimcase-split-slot-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.slimcase-split-order {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e6f0d7;
  color: #4d7958;
  font: 700 10px/1 Outfit, sans-serif;
}
.slimcase-split-slot-heading b {
  overflow: hidden;
  color: #294a33;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slimcase-split-detail {
  color: #708073;
  font-size: 10px;
  line-height: 1.45;
}
.slimcase-split-detail-size, .slimcase-split-detail-pixels {
  display: block;
}
.slimcase-split-detail-pixels {
  margin-top: 2px;
  white-space: nowrap;
}
.slimcase-split-slot > small {
  color: #708073;
  font-size: 10px;
  line-height: 1.45;
}
.slimcase-split-status {
  min-height: 31px;
  margin: 0;
  overflow: hidden;
  color: #718077;
  font-size: 10px;
  line-height: 1.5;
  text-overflow: ellipsis;
}
.slimcase-split-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.slimcase-split-upload {
  display: grid;
  place-items: center;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 33px;
  padding: 7px 8px;
  border: 1px solid #aebfa9;
  border-radius: 999px;
  background: #fffefa;
  color: #315e3a;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.slimcase-split-upload:hover,
.slimcase-split-upload:focus-within {
  border-color: #6e9b70;
  background: #e9f5cf;
  transform: translateY(-1px);
}
.slimcase-split-upload input {
  display: none;
}
.slimcase-split-remove {
  flex: 0 0 auto;
  min-height: 33px;
  padding: 6px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #a15a5a;
  cursor: pointer;
  font-size: 10px;
}
.slimcase-split-remove:hover,
.slimcase-split-remove:focus-visible {
  background: #fff0ed;
}

@media (max-width: 760px) {
  .slimcase-mode-switch {
    margin-top: 8px;
    padding-top: 10px;
  }
  .slimcase-mode-options,
  .slimcase-split-grid {
    grid-template-columns: 1fr;
  }
  .slimcase-mode-option span {
    min-height: 38px;
  }
  .slimcase-split-interface {
    padding: 11px;
  }
  .slimcase-split-slot {
    padding: 10px;
  }
  .slimcase-split-status {
    min-height: 0;
  }
}

/* Long production notes must wrap inside the phone card instead of widening
   the artwork/audio step and pushing the live preview off-screen. */
@media (max-width: 760px) {
  .upload-document #step-artwork,
  .upload-document #step-audio,
  .upload-document .asset-list,
  .upload-document .asset-items,
  .upload-document .asset-item,
  .upload-document .preview-panel,
  .upload-document .audio-panel,
  .upload-document .audio-skip-action {
    min-width: 0;
    max-width: 100%;
  }
  .upload-document .muted,
  .upload-document .asset-meta,
  .upload-document .preview-notes,
  .upload-document .audio-skip-action small {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .upload-document .preview-stage {
    max-width: 100%;
  }
}

/* Prevent upload rows, file pickers and generated previews from creating a
   second horizontal canvas on narrow phones. */
@media (max-width: 760px) {
  .upload-document .upload-guidance,
  .upload-document .template-downloads,
  .upload-document .product-options,
  .upload-document .disc-settings-grid,
  .upload-document .hub-switch,
  .upload-document .print-effect-switch,
  .upload-document .audio-disc-grid,
  .upload-document .audio-disc-box,
  .upload-document .audio-items,
  .upload-document .audio-item,
  .upload-document .preview-stage {
    min-width: 0;
    max-width: 100%;
  }
  .upload-document .upload-guidance,
  .upload-document .template-downloads,
  .upload-document .asset-item,
  .upload-document .audio-disc-box,
  .upload-document .audio-item,
  .upload-document .preview-panel,
  .upload-document .preview-stage {
    overflow: hidden;
  }
  .upload-document .template-downloads {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .upload-document .asset-select,
  .upload-document .track-info,
  .upload-document .asset-meta,
  .upload-document .track-meta {
    min-width: 0;
  }
  .upload-document .asset-meta,
  .upload-document .track-meta,
  .upload-document .muted,
  .upload-document .selection-note,
  .upload-document .preview-notes {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .upload-document .asset-state {
    min-width: 0;
    max-width: 44%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .upload-document .audio-item {
    grid-template-columns: 26px minmax(0, 1fr) auto;
  }
  .upload-document .audio-upload-button {
    min-width: 0;
    padding-right: 7px;
    padding-left: 7px;
    font-size: 11px;
  }
  .upload-document .option-button-group {
    min-width: 0;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .upload-document .option-button {
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
}

/* Keep preview notes aligned with the full preview panel at every viewport. */
.upload-document .preview-panel,
.upload-document .preview-notes,
.upload-document .preview-actions {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.upload-document .preview-notes {
  overflow-wrap: anywhere;
}

/* Chinese body copy has no spaces to break at. Allow the mobile hero note to
   wrap inside the phone-width shell instead of preserving the desktop keep-all
   rule and widening the page. */
@media (max-width: 760px) {
  .upload-document .hero-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    text-wrap: wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-break: auto;
  }
}

/* On phones the submission panel stays reduced until the user reaches the
   page end. The small control remains available in both states, so an
   intentional collapse cannot be undone by the next scroll event. */
@media (max-width: 760px) {
  .upload-document .submit-bar {
    right: 10px;
    bottom: 10px;
    width: min(320px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    min-width: 0;
    padding: 38px 12px 12px;
    border-radius: 18px;
  }
  .upload-document .submit-bar .submit-bar-peek {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 30px;
    width: auto;
    border: 1px solid #b7cbb6;
    border-radius: 999px;
    padding: 5px 10px;
    background: #fffefa;
    color: var(--ink);
    font: 700 10px/1 inherit;
    cursor: pointer;
  }
  .upload-document .submit-bar .submit-bar-peek:hover,
  .upload-document .submit-bar .submit-bar-peek:focus-visible {
    border-color: #6e9b70;
    background: #e1f2b8;
    outline: none;
  }
  .upload-document .submit-bar .submit-bar-peek span:last-child { font-size: 17px; line-height: .72; }
  .upload-document .submit-bar.is-collapsed {
    width: 74px;
    min-height: 42px;
    padding: 5px;
    border-radius: 999px;
  }
  .upload-document .submit-bar.is-collapsed > div:not(.submit-bar-peek) { display: none; }
  .upload-document .submit-bar.is-collapsed .submit-bar-peek {
    position: static;
    width: 100%;
    min-height: 30px;
    padding: 5px 6px;
  }
  .upload-document .submit-bar:not(.is-collapsed) .submit-bar-peek {
    min-width: 62px;
    color: #315f3b;
  }
}

/* Keep the upload CD controls visually identical to the quick-render controls:
   the same physical thumbnails, labels, active state and laser/white-base copy. */
.upload-document .hub-switch > label { min-width: 0; cursor: pointer; }
.upload-document .hub-switch > label > .hub-option-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 72px;
  padding: 7px 8px;
  border: 1px solid #b7cbb6;
  border-radius: 12px;
  background: #fffefa;
  color: #617566;
  text-align: left;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.upload-document .hub-switch > label > .hub-option-card img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgb(23 36 31 / 18%));
  transition: transform .35s ease, filter .3s ease;
}
.upload-document .hub-switch .hub-option-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.upload-document .hub-switch .hub-option-copy b { font-size: 13px; }
.upload-document .hub-switch .hub-option-copy small { color: #78907e; font-size: 11px; }
.upload-document .hub-switch > label:hover > .hub-option-card,
.upload-document .hub-switch > label:focus-within > .hub-option-card {
  border-color: #6e9b70;
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgb(49 95 59 / 10%);
}
.upload-document .hub-switch input:checked + .hub-option-card {
  border-color: #6e9b70;
  background: #e1f2b8;
  color: #23442e;
  box-shadow: inset 0 0 0 1px #9fbd7b;
}
.upload-document .hub-switch > label:hover > .hub-option-card img,
.upload-document .hub-switch > label:focus-within > .hub-option-card img {
  filter: drop-shadow(0 7px 7px rgb(23 36 31 / 24%));
  transform: rotate(8deg) scale(1.05);
}
.upload-document .print-effect-switch > label { flex: 1 1 0; min-width: 0; cursor: pointer; }
.upload-document .print-effect-switch > label > .effect-option-card {
  display: grid;
  gap: 3px;
  min-height: 52px;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid #b7cbb6;
  border-radius: 12px;
  background: #fffefa;
  color: #617566;
  text-align: center;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.upload-document .print-effect-switch .effect-option-card b { font-size: 12px; }
.upload-document .print-effect-switch .effect-option-card small { color: #78907e; font-size: 10px; }
.upload-document .print-effect-switch > label:hover > .effect-option-card,
.upload-document .print-effect-switch > label:focus-within > .effect-option-card {
  border-color: #6e9b70;
  transform: translateY(-2px);
}
.upload-document .print-effect-switch input:checked + .effect-option-card {
  border-color: #6e9b70;
  background: #e1f2b8;
  color: #23442e;
  box-shadow: inset 0 0 0 1px #9fbd7b;
}

@media (max-width: 760px) {
  .upload-document .hub-switch > label > .hub-option-card { min-height: 68px; grid-template-columns: 48px minmax(0, 1fr); }
  .upload-document .hub-switch > label > .hub-option-card img { width: 46px; height: 46px; }
  .upload-document .print-effect-switch > label { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .upload-document .hub-switch > label > .hub-option-card,
  .upload-document .hub-switch > label > .hub-option-card img,
  .upload-document .print-effect-switch > label > .effect-option-card { transition: none; }
}

/* Use the same reduced submission-bar behavior on desktop and mobile. */
.upload-document .submit-bar .submit-bar-peek {
  position: absolute;
  top: 9px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 30px;
  width: auto;
  border: 1px solid #b7cbb6;
  border-radius: 999px;
  padding: 5px 10px;
  background: #fffefa;
  color: #315f3b;
  font: 700 11px/1 inherit;
  cursor: pointer;
}
.upload-document .submit-bar .submit-bar-peek:hover,
.upload-document .submit-bar .submit-bar-peek:focus-visible {
  border-color: #6e9b70;
  background: #e1f2b8;
  outline: none;
}
.upload-document .submit-bar .submit-bar-peek span:last-child { font-size: 17px; line-height: .72; }
.upload-document .submit-bar:not(.is-collapsed) { padding-top: 46px; }
.upload-document .submit-bar.is-collapsed {
  width: 74px;
  min-height: 42px;
  padding: 5px;
  border-radius: 999px;
}
.upload-document .submit-bar.is-collapsed > div:not(.submit-bar-peek) { display: none; }
.upload-document .submit-bar.is-collapsed .submit-bar-peek {
  position: static;
  width: 100%;
  min-height: 30px;
  padding: 5px 6px;
}

@media (max-width: 760px) {
  .upload-document .submit-bar:not(.is-collapsed) { padding-top: 38px; }
}

/* Order lookup: align the result surface with the search surface and keep the
   green page atmosphere continuous on short/empty states. */
.orders-document { min-height: 100dvh; }
.orders-document .orders-page {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
}
.orders-document .orders-intro {
  width: 100%;
}
.orders-document .order-results {
  width: 100%;
  max-width: 1040px;
  margin-right: auto;
  margin-left: auto;
}
.orders-document .site-credits {
  margin-top: auto;
  padding-top: 34px;
}

/* Upload style selector: keep the three desktop columns stable. The package
   and cover groups finish on the same baseline, while linked page/fold or
   Disc 2 controls always use the reserved third column without reflowing the
   five cover choices. */
@media (min-width: 761px) {
  .upload-document #package-options .option-button.has-visual {
    height: 118px;
    min-height: 118px;
  }

  .upload-document #cover-options .option-button.has-cover-visual {
    height: 76px;
    min-height: 76px;
    padding: 5px 10px;
  }

  .upload-document #cover-options .cover-option-art {
    scale: .88;
  }

  .upload-document .detail-popover:not([hidden]) {
    left: calc(66.666% + 8px);
  }
}