/* The public page and Studio use the exact same component. */
.creator-profile,.creator-profile *{box-sizing:border-box}
.creator-profile{--cp-accent:#e88fc1;position:relative;isolation:isolate;width:100%;max-width:520px;min-height:100svh;margin:auto;color:#fff;background:#09090b;text-align:center;font-family:"DM Sans",system-ui,sans-serif;overflow:clip;box-shadow:0 25px 100px #0008;-webkit-tap-highlight-color:transparent}
.creator-profile::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#09090bde,#09090bf2),var(--cp-art);background-size:cover;background-position:center}
.creator-profile a{color:inherit;text-decoration:none}
.creator-profile button{font:inherit;cursor:pointer}
.creator-profile :is(a,button):focus-visible,.cp-lightbox button:focus-visible{outline:3px solid var(--cp-accent,#e88fc1);outline-offset:4px}
.cp-hero{position:relative;width:100%;height:460px;height:clamp(350px,112vw,520px);max-height:68svh;min-height:320px;overflow:hidden}
.cp-hero>img,.cp-hero-art{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.cp-hero-art{background-image:linear-gradient(#0000,#0006),var(--cp-art);background-position:center;background-size:cover}
.cp-hero:after{content:"";position:absolute;inset:28% 0 0;background:linear-gradient(transparent,#09090b22 20%,#09090bc9 65%,#09090b);pointer-events:none}
.cp-identity{position:absolute;z-index:1;bottom:16px;left:22px;right:22px}
.cp-identity h1{font-family:"Outfit",system-ui,sans-serif;font-size:clamp(30px,8vw,39px);font-weight:800;letter-spacing:-1.1px;line-height:1.15;margin:0;overflow-wrap:anywhere;text-shadow:0 2px 22px #0008}
.cp-handle{font-size:14px;line-height:1.5;color:#c8c7ce;margin:7px 0 0;overflow-wrap:anywhere}
.cp-badge{display:inline-flex;vertical-align:middle;margin-left:8px;width:24px;height:24px;color:#ab6bfa;filter:drop-shadow(0 2px 7px #ad6cff55);transform:translateY(-2px)}.cp-badge svg{width:100%;height:100%}
/* Inline creator connection form. Never simulates successful delivery. */
.cp-connect-form{position:relative;margin:0 0 22px;text-align:left}
.creator-profile .cp-connect{display:flex;align-items:center;gap:4px;width:100%;padding:5px;min-height:60px;background:#fff;color:#777482;border:1px solid #e2dce8;border-radius:99px;transition:box-shadow .25s,border-color .25s}
.cp-connect:focus-within{box-shadow:0 0 0 4px #b884e52b;border-color:#b491cf}
.cp-connect-input{flex:1;width:0;min-width:0;border:0;outline:0;background:transparent;color:#302936;padding:12px 8px 12px 14px;font:400 16px/1.2 "DM Sans",system-ui,sans-serif;border-radius:99px}
.cp-connect-input::placeholder{color:#9a9eac;opacity:1}.cp-connect-input[readonly]{color:#70647c}
.creator-profile .cp-connect-button{flex:none;display:flex;align-items:center;justify-content:center;gap:9px;background:#96919c;color:#fff;padding:4px 4px 4px 14px;border:0;border-radius:99px;font-size:14px;font-weight:700;white-space:nowrap;transition:background .25s,transform .2s;min-height:46px;cursor:pointer}
.creator-profile .cp-connect-button:hover:not(:disabled){background:#81748c}.creator-profile .cp-connect-button:active:not(:disabled){transform:scale(.97)}
.cp-connect-avatar{position:relative;width:38px;height:38px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#32283e;flex:none}.cp-connect-avatar img{width:100%;height:100%;object-fit:cover;transition:opacity .2s}.cp-connect-avatar>span:not(.cp-connect-spinner){font-size:18px}
.cp-connect-spinner{display:none;position:absolute;inset:8px;border:2px solid #ffffff40;border-top-color:white;border-radius:50%;animation:cp-spin .7s linear infinite}.cp-connect-check{display:none;position:absolute;inset:8px;width:22px;height:22px;fill:none;stroke:white;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.cp-connect-form[data-state=sending] .cp-connect-button{background:#9773b9;cursor:wait}.cp-connect-form[data-state=sending] .cp-connect-avatar>img,.cp-connect-form[data-state=success] .cp-connect-avatar>img,.cp-connect-form[data-state=sending] .cp-connect-avatar>span:not(.cp-connect-spinner),.cp-connect-form[data-state=success] .cp-connect-avatar>span:not(.cp-connect-spinner){opacity:0}.cp-connect-form[data-state=sending] .cp-connect-spinner{display:block}
.cp-connect-form[data-state=success] .cp-connect{border-color:#b28ad1;box-shadow:0 0 0 4px #a56ed51c}.cp-connect-form[data-state=success] .cp-connect-button{background:#9161b8;cursor:default}.cp-connect-form[data-state=success] .cp-connect-check{display:block;animation:cp-check .4s ease-out}.cp-connect-form[data-state=success] .cp-connect-avatar{background:#a275c4}
.cp-connect-status{font-size:11px;line-height:1.5;color:#ccb4e0;margin:8px 12px 0;overflow-wrap:anywhere}.cp-connect-status:empty{display:none}.cp-connect-form[data-state=error] .cp-connect-status{color:#efb6c8}.cp-connect-note{color:#8e8897;font-size:10px;line-height:1.5;margin:9px 12px 0}.cp-connect-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@keyframes cp-spin{to{transform:rotate(360deg)}}@keyframes cp-check{from{opacity:0;transform:scale(.4) rotate(-20deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@media(max-width:360px){.cp-connect-input{padding-left:10px;font-size:16px}.creator-profile .cp-connect-button{font-size:12px;gap:6px;padding-left:10px}.cp-connect-avatar{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){.cp-connect-form *{animation:none!important;transition:none!important}}
.cp-avatar{width:92px;height:92px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;border:2px solid #ffffff75;background:#302332;font-size:36px;overflow:hidden}
.cp-avatar img,.cp-mini img{width:100%;height:100%;object-fit:cover}
.cp-content{padding:0 18px max(28px,env(safe-area-inset-bottom));position:relative;background:linear-gradient(#09090b,transparent 150px)}
.cp-bio{white-space:pre-line;overflow-wrap:anywhere;font-size:14px;line-height:1.65;color:#d6d4db;max-width:390px;margin:0 auto 20px;padding:0 8px}
.cp-socials{display:flex;flex-wrap:wrap;justify-content:center;gap:13px;margin:6px 0 26px}
.cp-social{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:50%;background:#222126;border:1px solid #ffffff20;transition:transform .2s,filter .2s;box-shadow:0 5px 16px #0003}
.cp-social svg{width:26px;height:26px}.cp-social-instagram{background:radial-gradient(circle at 25% 100%,#ffdc80,#f77737 24%,#d62976 53%,#962fbf 76%,#4f5bd5)}
.cp-social-telegram{background:#259ed5}.cp-social-youtube{background:#f02828}.cp-social-facebook{background:#2278ee}.cp-social-onlyfans,.cp-social-fansly{background:#00a8e9}
.cp-links{display:grid;gap:16px}
.cp-card{position:relative;display:flex;align-items:center;justify-content:center;min-height:84px;padding:22px 52px;border:1px solid #ffffff21;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--cp-accent) 24%,#141216),#151419);box-shadow:0 8px 26px #0003;transform:translateZ(0);transition:transform .22s,box-shadow .22s,border-color .22s}
.cp-card-photo{aspect-ratio:1.72;align-items:flex-end;padding:24px 34px;min-height:180px}
.cp-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.cp-card-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(#0001 20%,#0004 50%,#000d);pointer-events:none}
.cp-card-title{position:relative;z-index:1;font-size:17px;font-weight:700;line-height:1.3;overflow-wrap:anywhere;text-shadow:0 1px 8px #0005}
.cp-card-symbol{position:absolute;z-index:1;left:14px;top:14px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#15121999;backdrop-filter:blur(8px)}
.cp-card-symbol svg{width:18px;height:18px}.cp-card:not(.cp-card-photo) .cp-card-symbol{top:calc(50% - 15px)}
.cp-card-arrow{position:absolute;z-index:1;right:15px;bottom:20px;color:#ffffffb3;font-size:19px}
.cp-gallery{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 12px;margin-top:24px;scrollbar-width:thin;scrollbar-color:#ffffff33 transparent}
.cp-thumb{flex:0 0 calc((100% - 30px)/4);aspect-ratio:.8;padding:0;border:1px solid #ffffff26;border-radius:13px;background:#242028;overflow:hidden;scroll-snap-align:start;transition:transform .2s}
.cp-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.cp-age{margin:28px 0 0;color:#aaa5b2;font-size:10px;font-weight:600;letter-spacing:2px}
.cp-footer{padding-top:28px;font-size:12px;font-weight:800;letter-spacing:3px;color:#ddd7e3}.cp-footer span{color:var(--cp-accent);padding-left:6px}
.cp-sticky{position:fixed;top:0;left:50%;width:100%;max-width:520px;transform:translate(-50%,-105%);display:flex;align-items:center;gap:12px;padding:12px 20px;background:#0b0a0ee8;backdrop-filter:blur(20px);border-bottom:1px solid #ffffff14;z-index:5;text-align:left;transition:transform .25s;font-weight:700;font-size:15px}
.cp-sticky span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-scrolled .cp-sticky{transform:translate(-50%,0)}
.cp-mini{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:#332638}
.cp-preview{min-height:560px;border-radius:16px}.cp-preview .cp-sticky{display:none}.cp-preview .cp-hero{height:400px;max-height:none;min-height:300px}.cp-preview .cp-identity h1{font-size:32px}.cp-preview .cp-content{padding-inline:15px}
.cp-lightbox{position:fixed;inset:0;z-index:10000;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;color:#fff;background:#08080bed;overflow:hidden;--cp-accent:#e88fc1}
.cp-lightbox::backdrop{background:#050507dd;backdrop-filter:blur(20px)}
.cp-lightbox[open]{display:grid;grid-template-rows:72px minmax(0,1fr) 70px;animation:cp-appear .2s ease-out}
.cp-lightbox-bg{position:absolute;inset:-40px;z-index:-1;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(35px) brightness(.3);opacity:.6}
.cp-lightbox-top{display:flex;align-items:center;justify-content:space-between;padding:16px max(18px,env(safe-area-inset-right));gap:16px}
.cp-lightbox-status{font:500 13px system-ui,sans-serif;color:#ddd}
.cp-lightbox button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff35;border-radius:50%;color:white;background:#15151a9e;font:24px system-ui;cursor:pointer;backdrop-filter:blur(8px)}
.cp-lightbox-stage{position:relative;display:grid;place-items:center;min-height:0;touch-action:pan-y pinch-zoom;user-select:none}
.cp-lightbox-image{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;animation:cp-photo-in .28s ease-out}
.cp-lightbox-prev,.cp-lightbox-next{position:absolute;top:calc(50% - 22px)}.cp-lightbox-prev{left:16px}.cp-lightbox-next{right:16px}
.cp-lightbox-dots{display:flex;align-items:center;justify-content:center;gap:6px;padding-bottom:env(safe-area-inset-bottom)}
.cp-lightbox-dots button{width:28px;height:44px;border:0;background:none;backdrop-filter:none}.cp-lightbox-dots button:after{content:"";width:6px;height:6px;border-radius:50%;background:#ffffff55;transition:background .2s,transform .2s}.cp-lightbox-dots button[aria-current=true]:after{background:#fff;transform:scale(1.35)}
.cp-lightbox-error{position:absolute;max-width:260px;text-align:center;font:14px/1.5 system-ui}.cp-lightbox-error[hidden]{display:none}
@keyframes cp-appear{from{opacity:0}to{opacity:1}}@keyframes cp-photo-in{from{opacity:.2;transform:scale(.98) translateY(8px)}to{opacity:1;transform:none}}
@media(hover:hover){.cp-card:hover{transform:translateY(-3px);border-color:#ffffff55;box-shadow:0 16px 35px #0006}.cp-card:hover img{transform:scale(1.045)}.cp-social:hover,.cp-thumb:hover{transform:translateY(-3px);filter:brightness(1.12)}}
.cp-card:active,.cp-social:active,.cp-thumb:active{transform:scale(.97)}
@media(min-width:720px){.profile-body{padding:36px 20px;background:#0c0b10}.profile-body>.creator-profile{border-radius:24px;border:1px solid #ffffff18}.cp-hero{height:520px}.cp-content{padding-inline:24px}.cp-sticky{border-radius:0 0 16px 16px}}
@media(prefers-reduced-motion:reduce){.creator-profile *,.cp-lightbox,.cp-lightbox *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Fixed card ratio keeps the selected framing identical at every screen size. */
.creator-profile .cp-card-photo{min-height:0;aspect-ratio:1.72}

.creator-profile .cp-hero{height:auto;aspect-ratio:1/1.12;min-height:0;max-height:none}.cp-hero>img,.cp-hero>.cp-hero-art{position:absolute;inset:0}

.cp-sticky-identity{display:flex;align-items:center;min-width:0;gap:6px}.cp-sticky-name{min-width:0}.cp-sticky .cp-badge{flex:0 0 20px;width:20px;height:20px;margin:0;transform:none;overflow:visible}

/* Keep the badge beside the name, with space reserved even on narrow screens. */
.cp-identity h1{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}.cp-display-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cp-identity h1 .cp-badge{flex:0 0 24px;margin:0;transform:none}.cp-sticky-identity{flex:0 1 auto;max-width:calc(100% - 46px)}

/* Keep short galleries centered; long galleries rotate without duplicated photos. */
.creator-profile .cp-gallery{overflow:visible;display:block;scroll-snap-type:none}
.cp-gallery-viewport{overflow:hidden;min-width:0;border-radius:14px;touch-action:pan-y}
.cp-gallery-track{display:flex;gap:10px;will-change:transform}
.cp-gallery-centered .cp-gallery-track{justify-content:center}
.creator-profile .cp-carousel{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;gap:9px;position:relative}
.cp-gallery-arrow{width:34px;height:44px;border:1px solid #ffffff30;border-radius:18px;color:#fff;background:linear-gradient(145deg,#6d438e,#282031);font-size:29px;line-height:1;cursor:pointer;box-shadow:0 4px 16px #0004;transition:background .2s,transform .2s}
.cp-gallery-arrow:hover{background:#81549f;transform:scale(1.06)}
.cp-gallery-arrow:focus-visible,.cp-thumb:focus-visible{outline:2px solid var(--cp-accent);outline-offset:2px}
.cp-gallery-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:520px){.cp-carousel .cp-thumb{flex-basis:calc((100% - 20px)/3)}.creator-profile .cp-carousel{grid-template-columns:30px minmax(0,1fr) 30px;gap:6px}.cp-gallery-arrow{width:30px}}
@media(prefers-reduced-motion:reduce){.cp-gallery-track,.cp-gallery-arrow{transition:none!important}}