/* ── PimpstarAI · ✨ Bot-Gen Wizard ──────────────────────────────── */
.ps-bg-ov{position:fixed; inset:0; z-index:1300; background:rgba(6,4,10,.84); backdrop-filter:blur(6px); overflow-y:auto; padding:26px 14px 60px}
.ps-bg-ov[hidden]{display:none}
.ps-bg-modal{position:relative; max-width:860px; margin:0 auto; background:var(--card,#150d1e); border:1px solid var(--border2,#3a2850); border-radius:20px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6)}
.ps-bg-x{position:absolute; top:14px; right:14px; z-index:5; width:34px; height:34px; border-radius:10px; border:1px solid var(--border2,#3a2850); background:rgba(0,0,0,.35); color:var(--text,#f0e6f5); cursor:pointer; font-size:15px}
.ps-bg-x:hover{border-color:var(--pink,#ff3d8b)}
.ps-bg-hero{padding:34px 32px 26px; background:radial-gradient(120% 140% at 0% 0%, rgba(var(--brand-rgb,255,61,139),.22), transparent 55%), linear-gradient(160deg, rgba(var(--brand-rgb,255,61,139),.12), rgba(120,60,200,.08)); border-bottom:1px solid var(--border,#2a1c3a)}
.ps-bg-hero.slim{padding:26px 32px 20px}
.ps-bg-badge{display:inline-block; font-family:var(--fm,monospace); font-size:10px; letter-spacing:2px; font-weight:700; color:var(--pink,#ff3d8b); border:1px solid rgba(var(--brand-rgb,255,61,139),.4); border-radius:999px; padding:4px 11px; margin-bottom:12px}
.ps-bg-hero h1{margin:0 0 6px; font-size:26px; font-weight:800; letter-spacing:-.5px}
.ps-bg-hero p{margin:0; color:var(--mid,#b09cc4); font-size:13.5px; max-width:560px; line-height:1.55}
.ps-bg-body{padding:22px 32px 30px}
.ps-bg-label{display:block; font-family:var(--fm,monospace); font-size:10px; letter-spacing:1.6px; font-weight:700; color:var(--dim,#7a6a8e); margin:18px 0 8px}
.ps-bg-label:first-child{margin-top:0}
.ps-bg-opt{color:var(--dim,#7a6a8e); font-weight:400; letter-spacing:.5px; text-transform:none}
.ps-bg-desc{width:100%; min-height:110px; resize:vertical; background:rgba(0,0,0,.25); border:1px solid var(--border2,#3a2850); border-radius:12px; color:var(--text,#f0e6f5); font:inherit; font-size:13.5px; line-height:1.55; padding:12px 14px}
.ps-bg-desc:focus{outline:none; border-color:var(--pink,#ff3d8b)}
.ps-bg-chips{display:flex; flex-wrap:wrap; gap:8px}
.ps-bg-chip{padding:9px 14px; border-radius:11px; border:1px solid var(--border2,#3a2850); background:transparent; color:var(--mid,#b09cc4); cursor:pointer; font:600 13px inherit; transition:.13s}
.ps-bg-chip.sm{padding:7px 12px; font-size:12px; text-transform:capitalize}
.ps-bg-chip:hover{color:var(--text,#f0e6f5)}
.ps-bg-chip.on{color:var(--pink,#ff3d8b); background:rgba(var(--brand-rgb,255,61,139),.13); border-color:rgba(var(--brand-rgb,255,61,139),.45)}
/* style picture-cards */
.ps-bg-styles{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px}
.ps-bg-stylecard{position:relative; padding:0; border:2px solid var(--border2,#3a2850); border-radius:13px; overflow:hidden; background:rgba(0,0,0,.25); cursor:pointer; display:flex; flex-direction:column; transition:border-color .15s, box-shadow .15s, transform .15s}
.ps-bg-stylecard:hover{border-color:rgba(var(--brand-rgb,255,61,139),.55); transform:translateY(-2px)}
.ps-bg-stylecard.on{border-color:var(--pink,#ff3d8b); box-shadow:0 0 0 3px rgba(var(--brand-rgb,255,61,139),.25)}
.ps-bg-stylecard.on::before{content:'✓'; position:absolute; top:6px; left:6px; z-index:3; width:20px; height:20px; border-radius:50%; background:var(--pink,#ff3d8b); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.45)}
.ps-bg-stylecard.tuned::after{content:'✦'; position:absolute; top:6px; right:7px; z-index:3; font-size:11px; color:#7fe9c0; text-shadow:0 1px 4px rgba(0,0,0,.7)}
.ps-bg-styleimg{position:relative; display:block; aspect-ratio:4/5; overflow:hidden}
.ps-bg-styleimg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.ps-bg-stylelabel{font:600 10.5px inherit; padding:6px 4px 7px; text-align:center; color:var(--mid,#b09cc4); background:var(--card,#150d1e); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ps-bg-stylecard.on .ps-bg-stylelabel{color:var(--pink,#ff3d8b)}
/* gradient fallbacks — shown while the sample loads or if generation is off */
.sty-anime{background:linear-gradient(135deg,#ff3d8b,#7c3aed)}
.sty-retroanime{background:linear-gradient(135deg,#f97316,#0d9488)}
.sty-semireal{background:linear-gradient(135deg,#a855f7,#312e81)}
.sty-painterly{background:linear-gradient(135deg,#b45309,#7f1d1d)}
.sty-watercolor{background:linear-gradient(135deg,#67e8f9,#fda4af)}
.sty-comic{background:linear-gradient(135deg,#facc15,#dc2626)}
.sty-render3d{background:linear-gradient(135deg,#38bdf8,#64748b)}
.sty-darkfantasy{background:linear-gradient(135deg,#1e1b2e,#5b21b6)}
.sty-photo{background:linear-gradient(135deg,#94a3b8,#1e3a5f)}
.ps-bg-opts{display:flex; flex-wrap:wrap; gap:10px}
.ps-bg-check{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--border2,#3a2850); border-radius:12px; font-size:13px; color:var(--text,#f0e6f5); cursor:pointer; background:rgba(255,255,255,.02)}
.ps-bg-check em{font-style:normal; font-size:10.5px; color:var(--dim,#7a6a8e)}
.ps-bg-check input{accent-color:var(--pink,#ff3d8b)}
.ps-bg-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:24px}
.ps-bg-btn{padding:11px 20px; border-radius:12px; border:1px solid var(--border2,#3a2850); background:transparent; color:var(--text,#f0e6f5); cursor:pointer; font:700 13.5px inherit; transition:.13s}
.ps-bg-btn.ghost{color:var(--mid,#b09cc4)}
.ps-bg-btn.ghost:hover{color:var(--text,#f0e6f5)}
.ps-bg-btn.primary{background:linear-gradient(135deg, var(--pink,#ff3d8b), #c026d3); border-color:transparent; color:#fff}
.ps-bg-btn.primary:hover{filter:brightness(1.1)}
/* result cards */
.ps-bg-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.ps-bg-card{border:1px solid var(--border,#2a1c3a); border-radius:14px; background:rgba(255,255,255,.02); overflow:hidden; display:flex; flex-direction:column}
.ps-bg-card.span2{grid-column:1 / -1}
/* three-take picker */
.ps-bg-cands{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%}
.ps-bg-cand{position:relative; aspect-ratio:3/5; border:2px solid var(--border2,#3a2850); border-radius:12px; overflow:hidden; cursor:pointer; background:rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; transition:border-color .15s, box-shadow .15s}
.ps-bg-cand:hover{border-color:rgba(var(--brand-rgb,255,61,139),.55)}
.ps-bg-cand.sel{border-color:var(--pink,#ff3d8b); box-shadow:0 0 0 3px rgba(var(--brand-rgb,255,61,139),.25)}
.ps-bg-cand.sel::after{content:'✓'; position:absolute; top:8px; left:8px; width:24px; height:24px; border-radius:50%; background:var(--pink,#ff3d8b); color:#fff; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.4)}
.ps-bg-cand-in{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.ps-bg-cand-in img, .ps-bg-cand-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; max-height:none}
.ps-bg-cand-in .ps-bg-spin{padding:0}
.ps-bg-cand-re{position:absolute; bottom:8px; right:8px; z-index:3; width:30px; height:30px; border-radius:9px; border:1px solid var(--border2,#3a2850); background:rgba(10,7,16,.7); backdrop-filter:blur(3px); color:var(--text,#f0e6f5); cursor:pointer; font-size:14px}
.ps-bg-cand-re:hover{color:var(--pink,#ff3d8b); border-color:var(--pink,#ff3d8b)}
.ps-bg-err.sm{font-size:11px; padding:8px; margin:8px}
.ps-bg-card-h{display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:12px 14px; font-weight:700; font-size:13.5px; border-bottom:1px solid var(--border,#2a1c3a)}
.ps-bg-card-h span{font-family:var(--fm,monospace); font-size:10px; letter-spacing:1px; color:var(--dim,#7a6a8e); font-weight:400}
.ps-bg-card-body{padding:12px; min-height:150px; display:flex; align-items:center; justify-content:center}
.ps-bg-card-foot{padding:0 12px 12px; display:flex; justify-content:flex-end}
.ps-bg-img{max-width:100%; border-radius:10px; display:block}
.ps-bg-img.portrait{max-height:340px}
.ps-bg-img.wide{width:100%}
.ps-bg-premise{width:100%; min-height:130px; resize:vertical; background:rgba(0,0,0,.25); border:1px solid var(--border2,#3a2850); border-radius:10px; color:var(--text,#f0e6f5); font:inherit; font-size:13px; line-height:1.55; padding:10px 12px}
.ps-bg-premise:focus{outline:none; border-color:var(--pink,#ff3d8b)}
.ps-bg-mini{padding:7px 12px; border-radius:9px; border:1px solid var(--border2,#3a2850); background:transparent; color:var(--mid,#b09cc4); cursor:pointer; font:600 12px inherit}
.ps-bg-mini:hover{color:var(--pink,#ff3d8b); border-color:var(--pink,#ff3d8b)}
.ps-bg-spin{display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--mid,#b09cc4); font-size:12.5px; padding:22px 0}
.ps-bg-ring{width:34px; height:34px; border-radius:50%; border:3px solid rgba(var(--brand-rgb,255,61,139),.2); border-top-color:var(--pink,#ff3d8b); animation:psbgspin .8s linear infinite}
@keyframes psbgspin{to{transform:rotate(360deg)}}
.ps-bg-wait{color:var(--dim,#7a6a8e)}
.ps-bg-err{font-size:12.5px; line-height:1.5; color:#ff9aa6; background:rgba(255,93,108,.08); border:1px solid rgba(255,93,108,.3); border-radius:10px; padding:10px 12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
/* studio "Generate" button (sits above the artwork slots) */
.ps-genart-btn{display:inline-flex; align-items:center; gap:7px; margin:2px 0 14px; padding:9px 16px; font-size:12.5px; border-radius:11px; background:linear-gradient(135deg, rgba(var(--brand-rgb,255,61,139),.18), rgba(120,60,200,.14)); border:1px solid rgba(var(--brand-rgb,255,61,139),.4); color:var(--pink,#ff3d8b); cursor:pointer; font-weight:700; transition:.13s}
.ps-genart-btn:hover{filter:brightness(1.15); transform:translateY(-1px)}
@media(max-width:560px){.ps-bg-hero{padding:26px 20px 20px}.ps-bg-hero h1{font-size:21px}.ps-bg-body{padding:18px 20px 24px}}
/* background-mode sub toggle */
.ps-bg-subopts{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px; padding:9px 12px; border:1px dashed var(--border2,#3a2850); border-radius:11px}
.ps-bg-subopts[hidden]{display:none}
.ps-bg-subopts-l{font-family:var(--fm,monospace); font-size:10px; letter-spacing:1.2px; color:var(--dim,#7a6a8e); text-transform:uppercase}
/* generation cost bar */
.ps-bg-costbar{margin-top:16px; font-size:12.5px; color:var(--mid,#b09cc4); text-align:right; min-height:18px}
.ps-bg-cost-n{font-weight:800; color:var(--gold,#ffc740)}
.ps-bg-cost-n.low{color:#ff8a94}
.ps-bg-cost-dim{color:var(--dim,#7a6a8e)}
.ps-bg-cost-low{color:#ff8a94; font-weight:600}
.ps-bg-err.sm{font-size:11px; padding:8px; margin:8px}
/* premium combo styles */
.ps-bg-prem{position:absolute; top:5px; left:6px; z-index:3; font-size:11px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.ps-bg-stylecard.on .ps-bg-prem{top:28px}
.ps-bg-stylecard.locked{opacity:.75}
.ps-bg-stylecard.locked .ps-bg-styleimg{filter:grayscale(.5) brightness(.75)}
.ps-bg-lock{position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; font-size:22px; background:rgba(6,4,10,.35); text-shadow:0 2px 8px rgba(0,0,0,.8)}
.ps-bg-chip.dim{opacity:.5}
/* ── viewport-bounded wizard: modal capped to the screen, content scrolls inside ── */
.ps-bg-ov{display:flex; align-items:center; justify-content:center; overflow:hidden; padding:20px 12px}
.ps-bg-modal{display:flex; flex-direction:column; width:100%; max-height:calc(100dvh - 40px)}
.ps-bg-box{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain}
@media(max-width:820px){
  .ps-bg-ov{display:block; overflow-y:auto; padding:18px 10px 50px}
  .ps-bg-modal{max-height:none}
  .ps-bg-box{overflow:visible}
}