/* Pantalla de preparación. Los mismos tokens de material y color de los tres temas. */
.choose[data-sample=true] .selection-person{top:20%;height:70%;object-fit:cover;object-position:center top;mask-image:linear-gradient(#000 0%,#000 90%,transparent 100%)}
:root .choose[data-sample=true] .selection-preview:after{background:linear-gradient(var(--stage-top) 0%,color-mix(in srgb,var(--stage-top) 90%,transparent) 17%,transparent 20%,transparent 70%,var(--stage-bottom) 95%)}
.choose[data-sample=true] .look-selectors{top:64%}
.choose[data-sample=true] .look-selector{height:12.6cqw;min-height:44px}
.choose[data-sample=true] #surprise{display:none}
.choose[data-sample=true] .actions{bottom:4%}
:root .processing{display:block;padding:0;isolation:isolate;overflow:hidden;color:var(--ink);background:linear-gradient(145deg,var(--stage-top),var(--stage-bottom))}
.processing #flow-scene{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.processing .flow-background,.processing .flow-image{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:none}
.processing:after{display:none}
:root .processing>h1{position:absolute;top:3.8%;left:7%;right:7%;margin:0;z-index:2;color:var(--stage-ink);font-family:var(--heading);font-size:8.6cqw;line-height:1.08;font-weight:450;letter-spacing:-.04em;white-space:pre-line}
.flow-mode{position:absolute;top:14.6%;left:7%;right:7%;z-index:2;margin:0;color:var(--stage-ink);font-size:3.4cqw;line-height:1.3}
.flow-card{position:absolute;bottom:15%;left:5%;right:5%;z-index:2;padding:4cqw;border-radius:6cqw;border:1px solid var(--surface-edge);background:var(--surface);box-shadow:var(--surface-shadow);backdrop-filter:var(--refraction);-webkit-backdrop-filter:var(--refraction)}
.flow-summary{font-size:4.6cqw;line-height:1.3;font-weight:500;margin:0 0 2cqw;color:var(--ink)}
.flow-message{font-size:3.5cqw;line-height:1.4;color:var(--muted);margin:0}
.processing .flow-actions{position:absolute;bottom:4%;left:5%;right:5%;z-index:2;display:grid;grid-template-columns:1fr 1.4fr;gap:2.3cqw}
.flow-actions .button{border-radius:8cqw;padding:3cqw 2cqw;font-size:4cqw;min-height:54px;background:var(--surface);color:var(--ink);border:1px solid var(--surface-edge);box-shadow:var(--surface-shadow)}
:root .flow-actions .primary{background:var(--cta);color:var(--cta-ink)}
.flow-mark{display:inline-block;vertical-align:middle;flex-shrink:0;width:3.5cqw;height:3.5cqw;border:2px solid var(--accent);border-right-color:transparent;border-radius:50%;margin-right:2cqw}
.processing[data-state=loading] .flow-mark{animation:flow-spin 1s linear infinite}
.processing:not([data-state=loading]) .flow-mark{border-right-color:var(--accent)}
.flow-image:not([src]),.flow-background:not([src]){visibility:hidden}
#preview-generation{width:100%;font-size:16px;min-height:50px;background:var(--surface);color:var(--ink);border:1px solid var(--surface-edge);border-radius:26px;margin:8px 0 0}
#settings .sample-hint{font-size:12px;color:var(--muted);margin:8px 0 0;line-height:1.4}
[data-effects=light] .flow-background{filter:blur(10px) grayscale(1)}
[data-effects=light] .flow-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface-strong)}
@keyframes flow-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.processing[data-state=loading] .flow-mark{animation:none}}
@media(prefers-reduced-transparency:reduce){.flow-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface-strong)}}
.flow-orbit{display:none}
.processing[data-job] .flow-orbit{display:block;width:36px;height:36px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-top:2px solid var(--accent);border-radius:50%;margin:0 0 14px;box-shadow:inset 0 1px 7px #ffffff30,0 1px 10px #2437300d}
.processing[data-job][data-state=loading] .flow-orbit{animation:flow-spin 1.6s linear infinite}
.processing[data-job][data-state=ready] .flow-orbit{border:2px solid var(--accent);position:relative}
.processing[data-job][data-state=ready] .flow-orbit:after{content:'';position:absolute;width:13px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);left:9px;top:10px}
.processing[data-state=error] .flow-orbit{display:none}
#flow-retry{margin-top:16px;min-height:48px;padding:10px 24px;border:1px solid var(--surface-edge);border-radius:28px;background:var(--surface);box-shadow:var(--surface-shadow);color:var(--ink);font:500 16px var(--heading)}
.flow-actions .button:disabled{opacity:.65;cursor:default}
@media(prefers-reduced-motion:reduce){.processing[data-job] .flow-orbit{animation:none}}