:root { color-scheme: dark; font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; background: #10251f; color: #f5f4ec; font-synthesis: none; --muted: #a8b9ae; --accent: #d3f05c; --line: rgba(245,244,236,.15); }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, textarea { font: inherit; }
button, summary { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.step-panel h1:focus { outline: none; }
[hidden] { display: none !important; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; clip: rect(0,0,0,0); white-space: nowrap; }
.shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.brand-lockup { align-items: center; color: #f7f5ec; display: inline-flex; font-size: 1.2rem; font-weight: 800; letter-spacing: -.06em; text-decoration: none; }
.brand-dot { background: var(--accent); border-radius: 50%; height: .58rem; margin-right: .4rem; width: .58rem; }
.eyebrow { color: var(--accent); font-family: "DM Mono", monospace; font-size: .72rem; letter-spacing: .08em; margin: 0 0 12px; }
.button { align-items: center; border: 1px solid transparent; border-radius: 7px; display: inline-flex; font-size: .9rem; font-weight: 800; gap: 14px; justify-content: center; min-height: 46px; padding: 12px 20px; }
.button.primary { background: var(--accent); color: #10251f; }
.button.primary:hover { background: #e0f786; }
.button.outline { background: transparent; border-color: var(--line); color: #f5f4ec; }
button:disabled { cursor: not-allowed; opacity: .4; }
.text-button { background: transparent; border: 0; color: var(--muted); font-size: .86rem; min-height: 44px; padding: 8px 0; }
.text-button:hover { color: #f5f4ec; }
input, textarea { background: #10251f; border: 1px solid var(--line); border-radius: 6px; color: #f5f4ec; padding: 13px; width: 100%; }
textarea { line-height: 1.6; resize: vertical; }
.field-label { display: block; font-size: .85rem; font-weight: 600; margin: 18px 0 8px; }
.input-note { color: var(--muted); font-size: .8rem; line-height: 1.6; margin: 9px 0 0; }
.login-view { align-content: center; display: grid; gap: 36px; justify-items: center; min-height: 100vh; padding: 48px 0; text-align: center; }
.login-card { width: min(100%, 450px); }
.login-card h1 { font-size: clamp(3rem, 7vw, 4.8rem); letter-spacing: -.075em; line-height: 1; margin: 0; }
.login-card h1 em { color: var(--accent); font-family: Georgia, serif; font-weight: 400; }
.login-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; margin: 24px 0; }
.login-form { text-align: left; }
.login-form label { display: block; font-size: .84rem; margin-bottom: 8px; }
.password-row { display: flex; gap: 8px; }
.password-row input { min-width: 0; }
.form-error { color: #ffb5a0; font-size: .84rem; min-height: 1.4em; }
.login-footnote { color: var(--muted); font-size: .78rem; margin: 0; }
.topbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 16px 0; }
.studio { margin: 40px auto 80px; max-width: 940px; }
.step-nav { margin: 0 auto 28px; max-width: 680px; }
.step-nav ol { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; }
.step-nav button { align-items: center; background: transparent; border: 0; border-radius: 7px; color: var(--muted); display: flex; flex-wrap: wrap; font-size: .86rem; gap: 9px; padding: 12px; text-align: left; width: 100%; }
.step-nav button[aria-current="step"] { background: #263b2c; color: #f5f4ec; }
.step-nav button:disabled { opacity: .7; }
.step-nav button[aria-current="step"]:disabled { cursor: default; opacity: 1; }
.step-number { align-items: center; background: #23382d; border-radius: 50%; display: inline-flex; flex-shrink: 0; font-family: "DM Mono", monospace; font-size: .8rem; height: 27px; justify-content: center; width: 27px; }
[aria-current="step"] .step-number { background: var(--accent); color: #10251f; }
.step-nav button[data-complete="true"]:not([aria-current]) .step-number { color: var(--accent); }
.step-state { display: none; }
.step-panel { background: #18332b; border: 1px solid var(--line); border-radius: 12px; margin: auto; max-width: 680px; padding: clamp(24px, 5vw, 40px); }
.step-panel h1 { font-size: clamp(1.8rem, 4vw, 2.35rem); font-weight: 700; letter-spacing: -.055em; line-height: 1.15; margin: 0; }
.step-intro { color: var(--muted); font-size: .95rem; line-height: 1.6; margin: 12px 0 26px; max-width: 550px; }
.upload-zone { align-items: center; background: #122920; border: 1px dashed #769349; border-radius: 8px; display: flex; height: 250px; justify-content: center; overflow: hidden; text-align: center; }
.upload-zone:hover, .upload-zone.dragging { background: #20372a; border-color: var(--accent); }
#upload-empty { color: var(--muted); display: grid; font-size: .84rem; gap: 8px; }
#upload-empty strong { color: #f5f4ec; font-size: 1rem; }
.upload-icon { color: var(--accent); font-size: 2rem; margin-bottom: 4px; }
#source-preview { height: 100%; object-fit: contain; width: 100%; }
.upload-caption { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.upload-caption .input-note { margin: 0; }
.upload-caption .text-button { font-size: .78rem; }
.source-details { color: #dceea3; font-size: .85rem; line-height: 1.6; margin: 14px 0; }
.source-details[data-state="preparing"]::before { animation: pulse 1.5s ease-in-out infinite; background: var(--accent); border-radius: 50%; content: ""; display: inline-block; height: 7px; margin-right: 9px; width: 7px; }
.source-details[data-state="error"] { color: #ffb5a0; }
.optional-section { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 18px; }
.optional-section summary { color: #d4dfd7; font-size: .86rem; line-height: 1.6; min-height: 28px; }
.step-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin-top: 32px; }
#step-1 .step-actions { justify-content: flex-end; }
.action-note { margin: 12px 0 0; text-align: right; }
#step-2 { max-width: 880px; }
.review-layout { align-items: start; display: grid; gap: 30px; grid-template-columns: 1fr 1fr; }
.review-preview img { background: #10251f; border-radius: 7px; display: block; max-height: 340px; object-fit: contain; width: 100%; }
#review-prompt { background: #10251f; border-radius: 7px; font-size: .95rem; line-height: 1.7; margin: 0; overflow-wrap: anywhere; padding: 24px; }
.review-controls h2 { font-size: .92rem; font-weight: 700; margin: 0 0 12px; }
.subject-list { display: grid; gap: 10px; }
.subject-option { align-items: start; background: #203b30; border-radius: 6px; cursor: pointer; display: flex; gap: 11px; padding: 13px; }
.subject-option input { accent-color: var(--accent); flex: 0 0 17px; height: 17px; margin: 3px 0 0; padding: 0; width: 17px; }
.subject-option strong { font-size: .83rem; font-weight: 600; line-height: 1.6; }
.subject-option small { color: var(--muted); display: block; font-size: .73rem; margin-top: 3px; }
.priority-list { display: grid; gap: 10px; margin: 16px 0 24px; padding-left: 28px; }
.priority-list li { padding-left: 4px; }
.priority-list li::marker { color: var(--accent); font-weight: 700; }
.priority-list strong { font-size: .85rem; line-height: 1.5; }
.priority-list small { color: var(--muted); display: block; font-size: .75rem; line-height: 1.5; margin-top: 3px; }
.copy-block-list { display: grid; gap: 16px; list-style: none; margin: 18px 0 0; padding: 0; }
.copy-block-list li > span { color: var(--muted); font-size: .72rem; }
.copy-block-list p { font-size: .8rem; line-height: 1.6; margin: 4px 0 0; overflow-wrap: anywhere; }
.exports-panel { max-width: 940px; }
.results-heading { align-items: start; display: flex; gap: 20px; justify-content: space-between; }
.results-heading .button { flex-shrink: 0; }
.results-heading .step-intro { margin-bottom: 0; }
.generation-progress { margin: 28px 0; }
.progress-caption { color: var(--muted); display: flex; font-size: .8rem; gap: 16px; justify-content: space-between; margin-bottom: 10px; }
progress { appearance: none; background: #10251f; border: 0; border-radius: 4px; display: block; height: 6px; overflow: hidden; width: 100%; }
progress::-webkit-progress-bar { background: #10251f; }
progress::-webkit-progress-value { background: var(--accent); transition: width .25s ease; }
progress::-moz-progress-bar { background: var(--accent); }
.results-empty { color: var(--muted); font-size: .86rem; line-height: 1.7; padding: 40px 20px; text-align: center; }
.results-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.result-card { background: #122920; border-radius: 8px; min-width: 0; padding: 10px; }
.result-canvas-wrap { align-items: center; display: flex; height: 190px; justify-content: center; overflow: hidden; }
.result-canvas-wrap canvas { display: block; max-height: 100%; max-width: 100%; object-fit: contain; }
.result-meta { align-items: center; display: flex; gap: 8px; justify-content: space-between; padding: 12px 2px 0; }
.result-meta strong { display: block; font-size: .8rem; }
.result-meta span { color: var(--muted); display: block; font-family: "DM Mono", monospace; font-size: .65rem; margin-top: 4px; }
.result-elements { color: var(--muted); font-size: .7rem; line-height: 1.5; margin: 10px 2px 0; }
.download-one { background: #233d2e; border: 0; border-radius: 5px; color: var(--accent); flex-shrink: 0; font-size: 1rem; height: 44px; width: 44px; }
.generation-status { color: var(--muted); font-size: .84rem; line-height: 1.6; margin: 18px auto 0; max-width: 680px; text-align: center; }
.generation-status:empty { display: none; }
.generation-status[data-error="true"] { color: #ffb5a0; }
.toast-region { bottom: 20px; display: grid; gap: 12px; max-height: calc(100dvh - 40px); overflow-y: auto; pointer-events: none; position: fixed; right: 20px; width: min(440px, calc(100% - 28px)); z-index: 100; }
.failure-toast { align-items: start; background: #20342d; border: 1px solid #c38c7b; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.3); display: flex; gap: 8px; padding: 16px; pointer-events: auto; }
.failure-toast > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.failure-toast strong { color: #ffd0bf; font-size: .94rem; line-height: 1.5; }
.failure-toast p { font-size: .86rem; line-height: 1.5; margin: 8px 0 0; }
.failure-toast .toast-action { color: var(--muted); }
.toast-dismiss { background: transparent; border: 1px solid var(--line); border-radius: 7px; color: var(--text, #f5f4ec); flex-shrink: 0; font-size: 1.4rem; height: 44px; width: 44px; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }
@media (max-width: 640px) {
  .toast-region { bottom: 14px; max-height: calc(100dvh - 28px); right: 14px; }
  .shell { width: calc(100% - 28px); }
  .studio { margin: 24px auto 48px; }
  .step-nav { margin-bottom: 20px; }
  .step-nav ol { gap: 4px; }
  .step-nav button { flex-direction: column; flex-wrap: nowrap; font-size: .73rem; gap: 7px; padding: 10px 4px; text-align: center; }
  .step-panel { padding: 24px 20px; }
  .upload-zone { height: 220px; }
  .review-layout { gap: 24px; grid-template-columns: 1fr; }
  .review-preview img { max-height: 220px; }
  .results-heading { flex-direction: column; }
  .results-heading .button { width: 100%; }
  .results-grid { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-canvas-wrap { height: 150px; }
  .result-meta strong { font-size: .7rem; }
  .result-meta span { font-size: .58rem; }
  .step-actions .button { flex: 1 1 auto; }
  .action-note { text-align: center; }
  .password-row { flex-direction: column; }
}

/* Foreground review uses full borders and proportional image previews. */
#review-source-canvas { width: 100%; height: auto; border-radius: 7px; display: block; }
.foreground-list { display: grid; gap: 18px; margin-top: 16px; }
.foreground-card { border: 1px solid var(--line); border-radius: 8px; padding: 14px; min-width: 0; }
.foreground-heading { display: flex; gap: 10px; align-items: start; font-size: .86rem; }
.foreground-heading input, .layer-review-confirmation input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--accent); }
.layer-preview { background-color: #425249; background-image: conic-gradient(#536259 25%, transparent 0 50%, #536259 0 75%, transparent 0); background-size: 20px 20px; display: block; object-fit: contain; width: 100%; max-height: 240px; margin-top: 12px; border-radius: 5px; }
.layer-state { color: var(--muted); font-size: .78rem; line-height: 1.5; }
.layer-state[data-warning="true"] { color: #ffd0bf; }
.layer-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.layer-actions .text-button { font-size: .75rem; }
.crop-editor { border-top: 1px solid var(--line); padding-top: 10px; }
.crop-editor summary { font-size: .8rem; min-height: 36px; }
.item-adjustments { margin-top: 12px; }
.item-adjustments > summary { cursor: pointer; color: var(--muted); font-size: .8rem; }
.item-adjustments .layer-actions { margin: 12px 0; }
.crop-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 12px 0; }
.crop-fields label { color: var(--muted); font-size: .75rem; }
.crop-fields input { margin-top: 6px; min-width: 0; }
.layer-review-confirmation { display: flex; align-items: start; gap: 12px; font-size: .85rem; line-height: 1.6; margin-top: 24px; }
#step-2 .review-layout { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); }
@media (max-width: 640px) { #step-2 .review-layout { grid-template-columns: 1fr; } }

@media (min-width: 641px) { #step-2 .review-preview { position: sticky; top: 24px; } }

select { font: inherit; width:100%; padding:12px; border:1px solid var(--line); border-radius:6px; background:#10251f; color:#f5f4ec; }
.layer-join { display:flex; align-items:center; gap:8px; font-size:.75rem; color:var(--muted); margin:8px 0; }
.layer-join input { width:16px; height:16px; accent-color:var(--accent); }
#review-source-canvas { touch-action:none; }

.mask-editor { margin-top:16px; border:1px solid var(--line); border-radius:7px; padding:12px; }
.mask-editor input[type=range] { margin:12px 0; padding:0; }
.mask-canvas { touch-action:none; max-height:none; height:auto; cursor:crosshair; }
.mask-editor [aria-pressed=true] { border-color:var(--accent); color:var(--accent); }

.creation-method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0; margin: 24px 0; list-style: none; }
.creation-method li { padding: 18px; border: 1px solid var(--line, #d9ded6); border-radius: 12px; }
.creation-method strong, .creation-method span { display: block; }
.creation-method span { font-size: 13px; line-height: 1.6; margin-top: 8px; opacity: .75; }
.review-status, .result-review, .inspect-format { margin: 12px 16px; }
.review-status { font-size: 12px; font-weight: 700; }
.review-status[data-verdict="reject"], .review-status[data-verdict="unassessable"] { color: #f0c28d; }
.result-review { font-size: 12px; line-height: 1.6; }
.result-review summary { cursor: pointer; }
.result-review ul { padding-left: 18px; }
.failed-format { padding: 20px; font-size: 13px; line-height: 1.6; }
.native-preview { border: 1px solid #cad1c7; border-radius: 16px; padding: 20px; background: #18332b; color: #f5f4ec; max-width: 94vw; width: max-content; max-height: 92vh; }
.native-preview::backdrop { background: #10251fb3; }
.native-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.native-preview-scroll { overflow: auto; max-width: 88vw; max-height: 72vh; }
.native-preview-scroll img { display: block; max-width: none; width: auto; height: auto; }
@media (max-width: 650px) { .creation-method { grid-template-columns: 1fr; gap: 8px; } .creation-method li { padding: 12px; } }

/* Keep persistent failure details visible without covering workspace controls. */
.toast-region { pointer-events: none; }
.failure-toast { pointer-events: none; }
.toast-dismiss { pointer-events: auto; }