:root, :root[data-theme="dark"]{
  --bg:#0c0b0f; --card:#16141b; --card-2:#1d1a24; --border:#2a2733;
  --text:#f3eff7; --muted:#a49daf; --input:#17151d;
  --pink:#e50914; --pink-deep:#b80710; --pink-soft:#ff5a63; --live:#e50914;
  --logo-dark:inline; --logo-light:none;
  --top-bg:rgba(12,11,15,.94); --hairline:#1b1922;
  --panel-3:#1b1a1f; --dim:#6d6a76; --shadow:0 18px 50px rgba(0,0,0,.55);
}
:root[data-theme="light"]{
  --bg:#f4f4f6; --card:#ffffff; --card-2:#f0eef3; --border:#e2e0e8;
  --text:#17151d; --muted:#6b6577; --input:#f4f2f7;
  --pink:#e50914; --pink-deep:#b80710; --pink-soft:#c50812; --live:#e50914;
  --logo-dark:none; --logo-light:inline;
  --top-bg:rgba(255,255,255,.9); --hairline:#e2e0e8;
  --panel-3:#f0eff3; --dim:#8b8794; --shadow:0 18px 44px rgba(20,19,23,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
*{scrollbar-width:thin;scrollbar-color:rgba(243,239,247,.13) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(243,239,247,.11);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(243,239,247,.24);background-clip:content-box}
html{background:var(--bg)}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
p{text-wrap:pretty}

/* header */
.top{position:sticky;top:0;z-index:50;background:var(--top-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline)}
.top-in{max-width:1560px;margin:0 auto;padding:0 20px;height:56px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.search{display:flex;align-items:center;gap:8px;background:var(--input);border:1px solid var(--border);border-radius:99px;padding:0;max-width:320px;overflow:hidden}
.search input{flex:1;background:none;border:0;outline:0;color:var(--text);font-size:13.5px;padding:9px 4px}
.search .si{color:var(--muted);padding-left:14px;font-size:13px}
.search input::placeholder{color:var(--muted)}
.back{color:var(--muted);font-size:13.5px}
.back:hover{color:var(--text)}
.logo{display:flex;align-items:center;justify-self:center}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,9,20,.45)}70%{box-shadow:0 0 0 8px rgba(229,9,20,0)}100%{box-shadow:0 0 0 0 rgba(229,9,20,0)}}
@media (prefers-reduced-motion:reduce){.subbar .cnt .d,.lpill::before{animation:none}}
.acct{justify-self:end;background:var(--pink);color:#fff;font-weight:600;font-size:13.5px;padding:9px 18px;border-radius:99px;display:flex;align-items:center;gap:7px}
.acct:hover{background:var(--pink-deep)}

/* subbar */
.subbar{border-bottom:1px solid var(--hairline)}
.subbar-in{max-width:1560px;margin:0 auto;padding:0 20px;height:46px;display:flex;align-items:center;gap:22px;font-size:13.5px;color:var(--muted)}
.subbar .cnt{display:flex;align-items:center;gap:8px;color:var(--text)}
.subbar .cnt .d{width:7px;height:7px;border-radius:50%;background:var(--live);animation:pulse 1.8s infinite}
.subbar a:hover{color:var(--text)}
.pills{margin-left:auto;display:flex;gap:8px}
.pill{border:1px solid var(--border);border-radius:99px;padding:6px 16px;font-size:13px;color:var(--muted)}
.pill.on{background:var(--pink);border-color:var(--pink);color:#fff;font-weight:600}
.pill:hover:not(.on){color:var(--text);border-color:#3a3644}

/* grid + cards */
.wrap{max-width:1560px;margin:0 auto;padding:26px 20px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(196px,100%),1fr));gap:16px}
.card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px 14px 14px;text-align:center;transition:.15s;display:flex;flex-direction:column;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(165deg,hsla(var(--tint,300),50%,30%,.35),transparent 60%);pointer-events:none}
.card:hover{border-color:#3a3644;transform:translateY(-2px)}
.av{width:104px;height:104px;border-radius:50%;object-fit:cover;margin:0 auto 12px;border:2.5px solid var(--pink);box-shadow:0 0 0 3px rgba(229,9,20,.18)}
.card.off .av{border-color:#3c3846;box-shadow:none;filter:saturate(.75)}
.stat{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--live)}
.stat .d{width:7px;height:7px;border-radius:50%;background:var(--live)}
.card.off .stat{color:#8a8494}.card.off .stat .d{background:#8a8494}
.onl{font-size:11.5px;color:var(--muted);margin-top:4px}
.unm{font-weight:700;font-size:15px;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd{display:inline-block;margin-top:7px;font-size:10.5px;font-weight:700;color:var(--pink-soft);border:1px solid rgba(229,9,20,.5);border-radius:5px;padding:1px 7px}
.meta{font-size:12.5px;color:var(--muted);margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .sp{flex:1}
.b-prof{display:block;margin-top:12px;border:1px solid var(--border);border-radius:10px;padding:9px 0;font-size:13px;font-weight:600;color:#d9d3e2;background:rgba(255,255,255,.02)}
.b-prof:hover{border-color:#3a3644;background:rgba(255,255,255,.05)}
.b-peek{display:block;margin-top:8px;border:1px solid var(--pink);border-radius:10px;padding:9px 0;font-size:13px;font-weight:700;color:#fff;background:var(--pink)}
.b-peek:hover{background:var(--pink-deep)}
.empty{border:1px dashed var(--border);border-radius:14px;padding:40px 20px;text-align:center;color:var(--muted);font-size:14px;grid-column:1/-1}

.more{display:block;margin:30px auto 0;width:180px;text-align:center;border:1px solid var(--border);border-radius:99px;padding:11px 0;font-size:14px;font-weight:600;color:var(--muted)}
.more:hover{color:var(--text);border-color:#3a3644}

.seo{margin:36px auto 0;padding:0 20px;color:var(--muted);font-size:13.5px;line-height:1.75;text-align:center}
.seo b{color:#d9d3e2}

/* profile */
.col{max-width:1060px;margin:0 auto;padding:0 20px}
.crumbs{padding:16px 0 12px;font-size:13px;color:var(--muted)}
.crumbs a:hover{color:var(--pink-soft)}
.pcard{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.phead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px;padding:22px;align-items:center}
.player{position:relative;border-radius:12px;overflow:hidden;background:#000;border:1px solid #211e28}
.player img,.player video{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.player img{opacity:.85}
.player .play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.4));cursor:pointer}
.player .tri{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff}
.player .cap{background:rgba(0,0,0,.55);border-radius:99px;padding:7px 16px;font-size:13px;color:#eee}
.pinfo{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.idrow{display:flex;align-items:center;gap:16px}
.pav{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2.5px solid var(--pink);box-shadow:0 0 0 3px rgba(229,9,20,.18)}
.offline .pav{border-color:#3c3846;box-shadow:none}
.pname{font-size:26px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.lpill{background:var(--pink);color:#fff;font-size:11px;font-weight:800;border-radius:99px;padding:3px 10px;display:inline-flex;align-items:center;gap:5px}
.lpill::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.lpill.off{background:#3c3846;color:#c9c3d2}
.at{color:var(--muted);font-size:14px}
.cta{width:100%;margin-top:6px;background:var(--pink);color:#fff;font-weight:800;font-size:16px;border:0;border-radius:12px;padding:15px 0;text-align:center;display:block;cursor:pointer}
.cta:hover{background:var(--pink-deep)}
.cta.ghost{background:none;border:1px solid var(--border);color:#d9d3e2;font-weight:600}
.cta.ghost:hover{border-color:#3a3644}
.cta-sub{font-size:12px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--border)}
.stats .stt{padding:15px 18px;border-left:1px solid var(--border);text-align:left}
.stats .stt:first-child{border-left:0}
.stt .k{font-size:11.5px;color:var(--muted)}
.stt .v{font-weight:700;font-size:14.5px;margin-top:3px}
.tagrow{border-top:1px solid var(--border);padding:15px 20px}
.tagrow .k{font-size:12.5px;color:var(--muted);margin-bottom:9px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:12.5px;color:#d9d3e2;background:#1d1a24;border:1px solid var(--border);border-radius:99px;padding:5px 13px}
.tag:hover{border-color:var(--pink);color:var(--pink-soft)}
.about{border-top:1px solid var(--border);padding:20px 22px 24px}
.about .k{font-size:12px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-bottom:12px}
.about p{font-size:14.5px;color:#d5cede;margin-bottom:12px;line-height:1.7}
.about p:last-child{margin-bottom:0}
.upd{text-align:center;color:#6f6879;font-size:12px;padding:12px 0 0}
.also{padding:30px 0 0}
.also h2{font-size:17px;font-weight:700;margin-bottom:14px}
.arow{display:flex;gap:14px;flex-wrap:wrap}
.amini{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 18px;text-align:center;flex:0 0 auto;width:132px}
.amini:hover{border-color:#3a3644}
.amini img{width:64px;height:64px;border-radius:50%;object-fit:cover;margin:0 auto 8px;border:2px solid var(--pink)}
.amini.off img{border-color:#3c3846}
.amini .n{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.links{max-width:1060px;margin:36px auto 0;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:24px;font-size:13px}
.links h3{font-size:13.5px;margin-bottom:10px}
.links a{display:block;color:var(--muted);padding:3px 0}
.links a:hover{color:var(--text)}

footer{margin-top:40px;border-top:1px solid var(--hairline);padding:22px 20px 30px;color:var(--muted);font-size:12.5px;text-align:center}
footer .l{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
footer a:hover{color:var(--text)}

.toast{position:fixed;right:18px;bottom:18px;z-index:60;background:#1d1420;border:1px solid rgba(229,9,20,.4);border-radius:14px;padding:14px 16px;max-width:320px;font-size:13px;color:#e6dfee;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.toast .zap{color:var(--pink);margin-right:6px}
.toast u{color:var(--pink-soft);text-decoration:none;font-weight:700}
.toast .go{display:inline-block;margin-top:10px;background:var(--pink);color:#fff;font-weight:700;font-size:12.5px;padding:7px 14px;border-radius:8px}
.toast .x{position:absolute;top:8px;right:11px;color:var(--muted);cursor:pointer;background:none;border:0;font-size:13px}

/* peek modal */
.pkback{display:none;position:fixed;inset:0;z-index:80;background:rgba(6,5,8,.82);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:18px}
.pkbox{position:relative;width:min(860px,96vw);background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.pkstage{position:relative;background:#000;min-height:200px}
.pkstage video{width:100%;aspect-ratio:4/3;object-fit:contain;background:#000;display:block}
.pkwait{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px}
.pkbar{display:flex;align-items:center;gap:14px;padding:12px 16px}
.pkbar .nm{font-weight:700;font-size:15.5px}
.pkbar .lv{color:var(--live);font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;gap:5px}
.pkbar .lv::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--live)}
.pkbar .grow{flex:1}
.pkbar a.chat{background:var(--pink);color:#fff;font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:9px}
.pkbar a.chat:hover{background:var(--pink-deep)}
.pkbar a.prof{border:1px solid var(--border);color:var(--muted);font-size:13px;padding:8px 14px;border-radius:9px}
.pkbar a.prof:hover{color:var(--text)}
.pkclose{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:15px;cursor:pointer}
.pkgate{position:absolute;inset:0;z-index:2;background:rgba(8,6,10,.88);display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}
.pkgate-in{max-width:340px;display:flex;flex-direction:column;gap:10px;align-items:center}
.pkgate-t{font-size:20px;font-weight:800}
.pkgate-s{font-size:13.5px;color:var(--muted)}
.pkgate .cta{padding:12px 22px;font-size:14.5px;width:auto}
.pkgate-alt{font-size:12.5px;color:var(--pink-soft)}
/* grey SD badge */
.hd.sd{color:#8a8494;border-color:#3c3846}

.page{max-width:860px;margin:0 auto;padding:26px 20px}
.page h1{font-size:26px;margin-bottom:16px}
.page p{color:#d5cede;font-size:14.5px;margin-bottom:12px;line-height:1.7}

@media (max-width:820px){
  .phead{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats .stt{border-left:0;border-top:1px solid #1d1a24}
}
@media (max-width:760px){
  .top-in{grid-template-columns:auto 1fr auto}
  .search{display:none}
  .logo{justify-self:start}
  .subbar-in{gap:14px;overflow-x:auto;white-space:nowrap}
  .subbar .cnt{white-space:nowrap;flex:0 0 auto}
  .pills{flex:0 0 auto}
  .pill{white-space:nowrap}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .card{padding:12px 10px}
  .av{width:84px;height:84px}
  .toast{left:18px;max-width:none}
}

/* brand logo (image) + theme toggle */
.logo img{height:30px;width:auto;display:block}
.logo .l-dark{display:var(--logo-dark)}
.logo .l-light{display:var(--logo-light)}
.themebtn{justify-self:end;background:none;border:1px solid var(--border);color:var(--muted);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;margin-right:10px}
.themebtn:hover{color:var(--text);border-color:var(--pink)}
.rightbar{justify-self:end;display:flex;align-items:center;gap:8px}


/* ═══════════ v3 homepage ═══════════ */
.shell{max-width:1600px;margin:0 auto;padding:18px 20px 0;display:grid;grid-template-columns:214px minmax(0,1fr);gap:20px;align-items:start}
.shell>*{min-width:0}

/* sidebar */
.rail{position:sticky;top:76px;display:flex;flex-direction:column;gap:14px;min-width:0;
  /* the rail is taller than the viewport once the section switcher, languages,
     ethnicities and tags are all in it — give it its own scroll instead of
     letting it push the sticky column past the fold (Sebi, 2026-08-30) */
  max-height:calc(100vh - 90px - var(--barh, 0px));overflow-y:auto;overscroll-behavior:contain;
  padding-right:4px;scrollbar-gutter:stable}
.rgroup{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px}
.rgroup h4,.rgroup .rgh{display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 9px;font-weight:700}
.rgroup h4 svg,.rgroup .rgh svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.rl{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;font-size:13.5px;color:var(--muted);transition:.13s}
.rl:hover{background:var(--panel-3);color:var(--text)}
.rl.on{background:var(--pink);color:#fff;font-weight:700}
footer .l a{display:inline-block;padding-block:13px}
.srt{min-height:44px;display:inline-flex;align-items:center}
#cbar .x{min-width:44px;min-height:44px}
.rl .ic{width:15px;height:15px;flex:0 0 15px;stroke:currentColor;fill:none;stroke-width:2;opacity:.85}
.rl .n{margin-left:auto;font-size:11px;opacity:.86;font-variant-numeric:tabular-nums}
.rl.on .n{opacity:1}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;color:var(--muted);border:1px solid var(--border);border-radius:99px;padding:5px 11px;transition:.13s}
.chip:hover{border-color:var(--pink);color:var(--pink-soft)}
.chip.on{background:var(--pink);border-color:var(--pink);color:#fff;font-weight:700}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:16px;margin-bottom:24px}
.spot{position:relative;display:block;border-radius:16px;overflow:hidden;background:#000;box-shadow:var(--shadow);aspect-ratio:16/9}
.spot>img{width:100%;height:100%;object-fit:cover}
.spot .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 28%,transparent 46%,rgba(0,0,0,.88) 100%)}
.spot .tl{position:absolute;top:13px;left:13px;display:flex;gap:7px}
.spot .tr{position:absolute;top:13px;right:13px;display:flex;gap:7px}
.spot .btm{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;display:flex;align-items:flex-end;gap:14px}
.spot .who{flex:1;min-width:0;display:block}
.spot .nm{display:block;font-size:clamp(19px,2.1vw,27px);font-weight:800;letter-spacing:-.02em;color:#fff}
.spot .nm em{font-style:normal;font-weight:400;font-size:.6em;color:#d5d2da}
.spot .sub{display:block;font-size:12.5px;color:#cfccd6;margin-top:3px}
.spot .topic{display:block;font-size:12px;color:#b9b5c2;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bigbtn{background:var(--pink);color:#fff;font-weight:800;font-size:15px;padding:13px 22px;border-radius:11px;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer}
.bigbtn:hover{background:var(--pink-deep)}
.badge{background:var(--pink);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.05em;padding:4px 9px;border-radius:6px;display:inline-flex;align-items:center;gap:5px}
.badge i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.badge.ghost{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.3)}
.badge.gold{background:#f5c04e;color:#241a02}
.stat-chip{background:rgba(0,0,0,.55);border-radius:7px;padding:4px 9px;font-size:11.5px;color:#e8e6ec;display:inline-flex;align-items:center;gap:5px}
.stat-chip svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}

/* offer box */
.offer{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:11px;box-shadow:var(--shadow)}
.offer .kick{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink-soft);font-weight:800}
.offer h2{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.offer ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:1px 0 3px}
.offer li{font-size:13px;color:var(--muted);display:flex;gap:8px}
.offer li b{color:var(--text);font-weight:600}
.offer li::before{content:"✓";color:var(--pink);font-weight:800}
.offer input{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--border);background:var(--panel-3);color:var(--text);font-size:14px}
.offer .fine{font-size:11px;color:var(--muted);text-align:center}
.offer.compact h2{font-size:18px}

/* section head */
.sh{display:flex;align-items:center;gap:11px;margin:0 0 12px}
.sh h1,.sh h2{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0}
.sh .c{font-size:12px;color:var(--pink-soft);font-weight:700}
.sh .right{margin-left:auto;display:flex;gap:7px;align-items:center}
.sh .srt{font-size:12.5px;color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:5px 11px}
.sh .srt:hover{color:var(--text);border-color:var(--pink)}
.sh .srt.on{color:#fff;background:var(--pink);border-color:var(--pink);font-weight:700}

/* tiles */
.mosaic{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr));gap:13px;margin-bottom:26px}
.tile{position:relative;display:block;border-radius:13px;overflow:hidden;background:var(--card);aspect-ratio:16/10;transition:transform .15s,box-shadow .15s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tile>img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.tile:hover>img{transform:scale(1.04)}
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:1}
.tile .g{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,transparent 26%,transparent 48%,rgba(0,0,0,.85) 100%)}
.tile .tl{position:absolute;top:9px;left:9px;z-index:3;display:flex;gap:5px}
.tile .tr{position:absolute;top:9px;right:9px;z-index:3}
.tile .bl{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:10px 12px;display:block}
.tile .u{display:block;font-weight:800;font-size:14.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .u em{font-style:normal;font-weight:400;font-size:12px;color:#cdc9d5}
.tile .tp{display:block;font-size:11.5px;color:#c3bfcc;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .tcta{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45))}
@media (hover:hover){.tile:hover .tcta{opacity:1}}
.tile .tcta span{background:var(--pink);color:#fff;font-weight:800;font-size:13.5px;padding:10px 20px;border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.5)}
.tile.off>img{filter:grayscale(.55) brightness(.65)}

/* horizontal rail */
.hrow{display:flex;gap:11px;overflow-x:auto;padding-bottom:7px;margin-bottom:24px}
.hcard{flex:0 0 186px;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:block}
.hcard:hover{border-color:var(--pink)}
.hcard .ph{display:block;position:relative;aspect-ratio:16/10}
.hcard .ph img{width:100%;height:100%;object-fit:cover}
.hcard .flag{position:absolute;top:7px;left:7px;background:#fff;color:#0b0b0d;font-size:9.5px;font-weight:800;padding:3px 7px;border-radius:5px;letter-spacing:.04em;white-space:nowrap}
.hcard .flag.gold{background:#f5c04e}
.hcard .m{display:block;padding:8px 10px}
.hcard .m b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard .m i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:2px}

/* sticky conversion bar */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--card);border-top:1px solid var(--border);box-shadow:0 -10px 30px rgba(0,0,0,.28)}
.cbar-in{max-width:1600px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px}
.cbar b{font-size:13.5px;color:var(--pink-soft);white-space:nowrap}
.cbar p{font-size:12.5px;color:var(--muted)}
.cbar .grow{flex:1}
.cbar .x{background:none;border:0;color:var(--dim);font-size:15px;cursor:pointer;padding:4px 7px}
body.hasbar{padding-bottom:calc(var(--barh, 60px) + 12px)}

@media (max-width:1080px){
  .hero{grid-template-columns:1fr}
  .shell{grid-template-columns:1fr}
  .rail{position:static;flex-direction:row;overflow-x:auto;gap:10px;padding-bottom:4px}
  .rgroup{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 10px}
  .rgroup h4{display:none}
  .rgroup .rl{white-space:nowrap;padding:7px 12px;border:1px solid var(--border)}
  .rgroup .rl .n{margin-left:5px}
}
@media (max-width:700px){
  .shell{padding:12px 12px 0}
  .spot{aspect-ratio:4/5}
  .spot .btm{flex-direction:column;align-items:stretch;gap:9px;padding:14px}
  .spot .topic{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .bigbtn{justify-content:center}
  .mosaic{grid-template-columns:1fr 1fr;gap:8px}
  .tile{aspect-ratio:3/4}
  .tile .tp{display:none}
  .tile .u{font-size:12.5px}
  .hcard{flex:0 0 148px}
  .cbar-in{padding:9px 12px;gap:9px}
  .cbar p{display:none}
}

/* inline icon sizing — every xc_icon() SVG inherits text size unless scoped */
.sh h1 svg,.sh h2 svg,.cbar b svg,.bigbtn svg,.tile .tcta span svg,.b-peek svg{
  width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;vertical-align:-.13em;flex:0 0 auto}
.sh h1,.sh h2{display:flex;align-items:center;gap:7px}
.cbar b{display:inline-flex;align-items:center;gap:6px}
.bigbtn svg{margin-right:2px}
.tile .tcta span{display:inline-flex;align-items:center;gap:7px}

/* clips gallery */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:12px}
.vcard{display:block;background:var(--card);border:1px solid var(--border);border-radius:11px;overflow:hidden}
.vcard:hover{border-color:var(--pink)}
.vph{display:block;position:relative;aspect-ratio:4/3}
.vph img{width:100%;height:100%;object-fit:cover}
.vdur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.72);color:#fff;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:5px}
.vt{display:block;padding:8px 10px 0;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd{display:block;padding:2px 10px 9px;font-size:11px;color:var(--muted)}

/* hero live autoplay */
.spot .herovid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s;z-index:1}
.spot.playing .herovid{opacity:1}
.spot.playing>#xcHeroImg{opacity:0}
.spot .grad,.spot .tl,.spot .tr,.spot .btm{z-index:2}

/* ───────── profile enrichment (2026-08-30) ───────── */
/* .about used a hardcoded dark-theme colour, which went near-invisible in light mode */
.about p{color:var(--text);opacity:.86}

.topicbar{display:flex;gap:11px;align-items:flex-start;border-top:1px solid var(--border);
  padding:14px 20px;background:linear-gradient(90deg,rgba(229,9,20,.09),transparent 62%)}
.topicbar svg{width:18px;height:18px;flex:0 0 18px;margin-top:2px;fill:none;stroke:var(--pink);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.topicbar .k{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--pink-soft);font-weight:700}
.topicbar p{font-size:13.5px;color:var(--text);opacity:.9;margin-top:4px;line-height:1.55}

.words{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px}
.wcard{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:15px 17px}
.wcard .k{display:flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--muted);margin-bottom:8px}
.wcard svg{width:15px;height:15px;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wcard.on svg{stroke:var(--pink)}
.wcard.off svg{stroke:var(--dim)}
.wcard p{font-size:14px;line-height:1.6;color:var(--text);opacity:.92}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:12px}
.fgroup{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:14px 16px}
.fgroup h3{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--pink-soft);
  font-weight:700;margin-bottom:9px}
.fgroup dl>div{display:flex;justify-content:space-between;gap:14px;padding:6px 0;
  border-top:1px solid var(--hairline);font-size:13.2px}
.fgroup dl>div:first-child{border-top:0}
.fgroup dt{color:var(--muted);flex:0 0 auto}
.fgroup dd{font-weight:600;text-align:right}

.sched{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:16px 18px 14px}
.schart{display:block;width:100%;height:auto;max-height:120px;color:var(--pink)}
.sched .note{margin-top:10px;font-size:12.5px;line-height:1.6;color:var(--muted)}

.ghint{font-size:13px;color:var(--muted);margin:-6px 0 13px;line-height:1.55}
.vfr{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.66);color:#fff;font-size:10px;
  font-weight:600;padding:2px 6px;border-radius:5px;opacity:0;transition:opacity .15s}
.vcard:hover .vfr{opacity:1}
.vmore{margin-top:14px}
.vmore .cta{display:inline-block}

.faq details{background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:12px 16px;margin-bottom:9px}
.faq summary{cursor:pointer;font-weight:650;font-size:14px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--muted);font-weight:400;font-size:17px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:9px;font-size:13.6px;line-height:1.65;color:var(--text);opacity:.86}

@media (max-width:640px){
  .fgroup dl>div{font-size:12.6px}
  .schart{max-height:96px}
}

/* signed-in hero card: the follows list that fills the dead space (2026-08-30) */
.favlist{display:flex;flex-direction:column;gap:6px;margin:2px 0 14px}
.favrow{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:10px;
  background:var(--card-2);border:1px solid var(--border);transition:border-color .14s,background .14s}
.favrow:hover{border-color:var(--pink);background:var(--panel-3)}
.favrow img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--pink);flex:0 0 34px}
.favrow.off img{border-color:var(--border);filter:grayscale(.6)}
.favrow .fn{display:flex;flex-direction:column;min-width:0;font-size:13px;font-weight:650;line-height:1.25}
.favrow .fn i{font-style:normal;font-size:11px;color:var(--muted);font-weight:400}
.favrow .fst{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.favrow .fst b{display:inline-flex;align-items:center;gap:4px;color:var(--pink-soft);font-size:11.5px}
.favrow .fst svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* "the room closed" panel — replaces the old bounce-to-Bonga (2026-08-30) */
.pkoff{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;padding:34px 22px;min-height:220px;background:var(--card-2)}
.pkoff-t{font-size:18px;font-weight:750;color:var(--text)}
.pkoff-s{font-size:13.5px;color:var(--muted);max-width:400px;line-height:1.6}
.pkoff-btns{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px}
.pkoff-btns .cta{display:inline-block}
.pkoff-alt{margin-top:16px;width:100%;max-width:520px}
.pkoff-alt>span{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--pink-soft);font-weight:700;margin-bottom:9px}
.pkoff-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.pkoff-row a{display:block;background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:8px;text-align:center;min-width:0}
.pkoff-row a:hover{border-color:var(--pink)}
.pkoff-row img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:7px;margin-bottom:6px}
.pkoff-row b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkoff-row i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkbar .lv.off{color:var(--muted)}
.pkbar .lv.off::before{background:var(--dim)}
.srt.loading,.rl.loading,.chip.loading,.more.loading{opacity:.55;pointer-events:none}

/* SVG icons replacing the old emoji everywhere (Sebi, 2026-08-30). Every inline
   SVG needs an explicit size or it renders at its viewBox and blows up the row. */
.acct svg,.themebtn svg,.si svg,.onl svg,.zap svg,.b-peek svg,.toast .x svg,
.cbar .x svg,.pkclose svg,.pkbar .chat svg,.spot .topic svg,.badge.gold svg,
.unm .fstar svg,.play .tri svg,.pcard .cta svg,.faq summary svg{
  width:1em;height:1em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.14em}
.acct,.b-peek,.pkbar .chat,.pcard .cta,.zap{display:inline-flex;align-items:center;gap:6px}
.onl{display:flex;align-items:center;gap:5px}
.si{display:inline-flex;align-items:center}
.themebtn svg{width:16px;height:16px}
.badge.gold svg,.unm .fstar svg{width:12px;height:12px;fill:currentColor;stroke:none;margin-right:3px}
.spot .topic svg{width:13px;height:13px;margin-right:5px}
.play .tri svg{width:26px;height:26px;fill:currentColor;stroke:none}
.pkclose svg,.toast .x svg,.cbar .x svg{width:15px;height:15px;stroke-width:2.2}
.fgrip svg{width:15px;height:15px;fill:currentColor;stroke:none}
.fbtns svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.avm+*+* svg,td svg.ic{width:12px;height:12px;vertical-align:-.1em}

/* ── floating mini-player (2026-08-30) ────────────────────────────────────
   Sits above the sticky conversion bar by subtracting the measured --barh. */
.xcdock{position:fixed;right:16px;bottom:calc(16px + var(--barh, 0px));z-index:90;
  width:min(340px,calc(100vw - 32px));background:var(--card);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;box-shadow:0 20px 48px rgba(0,0,0,.5);
  animation:xcd-in .22s ease-out}
@keyframes xcd-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.xcd-bar{display:flex;align-items:center;gap:8px;padding:7px 9px;background:var(--card-2);
  border-bottom:1px solid var(--border)}
.xcd-live{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;
  color:var(--live);letter-spacing:.05em}
.xcd-live i{width:6px;height:6px;border-radius:50%;background:var(--live);
  animation:xcd-pulse 1.7s ease-in-out infinite}
@keyframes xcd-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.xcd-name{font-size:12.5px;font-weight:650;color:var(--text);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:150px}
.xcd-name:hover{color:var(--pink-soft)}
.xcd-grow{flex:1}
.xcd-b{background:none;border:0;padding:4px;cursor:pointer;color:var(--muted);
  display:inline-flex;border-radius:7px}
.xcd-b:hover{background:var(--panel-3);color:var(--text)}
.xcd-b svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.xcd-stage{position:relative;aspect-ratio:16/9;background:#000}
.xcd-stage video{width:100%;height:100%;object-fit:contain;display:block}
.xcd-gate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:14px;background:rgba(10,9,13,.9);color:var(--text);
  font-size:13px;font-weight:650;line-height:1.45}
.xcd-gate:hover{color:var(--pink-soft)}
@media (max-width:640px){
  .xcdock{right:10px;left:10px;width:auto;bottom:calc(10px + var(--barh, 0px))}
  .xcd-name{max-width:none}
}

/* Recently viewed: the stored card can be hours stale, so it gets a real status
   flag the moment the page loads (Sebi, 2026-08-30). */
.hcard .flag.live{background:var(--live);color:#fff;display:inline-flex;align-items:center;gap:4px}
.hcard .flag.live i{width:5px;height:5px;border-radius:50%;background:#fff}
.hcard.off{opacity:.62}
.hcard.off .flag{background:var(--border);color:var(--muted)}
.hcard.off img{filter:grayscale(.55)}
.hcard.off:hover{opacity:.85}

/* ── responsive audit fixes (2026-08-30, measured across 7 viewports) ────────
   Sebi: "vezi text care e off, randuri incomplete, carduri care umplu un rand
   si inca 1-2 pe alt rand". Every rule below answers a measurement, not a hunch. */

/* 1. The tile caption put "@name" and the gender/age <em> on ONE line, so on a
      390px screen the age was sliced mid-character ("Couple, 3…"). Two lines:
      the name truncates cleanly, the meta always shows in full. */
.tile .u{display:block;min-width:0}
.tile .u em{display:block;margin-top:1px;font-size:11.5px;line-height:1.25}
@media (max-width:700px){ .tile .u em{font-size:11px} }

/* 2. A long label + long value in the spec table could not both fit on one row
      (measured: "Socials on her Bonga profile" pushed its value 20px out of the
      row at 844x390). Let the pair wrap instead of overflowing. */
.fgroup dl>div{flex-wrap:wrap;row-gap:2px}
.fgroup dt{min-width:0;max-width:100%}
.fgroup dd{min-width:0;max-width:100%;overflow-wrap:anywhere}
@media (max-width:900px){
  .fgroup dl>div{flex-direction:column;align-items:flex-start}
  .fgroup dd{text-align:left;font-size:13.4px}
}

/* 3. Column count is fixed per breakpoint instead of auto-fill, so the grid can
      only ever be 2, 3 or 4 wide — and 48 (a listing page) and 240 (a tag page)
      divide by all three. That removes the stranded last row of 1-2 cards. */
.mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:701px){ .mosaic{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1150px){ .mosaic{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* 4. Tap targets. Measured 14-20px tall on touch: footer links, breadcrumbs,
      the consent link, the subbar links, the mini-player title. WCAG 2.2 asks
      for 24px; on a coarse pointer we give them room without moving anything
      on desktop. */
/* width is added to the pointer test on purpose: pointer/hover media queries
   report "fine" in a desktop browser resized to a phone, so a width rule is the
   only part of this that is testable — and phones are narrow either way. */
@media (hover:none),(pointer:coarse),(max-width:900px){
  footer .l a,footer .l span,.crumbs a,.acons a,.subbar-in>a,.xcd-name,.back{
    display:inline-flex;align-items:center;min-height:32px}
  footer .l{gap:10px 18px}
  .crumbs{line-height:2}
}

/* ── narrow-screen hero + header (measured 390x844, 2026-08-30) ─────────────
   The hero's top-left badges and top-right stat chips are both absolutely
   positioned and were OVERLAPPING by 40px at 390px wide: .tl ended at x=228,
   .tr started at x=188. Give each a hard share of the width and let them wrap
   downward instead of into each other. */
@media (max-width:760px){
  .spot .tl,.spot .tr{top:10px;flex-wrap:wrap;row-gap:5px}
  .spot .tl{left:10px;right:auto;max-width:56%}
  .spot .tr{right:10px;left:auto;max-width:42%;justify-content:flex-end}
  .spot .badge{font-size:9.5px;padding:3px 7px;letter-spacing:.03em}
  .spot .stat-chip{font-size:10.5px;padding:3px 7px}
  /* the FEATURED word costs more room than it earns next to a live badge */
  .spot .badge.gold{font-size:0;padding:3px 6px}
  .spot .badge.gold svg{margin:0;width:13px;height:13px}
  /* same collision on a mosaic tile at 2 columns */
  .tile .tl,.tile .tr{top:7px}
  .tile .tl{left:7px;max-width:60%;flex-wrap:wrap;row-gap:4px}
  .tile .tr{right:7px;max-width:38%}
}

/* Search was simply removed below 900px, so a phone had no way to search at
   all. Put it back as its own full-width row under the sticky header. */
@media (max-width:900px){
  /* explicit placement, not source order: the search sits in the DOM before the
     logo, so an auto-flow grid put the search row ABOVE the brand */
  .top-in{grid-template-columns:1fr auto;grid-template-rows:auto auto;
    height:auto;padding:9px 12px;row-gap:9px;column-gap:10px}
  .top-in .search{display:flex;grid-row:2;grid-column:1 / -1;max-width:none}
  /* .back and .logo were BOTH given row 1 / column 1 / justify-self:start, i.e. the
     same cell with the same alignment, so on a profile page they sat on top of each
     other — measured 104px x 30px of overlap at 430, 390, 360 and 320px (Sebi spotted
     it on his phone). Other pages never showed it because they render .search instead
     of .back, leaving the logo alone in that cell. Give .back the row the search uses,
     so row 1 stays logo-left / account-right exactly as on every other page. */
  .top-in .back{grid-row:2;grid-column:1 / -1;justify-self:start;padding:2px 0}
  .top-in .logo{grid-row:1;grid-column:1;justify-self:start}
  .top-in .rightbar{grid-row:1;grid-column:2;justify-self:end}
  /* the CTA wrapped onto two lines and made the sticky bar 78px tall */
  .cbar .acct{white-space:nowrap;font-size:13px;padding:9px 14px}
  .cbar b{font-size:12.5px}
}

/* The rails scroll sideways; without a hint the cut-off card at the right edge
   reads as a broken layout rather than "there is more". */
.rail,.hrow{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
@media (min-width:901px){ .rail{-webkit-mask-image:none;mask-image:none} }

/* ── follow-up fixes from Sebi's screenshots (2026-08-30) ───────────────────

   1. The full-width buttons were `display:block; text-align:center`. Adding
      `display:inline-flex` for the icon killed the centring, so the play/heart
      sat flush against the left edge. Flex + justify-content restores it and
      keeps the icon-to-text gap. */
.pcard .cta,.cta{display:flex;align-items:center;justify-content:center;gap:9px}
.cta svg{width:1.05em;height:1.05em;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cta.ghost svg{stroke-width:1.9}
/* the ones that are deliberately not full width keep shrinking to their text */
.vmore .cta,.pkoff-btns .cta,.pkgate .cta{display:inline-flex;width:auto}

/* 2. "Models like X" was a wrapping flexbox of fixed 132px cards, so 8 models
      landed 7 + 1 — a single orphan on its own row. A grid with a column count
      that divides 8 can only ever produce full rows. */
.arow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:620px){ .arow{grid-template-columns:repeat(4,minmax(0,1fr))} }
.amini{width:auto;padding:14px 10px}

/* 3. The spec cards were a stretch grid: PROFILE (5 rows) was forced as tall as
      APPEARANCE (8), and a 4th group sat alone on a second row with dead space
      beside it. Multi-column flow sizes each card to its content and balances
      the columns, whether there are three groups or four. */
.facts{display:block;columns:3 250px;column-gap:12px}
.fgroup{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 12px}
@media (max-width:900px){ .facts{columns:1} }

/* Last two overflows, both only at 360px wide (measured 2026-08-30):
   the conversion bar's close button was pushed 11px out of its row, and a
   five-digit viewer count pushed its chip 5px out of the tile's corner. */
@media (max-width:400px){
  .cbar-in{gap:7px;padding:8px 10px}
  .cbar .x{flex:0 0 auto;margin-left:2px;padding:4px}
  .cbar .acct{flex:0 0 auto}
  .cbar b{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tile .tr{max-width:44%}
  .tile .tr .stat-chip{font-size:10px;padding:3px 6px;max-width:100%;
    overflow:hidden;white-space:nowrap}
}

/* At 320px the three sort pills could not fit beside the section title and
   pushed 11px out of the header. Let the header wrap and give the pills their
   own scrollable line rather than squeezing them. */
@media (max-width:430px){
  .sh{flex-wrap:wrap;row-gap:8px}
  .sh .right{width:100%;margin-left:0;display:flex;gap:6px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sh .right::-webkit-scrollbar{display:none}
  .sh .right .srt{flex:0 0 auto}
}

/* At 320px the avatar + long username + status pill could not share one line and
   pushed 26px out of the identity row. Let the name wrap instead. */
.idrow{min-width:0}
.idrow>div{min-width:0}
.pname{display:flex;flex-wrap:wrap;align-items:center;gap:7px;min-width:0}
.pname .lpill{flex:0 0 auto}
@media (max-width:430px){
  .pname{font-size:19px;word-break:break-word}
  .pav{width:48px;height:48px;flex:0 0 48px}
}

/* Favourite and alerts are two separate actions now (Sebi, 2026-08-30) — kept
   side by side on one row at every width, because they are a pair. */
.ctarow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.ctarow .cta{margin-top:0;font-size:14px;padding:13px 8px;min-width:0}
.ctarow .cta.on{border-color:var(--pink);color:var(--pink-soft)}
.ctarow .cta.on svg{stroke:var(--pink);fill:none}
.ctarow .cta.on svg[fill]{fill:var(--pink)}
.ctarow .cta:disabled{opacity:.6;cursor:progress}
.cta-hint{margin-top:8px;font-size:12px;color:var(--muted);line-height:1.5}
.cta-hint a{color:var(--pink-soft);text-decoration:underline}
@media (max-width:420px){ .ctarow .cta{font-size:13px;padding:12px 6px;gap:6px} }
.tagx{background:none;border:0;color:var(--dim);cursor:pointer;padding:0 0 0 5px;
  display:inline-flex;align-items:center;vertical-align:-.12em}
.tagx:hover{color:var(--pink)}
.tagx svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* The base .cta is a full-width block with `padding:15px 0` — no horizontal
   padding at all, which is fine at 100% width and looks broken the moment the
   button shrinks to its text. Every place that makes a .cta auto-width has to
   put the side padding back (Sebi's screenshot, 2026-08-30). */
.vmore .cta,.pkoff-btns .cta{padding:11px 20px;font-size:14px;border-radius:10px}
.pkoff-btns{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:12px}
.pkoff-btns .cta{margin-top:0;flex:0 0 auto;max-width:100%}
.pkoff-t{font-size:16.5px;line-height:1.3}
.pkoff-s{font-size:13px;max-width:380px}
.pkoff{padding:26px 20px;gap:6px}
@media (max-width:520px){
  .pkoff{padding:20px 14px}
  .pkoff-t{font-size:15px}
  .pkoff-s{font-size:12.5px}
  .pkoff-btns{flex-direction:column;align-items:stretch;width:100%;max-width:300px}
  .pkoff-btns .cta{width:100%;justify-content:center}
}

/* ── phone filters: bottom sheet, not a sideways rail (Sebi, 2026-08-30) ──────
   Measured at 390px before this: aside.rail was 366px wide holding 4,515px of
   content — twelve viewport widths of horizontal scrolling — all 39 controls were
   36px tall (under the 44px tap minimum), and the grid did not start until
   y=1298, so a phone showed 1.5 screens of filters before one model. Same markup,
   same links; on a phone it becomes a sheet you open, so the grid starts at the top. */
.filtbtn,.filtbd,.rail-head{display:none}

@media (max-width:760px){
  .filtbtn{display:inline-flex;align-items:center;gap:8px;position:sticky;top:64px;z-index:30;
    margin:0 0 14px;padding:11px 18px;min-height:44px;border-radius:99px;
    background:var(--card);border:1px solid var(--border);color:var(--text);
    font-size:14px;font-weight:600;cursor:pointer}
  .filtbtn .ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
  .filtbtn .fb-n{display:inline-flex;align-items:center;justify-content:center;
    min-width:20px;height:20px;padding:0 6px;border-radius:99px;
    background:var(--pink);color:#fff;font-size:11.5px;font-weight:700}

  .filtbd{display:block;position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);
    opacity:0;transition:opacity .18s}
  .filtbd[hidden]{display:none}
  body.filt-open .filtbd{opacity:1}

  /* the sheet itself — the SAME aside, re-laid-out */
  .rail{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:90;
    flex-direction:column;gap:12px;
    max-height:82vh;overflow-y:auto;overscroll-behavior:contain;
    background:var(--bg);border-top:1px solid var(--border);
    border-radius:18px 18px 0 0;padding:0 14px calc(18px + env(safe-area-inset-bottom));
    transform:translateY(100%);transition:transform .22s ease;
    box-shadow:0 -18px 50px rgba(0,0,0,.45);
    -webkit-mask-image:none;mask-image:none}
  body.filt-open .rail{transform:translateY(0)}
  body:not(.filt-open) .rail{visibility:hidden}
  body.filt-open{overflow:hidden}

  .rail-head{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:2;
    margin:0 -14px;padding:14px;background:var(--bg);border-bottom:1px solid var(--hairline)}
  .rail-head b{font-size:16px}
  .rail-clear{margin-left:auto;font-size:13px;color:var(--pink-soft)}
  .rail-x{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);
    background:var(--panel-3);color:var(--text);font-size:22px;line-height:1;cursor:pointer}

  /* groups stack again, and get their labels back */
  .rgroup{flex:0 0 auto;display:block;padding:12px 12px 8px}
  .rgroup h4{display:flex}
  .rgroup .rl{white-space:normal;border:0;min-height:46px;padding:11px 10px;font-size:15px}
  .rgroup .rl .n{margin-left:auto}
  .chips{gap:8px}
  /* 44px is the tap-target floor (Apple HIG, WCAG 2.5.5). The age and ethnicity
     chips were the last controls under it at 40px. */
  .chip{min-height:44px;display:inline-flex;align-items:center;padding:10px 15px;font-size:13.5px}
}

/* ── /models/ directory ───────────────────────────────────────────────────── */
.dirh{font-size:24px;font-weight:800;letter-spacing:-.01em;margin:4px 0 6px}
.dirsub{color:var(--muted);font-size:13.5px;margin-bottom:16px}
.dirletters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.dl{min-width:38px;min-height:38px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 10px;border:1px solid var(--border);border-radius:9px;font-size:13px;
  font-weight:600;color:var(--muted)}
.dl:hover{color:var(--text);border-color:#3a3644}
.dl.on{background:var(--pink);border-color:var(--pink);color:#fff}
.dirlist{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
  gap:8px}
.dirlist a{display:flex;align-items:center;gap:11px;min-height:60px;padding:8px 12px;
  background:var(--card);border:1px solid var(--border);border-radius:11px;transition:.13s}
.dirlist a:hover{border-color:#3a3644;background:var(--card-2)}
.dirlist img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 44px}
.dn{display:flex;flex-direction:column;min-width:0;flex:1}
.dn b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dn i{font-style:normal;font-size:12px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.dlive{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.05em;color:#fff;
  background:var(--live);border-radius:5px;padding:3px 7px}
.dirpg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:26px 0 8px}
.dirpg a,.dirpg span{min-width:44px;min-height:44px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 14px;border:1px solid var(--border);border-radius:10px;
  font-size:14px;color:var(--muted)}
.dirpg a:hover{color:var(--text);border-color:#3a3644}
.dirpg .on{background:var(--pink);border-color:var(--pink);color:#fff;font-weight:700}


/* ── contrast: small text uses the SOFT brand red, never the solid one ────────
   Measured 2026-08-30 with Lighthouse (accessibility 90) and then by hand:
   #e50914 on #0c0b0f is 4.09:1, and WCAG AA wants 4.5:1 for text under 18.66px.
   --pink-soft clears it in BOTH themes (dark 6.44:1 page / 6.00:1 card;
   light 5.59:1 / 6.14:1), and --dim at 3.71:1 is replaced by --muted at 7.49:1.
   The solid --pink stays exactly as it is for buttons and fills, where it sits
   under white text and is the brand colour Sebi measured from the icon. */
/* 2026-09-02: filter/sort controls whose target is not indexable are <button data-href> (crawl trap fix) */
button.rl,button.chip,button.srt,button.more{font:inherit;background:none;border:0;cursor:pointer;text-align:left;color:var(--muted);margin:0}
button.rl{width:100%}
button.chip,button.srt{border:1px solid var(--border)}
.navl{font-size:13.5px;color:var(--muted);padding:9px 10px;border-radius:99px;white-space:nowrap}
.navl:hover{color:var(--text);background:var(--panel-3)}
@media (max-width:760px){.navl{display:none}}
[data-go]{cursor:pointer}