/* ═══════════════════════════════════════════════════════════════
   PimpstarAI — the LabAi skin, consumer edition.
   Editorial Playfair on neon · deep purple-black · magenta orbs ·
   masked grid + scanlines · glow borders · mono micro-labels.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#08000e; --surf:#110018; --card:#17012a; --card2:#1f0035; --card-hi:#2a0042;
  --pink:#ff2d78; --rose:#d946a8; --blush:#ff80c0; --sys:#a98bff;
  --brand-rgb:255,45,120; --sys-rgb:169,139,255;
  --pink-soft:rgba(255,45,120,.10); --pink-dim:rgba(255,45,120,.25);
  --text:#ffe8f4; --mid:#bd7a98; --dim:#6a3858;
  --border:rgba(255,45,120,.12); --border2:rgba(255,45,120,.30);
  --fd:'Playfair Display',serif; --fu:'DM Sans',sans-serif; --fm:'JetBrains Mono',monospace;
  --glow:0 0 30px rgba(255,45,120,.35),0 0 60px rgba(255,45,120,.12);
  --glow-sm:0 0 14px rgba(255,45,120,.28);
  --glow-sys:0 0 16px rgba(169,139,255,.30);
}
*{box-sizing:border-box; margin:0; padding:0}
/* the hidden attribute must ALWAYS win */
[hidden]{display:none !important}

html,body{background:var(--bg); color:var(--text);
  font:15px/1.6 var(--fu)}
body{
  background-image:
    radial-gradient(ellipse 70% 50% at 18% 0%, rgba(192,38,168,.20), transparent 60%),
    radial-gradient(ellipse 50% 40% at 82% 6%, rgba(255,45,120,.13), transparent 55%),
    radial-gradient(ellipse 60% 60% at 50% 100%, rgba(120,20,100,.16), transparent 60%);
  background-attachment:fixed;
}
/* atmosphere: masked neon grid + faint scanlines */
body::before{content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(255,45,120,.035) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,45,120,.035) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 90% 85% at 50% 25%, #000, transparent 80%)}
body::after{content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.08) 2px, rgba(0,0,0,.08) 4px)}
body>*{position:relative; z-index:1}

::selection{background:rgba(var(--brand-rgb),.35)}
button{font:inherit; cursor:pointer}
input,select,textarea{font:inherit; color:var(--text)}
:is(button,input,select,textarea,a,[role="button"]):focus-visible{outline:2px solid var(--pink); outline-offset:2px; border-radius:10px}
@keyframes psPulse{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes psFadeUp{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@keyframes psShimmer{to{background-position:-200% 0}}

/* ── logo: gradient-clipped Playfair + pulsing star ── */
.ps-logo{font-family:var(--fd); font-weight:900; letter-spacing:1px; font-size:21px;
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg, #ff7db0, var(--pink), var(--rose));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.ps-logo::before{content:'✦'; -webkit-text-fill-color:var(--pink); color:var(--pink);
  font-size:.85em; text-shadow:var(--glow-sm); animation:psPulse 3.6s infinite}
.ps-logo span{-webkit-text-fill-color:transparent}
.ps-logo.big{font-size:38px; letter-spacing:2px}

.ps-header{display:flex; align-items:center; gap:16px; padding:14px 26px;
  border-bottom:1px solid var(--border); position:relative; z-index:40; flex:0 0 auto;
  background:rgba(8,0,14,.92); backdrop-filter:blur(16px)}
.ps-tagline{font-family:var(--fm); font-size:10px; color:var(--sys); letter-spacing:2.5px;
  text-transform:uppercase}
.ps-spacer{flex:1}

/* ── buttons ── */
.ps-btn{border-radius:12px; border:1px solid var(--border); background:var(--card);
  color:var(--text); padding:9px 17px; font-weight:700; font-size:13px;
  transition:transform .15s, box-shadow .2s, border-color .15s; text-decoration:none; display:inline-block}
.ps-btn:hover{border-color:var(--border2); box-shadow:var(--glow-sm)}
.ps-btn:active{transform:translateY(1px)}
.ps-btn.primary{background:linear-gradient(135deg, var(--pink), var(--rose)); border:0; color:#fff;
  box-shadow:var(--glow-sm)}
.ps-btn.primary:hover{box-shadow:var(--glow)}
.ps-btn.ghost{background:none}
.ps-btn:disabled{opacity:.5; cursor:default; box-shadow:none}

/* ── 18+ gate ── */
.ps-gate{position:fixed; inset:0; z-index:100; background:rgba(4,0,8,.92);
  backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; text-align:center}
.ps-gate-box{max-width:460px; padding:42px 36px; border:1px solid var(--border2); border-radius:24px;
  background:radial-gradient(120% 120% at 50% 0%, #1f0035 0%, #110018 62%);
  box-shadow:0 30px 90px rgba(0,0,0,.75), var(--glow); animation:psFadeUp .5s ease}
.ps-gate-box p{color:var(--mid); margin:18px 0 24px; font-size:14px}
.ps-gate-actions{display:flex; gap:10px; justify-content:center}

/* ── controls ── */
.ps-controls{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:18px 26px 6px}
.ps-search{flex:1 1 260px; background:var(--surf); border:1px solid var(--border); border-radius:14px;
  padding:12px 17px; font-size:14px; transition:border-color .15s, box-shadow .2s}
.ps-search:focus{border-color:var(--border2); box-shadow:var(--glow-sm); outline:none}
.ps-search::placeholder{color:var(--dim)}
.ps-tags{display:flex; gap:8px; flex-wrap:wrap}
.ps-tag{border:1px solid var(--border); background:var(--card); color:var(--mid);
  border-radius:999px; padding:6px 14px; font-family:var(--fm); font-size:10.5px; letter-spacing:.5px;
  text-transform:uppercase; transition:all .15s}
.ps-tag:hover{border-color:var(--border2); color:var(--text)}
.ps-tag.on{border-color:var(--pink); color:var(--pink); background:var(--pink-soft); box-shadow:var(--glow-sm)}
.ps-sort{background:var(--surf); border:1px solid var(--border); border-radius:12px; padding:10px 12px; font-size:13px}

/* ── grid + cards ── */
.ps-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr));
  gap:20px; padding:20px 26px 60px}
.ps-card{border:1px solid var(--border); border-radius:18px; background:var(--card);
  cursor:pointer; text-align:left; position:relative; padding:0; animation:psFadeUp .4s ease both;
  transition:transform .18s ease, box-shadow .25s ease, border-color .18s}
.ps-card:hover{transform:translateY(-4px); border-color:var(--border2); z-index:30;
  box-shadow:0 14px 40px rgba(0,0,0,.55), var(--glow-sm)}
.ps-card-img{aspect-ratio:3/5; overflow:hidden; background:var(--card2); position:relative;
  border-radius:17px 17px 0 0}
.ps-card-img::after{content:''; position:absolute; inset:auto 0 0 0; height:44%;
  background:linear-gradient(180deg, transparent, rgba(8,0,14,.55)); pointer-events:none}
.ps-card-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease}
.ps-card:hover .ps-card-img img{transform:scale(1.06)}
/* name lives ON the art, LabAi-style, over a bottom veil */
.ps-card-veil{position:absolute; inset:auto 0 0 0; height:58%; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(8,0,14,.42) 45%, rgba(8,0,14,.88))}
.ps-card-onimg{position:absolute; inset:auto 0 0 0; padding:12px 13px 11px; pointer-events:none}
.ps-card-name{font-family:var(--fd); font-weight:700; font-size:17px; letter-spacing:.3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text);
  text-shadow:0 2px 14px rgba(0,0,0,.7)}
