/* Live-app states layered on the V3 night design (ui/styles.css). */
.run-panel{display:grid;gap:18px;text-align:left}
.run-panel h2{margin:0;font-size:clamp(22px,2.4vw,28px)}
.run-panel p{margin:0;color:var(--muted)}
.run-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;margin:0}
.run-stats div{border:1px solid var(--line);border-radius:10px;padding:12px}
.run-stats dt{font-size:13px;color:var(--muted)}
.run-stats dd{margin:2px 0 0;font-size:26px;font-weight:800;color:var(--ink)}
.run-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.run-actions .primary,.run-actions .secondary{flex:1 1 220px;justify-content:center}
.progress{height:10px;border-radius:99px;background:var(--soft);overflow:hidden}
.progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.run-files{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.run-error{border:1px solid #ff7a6b;color:#ffb3a8;border-radius:10px;padding:12px}
.run-note{font-size:13px;color:var(--muted)}
.live-results{max-width:1240px;margin:0 auto;padding:24px clamp(16px,4vw,60px) 64px}
.live-results h2{font-size:clamp(28px,4vw,44px);margin:0 0 6px}
.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:18px}
.live-grid figure{margin:0;background:var(--surface);border-radius:10px;overflow:hidden}
.live-grid img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.live-grid figcaption{padding:6px 8px;font-size:12px;color:var(--muted)}
.unlock-card{margin-top:28px;border:1px solid var(--accent);border-radius:14px;padding:22px;display:grid;gap:12px}
.unlock-card h3{margin:0;font-size:24px}
.unlock-card p{margin:0;color:var(--muted)}
.site-footer a{color:inherit}
/* V3 styles target direct children of .upload-zone; the idle state is wrapped. */
#upload-idle>svg{display:block;width:37px;height:37px;stroke:var(--accent);stroke-width:1.5;margin:0 auto 18px}
#upload-idle>p{font-size:.82rem;color:var(--muted);margin-top:9px}
#upload-idle>p.free-message{color:var(--accent);font-weight:600;margin-top:15px;font-size:.8rem}
@media (max-width:760px){#upload-idle>svg{width:31px;height:31px;margin-bottom:13px}#upload-idle>p{font-size:.78rem}}
.run-actions .secondary,.unlock-card .secondary{background:transparent;color:var(--ink);border:1.5px solid var(--accent);box-shadow:none}
.run-actions .secondary:hover{background:var(--soft)}
.run-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px;color:var(--muted)}
.run-steps li::before{content:'○';display:inline-block;width:1.4em;color:var(--line)}
.run-steps li.active{color:var(--ink)}
.run-steps li.active::before{content:'◐';color:var(--accent)}
.run-steps li.done{color:var(--ink)}
.run-steps li.done::before{content:'✓';color:var(--accent)}
.run-note a{color:var(--accent)}
.album-preview{width:min(1200px,96vw);height:92vh;max-width:none;max-height:none;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);overflow:hidden}
.album-preview[open]{display:grid;grid-template-rows:auto 1fr}
.album-preview::backdrop{background:rgba(0,0,0,.7)}
.album-preview header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.album-preview nav{display:flex;gap:6px;flex-wrap:wrap}
.album-preview nav button{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:99px;padding:6px 12px;cursor:pointer}
.album-preview nav button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.album-preview iframe{width:100%;height:100%;border:0;background:#fff}
.album-teaser .theme-preview{cursor:pointer}
html{scroll-behavior:smooth}
#how,#faq,#albums,#your-photos{scroll-margin-top:24px}
.run-panel h2:focus{outline:none}
.run-actions.stacked{flex-direction:column;align-items:stretch}
.run-actions.stacked>*{flex:none;width:100%}
.run-actions.pair>*{flex:1 1 0;min-width:0}
.run-panel .text-button{align-self:center;justify-self:center}
.link-button{background:none;border:0;padding:0;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}
.run-warn{border:1px solid #c9a227;color:#f1dd91;border-radius:10px;padding:12px;font-size:14px}
.unlock-strip{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.unlock-strip p{margin:0;color:var(--muted)}
.unlock-strip b{color:var(--ink)}
.upload-zone.dragging{border-style:solid;border-color:var(--accent);background:var(--soft)}
.album-preview iframe{background:#0c1010}
.album-preview header{gap:12px}
.preview-actions{display:flex;gap:8px;align-items:center}
.preview-actions .primary,.preview-actions .secondary{min-height:40px;padding:8px 16px}
.preview-actions .text-button{min-height:40px;padding:8px 10px;font-size:1.1rem;color:var(--ink)}
.unlock-dialog{width:min(460px,92vw);border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);padding:28px;position:relative}
.unlock-dialog::backdrop{background:rgba(0,0,0,.7)}
.unlock-dialog h2{margin:0 0 4px;font-size:28px}
.unlock-dialog .price{margin:0 0 16px;color:var(--muted)}
.unlock-dialog .price b{color:var(--accent);font-size:22px;margin-right:4px}
.unlock-dialog .perks{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:8px;font-size:15px}
.unlock-dialog .perks li::before{content:'✓';color:var(--accent);margin-right:8px}
.unlock-dialog .wide{width:100%;justify-content:center}
.unlock-dialog .run-note{font-size:13px;color:var(--muted);margin:10px 0 0}
.dialog-x{position:absolute;top:12px;right:12px;background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer;padding:6px}
.waiting{display:flex;gap:10px;align-items:center;margin:0}
.success{color:var(--accent);font-weight:700;margin:0 0 12px}
.spinner{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:760px){.album-preview{width:100vw;height:100dvh;border-radius:0}.album-preview header{padding:10px}.preview-actions{width:100%}.preview-actions>*{flex:1}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.spinner{animation:none}}
.run-actions.pair>*{white-space:nowrap}
@media (max-width:760px){.run-actions.pair>*{padding-inline:10px;font-size:.85rem}}
body[data-plan=paid] .trial-top{border-color:var(--accent);color:var(--accent)}
.own-album{display:grid;gap:10px;justify-items:start;border:1px solid var(--accent);border-radius:12px;padding:16px;margin-bottom:20px}
.own-album p{margin:0}
.restore{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.restore summary{cursor:pointer;color:var(--muted);font-size:14px}
.restore form{display:flex;gap:8px;margin-top:10px}
.restore input{flex:1;min-width:0;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px;font:inherit}
.restore .secondary{min-height:42px;padding:8px 14px}
.pricing-section{max-width:1240px;margin:0 auto;padding:56px clamp(16px,4vw,60px)}
.pricing-section h2{font-size:clamp(32px,5vw,56px);margin:0 0 24px;letter-spacing:-.02em}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:16px}
.price-card{border:1px solid var(--line);border-radius:14px;padding:24px;background:var(--surface)}
.price-card.featured{border-color:var(--accent)}
.price-card h3{margin:0;font-size:20px}
.price-amount{font-size:40px;font-weight:800;margin:8px 0 12px}
.price-amount small{font-size:15px;font-weight:500;color:var(--muted)}
.price-card ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--muted)}
.price-card li::before{content:'✓';color:var(--accent);margin-right:8px}
#pricing{scroll-margin-top:24px}
.guides-section{max-width:1240px;margin:0 auto;padding:24px clamp(16px,4vw,60px) 48px}
.guides-section h2{font-size:28px;margin:0 0 12px}
.guides-section ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px 24px}
.guides-section a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.run-panel h2.working{display:flex;align-items:center;gap:12px}
.run-panel h2.working .spinner{width:22px;height:22px;border-width:3px;flex:none}
.progress.live{height:14px;position:relative}
.progress.live span{background:linear-gradient(90deg,var(--accent) 0%,#f4ffbf 50%,var(--accent) 100%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:0 0}}
.progress-pct{margin:-8px 0 0;font-weight:800;font-size:22px;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.progress.live span{animation:none}}
.album-steps{margin:0;padding-left:20px;display:grid;gap:4px;font-size:14px;color:var(--muted)}
.album-steps b{color:var(--ink)}