:root{--bg:#07040d;--card:#120a20;--card2:#1a0d2e;--line:#2a1c44;--line2:#3b2a5a;--text:#f2ecff;--soft:#d8ccf2;--muted:#9c8fbd;--accent:#9B30FF;--accent2:#c9a0ff;--ok:#86efac}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5}
a{color:#e9d8ff}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:#fff;text-decoration:none;font-weight:800;font-size:17px;padding:17px 26px;border-radius:16px;border:0;font-family:inherit;cursor:pointer}
.btn:hover{filter:brightness(1.12);color:#fff}
.btn.light{background:#fff;color:var(--bg)}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--text)}
.btn.block{display:flex;width:100%}
.eyebrow{margin:0;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent2)}
.muted{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px}
.demo-bar{background:#24123f;color:#e9d8ff;font-size:13px;text-align:center;padding:8px 16px}
/* top nav */
.nav{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.logo{font-weight:900;font-size:17px;text-decoration:none;color:var(--text)}
.logo span{color:var(--accent2)}
/* landing */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:30px 0 60px}
.hero h1{font-size:56px;line-height:1.02;font-weight:900;letter-spacing:-.03em;margin:12px 0 16px}
.hero p.lead{font-size:19px;color:var(--soft);margin:0 0 26px;max-width:520px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.phone{position:relative;border-radius:30px;overflow:hidden;border:1px solid var(--line2);max-width:340px;margin-left:auto;aspect-ratio:9/16}
.phone img{width:100%;height:100%;object-fit:cover}
.phone .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,4,13,.2),rgba(7,4,13,0) 40%,rgba(7,4,13,.95))}
.phone .info{position:absolute;left:18px;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px}
.phone .info b{font-size:30px;font-weight:900;line-height:1}
.pill{display:inline-block;font-size:12px;font-weight:800;padding:6px 10px;border-radius:999px;background:rgba(7,4,13,.6)}
section{padding:56px 0;border-top:1px solid #170e27}
section h2{font-size:36px;line-height:1.1;font-weight:900;letter-spacing:-.02em;margin:10px 0 14px}
section .sub{font-size:17px;color:var(--soft);max-width:640px;margin:0 0 28px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.step-n{width:40px;height:40px;border-radius:12px;background:#24123f;color:var(--accent2);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;margin-bottom:14px}
.card h3{margin:0 0 6px;font-size:19px;font-weight:800}
.card p{margin:0;color:#c3b8dd;font-size:15px}
.big{font-size:64px;font-weight:900;line-height:1;letter-spacing:-.03em}
.price-table{width:100%;border-collapse:collapse;font-size:16px}
.price-table td{padding:14px 0;border-bottom:1px solid var(--line)}
.price-table td:last-child{text-align:right;font-weight:800}
.calc label{display:block;font-size:14px;font-weight:700;margin:16px 0 6px}
.calc input[type=range]{width:100%;accent-color:var(--accent)}
.calc .row{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.calc .result{margin-top:20px;background:var(--card2);border:2px solid var(--accent);border-radius:16px;padding:18px}
.calc .result b{font-size:40px;font-weight:900}
.check{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;font-size:16px}
.check svg{flex:0 0 auto;margin-top:3px}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.gallery div{border-radius:14px;overflow:hidden;aspect-ratio:9/16;position:relative}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery span{position:absolute;left:8px;bottom:8px;font-size:12px;font-weight:800;background:rgba(7,4,13,.75);padding:4px 8px;border-radius:8px}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:10px}
summary{font-weight:800;font-size:16px;cursor:pointer}
details p{margin:10px 0 0;color:#c3b8dd}
.final{text-align:center}
.final h2{font-size:42px}
footer{padding:30px 0 50px;border-top:1px solid #170e27;font-size:13px;color:#8a7bb0;text-align:center}
/* mobile app-like screens */
.screen{max-width:440px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:18px 20px 28px;gap:16px}
.screen h1{margin:0;font-size:30px;line-height:1.1;font-weight:900;letter-spacing:-.01em}
.screen .lead{margin:0;font-size:15px;line-height:1.5;color:#c3b8dd}
.progress{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.progress span{height:4px;border-radius:2px;background:var(--line)}
.progress span.on{background:var(--accent)}
.stepline{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:var(--muted)}
.stepline a{color:var(--muted);text-decoration:none}
.push{margin-top:auto}
.field{background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:13px 14px;color:var(--text);font-size:16px;font-family:inherit;width:100%}
textarea.field{height:90px;resize:none;line-height:1.5}
.lbl{font-size:14px;font-weight:700;margin:0 0 6px;display:block}
.opt{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:16px;font-weight:600;cursor:pointer}
.opt input{width:22px;height:22px;accent-color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:14px;font-weight:700;padding:10px 14px;border-radius:999px;border:1px solid var(--line2);color:var(--soft);background:transparent;font-family:inherit;cursor:pointer}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.tile{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;cursor:pointer}
.tile.active{background:var(--card2);border:2px solid var(--accent)}
.tile .ic{width:48px;height:48px;border-radius:14px;background:#24123f;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.tile b{display:block;font-size:16px}
.tile small{display:block;font-size:13px;color:var(--muted)}
.tile .done{margin-left:auto;display:none}
.tile.ok .done{display:block}
.scene{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px}
.scene img,.scene .ph{width:62px;height:82px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.scene .ph{border:2px dashed #5b4a7d;display:flex;align-items:center;justify-content:center}
.scene .t{flex:1;min-width:0}
.scene .t b{display:block;font-size:15px}
.scene .t small{font-size:12px;color:var(--muted)}
.scene button{font-size:13px;font-weight:800;color:#fff;background:var(--accent);border:0;padding:9px 14px;border-radius:999px;font-family:inherit;cursor:pointer}
.tip{background:#0f0819;border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.5;color:#c3b8dd}
.priceline{display:flex;justify-content:space-between;align-items:baseline}
.priceline p{margin:0;font-size:15px;font-weight:700}
.priceline output{font-size:22px;font-weight:900}
.earn{font-size:13px;color:#c3b8dd;margin:4px 0 0}
.earn b{color:#fff}
/* creator page */
.cp{max-width:480px;margin:0 auto}
.cp-hero{position:relative;height:min(78vh,620px)}
.cp-hero img{width:100%;height:100%;object-fit:cover}
.cp-hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,4,13,.35) 0%,rgba(7,4,13,0) 30%,rgba(7,4,13,.2) 55%,rgba(7,4,13,1) 100%)}
.cp-top{position:absolute;top:14px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center}
.cp-name{position:absolute;left:20px;right:20px;bottom:24px;display:flex;flex-direction:column;gap:10px}
.cp-name h1{margin:0;font-size:44px;line-height:1;font-weight:900;letter-spacing:-.02em}
.cp-name p{margin:0;font-size:16px;color:#e7defa}
.cp-body{padding:4px 20px 0;display:flex;flex-direction:column;gap:12px}
.sub-card{background:var(--card2);border:2px solid var(--accent);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:10px}
.sub-card ul{margin:0;padding-left:18px;color:#d8ccf2;font-size:14px}
.rail{display:flex;gap:10px;overflow-x:auto;padding:0 20px 6px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.vid{flex:0 0 140px;border-radius:14px;overflow:hidden;position:relative;border:0;padding:0;background:none;cursor:pointer;text-align:left;color:var(--text);font-family:inherit}
.vid img{width:140px;height:200px;object-fit:cover}
.vid .cap{position:absolute;inset:auto 0 0 0;padding:8px 10px;background:linear-gradient(180deg,rgba(7,4,13,0),rgba(7,4,13,.92))}
.vid .cap b{display:block;font-size:12px}
.vid .cap small{font-size:11px;color:var(--accent2)}
.howto{margin:26px 20px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;text-align:center}
.howto b{display:block;font-size:22px;font-weight:900}
.howto small{font-size:12px;color:#c3b8dd}
.socials{padding:24px 20px 0;display:flex;justify-content:center;gap:12px}
.socials a{width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center}
/* sheet */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:flex-end;justify-content:center;z-index:20}
.sheet-bg.open{display:flex}
.sheet{background:#120a20;border:1px solid var(--line2);border-radius:22px 22px 0 0;max-width:480px;width:100%;padding:22px 20px 30px;display:flex;flex-direction:column;gap:12px}
.sheet h3{margin:0;font-size:22px;font-weight:900}
.paym{display:flex;flex-direction:column;gap:8px}
.paym button{display:flex;justify-content:space-between;align-items:center;background:#0f0819;border:1px solid var(--line2);border-radius:14px;padding:14px 16px;color:var(--text);font-size:15px;font-weight:700;font-family:inherit;cursor:pointer}
.paym small{color:var(--muted);font-weight:600}
/* chat */
.chat{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto}
.msg{max-width:80%;padding:10px 12px;border-radius:14px;font-size:14px}
.msg.her{align-self:flex-start;background:#24123f;border-radius:14px 14px 14px 4px}
.msg.me{align-self:flex-end;background:var(--accent);border-radius:14px 14px 4px 14px}
.chat-in{display:flex;gap:8px}
.chat-in input{flex:1}
@media (max-width:820px){
 .hero{grid-template-columns:1fr;gap:28px;padding-top:10px}
 .hero h1{font-size:40px}
 .phone{margin:0 auto;max-width:300px}
 .grid3,.grid2{grid-template-columns:1fr}
 .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
 section h2{font-size:30px}
 .final h2{font-size:32px}
 .big{font-size:52px}
}
/* ---- fan side: header, drawer, gate, home rows ---- */
.btn.sm{padding:10px 16px;font-size:14px;border-radius:12px}
.topbar{position:sticky;top:0;z-index:15;background:rgba(7,4,13,.92);backdrop-filter:blur(10px);border-bottom:1px solid #170e27}
.topbar-in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.iconbtn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line2);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.searchbox{flex:1;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:0 12px;max-width:420px;margin:0 auto}
.searchbox input{flex:1;min-width:0;background:transparent;border:0;color:var(--text);font-size:15px;padding:11px 0;font-family:inherit;outline:none}
.topbar-actions{display:flex;gap:8px}
.drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:30;display:none}
.drawer-bg.open{display:block}
.drawer{position:absolute;top:0;left:0;bottom:0;width:min(320px,86vw);background:#0d0717;border-right:1px solid var(--line2);padding:16px 20px;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.drawer a{color:var(--text);text-decoration:none;font-size:17px;font-weight:700;padding:10px 0}
.drawer hr{border:0;border-top:1px solid var(--line);width:100%;margin:8px 0}
.drawer .btn{margin-top:6px}
.gate{position:fixed;inset:0;z-index:50;background:rgba(7,4,13,.97);display:flex;align-items:center;justify-content:center;padding:20px}
.gate-in{max-width:360px;width:100%;display:flex;flex-direction:column;gap:12px;text-align:center}
.home{max-width:1180px;margin:0 auto;padding:18px 0 40px}
.featured{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 16px}
.feat{position:relative;border-radius:22px;overflow:hidden;height:420px;display:block;color:var(--text);text-decoration:none}
.feat img{width:100%;height:100%;object-fit:cover}
.feat .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,4,13,0) 35%,rgba(7,4,13,.95))}
.feat .info{position:absolute;left:20px;right:20px;bottom:20px;display:flex;flex-direction:column;gap:6px}
.feat .info b{font-size:32px;font-weight:900;line-height:1}
.feat .tag{position:absolute;top:14px;left:14px}
.row{margin-top:30px}
.row-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 16px;margin-bottom:12px}
.row-head h2{margin:0;font-size:21px;font-weight:900}
.row-head a{font-size:14px;color:var(--muted);text-decoration:none}
.ccard{flex:0 0 170px;text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:8px}
.ccard .ph{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4}
.ccard .ph img{width:100%;height:100%;object-fit:cover}
.ccard .ph .pill{position:absolute;top:8px;left:8px;font-size:11px}
.ccard b{font-size:15px}
.ccard small{font-size:13px;color:var(--muted)}
.vcard{flex:0 0 150px;text-decoration:none;color:var(--text);position:relative;border-radius:14px;overflow:hidden;aspect-ratio:9/16;display:block}
.vcard img{width:100%;height:100%;object-fit:cover;filter:blur(2px) brightness(.85);transform:scale(1.05)}
.vcard .lockic{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(7,4,13,.7);display:flex;align-items:center;justify-content:center}
.vcard .cap{position:absolute;inset:auto 0 0 0;padding:10px;background:linear-gradient(180deg,rgba(7,4,13,0),rgba(7,4,13,.95))}
.vcard .cap b{display:block;font-size:13px}
.vcard .cap small{font-size:11px;color:var(--accent2)}
.cta-band{margin:36px 16px 0;border-radius:22px;padding:26px;background:linear-gradient(135deg,#2a0f4d,#12081f);border:1px solid #3b2a5a;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.cta-band h2{margin:0;font-size:26px;font-weight:900}
.cta-band p{margin:4px 0 0;color:#d8ccf2}
.chiprow{display:flex;gap:8px;overflow-x:auto;padding:0 16px;margin-top:22px;scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.chiprow a{flex:0 0 auto;text-decoration:none}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;padding:0 16px}
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 20px}
.vgrid .vcard{flex:none;width:auto}
@media (max-width:820px){
 .featured{grid-template-columns:1fr}
 .feat{height:360px}
 .feat:nth-child(2){display:none}
 .searchbox{display:none}
 .topbar-in .logo{margin-right:auto}
 .ccard{flex-basis:140px}
 .vcard{flex-basis:128px}
}
.paym button span{text-align:left}

.gallery .blur img{filter:blur(14px) brightness(.85);transform:scale(1.1)}
.vcard img{filter:blur(14px) brightness(.85)!important;transform:scale(1.1)!important}

/* mid-video frames are already blurred in the canvas; fade them in, dark until ready */
.vcard,.gallery .blur{background:#1a0d2e}
.vcard img[data-mid],.gallery .blur img[data-mid]{filter:none!important;transform:none!important;opacity:0;transition:opacity .4s}
.vcard img[data-mid].ready,.gallery .blur img[data-mid].ready{opacity:1}

/* frames are pre-blurred files taken from the middle of each video */
.vcard img,.gallery .blur img{filter:none!important;transform:none!important;opacity:1!important}
/* featured: portrait cards so photos are not cropped or stretched */
.featured{grid-template-columns:repeat(3,minmax(0,1fr))}
.feat{height:auto;aspect-ratio:9/16;max-height:640px}
.feat img{object-position:center top}
.feat .info b{font-size:28px}
.ccard .ph img,.cp-hero img{object-position:center top}
@media (max-width:820px){
 .featured{display:flex;overflow-x:auto;gap:12px;scrollbar-width:none;scroll-snap-type:x mandatory}
 .featured::-webkit-scrollbar{display:none}
 .feat{flex:0 0 78%;scroll-snap-align:start;height:auto}
 .feat:nth-child(2){display:block}
}

.feat img{object-position:center 30%}
.photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.photos>img,.lockedph{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;display:block}
.lockedph{position:relative;overflow:hidden;border:0;padding:0;cursor:pointer;background:#1a0d2e}
.lockedph img{width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.7);transform:scale(1.2)}
.lockedph span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;color:#fff;font:800 13px Inter,sans-serif}
.progress{grid-template-columns:repeat(7,minmax(0,1fr))}

.pick{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;cursor:pointer}
.pick img{width:48px;height:72px;border-radius:8px;object-fit:cover;flex:0 0 auto}
.pick .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pick .t b{font-size:14px}.pick .t small{font-size:12px;color:var(--muted)}.pick .t small b{color:#fff;font-size:12px}
.pick input{width:22px;height:22px;accent-color:var(--accent);flex:0 0 auto}
.sumbar{position:sticky;bottom:0;background:#0d0717;border:1px solid var(--line2);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:6px;box-shadow:0 -10px 30px rgba(0,0,0,.6)}
.paym button.on{border-color:var(--accent);background:#1a0d2e}
/* ---- chat ---- */
body.chatpage .topbar{display:none}
.cw{max-width:560px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--bg)}
.cw-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);background:#0d0717}
.cw-head img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center top}
.cw-head b{display:block;font-size:16px}
.cw-head small{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.cw-head .iconbtn{color:#fff;text-decoration:none;font-size:20px}
.dot{width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block}
.cw-log{flex:1;overflow-y:auto;padding:16px 12px;display:flex;flex-direction:column;gap:8px}
.cw-log .msg{max-width:82%;font-size:15px;line-height:1.4}
.cw-quick{display:flex;gap:6px;overflow-x:auto;padding:6px 12px;scrollbar-width:none}
.cw-quick::-webkit-scrollbar{display:none}
.cw-quick .chip{flex:0 0 auto;font-size:13px;padding:8px 12px}
.cw-in{display:flex;gap:8px;padding:8px 12px 4px}
.cw-in input{flex:1}
.cw-left{text-align:center;font-size:12px;margin:0;padding:0 0 10px}
.cw-wall{flex-direction:column;gap:8px;margin:8px 12px;padding:14px;border-radius:16px;background:var(--card2);border:2px solid var(--accent)}
.msg.typing{display:flex;gap:4px;padding:12px 14px}
.msg.typing span{width:7px;height:7px;border-radius:50%;background:#c9a0ff;animation:tp 1s infinite}
.msg.typing span:nth-child(2){animation-delay:.15s}.msg.typing span:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,80%,100%{opacity:.25}40%{opacity:1}}
.ppvwrap{padding:6px!important;background:#1a0d2e!important}
.ppv{display:flex;gap:10px;align-items:center}
.ppv img{width:70px;height:110px;border-radius:10px;object-fit:cover}
.ppv-b{display:flex;flex-direction:column;gap:4px}
.ppv-b small{color:var(--accent2);font-size:12px}
/* ---- panel ---- */
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.tabs button{flex:0 0 auto}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.stat b{display:block;font-size:24px;font-weight:900}
.stat small{color:var(--muted);font-size:12px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.vrow{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px}
.vrow img{width:52px;height:78px;border-radius:8px;object-fit:cover;flex:0 0 auto}
.vrow .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.vrow .t b{font-size:14px}.vrow .t small{font-size:12px;color:var(--muted)}
.vrow input[type=number]{width:72px;padding:8px;font-size:14px}
.badge{font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:#24123f;color:#c9a0ff;align-self:flex-start}
.badge.live{background:#14361f;color:#86efac}.badge.wait{background:#3a2a0a;color:#fcd34d}
.switch{position:relative;width:44px;height:26px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:#3b2a5a;border-radius:999px;cursor:pointer;transition:.2s}
.switch span:before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span:before{transform:translateX(18px)}
.pick .pr{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:4px}
.pick .pr input{width:70px;padding:6px 8px;font-size:13px}
.vs{width:100%;border-collapse:collapse;font-size:15px}
.vs th,.vs td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.vs th{font-size:13px;color:var(--muted);font-weight:700}
.vs td:nth-child(3){color:#e9d8ff;font-weight:700}
.vs tr td:first-child{color:var(--muted);font-weight:600}
.homehero{padding:6px 16px 16px}.homehero h1{margin:0;font-size:34px;font-weight:900;letter-spacing:-.02em}.homehero p{margin:6px 0 0;color:#d8ccf2;max-width:640px}

.progress{grid-template-columns:repeat(5,minmax(0,1fr))}
.why1{border:2px solid var(--accent);background:var(--card2)}
.whylist{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:#d8ccf2;font-size:14px;line-height:1.45}
.whylist b{color:#fff}
.whyex{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:12px;background:#0f0819;border-radius:14px;padding:12px;text-align:center}
.whyex div{flex:1}.whyex small{display:block;font-size:11px;color:var(--muted)}.whyex b{font-size:20px;font-weight:900}.whyex span{font-weight:900;color:var(--accent2)}
.scenes-pick{display:flex;flex-direction:column;gap:10px}
.sp{display:grid;grid-template-columns:150px 1fr;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px;transition:border-color .2s}
.sp.on{border:2px solid var(--accent);padding:9px}
.sp-vid{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:9/16;background:#1a0d2e}
.sp-vid video{width:100%;height:100%;object-fit:cover;display:block}
.sp-vid .pill{position:absolute;left:6px;top:6px;font-size:11px}
.sp-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.sp-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.sp-top b{font-size:16px}
.tipbox{background:#0f0819;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.tipbox .eyebrow{font-size:10px}.tipbox b{display:block;font-size:14px;margin-top:2px}.tipbox p{margin:3px 0 0;font-size:13px;color:#c3b8dd;line-height:1.4}
.sp-up{display:flex;align-items:center;gap:8px}.sp-up img{width:36px;height:48px;object-fit:cover;border-radius:6px}
.sp-up label.btn{cursor:pointer}
.sp-money{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}.sp-money b{color:#fff}
.sp-money input{width:64px;padding:5px 8px;font-size:13px;display:inline-block}
@media (max-width:520px){.sp{grid-template-columns:110px 1fr}.whyex b{font-size:17px}}

/* ---------- full-library picker (join step 3, panel) ---------- */
.earn2-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.e2{background:#0f0819;border:1px solid #2a1d42;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px}
.e2 p{margin:0;font-size:14px;line-height:1.45;color:#d8ccf2}
.e2 .e2-you{color:#86efac;font-size:13px}
.e2-i{font-size:22px}
details.why1 summary{list-style:none;cursor:pointer}
details.why1 summary::-webkit-details-marker{display:none}
.pk-tools{display:flex;flex-direction:column;gap:10px;position:sticky;top:56px;z-index:5;background:rgba(7,4,13,.96);padding:10px 0;margin:0}
.pk-tools .chips{display:flex;gap:6px;flex-wrap:wrap}
.pk-tools .chips.scrollx{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.pk-tools .chips.scrollx::-webkit-scrollbar{display:none}
.pk-tools .chip{white-space:nowrap;flex:0 0 auto}
.pk-bulk{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pk-bulk span{flex:1;font-size:13px;min-width:140px}
.tgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:6px 0 10px}
.tcard{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--card2,#140b22);border:2px solid #241638;min-width:0}
.tcard.on{border-color:var(--accent)}
.tcard:focus-visible{outline:2px solid #fff;outline-offset:2px}
.tv{position:relative;display:block;aspect-ratio:9/14;background:#1a0d2e}
.tv video{width:100%;height:100%;object-fit:cover;display:block}
.tv .pill{position:absolute;left:6px;top:6px;font-size:11px}
.tv .pill.new{left:auto;right:6px;background:#16a34a;color:#fff}
.tv .tick{position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);border:2px solid #fff;color:transparent;display:flex;align-items:center;justify-content:center;font-weight:900}
.tcard.on .tick{background:var(--accent);border-color:var(--accent);color:#fff}
.tb{display:flex;flex-direction:column;gap:2px;padding:8px 10px 10px;min-width:0}
.tb b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb small{font-size:11px;color:#b9acd4}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.shot{display:flex;gap:10px;background:#0f0819;border:1px solid #2a1d42;border-radius:14px;padding:10px;opacity:.55}
.shot.need{opacity:1;border-color:#7c3aed}
.shot.done{border-color:#16a34a}
.shot-img{flex:0 0 64px;height:84px;border-radius:10px;background:#1a0d2e;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:24px}
.shot-img img{width:100%;height:100%;object-fit:cover}
.shot-b{display:flex;flex-direction:column;gap:4px;min-width:0}
.shot-b small{color:#c4b5fd;font-size:12px}
.shot.done .shot-b small{color:#86efac}
.shot-b p{margin:0;font-size:12px;line-height:1.4;color:#d8ccf2}
.shot-b .btn{align-self:flex-start}
.pbox{background:#0f0819;border:1px solid #2a1d42;border-radius:14px;padding:12px}
.pbox .chips{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:820px){.pk-tools{position:static}.earn2-g{grid-template-columns:1fr}.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.shots{grid-template-columns:1fr}}

@media (max-width:820px){.sumbar .sb-hide{display:none}.sumbar .earn{font-size:12px}}

/* step 3 v2: three steps, per-scene photo and price */
.earn3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.earn3>div{display:flex;gap:10px;align-items:flex-start}
.earn3 span{font-size:20px;line-height:1.2}
.earn3 p{margin:0;font-size:14px;line-height:1.45;color:#d8ccf2}
.earn3 a{color:#c4b5fd}
.jstep{display:flex;flex-direction:column;gap:4px;border-top:1px solid #241638;padding-top:18px}
.jstep h2{display:flex;align-items:center;gap:10px;font-size:22px;margin:0 0 4px}
.jn{width:30px;height:30px;border-radius:50%;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;flex:0 0 auto}
.mine{display:flex;flex-direction:column;gap:8px}
.mrow{display:flex;gap:10px;align-items:flex-start;background:#0f0819;border:1px solid #2a1d42;border-radius:14px;padding:10px}
.mimg{width:56px;height:80px;border-radius:8px;object-fit:cover;background:#1a0d2e;flex:0 0 auto}
.mb{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mb b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb small{font-size:12px;color:#b9acd4}
.mph{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:2px}
.mph img{width:26px;height:26px;border-radius:6px;object-fit:cover}
.mph .chip{font-size:12px;padding:5px 10px;cursor:pointer}
.mp{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto}
.mpi{display:flex;align-items:center;gap:4px}
.mpi input{width:76px;padding:8px 10px;text-align:right}
.mp small{font-size:12px;color:#86efac;white-space:nowrap}
.mp small.muted{color:#9a8cb8}
@media (max-width:820px){.earn3{grid-template-columns:1fr}}

/* ---------- step 3 v3: guided wizard ---------- */
.wz{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wz li{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 6px;border-radius:12px;background:#120a1f;border:1px solid #2a1d42;font-weight:800;font-size:14px;color:#8f80ad;cursor:pointer}
.wz li span{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#2a1d42;font-size:13px;color:#fff}
.wz li.on{background:var(--accent);border-color:var(--accent);color:#fff}
.wz li.on span{background:#fff;color:var(--accent)}
.wz li.done{color:#86efac;border-color:#166534}
.wz li.done span{background:#16a34a;font-size:0}
.wz li.done span::after{content:'✓';font-size:13px}
.wpart{display:flex;flex-direction:column;gap:12px}
.wpart h1{margin:4px 0 0}
.wpart .lead{margin:0}
.tagadd{display:inline-block;background:var(--accent);color:#fff;border-radius:999px;padding:1px 9px;font-size:.9em}
.lnk{all:unset;cursor:pointer;color:#c4b5fd;font-weight:700;font-size:13px;padding:6px 4px}
.lnk:hover{text-decoration:underline}
/* picker card add button */
.tcard .tadd{margin-top:6px;display:block;text-align:center;border-radius:10px;padding:8px 0;font-weight:800;font-size:13px;background:#24163a;color:#e9e1ff;border:1px solid #3b2a5a}
.tcard .tadd .a2{display:none}
.tcard.on .tadd{background:#16a34a;border-color:#16a34a;color:#fff}
.tcard.on .tadd .a1{display:none}.tcard.on .tadd .a2{display:inline}
.tcard.on{border-color:#16a34a}
.tcard .tick{display:none}
/* photos */
.rules{display:flex;gap:8px;flex-wrap:wrap}
.rules span{background:#120a1f;border:1px solid #2a1d42;border-radius:999px;padding:6px 12px;font-size:13px}
.drop{display:flex;gap:12px;align-items:center;padding:12px;border:2px dashed #7c3aed;border-radius:16px;background:#130a22;cursor:pointer}
.drop:hover{background:#1a0e2e}
.drop.done{border-style:solid;border-color:#16a34a;background:#0c1a12}
.drop-img{flex:0 0 72px;height:96px;border-radius:12px;background:#24163a;display:flex;align-items:center;justify-content:center;overflow:hidden}
.drop-img img{width:100%;height:100%;object-fit:cover}
.drop .plus{font-size:34px;font-weight:300;color:#c4b5fd}
.drop-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.drop-b b{font-size:16px}
.drop-b small{font-size:13px;color:#c4b5fd;font-weight:700}
.drop.done .drop-b small{color:#86efac}
.drop-b .how{font-size:13px;line-height:1.4;color:#b9acd4}
.adv summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none}
.adv summary::-webkit-details-marker{display:none}
.adv[open] summary .muted{display:none}
.ownlist{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-height:420px;overflow-y:auto}
.orow{display:flex;gap:10px;align-items:center;padding:6px;border-radius:12px;background:#0f0819}
.orow .mimg{width:40px;height:56px}
.othumb{width:40px;height:40px;border-radius:8px;object-fit:cover}
/* prices */
.pcard{background:#120a1f;border:1px solid #2a1d42;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}
.pcard.once{border-color:#166534;background:#0c1a12}
.pcard-h{display:flex;gap:12px;align-items:flex-start}
.pcard-h b{font-size:17px;display:block}
.pcard-h small{display:block;font-size:13px;line-height:1.45;color:#b9acd4;margin-top:2px}
.pi{font-size:24px;line-height:1}
.pyou{margin:0;font-size:14px;color:#86efac}
.stepper{display:flex;align-items:center;gap:10px;align-self:flex-start}
.stepper button{width:44px;height:44px;border-radius:12px;border:1px solid #3b2a5a;background:#24163a;color:#fff;font-size:22px;font-weight:800;cursor:pointer}
.stepper button:active{background:var(--accent)}
.stepper output{min-width:100px;text-align:center;font-size:26px;font-weight:900}
.stepper.sm{gap:4px;flex:0 0 auto}
.stepper.sm button{width:34px;height:34px;font-size:18px;border-radius:10px}
.stepper.sm input{width:58px;height:34px;border-radius:10px;border:1px solid #3b2a5a;background:#0f0819;color:#fff;text-align:center;font:inherit;font-weight:800;-moz-appearance:textfield}
.stepper.sm input::-webkit-inner-spin-button,.stepper.sm input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper.sm span{font-size:12px;color:#9a8cb8}
.segs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.segs .muted{font-size:13px;margin-right:2px}
.seg{border:1px solid #3b2a5a;background:#0f0819;color:#e9e1ff;border-radius:10px;padding:8px 12px;font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.seg.on{background:var(--accent);border-color:var(--accent);color:#fff}
.mrow{align-items:center}
.mb small.g{color:#86efac}
.agree{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.5;color:#d8ccf2;padding:12px;border-radius:14px;background:#120a1f;border:1px solid #2a1d42;cursor:pointer}
.agree input{width:22px;height:22px;flex:0 0 auto;margin-top:1px;accent-color:var(--accent)}
.wbar{gap:8px}
.wbar-t{margin:0;font-size:15px}
#next.off{opacity:.55}
@media (max-width:820px){.wz li{font-size:13px;padding:9px 4px}.stepper.sm button{width:30px}.stepper.sm input{width:50px}}
.wpart[hidden]{display:none!important}
.mrow{flex-wrap:wrap}
.mrow .mb{flex:1 1 150px}
@media (max-width:820px){.mrow .stepper.sm{margin-left:66px}}
.mb small.g{white-space:nowrap}