.ps-card-meta{display:flex; align-items:center; gap:8px; margin-top:5px;
  font-family:var(--fm); font-size:9px; color:#d8b8ca; letter-spacing:.5px}
.ps-card-body{padding:10px 13px 12px}
.ps-card-tagline{color:var(--mid); font-size:12px; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em}

/* ── hover dossier: flyout BESIDE the card (CrushOn-style) ── */
.ps-peek{position:absolute; top:0; bottom:0; left:calc(100% + 12px);
  width:min(280px, 42vw); z-index:40; display:flex; flex-direction:column;
  background:rgba(10,1,18,.96); backdrop-filter:blur(12px);
  border:1px solid var(--border2); border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.7), var(--glow-sm);
  opacity:0; visibility:hidden; transform:translateX(-8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s}
/* invisible bridge so the pointer survives the gap */
.ps-peek::before{content:''; position:absolute; top:0; bottom:0; left:-14px; width:14px}
.ps-card.peek-left .ps-peek{left:auto; right:calc(100% + 12px); transform:translateX(8px)}
.ps-card.peek-left .ps-peek::before{left:auto; right:-14px}
.ps-card:hover .ps-peek, .ps-card:focus-visible .ps-peek{opacity:1; visibility:visible; transform:none}
.ps-peek-scroll{flex:1; overflow-y:auto; padding:14px 14px 8px; scrollbar-width:thin;
  scrollbar-color:var(--pink-dim) transparent}
.ps-peek-scroll::-webkit-scrollbar{width:6px}
.ps-peek-scroll::-webkit-scrollbar-thumb{background:var(--pink-dim); border-radius:99px}
.ps-peek-name{font-family:var(--fd); font-weight:900; font-size:18px; letter-spacing:.3px;
  background:linear-gradient(135deg, #fff, var(--blush) 75%, var(--pink));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.ps-peek-creator{display:flex; align-items:center; gap:7px; margin-top:6px;
  font-family:var(--fm); font-size:9px; color:var(--mid); letter-spacing:.5px}
.ps-peek-creator img{width:20px; height:20px; border-radius:50%; border:1.5px solid var(--pink-dim)}
.ps-peek-tagline{color:#f0d6e4; font-size:12px; margin-top:9px; line-height:1.5}
.ps-peek-tags{display:flex; gap:5px; flex-wrap:wrap; margin-top:9px}
.ps-peek-sec{margin-top:11px}
.ps-peek-sec b{display:block; font-family:var(--fm); font-size:8.5px; letter-spacing:2px;
  color:var(--pink); margin-bottom:4px; text-shadow:var(--glow-sm)}
.ps-peek-sec p{color:#e5cfdc; font-size:11.5px; line-height:1.55; white-space:pre-wrap; word-break:break-word}
.ps-peek-greet{border-left:2px solid var(--pink); padding:7px 9px; background:var(--card);
  border-radius:0 9px 9px 0; font-style:italic; color:#e5cfdc; font-size:11.5px; line-height:1.55;
  white-space:pre-wrap; word-break:break-word}
.ps-peek-cta{padding:9px 12px 12px; border-top:1px solid var(--border);
  background:linear-gradient(180deg, transparent, rgba(8,0,14,.5))}
.ps-peek-cta .ps-btn{width:100%; font-size:12px; padding:9px 0}
/* touch devices: tap opens detail; the hover layer never appears */
@media (hover:none), (pointer:coarse){ .ps-peek{display:none} }
.ps-nsfw{position:absolute; top:10px; left:10px; background:linear-gradient(135deg, #ff4d4d, #d61f3a);
  color:#fff; font-family:var(--fm); font-size:9px; font-weight:700; letter-spacing:1.5px;
  padding:4px 10px; border-radius:999px; box-shadow:0 0 14px rgba(255,46,46,.4); z-index:2}
.ps-likes{margin-left:auto}
.ps-chip{border:1px solid var(--border); border-radius:999px; padding:3px 9px;
  font-family:var(--fm); font-size:9px; letter-spacing:.5px; color:var(--mid); text-transform:uppercase}

/* ── skeletons + empty ── */
.ps-skel{aspect-ratio:3/5.9; border-radius:18px;
  background:linear-gradient(110deg, var(--card) 40%, var(--card2) 50%, var(--card) 60%);
  background-size:200% 100%; animation:psShimmer 1.3s infinite linear; border:1px solid var(--border)}
.ps-empty{grid-column:1/-1; text-align:center; padding:80px 20px; color:var(--mid)}
.ps-empty b{font-family:var(--fd); color:var(--text); font-size:22px; display:block; margin-bottom:10px}

/* ── overlays + modals ── */
.ps-overlay{position:fixed; inset:0; z-index:80; background:rgba(4,0,8,.72); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:24px}
.ps-modal{background:var(--surf); border:1px solid var(--border2); border-radius:24px;
  width:min(880px, 96vw); max-height:92vh; overflow:auto;
  box-shadow:0 40px 120px rgba(0,0,0,.85), var(--glow); animation:psFadeUp .35s ease}
.ps-modal-head{display:flex; align-items:center; gap:12px; padding:16px 20px;
  border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surf); z-index:2}
.ps-x{margin-left:auto; background:none; border:1px solid var(--border); color:var(--mid);
  border-radius:10px; padding:5px 11px}
.ps-x:hover{border-color:var(--border2); color:var(--text); box-shadow:var(--glow-sm)}

/* ── detail: LabAi profile layout, portrait locked to 768×1280 (3:5) ── */
.ps-detail{display:grid; grid-template-columns:324px 1fr; gap:24px; padding:22px 26px 26px}
.ps-detail-left{display:flex; flex-direction:column; gap:12px; min-width:0}
.ps-detail-port{aspect-ratio:3/5; width:100%; border-radius:18px; overflow:hidden;
  border:1px solid var(--border2); background:var(--card2);
  box-shadow:0 18px 50px rgba(0,0,0,.6), var(--glow)}
.ps-detail-port img{width:100%; height:100%; object-fit:cover; display:block}
.ps-detail-stats{font-family:var(--fm); font-size:10px; color:var(--mid); letter-spacing:1px;
  text-align:center}
.ps-detail-byline{display:flex; align-items:center; gap:11px; justify-content:center;
  border:1px solid var(--border); border-radius:14px; padding:9px 14px; background:var(--card)}
.ps-detail-byline .ps-detail-pfp{width:34px; height:34px; margin:0; border-width:2px;
  border-color:var(--pink); box-shadow:var(--glow-sm)}
.ps-detail-bycol{display:flex; flex-direction:column; gap:1px}
.ps-detail-bylabel{font-family:var(--fm); font-size:8px; letter-spacing:2.5px; color:var(--sys);
  text-shadow:var(--glow-sys)}
.ps-detail-byname{font-family:var(--fd); font-weight:700; font-size:14px; color:var(--text)}
.ps-detail-body{padding:0; min-width:0}
.ps-detail-name{font-family:var(--fd); font-size:32px; font-weight:900; letter-spacing:.5px;
  background:linear-gradient(135deg, #fff, var(--blush) 75%, var(--pink));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  display:flex; align-items:center; gap:12px}
.ps-detail-lead{font-size:15px; color:#f0d6e4; margin-top:10px; line-height:1.55; font-style:italic}
.ps-detail-tags{display:flex; gap:7px; flex-wrap:wrap; margin:14px 0}
.ps-sec{margin-top:18px}
.ps-sec b{display:block; font-family:var(--fm); font-size:10px; letter-spacing:2.5px;
  color:var(--pink); margin-bottom:7px; text-shadow:var(--glow-sm)}
.ps-sec p, .ps-greet{color:#f0d6e4; font-size:13.5px; white-space:pre-wrap; word-break:break-word}
.ps-greet{border:1px solid var(--border); border-left:3px solid var(--pink); border-radius:0 14px 14px 0;
  padding:13px 15px; background:var(--card); font-style:italic; box-shadow:inset 0 0 30px rgba(255,45,120,.04);
  max-height:280px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--pink-dim) transparent}
.ps-greet::-webkit-scrollbar{width:6px}
.ps-greet::-webkit-scrollbar-thumb{background:var(--pink-dim); border-radius:99px}
.ps-detail-actions{display:flex; gap:10px; margin-top:22px}

/* ── uploader ── */
.ps-form{padding:22px 26px; display:flex; flex-direction:column; gap:15px}
.ps-field label{display:block; font-family:var(--fm); font-size:10px; letter-spacing:2px;
  color:var(--sys); margin-bottom:7px; text-transform:uppercase}
.ps-field input[type="text"], .ps-field textarea, .ps-field select{width:100%; background:var(--card);
  border:1px solid var(--border); border-radius:12px; padding:11px 14px; font-size:13.5px;
  transition:border-color .15s, box-shadow .2s}
.ps-field :is(input,textarea):focus{border-color:var(--border2); box-shadow:var(--glow-sm); outline:none}
.ps-field textarea{min-height:86px; resize:vertical}
#upGreeting{min-height:280px; line-height:1.6}   /* opening script — show much more at once */
#upJson{min-height:200px; font-family:var(--fm); font-size:12.5px; line-height:1.55}
.ps-two{display:grid; grid-template-columns:1fr 1fr; gap:15px}
.ps-drop{border:2px dashed var(--pink-dim); border-radius:16px; padding:24px; text-align:center;
  color:var(--mid); cursor:pointer; transition:border-color .15s, box-shadow .2s; font-size:13px}
.ps-drop:hover, .ps-drop:focus-visible{border-color:var(--pink); color:var(--text); box-shadow:var(--glow-sm)}
.ps-drop img{max-width:130px; border-radius:12px; display:block; margin:0 auto 8px}
.ps-check{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--mid)}
.ps-check input{width:18px; height:18px; accent-color:var(--pink)}
.ps-err{color:var(--blush); font-size:12.5px; min-height:1.2em}
.ps-form-actions{display:flex; justify-content:flex-end; gap:10px; padding-top:4px}

.ps-footer{display:none !important;text-align:center; font-family:var(--fm); color:var(--dim); font-size:10px;
  letter-spacing:1px; padding:28px; border-top:1px solid var(--border); text-transform:uppercase}

/* ── hero (asymmetric: one big lead + two stacked minis) ── */
.ps-hero{position:relative; display:grid; grid-template-columns:1.75fr 1fr; gap:14px;
  min-height:clamp(400px, 27vw, 560px); padding:18px 22px; border-bottom:1px solid var(--border)}
.ps-hero:empty{display:none}
/* the lead — the #1 featured bot, full-bleed art */
.ps-hero-lead{position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--border); min-height:clamp(400px, 27vw, 560px)}
.ps-hero-bg{position:absolute; inset:0; background-size:cover; background-position:center 26%; filter:saturate(1.1) brightness(.92)}
.ps-hero.wide .ps-hero-bg{background-position:center 30%}
.ps-hero-lead::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(8,0,14,.92) 0%, rgba(8,0,14,.55) 40%, transparent 74%),
             linear-gradient(0deg, rgba(8,0,14,.72), transparent 48%)}
.ps-hero-in{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:center; padding:0 42px}
.ps-hero-copy{max-width:90%}
.ps-hero-rank{display:inline-block; font-family:var(--fm); font-size:10px; font-weight:700;
  letter-spacing:2px; color:#ffd76a; border:1px solid rgba(255,215,106,.5); border-radius:999px;
  padding:5px 13px; margin-bottom:14px; background:rgba(20,12,4,.55); box-shadow:0 0 16px rgba(255,215,106,.18)}
.ps-hero-name{font-family:var(--fd); font-size:42px; font-weight:900; letter-spacing:.5px; line-height:1.08;
  background:linear-gradient(135deg, #fff, var(--blush) 70%, var(--pink));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 30px rgba(0,0,0,.6))}
.ps-hero-tagline{color:#f0d6e4; margin-top:10px; font-size:15px; max-width:440px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ps-hero-meta{display:flex; gap:8px; align-items:center; margin-top:13px; flex-wrap:wrap}
.ps-hero-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px}
.ps-hero-creator{display:flex; align-items:center; gap:11px}
.ps-hero-pfp{width:44px; height:44px; border-radius:50%; border:2px solid var(--pink); box-shadow:var(--glow-sm); display:block; background:var(--card2)}
.ps-hero-creatorcol{display:flex; flex-direction:column; gap:2px}
.ps-hero-creatorlabel{font-family:var(--fm); font-size:8.5px; letter-spacing:2.5px; color:var(--sys); text-shadow:var(--glow-sys)}
.ps-hero-creatorname{font-family:var(--fd); font-weight:700; font-size:14px; color:var(--text)}
/* the side — two stacked minis */
.ps-hero-side{display:grid; grid-template-rows:1fr 1fr; gap:14px; min-height:clamp(400px, 27vw, 560px)}
.ps-hero-mini{position:relative; border:1px solid var(--border); border-radius:18px; overflow:hidden;
  cursor:pointer; padding:0; background-size:cover; background-position:center 22%; text-align:left; color:var(--text);
  transition:transform .18s ease, border-color .2s ease}
.ps-hero-mini:hover{transform:translateY(-2px); border-color:rgba(var(--brand-rgb,255,45,120),.55)}
.ps-hero-mini:focus-visible{outline:2px solid var(--pink); outline-offset:2px}
.ps-hero-mini::after{content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(8,0,14,.9) 0%, rgba(8,0,14,.25) 55%, transparent 82%)}
.ps-hero-mini-copy{position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; gap:4px; padding:15px 17px}
.ps-hero-mini-kicker{font-family:var(--fm); font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--blush)}
.ps-hero-mini-name{font-family:var(--fd); font-weight:700; font-size:19px; line-height:1.1; filter:drop-shadow(0 2px 12px rgba(0,0,0,.6))}
.ps-detail-pfp{width:26px; height:26px; border-radius:50%; border:1.5px solid var(--pink-dim);
  vertical-align:middle; margin-right:8px; display:inline-block}

/* ── toolbar bits ── */
.ps-switch{display:flex; align-items:center; gap:8px; font-family:var(--fm); font-size:10.5px;
  color:var(--mid); letter-spacing:.5px; cursor:pointer; text-transform:uppercase}
.ps-switch input{width:17px; height:17px; accent-color:var(--pink)}
.ps-adv{display:grid; grid-template-columns:1fr 1fr 260px; gap:20px; padding:16px 26px;
  border-bottom:1px solid var(--border); background:rgba(17,0,24,.75); backdrop-filter:blur(10px)}
.ps-adv-col b{display:block; font-family:var(--fm); font-size:9.5px; letter-spacing:2.5px;
  color:var(--sys); margin-bottom:9px; text-shadow:var(--glow-sys)}
.ps-adv-col.slim{display:flex; flex-direction:column; gap:12px}
.ps-tag.exc.on{border-color:#ff5a5a; color:#ff8f8f; background:rgba(255,90,90,.08); box-shadow:0 0 12px rgba(255,90,90,.2)}
/* advanced filters grouped by the tag library */
.ps-adv-col .ps-tags{flex-direction:column; align-items:stretch; gap:7px}
details.ps-advgroup{border:1px solid var(--border); border-radius:9px; overflow:hidden; background:rgba(0,0,0,.10)}
summary.ps-advgroup-h{cursor:pointer; list-style:none; display:flex; align-items:center; gap:7px; padding:8px 11px; font-family:var(--fm); font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--sys); user-select:none}
summary.ps-advgroup-h::-webkit-details-marker{display:none}
summary.ps-advgroup-h::before{content:'▸'; color:var(--dim); font-size:9px; transition:transform .18s}
details.ps-advgroup[open] > summary.ps-advgroup-h::before{transform:rotate(90deg)}
summary.ps-advgroup-h:hover{background:rgba(255,255,255,.03)}
.ps-advgroup-tags{display:flex; flex-wrap:wrap; gap:6px; padding:2px 11px 11px}

/* ── tag content-class color coding (SFW / NSFW / Warning) ── */
.ps-taglegend{display:flex; gap:14px; margin:0 0 11px; font-family:var(--fm); font-size:10px; letter-spacing:.5px}
.ps-taglegend > span{display:inline-flex; align-items:center; gap:6px; color:var(--dim)}
.ps-taglegend > span::before{content:''; width:9px; height:9px; border-radius:2px; flex:none}
.ps-taglegend .tl-sfw::before{background:#38bdf8}
.ps-taglegend .tl-nsfw::before{background:#ff2e2e}
.ps-taglegend .tl-warn::before{background:#fbbf24}
details.ps-taggroup.tg-sfw, details.ps-advgroup.tg-sfw{border-left:3px solid #38bdf8}
details.ps-taggroup.tg-nsfw, details.ps-advgroup.tg-nsfw{border-left:3px solid #ff2e2e}
details.ps-advgroup.tg-other{border-left:3px solid var(--border2)}
.ps-taggroup.tg-sfw > summary.ps-taggroup-h, .ps-advgroup.tg-sfw > summary.ps-advgroup-h{color:#7dd3fc}
.ps-taggroup.tg-nsfw > summary.ps-taggroup-h, .ps-advgroup.tg-nsfw > summary.ps-advgroup-h{color:#ff8a6a}
.ps-triggroup.tg-warn{border-left:3px solid #fbbf24; padding-left:12px}
.ps-active{display:flex; gap:8px; flex-wrap:wrap; padding:12px 26px 0}
.ps-active:empty{display:none}
.ps-achip{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--pink); color:var(--pink);
  background:var(--pink-soft); border-radius:999px; padding:5px 12px; font-family:var(--fm);
  font-size:10.5px; letter-spacing:.5px; box-shadow:var(--glow-sm)}
.ps-achip.exc{border-color:#ff5a5a; color:#ff8f8f; background:rgba(255,90,90,.08); box-shadow:0 0 12px rgba(255,90,90,.18)}
.ps-achip button{background:none; border:0; color:inherit; font-weight:900; padding:0 2px}

/* ── shelves ── */
.ps-shelf{padding:24px 0 4px}
.ps-shelf-head{display:flex; align-items:baseline; gap:14px; padding:0 26px 12px}
.ps-shelf-title{font-family:var(--fd); font-size:20px; font-weight:700; letter-spacing:.4px}
.ps-shelf-all{color:var(--pink); background:none; border:0; font-family:var(--fm); font-size:10px;
  letter-spacing:1px; text-transform:uppercase}
.ps-shelf-all:hover{text-shadow:var(--glow-sm)}
.ps-shelf-row{display:flex; gap:14px; overflow-x:auto; padding:6px 26px 18px;
  scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--pink-dim) transparent}
.ps-shelf-row::-webkit-scrollbar{height:8px}
.ps-shelf-row::-webkit-scrollbar-thumb{background:var(--pink-dim); border-radius:99px}
.ps-shelf-row .ps-card{flex:0 0 212px; scroll-snap-align:start}

/* ── sensitive tier-B ── */
.ps-card.sens .ps-card-img img{filter:blur(22px) saturate(.7); transform:scale(1.08)}
.ps-card.sens.revealed .ps-card-img img{filter:none}
.ps-sensbadge{position:absolute; top:10px; right:10px; background:rgba(251,191,36,.95); color:#241300;
  font-family:var(--fm); font-size:8px; font-weight:700; letter-spacing:.8px; padding:3px 8px;
  border-radius:999px; z-index:2; box-shadow:0 0 12px rgba(251,191,36,.35)}
.ps-consent{position:absolute; inset:0; display:flex; flex-direction:column; gap:8px; align-items:center;
  justify-content:center; text-align:center; padding:14px; background:rgba(8,0,14,.55); z-index:1}
.ps-consent b{font-family:var(--fm); font-size:11px; letter-spacing:1.5px}
.ps-consent .ps-btn{font-size:11px; padding:7px 13px}

/* ── 🧪 placeholder mode ── */
.ps-demo-notice{margin:14px 26px 0; padding:11px 17px; border:1px dashed rgba(var(--sys-rgb),.55);
  border-radius:12px; color:#d8cbee; font-size:12.5px; background:rgba(var(--sys-rgb),.07)}
.ps-demoribbon{position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:2;
  background:rgba(var(--sys-rgb),.92); color:#120826; font-family:var(--fm); font-size:8.5px;
  font-weight:700; letter-spacing:2px; padding:4px 11px; border-radius:999px;
  box-shadow:var(--glow-sys)}

@media (max-width:680px){
  .ps-detail{grid-template-columns:1fr; padding:16px}
  .ps-detail-left{max-width:280px; margin:0 auto; width:100%}
  .ps-two{grid-template-columns:1fr}
  .ps-header{padding:14px 16px}
  .ps-controls, .ps-grid, #grid, .ps-draftgrid{padding-left:16px; padding-right:16px}
  .ps-hero{grid-template-columns:1fr; padding:14px}
  .ps-hero-in{padding:0 20px}
  .ps-hero-copy{max-width:100%}
  .ps-hero-name{font-size:30px}
  .ps-hero-side{grid-template-rows:none; grid-template-columns:1fr 1fr; min-height:0}
  .ps-adv{grid-template-columns:1fr}
}

/* phones + small tablets: TWO larger cards so more of the portrait shows */
@media (max-width:820px){
  .ps-grid, #grid, .ps-draftgrid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px;
    padding:14px 14px 48px;
  }
  .ps-card-img{aspect-ratio:3/4.4}
  .hub-card{flex:0 0 42vw; max-width:220px}
  .hub-scroller, .hub-creators{padding-left:14px; padding-right:14px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}
@media (pointer:coarse){ .ps-btn{padding:11px 18px} .ps-tag{padding:8px 15px} }

/* ═══ 💬 CHAT — LabAi structure, PimpstarAI skin ═══ */
.psc-root{position:fixed; inset:0; z-index:200; background:var(--bg)}
/* LabAi backdrop: the character image fills the chat, clearly visible, with a
   graduated dark scrim — light at the top where the character reads, deep near
   the messages so white text stays legible. No blur (matches LabAi). */
/* desktop/tablet: the wide published background. The phone swaps to the
   portrait thumbnail in responsive.css — a landscape image crops badly on
   a tall screen. Both URLs are set as vars by pimpstarai-chat.js. */
.psc-bg{position:absolute; inset:0; background-size:cover; background-position:center;
  background-image:var(--bg-wide)}
.psc-bg::after{content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,0,14,.42) 0%, rgba(8,0,14,.60) 46%, rgba(8,0,14,.90) 100%),
    radial-gradient(135% 100% at 50% 0%, transparent 42%, rgba(4,0,8,.45) 100%),
    linear-gradient(90deg, rgba(8,0,14,.28) 0%, transparent 22%, transparent 78%, rgba(8,0,14,.28) 100%)}
.psc-shell{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column}

/* ── two-column chat: main conversation + side info panel ── */
.psc-row{flex:1; display:flex; min-height:0; position:relative}
.psc-main{flex:1; display:flex; flex-direction:column; min-width:0; min-height:0}
.psc-side{width:340px; flex-shrink:0; overflow-y:auto; position:relative;
  background:rgba(10,1,20,.66); backdrop-filter:blur(16px) saturate(1.15);
  border-left:1px solid var(--border2); transition:width .25s ease;
  scrollbar-width:thin; scrollbar-color:var(--pink-dim) transparent}
.psc-side::-webkit-scrollbar{width:7px}
.psc-side::-webkit-scrollbar-thumb{background:var(--pink-dim); border-radius:7px}
.psc-side-inner{padding:20px 18px 30px}
.psc-side-x{display:none}
.psc-side-scrim{display:none}
/* desktop: ⓘ collapses the panel for more chat room */
.psc-root.psc-side-collapsed .psc-side{width:0; border-left:0; overflow:hidden}

/* info panel content */
/* 768x1280 is the native size of the generated portraits (3:5). Matching that
   ratio shows the WHOLE image — a 3:4 box was cropping 20% of the height. */
.psc-info-port{width:100%; aspect-ratio:768/1280; border-radius:16px; overflow:hidden; margin-bottom:14px;
  border:1px solid var(--border2); box-shadow:var(--glow-sm); background:var(--card)}
.psc-info-port img{width:100%; height:100%; object-fit:cover; object-position:center; display:block}
.psc-info-name{font-family:var(--fd); font-weight:900; font-size:22px; line-height:1.12; color:var(--text);
  background:linear-gradient(135deg,#fff,var(--blush) 74%,var(--pink)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.psc-info-genre{font-family:var(--fm); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--mid); margin-top:4px}
.psc-info-tagline{font-size:13px; color:var(--blush); font-style:italic; line-height:1.5; margin:11px 0}
.psc-info-tags{display:flex; gap:6px; flex-wrap:wrap; margin:11px 0}
.psc-info-tag{font-size:10px; border:1px solid var(--border2); border-radius:999px; padding:3px 9px; color:var(--mid)}
.psc-info-creator{font-size:12px; color:var(--mid); margin:9px 0 4px}
.psc-info-creator b{color:var(--pink)}
.psc-info-sec{margin-top:15px; padding-top:13px; border-top:1px solid var(--border)}
.psc-info-lbl{font-family:var(--fm); font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--sys); font-weight:700; margin-bottom:6px}
.psc-info-val{font-size:13px; line-height:1.62; color:var(--text); white-space:pre-wrap; word-break:break-word}

/* drawer — reference layout: title · remembers · ABOUT · CHARACTERS · ENGINE · actions */
.psc-info-title{font-family:var(--fd); font-weight:900; font-size:24px; line-height:1.14; margin:2px 0 10px;
  background:linear-gradient(135deg,#fff,var(--blush) 72%,var(--pink)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.psc-remembers{display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px; margin-bottom:14px;
  background:rgba(255,221,156,.08); border:1px solid rgba(255,221,156,.35); font-family:var(--fm); font-size:9.5px; letter-spacing:.5px; color:#ffdd9c}
.psc-remembers-dot{width:6px; height:6px; border-radius:50%; background:#ffdd9c; box-shadow:0 0 7px #ffdd9c}
.psc-info-block{margin-top:16px}
.psc-info-block>.psc-info-lbl{font-family:var(--fm); font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--sys); font-weight:700; margin-bottom:8px}
.psc-info-about{font-size:13px; line-height:1.6; color:#e9d4e2}
.psc-cc{border:1px solid var(--border); border-left:2px solid var(--pink-dim); border-radius:12px; padding:11px 13px; margin-bottom:8px; background:var(--card)}
.psc-cc-name{font-family:var(--fd); font-weight:700; font-size:15px; color:var(--text); display:flex; align-items:baseline; gap:8px}
.psc-cc-meta{font-family:var(--fm); font-size:9px; letter-spacing:.5px; color:var(--sys); font-weight:400}
.psc-cc-desc{font-size:12px; line-height:1.55; color:var(--mid); margin-top:4px}
.psc-engine-sel select{width:100%; background:var(--card); border:1px solid var(--border2); border-radius:12px; padding:11px 13px;
  font:600 14px var(--fu); color:var(--text); cursor:pointer}
.psc-gen-scene{width:100%; margin-top:16px; border:0; border-radius:13px; padding:13px 0; cursor:pointer;
  font:800 14px var(--fu); color:#3a1200; background:linear-gradient(135deg,#ffca5c,#f5a623); box-shadow:0 8px 24px rgba(245,166,35,.28)}
.psc-gen-scene:disabled{cursor:not-allowed; opacity:.6; filter:saturate(.7)}
.psc-soon{font-family:var(--fm); font-size:8.5px; letter-spacing:1px; text-transform:uppercase; opacity:.75; margin-left:4px}
.psc-fav{width:100%; margin-top:10px; border:1px solid var(--border2); border-radius:13px; padding:12px 0; cursor:pointer;
  font:700 14px var(--fu); color:var(--text); background:var(--card); transition:.15s}
.psc-fav:hover{border-color:var(--pink); color:var(--pink); box-shadow:var(--glow-sm)}
.psc-fav.on{border-color:var(--pink); color:var(--pink); background:var(--pink-soft)}
.psc-fullsheet{margin-top:18px; border-top:1px solid var(--border); padding-top:6px}
.psc-fullsheet>summary{font-family:var(--fm); font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--mid); cursor:pointer; padding:8px 0; list-style:none}
.psc-fullsheet>summary::-webkit-details-marker{display:none}
.psc-fullsheet>summary::before{content:'▸ '; color:var(--pink)}
.psc-fullsheet[open]>summary::before{content:'▾ '}

/* mobile: the panel becomes a slide-in drawer over the chat */
@media (max-width:880px){
  .psc-side{position:absolute; top:0; right:0; bottom:0; width:min(360px,86vw); z-index:30;
    transform:translateX(100%); border-left:1px solid var(--border2); box-shadow:-20px 0 60px rgba(0,0,0,.6)}
  .psc-root.psc-side-collapsed .psc-side{width:min(360px,86vw)}   /* collapse class is desktop-only */
  .psc-root.psc-side-open .psc-side{transform:translateX(0)}
  .psc-side-x{display:flex; align-items:center; justify-content:center; position:absolute; top:12px; right:12px; z-index:2;
    width:32px; height:32px; border-radius:9px; background:rgba(8,0,14,.6); border:1px solid var(--border2); color:var(--mid); cursor:pointer; font-size:14px}
  .psc-side-x:hover{border-color:var(--pink); color:var(--text)}
  .psc-side-scrim{display:block; position:absolute; inset:0; z-index:20; background:rgba(4,0,8,.55); opacity:0; pointer-events:none; transition:opacity .25s}
  .psc-root.psc-side-open .psc-side-scrim{opacity:1; pointer-events:auto}
}

/* header — LabAi chat-header */
.chat-header{display:flex; align-items:center; gap:13px; padding:13px 22px; flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:linear-gradient(180deg, rgba(20,2,30,.82), rgba(14,1,22,.62)); backdrop-filter:blur(20px) saturate(1.2)}
.chat-char-avatar{transition:box-shadow .3s}
.chat-back{background:none; border:1px solid var(--border); color:var(--mid); border-radius:11px; font-size:19px;
  line-height:1; padding:3px 13px; cursor:pointer}
.chat-back:hover{border-color:var(--border2); color:var(--text)}
.chat-char-identity{display:flex; align-items:center; gap:11px; flex:1; min-width:0}
.chat-char-avatar{width:42px; height:42px; border-radius:12px; flex-shrink:0; object-fit:cover; box-shadow:var(--glow-sm)}
.chat-char-name{font-family:var(--fd); font-weight:700; font-size:18px; line-height:1.1;
  background:linear-gradient(135deg,#fff,var(--blush) 75%,var(--pink)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.chat-char-genre{font-family:var(--fm); font-size:10px; color:var(--dim); letter-spacing:.5px; text-transform:uppercase; margin-top:2px}
.chat-header-tools{display:flex; gap:8px}
.psc-tool{background:var(--card); border:1px solid var(--border); color:var(--mid); border-radius:999px;
  padding:6px 12px; font-family:var(--fm); font-size:10px; letter-spacing:.5px; cursor:pointer}
.psc-tool:hover{border-color:var(--border2); color:var(--text); box-shadow:var(--glow-sm)}
.psc-tool-ico{width:36px; height:36px; padding:0; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0}
.chat-status{display:flex; align-items:center; gap:6px; font-family:var(--fm); font-size:10.5px; color:#39ff9e}
.chat-status-dot{width:7px; height:7px; border-radius:50%; background:#39ff9e; box-shadow:0 0 8px #39ff9e}

/* collapsible status strip (under the header) */
.psc-statusbar{flex-shrink:0; border-bottom:1px solid rgba(255,255,255,.04); background:rgba(14,1,22,.5); backdrop-filter:blur(16px)}
.psc-statusbar-toggle{width:100%; display:flex; align-items:center; gap:10px; padding:9px 22px; background:none; border:0; cursor:pointer;
  font-family:var(--fm); font-size:10.5px; letter-spacing:.5px; color:var(--mid); text-align:left}
.psc-statusbar-toggle:hover{color:var(--text)}
.psc-statusbar-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.psc-statusbar.has-state .psc-statusbar-label{color:#e5cfdc}
.psc-statusbar-chev{transition:transform .2s; opacity:.7}
.psc-statusbar.open .psc-statusbar-chev{transform:rotate(180deg)}
.psc-statusbar-body{display:none; gap:14px; align-items:center; flex-wrap:wrap; padding:2px 22px 12px}
.psc-statusbar.open .psc-statusbar-body{display:flex}
.css-cell{display:flex; flex-direction:column; gap:1px; font-size:11.5px; color:#e5cfdc}
.css-cell b{font-family:var(--fm); font-size:8px; letter-spacing:1.5px; color:var(--sys)}
.css-bond{display:flex; flex-direction:column; gap:3px; min-width:120px}
.css-bond b{font-family:var(--fm); font-size:9px; letter-spacing:1px; color:var(--pink); text-shadow:var(--glow-sm)}
.css-bar{height:5px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden}
.css-bar span{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--rose),var(--pink)); box-shadow:var(--glow-sm)}
.css-note{flex:1; min-width:180px; font-size:11px; font-style:italic; color:var(--mid); line-height:1.4}

/* ── center stage: hero image card, then title + intro BELOW it (reference layout) ── */
.chat-stage{position:relative; margin-bottom:22px}
.chat-stage-img-wrap{border-radius:18px; overflow:hidden; border:1px solid var(--border2);
  box-shadow:0 18px 50px rgba(0,0,0,.55), var(--glow-sm); max-height:340px}
.chat-stage-img{width:100%; height:100%; object-fit:contain; object-position:center; display:block; background:#0a0110}
.chat-stage-title{font-family:var(--fd); font-weight:900; font-size:26px; line-height:1.14; letter-spacing:.3px; margin:16px 2px 0;
  background:linear-gradient(135deg,#fff,var(--blush) 72%,var(--pink)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 4px 24px rgba(255,45,120,.25)}
.chat-stage-intro{margin:12px 2px 0; padding:14px 16px; border:1px solid var(--border); border-radius:14px;
  background:linear-gradient(150deg, rgba(38,12,58,.6), rgba(20,3,34,.55)); backdrop-filter:blur(6px);
  font-family:var(--fd); font-size:14px; font-style:italic; line-height:1.6; color:#e9d4e2}

/* body — LabAi chat-body>chat-inner */
.chat-body{flex:1; overflow-y:auto; position:relative; scrollbar-width:thin; scrollbar-color:var(--pink-dim) transparent}
.chat-body::-webkit-scrollbar{width:8px}
.chat-body::-webkit-scrollbar-thumb{background:var(--pink-dim); border-radius:8px}
.chat-inner{position:relative; max-width:760px; margin:0 auto; padding:22px}
.chat-divider{display:flex; align-items:center; gap:14px; margin:2px 0 20px; font-family:var(--fm); font-size:9px;
  letter-spacing:3px; color:var(--dim); text-transform:uppercase; opacity:.75}
.chat-divider::before,.chat-divider::after{content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--border2),transparent)}
.chat-messages{display:flex; flex-direction:column; gap:16px}

/* message rows — LabAi chat-msg bot|user */
.chat-msg{display:flex; gap:10px; max-width:88%; animation:psFadeUp .35s cubic-bezier(.2,.8,.2,1)}
.chat-msg.user{align-self:flex-end; flex-direction:row-reverse}
.chat-msg-ava{width:34px; height:34px; border-radius:10px; object-fit:cover; flex-shrink:0; border:1px solid var(--border2); margin-top:20px}
.chat-msg-col{min-width:0; display:flex; flex-direction:column; gap:3px}
.chat-msg.user .chat-msg-col{align-items:flex-end}
.chat-msg-who{font-family:var(--fm); font-size:8.5px; letter-spacing:1.5px; color:var(--pink); text-shadow:var(--glow-sm); text-transform:uppercase}
.bubble{padding:12px 16px; border-radius:17px; font-size:14.5px; line-height:1.64; word-break:break-word;
  backdrop-filter:blur(6px)}
.chat-msg.bot .bubble{background:linear-gradient(150deg, rgba(38,12,58,.92), rgba(20,3,34,.9)); border:1px solid rgba(255,255,255,.06);
  border-top-left-radius:5px; color:#f6e4ef; box-shadow:0 6px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04)}
.chat-msg.user .bubble{background:linear-gradient(135deg,var(--pink),var(--rose)); color:#fff; border-top-right-radius:5px;
  box-shadow:0 6px 24px rgba(255,45,120,.35), inset 0 1px 0 rgba(255,255,255,.18)}
.chat-regen{align-self:flex-start; background:none; border:0; color:var(--dim); font-family:var(--fm); font-size:9px; letter-spacing:.5px; padding:2px; cursor:pointer}
.chat-regen:hover{color:var(--pink); text-shadow:var(--glow-sm)}

/* LabAi message-parser spans */
.msg-action{color:var(--blush); font-style:italic; opacity:.92}
.msg-bold{color:var(--text); font-weight:700}
.msg-dialogue{color:var(--text)}
.msg-thought{color:var(--mid); font-style:italic; opacity:.72}
.msg-whisper{color:var(--dim); font-style:italic}
.msg-charname{color:var(--blush); font-weight:600}
/* extra accessibility styles — __underline__ · ~~strikethrough~~ · ==highlight== */
.msg-underline{text-decoration:underline; text-decoration-color:var(--pink-dim,rgba(var(--brand-rgb),.7)); text-underline-offset:2px; text-decoration-thickness:1.5px}
.msg-strike{text-decoration:line-through; text-decoration-color:var(--dim); opacity:.72}
.msg-mark{background:rgba(var(--brand-rgb),.22); color:var(--text); border-radius:3px; padding:0 .2em; box-decoration-break:clone; -webkit-box-decoration-break:clone}
#pscRoot.r-contrast .bubble .msg-mark{background:rgba(var(--brand-rgb),.34)}
#pscRoot.r-contrast .bubble .msg-strike{opacity:.9}
.msg-code{font-family:var(--fm,'JetBrains Mono',monospace); font-size:.9em; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.10); border-radius:5px; padding:.02em .34em}
.msg-loud{font-weight:800; font-size:1.05em; letter-spacing:.3px; color:var(--pink); text-shadow:0 0 10px rgba(var(--brand-rgb),.4)}
.msg-spoiler{background:var(--mid,#6a6270); color:transparent; border-radius:4px; padding:0 .22em; cursor:pointer; box-decoration-break:clone; -webkit-box-decoration-break:clone; transition:color .15s, background .15s; outline:none}
.msg-spoiler:hover,.msg-spoiler:focus,.msg-spoiler.revealed{color:var(--text); background:rgba(var(--brand-rgb),.18)}

/* ── creator: formatting help legend (the ? button in the Story section) ── */
.ps-fmt-help{margin-left:8px; width:22px; height:22px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--border2); background:rgba(255,255,255,.05); color:var(--mid);
  font-weight:700; font-size:12px; line-height:1; cursor:pointer; transition:.14s}
.ps-fmt-help:hover{border-color:var(--pink); color:var(--pink); background:rgba(var(--brand-rgb),.12)}
.ps-fmt-legend{margin:10px 0 4px; padding:12px 14px; border-radius:12px;
  background:rgba(12,1,22,.55); border:1px solid var(--border2)}
.ps-fmt-legend[hidden]{display:none}
.ps-fmt-legend-h{font-family:var(--fm,monospace); font-size:10px; letter-spacing:1px; text-transform:uppercase;
  color:var(--dim); margin-bottom:10px}
.ps-fmt-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px 16px}
.ps-fmt-row{display:flex; align-items:baseline; gap:9px; min-width:0}
.ps-fmt-row code{font-family:var(--fm,monospace); font-size:11.5px; color:var(--blush);
  background:rgba(255,255,255,.05); border-radius:5px; padding:1px 6px; white-space:nowrap; flex-shrink:0}
.ps-fmt-row .ps-fmt-ex{font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis}
.ps-fmt-legend .ps-fmt-ex .msg-dialogue{color:var(--pink)}   /* show dialogue's real accent in the legend */
.ps-fmt-note{margin-top:10px; font-size:11px; line-height:1.5; color:var(--dim)}

/* typing — LabAi typing-indicator */
.typing-indicator{display:flex; gap:10px; max-width:88%; opacity:0; height:0; overflow:hidden; transition:.2s}
.typing-indicator.show{opacity:1; height:auto; margin-top:16px}
.typing-avatar{width:34px; height:34px; border-radius:10px; object-fit:cover; border:1px solid var(--border2)}
.typing-bubble{padding:13px 16px; border-radius:16px; border-top-left-radius:5px; background:var(--card2); border:1px solid var(--border); display:flex; gap:5px; align-items:center}
.typing-dot{width:7px; height:7px; border-radius:50%; background:var(--blush); animation:pscBlink 1.3s ease-in-out infinite}
.typing-dot:nth-child(2){animation-delay:.18s}
.typing-dot:nth-child(3){animation-delay:.36s}
@keyframes pscBlink{0%,80%,100%{opacity:.25; transform:translateY(0)}40%{opacity:1; transform:translateY(-3px)}}

/* composer dock: persona chip + round tool buttons (above the input) */
.chat-dock{max-width:760px; margin:0 auto 10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.psc-persona-chip{display:flex; align-items:center; gap:8px; padding:6px 14px 6px 10px; border-radius:999px; cursor:pointer;
  background:var(--card); border:1px solid var(--border2); color:var(--text); font:600 13px var(--fu); transition:.15s}
.psc-persona-chip:hover{border-color:var(--pink); box-shadow:var(--glow-sm)}
.psc-persona-dot{width:12px; height:12px; border-radius:50%; background:var(--persona-color,#8ef0ff); box-shadow:0 0 8px var(--persona-color,#8ef0ff); flex-shrink:0}
.psc-dock-tools{display:flex; gap:8px; margin-left:auto}
.psc-dock-btn{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:var(--card); border:1px solid var(--border); color:var(--text); font-size:16px; transition:.15s}
.psc-dock-btn:hover{border-color:var(--border2); box-shadow:var(--glow-sm); transform:translateY(-1px)}
.psc-dock-btn.has-mem{border-color:var(--pink); color:var(--pink); box-shadow:var(--glow-sm)}

/* input — LabAi chat-input-wrap */
.chat-input-wrap{flex-shrink:0; padding:13px 22px 18px; border-top:1px solid rgba(255,255,255,.05);
  background:linear-gradient(0deg, rgba(20,2,30,.85), rgba(14,1,22,.5)); backdrop-filter:blur(20px)}
.chat-input-row{max-width:760px; margin:0 auto; display:flex; gap:10px; align-items:flex-end;
  background:rgba(30,8,46,.7); border:1px solid var(--border2); border-radius:17px; padding:8px 8px 8px 16px;
  transition:.2s; backdrop-filter:blur(8px)}
.chat-input-row:focus-within{border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-soft)}
.chat-textarea{flex:1; background:none; border:none; outline:none; color:var(--text); font-family:var(--fu); font-size:14.5px; line-height:1.5; resize:none; max-height:120px; padding:6px 0}
.chat-textarea::placeholder{color:var(--dim)}
.chat-textarea:disabled{color:var(--dim)}
.chat-send{width:40px; height:40px; border-radius:12px; border:none; flex-shrink:0; cursor:pointer; color:#fff; font-size:16px; background:linear-gradient(135deg,var(--pink),var(--rose)); box-shadow:var(--glow-sm); transition:.16s}
.chat-send:hover{transform:scale(1.05)}
.chat-send:active{transform:scale(.96)}
.chat-send:disabled{opacity:.5; transform:none; box-shadow:none}
.chat-hint{max-width:760px; margin:8px auto 0; font-family:var(--fm); font-size:9px; letter-spacing:.5px; color:var(--dim); text-align:center}

/* 🎲 dice card (in-bubble) */
.chat-roll{margin-top:8px; border:1px solid var(--border2); border-radius:14px; padding:12px 14px; background:rgba(17,0,24,.85); max-width:280px; animation:psFadeUp .3s ease}
.chat-roll-top{display:flex; align-items:center; gap:9px; font-family:var(--fd); font-weight:700; font-size:14px}
.chat-roll-die{font-size:18px}
.chat-roll-meta{font-family:var(--fm); font-size:10px; letter-spacing:1px; color:var(--mid); margin:5px 0 10px}
.chat-roll-go{width:100%; border:0; border-radius:11px; padding:10px 0; color:#fff; font-weight:800; font-size:13px; background:linear-gradient(135deg,var(--sys),#6a3df0); box-shadow:var(--glow-sys); cursor:pointer}
.chat-roll-go:hover{filter:brightness(1.1)}
.chat-roll-go.rolling{font-family:var(--fm); letter-spacing:1px}
.chat-roll.ok{border-color:rgba(57,255,158,.55); background:rgba(57,255,158,.07)}
.chat-roll.bad{border-color:rgba(255,90,90,.55); background:rgba(255,90,90,.07)}
.chat-roll-out{font-size:13px; color:#f4dfeb; margin-top:4px}
.chat-roll-out b{font-family:var(--fd); font-size:22px; color:var(--text); margin-right:4px}

/* overlays: settings + cast (shared psc-box) */
.psc-ov{position:fixed; inset:0; z-index:210; background:rgba(4,0,8,.72); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:24px}
.psc-box{background:var(--surf); border:1px solid var(--border2); border-radius:20px; width:min(420px,94vw); max-height:88vh; overflow:auto; padding:20px; box-shadow:0 30px 90px rgba(0,0,0,.8), var(--glow); display:flex; flex-direction:column; gap:13px}
.psc-box-head{display:flex; align-items:center; justify-content:space-between}
.psc-box-head b{font-family:var(--fm); font-size:11px; letter-spacing:2px; color:var(--pink); text-shadow:var(--glow-sm)}
.psc-x{background:none; border:1px solid var(--border); color:var(--mid); border-radius:9px; padding:3px 10px; cursor:pointer}
.psc-x:hover{border-color:var(--border2); color:var(--text)}
.psc-box-sub{font-family:var(--fm); font-size:9px; letter-spacing:2px; color:var(--sys); text-shadow:var(--glow-sys); margin-top:4px; padding-top:12px; border-top:1px solid var(--border)}
.psc-toggle{display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--border); border-radius:12px; padding:11px 13px; background:var(--card); cursor:pointer}
.psc-toggle span{font-size:13px; color:var(--text)}
.psc-toggle i{display:block; font-size:11px; color:var(--dim); font-style:normal; margin-top:2px; line-height:1.4}
.psc-toggle input{width:18px; height:18px; accent-color:var(--pink); flex-shrink:0}
.psc-field{display:block; font-family:var(--fm); font-size:9px; letter-spacing:2px; color:var(--dim)}
.psc-field input,.psc-field select,.psc-field textarea{width:100%; margin-top:5px; background:var(--card); border:1px solid var(--border); border-radius:11px; padding:10px 13px; font:13px var(--fu); color:var(--text)}
.psc-field textarea{min-height:64px; resize:vertical}
.psc-box-row{display:flex; justify-content:space-between; gap:10px; margin-top:4px}
.psc-castlist{display:flex; flex-direction:column; gap:8px}
.psc-castopt{text-align:left; border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:12px; padding:12px 15px; font-family:var(--fd); font-size:15px; cursor:pointer; transition:all .15s}
.psc-castopt i{font-family:var(--fm); font-size:9px; letter-spacing:1px; color:var(--dim); font-style:normal}
.psc-castopt:hover{border-color:var(--border2); box-shadow:var(--glow-sm)}
.psc-castopt.on{border-color:var(--pink); color:var(--pink); background:var(--pink-soft)}
@media (max-width:680px){ .chat-msg{max-width:96%} .chat-inner{padding:16px} }

/* ═══ APP SHELL + SIDE NAV ═══ */
html,body{max-width:100%; height:100%;}
body{display:flex; flex-direction:column; min-height:100dvh; height:100dvh; overflow:hidden}
.ps-shell{display:flex; align-items:stretch; flex:1 1 auto; min-height:0; width:100%; max-width:100%; overflow:hidden}
.ps-navtoggle{display:inline-flex !important; align-items:center; justify-content:center; background:none; border:1px solid var(--border); color:var(--text);
  border-radius:10px; font-size:17px; padding:5px 12px; cursor:pointer}
.ps-navtoggle:hover{border-color:var(--border2)}
.ps-logo[data-nav]{cursor:pointer}
.ps-nav{position:relative; top:auto; flex:0 0 244px; width:244px; align-self:stretch;
  height:auto; max-height:none; min-height:0;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:12px 10px 16px; display:flex; flex-direction:column; gap:3px;
  border-right:1px solid var(--border); background:rgba(17,0,24,.4); backdrop-filter:blur(8px);
  scrollbar-width:thin; scrollbar-color:var(--pink-dim) transparent}
.ps-nav::-webkit-scrollbar{width:7px}
.ps-nav::-webkit-scrollbar-thumb{background:var(--pink-dim); border-radius:7px}

/* airy nav rows with an icon tile — recolors with the content theme (SFW/NSFW/Trigger/rainbow) */
.ps-nav-item{display:flex; align-items:center; gap:13px; padding:9px 12px; border-radius:15px;
  border:1px solid transparent; background:none; color:var(--mid); font:600 15.5px var(--fu);
  cursor:pointer; text-align:left; transition:background .15s, color .15s, border-color .15s, box-shadow .15s; width:100%}
.ps-nav-ic{display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:40px; height:40px; border-radius:12px; font-size:18px; line-height:1;
  background:rgba(var(--brand-rgb),.06); border:1px solid var(--border);
  color:var(--blush); transition:background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s}
.ps-nav-lbl{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.ps-nav-item:hover{background:rgba(var(--brand-rgb),.05); color:var(--text)}
.ps-nav-item:hover .ps-nav-ic{border-color:var(--border2); color:var(--text); transform:translateY(-1px)}

/* ACTIVE — flows through --brand-rgb, so it turns blue(SFW)/red(NSFW)/amber(Trigger)/rainbow(all-on) */
.ps-nav-item.active{background:rgba(var(--brand-rgb),.10); border-color:rgba(var(--brand-rgb),.28);
  color:var(--pink); box-shadow:var(--glow-sm)}
.ps-nav-item.active .ps-nav-ic{background:rgba(var(--brand-rgb),.16); border-color:rgba(var(--brand-rgb),.45);
  color:var(--pink); box-shadow:0 0 14px rgba(var(--brand-rgb),.35)}

/* sub-rows (nested) sit tighter with a smaller tile */
.ps-nav-item.sub{padding:6px 12px; font-size:13.5px}
.ps-nav-item.sub .ps-nav-ic{width:30px; height:30px; font-size:14px; border-radius:10px}

.ps-nav-sep{height:1px; background:var(--border); margin:11px 8px}
.ps-nav-sect{font-family:var(--fm); font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--dim);
  padding:8px 14px 6px}
.ps-nav-foot{margin-top:auto; padding:14px 8px 4px; border-top:1px solid var(--border)}
.ps-nav-nsfw{display:flex; align-items:center; gap:9px; font-family:var(--fm); font-size:10px;
  letter-spacing:.5px; color:var(--mid); cursor:pointer}
.ps-nav-nsfw input{width:16px; height:16px; accent-color:var(--pink)}
.ps-navscrim{display:none}
.ps-app{flex:1 1 auto; min-width:0; max-width:100%; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain}
#profileMount, #hubMount, #creatorMount, #creatorsMount, #chatsMount, #rankMount,
#storeMount, #pricingMount, #notifMount, #discoverMount, #browseMount{
  width:min(1280px, 100%); margin:0 auto; padding-left:18px; padding-right:18px; box-sizing:border-box}

/* ── creator owner controls (view/edit your own bots) ── */
.creator-newbot{margin-left:auto; align-self:center; white-space:nowrap}
.creator-studio-note{margin:0 0 18px; padding:12px 16px; border-radius:12px; font-size:13px; line-height:1.55;
  color:#e9d4e2; background:rgba(var(--brand-rgb),.07); border:1px solid rgba(var(--brand-rgb),.25)}
.ps-card{position:relative}
.creator-chips{position:absolute; top:10px; right:10px; z-index:8; display:flex; gap:6px}
.creator-edit-chip, .creator-del-chip{cursor:pointer; padding:5px 11px; border-radius:999px; font:700 11px var(--fu); color:#fff;
  background:rgba(12,1,20,.82); border:1px solid rgba(var(--brand-rgb),.5); backdrop-filter:blur(6px);
  box-shadow:var(--glow-sm); transition:.15s}
.creator-edit-chip:hover{background:rgba(var(--brand-rgb),.28); border-color:var(--pink)}
.creator-del-chip{border-color:rgba(255,80,90,.5); padding:5px 9px}
.creator-del-chip:hover{background:rgba(255,60,70,.28); border-color:#ff5a64}

/* ── Creator Studio (BotStudio-style authoring) ── */
.ps-studio{max-width:720px}
.ps-studio-editnote,.ps-studio-imgs+*{scroll-margin-top:12px}
.ps-studio-editnote{margin-bottom:16px; padding:11px 14px; border-radius:11px; font-size:12.5px; line-height:1.5;
  color:#fcd34d; background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.32)}
.ps-studio-imgs{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:4px 0 6px}
.ps-imgslot .ps-drop{min-height:120px}
.ps-studio-imgs .ps-drop img{max-height:96px; border-radius:8px}
.ps-form select#upRating{width:100%; background:var(--card); border:1px solid var(--border2); border-radius:11px;
  padding:10px 12px; font:600 14px var(--fu); color:var(--text); cursor:pointer}
@media (max-width:640px){ .ps-studio-imgs{grid-template-columns:1fr} }

/* ── nav unread dot (Notifications) ── */
.ps-nav-dot{width:8px; height:8px; border-radius:50%; background:#34d399; box-shadow:0 0 8px #34d399; flex-shrink:0; margin-left:auto}
body.nav-rail .ps-nav-dot{position:absolute; top:8px; right:8px; margin:0}
.ps-nav-item{position:relative}

/* ── shared page subhead ── */
.ps-page-subhead{font-family:var(--fd); font-weight:700; font-size:18px; color:var(--text); margin:26px 2px 14px}

/* ── Recent Chats ── */
.ps-chatlist{display:flex; flex-direction:column; gap:10px}
.ps-chatrow{display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  padding:12px 14px; border-radius:15px; background:var(--card); border:1px solid var(--border); transition:.15s}
.ps-chatrow:hover{border-color:rgba(var(--brand-rgb),.4); box-shadow:var(--glow-sm); transform:translateY(-1px)}
.ps-chatrow-pfp{width:52px; height:52px; border-radius:12px; object-fit:cover; flex-shrink:0}
.ps-chatrow-col{flex:1; min-width:0}
.ps-chatrow-top{display:flex; align-items:baseline; gap:10px}
.ps-chatrow-name{font-family:var(--fd); font-weight:700; font-size:16px; color:var(--text)}
.ps-chatrow-count{font-family:var(--fm); font-size:10px; color:var(--dim)}
.ps-chatrow-prev{font-size:13px; color:var(--mid); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ps-chatrow-prev b{color:var(--blush)}
.ps-chatrow-go{font:700 12px var(--fu); color:var(--pink); flex-shrink:0; opacity:0; transition:.15s}
.ps-chatrow:hover .ps-chatrow-go{opacity:1}

/* ── Rankings (centered, tabbed, podium + list) ── */
.rk-wrap{max-width:880px; margin:0 auto; padding:24px 20px 60px}
.rk-head{display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; position:relative}
.rk-head h1{font-family:var(--fd); font-weight:900; font-size:24px; color:var(--text); margin:0}
.rk-tabs{display:flex; gap:4px; padding:4px; border-radius:12px; background:rgba(0,0,0,.28)}
.rk-tab{padding:8px 20px; border:0; border-radius:9px; background:none; cursor:pointer; color:var(--mid); font:700 13px var(--fu); transition:.15s}
.rk-tab:hover{color:var(--text)}
.rk-tab.on{background:rgba(var(--brand-rgb),.16); color:var(--pink); box-shadow:var(--glow-sm)}
.rk-subhead{text-align:center; font-family:var(--fm); font-size:10px; letter-spacing:.5px; color:var(--dim); margin:8px 0 28px}

/* podium — Olympic medal stand (2nd · 1st · 3rd on tiered plinths) */
.rk-podium{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; align-items:end; margin-bottom:32px; perspective:900px}
.rk-stand{display:flex; flex-direction:column; align-items:center}
.rk-podium-card{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; cursor:pointer;
  width:100%; border-radius:18px 18px 0 0; padding:34px 14px 18px; transition:transform .18s; overflow:visible;
  border:1px solid var(--border2); border-bottom:0; background:linear-gradient(180deg, rgba(var(--brand-rgb),.10), var(--card) 70%)}
.rk-podium-card:hover{transform:translateY(-4px)}
.rk-podium-card:focus-visible{outline:2px solid var(--pink); outline-offset:2px}
.place-1 .rk-podium-card{padding-top:40px; border-color:rgba(255,199,64,.55);
  background:linear-gradient(180deg, rgba(255,199,64,.16), var(--card) 70%); box-shadow:0 0 44px rgba(255,199,64,.2)}
.place-2 .rk-podium-card{border-color:rgba(200,208,226,.42)}
.place-3 .rk-podium-card{border-color:rgba(226,140,86,.44)}
.rk-podium-crown{position:absolute; top:-6px; font-size:24px; filter:drop-shadow(0 0 8px rgba(255,199,64,.6))}
.rk-podium-avwrap{position:relative; margin-bottom:12px}
.rk-podium-av{width:78px; height:78px; border-radius:50%; object-fit:cover; border:3px solid rgba(var(--brand-rgb),.4)}
.place-1 .rk-podium-av{width:100px; height:100px; border-color:#ffd76a; box-shadow:0 0 24px rgba(255,199,64,.45)}
.place-2 .rk-podium-av{border-color:#d7dbe6}
.place-3 .rk-podium-av{border-color:#f0a172}
.rk-podium-badge{position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
  font-size:15px; padding:2px 8px; border-radius:999px; background:rgba(10,0,18,.92); border:1px solid var(--border2)}
.rk-podium-score{margin-top:8px; font:900 18px var(--fd); color:var(--pink)}
.place-1 .rk-podium-score{font-size:22px; color:#ffd76a}
.rk-podium-title{font-family:var(--fd); font-weight:800; font-size:15px; color:var(--text); margin-top:6px; line-height:1.2;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.place-1 .rk-podium-title{font-size:17px}
.rk-podium-sub{font-size:11.5px; color:var(--mid); margin-top:3px}
.rk-podium-stats{font-size:11px; color:var(--mid); margin-top:8px}
.rk-strip{display:flex; gap:6px; margin-top:12px; justify-content:center}
.rk-strip-item{width:48px}
.rk-strip-item img{width:48px; height:60px; object-fit:cover; border-radius:8px; border:1px solid var(--border)}
.rk-strip-item span{display:block; font-size:8px; color:var(--dim); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* the 3D plinth block beneath each card — Olympic heights */
.rk-plinth{width:100%; position:relative; transform-style:preserve-3d}
.rk-plinth-top{height:10px; border-radius:3px 3px 0 0;
  background:linear-gradient(180deg, rgba(var(--brand-rgb),.5), rgba(var(--brand-rgb),.28));
  transform:rotateX(52deg); transform-origin:bottom; box-shadow:0 -2px 10px rgba(var(--brand-rgb),.3)}
.rk-plinth-face{display:flex; align-items:flex-start; justify-content:center; padding-top:12px;
  background:linear-gradient(180deg, rgba(var(--brand-rgb),.24), rgba(var(--brand-rgb),.08));
  border:1px solid rgba(var(--brand-rgb),.3); border-top:0; box-shadow:inset 0 8px 20px rgba(0,0,0,.35)}
.rk-plinth-num{font-family:var(--fd); font-weight:900; font-size:40px; line-height:1;
  color:rgba(255,255,255,.9); text-shadow:0 2px 6px rgba(0,0,0,.5)}
/* tiered heights: 1st tallest, 2nd mid, 3rd shortest */
.place-1 .rk-plinth-face{height:116px}
.place-2 .rk-plinth-face{height:82px}
.place-3 .rk-plinth-face{height:58px}
.place-1 .rk-plinth-top{background:linear-gradient(180deg, rgba(255,199,64,.6), rgba(255,199,64,.32))}
.place-1 .rk-plinth-face{background:linear-gradient(180deg, rgba(255,199,64,.28), rgba(255,199,64,.08)); border-color:rgba(255,199,64,.4)}
.place-1 .rk-plinth-num{color:#ffe9a8}
.place-2 .rk-plinth-top{background:linear-gradient(180deg, rgba(200,208,226,.5), rgba(200,208,226,.26))}
.place-2 .rk-plinth-face{border-color:rgba(200,208,226,.32)}
.place-3 .rk-plinth-top{background:linear-gradient(180deg, rgba(226,140,86,.5), rgba(226,140,86,.28))}
.place-3 .rk-plinth-face{border-color:rgba(226,140,86,.34)}

/* list rows (#4+) */
.rk-list{display:flex; flex-direction:column; gap:9px}
.rk-row{display:flex; align-items:center; gap:14px; cursor:pointer; padding:12px 16px; border-radius:14px;
  background:var(--card); border:1px solid var(--border); transition:.15s}
.rk-row:hover{border-color:rgba(var(--brand-rgb),.45); box-shadow:var(--glow-sm)}
.rk-row:focus-visible{outline:2px solid var(--pink); outline-offset:1px}
.rk-row-pos{font-family:var(--fm); font-size:9px; letter-spacing:1px; color:var(--dim); width:52px; flex-shrink:0}
.rk-row-pos b{display:block; font-family:var(--fd); font-size:19px; color:var(--blush)}
.rk-row-av{width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0}
.rk-row-col{flex:1; min-width:0}
.rk-row-title{font-family:var(--fd); font-weight:700; font-size:15px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rk-row-sub{font-size:12px; color:var(--mid); margin-top:2px}
.rk-row-strip{display:flex; gap:5px; flex-shrink:0}
.rk-row-strip img{width:38px; height:46px; object-fit:cover; border-radius:7px; border:1px solid var(--border)}
.rk-row-score{font:800 15px var(--fd); color:var(--pink); flex-shrink:0; min-width:64px; text-align:right}
@media (max-width:640px){
  .rk-podium-av{width:60px; height:60px}
  .place-1 .rk-podium-av{width:74px; height:74px}
  .rk-podium-title{font-size:12px}
  .place-1 .rk-plinth-face{height:78px} .place-2 .rk-plinth-face{height:56px} .place-3 .rk-plinth-face{height:40px}
  .rk-plinth-num{font-size:28px}
  .rk-strip-item{width:36px} .rk-strip-item img{width:36px; height:46px}
  .rk-row-strip{display:none}
}

/* ── Profile ── */
.ps-profile-card{display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:22px; border-radius:18px;
  background:linear-gradient(140deg, rgba(var(--brand-rgb),.08), var(--card) 65%); border:1px solid var(--border2)}
.ps-profile-pfp{width:80px; height:80px; border-radius:20px; object-fit:cover; border:1px solid var(--border2)}
.ps-profile-col{flex:1; min-width:180px}
.ps-profile-name{font-family:var(--fd); font-weight:900; font-size:24px; color:var(--text)}
.ps-profile-stats{display:flex; gap:16px; margin-top:6px; font-size:13px; color:var(--mid)}
.ps-profile-stats b{color:var(--text)}
.ps-profile-persona{margin-top:8px; font-size:12.5px; color:var(--mid)}
.ps-profile-persona b{color:var(--blush)}
.ps-profile-actions{display:flex; flex-direction:column; gap:8px; min-width:180px}

/* ── Store ── */
.ps-store-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px}
.ps-store-card{padding:20px; border-radius:16px; background:var(--card); border:1px solid var(--border); text-align:center}
.ps-store-ic{font-size:34px; margin-bottom:10px}
.ps-store-name{font-family:var(--fd); font-weight:700; font-size:17px; color:var(--text)}
.ps-store-desc{font-size:12.5px; line-height:1.5; color:var(--mid); margin:8px 0 14px}

/* ── Pricing ── */
.ps-plan-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.ps-plan-card{position:relative; padding:24px; border-radius:18px; background:var(--card); border:1px solid var(--border)}
.ps-plan-card.current{border-color:rgba(var(--brand-rgb),.5); box-shadow:var(--glow-sm)}
.ps-plan-badge{position:absolute; top:14px; right:14px; font:700 9px var(--fm); letter-spacing:1px; color:var(--pink);
  padding:3px 9px; border-radius:999px; background:rgba(var(--brand-rgb),.14); border:1px solid rgba(var(--brand-rgb),.4)}
.ps-plan-name{font-family:var(--fd); font-weight:700; font-size:20px; color:var(--text)}
.ps-plan-price{font-family:var(--fd); font-weight:900; font-size:34px; color:var(--pink); margin:6px 0}
.ps-plan-price em{font:400 13px var(--fu); color:var(--dim); font-style:normal}
.ps-plan-tagline{font-size:13px; color:var(--mid); margin-bottom:14px}
.ps-plan-feats{list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:8px}
.ps-plan-feats li{font-size:13px; color:var(--text)}
.ps-plan-card .ps-btn{width:100%}

/* ── Discover ── */
.ps-discover-card{display:flex; gap:24px; flex-wrap:wrap; max-width:760px; padding:22px; border-radius:20px;
  background:linear-gradient(150deg, rgba(var(--brand-rgb),.09), var(--card) 70%); border:1px solid var(--border2)}
.ps-discover-art{position:relative; flex:0 0 240px; max-width:240px; border-radius:16px; overflow:hidden;
  border:1px solid var(--border2); box-shadow:0 14px 40px rgba(0,0,0,.5)}
.ps-discover-art img{width:100%; display:block; aspect-ratio:3/5; object-fit:cover}
.ps-discover-art.blurred img{filter:blur(22px) brightness(.6); transform:scale(1.06)}
.ps-discover-veil{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:12px}
.ps-discover-veil b{font-family:var(--fm); font-size:12px; letter-spacing:1px; color:#fcd34d}
.ps-discover-veil span{font-size:11px; color:var(--mid)}
.ps-discover-info{flex:1; min-width:220px; display:flex; flex-direction:column}
.ps-discover-name{font-family:var(--fd); font-weight:900; font-size:26px; line-height:1.1;
  background:linear-gradient(135deg,#fff,var(--blush) 72%,var(--pink)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.ps-discover-by{font-size:12.5px; color:var(--mid); margin-top:5px}
.ps-discover-tag{font-size:14px; font-style:italic; color:#e9d4e2; margin-top:10px; line-height:1.5}
.ps-discover-tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px}
.ps-discover-intro{font-size:13px; line-height:1.6; color:var(--mid); margin-top:12px}
.ps-discover-actions{display:flex; gap:10px; margin-top:auto; padding-top:18px; flex-wrap:wrap}
@media (max-width:560px){ .ps-discover-art{flex-basis:100%; max-width:100%} }

/* ── Notifications ── */
.ps-notiflist{display:flex; flex-direction:column; gap:10px}
.ps-notifrow{display:flex; gap:14px; padding:14px 16px; border-radius:14px; background:var(--card); border:1px solid var(--border)}
.ps-notifrow.unread{border-color:rgba(var(--brand-rgb),.5); box-shadow:0 0 0 1px rgba(var(--brand-rgb),.2)}
.ps-notif-ic{font-size:22px; flex-shrink:0; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:10px}
.ps-notif-ic.ok{background:rgba(79,214,160,.14); color:#4fd6a0; font-weight:800}
.ps-notif-ic.bad{background:rgba(255,93,108,.14); color:#ff8a94; font-weight:800}
.ps-notif-title{font-family:var(--fd); font-weight:700; font-size:15px; color:var(--text)}
.ps-notif-body{font-size:13px; line-height:1.55; color:var(--mid); margin-top:4px}
.ps-notif-date{font-family:var(--fm); font-size:10px; color:var(--dim); margin-top:6px}

/* ── auth: header button ── */
.ps-auth-btn{display:inline-flex; align-items:center; gap:7px}
.ps-auth-dot{width:8px; height:8px; border-radius:50%; background:#34d399; box-shadow:0 0 8px #34d399}

/* ── auth: login/signup screen ── */
.ps-auth-ov{position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(4,0,8,.72); backdrop-filter:blur(8px)}
.ps-auth-ov[hidden]{display:none}
.ps-auth-card{position:relative; width:min(420px,100%); padding:30px 28px 26px; border-radius:22px;
  background:linear-gradient(160deg, rgba(30,6,48,.96), rgba(14,1,24,.98)); border:1px solid var(--border2);
  box-shadow:0 30px 90px rgba(0,0,0,.6), var(--glow-sm); text-align:center}
.ps-auth-x{position:absolute; top:14px; right:16px; background:none; border:0; color:var(--mid); font-size:18px; cursor:pointer}
.ps-auth-x:hover{color:var(--text)}
.ps-auth-card .ps-logo.big{font-size:30px; margin-bottom:8px}
.ps-auth-reason{font-size:12.5px; color:var(--blush); margin-bottom:14px}
.ps-auth-tabs{display:flex; gap:6px; margin:14px 0 18px; padding:4px; border-radius:13px; background:rgba(0,0,0,.28)}
.ps-auth-tab{flex:1; padding:9px 0; border:0; border-radius:10px; cursor:pointer; background:none;
  font:700 12.5px var(--fu); color:var(--mid); transition:.15s}
.ps-auth-tab:hover{color:var(--text)}
.ps-auth-tab.on{background:rgba(var(--brand-rgb),.16); color:var(--pink); box-shadow:var(--glow-sm)}
.ps-auth-body{display:flex; flex-direction:column; gap:12px; text-align:left}
.ps-auth-field{display:flex; flex-direction:column; gap:5px}
.ps-auth-field span{font-family:var(--fm); font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--sys)}
.ps-auth-field input{background:var(--card); border:1px solid var(--border2); border-radius:11px; padding:11px 13px;
  font:500 14px var(--fu); color:var(--text)}
.ps-auth-field input:focus{outline:none; border-color:var(--pink); box-shadow:var(--glow-sm)}
.ps-auth-hint{font-size:11.5px; line-height:1.5; color:var(--mid)}
.ps-auth-err{min-height:16px; font-size:12px; color:#ff5277}
.ps-auth-go{width:100%; margin-top:4px}

/* ── drafts: profile tabs ── */
.ps-profile-tabs{display:flex; gap:6px; margin:24px 0 14px; padding:4px; border-radius:13px; background:rgba(0,0,0,.28); width:max-content}
.ps-profile-tab{padding:9px 18px; border:0; border-radius:10px; cursor:pointer; background:none;
  font:700 13px var(--fu); color:var(--mid); transition:.15s}
.ps-profile-tab em{font-style:normal; font-family:var(--fm); font-size:10px; margin-left:6px; opacity:.8}
.ps-profile-tab:hover{color:var(--text)}
.ps-profile-tab.on{background:rgba(var(--brand-rgb),.16); color:var(--pink); box-shadow:var(--glow-sm)}

/* ── drafts: cards ── */
.ps-draftgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px}
.ps-draftcard{border:1px dashed rgba(var(--brand-rgb),.4); border-radius:16px; background:var(--card); padding:10px; display:flex; flex-direction:column}
.ps-draftcard-art{position:relative; border-radius:12px; overflow:hidden; aspect-ratio:3/4; background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center}
.ps-draftcard-art img{width:100%; height:100%; object-fit:cover; display:block}
.ps-draftcard-ph{font-size:40px; opacity:.5}
.ps-draftchip{position:absolute; bottom:8px; right:8px; padding:3px 10px; border-radius:999px;
  font:700 10px var(--fm); letter-spacing:.5px; color:var(--sys); background:rgba(10,0,18,.85); border:1px solid rgba(169,139,255,.5)}
.ps-draftcard-name{font-family:var(--fd); font-weight:700; font-size:15px; color:var(--text); margin-top:9px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ps-draftcard-tag{font-size:11.5px; color:var(--mid); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ps-draftcard-acts{display:flex; gap:7px; margin-top:10px}
.ps-btn.tiny{padding:6px 11px; font-size:11.5px; border-radius:9px}

/* ── drafts: studio banners + auto-save status ── */
.ps-draft-status{margin-left:auto; margin-right:12px; font-family:var(--fm); font-size:10px; letter-spacing:.4px; color:var(--sys)}
.ps-studio-draftnote{margin-bottom:16px; padding:11px 14px; border-radius:11px; font-size:12.5px; line-height:1.5;
  color:#c8b6ff; background:rgba(169,139,255,.09); border:1px dashed rgba(169,139,255,.4)}
.ps-studio-resume{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; padding:10px 14px;
  border-radius:11px; font-size:12.5px; color:var(--text); background:rgba(var(--brand-rgb),.08); border:1px solid rgba(var(--brand-rgb),.3)}
.ps-studio-resume b{color:var(--pink)}
.ps-studio-resume-acts{margin-left:auto; display:flex; gap:7px}
.ps-draft-discard{margin-right:auto}

/* hub all-bots row sub-label */
.hub-row-sub{font-family:var(--fm); font-size:10px; letter-spacing:.6px; color:var(--dim); margin-right:auto; margin-left:12px}

/* detail: creator aggregate stats */
.ps-detail-bystats{display:block; font-size:11px; color:var(--mid); margin-top:2px}

/* ── event board: challenge fields ── */
.ev-chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:11px}
.ev-chip{padding:5px 12px; border-radius:999px; font:700 10px var(--fm); letter-spacing:.8px}
.ev-chip.theme{color:var(--pink); background:rgba(var(--brand-rgb),.10); border:1px solid rgba(var(--brand-rgb),.35)}
.ev-chip.genre{color:var(--sys); background:rgba(var(--sys-rgb),.10); border:1px solid rgba(var(--sys-rgb),.35)}
.ev-podium{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; padding:10px 14px;
  border-radius:12px; background:rgba(0,0,0,.3); border:1px solid var(--border)}
.ev-podium b{font-family:var(--fm); font-size:8.5px; letter-spacing:1.5px; color:var(--dim)}
.ev-pd{font:800 13px var(--fu); padding:4px 11px; border-radius:999px}
.ev-pd.gold{color:#ffd76a; background:rgba(255,199,64,.10); border:1px solid rgba(255,199,64,.4)}
.ev-pd.silver{color:#d7dbe6; background:rgba(200,208,226,.09); border:1px solid rgba(200,208,226,.35)}
.ev-pd.bronze{color:#f0a172; background:rgba(226,140,86,.10); border:1px solid rgba(226,140,86,.4)}
.ev-demo{padding:3px 9px; border-radius:999px; font:700 9px var(--fm); letter-spacing:1px;
  color:#8ef0ff; background:rgba(142,240,255,.08); border:1px dashed rgba(142,240,255,.45)}
.evb-demonote{grid-column:1/-1; margin-top:4px; padding:9px 14px; border-radius:11px; text-align:center;
  font-family:var(--fm); font-size:10px; letter-spacing:.5px; color:var(--dim);
  border:1px dashed var(--border2); background:rgba(0,0,0,.2)}

/* ornamental divider closing the event board */
.evb-divider{display:flex; align-items:center; gap:16px; margin:30px 0 8px}
.evb-divider::before,.evb-divider::after{content:''; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--brand-rgb),.45), transparent)}
.evb-divider span{color:var(--pink); font-size:13px; text-shadow:var(--glow-sm); opacity:.9}
.evc-points{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:6px}
.evc-points input{background:var(--card); border:1px solid var(--border2); border-radius:10px; padding:9px 11px;
  font:600 13px var(--fu); color:var(--text)}

/* ── desktop collapse-to-rail ─────────────────────────────────────
   The injected toggle sits at the top of the nav; body.nav-rail shrinks
   the sidebar to just the icon tiles. Labels hide; hovering a tile pops
   its label out as a flyout. Guarded to desktop so the mobile drawer
   (≤860px) is never affected. */
.ps-rail-toggle,.ps-rail-ic{display:none !important}
.ps-rail-toggle-off{align-self:flex-end; display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin:0 2px 6px 0; border-radius:9px; cursor:pointer;
  background:var(--card); border:1px solid var(--border); color:var(--mid);
  font-size:14px; line-height:1; transition:.15s}
.ps-rail-toggle:hover{border-color:var(--border2); color:var(--text); box-shadow:var(--glow-sm)}
.ps-rail-ic{transition:transform .2s}

@media (min-width:861px){
  body.nav-rail .ps-nav{flex-basis:76px; width:76px; padding-left:10px; padding-right:10px}
  body.nav-rail .ps-nav-item{justify-content:center; padding:8px; gap:0; position:relative}
  body.nav-rail .ps-nav-lbl{display:none}
  body.nav-rail .ps-nav-sect{display:none}
  body.nav-rail .ps-nav-sep{margin-left:14px; margin-right:14px}
  body.nav-rail .ps-nav-foot{padding-left:6px; padding-right:6px}
  body.nav-rail .ps-nav-nsfw{justify-content:center; font-size:0; gap:0}   /* keep the checkbox, drop the text */
  body.nav-rail .ps-nav-nsfw input{font-size:10px}

  /* bottom SFW/NSFW/Trigger pills — stack as compact squares so they never overflow the rail */
  body.nav-rail .ps-nav-ctog{flex-direction:column; align-items:center; gap:7px; padding:2px 0}
  body.nav-rail .ps-nav-ctog .ps-ctog-pill{width:44px; min-width:44px; height:34px; padding:0; justify-content:center;
    gap:0; font-size:0; overflow:hidden; border-radius:11px}
  /* the leading emoji in each pill sits in a ::first-letter-safe span if present; fall back to a marker */
  body.nav-rail .ps-nav-ctog .ps-ctog-pill::before{font-size:16px; line-height:1}
  body.nav-rail .ps-nav-ctog .ps-ctog-pill.sfw::before{content:'🌱'}
  body.nav-rail .ps-nav-ctog .ps-ctog-pill.nsfw::before{content:'🔥'}
  body.nav-rail .ps-nav-ctog .ps-ctog-pill.trig::before{content:'⚠'}
  body.nav-rail .ps-rail-toggle{align-self:center; margin-right:0}
  body.nav-rail .ps-rail-ic{transform:rotate(180deg)}   /* « becomes » */

  /* hover-reveal label flyout on each tile while collapsed */
  body.nav-rail .ps-nav-item:hover::after{
    content:attr(data-label); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
    white-space:nowrap; padding:7px 12px; border-radius:10px; z-index:60;
    background:var(--card2); border:1px solid rgba(var(--brand-rgb),.35); color:var(--text);
    font:600 13px var(--fu); box-shadow:0 8px 26px rgba(0,0,0,.55), var(--glow-sm); pointer-events:none}
}
.ps-view{animation:psFadeUp .35s ease}
.ps-page-head{display:flex; align-items:baseline; gap:14px; padding:24px 26px 10px; flex-wrap:wrap}
.ps-page-head h1{font-family:var(--fd); font-weight:900; font-size:28px; letter-spacing:.4px;
  background:linear-gradient(135deg,#fff,var(--blush) 75%,var(--pink)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent}
.ps-page-head span{font-family:var(--fm); font-size:10px; letter-spacing:1px; color:var(--dim)}

/* ═══ HUB ═══ */
.hub-feature{position:relative; margin:20px 26px; border-radius:22px; overflow:hidden;
  height:clamp(280px, 34vw, 420px); min-height:0;
  display:flex; align-items:flex-end; background-size:cover; background-position:center 30%;
  border:1px solid var(--border2); box-shadow:0 20px 60px rgba(0,0,0,.5), var(--glow)}
.hub-feature-scrim{position:absolute; inset:0; background:linear-gradient(105deg, rgba(8,0,14,.95) 30%, rgba(8,0,14,.35) 75%, transparent)}
.hub-feature-copy{position:relative; padding:30px 34px; max-width:560px}
.hub-kicker{font-family:var(--fm); font-size:10px; letter-spacing:3px; color:var(--pink); text-shadow:var(--glow-sm)}
.hub-feature-name{font-family:var(--fd); font-weight:900; font-size:38px; letter-spacing:.5px; margin:8px 0 6px;
  background:linear-gradient(135deg,#fff,var(--blush) 70%,var(--pink)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent}
.hub-feature-tag{color:#f0d6e4; font-size:15px; line-height:1.5; margin-bottom:14px; max-width:440px}
.hub-feature-by{display:inline-flex; align-items:center; gap:9px; font-family:var(--fm); font-size:11px;
  color:var(--mid); letter-spacing:.5px; cursor:pointer; margin-bottom:16px}
.hub-feature-by img{width:26px; height:26px; border-radius:50%; border:2px solid var(--pink-dim)}
.hub-feature-by:hover{color:var(--pink)}
.hub-feature-copy .ps-btn{display:block}
.hub-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:6px 26px 4px; max-width:640px}
.hub-stat{border:1px solid var(--border); border-radius:16px; padding:14px 10px; text-align:center; background:var(--card)}
.hub-stat b{display:block; font-family:var(--fd); font-weight:900; font-size:24px; color:var(--text)}
.hub-stat span{font-family:var(--fm); font-size:9px; letter-spacing:2px; color:var(--dim)}
.hub-row{padding:18px 0 4px}
.hub-row-head{display:flex; align-items:baseline; justify-content:space-between; padding:0 26px 12px}
.hub-row-head h2{font-family:var(--fd); font-weight:700; font-size:19px; letter-spacing:.3px}
.hub-more{background:none; border:0; color:var(--pink); font-family:var(--fm); font-size:10px;
  letter-spacing:1px; cursor:pointer}
.hub-more:hover{text-shadow:var(--glow-sm)}
.hub-scroller{display:flex; gap:16px; overflow-x:auto; overflow-y:hidden; padding:2px 26px 14px; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none}
.hub-scroller::-webkit-scrollbar{display:none; height:0}
.hub-card{flex:0 0 176px; scroll-snap-align:start; border:1px solid var(--border); border-radius:16px;
  background:var(--card); cursor:pointer; padding:0; transition:transform .18s, box-shadow .25s, border-color .18s}
.hub-card:hover{transform:translateY(-4px); border-color:var(--border2); box-shadow:var(--glow-sm)}
.hub-card-img{position:relative; aspect-ratio:3/5; overflow:hidden; border-radius:15px}
.hub-card-img img{width:100%; height:100%; object-fit:cover}
.hub-card-name{position:absolute; inset:auto 0 0 0; padding:10px 12px; font-family:var(--fd); font-weight:700;
  font-size:15px; color:var(--text); text-shadow:0 2px 12px rgba(0,0,0,.8)}
.hub-creators{display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; padding:2px 26px 14px; scrollbar-width:none; -ms-overflow-style:none}
.hub-creators::-webkit-scrollbar{display:none; height:0}
.hub-creator{flex:0 0 150px; border:1px solid var(--border); border-radius:16px; background:var(--card);
  padding:18px 12px; text-align:center; cursor:pointer; transition:all .18s}
.hub-creator:hover{border-color:var(--border2); box-shadow:var(--glow-sm); transform:translateY(-3px)}
.hub-creator-pfp{width:60px; height:60px; border-radius:50%; border:2px solid var(--pink-dim); box-shadow:var(--glow-sm)}
.hub-creator-name{font-family:var(--fd); font-weight:700; font-size:14px; margin:9px 0 3px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.hub-creator-meta{font-family:var(--fm); font-size:9px; letter-spacing:.5px; color:var(--dim)}

/* ═══ CREATORS directory ═══ */
.creators-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; padding:14px 8px 60px}
.creator-card{position:relative; display:flex; flex-direction:column; gap:0; padding:0; overflow:hidden;
  border:1px solid var(--border); border-radius:20px; background:var(--card); text-align:left; cursor:pointer;
  transition:transform .18s, box-shadow .25s, border-color .18s}
.creator-card:hover{border-color:var(--border2); box-shadow:0 14px 40px rgba(0,0,0,.5), var(--glow-sm); transform:translateY(-3px)}
.creator-card-banner{height:110px; background:linear-gradient(135deg,#2a1030,#120814 60%,#3a1548); overflow:hidden}
.creator-card-banner img{width:100%; height:100%; object-fit:cover; display:block}
.creator-card-pfp{width:72px; height:72px; border-radius:50%; object-fit:cover; margin:-36px 16px 0;
  border:3px solid var(--card); box-shadow:var(--glow-sm); background:#1a0e18; position:relative; z-index:1}
.creator-card-info{padding:10px 16px 14px}
.creator-card-name{font-family:var(--fd); font-weight:800; font-size:20px; line-height:1.15}
.creator-card-handle{font-family:var(--fm); font-size:12px; color:var(--mid); margin-top:2px}
.creator-card-bio{font-size:13px; color:#d7c6e0; margin-top:8px; line-height:1.4; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.creator-card-meta{font-family:var(--fm); font-size:11px; letter-spacing:.3px; color:var(--dim); margin-top:8px}
.creator-card-meta b{color:var(--text)}
.creator-card-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:0 10px 12px}
.creator-card-thumbs img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:8px; display:block; background:#160b14}
.creator-card-info{width:100%}

/* ═══ single CREATOR profile ═══ */
.creator-back{margin:18px 26px 0; background:none; border:1px solid var(--border); color:var(--mid);
  border-radius:11px; padding:7px 15px; font-family:var(--fm); font-size:11px; letter-spacing:.5px; cursor:pointer}
.creator-back:hover{border-color:var(--border2); color:var(--text)}
.creator-hero{display:flex; align-items:center; gap:20px; padding:20px 26px 18px; flex-wrap:wrap}
.creator-hero-pfp{width:92px; height:92px; border-radius:50%; border:3px solid var(--pink); box-shadow:0 0 30px rgba(255,45,120,.35), var(--glow)}
.creator-hero-col{min-width:0}
.creator-hero-name{font-family:var(--fd); font-weight:900; font-size:30px; letter-spacing:.4px;
  background:linear-gradient(135deg,#fff,var(--blush) 70%,var(--pink)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent}
.creator-hero-stats{display:flex; gap:22px; margin-top:8px}
.creator-hero-stats span{font-family:var(--fm); font-size:11px; letter-spacing:.5px; color:var(--dim)}
.creator-hero-stats b{font-family:var(--fd); font-weight:900; font-size:19px; color:var(--text); margin-right:5px}

/* clickable detail byline */
.ps-detail-bycol{background:none; border:0; cursor:pointer; text-align:left; padding:0}
.ps-detail-bycol:hover .ps-detail-byname{color:var(--pink); text-shadow:var(--glow-sm)}

/* ═══ responsive: sidenav collapses to drawer ═══ */
@media (max-width:860px){
  .ps-navtoggle{display:inline-block}
  .ps-nav{position:fixed; top:0; left:0; bottom:0; height:100dvh; max-height:100dvh; z-index:150; transform:translateX(-100%); width:min(288px,84vw); flex-basis:min(288px,84vw);
    transition:transform .25s ease; padding-top:22px; padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    background:rgba(12,1,20,.98)}
  .ps-nav.open{transform:none; box-shadow:20px 0 60px rgba(0,0,0,.6)}
  .ps-navscrim{display:block; position:fixed; inset:0; z-index:149; background:rgba(4,0,8,.6); backdrop-filter:blur(4px)}
  .ps-navscrim[hidden]{display:none}
  .hub-feature-name{font-size:28px}
  .hub-stats{grid-template-columns:repeat(2,1fr)}
  .ps-grid, #grid, .ps-draftgrid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:12px}
}

/* ═══ NSFW MODE — re-theme the whole site when 18+ is on ═══ */
body.theme-nsfw{
  --pink:#ff2e2e; --rose:#ff5a1f; --blush:#ff9d5c; --sys:#ffb347;
  --brand-rgb:255,46,46; --sys-rgb:255,179,71;
  --pink-soft:rgba(255,46,46,.10); --pink-dim:rgba(255,46,46,.28);
  --border:rgba(255,46,46,.14); --border2:rgba(255,46,46,.34);
  --bg:#0c0102; --surf:#180505; --card:#1e0708; --card2:#280a0b; --card-hi:#340d0d;
  --text:#ffe8e4; --mid:#c98a7a; --dim:#7a4038;
  --glow:0 0 30px rgba(255,46,46,.4),0 0 60px rgba(255,46,46,.14);
  --glow-sm:0 0 14px rgba(255,46,46,.32);
  --glow-sys:0 0 16px rgba(255,179,71,.34);
}
/* the body ambient orbs shift warm too */
body.theme-nsfw{
  background-image:
    radial-gradient(60vw 50vh at 82% -8%, rgba(255,90,31,.18), transparent 60%),
    radial-gradient(50vw 40vh at 10% 12%, rgba(255,46,46,.14), transparent 55%),
    radial-gradient(45vw 45vh at 50% 110%, rgba(255,157,92,.12), transparent 60%);
}
/* an 18+ ribbon on the logo whenever NSFW content is enabled */
body.nsfw-active .ps-logo::after{content:'18+'; font-family:var(--fm); font-size:9px; font-weight:700;
  letter-spacing:1px; color:#fff; background:linear-gradient(135deg,var(--pink),var(--rose));
  padding:2px 7px; border-radius:99px; margin-left:10px; vertical-align:middle; box-shadow:var(--glow-sm);
  -webkit-text-fill-color:#fff}

/* ═══ CONTENT THEMES — each single category, plus all-on rainbow ═══ */
/* 🌱 SFW — clean, cool, safe (sky + mint) */
body.theme-sfw{
  --pink:#38bdf8; --rose:#22d3ee; --blush:#7dd3fc; --sys:#34d399;
  --brand-rgb:56,189,248; --sys-rgb:52,211,153;
  --pink-soft:rgba(56,189,248,.10); --pink-dim:rgba(56,189,248,.26);
  --border:rgba(56,189,248,.14); --border2:rgba(56,189,248,.32);
  --bg:#02060e; --surf:#04101a; --card:#061620; --card2:#082430; --card-hi:#0a2e3e;
  --text:#e6f6ff; --mid:#7aa8c0; --dim:#3d6478;
  --glow:0 0 30px rgba(56,189,248,.30),0 0 60px rgba(56,189,248,.12);
  --glow-sm:0 0 14px rgba(56,189,248,.26);
  --glow-sys:0 0 16px rgba(52,211,153,.30);
}
body.theme-sfw{ background-image:
  radial-gradient(60vw 50vh at 18% 0%, rgba(52,211,153,.15), transparent 60%),
  radial-gradient(50vw 40vh at 82% 6%, rgba(56,189,248,.14), transparent 55%),
  radial-gradient(45vw 45vh at 50% 110%, rgba(45,212,191,.12), transparent 60%); }

/* ⚠ Trigger — amber / gold caution */
body.theme-trig{
  --pink:#fbbf24; --rose:#f59e0b; --blush:#fcd34d; --sys:#fb923c;
  --brand-rgb:251,191,36; --sys-rgb:251,146,60;
  --pink-soft:rgba(251,191,36,.10); --pink-dim:rgba(251,191,36,.28);
  --border:rgba(251,191,36,.16); --border2:rgba(251,191,36,.34);
  --bg:#0c0800; --surf:#141000; --card:#1a1400; --card2:#221a00; --card-hi:#2c2200;
  --text:#fff4d6; --mid:#c9a86a; --dim:#7a6030;
  --glow:0 0 30px rgba(251,191,36,.32),0 0 60px rgba(245,158,11,.14);
  --glow-sm:0 0 14px rgba(251,191,36,.30);
  --glow-sys:0 0 16px rgba(251,146,60,.32);
}
body.theme-trig{ background-image:
  radial-gradient(60vw 50vh at 82% -8%, rgba(245,158,11,.16), transparent 60%),
  radial-gradient(50vw 40vh at 10% 12%, rgba(251,191,36,.13), transparent 55%),
  radial-gradient(45vw 45vh at 50% 110%, rgba(251,146,60,.12), transparent 60%); }

/* 🌈 RAINBOW — all three on: flowing gradient across the brand surfaces */
body.theme-rainbow{
  --pink:#ff6ec7; --rose:#c77dff; --blush:#ffa9e7; --sys:#4cc9f0;
  --brand-rgb:255,110,199; --sys-rgb:76,201,240;
  --pink-soft:rgba(255,110,199,.10); --pink-dim:rgba(255,110,199,.26);
  --border:rgba(255,110,199,.16); --border2:rgba(255,110,199,.34);
  --bg:#0a0410; --surf:#120a1c; --card:#170f24; --card2:#1f1430; --card-hi:#2a1c40;
  --text:#fdeaff; --mid:#c3a3c8; --dim:#6a4d70;
  --glow:0 0 30px rgba(255,110,199,.30),0 0 60px rgba(76,201,240,.12);
  --glow-sm:0 0 14px rgba(255,110,199,.26);
  --glow-sys:0 0 16px rgba(76,201,240,.30);
  --rainbow:linear-gradient(90deg,#ff2d78 0%,#ff8a3d 16%,#ffe83d 33%,#3dff8a 50%,#3da8ff 66%,#a83dff 83%,#ff2d78 100%);
}
@keyframes psRainbowFlow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
body.theme-rainbow{ background-image:
  radial-gradient(50vw 40vh at 12% 0%, rgba(255,45,120,.16), transparent 60%),
  radial-gradient(45vw 38vh at 50% 4%, rgba(61,168,255,.14), transparent 58%),
  radial-gradient(50vw 40vh at 88% 8%, rgba(168,61,255,.15), transparent 60%),
  radial-gradient(50vw 45vh at 50% 110%, rgba(61,255,138,.12), transparent 60%); }
/* names + logo flow rainbow as text */
body.theme-rainbow :is(.ps-logo,.ps-hero-title,.ps-peek-name,.ps-name,.ps-detail-name){
  background:var(--rainbow); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:psRainbowFlow 7s linear infinite}
body.theme-rainbow .ps-logo::before{-webkit-text-fill-color:#ff6ec7; color:#ff6ec7}
/* filled brand surfaces flow rainbow as background */
body.theme-rainbow :is(.ps-btn.primary,.ps-nsfw,.ps-hero-pfp){
  background:var(--rainbow); background-size:200% 100%;
  animation:psRainbowFlow 7s linear infinite; color:#fff; -webkit-text-fill-color:#fff; border-color:transparent}
body.theme-rainbow .ps-logo::after{background:var(--rainbow); background-size:200% 100%; animation:psRainbowFlow 7s linear infinite}
body.theme-rainbow .ps-nav-item.active .ps-nav-ic{background:var(--rainbow); background-size:200% 100%;
  animation:psRainbowFlow 7s linear infinite; color:#fff; border-color:transparent}
body.theme-rainbow .ps-nav-item.active{border-color:rgba(255,110,199,.4)}

/* smooth the flip — colors, not layout (applies to every theme) */
body, body *{transition:background-color .5s ease, border-color .5s ease, color .35s ease, box-shadow .5s ease}
@media (prefers-reduced-motion:reduce){
  body.theme-rainbow :is(.ps-logo,.ps-hero-title,.ps-peek-name,.ps-name,.ps-detail-name,.ps-btn.primary,.ps-nsfw,.ps-hero-pfp,.ps-logo::after,.ps-nav-item.active .ps-nav-ic){animation:none}
}

/* ═══ content-filter toggle pills (toolbar + sidenav) ═══ */
.ps-ctog{display:inline-flex; gap:6px; flex-wrap:wrap; align-items:center}
.ps-nav-ctog{display:flex; gap:6px; flex-wrap:wrap; padding:2px 0}
.ps-ctog-pill{position:relative; display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  border:1px solid var(--border2); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700;
  letter-spacing:.2px; color:var(--mid); background:var(--card); user-select:none; white-space:nowrap;
  transition:border-color .15s, color .15s, background .15s, box-shadow .15s}
.ps-ctog-pill input{position:absolute; opacity:0; width:0; height:0; pointer-events:none}
.ps-ctog-pill:hover{color:var(--text)}
/* each category lights up in its own colour when checked */
.ps-ctog-pill.sfw:has(input:checked){border-color:#38bdf8; color:#7dd3fc; background:rgba(56,189,248,.12); box-shadow:0 0 14px rgba(56,189,248,.28)}
.ps-ctog-pill.nsfw:has(input:checked){border-color:#ff2e2e; color:#ff8a6a; background:rgba(255,46,46,.12); box-shadow:0 0 14px rgba(255,46,46,.30)}
.ps-ctog-pill.trig:has(input:checked){border-color:#fbbf24; color:#fcd34d; background:rgba(251,191,36,.12); box-shadow:0 0 14px rgba(251,191,36,.28)}
/* keyboard focus ring */
.ps-ctog-pill:has(input:focus-visible){outline:2px solid var(--pink); outline-offset:2px}
.ps-adv-note{font-size:11.5px; line-height:1.55; color:var(--mid); margin:4px 0 10px}
.ps-adv-note b{color:var(--blush)}

/* ═══ 📣 EVENT BOARD ═══ */
.evb{padding:20px 26px 8px}
.evb-head{display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.evb-head h2{font-family:var(--fd); font-weight:900; font-size:22px; letter-spacing:.3px; margin:0;
  display:flex; align-items:center; gap:9px}
.evb-head .spacer{flex:1}
.evb-admin-btn{background:var(--card); border:1px solid var(--border2); color:var(--sys);
  border-radius:11px; padding:7px 13px; font-family:var(--fm); font-size:10px; letter-spacing:1px; cursor:pointer}
.evb-admin-btn:hover{box-shadow:var(--glow-sys)}
.evb-list{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:stretch}
.evb-empty{border:1px dashed var(--border2); border-radius:16px; padding:26px; text-align:center;
  color:var(--dim); font-size:13px}
.ev-card{position:relative; border:1px solid var(--border); border-radius:18px; overflow:hidden;
  background:var(--card); display:flex; flex-direction:column; gap:0; animation:psFadeUp .35s ease}
.ev-card.pinned{border-color:var(--border2); box-shadow:var(--glow-sm)}
.ev-banner{flex:0 0 auto; height:150px; background-size:cover; background-position:center}
.ev-card.no-banner .ev-banner{display:none}
.ev-body{flex:1; padding:16px 18px; min-width:0; display:flex; flex-direction:column}
.ev-body .ev-foot{margin-top:auto; padding-top:12px}
.ev-toprow{display:flex; align-items:center; gap:9px; margin-bottom:7px; flex-wrap:wrap}
.ev-kind{font-family:var(--fm); font-size:8.5px; letter-spacing:1.5px; text-transform:uppercase;
  padding:3px 9px; border-radius:99px; border:1px solid var(--border2)}
.ev-kind.event{color:var(--pink); background:var(--pink-soft)}
.ev-kind.contest{color:#ffcf7a; border-color:rgba(255,207,122,.4); background:rgba(255,207,122,.08)}
.ev-kind.announcement{color:var(--sys); background:rgba(var(--sys-rgb),.08)}
.ev-kind.update{color:#5b8def; border-color:rgba(91,141,239,.4); background:rgba(91,141,239,.08)}
.ev-kind.spotlight{color:var(--blush); background:var(--pink-soft)}
.ev-pin{font-size:12px; color:var(--pink)}
.ev-when{font-family:var(--fm); font-size:9px; letter-spacing:.5px; color:var(--dim); margin-left:auto}
.ev-title{font-family:var(--fd); font-weight:700; font-size:19px; letter-spacing:.2px; line-height:1.25}
.ev-text{color:var(--mid); font-size:13px; line-height:1.6; margin:7px 0 0; white-space:pre-wrap; word-break:break-word}
.ev-foot{display:flex; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap}
.ev-author{font-family:var(--fm); font-size:9.5px; letter-spacing:.5px; color:var(--dim)}
.ev-cta{background:linear-gradient(135deg,var(--pink),var(--rose)); color:#fff; border:0; border-radius:11px;
  padding:8px 16px; font-weight:700; font-size:12px; text-decoration:none; box-shadow:var(--glow-sm)}
.ev-del{background:none; border:1px solid var(--border); color:var(--dim); border-radius:9px; padding:5px 10px;
  font-family:var(--fm); font-size:9px; cursor:pointer; margin-left:auto}
.ev-del:hover{border-color:#ff5a5a; color:#ff5a5a}
@media (max-width:1100px){ .evb-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:680px){ .evb-list{grid-template-columns:1fr} .ev-banner{height:132px} }

/* admin composer modal */
.evc-field{display:block; font-family:var(--fm); font-size:9px; letter-spacing:2px; color:var(--dim); margin-top:2px}
.evc-field input, .evc-field textarea, .evc-field select{width:100%; margin-top:5px; background:var(--card);
  border:1px solid var(--border); border-radius:11px; padding:10px 13px; font:13px var(--fu); color:var(--text)}
.evc-field textarea{min-height:80px; resize:vertical}
.evc-two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.evc-check{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text); cursor:pointer; margin-top:4px}
.evc-check input{width:17px; height:17px; accent-color:var(--pink)}
.evc-lock{font-family:var(--fm); font-size:10px; color:var(--dim); text-align:center; padding:6px 0}
/* ═══ studio redesign: numbered sections, artwork zones, counters ═══ */
.studio-sec{border:1px solid var(--border); border-radius:16px; padding:16px 18px 18px; margin:0;
  background:linear-gradient(180deg, rgba(var(--brand-rgb),.04), transparent 40%)}
.studio-sec + .studio-sec{margin-top:14px}
.studio-sec-h{display:flex; align-items:center; gap:10px; font-family:var(--fd); font-weight:800; font-size:16px;
  color:var(--text); margin-bottom:14px}
.studio-sec-n{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex-shrink:0;
  border-radius:50%; background:rgba(var(--brand-rgb),.16); border:1px solid rgba(var(--brand-rgb),.4);
  color:var(--pink); font:800 12px var(--fu); box-shadow:var(--glow-sm)}

/* artwork: portrait leads, two backgrounds stack beside it */
.ps-studio-art{display:grid; grid-template-columns:minmax(160px,1fr) 1.4fr; gap:14px; align-items:start}
.ps-art-side{display:flex; flex-direction:column; gap:14px}
.ps-studio-art .ps-imgslot{margin:0}
.ps-studio-art label{display:block; font-family:var(--fm); font-size:9px; letter-spacing:1px; text-transform:uppercase;
  color:var(--sys); margin-bottom:7px; line-height:1.4}

/* aspect-outlined drop zones — the outline shows the crop each image fills */
.art-zone{position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;
  border:2px dashed var(--pink-dim); transition:border-color .15s, box-shadow .15s}
.art-zone::after{content:''; position:absolute; inset:8px; border:1px solid rgba(var(--brand-rgb),.22);
  border-radius:10px; pointer-events:none}
.art-zone:hover, .art-zone:focus-visible{border-color:var(--pink); box-shadow:var(--glow-sm); outline:none}
.art-portrait .art-zone{aspect-ratio:3/5; min-height:0}
/* image-scan status dot + caption (🔵 scanning · 🟢 clean · 🔴 flagged) */
.ps-imgslot{position:relative}
.ps-scandot{position:absolute; top:8px; right:8px; width:16px; height:16px; border-radius:50%; z-index:6; border:2px solid rgba(0,0,0,.45); background:#667; display:none; cursor:pointer; padding:0; transition:transform .12s}
.ps-scandot[data-state]{display:block}
.ps-scandot:hover{transform:scale(1.18)}
.ps-scandot[data-state="scanning"]{background:#38bdf8; animation:ps-scanpulse 1s ease-in-out infinite}
.ps-scandot[data-state="info"]{background:#38bdf8}
.ps-scandot[data-state="good"]{background:#3ad29a; box-shadow:0 0 10px rgba(58,210,154,.55)}
.ps-scandot[data-state="bad"]{background:#ff3b3b; box-shadow:0 0 12px rgba(255,59,59,.7)}
.ps-scanpop{position:absolute; top:30px; right:8px; width:min(280px,88%); z-index:20; background:var(--panel,#14121b); border:1px solid var(--border2); border-radius:12px; padding:12px 13px; box-shadow:0 16px 44px rgba(0,0,0,.55)}
.ps-scanpop[hidden]{display:none}
.ps-scanpop-h{font-family:var(--fm); font-size:12px; font-weight:700; margin-bottom:6px}
.ps-scanpop-h.good{color:#4fd6a0} .ps-scanpop-h.bad{color:#ff8a94} .ps-scanpop-h.info, .ps-scanpop-h.scanning{color:#7dd3fc}
.ps-scanpop-b{font-size:12px; line-height:1.5; color:var(--dim)}
.ps-scanpop-b b, .ps-scanpop-tip b{color:var(--text); font-weight:600}
.ps-scanpop-tip{font-size:11.5px; line-height:1.55; color:#ecd9a6; background:rgba(240,200,100,.1); border:1px solid rgba(240,200,100,.28); border-radius:8px; padding:8px 10px; margin-top:9px}
@keyframes ps-scanpulse{0%,100%{opacity:1}50%{opacity:.35}}
.ps-scanmsg{font-family:var(--fm); font-size:10.5px; line-height:1.4; margin-top:6px; min-height:14px; color:var(--dim)}
.ps-scanmsg[data-state="scanning"], .ps-scanmsg[data-state="info"]{color:#7dd3fc}
.ps-scanmsg[data-state="good"]{color:#4fd6a0}
.ps-scanmsg[data-state="bad"]{color:#ff8a94; font-weight:600}
.art-charbg .art-zone{aspect-ratio:4/5; min-height:0}
.art-wide .art-zone{aspect-ratio:16/9; min-height:0}
.ps-studio-art .art-zone img{width:100%; height:100%; object-fit:cover; max-width:none; max-height:none; margin:0; border-radius:9px}
.ps-studio-art .art-zone span{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; color:var(--mid)}

/* corner marks so an empty zone reads as a frame, not a void */
.art-zone::before{content:''; position:absolute; top:8px; left:8px; width:14px; height:14px;
  border-top:2px solid rgba(var(--brand-rgb),.5); border-left:2px solid rgba(var(--brand-rgb),.5); border-radius:3px 0 0 0}

/* live character counters */
.ps-count{font-family:var(--fm); font-size:10px; letter-spacing:.4px; color:var(--dim); text-align:right; margin-top:5px}
.ps-count.over{color:#ff5277; font-weight:700}

/* CREATE call-to-action */
.ps-create-cta{background:linear-gradient(120deg, var(--pink), var(--rose)); border:0; font-weight:800; letter-spacing:.5px;
  box-shadow:var(--glow-sm)}
.ps-create-cta:hover{filter:brightness(1.08); box-shadow:var(--glow)}

/* keyboard focus visibility across the studio */
.ps-form input:focus-visible, .ps-form textarea:focus-visible, .ps-form select:focus-visible{
  outline:2px solid rgba(var(--brand-rgb),.55); outline-offset:1px; border-color:var(--pink)}

@media (max-width:620px){ .ps-studio-art{grid-template-columns:1fr} }

/* ═══ advanced studio: wide split, tag picker, scenes, mechanics, preview ═══ */
.ps-studio-wide{max-width:min(1160px,96vw); width:min(1160px,96vw)}
.ps-studio-split{display:grid; grid-template-columns:1fr 340px; gap:0; align-items:start}
.ps-studio-split .ps-form{max-height:78vh; overflow-y:auto}

/* live preview (sticky beside the form) */
.ps-preview{position:sticky; top:0; padding:22px 22px 22px 4px; align-self:start; max-height:100vh; overflow-y:auto; overflow-x:hidden}
.ps-preview-h{font-family:var(--fm); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--sys); margin-bottom:10px}
.ps-preview-card{border:1px solid var(--border2); border-radius:16px; overflow:hidden; background:var(--card); box-shadow:0 14px 40px rgba(0,0,0,.45)}
.ps-prev-art{position:relative; aspect-ratio:3/4; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center}
.ps-prev-art img{width:100%; height:100%; object-fit:cover}
.ps-prev-art span{font-size:40px; opacity:.4}
.ps-prev-body{padding:14px 16px}
.ps-prev-name{font-family:var(--fd); font-weight:900; font-size:19px; color:var(--text); line-height:1.15}
.ps-prev-by{font-size:11.5px; color:var(--mid); margin-top:3px}
.ps-prev-tag{font-size:13px; font-style:italic; color:#e9d4e2; margin-top:9px; line-height:1.5}
.ps-prev-tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:10px}
.ps-prev-intro{font-size:12.5px; line-height:1.6; color:var(--mid); margin-top:11px; white-space:pre-wrap}
.ps-prev-intro.dim{opacity:.5; font-style:italic}
.ps-prev-scene, .ps-inline-scene{display:block; max-width:100%; border-radius:10px; margin:8px 0}
.ps-prev-tok{color:var(--sys); font-family:var(--fm); font-size:11px}
.ps-prev-mech{margin-top:11px; font-size:11.5px; color:var(--pink); font-weight:700}
.ps-preview-note{font-size:10.5px; color:var(--dim); margin-top:10px; text-align:center}

/* tag picker */
.ps-tagcount{font-family:var(--fm); font-size:10px; color:var(--sys); margin-left:8px}
.ps-tagcount.full{color:var(--pink); font-weight:700}
.ps-tagpicker{display:flex; flex-direction:column; gap:12px; border:1px solid var(--border); border-radius:14px; padding:14px; background:rgba(0,0,0,.15)}
.ps-taggroup-h{font-family:var(--fm); font-size:9px; letter-spacing:1.2px; text-transform:uppercase; color:var(--sys); margin-bottom:8px}
.ps-taggroup-tags{display:flex; flex-wrap:wrap; gap:7px}
details.ps-taggroup{border:1px solid var(--border); border-radius:11px; overflow:hidden; background:rgba(0,0,0,.12)}
summary.ps-taggroup-h{cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; padding:10px 13px; margin:0; user-select:none}
summary.ps-taggroup-h::-webkit-details-marker{display:none}
summary.ps-taggroup-h::before{content:'▸'; color:var(--dim); font-size:10px; transition:transform .18s}
details[open] > summary.ps-taggroup-h::before{transform:rotate(90deg)}
summary.ps-taggroup-h:hover{background:rgba(255,255,255,.03)}
.ps-tg-count{margin-left:auto; color:var(--faint); font-family:var(--fm); font-size:10px; background:rgba(255,255,255,.05); border-radius:999px; padding:2px 8px}
details.ps-taggroup > .ps-taggroup-tags{padding:2px 13px 13px}
.ps-tagopt{padding:7px 13px; border-radius:999px; border:1px solid var(--border2); background:var(--card);
  color:var(--mid); font:600 12.5px var(--fu); cursor:pointer; transition:.14s}
.ps-tagopt:hover{color:var(--text); border-color:var(--pink); transform:translateY(-1px)}
.ps-tagopt.on{background:rgba(var(--brand-rgb),.18); border-color:var(--pink); color:var(--pink); box-shadow:var(--glow-sm)}
.ps-tagopt.sensitive{border-style:dashed}
.ps-tagopt.sensitive.on{background:rgba(255,90,60,.14); border-color:#ff7a4d; color:#ffb499}
.ps-tagopt:focus-visible{outline:2px solid rgba(var(--brand-rgb),.6); outline-offset:1px}

/* ── studio: content-warning (trigger) picker, graded minor → severe ── */
.ps-trig-note{font-size:11.5px; line-height:1.5; color:var(--dim); margin:2px 0 10px}
.ps-prohibited-note{font-size:11.5px; line-height:1.5; color:#ffb0b8; background:rgba(255,93,108,.08); border:1px solid rgba(255,93,108,.35); border-radius:10px; padding:9px 12px; margin:0 0 12px}
.ps-esrb-badge{display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:19px; padding:0 6px; border-radius:5px; font-family:var(--fm); font-size:11px; font-weight:700; letter-spacing:.5px; color:#0b0e14; background:var(--esrb,#8a94a6); border:1px solid rgba(255,255,255,.25); vertical-align:middle}

/* ── character-bible code editor (line numbers + prohibited highlight) ── */
.ps-code{position:relative; display:flex; height:300px; resize:vertical; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:rgba(0,0,0,.22); font-family:var(--fm); font-size:12.5px; line-height:1.6; transition:border-color .15s, box-shadow .15s}
.ps-code.has-hit{border-color:#ff5d6c; box-shadow:0 0 0 1px rgba(255,93,108,.45), 0 0 18px rgba(255,93,108,.18)}
.ps-code-gutter{flex:none; min-width:40px; height:100%; padding:12px 8px 12px 0; text-align:right; color:var(--faint); background:rgba(0,0,0,.22); white-space:pre; overflow:hidden; user-select:none; line-height:1.6; font-family:var(--fm); font-size:12.5px}
.ps-code.has-hit .ps-code-gutter{color:#c98a8a}
.ps-code-main{position:relative; flex:1; height:100%; min-width:0}
.ps-code-overlay{position:absolute; inset:0; margin:0; padding:12px; white-space:pre; overflow:hidden; pointer-events:none; color:transparent; font-family:var(--fm); font-size:12.5px; line-height:1.6}
.ps-field .ps-code-ta{position:absolute; inset:0; display:block; width:100%; height:100%; margin:0; padding:12px; border:0; border-radius:0; resize:none; background:transparent; color:var(--text); font-family:var(--fm); font-size:12.5px; line-height:1.6; white-space:pre; overflow:auto; outline:none}
.ps-field .ps-code-ta:focus{box-shadow:none; border:0}
.ps-code-hit{border-radius:3px; color:transparent; background:rgba(255,93,108,.42); box-shadow:0 0 0 1px rgba(255,93,108,.5) inset}
.ps-code-hit.hit-bestiality, .ps-code-hit.hit-noncon{background:rgba(255,140,60,.4); box-shadow:0 0 0 1px rgba(255,140,60,.55) inset}
.ps-code-problems{display:none; flex-wrap:wrap; gap:7px; align-items:center; margin:0 0 9px; padding:9px 11px; border:1px solid rgba(255,93,108,.4); border-radius:10px; background:rgba(255,93,108,.08)}
.ps-code-bar{display:flex; align-items:center; gap:10px; margin:0 0 8px}
.ps-code-rescan{font-family:var(--fm); font-size:11px; padding:6px 12px; border-radius:8px; border:1px solid var(--border2); background:var(--card); color:var(--mid); cursor:pointer; transition:.12s}
.ps-code-rescan:hover{border-color:var(--pink); color:var(--text)}
.ps-code-status{font-family:var(--fm); font-size:11px}
.ps-code-status.good{color:#4fd6a0}
.ps-code-status.bad{color:#ff8a94}
.ps-appeal-btn{display:inline-block; margin-left:8px; font-family:var(--fm); font-size:11px; padding:5px 11px; border-radius:8px; border:1px solid var(--pink); background:rgba(var(--brand-rgb),.14); color:var(--pink); cursor:pointer}
.ps-appeal-btn:hover{background:rgba(var(--brand-rgb),.24)}
.ps-code-problems.on{display:flex}
.ps-prob-lead{font-family:var(--fm); font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:#ff8a94; margin-right:3px}
.ps-prob-pill{font-family:var(--fm); font-size:12px; padding:4px 11px; border-radius:999px; border:1px solid #ff5d6c; background:rgba(255,93,108,.16); color:#ffbcbc; cursor:pointer; transition:.12s}
.ps-prob-pill:hover{background:rgba(255,93,108,.3); transform:translateY(-1px)}
.ps-prob-pill.kind-bestiality, .ps-prob-pill.kind-noncon{border-color:#ff8c3c; background:rgba(255,140,60,.16); color:#ffc59a}
.ps-prob-pill.kind-bestiality:hover, .ps-prob-pill.kind-noncon:hover{background:rgba(255,140,60,.3)}

/* ── word-advisor: Format-JSON button + hover suggestion tip ── */
.ps-code-fmt{font-family:var(--fm); font-size:11px; padding:6px 12px; border-radius:8px; border:1px solid var(--border2); background:var(--card); color:var(--mid); cursor:pointer; transition:.12s}
.ps-code-fmt:hover{border-color:var(--pink); color:var(--text)}
.ps-word-tip{position:fixed; z-index:200; width:300px; max-width:92vw; padding:12px 14px; border-radius:12px;
  background:var(--card2,var(--surf)); border:1px solid var(--border2); box-shadow:0 12px 34px rgba(0,0,0,.55);
  font-family:var(--fu); font-size:12px; line-height:1.5; color:var(--text)}
.ps-word-tip-load{color:var(--mid); font-style:italic}
.ps-word-tip-head{font-family:var(--fm); font-weight:700; font-size:10px; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px}
.ps-word-tip-head.ok{color:#4fd6a0}
.ps-word-tip-head.bad{color:#ff8a94}
.ps-word-tip-v{color:var(--text); margin-bottom:9px}
.ps-word-tip-alts{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.ps-word-tip-alts>span{font-family:var(--fm); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--dim)}
.ps-word-alt{font-family:var(--fu); font-size:11px; font-weight:600; padding:4px 10px; border-radius:8px; cursor:pointer;
  border:1px solid var(--border2); background:rgba(255,45,120,.10); color:var(--blush); transition:.12s}
.ps-word-alt:hover{border-color:var(--pink); filter:brightness(1.12)}
.ps-autotag{margin-left:auto; font-family:var(--fm); font-size:10px; font-weight:700; letter-spacing:.3px;
  padding:5px 11px; border-radius:8px; cursor:pointer; border:1px solid var(--border2);
  background:linear-gradient(135deg,rgba(255,45,120,.14),rgba(217,70,168,.14)); color:var(--blush); transition:.14s}
.ps-autotag:hover{border-color:var(--pink); color:var(--text); filter:brightness(1.1)}
.ps-autotag:disabled{opacity:.6; cursor:default}
.ps-trig-missing{font-size:12px; color:#ffb499; border:1px dashed #ff7a4d; border-radius:10px; padding:10px}
.ps-trigpicker{display:flex; flex-direction:column; gap:13px; border:1px solid var(--border); border-radius:14px; padding:14px; background:rgba(0,0,0,.15)}
.ps-triggroup-h{margin-bottom:8px}
.ps-trigsev{font-family:var(--fm); font-size:9px; letter-spacing:1.2px; text-transform:uppercase; padding:3px 9px; border-radius:999px}
.ps-trigsev-minor{color:#9ec6ec; background:rgba(120,170,220,.14); border:1px solid rgba(120,170,220,.4)}
.ps-trigsev-moderate{color:#f0b46a; background:rgba(240,170,90,.14); border:1px solid rgba(240,170,90,.45)}
.ps-trigsev-severe{color:#ff8a8a; background:rgba(255,90,90,.16); border:1px solid rgba(255,90,90,.5)}
.ps-triggroup-tags{display:flex; flex-wrap:wrap; gap:7px}
.ps-trigopt{padding:7px 13px; border-radius:999px; border:1px solid var(--border2); background:var(--card); color:var(--mid); font-size:12.5px; cursor:pointer; transition:.14s}
.ps-trigopt:hover{color:var(--text); transform:translateY(-1px)}
.ps-trigopt.sev-minor.on{background:rgba(120,170,220,.16); border-color:#8ab6dc; color:#bcd8f0}
.ps-trigopt.sev-moderate.on{background:rgba(240,170,90,.16); border-color:#f0b46a; color:#ffd9a8}
.ps-trigopt.sev-severe.on{background:rgba(255,90,90,.16); border-color:#ff7a7a; color:#ffbcbc; box-shadow:0 0 10px rgba(255,90,90,.2)}
.ps-trigopt:focus-visible{outline:2px solid rgba(var(--brand-rgb),.6); outline-offset:1px}

/* ── report dialog ── */
.ps-report-ov{position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.66); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:18px}
.ps-report-card{width:min(460px,94vw); max-height:90vh; overflow:auto; background:var(--panel,#14121b); border:1px solid var(--border); border-radius:18px; padding:22px; position:relative; box-shadow:0 24px 60px rgba(0,0,0,.5)}
.ps-report-x{position:absolute; top:12px; right:12px; background:none; border:none; color:var(--dim); font-size:16px; cursor:pointer}
.ps-report-h{margin:0 0 6px; font-size:18px; color:var(--text)}
.ps-report-sub{margin:0 0 14px; font-size:12.5px; line-height:1.5; color:var(--dim)}
.ps-report-quote{font-size:12px; line-height:1.5; color:var(--mid); border-left:2px solid var(--pink); padding:6px 10px; margin:0 0 14px; background:rgba(0,0,0,.2); border-radius:0 8px 8px 0}
.ps-report-l{font-family:var(--fm); font-size:9px; letter-spacing:1.2px; text-transform:uppercase; color:var(--sys); margin:12px 0 8px}
.ps-report-cats{display:flex; flex-direction:column; gap:6px}
.ps-report-cat{display:flex; align-items:center; gap:9px; padding:9px 12px; border:1px solid var(--border2); border-radius:10px; font-size:13px; color:var(--text); cursor:pointer; transition:.12s}
.ps-report-cat:hover{border-color:var(--pink)}
.ps-report-cat input{accent-color:var(--pink)}
.ps-report-cat:has(input:checked){border-color:var(--pink); background:rgba(var(--brand-rgb),.12)}
.ps-report-ta{width:100%; min-height:70px; resize:vertical; background:rgba(0,0,0,.25); border:1px solid var(--border2); border-radius:10px; padding:10px; color:var(--text); font:inherit; font-size:13px}
.ps-report-actions{display:flex; justify-content:flex-end; gap:9px; margin-top:16px}
.ps-btn.ghost{background:transparent; border-color:var(--border2); color:var(--dim)}
.ps-btn.ghost:hover{color:#ff9b7a; border-color:#ff7a4d}

/* ── content-warning interstitial ── */
.ps-cw-ov{position:fixed; inset:0; z-index:9100; background:rgba(0,0,0,.72); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; padding:18px}
.ps-cw-card{width:min(440px,94vw); background:var(--panel,#14121b); border:1px solid var(--border); border-radius:18px; padding:26px 24px; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.55)}
.ps-cw-icon{font-size:32px; line-height:1; margin:0 0 10px}
.ps-cw-h{margin:0 0 8px; font-size:19px; color:var(--text)}
.ps-cw-sub{margin:0 0 16px; font-size:13px; line-height:1.5; color:var(--dim)}
.ps-cw-tags{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:0 0 18px}
.ps-cw-tag{font-size:12.5px; padding:6px 12px; border-radius:999px; border:1px solid var(--border2); color:var(--text); background:var(--card)}
.ps-cw-tag[data-tip]{position:relative; cursor:help}
.ps-cw-tag[data-tip]:hover::after, .ps-cw-tag[data-tip]:focus-visible::after{content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%); width:max-content; max-width:230px; white-space:normal; z-index:20; background:#14121b; color:var(--text); border:1px solid var(--border2); border-radius:9px; padding:8px 11px; font-size:12px; line-height:1.45; text-align:center; box-shadow:0 12px 30px rgba(0,0,0,.5); pointer-events:none}
.ps-cw-tag[data-tip]:hover::before, .ps-cw-tag[data-tip]:focus-visible::before{content:''; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--border2); z-index:20; pointer-events:none}
.ps-cw-tag.sev-minor{border-color:#8ab6dc; color:#bcd8f0; background:rgba(120,170,220,.12)}
.ps-cw-tag.sev-moderate{border-color:#f0b46a; color:#ffd9a8; background:rgba(240,170,90,.12)}
.ps-cw-tag.sev-severe{border-color:#ff7a7a; color:#ffbcbc; background:rgba(255,90,90,.14)}
.ps-cw-remember{display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; color:var(--dim); margin:0 0 18px; cursor:pointer}
.ps-cw-remember input{accent-color:var(--pink)}
.ps-cw-actions{display:flex; gap:10px; justify-content:center}
.ps-cw-actions .ps-btn{min-width:110px}
.ps-cw-nope{border-color:#e0603a; color:#ffb59a; font-weight:600; letter-spacing:.3px}
.ps-cw-nope:hover{background:rgba(224,96,58,.16); border-color:#ff7a4d; color:#ffd0bf}

/* scene shots */
.ps-scenes-note{font-size:12px; line-height:1.5; color:var(--mid); margin-bottom:12px}
.ps-scenes-note code, .ps-mech-hint code{font-family:var(--fm); font-size:11px; background:rgba(var(--brand-rgb),.12); padding:1px 5px; border-radius:5px; color:var(--pink)}
.ps-scenegal{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px}
.ps-scene{position:relative; width:96px; height:120px; border-radius:11px; overflow:hidden; cursor:grab;
  border:1px solid var(--border2); box-shadow:var(--glow-sm)}
.ps-scene:active{cursor:grabbing}
.ps-scene img{width:100%; height:100%; object-fit:cover}
.ps-scene-tok{position:absolute; left:0; right:0; bottom:0; text-align:center; font-family:var(--fm); font-size:9px;
  color:#fff; background:rgba(8,0,14,.8); padding:2px}
.ps-scene-x{position:absolute; top:4px; right:4px; width:18px; height:18px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(8,0,14,.75); color:#fff; font-size:10px; line-height:1}
.ps-scene-add{width:96px; height:120px; border-radius:11px; border:2px dashed var(--pink-dim); background:var(--card);
  color:var(--mid); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; font-size:20px}
.ps-scene-add span{font-size:10px}
.ps-scene-add:hover, .ps-scene-add:focus-visible{border-color:var(--pink); color:var(--text); outline:none}
textarea.scene-drop{border-color:var(--pink) !important; box-shadow:var(--glow-sm)}

/* game mechanics */
.studio-sec-opt{font-family:var(--fm); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--dim);
  border:1px solid var(--border2); border-radius:999px; padding:2px 8px; margin-left:8px}
.ps-mech-toggle{display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13.5px; color:var(--text); margin-bottom:6px}
.ps-mech-toggle input{width:17px; height:17px; accent-color:var(--pink)}
.ps-mech-body[hidden]{display:none}
.ps-mech-body textarea{font-family:var(--fm); font-size:12.5px; line-height:1.6}
.ps-mech-hint{font-size:11px; line-height:1.5; color:var(--mid); margin-top:6px}

@media (max-width:900px){ .ps-studio-split{grid-template-columns:1fr} .ps-preview{position:static; padding:4px 22px 18px} .ps-studio-split .ps-form{max-height:none} }

/* improved live preview */
.ps-prev-art{position:relative}
.ps-prev-arttitle{position:absolute; left:0; right:0; bottom:0; padding:22px 14px 12px; font-family:var(--fd);
  font-weight:900; font-size:20px; color:#fff; line-height:1.12;
  background:linear-gradient(0deg, rgba(6,0,11,.92), transparent); text-shadow:0 2px 10px rgba(0,0,0,.6)}
.ps-prev-lbl{font-family:var(--fm); font-size:8.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--sys); margin:14px 0 6px}
.ps-prev-tags.dim, .ps-prev-intro.dim, .ps-prev-greet.dim{opacity:.5; font-style:italic}
.ps-chip.sens{border-color:#ff7a4d; color:#ffb499}
.ps-prev-greet{font-size:12.5px; line-height:1.6; color:#e9d4e2; white-space:pre-wrap;
  border-left:2px solid rgba(var(--brand-rgb),.4); padding-left:10px}
.ps-prev-mechbox{margin:12px 0; border:1px solid var(--border2); border-radius:10px; padding:10px 12px; background:rgba(var(--brand-rgb),.06)}
.ps-prev-mechlbl{font-family:var(--fm); font-size:8.5px; letter-spacing:1.2px; color:var(--pink); margin-bottom:6px}
.ps-prev-mechpre{font-family:var(--fm); font-size:11.5px; line-height:1.5; color:var(--text); white-space:pre-wrap; margin:0}

/* publishing-as line (replaces the free-text creator field) */
.ps-publishas{font-size:12px; color:var(--mid); margin-top:-4px; padding:8px 12px; border-radius:10px;
  background:rgba(var(--brand-rgb),.06); border:1px solid var(--border)}
.ps-publishas b{color:var(--pink)}

/* ── Hub as personal home ── */
.hub-hello{font-family:var(--fd); font-weight:900; font-size:22px; color:var(--text); margin:24px 26px 4px}
.hub-feature-new .hub-kicker{color:#6ee7b7}

/* continue-chatting resume cards */
.hub-resume{display:flex; align-items:center; gap:12px; min-width:290px; max-width:290px; flex-shrink:0;
  text-align:left; cursor:pointer; padding:10px; border-radius:14px; background:var(--card);
  border:1px solid var(--border2); transition:.15s}
.hub-resume:hover{border-color:var(--pink); box-shadow:var(--glow-sm); transform:translateY(-2px)}
.hub-resume-art{width:52px; height:52px; border-radius:11px; object-fit:cover; flex-shrink:0}
.hub-resume-body{flex:1; min-width:0}
.hub-resume-name{font-family:var(--fd); font-weight:700; font-size:14px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hub-resume-prev{font-size:11.5px; color:var(--mid); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hub-resume-go{color:var(--pink); font-size:14px; flex-shrink:0}

/* collapsible event board on the hub */
.hub-board-fold{margin:6px 26px 0}
.hub-board-sum{cursor:pointer; list-style:none; font-family:var(--fd); font-weight:800; font-size:18px; color:var(--text);
  padding:12px 0; display:flex; align-items:center; gap:10px}
.hub-board-sum::-webkit-details-marker{display:none}
.hub-board-sum::before{content:'▸'; color:var(--pink); transition:transform .2s}
.hub-board-fold[open] .hub-board-sum::before{transform:rotate(90deg)}
.hub-board-hint{font-family:var(--fm); font-size:9px; letter-spacing:.5px; color:var(--dim); font-weight:400}
.hub-board-fold .evb-head{display:none}   /* summary already titles it */
.hub-board-fold .evb-wrap, .hub-board-fold > .evb-list, .hub-board-fold .evb-board{margin-top:0}

/* ── Plans & Credits account section ── */
.ps-plan-tag{display:inline-block; margin-left:8px; font:700 9px var(--fm); letter-spacing:1px; text-transform:uppercase; padding:2px 9px; border-radius:999px; vertical-align:middle}
.ps-plan-tag.plan-plus{color:var(--gold,#ffc740); border:1px solid rgba(255,199,64,.5); background:rgba(255,199,64,.12)}
.ps-plan-tag.plan-premium{color:var(--pink); border:1px solid rgba(var(--brand-rgb),.5); background:rgba(var(--brand-rgb),.14)}
.ps-credits-top{display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:22px; border:1px solid var(--border); border-radius:16px; background:linear-gradient(120deg, rgba(var(--brand-rgb),.08), var(--card)); margin-bottom:22px}
.ps-credits-bal{text-align:center}
.ps-credits-num{font:900 30px var(--fd); color:var(--gold,#ffc740)}
.ps-credits-info{flex:1; min-width:180px; line-height:1.8; font-size:13px}
.ps-dim{color:var(--dim); font-size:12px}
.ps-credits-sec{margin-bottom:26px}
.ps-credits-sec h3{font:800 14px var(--fd); margin:0 0 12px; color:var(--text)}
.ps-plan-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
.ps-plan-card{position:relative; border:1px solid var(--border2); border-radius:14px; padding:18px; background:var(--card)}
.ps-plan-card.current{border-color:var(--pink); box-shadow:var(--glow-sm)}
.ps-plan-card.featured{border-color:rgba(255,199,64,.4)}
.ps-plan-ribbon{position:absolute; top:-9px; right:12px; font:700 9px var(--fm); letter-spacing:1px; padding:2px 9px; border-radius:999px; background:var(--gold,#ffc740); color:#1a0f00}
.ps-plan-name{font:800 16px var(--fd); color:var(--text)}
.ps-plan-price{font:900 22px var(--fd); color:var(--pink); margin:6px 0 12px}
.ps-plan-price em{font:400 12px var(--fu); color:var(--dim); font-style:normal}
.ps-plan-feats{display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--mid)}
.ps-plan-badge{margin-top:12px; text-align:center; font:700 10px var(--fm); letter-spacing:1px; text-transform:uppercase; color:var(--pink); padding:6px; border-radius:8px; background:rgba(var(--brand-rgb),.1)}
.ps-model-list{display:flex; flex-direction:column; gap:8px}
.ps-model-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; border:1px solid var(--border); border-radius:11px; background:var(--card)}
.ps-model-row.locked{opacity:.6}
.ps-model-meta{display:flex; align-items:center; gap:10px; font-size:11.5px; flex-wrap:wrap}
.ps-model-tier{font:700 10px var(--fm); padding:2px 8px; border-radius:999px; border:1px solid var(--border2); color:var(--mid)}
.ps-model-tier.tier-1{color:var(--green,#6ee7b7)} .ps-model-tier.tier-2{color:var(--gold,#ffc740)} .ps-model-tier.tier-3{color:var(--pink)}
.ps-model-cost{color:var(--blush); font-family:var(--fm)}
.ps-model-lock{color:var(--dim)} .ps-model-ok{color:var(--green,#6ee7b7)}
.ps-ledger{display:flex; flex-direction:column; gap:5px}
.ps-led{display:flex; justify-content:space-between; padding:6px 2px; border-bottom:1px solid var(--border); font:12px var(--fm)}
.ps-led.spend{color:var(--mid)} .ps-led.grant,.ps-led.purchase{color:var(--green,#6ee7b7)} .ps-led.plan{color:var(--gold,#ffc740)}

/* when a chat is open, fully hide the underlying page so nothing bleeds through
   (iOS Safari pushes position:fixed around when the keyboard opens, exposing
   whatever is behind — hiding it entirely makes the chat a true full view) */
body.ps-chat-open > .ps-header,
body.ps-chat-open > .ps-shell { display: none !important; }
/* chat root uses dynamic viewport height so the keyboard doesn't break layout */
.psc-root{ height: 100dvh; }



/* ═══════════════════════════════════════════════════════════════════
   STORE & PRICING — visual pass
   Everything animated here is transform/opacity only, and every glow lives
   on a pseudo-element, so the richness costs no per-frame repaints.
   ═══════════════════════════════════════════════════════════════════ */

.ps-store-loading{padding:34px 26px; color:var(--dim); font-family:var(--fm); font-size:13px;
  animation:psPulseDim 1.4s ease-in-out infinite}
@keyframes psPulseDim{0%,100%{opacity:.55}50%{opacity:1}}

/* ── balance strip ─────────────────────────────────────────────────── */
.ps-store-bal{position:relative; overflow:hidden;
  margin:0 26px 20px; padding:16px 20px; border-radius:16px;
  background:linear-gradient(120deg, rgba(var(--brand-rgb),.13), rgba(var(--brand-rgb),.04) 55%, transparent);
  border:1px solid rgba(var(--brand-rgb),.28); font-size:14px; color:var(--mid)}
.ps-store-bal::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 120% at 88% 50%, rgba(255,199,64,.13), transparent 70%)}
.ps-store-bal b{color:#ffc740; font-family:var(--fm); font-size:19px; margin-left:5px;
  text-shadow:0 0 18px rgba(255,199,64,.45)}
.ps-store-bal span{color:var(--dim); font-size:12.5px}
.ps-store-bal.muted{background:rgba(255,255,255,.03); border-color:var(--border2); color:var(--dim)}
.ps-store-bal.muted::after{display:none}

/* ── pack cards ────────────────────────────────────────────────────── */
.ps-store-grid{padding:0 26px}
.ps-store-card.pack{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:26px 18px 20px; border-radius:20px; text-align:center; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border:1px solid var(--border2);
  transition:transform .2s cubic-bezier(.2,.9,.3,1), border-color .25s ease;
  animation:psRise .45s cubic-bezier(.2,.9,.3,1) both;
  animation-delay:calc(var(--pk, 0) * 55ms);
}
@keyframes psRise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.ps-store-card.pack:hover{transform:translateY(-4px); border-color:rgba(var(--brand-rgb),.42)}
/* soft halo on hover — pseudo-element opacity, never box-shadow animation */
.ps-store-card.pack::after{content:''; position:absolute; inset:-1px; border-radius:inherit;
  pointer-events:none; z-index:-1; opacity:0; transition:opacity .25s ease;
  box-shadow:0 0 30px 4px rgba(var(--brand-rgb),.32), 0 20px 50px rgba(0,0,0,.45)}
.ps-store-card.pack:hover::after{opacity:1}

/* the featured pack sits forward and keeps a permanent glow */
.ps-store-card.pack.featured{border-color:rgba(var(--brand-rgb),.5)}
.ps-store-card.pack.featured::after{opacity:.7}
.ps-store-card.pack.featured::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 60% at 50% -10%, rgba(var(--brand-rgb),.18), transparent 70%)}

.ps-pack-badge{position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:2;
  background:linear-gradient(135deg,var(--pink),var(--rose)); color:#fff;
  font:800 8.5px var(--fm); letter-spacing:1.3px; padding:4px 12px; border-radius:99px;
  white-space:nowrap; box-shadow:0 4px 14px rgba(var(--brand-rgb),.45)}

/* credit orb — the hero element of the card */
.ps-pack-orb{position:relative; width:64px; height:64px; margin:6px 0 10px;
  display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,225,150,.30), rgba(255,150,60,.10) 60%, transparent 72%);
  border:1px solid rgba(255,199,64,.35)}
.ps-pack-orb span{font-size:26px; color:#ffc740; text-shadow:0 0 22px rgba(255,199,64,.6)}
.ps-pack-orb::after{content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(255,199,64,.14)}
.ps-store-card.pack:hover .ps-pack-orb span{animation:psOrbPop .5s ease}
@keyframes psOrbPop{0%,100%{transform:scale(1)}45%{transform:scale(1.16)}}

.ps-pack-cr{font:800 27px var(--fm); color:var(--text); line-height:1}
.ps-pack-cr em{display:block; font:600 9.5px var(--fm); letter-spacing:1.6px;
  text-transform:uppercase; color:var(--dim); font-style:normal; margin-top:5px}
.ps-pack-bonus{font-size:11px; color:#6ee7b7; min-height:16px; font-weight:600}
.ps-store-card.pack .ps-store-name{font:700 15px var(--fd); color:var(--text); margin-top:8px}
.ps-store-card.pack .ps-store-desc{font-size:12px; color:var(--dim); line-height:1.55; margin:4px 0 10px;
  min-height:34px}
.ps-pack-rate{font-size:10.5px; color:var(--dim); font-family:var(--fm); letter-spacing:.3px;
  padding:4px 10px; border-radius:99px; background:rgba(255,255,255,.04); margin-bottom:14px}
.ps-pack-rate b{color:var(--mid)}

/* price + verb split inside the button */
.ps-store-card.pack .ps-btn{width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 14px; border-radius:12px}
.ps-pack-price{font:800 15px var(--fm)}
.ps-pack-buy{font-size:12px; opacity:.85; letter-spacing:.4px}

/* ── notes & notices ──────────────────────────────────────────────── */
.ps-store-note{margin:26px 26px 44px; padding:16px 18px; border-radius:14px;
  background:rgba(255,255,255,.02); border:1px solid var(--border2);
  color:var(--dim); font-size:12.5px; line-height:1.65}
.ps-store-notice{margin:18px 26px 0; padding:15px 18px; border-radius:14px;
  background:linear-gradient(120deg, rgba(255,199,64,.10), rgba(255,199,64,.03));
  border:1px solid rgba(255,199,64,.36); color:#ffd98a; font-size:13px; line-height:1.65;
  animation:psRise .3s ease both}

/* ── PRICING: plan cards ──────────────────────────────────────────── */
.ps-plan-grid{padding:0 26px}
.ps-plan-card{position:relative; overflow:hidden; border-radius:20px; padding:28px 22px 22px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  border:1px solid var(--border2);
  transition:transform .2s cubic-bezier(.2,.9,.3,1), border-color .25s ease;
  animation:psRise .45s cubic-bezier(.2,.9,.3,1) both; animation-delay:calc(var(--pk,1) * 65ms)}
.ps-plan-card:hover{transform:translateY(-4px)}
.ps-plan-card::after{content:''; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  pointer-events:none; opacity:0; transition:opacity .25s ease;
  box-shadow:0 0 34px 4px rgba(var(--brand-rgb),.30), 0 22px 54px rgba(0,0,0,.45)}
.ps-plan-card:hover::after{opacity:1}
.ps-plan-card.featured{border-color:rgba(var(--brand-rgb),.5)}
.ps-plan-card.featured::after{opacity:.65}
.ps-plan-card.featured::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(100% 55% at 50% -8%, rgba(var(--brand-rgb),.20), transparent 72%)}
.ps-plan-card.current{border-color:rgba(110,231,183,.45)}
.ps-plan-card.current::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(100% 55% at 50% -8%, rgba(110,231,183,.16), transparent 72%)}

.ps-plan-badge{position:absolute; top:13px; right:14px;
  background:linear-gradient(135deg,#34d399,#6ee7b7); color:#04120c;
  font:800 8.5px var(--fm); letter-spacing:1.2px; padding:4px 11px; border-radius:99px}
.ps-plan-badge.alt{background:linear-gradient(135deg,var(--pink),#a88bff); color:#fff;
  box-shadow:0 4px 14px rgba(var(--brand-rgb),.4)}

/* tier ladder — filled diamonds for what the plan unlocks */
.ps-plan-tier{font-size:12px; letter-spacing:4px; color:var(--pink); margin-bottom:10px}
.ps-plan-tier span{color:rgba(255,255,255,.14)}

.ps-plan-name{font:700 17px var(--fd); color:var(--text)}
.ps-plan-price{font:800 42px var(--fm); color:var(--text); line-height:1; margin:8px 0 4px;
  display:flex; align-items:flex-start; gap:1px}
.ps-plan-price i{font-size:20px; font-style:normal; margin-top:5px; opacity:.7}
.ps-plan-price sup{font-size:17px; top:-.1em; opacity:.75}
.ps-plan-price em{align-self:flex-end; font:500 12px var(--fm); font-style:normal;
  color:var(--dim); margin-left:4px; margin-bottom:5px}
.ps-plan-rate{font-size:11px; color:#6ee7b7; font-family:var(--fm); margin-bottom:12px}
.ps-plan-rate.muted{color:var(--dim)}
.ps-plan-tagline{font-size:12.5px; color:var(--dim); line-height:1.6; margin-bottom:16px}
.ps-plan-feats{list-style:none; padding:0; margin:0 0 20px; display:grid; gap:9px}
.ps-plan-feats li{position:relative; padding-left:24px; font-size:12.5px; color:var(--mid); line-height:1.5}
.ps-plan-feats li::before{content:'✓'; position:absolute; left:0; top:-1px;
  width:17px; height:17px; border-radius:50%; display:grid; place-items:center;
  font-size:9px; font-weight:800;
  background:rgba(var(--brand-rgb),.16); color:var(--pink)}
.ps-plan-card.current .ps-plan-feats li::before{background:rgba(110,231,183,.16); color:#6ee7b7}
.ps-plan-card .ps-btn{width:100%; padding:12px; border-radius:12px; font-weight:700}

/* ── restraint ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .ps-store-card.pack, .ps-plan-card, .ps-store-notice{animation:none}
  .ps-store-card.pack:hover, .ps-plan-card:hover{transform:none}
  .ps-store-card.pack:hover .ps-pack-orb span{animation:none}
  .ps-store-loading{animation:none}
}
@media (max-width:820px){
  .ps-store-bal, .ps-store-note, .ps-store-notice{margin-left:16px; margin-right:16px}
  .ps-store-grid, .ps-plan-grid{padding:0 16px}
  .ps-store-loading{padding:26px 16px}
  .ps-plan-price{font-size:36px}
  .ps-pack-orb{width:56px; height:56px}
  .ps-pack-cr{font-size:24px}
}

/* ── locked two-pane scroll: nav never rides the catalog ── */
@media (min-width:861px){
  html,body{overflow-x:clip !important; overflow-y:auto !important; height:auto !important; max-height:none !important}
  .ps-app{margin-left:0 !important; height:auto !important; max-height:none !important; overflow:visible !important}
  .ps-nav{overflow:hidden !important; z-index:150 !important}
  .ps-nav-scroll{height:calc(100dvh - var(--ps-header-h, 62px)) !important; max-height:calc(100dvh - var(--ps-header-h, 62px)) !important; overflow-y:scroll !important}
}
body.ps-chat-open .ps-app{margin-left:0 !important; height:auto !important; max-height:none !important}

@media (max-width:860px){
  html,body{height:auto !important; max-height:none !important; overflow-x:clip !important; overflow-y:auto !important}
  body{display:block !important; min-height:100dvh; height:auto !important;
    padding-top:var(--ps-header-h, 62px)}
  .ps-header{position:fixed !important; top:0 !important; left:0 !important; right:0 !important;
    z-index:160 !important; width:100% !important;
    background:rgba(8,0,14,.94) !important; backdrop-filter:blur(16px)}
  .ps-shell,.ps-app{height:auto !important; max-height:none !important; overflow:visible !important; margin-left:0 !important}
  .ps-nav{position:fixed !important; top:var(--ps-header-h, 62px) !important; left:0 !important; bottom:0 !important;
    height:auto !important; max-height:none !important;
    overflow-x:hidden !important; overflow-y:auto !important; z-index:150 !important}
  .ps-navscrim{top:var(--ps-header-h, 62px) !important; height:auto !important}
  .ps-footer{display:none !important}
}

/* burger drawer on every width — no icon rail */
.ps-navtoggle{display:inline-flex !important; align-items:center; justify-content:center;
  width:40px; height:40px; flex-shrink:0; z-index:170}
.ps-rail-toggle,.ps-rail-ic{display:none !important}
.ps-header{position:fixed !important; top:0; left:0; right:0; z-index:160; width:100%}
html,body{overflow-x:clip; overflow-y:auto; height:auto; max-height:none}
body{display:block !important; padding-top:var(--ps-header-h, 62px) !important}
.ps-shell,.ps-app{height:auto !important; max-height:none !important; overflow:visible !important; margin-left:0 !important}
.ps-nav{
  position:fixed !important;
  top:var(--ps-header-h, 62px) !important;
  left:0 !important; bottom:0 !important;
  width:min(288px, 84vw) !important;
  height:auto !important; max-height:none !important;
  transform:translateX(-100%);
  transition:transform .25s ease;
  overflow-x:hidden !important; overflow-y:auto !important;
  z-index:150 !important;
}
.ps-nav.open{transform:none !important; box-shadow:20px 0 60px rgba(0,0,0,.6)}
.ps-navscrim{display:none}
.ps-navscrim:not([hidden]){display:block !important; position:fixed; left:0; right:0;
  top:var(--ps-header-h, 62px); bottom:0; z-index:140; background:rgba(4,0,8,.55); backdrop-filter:blur(3px)}
body.ps-chat-open{padding-top:0 !important}
body.ps-chat-open .ps-header{display:none !important}

.ps-nav{display:flex !important; flex-direction:column !important; overflow:hidden !important}
.ps-nav-scroll{flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:scroll !important;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y;
  padding-bottom:24px}
.ps-nav-foot{margin-top:0; flex:0 0 auto}

.creator-chips{display:flex; gap:6px; flex-wrap:wrap; padding:8px 10px 10px}
.creator-vis-chip,.creator-edit-chip,.creator-del-chip{border:1px solid var(--border); background:var(--card2); color:var(--text);
  border-radius:999px; padding:5px 10px; font:700 11px var(--fu); cursor:pointer}
.creator-vis-chip.on{border-color:rgba(255,199,64,.5); color:#ffc740; background:rgba(255,199,64,.1)}
.creator-vis-chip:hover,.creator-edit-chip:hover{border-color:var(--border2)}

.ps-form-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.ps-vis-field{display:flex; align-items:center; gap:8px; margin-left:auto; font-family:var(--fm); font-size:11px; letter-spacing:.4px; text-transform:uppercase; color:var(--sys)}
.ps-vis-field select{background:var(--card); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:8px 10px; font:700 13px var(--fu); text-transform:none; letter-spacing:0}
@media (max-width:640px){ .ps-vis-field{margin-left:0; width:100%} .ps-vis-field select{flex:1} }

/* keep cards the same size even when a tab only has a few bots */
.ps-grid, #grid, .ps-draftgrid{
  grid-template-columns:repeat(auto-fill, minmax(220px, 260px)) !important;
  justify-content:start;
}
.ps-card{max-width:260px; width:100%}
@media (max-width:820px){
  .ps-grid, #grid, .ps-draftgrid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  .ps-card{max-width:none}
}

#profileMount .ps-grid, #creatorMount .ps-grid{
  grid-template-columns:repeat(auto-fill, 240px) !important;
  justify-content:start !important;
  gap:16px;
}
#profileMount .ps-card, #creatorMount .ps-card{
  width:240px !important; max-width:240px !important; flex:none !important;
}
#profileMount .ps-peek, #creatorMount .ps-peek{display:none !important}
#profileMount .ps-card-img{aspect-ratio:3/5; max-height:360px}
@media (max-width:820px){
  #profileMount .ps-grid, #creatorMount .ps-grid{grid-template-columns:repeat(2, minmax(0,1fr)) !important}
  #profileMount .ps-card, #creatorMount .ps-card{width:auto !important; max-width:none !important}
}

.ps-card-badges{position:absolute; top:10px; left:10px; z-index:3; display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.ps-visbadge{border:1px solid rgba(255,255,255,.18); background:rgba(8,0,14,.72); color:#f3dce8;
  border-radius:999px; padding:4px 9px; font:700 10px var(--fm); letter-spacing:.3px; cursor:pointer; backdrop-filter:blur(8px)}
.ps-visbadge.on{border-color:rgba(255,199,64,.55); color:#ffc740; background:rgba(20,12,0,.72)}
.creator-chips{position:absolute; top:10px; right:10px; z-index:3; display:flex; gap:6px; padding:0; background:none}
.creator-edit-chip,.creator-del-chip{width:34px; height:34px; padding:0; display:grid; place-items:center;
  border-radius:50%; border:1px solid rgba(255,255,255,.16); background:rgba(8,0,14,.72); color:#fff;
  font-size:14px; cursor:pointer; backdrop-filter:blur(8px)}
.creator-edit-chip:hover,.creator-del-chip:hover,.ps-visbadge:hover{border-color:var(--pink)}
.ps-card-fav{z-index:3}

.creator-chips{position:absolute; top:10px; right:10px; z-index:4; display:flex; gap:6px; padding:0; background:none}
.creator-vis-chip,.creator-edit-chip,.creator-del-chip{
  width:34px; height:34px; padding:0; display:grid; place-items:center;
  border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background:rgba(8,0,14,.72); color:#fff; font-size:15px; cursor:pointer;
  backdrop-filter:blur(8px)
}
.creator-vis-chip{border-color:rgba(110,231,183,.45); box-shadow:0 0 10px rgba(110,231,183,.2)}
.creator-vis-chip.on{border-color:rgba(255,199,64,.65); color:#ffc740; box-shadow:0 0 10px rgba(255,199,64,.25)}
.creator-vis-chip:hover,.creator-edit-chip:hover,.creator-del-chip:hover{border-color:var(--pink)}

#profileMount, #creatorMount{
  width:min(1280px, calc(100% - 24px));
  margin-left:auto; margin-right:auto;
}
#profileMount .ps-pagehero, #creatorMount .ps-pagehero{width:100%}
#profileMount .ps-profile-tabs, #creatorMount .ps-profile-tabs{
  margin-left:auto; margin-right:auto;
}
#profileMount .ps-grid, #creatorMount .ps-grid, #grid, .ps-draftgrid{
  justify-content:center !important;
  justify-items:center;
}
#profileMount .ps-pager-host, #creatorMount .ps-pager-host, .ps-pager-host{
  display:flex; justify-content:center; width:100%;
}
.ps-pager{margin-left:auto; margin-right:auto}
/* ═══ Mobile studio + modal fixes ═══════════════════════════════════════
   1. Overlays sat at z-index:80 under the fixed site header (z-index:160),
      so on phones the header covered every modal's top bar — including the
      studio's ✕. Modals now stack ABOVE the header.
   2. On phones the studio goes full-screen with a sticky, safe-area-aware
      top bar and a 44px close target.
   3. The studio nests four padded boxes (modal → form → section → tag
      picker → tag group), which ate ~40% of a phone's width. Padding is
      flattened on small screens so content gets the room. */
.ps-overlay{z-index:170}

@media (max-width:640px){
  .ps-overlay{padding:0; align-items:stretch}
  .ps-modal,.ps-studio-wide{width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
    border-radius:0; border:0; box-shadow:none}
  .ps-modal-head{padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top,0px)); gap:8px}
  .ps-modal-head .ps-logo{font-size:17px}
  .ps-draft-status{font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
  .ps-x{min-width:44px; min-height:44px; font-size:18px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0}

  /* flatten the nested padding */
  .ps-form{padding:12px 10px 90px; gap:12px}
  .studio-sec{padding:14px 12px; border-radius:14px}
  .ps-tagpicker{padding:8px; gap:8px; border-radius:12px}
  details.ps-taggroup{border-radius:10px}
  details.ps-taggroup > summary{padding:10px 12px}
  .ps-tagopt{font-size:12.5px; padding:6px 11px}
  .ps-field label{letter-spacing:.12em}
  .ps-field input,.ps-field textarea,.ps-form select#upRating{font-size:16px}   /* 16px stops iOS zoom-on-focus */

  /* TAGS label row: let the Auto-tag button wrap under the count */
  .ps-field > label:has(.ps-autotag){display:flex; flex-wrap:wrap; align-items:center; gap:8px}
  .ps-autotag{margin-left:0}

  /* the live preview drops below the form on phones — keep it compact */
  .ps-preview{padding:4px 10px 18px}
}

/* ── ✨ Structure with AI / undo (JSON editor) + bulk draft retag ── */
.ps-code-bar{flex-wrap:wrap}
.ps-code-struct{border-color:color-mix(in srgb,var(--pink) 45%,var(--border2)); color:var(--text)}
.ps-code-struct.pulse{animation:psStructPulse .8s ease 3}
@keyframes psStructPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--pink) 35%,transparent)}}
.ps-code-fmt:disabled{opacity:.55; cursor:default}
.ps-code-undo[hidden]{display:none}
.ps-autotag.undo{border-color:#f5b642; color:#f5b642}
.ps-draft-retag{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 12px}
.ps-draft-retag .ps-autotag{margin-left:0}
.ps-draft-retag-msg{font-family:var(--fm); font-size:11px; color:var(--mid)}
@media (max-width:640px){ .ps-code-bar .ps-code-fmt{flex:1 1 auto} }

/* ── image-review hold: studio banner + draft-card chips ── */
.ps-review-banner{margin:0 0 10px; padding:11px 14px; border-radius:12px; font-size:13px; line-height:1.55; color:var(--text);
  border:1px solid var(--border2); background:var(--card)}
.ps-review-banner[data-state="pending"]{border-color:#f5b642; background:rgba(245,182,66,.08)}
.ps-review-banner[data-state="denied"]{border-color:#ff5277; background:rgba(255,82,119,.08)}
.ps-review-banner[data-state="approved"]{border-color:#4fd6a0; background:rgba(79,214,160,.08)}
.ps-review-sub{display:block; margin-top:4px; font-size:12px; color:var(--mid)}
.ps-draftchip.rv-pending{background:rgba(245,182,66,.9); color:#1a1200}
.ps-draftchip.rv-denied{background:rgba(255,82,119,.9); color:#fff}
.ps-draftchip.rv-ok{background:rgba(79,214,160,.9); color:#00170e}

/* ── studio: tags removed because they aren't on the platform catalog ── */
.ps-tag-dropped{margin:0 0 8px; padding:8px 12px; border-radius:10px; font-size:12px; line-height:1.5; color:var(--mid);
  border:1px dashed color-mix(in srgb,#f5b642 55%,var(--border2)); background:rgba(245,182,66,.06)}
.ps-tag-dropped s{opacity:.8; margin:0 2px}

/* ═══ Pricing: "Popular" ribbon hangs from the card's top edge (the card clips overflow) ═══ */
.ps-plan-card .ps-plan-ribbon{top:0 !important; right:auto !important; left:50% !important; transform:translateX(-50%);
  border-radius:0 0 10px 10px !important; padding:3px 12px 4px !important; z-index:2; white-space:nowrap;
  font:700 9.5px var(--fm) !important; letter-spacing:1.2px; text-transform:uppercase; box-shadow:0 4px 14px rgba(0,0,0,.35)}
.ps-plan-card.featured{padding-top:34px !important}

/* ═══ Sidebar: slim, near-black scrollbar ═══ */
#sidenav, .ps-nav, .ps-nav *{scrollbar-width:thin !important; scrollbar-color:#2b1a31 transparent !important}
#sidenav::-webkit-scrollbar, .ps-nav::-webkit-scrollbar, .ps-nav *::-webkit-scrollbar{width:4px !important; height:4px !important; background:transparent !important}
#sidenav::-webkit-scrollbar-track, .ps-nav::-webkit-scrollbar-track{background:transparent !important}
#sidenav::-webkit-scrollbar-thumb, .ps-nav::-webkit-scrollbar-thumb, .ps-nav *::-webkit-scrollbar-thumb{background:#2b1a31 !important; border-radius:99px !important; border:none !important}
#sidenav:hover::-webkit-scrollbar-thumb, .ps-nav:hover::-webkit-scrollbar-thumb{background:#44284d !important}

/* ═══ 🎨 Appearance & settings panel ═══ */
.ps-look-ov{position:fixed; inset:0; z-index:200; background:rgba(4,0,8,.66); display:flex; align-items:flex-start; justify-content:center;
  padding:6vh 14px 20px; overflow:auto; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.ps-look-ov .ps-look{width:min(620px,100%); background:var(--surf); border:1px solid var(--border2); border-radius:20px; box-shadow:0 24px 70px rgba(0,0,0,.6); color:var(--text); overflow:hidden}
.ps-look-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px}
.ps-look-head h3{font:800 17px var(--fd); margin:0}
.ps-look-x{width:36px; height:36px; border-radius:10px; border:1px solid var(--border2); background:none; color:var(--text); cursor:pointer; font-size:14px}
.ps-look-x:hover{border-color:var(--pink)}
.ps-look-tabs{display:flex; gap:4px; padding:0 14px 10px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--border)}
.ps-look-tabs::-webkit-scrollbar{display:none}
.ps-look-tabs button{flex:0 0 auto; background:none; border:1px solid transparent; color:var(--mid); font:600 12.5px var(--fu); padding:8px 12px; border-radius:10px; cursor:pointer}
.ps-look-tabs button:hover{color:var(--text)}
.ps-look-tabs button.on{color:var(--text); background:var(--pink-soft); border-color:var(--border2)}
.ps-look-body{padding:8px 18px 6px; display:flex; flex-direction:column}
.ps-look-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--border)}
.ps-look-row:last-child{border-bottom:none}
.ps-look-lbl{font:600 13.5px var(--fu); color:var(--text)}
.ps-look-lbl span{display:block; font-weight:400; font-size:11.5px; color:var(--mid); margin-top:2px}
.ps-look-seg{display:flex; flex-wrap:wrap; gap:3px; background:rgba(255,255,255,.04); border-radius:10px; padding:3px; justify-content:flex-end}
.ps-look-seg button{background:none; border:none; color:var(--mid); font:600 12px var(--fu); padding:7px 11px; border-radius:8px; cursor:pointer; white-space:nowrap}
.ps-look-seg button:hover:not(.on){background:rgba(255,255,255,.06); color:var(--text)}
.ps-look-seg button.on{background:linear-gradient(135deg,var(--pink),var(--rose)); color:#fff}
.ps-look-sel{background:var(--card); color:var(--text); border:1px solid var(--border2); border-radius:10px; padding:8px 10px; font:13px var(--fu); min-width:190px}
.ps-look-sw{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
.ps-look-dot{width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; position:relative; box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.ps-look-dot.on{border-color:#fff; box-shadow:0 0 0 2px var(--pink)}
.ps-look-dot.custom{display:inline-flex; align-items:center; justify-content:center; background:conic-gradient(#ff4d4d,#fbbf24,#34d399,#22d3ee,#a855f7,#ff4d4d); overflow:hidden}
.ps-look-dot.custom input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%}
.ps-look-dot.custom span{font-size:13px; color:#fff; text-shadow:0 1px 2px #000; pointer-events:none}
.ps-look-preview{margin:12px 0 4px; padding:14px 16px; border-radius:14px; background:var(--card); border:1px solid var(--border)}
.ps-look-preview .pv-h{font:700 20px var(--fd); margin-bottom:4px}
.ps-look-preview .pv-b{font-size:14px; color:var(--mid)}
.ps-look-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 18px 16px; border-top:1px solid var(--border)}
.ps-look-body .ps-look-foot{padding:14px 0 6px; border-top:none}
.ps-look-foot .ps-dim{font-size:11.5px}
.ps-look-empty{padding:26px 6px; text-align:center; color:var(--mid); font-size:13.5px}
.ps-look-tagprev{display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 10px 14px; margin:6px 0 4px; border-radius:14px;
  background:radial-gradient(120% 140% at 50% 0%,var(--pink-soft),transparent 70%),var(--card); border:1px solid var(--border)}
.ps-look-tagbig{font:800 28px var(--fd); letter-spacing:-.02em}
.ps-look-badges{display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; max-width:320px}
.ps-look-badges button{width:34px; height:34px; border-radius:9px; border:1px solid var(--border2); background:var(--card); color:var(--text); cursor:pointer; font-size:15px}
.ps-look-badges button.on{border-color:var(--pink); background:var(--pink-soft)}
@media (max-width:560px){
  .ps-look-ov{padding:0}
  .ps-look-ov .ps-look{border-radius:0; min-height:100%; border:none}
  .ps-look-row{flex-direction:column; align-items:stretch}
  .ps-look-seg, .ps-look-sw, .ps-look-badges{justify-content:flex-start; max-width:none}
  .ps-look-sel{width:100%}
}

/* ═══ 🏷 Name tag ═══ */
.ps-nametag{display:inline-flex; align-items:center; gap:.3em; color:var(--nt,#fff); max-width:100%}
.ps-nametag .nt-text{overflow:hidden; text-overflow:ellipsis}
.ps-nametag.nt-plain{color:inherit}
.ps-nametag .nt-badge{font-size:.8em; line-height:1}
.ps-nametag.nt-grad .nt-text{background:var(--nt-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.ps-nametag.nt-fx-glow .nt-text{text-shadow:0 0 14px color-mix(in srgb,var(--nt) 65%,transparent), 0 0 3px color-mix(in srgb,var(--nt) 45%,transparent)}
.ps-nametag.nt-grad.nt-fx-glow .nt-text{text-shadow:none; filter:drop-shadow(0 0 8px rgba(255,255,255,.35))}
.ps-nametag.nt-fx-shimmer .nt-text{background:linear-gradient(100deg,var(--nt) 38%,#fff 50%,var(--nt) 62%); background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:ntShimmer 3.2s linear infinite}
.ps-nametag.nt-grad.nt-fx-shimmer .nt-text{background:var(--nt-grad); background-size:200% 100%; animation:ntShimmer 4s linear infinite}
@keyframes ntShimmer{from{background-position:130% 0}to{background-position:-130% 0}}
.ps-nametag.nt-fx-outline .nt-text{-webkit-text-stroke:1.5px var(--nt); color:transparent; background:none}
.ps-nametag.nt-grad.nt-fx-outline .nt-text{-webkit-text-stroke:1.5px #fff}
.ps-nametag.nt-pill{padding:.12em .6em; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid color-mix(in srgb,var(--nt) 45%,transparent)}
.ps-acc-name .ps-nametag{font-size:inherit}

/* ═══ Look settings — every rule is keyed to a body class set by applyLook() ═══ */
:root{--app-font:var(--fu)}
/* backgrounds without the pink radial wash */
body.ps-bg-oled, body.ps-bg-slate{background-image:none !important}
body.ps-bg-plum{background-image:radial-gradient(ellipse 70% 50% at 18% 0%, rgba(var(--brand-rgb),.14), transparent 60%) !important}
/* glow off */
body.ps-glow-off{--glow:none; --glow-sm:none; --glow-sys:none}
body.ps-glow-off *{-webkit-backdrop-filter:none !important; backdrop-filter:none !important}
/* reduced motion */
body.ps-motion-off *, body.ps-motion-off *::before, body.ps-motion-off *::after{transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important}
/* font everywhere (the JSON editor and code stay monospace so the highlight lines up) */
body.ps-fontall-on *:not(code):not(pre):not(kbd):not(.msg-code):not(.ps-code-ta):not(.ps-code-overlay):not(.ps-code-overlay *):not(.ps-code-gutter):not(.ps-nametag):not(.ps-nametag *){font-family:var(--app-font) !important}
/* UI scale */
body.ps-scale-90{zoom:.9} body.ps-scale-110{zoom:1.1} body.ps-scale-120{zoom:1.2}
/* bot card size (desktop; phones keep their 2-column grid) */
@media (min-width:821px){
  body.ps-cards-s #grid, body.ps-cards-s .ps-grid, body.ps-cards-s .ps-draftgrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important}
  body.ps-cards-l #grid, body.ps-cards-l .ps-grid, body.ps-cards-l .ps-draftgrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) !important}
  body.ps-cards-s .ps-card{max-width:200px}
  body.ps-cards-l .ps-card{max-width:360px}
  body.ps-cards-s .ps-shelf-row .ps-card{flex-basis:170px}
  body.ps-cards-l .ps-shelf-row .ps-card{flex-basis:270px}
}
/* corners */
body.ps-corners-soft .ps-card, body.ps-corners-soft .creator-card, body.ps-corners-soft .ps-pagehero, body.ps-corners-soft .ps-plan-card, body.ps-corners-soft .ps-draftcard{border-radius:10px !important}
body.ps-corners-sharp .ps-card, body.ps-corners-sharp .creator-card, body.ps-corners-sharp .ps-pagehero, body.ps-corners-sharp .ps-plan-card, body.ps-corners-sharp .ps-draftcard{border-radius:3px !important}
body.ps-corners-sharp .ps-btn, body.ps-corners-sharp .ps-nav-item, body.ps-corners-sharp .ps-nav-ic{border-radius:4px !important}
/* sidebar: icons only (desktop) */
@media (min-width:821px){
  body.ps-side-icons .ps-nav{flex-basis:84px !important; width:84px !important; padding-left:10px !important; padding-right:10px !important}
  body.ps-side-icons .ps-nav-lbl, body.ps-side-icons .ps-nav-sect, body.ps-side-icons .ps-nav-foot{display:none !important}
  body.ps-side-icons .ps-nav-item{justify-content:center; padding:9px 0 !important; gap:0 !important; font-size:0}
  body.ps-side-icons .ps-nav-item .ps-nav-ic{font-size:16px}
}
/* page toggles */
body.ps-bhero-off #hero{display:none !important}
body.ps-hubboard-hidden .hub-board-fold{display:none !important}
body.ps-crban-short .ps-pagehero-banner:not(.blank){aspect-ratio:auto !important; height:150px !important; min-height:150px !important}
body.ps-crban-none .ps-pagehero-banner{aspect-ratio:auto !important; height:64px !important; min-height:64px !important; background-image:none !important;
  background:linear-gradient(135deg,var(--card2),var(--surf)) !important}
body.ps-crban-none .ps-pagehero-body{margin-top:-30px !important}
body.ps-pfp-squircle .ps-pagehero-pfp, body.ps-pfp-squircle .ps-pagehero-pfpwrap::before, body.ps-pfp-squircle .creator-card-pfp, body.ps-pfp-squircle .ps-acc-avatar{border-radius:28% !important}

/* ═══ Account menu (upper-right @handle) ═══ */
.ps-accx{position:fixed; top:64px; right:12px; z-index:190; width:312px; max-width:calc(100vw - 16px);
  background:var(--surf); border:1px solid var(--border2); border-radius:18px; overflow:hidden; color:var(--text);
  box-shadow:0 22px 60px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.03) inset; font-family:var(--fu); text-align:left;
  opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top right; transition:opacity .16s ease, transform .16s ease}
.ps-accx.in{opacity:1; transform:none}
.ps-accx button{font-family:inherit}
.ps-accx-banner{height:64px; background:linear-gradient(120deg, rgba(var(--brand-rgb),.55), var(--rose) 55%, var(--card2)); background-size:cover; background-position:center; position:relative}
.ps-accx-banner::after{content:''; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 30%, var(--surf))}
.ps-accx-who{display:flex; align-items:flex-end; gap:12px; padding:0 16px; margin-top:-30px; position:relative}
.ps-accx-avatar{width:60px; height:60px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--card);
  border:3px solid var(--surf); box-shadow:0 0 0 2px rgba(var(--brand-rgb),.65), 0 6px 18px rgba(0,0,0,.5)}
body.ps-pfp-squircle .ps-accx-avatar{border-radius:28%}
.ps-accx-id{min-width:0; padding-bottom:4px}
.ps-accx-name{font:800 16.5px/1.2 var(--fd); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ps-accx-handle{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--mid); margin-top:2px}
.ps-accx-plan{font:700 9px var(--fm); letter-spacing:1px; text-transform:uppercase; padding:2px 7px; border-radius:999px;
  color:#fff; background:linear-gradient(135deg,var(--pink),var(--rose))}
.ps-accx-plan.plan-premium{background:linear-gradient(135deg,#fbbf24,#f97316); color:#1a0f00}
.ps-accx-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:14px 12px 6px}
.ps-accx-stats button{display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 4px; border-radius:12px; cursor:pointer;
  background:rgba(255,255,255,.035); border:1px solid var(--border); color:var(--text); transition:border-color .14s, background .14s}
.ps-accx-stats button:hover, .ps-accx-stats button:focus-visible{border-color:var(--border2); background:var(--pink-soft); outline:none}
.ps-accx-stats b{font:800 15px var(--fu); letter-spacing:-.01em}
.ps-accx-stats span{font:600 9.5px var(--fm); letter-spacing:.8px; text-transform:uppercase; color:var(--mid)}
.ps-accx-sect{font:700 9.5px var(--fm); letter-spacing:1.6px; text-transform:uppercase; color:var(--dim); padding:12px 18px 4px}
.ps-accx-item{display:flex; align-items:center; gap:12px; width:calc(100% - 12px); margin:0 6px; padding:8px 10px; border:none; border-radius:12px;
  background:none; color:var(--text); cursor:pointer; text-align:left; transition:background .12s}
.ps-accx-item:hover, .ps-accx-item:focus-visible{background:rgba(255,255,255,.055); outline:none}
.ps-accx-item:focus-visible{box-shadow:0 0 0 2px var(--pink-dim) inset}
.ps-accx-tile{width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:10px; font-size:15px;
  background:rgba(var(--brand-rgb),.10); border:1px solid var(--border); transition:transform .14s, border-color .14s}
.ps-accx-item:hover .ps-accx-tile{border-color:var(--border2); transform:translateY(-1px)}
.ps-accx-txt{flex:1; min-width:0; display:flex; flex-direction:column}
.ps-accx-txt b{font:600 13.5px/1.25 var(--fu)}
.ps-accx-txt small{font-size:11.5px; color:var(--mid); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ps-accx-right{flex-shrink:0; display:flex; align-items:center}
.ps-accx-chev{color:var(--dim); font-size:18px; line-height:1; transition:transform .14s, color .14s}
.ps-accx-item:hover .ps-accx-chev{color:var(--text); transform:translateX(2px)}
.ps-accx-tagprev{font:800 14px var(--fd); padding:3px 8px; border-radius:8px; background:rgba(255,255,255,.04); border:1px solid var(--border)}
.ps-accx-density{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 12px 4px; padding:10px 10px 10px 12px;
  border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--border)}
.ps-accx-density>span{font:600 12.5px var(--fu); color:var(--mid)}
.ps-accx-seg{display:flex; gap:2px; padding:2px; border-radius:9px; background:rgba(0,0,0,.25)}
.ps-accx-seg button{border:none; background:none; color:var(--mid); font:600 11.5px var(--fu); padding:5px 9px; border-radius:7px; cursor:pointer}
.ps-accx-seg button:hover:not(.on), .ps-accx-seg button:focus-visible{color:var(--text); background:rgba(255,255,255,.06); outline:none}
.ps-accx-seg button.on{background:linear-gradient(135deg,var(--pink),var(--rose)); color:#fff}
.ps-accx-out{display:flex; align-items:center; justify-content:center; gap:8px; width:calc(100% - 24px); margin:8px 12px 12px; padding:9px;
  border-radius:12px; border:1px solid rgba(255,90,120,.28); background:rgba(255,90,120,.06); color:#ff9db0; font:600 13px var(--fu); cursor:pointer; transition:background .14s, border-color .14s}
.ps-accx-out:hover, .ps-accx-out:focus-visible{background:rgba(255,90,120,.14); border-color:rgba(255,90,120,.5); outline:none}
body.ps-motion-off .ps-accx{transition:none}
@media (max-width:560px){
  .ps-accx{position:fixed; top:auto !important; bottom:0; left:0; right:0 !important; width:auto; max-width:none; border-radius:20px 20px 0 0; transform-origin:bottom center;
    transform:translateY(24px); max-height:88vh; overflow-y:auto; padding-bottom:env(safe-area-inset-bottom); box-shadow:0 0 0 100vmax rgba(0,0,0,.55), 0 -10px 40px rgba(0,0,0,.5)}
  .ps-accx::before{content:''; display:block; width:40px; height:4px; border-radius:4px; background:rgba(255,255,255,.22); position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:2}
  .ps-accx-item{padding:11px 10px}
}
.ps-look-dot.auto{background:conic-gradient(from 200deg,#38bdf8,#ff2d78,#ff2e2e,#38bdf8); color:#fff; font:800 11px var(--fu); text-shadow:0 1px 2px #000}

/* ═══ Layout density — lives here so it applies on every page load ═══ */
body.ps-ui-compact #grid, body.ps-ui-compact .ps-grid, body.ps-ui-compact .ps-draftgrid{gap:8px !important}
body.ps-ui-roomy #grid, body.ps-ui-roomy .ps-grid, body.ps-ui-roomy .ps-draftgrid{gap:28px !important}
body.ps-ui-compact .ps-card-body{padding:7px 10px 9px}
body.ps-ui-roomy .ps-card-body{padding:14px 16px 16px}
body.ps-ui-compact .ps-card-name{font-size:14px}
body.ps-ui-roomy .ps-card-name{font-size:18.5px}
body.ps-ui-compact .ps-nav-item{padding-top:6px; padding-bottom:6px}
body.ps-ui-roomy .ps-nav-item{padding-top:12px; padding-bottom:12px}
body.ps-ui-compact .ps-shelf-row{gap:8px}
body.ps-ui-roomy .ps-shelf-row{gap:22px}

/* ═══ 😈 Mascots — tucked behind top bots, pop up with a speech bubble ═══ */
.ps-card.has-mascot, .hub-card.has-mascot{position:relative; isolation:isolate}   /* lets the mascot sit behind the card's own background */
.ps-mascot{position:absolute; z-index:-1; right:10px; bottom:calc(100% - 20px); width:var(--mw,60px); pointer-events:none;
  transform:translateY(105%); transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.ps-mascot.r1{right:auto; left:14px}   /* the #2 mascot peeks from the other corner */
.ps-mascot img{display:block; width:100%; height:auto; filter:drop-shadow(0 -2px 6px rgba(0,0,0,.45)); user-select:none}
.has-mascot.mascot-up .ps-mascot{transform:translateY(0)}
.has-mascot.mascot-up:hover .ps-mascot{transform:translateY(-6px)}
.has-mascot.mascot-up .ps-mascot img{animation:psMascotBob 3.2s ease-in-out 1s infinite}
@keyframes psMascotBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-1.5deg)}}
/* speech bubble (outside the mascot's stacking so it reads above neighbours) */
.ps-mascot-bubble{position:absolute; bottom:calc(100% - 20px); right:calc(100% - 8px); min-width:80px; max-width:150px; width:max-content;
  padding:5px 9px; border-radius:11px 11px 2px 11px; background:#fff; color:#1b0a22; font:700 10.5px/1.3 var(--fu);
  box-shadow:0 6px 18px rgba(0,0,0,.4); opacity:0; transform:translateY(6px) scale(.9); transform-origin:bottom right;
  transition:opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1); white-space:normal; text-align:left}
.ps-mascot.r1 .ps-mascot-bubble{right:auto; left:calc(100% - 8px); border-radius:12px 12px 12px 2px; transform-origin:bottom left}
.has-mascot.mascot-talk.mascot-up .ps-mascot-bubble{opacity:1; transform:none}
/* room above rows that hold a mascot, so it never covers the card above */
#hubMount .ps-grid:has(.has-mascot), #profileMount .ps-grid:has(.has-mascot), #hubMount .ps-draftgrid:has(.has-mascot), #profileMount .ps-draftgrid:has(.has-mascot){row-gap:max(48px, 1em) !important; padding-top:44px !important}
#hubMount .ps-shelf-row:has(.has-mascot), #profileMount .ps-shelf-row:has(.has-mascot){padding-top:46px !important}
body.ps-mascots-off .ps-mascot{display:none}
body.ps-motion-off .ps-mascot, body.ps-motion-off .ps-mascot img, body.ps-motion-off .ps-mascot-bubble{transition:none !important; animation:none !important}
@media (prefers-reduced-motion: reduce){ .ps-mascot, .ps-mascot img, .ps-mascot-bubble{transition:none !important; animation:none !important} }
@media (max-width:820px){ .ps-mascot{width:calc(var(--mw,60px) * .8)} .ps-mascot-bubble{font-size:10px; max-width:120px} }

#hubMount .hub-scroller:has(.has-mascot){padding-top:62px !important}
.hub-card.has-mascot .ps-mascot{right:8px}

/* ── settings: make the current choice unmistakable ── */
.ps-look-cur{font-style:normal; font-weight:700; color:var(--pink); margin-left:2px}
.ps-look-dot{opacity:.5; transform:scale(.86); transition:transform .15s, opacity .15s, box-shadow .15s}
.ps-look-dot:hover{opacity:.85; transform:scale(.95)}
.ps-look-dot.on{opacity:1; transform:scale(1.12); border-color:transparent !important; box-shadow:0 0 0 2px var(--surf), 0 0 0 4px #fff, 0 0 14px rgba(255,255,255,.35) !important}
.ps-look-dot.on:not(.auto):not(.custom)::after{content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font:900 13px var(--fu); text-shadow:0 1px 3px rgba(0,0,0,.7)}
.ps-look-seg button.on::before{content:'✓ '; font-weight:900}
.ps-look-seg button.on{box-shadow:0 2px 10px rgba(var(--brand-rgb),.35)}
.ps-look-badges button{opacity:.7} .ps-look-badges button.on{opacity:1; box-shadow:0 0 0 2px var(--pink)}

/* ═══ ⭐ Creator tiers — glowing emblems + tier-themed profile ═══ */
/* tier palette: --t1 light · --t2 dark · --tg glow */
.t0,.tier-0{--t1:#c8ccd4;--t2:#4b5260;--tg:rgba(200,204,212,.30)}
.t1,.tier-1{--t1:#c99bff;--t2:#6d28d9;--tg:rgba(168,85,247,.60)}
.t2,.tier-2{--t1:#d2abff;--t2:#7c3aed;--tg:rgba(167,110,255,.65)}
.t3,.tier-3{--t1:#aab6ff;--t2:#5b21b6;--tg:rgba(129,140,248,.65)}
.t4,.tier-4{--t1:#f1c27d;--t2:#8a5a2b;--tg:rgba(230,170,90,.60)}
.t5,.tier-5{--t1:#ffd88a;--t2:#9a6a1f;--tg:rgba(255,200,100,.65)}
.t6,.tier-6{--t1:#ffa05a;--t2:#b91c1c;--tg:rgba(255,110,40,.75)}
.t7,.tier-7{--t1:#c9adff;--t2:#4f46e5;--tg:rgba(160,120,255,.75)}
.t8,.tier-8{--t1:#ff6f85;--t2:#9f1239;--tg:rgba(255,45,85,.75)}
.t9,.tier-9{--t1:#80c3ff;--t2:#1e3a8a;--tg:rgba(59,130,246,.80)}
.t10,.tier-10{--t1:#ffe9a8;--t2:#ff8fd0;--tg:rgba(255,215,140,.85)}

/* badge: emblem + tier name (+ level) */
.ps-lvl-slot{display:inline-flex; vertical-align:middle; margin-left:7px}
.ps-lvl-slot:empty{display:none}
.ps-lvl{display:inline-flex; align-items:center; gap:5px; cursor:default; line-height:1; white-space:nowrap}
.ps-lvl .ps-emb{flex-shrink:0; filter:drop-shadow(0 0 3px var(--tg)) drop-shadow(0 0 7px var(--tg))}
.ps-lvl-txt{display:inline-flex; align-items:baseline; gap:4px}
.ps-lvl-txt b{font:800 9.5px var(--fu); letter-spacing:1.3px; text-transform:uppercase; color:var(--t1); text-shadow:0 0 8px var(--tg)}
.ps-lvl-txt i{font:700 9px var(--fm); font-style:normal; color:var(--t1); opacity:.75}
.ps-lvl-fire{font-style:normal; font-size:10px; margin-left:1px}
.ps-lvl.t10 .ps-lvl-txt b{background:linear-gradient(90deg,#ffe08a,#ff4d9d,#7c5cff,#22d3ee,#ffe08a); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:psTierShift 4s linear infinite}
.ps-lvl.t9 .ps-emb, .ps-lvl.t10 .ps-emb{animation:psTierPulse 2.6s ease-in-out infinite}
@keyframes psTierShift{to{background-position:200% 0}}
@keyframes psTierPulse{0%,100%{filter:drop-shadow(0 0 3px var(--tg)) drop-shadow(0 0 7px var(--tg))}50%{filter:drop-shadow(0 0 5px var(--tg)) drop-shadow(0 0 14px var(--tg))}}
/* big emblem in the level panel */
.ps-lvl.big{flex-direction:column; gap:6px; position:relative}
.ps-lvl.big .ps-emb{filter:drop-shadow(0 0 6px var(--tg)) drop-shadow(0 0 18px var(--tg))}
.ps-lvl.big .ps-lvl-txt b{font-size:10.5px; letter-spacing:1.8px}
.ps-lvl.big .ps-lvl-fire{position:absolute; top:-4px; right:-8px; font-size:14px}
body.ps-motion-off .ps-lvl .ps-emb, body.ps-motion-off .ps-lvl-txt b{animation:none !important}

/* level panel */
.ps-lvl-panel:empty{display:none}
.ps-lvl-card{margin:-4px 0 18px; padding:18px 20px; border-radius:18px; position:relative; overflow:hidden; background:var(--card);
  border:1px solid color-mix(in srgb,var(--t1) 28%,transparent); box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 0 26px -8px var(--tg)}
.ps-lvl-card::before{content:''; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--t2),var(--t1),var(--t2))}
.ps-lvl-card::after{content:''; position:absolute; left:-120px; top:-140px; width:420px; height:420px; background:radial-gradient(closest-side,var(--tg),transparent); opacity:.4; pointer-events:none}
.ps-lvl-card.tier-10::before{background:linear-gradient(90deg,#ffe08a,#ff4d9d,#7c5cff,#22d3ee,#ffe08a); background-size:200% 100%; animation:psTierShift 4s linear infinite}
.ps-lvl-top{display:flex; align-items:center; gap:16px; position:relative; z-index:1}
.ps-lvl-id{flex:1; min-width:0}
.ps-lvl-title{font:800 17px var(--fd); color:var(--text)}
.ps-lvl-title b{color:var(--t1); text-shadow:0 0 12px var(--tg)}
.ps-lvl-title span{font:500 12.5px var(--fu); color:var(--mid)}
.ps-lvl-bar{display:block; height:8px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; margin:9px 0 6px}
.ps-lvl-bar>span{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--t2),var(--t1)); box-shadow:0 0 10px var(--tg); transition:width .6s ease}
.ps-lvl-bar.sm{height:5px; margin:3px 0 0}
.ps-lvl-sub{font-size:12px; color:var(--mid)}
.ps-lvl-sub b{color:#f5b642}
.ps-lvl-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; position:relative; z-index:1}
.ps-lvl-stats>div{padding:10px 6px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid var(--border); text-align:center}
.ps-lvl-stats b{display:block; font:800 16px var(--fu); color:var(--text)}
.ps-lvl-stats span{font:600 9.5px var(--fm); letter-spacing:.7px; text-transform:uppercase; color:var(--mid)}
.ps-lvl-pass{margin-top:10px; font-size:12.5px; color:var(--mid); position:relative; z-index:1}
.ps-lvl-launch{margin-top:14px; padding:12px 14px; border-radius:14px; background:rgba(245,182,66,.06); border:1px dashed rgba(245,182,66,.4); position:relative; z-index:1}
.ps-lvl-launch-h{font:700 13px var(--fu); margin-bottom:8px}
.ps-lvl-launch-h span{font-weight:500; color:var(--mid); font-size:12px; margin-left:4px}
.ps-lvl-lrow{display:grid; grid-template-columns:minmax(120px,1fr) 2fr; gap:12px; align-items:center; padding:6px 0; border-top:1px solid var(--border)}
.ps-lvl-lname{font:600 13px var(--fu); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ps-lvl-lname em{font-style:normal; font-size:11px; color:#f5b642; margin-left:6px}
.ps-lvl-lbars{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ps-lvl-lbars label{font:600 11px var(--fm); color:var(--mid)}
.ps-lvl-note{font-size:11.5px; color:var(--mid); margin-top:8px}
.ps-lvl-how{margin-top:12px; font-size:12.5px; color:var(--mid); position:relative; z-index:1}
.ps-lvl-how summary{cursor:pointer; font-weight:600; color:var(--text)}
.ps-lvl-how p{margin:8px 0 0; line-height:1.55}
.ps-lvl-reqwrap{overflow-x:auto; margin-top:10px}
.ps-lvl-req{width:100%; border-collapse:collapse; font-size:12.5px; min-width:420px}
.ps-lvl-req th{font:700 9.5px var(--fm); letter-spacing:.8px; text-transform:uppercase; color:var(--dim); text-align:left; padding:6px 8px; border-bottom:1px solid var(--border)}
.ps-lvl-req td{padding:6px 8px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle}
.ps-lvl-req td:first-child{display:flex; align-items:center; gap:8px}
.ps-lvl-req td:first-child .ps-emb{filter:drop-shadow(0 0 4px var(--tg))}
.ps-lvl-req td b{font:800 10px var(--fu); letter-spacing:1.2px; text-transform:uppercase; color:var(--t1)}
.ps-lvl-req td small{color:var(--mid); font-size:11px}
.ps-lvl-req tr.cur td{background:rgba(255,255,255,.05)}
.ps-lvl-req tr.cur td:first-child::after{content:'← you'; font:700 10px var(--fm); color:var(--pink); margin-left:4px}
/* tier emblem colours inside the requirement rows */

/* profile header takes on the creator's tier */
.ps-pagehero.ps-tiered{border-color:color-mix(in srgb,var(--t1) 40%,transparent) !important; box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 0 40px -10px var(--tg), 0 18px 50px rgba(0,0,0,.35)}
.ps-pagehero.ps-tiered .ps-pagehero-pfpwrap::before{background:conic-gradient(from 210deg,var(--t2),var(--t1),var(--t2),var(--t1),var(--t2)) !important; box-shadow:0 0 18px var(--tg)}
.ps-pagehero.ps-tiered .ps-pagehero-scrim{background:linear-gradient(to top,rgba(10,6,14,.94),color-mix(in srgb,var(--t2) 12%,transparent)) !important}
.ps-pagehero.ps-tiered.tier-0{box-shadow:0 18px 50px rgba(0,0,0,.35)}   /* Rookie: no aura yet */
.ps-pagehero.ps-tiered.tier-9{box-shadow:0 0 0 1px rgba(167,139,250,.35), 0 0 60px -8px var(--tg), 0 18px 50px rgba(0,0,0,.45)}
.ps-pagehero.ps-tiered.tier-10 .ps-pagehero-pfpwrap::before{background:conic-gradient(#ffe08a,#ff4d9d,#7c5cff,#22d3ee,#ffe08a) !important; animation:psTierSpin 6s linear infinite}
.ps-pagehero.ps-tiered.tier-10{box-shadow:0 0 0 1px rgba(255,160,220,.45), 0 0 70px -6px var(--tg), 0 18px 50px rgba(0,0,0,.45)}
@keyframes psTierSpin{to{transform:rotate(360deg)}}
body.ps-motion-off .ps-pagehero.tier-10 .ps-pagehero-pfpwrap::before{animation:none}
@media (max-width:640px){ .ps-lvl-stats{grid-template-columns:repeat(2,1fr)} .ps-lvl-lrow{grid-template-columns:1fr} .ps-lvl-top{flex-direction:column; text-align:center} }




/* ═══ Tier emblems — artwork + reveal-video effects ═══ */
.ps-embi{position:relative; display:inline-grid; place-items:center; width:var(--s); height:var(--s); flex-shrink:0; isolation:isolate}
.ps-embi img{width:100%; height:100%; object-fit:contain; position:relative; z-index:2; user-select:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)) drop-shadow(0 0 4px var(--tg))}
.ps-lvl .ps-emb{filter:none}   /* the glow now lives on the artwork */
.ps-lvl:not(.big).t9 .ps-embi img, .ps-lvl:not(.big).t10 .ps-embi img{animation:psEmbGlow 2.6s ease-in-out infinite}
@keyframes psEmbGlow{0%,100%{filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)) drop-shadow(0 0 4px var(--tg))}50%{filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)) drop-shadow(0 0 10px var(--tg))}}
.ps-embi.t0 img{opacity:.85}

/* big emblem: float + periodic coin-flip, glowing aura, orbiting energy ring */
.ps-embi.big{perspective:500px}
.ps-embi.big img{filter:drop-shadow(0 8px 10px rgba(0,0,0,.6)) drop-shadow(0 0 12px var(--tg)); animation:psEmbFlip 8s cubic-bezier(.45,.05,.3,1) infinite; transform-style:preserve-3d}
@keyframes psEmbFlip{0%{transform:translateY(0) rotateY(0)}20%{transform:translateY(-4px) rotateY(0)}40%{transform:translateY(0) rotateY(0)}
  55%{transform:translateY(-3px) rotateY(0)}70%{transform:translateY(-6px) rotateY(360deg)}85%{transform:translateY(-2px) rotateY(360deg)}100%{transform:translateY(0) rotateY(360deg)}}
.ps-lvl.big:hover .ps-embi img{animation-play-state:paused; transform:rotateY(22deg) rotateX(-6deg) scale(1.06); transition:transform .4s}
.ps-embi .fx{position:absolute; pointer-events:none; display:block}
.ps-embi .fx-aura{inset:-34%; z-index:0; border-radius:50%; background:radial-gradient(closest-side,var(--tg),transparent); animation:psEmbAura 3s ease-in-out infinite}
@keyframes psEmbAura{0%,100%{opacity:.55; transform:scale(.92)}50%{opacity:1; transform:scale(1.06)}}
.ps-embi .fx-ring{left:-28%; right:-28%; top:30%; bottom:30%; border-radius:50%; border:2px solid var(--t1);
  box-shadow:0 0 10px var(--tg), inset 0 0 10px var(--tg); animation:psEmbOrbit 3.2s linear infinite}
.ps-embi .fx-ring.back{z-index:1; opacity:.55}
.ps-embi .fx-ring.front{z-index:3; clip-path:inset(50% 0 0 0); opacity:.9}   /* lower half passes in front of the emblem */
@keyframes psEmbOrbit{from{transform:rotate(-8deg) scaleX(1)}50%{transform:rotate(8deg) scaleX(.94)}to{transform:rotate(-8deg) scaleX(1)}}
/* Warlord — living flame */
.ps-embi .fx-fire{inset:-22% -12% 18% -12%; z-index:1; border-radius:45% 45% 40% 40%;
  background:radial-gradient(ellipse at 50% 85%,rgba(255,220,120,.95),rgba(255,120,30,.8) 35%,rgba(200,30,10,.45) 60%,transparent 72%);
  filter:blur(5px); mix-blend-mode:screen; transform-origin:50% 100%; animation:psEmbFire .45s ease-in-out infinite alternate}
@keyframes psEmbFire{from{transform:scaleY(.94) skewX(-2deg); opacity:.8}to{transform:scaleY(1.08) skewX(2deg); opacity:1}}
/* Cosmic — swirling nebula */
.ps-embi .fx-cosmic{inset:-30%; z-index:1; border-radius:50%; background:conic-gradient(from 0deg,transparent,rgba(160,120,255,.7),transparent 30%,rgba(34,211,238,.55),transparent 60%,rgba(236,72,153,.6),transparent 85%);
  filter:blur(6px); animation:psEmbSpin 5s linear infinite}
@keyframes psEmbSpin{to{transform:rotate(360deg)}}
/* Overlord — orbiting ruby shards */
.ps-embi .fx-shards{inset:-20%; z-index:3; border-radius:50%; animation:psEmbSpin 7s linear infinite}
.ps-embi .fx-shards::before, .ps-embi .fx-shards::after{content:''; position:absolute; width:7px; height:11px; left:50%; top:0; background:linear-gradient(#ffb3c0,#e11d48 60%,#7f1d1d);
  clip-path:polygon(50% 0,100% 45%,50% 100%,0 45%); filter:drop-shadow(0 0 4px #ff2d55)}
.ps-embi .fx-shards::after{top:auto; bottom:4%; left:18%; transform:rotate(140deg) scale(.8)}
/* Imperial — blue lightning beam */
.ps-embi .fx-beam{left:-40%; right:40%; top:44%; height:8%; z-index:3; border-radius:99px; background:linear-gradient(90deg,transparent,rgba(125,211,252,.95) 70%,#fff);
  filter:blur(1px) drop-shadow(0 0 8px #3b82f6); transform-origin:100% 50%; animation:psEmbBeam 3s ease-in-out infinite}
@keyframes psEmbBeam{0%,60%,100%{opacity:0; transform:scaleX(.2)}70%{opacity:1; transform:scaleX(1)}85%{opacity:.4; transform:scaleX(.9)}}
/* Godlike — rising gold sparks */
.ps-embi .fx-sparks{inset:0; z-index:3}
.ps-embi .fx-sparks::before, .ps-embi .fx-sparks::after{content:''; position:absolute; left:50%; bottom:20%; width:3px; height:3px; border-radius:50%; background:#fff3c4;
  box-shadow:-30px 6px 0 #ffd76a, 26px -4px 0 #ffe9a8, -14px -18px 0 #ffd76a, 18px 14px 0 #fff, -38px -10px 0 #ffcf5a, 34px 8px 0 #ffd76a, 4px -26px 0 #fff3c4;
  filter:drop-shadow(0 0 3px #ffd76a); animation:psEmbSparks 2.4s ease-out infinite}
.ps-embi .fx-sparks::after{animation-delay:1.2s; transform:scaleX(-1)}
@keyframes psEmbSparks{from{transform:translateY(0); opacity:0}20%{opacity:1}to{transform:translateY(-34px); opacity:0}}
.ps-lvl.big{gap:10px}
.ps-lvl.big .ps-lvl-txt b{font-size:11px; letter-spacing:2px}
.ps-lvl-req td:first-child .ps-embi img{filter:drop-shadow(0 1px 1px rgba(0,0,0,.7)) drop-shadow(0 0 3px var(--tg))}
body.ps-motion-off .ps-embi img, body.ps-motion-off .ps-embi .fx{animation:none !important}
@media (prefers-reduced-motion: reduce){ .ps-embi img, .ps-embi .fx{animation:none !important} }

/* ═══ 🏅 Levels page ═══ */
#levelsMount{padding:0 clamp(12px,3vw,34px) 40px}
.ps-lvlpg-signin{padding:18px; border-radius:16px; background:var(--card); border:1px dashed var(--border2); color:var(--mid); margin-bottom:18px}
.ps-lvlpg-sec{margin-top:28px}
.ps-lvlpg-sec h2{font:800 20px var(--fd); margin:0 0 14px; color:var(--text)}
.ps-lvlpg-ladder{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:14px}
.ps-lvlpg-tier{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; padding:22px 12px 14px;
  border-radius:18px; background:var(--card); border:1px solid color-mix(in srgb,var(--t1) 22%,transparent); overflow:hidden}
.ps-lvlpg-tier::before{content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 22%,var(--tg),transparent 62%); opacity:.35; pointer-events:none}
.ps-lvlpg-emb{height:96px; display:grid; place-items:center; margin-bottom:6px; position:relative}
.ps-lvlpg-name{font:800 13px var(--fu); letter-spacing:1.6px; text-transform:uppercase; color:var(--t1); text-shadow:0 0 10px var(--tg)}
.ps-lvlpg-p{font:600 10px var(--fm); color:var(--dim); letter-spacing:.8px; margin-bottom:6px}
.ps-lvlpg-req{font-size:12px; color:var(--mid)}
.ps-lvlpg-req b{color:var(--text)}
.ps-lvlpg-extra{font-size:11px; color:var(--mid); margin-top:2px; line-height:1.35}
.ps-lvlpg-state{margin-top:10px; font:700 10.5px var(--fm); letter-spacing:.6px; padding:4px 10px; border-radius:99px; background:rgba(255,255,255,.05); color:var(--mid)}
.ps-lvlpg-tier.done .ps-lvlpg-state{color:#4fd6a0}
.ps-lvlpg-tier.current{border-color:var(--t1); box-shadow:0 0 0 1px var(--t1), 0 0 30px -6px var(--tg)}
.ps-lvlpg-tier.current::before{opacity:.6}
.ps-lvlpg-tier.current .ps-lvlpg-state{background:var(--t1); color:#12091a}
.ps-lvlpg-tier.locked .ps-lvlpg-emb img{filter:grayscale(.75) brightness(.55) drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.ps-lvlpg-tier.locked .ps-lvlpg-emb .fx{opacity:.35}
.ps-lvlpg-board{overflow-x:auto; border-radius:16px; border:1px solid var(--border); background:var(--card)}
.ps-lvlpg-table{width:100%; border-collapse:collapse; font-size:13px; min-width:640px}
.ps-lvlpg-table th{font:700 9.5px var(--fm); letter-spacing:.8px; text-transform:uppercase; color:var(--dim); text-align:left; padding:12px 14px; border-bottom:1px solid var(--border)}
.ps-lvlpg-table td{padding:10px 14px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle}
.ps-lvlpg-table tbody tr{cursor:pointer; transition:background .12s}
.ps-lvlpg-table tbody tr:hover{background:rgba(255,255,255,.035)}
.ps-lvlpg-table tr.me{background:var(--pink-soft)}
.ps-lvlpg-table td.rk{font:800 14px var(--fm); color:var(--mid); width:44px}
.ps-lvlpg-table tbody tr:nth-child(1) td.rk{color:#ffd76a} .ps-lvlpg-table tbody tr:nth-child(2) td.rk{color:#dfe4ea} .ps-lvlpg-table tbody tr:nth-child(3) td.rk{color:#e0915a}
.ps-lvlpg-table td.who{display:flex; align-items:center; gap:10px}
.ps-lvlpg-table td.who img{width:34px; height:34px; border-radius:50%; object-fit:cover; background:var(--card2)}
.ps-lvlpg-table td.who span{display:flex; flex-direction:column; font-weight:700}
.ps-lvlpg-table td.who small{font-weight:400; font-size:11.5px; color:var(--mid)}
.ps-lvlpg-howgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
.ps-lvlpg-howgrid>div{padding:14px; border-radius:14px; background:var(--card); border:1px solid var(--border); display:flex; flex-direction:column; gap:4px}
.ps-lvlpg-howgrid b{font:800 16px var(--fu); color:var(--text)}
.ps-lvlpg-howgrid span{font-size:12.5px; color:var(--mid); line-height:1.45}
.ps-lvlpg-how p{margin-top:14px; color:var(--mid); font-size:13px; line-height:1.6; max-width:820px}

/* ── levels: weekly goal + messages per bot ── */
.ps-lvl-week{margin-top:14px; padding:12px 14px; border-radius:14px; position:relative; z-index:1; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08)}
.ps-lvl-week.miss{border-color:rgba(255,110,110,.35); background:rgba(255,90,90,.05)}
.ps-lvl-week.met{border-color:rgba(90,220,140,.4); background:rgba(90,220,140,.06)}
.ps-lvl-week-h{font:700 13px var(--fu)}
.ps-lvl-week-h span{font-weight:500; color:var(--mid); font-size:12px; margin-left:4px}
.ps-lvl-week.met .ps-lvl-week-h span{color:#6fe3a0}
.ps-lvl-bar.wk{height:10px}
.ps-lvl-week.miss .ps-lvl-bar.wk>span{background:linear-gradient(90deg,#ff7a59,#ffb347); box-shadow:0 0 10px rgba(255,140,80,.5)}
.ps-lvl-week.met .ps-lvl-bar.wk>span{background:linear-gradient(90deg,#2fbf71,#7bf1a8); box-shadow:0 0 10px rgba(80,230,140,.5)}
.ps-lvl-week-n{font-size:12.5px; color:var(--mid)}
.ps-lvl-week-n b{color:var(--text)}
.ps-lvl-weeks{display:flex; align-items:center; gap:4px; margin-top:9px; font-size:11px; color:var(--dim)}
.ps-lvl-weeks i{width:14px; height:14px; border-radius:4px; display:inline-block}
.ps-lvl-weeks i.met{background:#2fbf71; box-shadow:0 0 6px rgba(80,230,140,.45)}
.ps-lvl-weeks i.miss{background:#e5534b; opacity:.85}
.ps-lvl-weeks span{margin-left:6px}
.ps-lvl-bots{margin-top:14px; position:relative; z-index:1; overflow-x:auto}
.ps-lvl-bots table{width:100%; border-collapse:collapse; font-size:12.5px}
.ps-lvl-bots th{font:700 9.5px var(--fm); letter-spacing:.8px; text-transform:uppercase; color:var(--dim); text-align:right; padding:6px 8px; border-bottom:1px solid var(--border)}
.ps-lvl-bots td{padding:6px 8px; border-bottom:1px solid var(--border); text-align:right; font-variant-numeric:tabular-nums}
.ps-lvl-bots th:first-child,.ps-lvl-bots td:first-child{text-align:left; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ── prestige rewards ─────────────────────────────────────────────── */
/* P2 perk: the tier ring around the profile photo is earned (Rookie/Initiator keep the default ring) */
.ps-pagehero.ps-tiered:not(.perk-frame) .ps-pagehero-pfpwrap::before{background:linear-gradient(135deg,#ff2d78,#d946a8 45%,#7c3aed) !important; box-shadow:none}
.ps-pagehero.ps-tiered.perk-frame .ps-pagehero-pfpwrap::after{content:''; position:absolute; inset:-9px; border-radius:50%; z-index:0; pointer-events:none;
  border:2px solid color-mix(in srgb,var(--t1) 70%,transparent); box-shadow:0 0 16px var(--tg), inset 0 0 10px var(--tg)}
/* P5 perk: animated aura over the banner */
.ps-pagehero.perk-aura .ps-pagehero-banner::before{content:''; position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(60% 80% at 20% 100%,color-mix(in srgb,var(--t1) 40%,transparent),transparent 70%),radial-gradient(50% 70% at 85% 0%,color-mix(in srgb,var(--t2) 45%,transparent),transparent 70%);
  animation:psAura 7s ease-in-out infinite alternate}
@keyframes psAura{0%{opacity:.55; transform:scale(1)}100%{opacity:1; transform:scale(1.06)}}

/* earned name-tag effects */
.ps-nametag.nt-fx-ember .nt-text{background:linear-gradient(0deg,#ff3d00,#ff9100 40%,#ffe082 80%,#fff); background-size:100% 220%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:ntEmber 1.6s ease-in-out infinite alternate; filter:drop-shadow(0 0 6px rgba(255,120,30,.65))}
@keyframes ntEmber{0%{background-position:0 0}100%{background-position:0 100%}}
.ps-nametag.nt-fx-storm .nt-text{color:#dff4ff; text-shadow:0 0 6px #7dd3fc,0 0 14px #38bdf8,0 0 26px #6366f1; animation:ntStorm 3.2s steps(1) infinite}
@keyframes ntStorm{0%,86%,100%{opacity:1; text-shadow:0 0 6px #7dd3fc,0 0 14px #38bdf8,0 0 26px #6366f1}88%{opacity:.55}90%{opacity:1; text-shadow:0 0 10px #fff,0 0 24px #7dd3fc,0 0 44px #a5b4fc}93%{opacity:.7}}
.ps-nametag.nt-fx-cosmic .nt-text{background:radial-gradient(circle at 20% 40%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 70% 60%,#fff 0 1px,transparent 1.5px),linear-gradient(90deg,#7c3aed,#22d3ee,#a855f7,#7c3aed);
  background-size:14px 14px,19px 19px,300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:ntCosmic 8s linear infinite; filter:drop-shadow(0 0 7px rgba(168,85,247,.7))}
@keyframes ntCosmic{to{background-position:28px 0,-38px 0,300% 0}}
.ps-nametag.nt-fx-prism .nt-text{background:linear-gradient(115deg,#ff4d4d,#fbbf24,#34d399,#22d3ee,#a855f7,#ff5c9a,#ff4d4d); background-size:400% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:ntPrism 5s linear infinite; filter:drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 8px rgba(255,255,255,.35))}
@keyframes ntPrism{to{background-position:400% 0}}
.ps-nametag.nt-fx-divine .nt-text{background:linear-gradient(100deg,#fff6d5 20%,#ffd76a 40%,#fff 50%,#ffd76a 60%,#fff6d5 80%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:ntShimmer 3s linear infinite; filter:drop-shadow(0 0 6px rgba(255,215,106,.9)) drop-shadow(0 0 18px rgba(255,160,220,.55))}
.ps-nametag.nt-fx-divine{position:relative}
.ps-nametag.nt-fx-divine::before{content:'✦'; position:absolute; top:-.55em; right:-.55em; font-size:.6em; color:#ffe9a8; text-shadow:0 0 8px #ffd76a; animation:ntTwinkle 2s ease-in-out infinite}
@keyframes ntTwinkle{0%,100%{opacity:.3; transform:scale(.8) rotate(0)}50%{opacity:1; transform:scale(1.15) rotate(20deg)}}
@media (prefers-reduced-motion:reduce){.ps-nametag[class*="nt-fx-"] .nt-text,.ps-nametag.nt-fx-divine::before,.ps-pagehero.perk-aura .ps-pagehero-banner::before{animation:none}}
body.ps-motion-off .ps-nametag[class*="nt-fx-"] .nt-text, body.ps-motion-off .ps-pagehero.perk-aura .ps-pagehero-banner::before{animation:none}

/* locked reward options in the name-tag editor */
.ps-look [data-locked]{opacity:.42; cursor:not-allowed; filter:grayscale(.6)}
.ps-look-dot.locked{position:relative}
.ps-look-dot.locked::after{content:'🔒'; position:absolute; inset:0; display:grid; place-items:center; font-size:11px}
.ps-look-fx{flex-wrap:wrap}

/* next-reward strip on the level card */
.ps-lvl-reward{margin-top:12px; display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:14px; position:relative; z-index:1;
  background:linear-gradient(90deg,color-mix(in srgb,var(--t1) 14%,transparent),rgba(255,255,255,.02)); border:1px solid color-mix(in srgb,var(--t1) 35%,transparent)}
.ps-lvl-reward-ic{font-size:22px; filter:drop-shadow(0 0 8px var(--tg))}
.ps-lvl-reward div{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
.ps-lvl-reward b{font:700 13px var(--fu)}
.ps-lvl-reward span{font-size:12px; color:var(--mid)}
.ps-lvl-reward em{font:700 10px var(--fm); letter-spacing:.6px; text-transform:uppercase; color:var(--dim); font-style:normal; white-space:nowrap}

/* ladder cards + hall of fame */
.ps-lvlpg-req small{color:var(--dim); font-size:10.5px}
.ps-lvlpg-rew{margin:6px 8px 0; padding:6px 8px; border-radius:10px; font:700 11.5px var(--fu); color:var(--t1); background:rgba(255,255,255,.04); border:1px dashed color-mix(in srgb,var(--t1) 40%,transparent); text-align:center}
.ps-lvlpg-rew small{display:block; font:500 10.5px var(--fb,inherit); color:var(--mid); margin-top:2px}
.ps-lvlpg-rew.got{border-style:solid; background:color-mix(in srgb,var(--t1) 12%,transparent)}
.ps-lvlpg-rew.got::after{content:' ✓ claimed'; font-size:10px; color:#6fe3a0}
.ps-lvlpg-hall{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px}
.ps-lvlpg-hallcard{all:unset; cursor:pointer; box-sizing:border-box; position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 12px 14px; border-radius:18px; text-align:center;
  background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--t1) 22%,transparent),rgba(10,8,16,.9) 70%); border:1px solid color-mix(in srgb,var(--t1) 45%,transparent); box-shadow:0 0 30px -10px var(--tg)}
.ps-lvlpg-hallcard:hover{transform:translateY(-2px); box-shadow:0 0 40px -6px var(--tg)}
.ps-lvlpg-hallcard:focus-visible{outline:2px solid var(--t1); outline-offset:3px}
.ps-lvlpg-hallcard>.ps-embi,.ps-lvlpg-hallcard>span:first-child{position:absolute; top:-14px; right:-10px}
.ps-lvlpg-hallcard img{width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--t1)}
.ps-lvlpg-hallcard .nm{font:700 14px var(--fu)}
.ps-lvlpg-hallcard .tr{font:700 10px var(--fm); letter-spacing:1px; text-transform:uppercase; color:var(--t1)}
.ps-lvlpg-hallcard .ms{font-size:11.5px; color:var(--mid)}

/* levels: monthly EXP fee line */
.ps-lvl-fee{margin-top:10px; padding:8px 12px; border-radius:11px; font-size:12.5px; color:var(--mid); position:relative; z-index:1;
  background:rgba(255,255,255,.03); border:1px dashed rgba(255,255,255,.14)}
.ps-lvl-fee b{color:var(--text)}

/* levels card: collapsible details */
.ps-lvl-top{position:relative}
.ps-lvl-toggle{align-self:flex-start; margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:10px; cursor:pointer;
  font:700 12px var(--fu); color:var(--text); background:rgba(255,255,255,.05); border:1px solid color-mix(in srgb,var(--t1) 40%,transparent); position:relative; z-index:2;
  transition:background .15s, border-color .15s}
.ps-lvl-toggle:hover{background:rgba(255,255,255,.09); border-color:var(--t1)}
.ps-lvl-toggle:focus-visible{outline:2px solid var(--t1); outline-offset:2px}
.ps-lvl-toggle i{font-style:normal; font-size:11px; transition:transform .2s ease}
.ps-lvl-card.open .ps-lvl-toggle i{transform:rotate(180deg)}
.ps-lvl-sum{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 2px}
.ps-lvl-card.open .ps-lvl-sum{display:none}
.ps-lvl-sum span{padding:3px 9px; border-radius:999px; font:600 11.5px var(--fu); color:var(--mid); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
.ps-lvl-sum span.met{color:#6fe3a0; border-color:rgba(90,220,140,.35)}
.ps-lvl-sum span.miss{color:#ffb38a; border-color:rgba(255,140,90,.3)}
.ps-lvl-body[hidden]{display:none}
.ps-lvl-body{animation:psLvlOpen .22s ease}
@keyframes psLvlOpen{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .ps-lvl-body{animation:none} .ps-lvl-toggle i{transition:none} }
@media (max-width:640px){ .ps-lvl-toggle{position:absolute; top:10px; right:10px; padding:6px 10px} }

/* ── forgot password / set new password ── */
.ps-forgot-link{display:block; margin:6px 0 0 auto; background:none; border:0; padding:2px 0; cursor:pointer; font:600 12px var(--fu); color:var(--pink,#ff5c9a); text-align:right; width:max-content}
.ps-forgot-link:hover{text-decoration:underline}
.ps-forgot-link:focus-visible{outline:2px solid var(--pink,#ff5c9a); outline-offset:2px; border-radius:4px}
.ps-pw-ov{z-index:300}
.ps-pw-box{width:min(440px,94vw)}
.ps-pw-b{display:flex; flex-direction:column; gap:12px}
.ps-pw-tabs{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:12px; background:rgba(255,255,255,.04)}
.ps-pw-tabs button{border:0; background:none; color:var(--mid); padding:8px; border-radius:9px; font:700 12.5px var(--fu); cursor:pointer}
.ps-pw-tabs button.on{background:rgba(255,92,154,.14); color:var(--text)}
.ps-pw-note{margin:0; font-size:12.5px; color:var(--mid); line-height:1.55}
.ps-pw-note b{color:var(--text)}
.ps-pw-err{color:#ff7b7b; font-size:12.5px; min-height:1em}
.ps-pw-done{display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08)}
.ps-pw-done.ok,.ps-pw-done.issued{border-color:rgba(90,220,140,.4)}
.ps-pw-done.dismissed,.ps-pw-done.expired{border-color:rgba(255,120,120,.35)}
.ps-pw-done p{margin:0; font-size:13px; color:var(--mid)}
.ps-pw-ic{font-size:30px}
.ps-pw-code{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:rgba(0,0,0,.35); border:1px dashed rgba(255,255,255,.2)}
.ps-pw-code span{flex:1; font:800 18px var(--fm,monospace); letter-spacing:2px; color:#fff; word-break:break-all}

/* ── followers ── */
.ps-fstat{all:unset; cursor:pointer; color:inherit}
.ps-fstat:hover{text-decoration:underline}
.ps-fstat:focus-visible{outline:2px solid var(--pink,#ff5c9a); outline-offset:2px; border-radius:4px}
.ps-flist{display:flex; flex-direction:column; gap:6px; max-height:60vh; overflow:auto}
.ps-frow{all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.07)}
.ps-frow:hover,.ps-frow:focus-visible{border-color:var(--pink,#ff5c9a); background:rgba(255,255,255,.03)}
.ps-frow img{width:36px; height:36px; border-radius:50%; object-fit:cover}
.ps-frow span{display:flex; flex-direction:column} .ps-frow small{font-size:11px; color:var(--dim)}

/* ── thumbnail positioner ── */
.ps-crop-ov{z-index:320}
.ps-crop-box{width:min(720px,96vw)}
.ps-crop-body{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap}
.ps-crop-stage{position:relative; flex:0 0 auto; width:300px; max-width:100%; border-radius:16px; overflow:hidden; box-shadow:0 0 0 2px var(--pink,#ff5c9a), 0 10px 40px rgba(0,0,0,.6)}
.ps-crop-stage canvas{display:block; width:100%; height:auto; cursor:grab; touch-action:none; background:#0b0710}
.ps-crop-stage canvas.drag{cursor:grabbing}
.ps-crop-stage canvas:focus-visible{outline:3px solid #9be7ff; outline-offset:-3px}
.ps-crop-grid{position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(90deg,transparent calc(33.3% - .5px),rgba(255,255,255,.18) calc(33.3% - .5px) calc(33.3% + .5px),transparent 0,transparent calc(66.6% - .5px),rgba(255,255,255,.18) calc(66.6% - .5px) calc(66.6% + .5px),transparent 0),
  linear-gradient(transparent calc(33.3% - .5px),rgba(255,255,255,.18) calc(33.3% - .5px) calc(33.3% + .5px),transparent 0,transparent calc(66.6% - .5px),rgba(255,255,255,.18) calc(66.6% - .5px) calc(66.6% + .5px),transparent 0)}
.ps-crop-side{flex:1; min-width:220px; display:flex; flex-direction:column; gap:12px}
.ps-crop-side input[type=range]{width:100%; margin-top:6px}
.ps-crop-btns{display:flex; gap:8px; flex-wrap:wrap}
.ps-crop-info{font-size:12px; color:var(--dim)} .ps-crop-info b{color:var(--text)}
.ps-reframe{margin-top:6px; font-size:12px; padding:6px 10px}

/* ── 🌶 Spicy — the middle content tier (sexual, no genitals) ── */
.ps-nsfw.ps-sug{background:linear-gradient(135deg,#ff9a3c,#ff4f6d); letter-spacing:.06em}
body.theme-rainbow .ps-nsfw.ps-sug{animation:none; background:linear-gradient(135deg,#ff9a3c,#ff4f6d)}
.ps-ctog-pill.sug:has(input:checked){border-color:#ff9a3c; color:#ffc08a; background:rgba(255,154,60,.12); box-shadow:0 0 14px rgba(255,154,60,.30)}
@media (min-width:0){ body.nav-rail .ps-nav-ctog .ps-ctog-pill.sug::before{content:"🌶"} }
.ps-rating-note{margin-top:6px; font-size:11.5px; line-height:1.45; color:var(--dim)}