/* sexynudecam.top (Sexy Nude Cam AI): its own copy of the engine's stylesheet (docs/plans/2026-10-09-multisite-design.md 2.3) on the
   "AI cam show" tokens of docs/plans/2026-10-17-snc-seo.md section 8: black cherry background, warm paper, hot rose and marquee
   gold, four stage colours; Limelight (wordmark, headings, stage names) and Kumbh Sans (the interface); the site's own sn- section
   at the end. Mobile first: the phone layout is the base, wider screens add more columns. */
:root {
  --bg: #12070f; --bg2: #1c0d18; --bg3: #281322; --line: #3a1c33; --line2: #5a2b4e;
  --fg: #fbeee9; --mut: #c9adbb; --dim: #9a7b8c;
  --paper: #fdf1e6; --ink: #2a1020; --gold: #ffb43b; --on: #2a1020;
  --sans: 'Kumbh Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --display: 'Limelight', 'Kumbh Sans', 'Georgia', serif;
  --radius: 16px; --tabs-h: 64px;
  --grad: linear-gradient(135deg, #e8336e, #b5155a);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.5 var(--sans);
  padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom));
}
body.gated { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); line-height: 1.2; margin: 0; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--grad); color: #fff; font: 600 15px var(--sans);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 35%, transparent);
}
.btn:active { transform: scale(.98); }
.btn-small { min-height: 36px; padding: 0 16px; font-size: 13px; }
.btn-wide { width: 100%; }
.link { background: none; border: 0; color: var(--dim); font: inherit; cursor: pointer; padding: 12px; }

/* logo */
.logo { display: flex; align-items: center; gap: 8px; font: 700 18px var(--sans); }
.logo-mark { width: 28px; height: 28px; border-radius: 9px; background: var(--grad); position: relative; flex: none; }
.logo-mark::after { content: ""; position: absolute; inset: 8px; border-radius: 50% 50% 50% 0; background: #fff; transform: rotate(-45deg); }
.logo-mark.big { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 16px; }
.logo-mark.big::after { inset: 16px; }

/* top bar (phone) */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

/* bottom tabs (phone) */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around;
  height: calc(var(--tabs-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--bg2) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
}
.tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--dim); font-size: 11px; }
.tabs a.on { color: var(--fg); }
.tabs a.on svg { stroke: var(--accent); }
.tabs .tab-create svg { width: 40px; height: 32px; padding: 5px 9px; border-radius: 12px; background: var(--grad); stroke: #fff; }
.rail-logo { display: none !important; }

.page { padding: 0 16px; max-width: 1400px; margin: 0 auto; }

/* hero */
.hero { padding: 28px 4px 20px; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { font-size: 30px; margin-bottom: 10px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { color: var(--mut); margin: 0 0 20px; max-width: 520px; }

/* chips */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 16px; margin: 0 -16px; padding-inline: 16px; scrollbar-width: none; scroll-margin-top: 70px; }
.chips::-webkit-scrollbar { display: none; }
/* the chips are an anchor target (#girls): no focus/target frame around the row */
.chips:focus, .chips:focus-visible, .chips:target { outline: none; }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip { flex: none; padding: 8px 16px; border-radius: 999px; background: var(--bg3); color: var(--mut); font-size: 13px; font-weight: 500; white-space: nowrap; }
.chip.on { background: var(--fg); color: var(--bg); }

/* grid of cards */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.card { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg2); aspect-ratio: 640 / 784; }
.card img { width: 100%; height: 100%; object-fit: cover; }
.card-info { position: absolute; inset: auto 0 0 0; padding: 40px 10px 10px; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.card h3 { font-size: 16px; }
.card h3 span { font-weight: 500; color: var(--mut); margin-left: 2px; }
.card p { margin: 2px 0 6px; font-size: 12px; color: #ddd; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tags span, .tags a { padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 11px; backdrop-filter: blur(6px); }
.card-create { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 16px;
  border: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--bg2)); }
.card-create .plus { width: 56px; height: 56px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; font-size: 32px; }
.card-create small { color: var(--mut); }
.empty { color: var(--mut); text-align: center; padding: 40px 0; }

/* seo copy */
.seo { color: var(--mut); max-width: 760px; padding: 40px 4px 8px; }
.seo h2 { color: var(--fg); font-size: 20px; margin-bottom: 8px; }
.seo h3 { color: var(--fg); font-size: 15px; margin: 20px 0 4px; }
.seo p { margin: 0; }

/* profile */
.profile { margin: 0 -16px; position: relative; }
.back { position: absolute; top: 12px; left: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); }
.profile-cover { position: relative; aspect-ratio: 1280 / 1568; max-height: 72vh; overflow: hidden; }
.profile-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.profile-cover::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, var(--bg)); }
.profile-body { position: relative; margin-top: -72px; padding: 0 16px; }
.profile h1 { font-size: 30px; display: flex; align-items: center; gap: 8px; }
.profile h1 span { font-weight: 500; color: var(--mut); }
.online { width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61,220,132,.25); }
.tagline { color: #ddd; margin: 6px 0 12px; }
.profile .tags a { background: var(--bg3); padding: 4px 12px; font-size: 12px; }
.actions { margin: 18px 0; }
.bio { color: var(--mut); margin: 0 0 6px; }
.traits { color: var(--accent); font-size: 13px; text-transform: capitalize; margin: 0; }
.gallery-h { font-size: 18px; margin: 28px 0 12px; }
.gallery-h span { color: var(--dim); font-weight: 500; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.ph { aspect-ratio: 400 / 490; overflow: hidden; border-radius: 8px; background: var(--bg2); }
.ph img { width: 100%; height: 100%; object-fit: cover; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.95); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 26px; cursor: pointer; }
.lb-close { top: calc(12px + env(safe-area-inset-top)); right: 12px; }
.lb-prev { left: 8px; top: 50%; } .lb-next { right: 8px; top: 50%; }

/* simple pages */
.soon, .legal { text-align: center; padding: 64px 8px; max-width: 640px; margin: 0 auto; }
.soon h1, .legal h1 { font-size: 26px; margin-bottom: 10px; }
.soon p { color: var(--mut); margin: 0 0 24px; }
.legal { text-align: left; } .legal p { color: var(--mut); } .muted { color: var(--dim); font-size: 13px; }
.legal h2 { font-size: 17px; margin: 24px 0 6px; } .legal li { color: var(--mut); margin: 4px 0; }
.legal .doc a, .legal p a, .legal details a { color: var(--accent); }
.crumb { color: var(--mut); font-size: 14px; display: inline-block; margin-bottom: 12px; }
.doc-list { list-style: none; padding: 0; margin: 16px 0; border-top: 1px solid var(--line); }
.doc-list a { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--line); font-weight: 500; }
.doc-list svg { width: 18px; height: 18px; color: var(--dim); }
.support .btn { margin: 4px 0 28px; }
.support details { border-bottom: 1px solid var(--line); padding: 14px 4px; }
.support summary { cursor: pointer; font-weight: 500; }
.support details p { margin: 8px 0 0; }

.foot { color: var(--dim); font-size: 12px; text-align: center; padding: 32px 16px 24px; border-top: 1px solid var(--line); margin-top: 40px; }
.foot p { margin: 4px 0; } .foot a { text-decoration: underline; }

/* age gate */
.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: rgba(8,7,12,.72); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.gate-card { width: 100%; max-width: 380px; text-align: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 24px; padding: 32px 24px 16px; }
.gate-card h2 { font-size: 24px; margin-bottom: 8px; }
.gate-card p { color: var(--mut); font-size: 14px; margin: 0 0 22px; }
.gate-card a { text-decoration: underline; color: var(--fg); }

/* tablet */
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .hero h1 { font-size: 40px; }
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
}

/* desktop: side rail instead of bottom tabs, profile in two columns */
@media (min-width: 1024px) {
  body { padding-bottom: 0; padding-left: 88px; }
  .topbar { display: none; }
  .tabs { top: 0; right: auto; width: 88px; height: 100vh; flex-direction: column; justify-content: flex-start; gap: 8px; padding: 20px 0; border-top: 0; border-right: 1px solid var(--line); }
  .tabs a { flex: none; height: 64px; }
  .rail-logo { display: flex !important; margin-bottom: 16px; }
  .page { padding: 0 32px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding-inline: 0; }
  .hero { padding: 48px 4px 28px; } .hero h1 { font-size: 48px; max-width: 760px; }
  .profile { margin: 32px 0 0; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 40px; align-items: start; }
  .profile-cover { border-radius: 24px; max-height: none; position: sticky; top: 32px; }
  .profile-cover::after { display: none; }
  .profile-body { margin: 0; padding: 0; }
  .profile h1 { font-size: 40px; }
  .actions .btn-wide { width: auto; padding: 0 40px; }
  .back { top: 12px; left: 12px; }
}
@media (min-width: 1400px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- stage 2: chats, chat screen, account ---------- */
.chats { max-width: 720px; margin: 0 auto; padding: 20px 0; }
.chats h1, .account h1 { font-size: 24px; margin-bottom: 16px; }
.chat-list { list-style: none; margin: 0; padding: 0; }
.chat-list a { display: flex; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.chat-list img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; }
.chat-list p { margin: 2px 0 0; color: var(--mut); font-size: 13px; }

/* the chat is a full-height screen of its own: no top bar or tabs on a phone */
body.bare { padding-bottom: 0; }
body.bare .topbar, body.bare .tabs { display: none; }
/* wide screens: the catalog uses the whole width beside the rail, like the big sites do */
@media (min-width: 1500px) { .page { max-width: none; padding: 0 40px; } }
body.bare .page { padding: 0; max-width: none; }
.chat { display: flex; flex-direction: column; height: 100dvh; max-width: 820px; margin: 0 auto; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--line); background: var(--bg2); }
.chat-back { width: 36px; height: 36px; display: grid; place-items: center; }
.chat-who { display: flex; align-items: center; gap: 10px; }
.chat-who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; }
.chat-who span { display: flex; flex-direction: column; line-height: 1.2; }
.chat-who small { color: var(--mut); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.chat-who .online { width: 8px; height: 8px; }
.msgs { flex: 1; overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
/* a long chat must scroll, never squeeze: a photo bubble (overflow: hidden) would shrink to a sliver */
.msgs > * { flex-shrink: 0; }
/* scrolling up: the spinner while the earlier messages load (chat.js) */
.msgs-more { align-self: center; padding: 4px 0; line-height: 0; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 20px; white-space: pre-wrap; word-wrap: break-word; font-size: 15px; }
.msg.her { align-self: flex-start; background: var(--bg3); border-bottom-left-radius: 6px; }
.msg.me { align-self: flex-end; background: var(--grad); color: #fff; border-bottom-right-radius: 6px; }
.msg.sys { align-self: center; background: none; color: var(--mut); font-size: 13px; text-align: center; }
.msg.typing::after { content: "•••"; letter-spacing: 2px; animation: blink 1s infinite; color: var(--mut); }
@keyframes blink { 50% { opacity: .3; } }
.quota { text-align: center; font-size: 12px; color: var(--mut); padding: 4px; }
.composer { display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px; padding-bottom: calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--bg2); }
.composer textarea { flex: 1; resize: none; max-height: 140px; padding: 12px 16px; border-radius: 22px; border: 1px solid var(--line);
  background: var(--bg3); color: var(--fg); font: 16px/1.35 var(--sans); outline: none; overflow-y: hidden; scrollbar-width: none; }
.composer textarea:focus { border-color: var(--accent); }
.send { width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; cursor: pointer; }
.send:disabled { opacity: .5; }

/* bottom sheet / dialog */
.sheet { border: 0; padding: 0; background: var(--bg2); color: var(--fg); border-radius: 24px; width: min(420px, calc(100% - 32px)); }
.sheet::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(6px); }
.sheet form, .auth { display: flex; flex-direction: column; gap: 10px; }
.sheet form { padding: 24px; text-align: center; }
.sheet h2 { font-size: 20px; } .sheet p { color: var(--mut); margin: 0 0 6px; font-size: 14px; }
.sheet input, .auth input { min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg3); color: var(--fg); font: 16px var(--sans); }

.account { max-width: 400px; margin: 0 auto; padding: 48px 0; text-align: center; }
.account .auth { margin: 20px 0; }
.account a:not(.btn) { color: var(--accent); }
.error { color: #ff6b6b; }

@media (min-width: 1024px) {
  body.bare { padding-left: 88px; }
  body.bare .tabs { display: flex; }
  .chat { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ---------- stage 3: the builder ---------- */
.builder { max-width: 720px; margin: 0 auto; padding: 16px 0 calc(96px + env(safe-area-inset-bottom)); }
.b-head h1 { font-size: 24px; margin: 4px 0 14px; }
.b-progress { height: 6px; border-radius: 999px; background: var(--bg3); overflow: hidden; }
.b-progress i { display: block; height: 100%; background: var(--grad); transition: width .3s; }
.b-step-name { font: 600 18px var(--sans); margin: 18px 0 12px; }
.builder fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.step { display: none; } .step.on { display: block; animation: fadein .25s; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } }
.step h3 { font-size: 14px; color: var(--mut); margin: 18px 0 8px; font-weight: 500; }
.tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.tile { border: 2px solid var(--line); background: var(--bg2); color: var(--fg); border-radius: 14px; padding: 12px 16px; font: 500 14px var(--sans); cursor: pointer; min-height: 48px; }
.tile.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg2)); }
.tiles-img { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile-img { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tile-img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.tile-img span { padding: 10px; font-weight: 600; }
.tiles-wide { display: grid; grid-template-columns: 1fr; }
.tiles-wide .tile { text-align: left; }
.tiles-wide small { display: block; color: var(--mut); font-weight: 400; margin-top: 2px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; font-weight: 500; }
.field input:not([type=range]) { min-height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg3); color: var(--fg); font: 16px var(--sans); }
.field input[type=range] { accent-color: var(--accent); width: 100%; height: 32px; }
.field output { color: var(--accent); font-weight: 700; }
.b-summary { color: var(--mut); font-size: 14px; }
.b-error { color: #ff6b6b; text-align: center; }
.b-nav { position: fixed; left: 0; right: 0; bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom)); z-index: 25; display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.b-nav .btn { flex: 1; max-width: 420px; margin-left: auto; }
.b-nav .btn:disabled { opacity: .45; box-shadow: none; }

/* waiting for her pictures */
.spinner { width: 48px; height: 48px; margin: 0 auto 20px; border-radius: 50%; border: 4px solid var(--bg3); border-top-color: var(--accent); animation: spin 1s linear infinite; }
.spinner.small { width: 18px; height: 18px; border-width: 3px; margin: 0; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.wait-inline { color: var(--mut); display: flex; gap: 10px; align-items: center; }
.owned { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0; text-align: left; }

@media (min-width: 640px) { .tiles-img { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tiles-wide { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .b-nav { left: 88px; bottom: 0; } .builder { padding-bottom: 96px; } }

/* ---------- profile gallery: tabs and locks ---------- */
.g-tabs { display: flex; gap: 4px; margin: 28px 0 12px; border-bottom: 1px solid var(--line); }
.g-tabs button { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--mut); padding: 12px 4px;
  font: 600 15px var(--sans); cursor: pointer; margin-bottom: -1px; }
.g-tabs button.on { color: var(--fg); border-bottom-color: var(--accent); }
.g-tabs sup { font-size: 10px; color: var(--dim); font-weight: 500; margin-left: 2px; }
.ph { position: relative; border: 0; padding: 0; cursor: pointer; display: block; }
.ph[hidden] { display: none; }
.ph.locked img { transform: scale(1.08); }
.ph .lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: #fff; font: 600 12px var(--sans); background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.35)); }
.ph .lock svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.ph.locked:hover .lock svg { background: var(--grad); }
.g-empty { color: var(--mut); text-align: center; padding: 24px 0; }
.sheet-body { padding: 28px 24px 16px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.sheet-body p { color: var(--mut); margin: 0 0 6px; font-size: 14px; }
.lock.big { display: grid; place-items: center; margin: 0 auto 4px; width: 56px; height: 56px; border-radius: 50%; background: var(--grad); }
.lock.big svg { width: 28px; height: 28px; stroke: #fff; }

/* ---------- the feed ---------- */
body.feedmode { padding-bottom: 0; }
body.feedmode .topbar, body.feedmode .foot { display: none; }
body.feedmode .page { padding: 0; max-width: none; }
.feed { position: relative; height: calc(100dvh - var(--tabs-h) - env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; background: #000; }
.feed-tabs { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 2px;
  padding: 4px; border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(10px); }
.feed-tabs button { border: 0; background: none; color: rgba(255,255,255,.7); padding: 8px 22px; border-radius: 999px; font: 600 14px var(--sans); cursor: pointer; }
.feed-tabs button.on { background: rgba(255,255,255,.18); color: #fff; }
.feed-list { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.feed-list::-webkit-scrollbar { display: none; }
.post { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #000; }
.post-img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.post.is-locked .post-img { transform: scale(1.06); }
.post-lock { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 0; background: rgba(0,0,0,.35); color: #fff; padding: 18px 22px; border-radius: 20px; backdrop-filter: blur(8px); font: 600 14px var(--sans); cursor: pointer; }
.post-lock svg { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--grad); }
.post-side { position: absolute; right: 10px; bottom: 120px; display: flex; flex-direction: column; gap: 18px; z-index: 2; }
.act { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; color: #fff; cursor: pointer; font: 600 12px var(--sans); }
.act svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.act.act-like.on svg { fill: var(--accent); stroke: var(--accent); }
.post-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 70px 16px 14px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; }
.who { display: flex; align-items: center; gap: 10px; }
.who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--accent); }
.who span { line-height: 1.2; } .who i { font-style: normal; color: #ddd; } .who small { display: block; color: #ccc; font-size: 12px; }
.cap { margin: 8px 0 0; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.post.wall { display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 30%, #000), #000 70%); }
.wall-card { text-align: center; padding: 24px; max-width: 340px; color: #fff; }
.wall-card h2 { font-size: 24px; margin-bottom: 8px; } .wall-card p { color: #ddd; margin: 0 0 20px; }
.feed-empty { color: var(--mut); text-align: center; padding: 120px 24px; }
@media (min-width: 1024px) { .feed { height: 100dvh; } }
/* wide screens: the feed keeps its column; the girl of the post on screen is on its right, filters on its left (from 1280) */
.feed-left, .feed-side { display: none; }
@media (min-width: 1024px) {
  .feed-wrap { display: grid; grid-template-columns: 520px minmax(0, 360px); gap: 24px; justify-content: center; background: var(--bg); }
  .feed-wrap > .feed { margin: 0; }
  .feed-side { display: block; height: 100dvh; overflow-y: auto; scrollbar-width: thin; }
  .feed-side .her-panel { display: flex; flex-direction: column; border-left: 0; overflow: visible; background: none; }
  .feed-side .hp-media { border-radius: 20px; aspect-ratio: 1 / 1; margin-top: 20px; }
  .feed-side .hp-body { padding: 0 4px 24px; }
  .hp-likes { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--mut); font-size: 13px; }
  .hp-likes svg { width: 16px; height: 16px; fill: var(--accent); stroke: var(--accent); }
  .hp-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .hp-thumbs img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 10px; display: block; }
}
@media (min-width: 1280px) {
  .feed-wrap:not(.one-girl) { grid-template-columns: 200px 520px minmax(0, 360px); }
  .feed-wrap:not(.one-girl) .feed-tabs { display: none; }
  .feed-left { display: flex; flex-direction: column; align-items: stretch; gap: 4px; height: 100dvh; overflow-y: auto; padding: 24px 0; scrollbar-width: thin; }
  .feed-left > button { border: 0; background: none; color: var(--mut); text-align: left; padding: 10px 14px; border-radius: 12px; font: 600 15px var(--sans); cursor: pointer; }
  .feed-left > button.on { background: var(--bg3); color: var(--fg); }
  .feed-left h3 { margin: 18px 14px 6px; font-size: 12px; color: var(--mut); text-transform: uppercase; letter-spacing: .06em; }
  .fl-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px; }
  .fl-tags button { border: 1px solid var(--line); background: none; color: var(--mut); padding: 5px 11px; border-radius: 999px; font-size: 12px; cursor: pointer; }
  .fl-tags button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
}
@media (hover: hover) and (min-width: 1280px) { .feed-left > button:hover, .fl-tags button:hover { color: var(--fg); } }

/* ---------- money: balance, store, checkout ---------- */
.top-right { display: flex; gap: 8px; align-items: center; }
.chip-bal { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: var(--bg3); font: 600 13px var(--sans); }
.chip-bal.ghost { background: none; padding: 0; }
.coin { color: #ffcf4d; }
.badge { padding: 2px 8px; border-radius: 999px; background: var(--grad); color: #fff; font: 700 11px var(--sans); }
.btn-ghost { background: var(--bg3); box-shadow: none; }
.sheet-bal { color: var(--mut); font-size: 13px; } .sheet-bal a, .b-error a { color: var(--accent); }
.shop, .pay { max-width: 560px; margin: 0 auto; padding: 20px 0 32px; }
.balance { color: var(--mut); margin: 0 0 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .balance b { color: var(--fg); font-size: 18px; }
.plan { position: relative; padding: 28px 20px 20px; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
  background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent2) 25%, transparent), transparent 60%), var(--bg2); }
.plan-tag { position: absolute; top: -12px; left: 20px; padding: 4px 12px; border-radius: 999px; background: var(--grad); font: 700 12px var(--sans); }
.plan h1 { font-size: 26px; margin-bottom: 12px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 20px; }
.plan li { padding: 6px 0 6px 26px; position: relative; color: #ddd; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.shop h2 { font-size: 18px; margin: 28px 0 12px; }
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pack { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 8px; border-radius: 18px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--fg); cursor: pointer; }
.pack:hover { border-color: var(--accent); }
.pack b { font: 700 24px var(--sans); } .pack small { color: var(--mut); } .pack span { margin-top: 8px; font-weight: 600; color: var(--accent); }
.prices { list-style: none; padding: 0; margin: 0 0 16px; }
.prices li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--mut); }
.prices b { color: var(--fg); white-space: nowrap; } .prices b::after { content: " ✦"; color: #ffcf4d; }
.pay h1 { font-size: 24px; margin-bottom: 8px; }
.pay-box { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 20px; background: var(--bg2); border: 1px solid var(--line); margin: 16px 0; }
.pay-box label { color: var(--mut); font-size: 12px; margin-top: 6px; text-transform: uppercase; letter-spacing: .06em; }
.copy { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--bg3); color: var(--fg); font: 500 16px var(--sans); cursor: pointer; text-align: left; }
.copy b { font-size: 22px; } .copy span { color: var(--accent); font-size: 13px; font-weight: 600; flex: none; }
.copy code { font-size: 13px; word-break: break-all; }
.qr { align-self: center; margin-top: 14px; padding: 10px; background: #fff; border-radius: 12px; }
.qr:empty { display: none; }
.pay-notes { color: var(--mut); font-size: 13px; padding-left: 18px; }
.timer { text-align: center; color: var(--mut); } .timer span { color: var(--fg); font-weight: 600; }
.lock.big.ok { color: #fff; font-size: 28px; }
.pay-paid, .pay-expired { text-align: center; padding: 24px 0; }
@media (max-width: 380px) { .packs { grid-template-columns: 1fr 1fr; } }

/* ---------- photos in chat ---------- */
.ask-photo { width: 46px; height: 46px; flex: none; border: 1px solid var(--line); border-radius: 50%; background: var(--bg3); color: var(--fg);
  display: grid; place-items: center; cursor: pointer; }
.ask-photo:hover { border-color: var(--accent); color: var(--accent); }
.msg.photo { padding: 4px; max-width: 70%; position: relative; overflow: hidden; }
.msg.photo img { display: block; width: 240px; max-width: 100%; aspect-ratio: 400 / 490; object-fit: cover; border-radius: 16px; cursor: zoom-in; }
.msg.photo.locked img { cursor: default; transform: scale(1.04); }
.msg.photo.locked[data-video]::before { content: '▶'; position: absolute; z-index: 1; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; padding-left: 4px; box-sizing: border-box;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 22px; pointer-events: none; }   /* a locked clip: its blurred poster + play */
.msg.photo.pending { padding: 12px 16px; display: flex; gap: 8px; align-items: center; color: var(--mut); }
.photo-unlock { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); white-space: nowrap; border: 0; border-radius: 999px;
  padding: 10px 16px; background: var(--grad); color: #fff; font: 600 13px var(--sans); cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.msg.photo small { display: block; padding: 6px 8px 2px; color: var(--mut); }

/* Premium in the menu: the brand gradient on its crown, always */
.tabs .tab-premium svg { stroke: var(--accent); }
.tabs .tab-premium span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }
.tabs a { min-width: 0; }
@media (max-width: 380px) { .tabs a span { font-size: 10px; } }

/* ---------- admin ---------- */
.admin { padding: 20px 0 40px; }
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-tabs a { padding: 8px 14px; border-radius: 999px; background: var(--bg3); color: var(--mut); font-weight: 500; }
.admin-tabs a.on { background: var(--fg); color: var(--bg); }
.flash { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 18%, var(--bg2)); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kpi { padding: 16px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.kpi b { font: 700 24px var(--sans); } .kpi span { color: var(--mut); font-size: 13px; } .kpi.warn { border-color: #ff6b6b; }
.search { display: flex; gap: 8px; margin-bottom: 12px; }
.search input, .tbl input, .tbl select { background: var(--bg3); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: 13px var(--sans); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; display: block; overflow-x: auto; }
.tbl th, .tbl td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
.tbl th { color: var(--mut); font-weight: 500; }
.tbl a { color: var(--accent); }
.tbl .st-paid td { color: #3ddc84; } .tbl .st-expired td { color: var(--dim); }
form.inline { display: flex; gap: 4px; margin: 2px 0; flex-wrap: wrap; }
form.inline button { background: var(--bg3); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
form.inline button:hover { border-color: var(--accent); }
.qc-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.qc-chars a { display: flex; flex-direction: column; gap: 2px; } .qc-chars img { border-radius: 12px; aspect-ratio: 3/4; object-fit: cover; }
.qc-chars small, .why { color: var(--mut); font-size: 12px; }
.qc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.qc-grid figure { margin: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.qc-grid img { width: 100%; aspect-ratio: 400/490; object-fit: cover; }
.qc-grid figcaption { padding: 8px; font-size: 12px; }
.qc-grid .rej { opacity: .6; border-color: #ff6b6b; }
.rej-box { aspect-ratio: 400/490; display: grid; place-items: center; color: #ff6b6b; }

/* ---------- first-purchase offer ---------- */
.promo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 18px;
  border-radius: 16px; background: var(--grad); color: #fff; box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 35%, transparent); }
.promo b { font: 700 16px var(--sans); } .promo span { font-size: 13px; opacity: .95; }
.promo time { font: 700 15px ui-monospace, monospace; background: rgba(0,0,0,.25); padding: 2px 8px; border-radius: 8px; margin-left: 4px; }
.promo-bar { margin: 0 0 16px; }
.btn s { opacity: .65; font-weight: 500; margin-right: 4px; }

/* ---------- SEO landings ---------- */
.landing .hero h1 { max-width: 820px; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.seo-long { max-width: 820px; }
.seo-long h2 { margin-top: 32px; }
.seo-long p { margin: 10px 0 0; line-height: 1.65; }
.seo-long details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.seo-long summary { cursor: pointer; color: var(--fg); font-weight: 500; }
.related { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.related a { color: var(--accent); }
/* "How to start" and "In numbers" blocks of the landing and type pages */
.steps { list-style: none; counter-reset: step; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.steps li { counter-increment: step; display: grid; gap: 2px; padding: 12px 14px 12px 52px; position: relative; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); }
.steps li::before { content: counter(step); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700; display: grid; place-items: center; }
.steps li span { color: var(--mut); }
.facts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.facts li { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; text-align: center; }
.facts b { display: block; font: 700 24px var(--sans); }
.facts span { color: var(--mut); font-size: 13px; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } .facts { grid-template-columns: repeat(4, 1fr); } }
/* footer columns: Types, Guides, Help (stacked on phones) */
.foot-cols { display: grid; gap: 20px; max-width: 960px; margin: 12px auto 20px; text-align: left; }
.foot-col h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot-col a { text-decoration: none; color: var(--mut); } .foot-col a:hover { color: var(--fg); }
@media (min-width: 720px) { .foot-cols { grid-template-columns: 1fr 2fr 1fr; } .foot-col-wide ul { display: block; column-count: 2; column-gap: 20px; } .foot-col-wide li { margin-bottom: 6px; break-inside: avoid; } }

/* desktop: text blocks sit in the middle of the page, not against its left edge */
.seo, .seo-long, .legal, .landing .hero { margin-left: auto; margin-right: auto; }
.landing .hero, .seo { max-width: 820px; }
@media (min-width: 1024px) { .seo h2, .seo-long h2, .landing .hero h1 { text-align: center; } .landing .hero, .landing .hero .lead { text-align: center; margin-left: auto; margin-right: auto; } .landing .cta-row { justify-content: center; } }

/* store: monthly and yearly side by side */
.plans { display: grid; gap: 16px; }
.plan { margin-top: 12px; }
.plan-best { border-width: 2px; }
.plan-price { margin: -4px 0 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan-price b { font: 700 30px var(--sans); } .plan-price s { color: var(--mut); } .plan-price span { color: var(--mut); font-size: 14px; }
@media (min-width: 760px) { .shop { max-width: 920px; } .plans { grid-template-columns: 1fr 1fr; align-items: stretch; } .plan { display: flex; flex-direction: column; } .plan ul { flex: 1; } }

/* ---------- profile: story, topics, similar girls ---------- */
.story h2, .topics h2, .similar h2 { font-size: 18px; margin: 28px 0 10px; }
.story p { color: var(--mut); margin: 0 0 10px; line-height: 1.65; }
.topics .tags a { background: var(--bg3); padding: 8px 14px; font-size: 13px; }
.topics .tags a:hover { background: color-mix(in srgb, var(--accent) 25%, var(--bg3)); }
.similar { padding: 8px 0 16px; }
@media (min-width: 1024px) { .similar { margin-top: 24px; } }

/* the brand's own mark in the header and the rail */
.logo-img { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.rail-logo .logo-img { width: 40px; height: 40px; border-radius: 12px; }
/* the big CSS marks elsewhere (age gate, sign-up) take the brand's gradient already; the heart stays only there */

/* ---------- hover: rail, tabs, chips ---------- */
.tabs a, .chip, .g-tabs button { transition: color .15s, background-color .15s; }
.tabs svg { transition: stroke .15s; }
@media (hover: hover) {
  .tabs a:hover { color: var(--fg); }
  .tabs a:not(.tab-create):hover svg { stroke: var(--accent); }
  .tabs .tab-create:hover svg { filter: brightness(1.12); }
  .chip:hover { background: color-mix(in srgb, var(--accent) 22%, var(--bg3)); color: var(--fg); }
  .chip.on:hover { background: var(--fg); color: var(--bg); }
  .g-tabs button:hover { color: var(--fg); }
}
@media (min-width: 1024px) {
  .tabs a { margin: 0 10px; border-radius: 14px; }
  .tabs a:hover { background: var(--bg3); }
}
/* desktop: one row of chips, the rest behind "more" (app.js folds them) */
.chip-more { border: 0; cursor: pointer; font-family: inherit; color: var(--fg); }

/* ---------- card hover: the brand colour rises from below, her clip plays ---------- */
.card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 30%, transparent) 82%, color-mix(in srgb, var(--accent) 62%, transparent)); }
.card-info { transition: background .35s; }
.card-info { z-index: 2; }
.card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.card.playing video { opacity: 1; }
@media (hover: hover) {
  .card:not(.card-create):hover::after { opacity: 1; }
  .card:not(.card-create):hover .card-info { background: linear-gradient(transparent, rgba(0,0,0,.45)); }
}
.ph-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- premium: plans by the month, the year first ---------- */
.shop-h1 { font-size: 28px; text-align: center; margin: 4px 0 20px; }
.plans { display: grid; gap: 12px; }
.plan { margin: 0; padding: 18px 18px 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg2); display: flex; flex-direction: column; }
.plan-best { border: 2px solid var(--accent); background: linear-gradient(180deg, var(--bg2) 40%, color-mix(in srgb, var(--accent) 22%, var(--bg2))); }
.plan header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan header b { font: 600 16px var(--sans); }
.plan-off { padding: 3px 9px; border-radius: 8px; background: #f5c542; color: #1a1300; font: 700 12px var(--sans); }
.plan-tag { position: static; min-height: 14px; margin: 4px 0 0; padding: 0; background: none; font: 700 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.plan-tag-first { color: #f5c542; }
.plan-price { margin: 14px 0 0; display: flex; align-items: baseline; gap: 2px; }
.plan-price b { font: 700 34px var(--sans); }
.plan-price span { color: var(--mut); font-size: 15px; }
.plan-was { margin: 0; min-height: 20px; color: var(--mut); font-size: 14px; }
.plan-total { margin: 6px 0 0; color: var(--mut); font-size: 12px; }
.plan-credits { margin: 2px 0 14px; color: #ddd; font-size: 13px; flex: 1; }
.perks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.perks li { padding: 12px 14px 12px 38px; position: relative; border-radius: 12px; background: var(--bg2); color: #ddd; font-size: 14px; }
.perks li::before { content: "✓"; position: absolute; left: 14px; color: var(--accent); font-weight: 700; }
@media (min-width: 760px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .perks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 759px) { .plan-tag:empty { display: none; } }

/* plan cards: lift and light up under the pointer */
.plan { transition: border-color .2s, transform .2s, box-shadow .2s; }
@media (hover: hover) {
  .plan:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.35); }
  .plan-best:hover { border-color: var(--accent); box-shadow: 0 10px 32px color-mix(in srgb, var(--accent) 30%, transparent); }
  .plan:hover .btn-ghost { background: var(--grad); border-color: transparent; color: #fff; }
}

/* chat: her photo full screen */
.photo-view { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.94); display: grid; place-items: center; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.photo-view[hidden] { display: none; }
.photo-view img { max-width: 100vw; max-height: 100dvh; object-fit: contain; }
.photo-view button { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.15); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }

/* ---------- profile: clip hero, "how you met", the CTA that stays on screen ---------- */
.profile-cover video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.met { color: var(--mut); font-style: italic; margin: 6px 0 0; }
/* a centred pill, never wider than 420px; on desktop it sits over the content column (right of the 88px rail) */
.cta-float.cta-float { justify-content: center; text-align: center; position: fixed; z-index: 40; left: 50%; right: auto; translate: -50% 0; width: min(420px, calc(100% - 32px));
  min-height: 52px; bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom) + 10px); font-weight: 800; font-size: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.cta-float[hidden] { display: none; }
@media (min-width: 1024px) { .cta-float.cta-float { left: calc(50% + 44px); bottom: 24px; } }
/* the gallery tabs stay on top while a long gallery scrolls */
.g-tabs { position: sticky; top: 0; z-index: 5; background: var(--bg); }
.private-all { margin: 0 0 12px; }
.private-all[hidden] { display: none; }

/* ---------- chat ladder: quick asks, video bubbles, the lock chip ---------- */
.quick { display: flex; gap: 8px; padding: 6px 12px 0; overflow-x: auto; scrollbar-width: none; }
.quick button { flex: none; border: 1px solid var(--line); background: var(--bg3); color: var(--fg); border-radius: 999px; padding: 7px 14px; font: 500 13px var(--sans); cursor: pointer; }
@media (hover: hover) { .quick button:hover { border-color: var(--accent); color: var(--accent); } }
.msg.photo video { display: block; width: 240px; max-width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
.lock-chip { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: var(--grad); color: #fff; font: 600 13px var(--sans); }
/* the guest's "remember me" offer inside the chat (templates/chat.php #chat-offer; chat.js moves it to the end of the conversation) */
.chat-offer { display: flex; gap: 12px; align-items: flex-start; margin: 10px auto; width: min(92%, 420px); padding: 12px; border: 1px solid var(--accent); border-radius: 16px; background: var(--card, rgba(255,255,255,.04)); }
.chat-offer[hidden] { display: none; }
.chat-offer > img { width: 48px; height: 60px; object-fit: cover; object-position: top; border-radius: 10px; flex: none; }
.chat-offer .co-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.chat-offer p { margin: 0; color: var(--mut); font-size: 13px; }
.chat-offer .co-email { text-align: center; font-size: 13px; color: var(--accent); }
.chat-offer .co-terms { color: var(--dim); font-size: 11px; line-height: 1.35; } .chat-offer .co-terms a { color: var(--accent); }
.chat-offer .co-x { align-self: center; font-size: 13px; }
.msg.upsell { display: flex; gap: 10px; align-items: center; border: 1px solid var(--accent); max-width: 92%; white-space: normal; }
.msg.upsell img { width: 52px; height: 64px; object-fit: cover; object-position: top; border-radius: 10px; flex: none; }
.msg.upsell b { display: block; } .msg.upsell span { display: block; color: var(--mut); font-size: 13px; margin: 2px 0 8px; }
.leave-face { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: top; margin: 0 auto 8px; display: block; }

/* ---------- home: banner, rows, tiles ---------- */
.home-h1 { font-size: 22px; margin: 14px 0 12px; }
.banner { position: relative; margin: 0 -16px 18px; }
.banner-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 10px; padding: 0 16px; }
.banner-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: center; position: relative; height: 220px; border-radius: 20px; overflow: hidden; background: var(--bg2); display: flex; align-items: flex-end; }
.slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.05) 70%); }
.slide-text { position: relative; z-index: 1; padding: 18px; display: flex; flex-direction: column; gap: 6px; max-width: 70%; }
.slide-text b { font: 700 22px var(--sans); } .slide-text span { color: #ddd; font-size: 13px; } .slide-text .btn { width: max-content; color: #fff; }
.slide-offer, .slide-create { background: var(--grad); } .slide-offer::after, .slide-create::after { display: none; }
.banner-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.banner-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); } .banner-dots i.on { background: var(--accent); width: 18px; border-radius: 3px; }
.row { margin: 0 0 18px; }
.row h2 { font-size: 17px; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; }
.row h2 a { font: 500 13px var(--sans); color: var(--mut); }
.row-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
.row-track::-webkit-scrollbar { display: none; }
.row-track .card { flex: 0 0 150px; scroll-snap-align: start; }
.grid-h { font-size: 20px; margin: 8px 0 10px; }
.card.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 12px;
  background: linear-gradient(160deg, var(--accent2), var(--accent)); color: #fff; }
.tile-icon { font-size: 34px; } .card.tile b { font: 700 16px var(--sans); } .card.tile small { opacity: .9; }
.card.tile .pill { margin-top: 6px; background: #fff; color: #111; border-radius: 999px; padding: 5px 14px; font-weight: 600; font-size: 13px; }
.card.tile::after { display: none; }
/* the offer bar: under the top bar on a phone... */
.offer-bar { position: sticky; top: 0; z-index: 30; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--grad); color: #fff; font-size: 13px; text-align: center; }
.offer-bar time { font: 700 13px ui-monospace, monospace; background: rgba(0,0,0,.25); padding: 1px 6px; border-radius: 6px; }
@media (min-width: 1024px) {
  .banner { margin: 0 0 22px; } .banner-track { padding: 0; } .slide { flex-basis: calc(50% - 5px); height: 280px; }
  .row-track { margin: 0; padding: 0; } .row-track .card { flex-basis: 200px; }
  .home-h1 { font-size: 28px; }
}
/* the chat's fixed parts never shrink: a strip with overflow (the quick asks) collapsed to 0 and its buttons sat on the input */
.chat > :not(.msgs) { flex: none; }
.quick { padding-bottom: 6px; }
/* arrows on the banner and the rows */
.has-arrows { position: relative; }
.strip-arrow { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%;
  border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(15,15,20,.7); backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,.4); transition: background .15s; }
.strip-arrow svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.4; }
.strip-arrow[hidden] { display: none; }
.strip-arrow.prev { left: 8px; } .strip-arrow.next { right: 8px; }
@media (hover: hover) { .strip-arrow:hover { background: var(--accent); } }
.banner .strip-arrow { top: 110px; } .row .strip-arrow { top: calc(50% + 16px); }
@media (min-width: 1024px) { .banner .strip-arrow { top: 140px; } .banner .strip-arrow.prev { left: -14px; } .banner .strip-arrow.next { right: -14px; } }
/* phones swipe: rows keep only the banner arrows */
@media (hover: none) { .row .strip-arrow { display: none; } }
/* two slides per view on a desktop: snap to the start, so a slide is never cut at both edges */
.slide { scroll-snap-align: start; }
.banner-track { scroll-padding: 0 16px; }
@media (min-width: 1024px) { .banner-track { scroll-padding: 0; } }

/* ---------- promo art: the offer slide and the tiles carry real pictures, not a flat gradient ---------- */
.slide-offer { background: radial-gradient(120% 140% at 15% 20%, #3b0f4f 0%, #1a0b24 55%, #0e0912 100%); }
.slide-offer::after { display: block; background: linear-gradient(90deg, #12081a 0%, rgba(18,8,26,.92) 42%, rgba(18,8,26,0) 75%); }
.offer-girl { position: absolute; right: 0; top: 0; height: 100%; width: 62%; object-fit: cover; object-position: center 18%; }
.offer-body { position: relative; z-index: 1; padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; align-self: center; }
.cd { display: flex; gap: 6px; }
.cd span { display: flex; flex-direction: column; align-items: center; min-width: 40px; padding: 3px 4px; border-radius: 8px;
  background: rgba(255,255,255,.1); font-size: 9px; color: #cbb8d6; text-transform: uppercase; letter-spacing: .04em; }
.cd b { font: 700 16px ui-monospace, monospace; color: #fff; }
.offer-big { position: relative; display: flex; align-items: flex-start; line-height: .85; margin-top: 4px; }
.offer-num { font: 800 64px/0.85 var(--sans); letter-spacing: -2px;
  background: linear-gradient(180deg, #fff 30%, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.offer-pct { display: flex; flex-direction: column; font: 800 26px var(--sans); color: #fff; margin-left: 2px; }
.offer-pct i { font-style: normal; background: #ff2d75; color: #fff; font-size: 15px; padding: 1px 7px; border-radius: 6px; transform: rotate(-6deg); margin-top: 3px; }
.gem { position: absolute; left: 52px; top: 30px; width: 58px; filter: drop-shadow(0 6px 14px rgba(168,85,247,.6)); }
.offer-sub { margin: 10px 0 0; font: 600 11px var(--sans); letter-spacing: .14em; color: #cbb8d6; }
.offer-title { margin: 0; font: 800 italic 19px var(--sans); color: #fff; }
.offer-btn { margin-top: 8px; width: max-content; background: #fff; color: #111; border-radius: 999px; padding: 8px 16px; font: 700 13px var(--sans); }
.offer-btn i { font-style: normal; background: var(--grad); color: #fff; border-radius: 6px; padding: 1px 6px; font-size: 11px; margin: 0 2px; }
@media (min-width: 1024px) { .offer-num { font-size: 84px; } .offer-title { font-size: 24px; } .gem { width: 70px; left: 70px; top: 38px; } }

.card.tile { position: relative; overflow: hidden; padding: 0; justify-content: flex-end; border: 2px solid transparent;
  background: linear-gradient(#1a0b24, #1a0b24) padding-box, var(--grad) border-box; }
.tile-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tile-bg.blur { filter: blur(12px) brightness(.8); transform: scale(1.15); }
.card.tile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(10,4,16,.92) 85%); }
.card.tile-private::before { background: linear-gradient(180deg, rgba(60,10,70,.35), rgba(10,4,16,.9) 85%); }
.tile-text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 10px 14px; text-align: center; }
.tile-text b { font: 800 italic 17px/1.1 var(--sans); color: #fff; text-transform: uppercase; }
.tile-text b em { font-style: italic; color: #fde047; }
.tile-text small { color: #ddd; font-size: 11px; opacity: 1; }
.card.tile .pill { margin-top: 6px; background: #fff; color: #111; border-radius: 999px; padding: 7px 16px; font: 700 13px var(--sans); }
.card.tile .pill i { font-style: normal; }
.tile-mark { position: absolute; z-index: 2; left: 50%; top: 38%; transform: translate(-50%, -50%); width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.85); backdrop-filter: blur(4px); }
.tile-mark svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; }
.tile-mark.play svg { fill: #fff; stroke: none; margin-left: 3px; }
/* the tiles' pictures: a tile's clip always shows (the card rule hides clips until hover), the private preview is
   already darkened, and the gem keeps its own height (the icon rule squashed it) */
.card.tile video.tile-bg { opacity: 1; }
.tile-bg.blur { filter: blur(6px) brightness(1.05) saturate(1.1); }
.card.tile-private::before { background: linear-gradient(180deg, rgba(60,10,70,.1), rgba(10,4,16,.85) 88%); }
.gem { height: auto; }

/* profile: "not your type?" - back to the catalog instead of leaving */
.more-cta { margin: 8px 0 28px; padding: 26px 18px; border-radius: 24px; text-align: center; border: 2px solid transparent;
  background: linear-gradient(160deg, #23102f, #140a1c) padding-box, var(--grad) border-box; }
.more-faces { display: flex; justify-content: center; margin-bottom: 12px; }
.more-faces img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top; border: 3px solid #1a0b24; margin-left: -12px; }
.more-faces img:first-child { margin-left: 0; }
.more-cta h2 { font-size: 22px; margin: 0 0 6px; }
.more-cta p { color: var(--mut); margin: 0 0 16px; }
.more-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (min-width: 1024px) { .more-cta { padding: 34px; } .more-faces img { width: 64px; height: 64px; } }
/* the lock chip says what it is: "private photos", just "photos" where the header is narrow */
.lock-chip { white-space: nowrap; }
.lock-chip .lc-short { display: none; }
@media (max-width: 420px) { .lock-chip .lc-long { display: none; } .lock-chip .lc-short { display: inline; } }

/* ---------- inbox (/chats): the list beside the open chat ---------- */
.inbox { display: grid; grid-template-columns: 1fr; height: 100dvh; }
.inbox-list { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 16px 12px calc(var(--tabs-h) + 16px); background: var(--bg); }
.inbox-list h1 { font-size: 22px; margin: 4px 4px 12px; letter-spacing: .02em; text-transform: uppercase; }
.inbox-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 42px; border-radius: 12px; background: var(--bg3); margin-bottom: 10px; }
.inbox-search svg { width: 18px; height: 18px; fill: none; stroke: var(--mut); stroke-width: 2; flex: none; }
.inbox-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--fg); font: 15px var(--sans); outline: none; }
.inbox-list .chat-list a { border: 0; border-radius: 14px; padding: 10px; }
.inbox-list .chat-list a.on { background: color-mix(in srgb, var(--accent) 16%, var(--bg2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
@media (hover: hover) { .inbox-list .chat-list a:hover { background: var(--bg2); } }
.inbox-list .chat-list b { display: flex; justify-content: space-between; gap: 8px; }
.inbox-list .chat-list time { font: 400 12px var(--sans); color: var(--mut); }
.cl-ava { position: relative; flex: none; }
.cl-ava img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top; display: block; }
.cl-ava .online { position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border: 2px solid var(--bg); }
.inbox-more { margin-top: 12px; padding: 12px; border-radius: 14px; border: 1px dashed var(--line); text-align: center; color: var(--mut); }
.inbox-pane { min-width: 0; min-height: 0; display: none; }
.inbox-pane .chat { height: 100%; max-width: none; border: 0; }
.inbox-empty { padding: 24px; overflow-y: auto; height: 100%; }
.inbox-empty h2 { margin: 0 0 14px; }
/* a phone shows the list, or the open chat full screen */
.inbox.has-open .inbox-list { display: none; }
.inbox.has-open .inbox-pane { display: block; height: 100dvh; }
@media (min-width: 1024px) {
  .inbox { grid-template-columns: 340px 1fr; }
  .inbox-list { padding-bottom: 16px; border-right: 1px solid var(--line); }
  .inbox .inbox-list { display: flex; }
  .inbox-pane { display: block; height: 100dvh; }
  .inbox-pane .chat-back { display: none; }
}
/* the inbox list on a phone keeps the bottom tabs (a full-screen chat hides them) */
body.bare:has(.inbox:not(.has-open)) .tabs { display: flex; }
@media (min-width: 1024px) {
  /* desktop: always both - beats the phone rule that hides the list while a chat is open */
  .inbox.has-open .inbox-list, .inbox .inbox-list { display: flex; }
  .inbox.has-open .inbox-pane { height: 100dvh; }
}

/* chat pace: "Seen" under his message, a shimmer while she "sends" a picture */
.seen { align-self: flex-end; margin: -4px 4px 0; font-size: 11px; color: var(--mut); }
.seen[hidden] { display: none; }
.msg.photo.sending { padding: 4px; }
.msg.photo.sending .shimmer { display: block; width: 240px; max-width: 60vw; aspect-ratio: 4 / 5; border-radius: 16px;
  background: linear-gradient(110deg, var(--bg3) 30%, color-mix(in srgb, var(--accent) 22%, var(--bg3)) 50%, var(--bg3) 70%);
  background-size: 250% 100%; animation: shimmer 1.4s linear infinite; }
.msg.photo.sending small { display: block; padding: 6px 8px 2px; color: var(--mut); }
@keyframes shimmer { to { background-position: -150% 0; } }

/* ---------- the panel beside her chat (wide screens) ---------- */
.chat-wrap { display: grid; grid-template-columns: minmax(0, 1fr); height: 100dvh; }
.inbox-pane .chat-wrap { height: 100%; }
.chat-wrap .chat { height: 100%; min-height: 0; max-width: none; border-left: 0; border-right: 0; }
.her-panel { display: none; }
@media (min-width: 1024px) { body.bare .chat-wrap > .chat { border-left: 1px solid var(--line); } }
@media (min-width: 1280px) {
  .chat-wrap { grid-template-columns: minmax(0, 1fr) 360px; }
  .her-panel { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; border-left: 1px solid var(--line); background: var(--bg2); scrollbar-width: thin; }
}
.hp-media { position: relative; aspect-ratio: 4 / 5; flex: none; background: var(--bg3); overflow: hidden; }
.hp-media img, .hp-media video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.hp-media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(transparent, var(--bg2)); pointer-events: none; }
.hp-arrow { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0;
  display: grid; place-items: center; background: rgba(15,15,20,.6); backdrop-filter: blur(6px); cursor: pointer; }
.hp-arrow svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; }
.hp-arrow.prev { left: 10px; } .hp-arrow.next { right: 10px; }
@media (hover: hover) { .hp-arrow:hover { background: var(--accent); } }
.hp-body { padding: 0 18px 22px; margin-top: -26px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.hp-body h2 { font-size: 26px; margin: 0; } .hp-body h2 span { color: var(--mut); font-weight: 500; }
.hp-online { margin: -4px 0 0; color: var(--mut); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.hp-online .online { width: 8px; height: 8px; }
.hp-body .met { margin: 2px 0 0; }
.hp-body .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-body .tags a { background: var(--bg3); padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.hp-body h3 { font-size: 15px; margin: 10px 0 0; } .hp-body h3 span { color: var(--accent); }
.hp-traits { margin: 0; color: var(--accent); font-size: 13px; text-transform: capitalize; }
.hp-about { margin: 0; color: var(--mut); font-size: 14px; line-height: 1.55; }
.hp-locked { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: 12px; overflow: hidden; }
.hp-locked img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: blur(3px); transform: scale(1.05); }
.hp-lock { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,4,16,.25); }
.hp-lock svg { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: var(--grad); fill: none; stroke: #fff; stroke-width: 2; }
/* her picture bubbles: the picture is the bubble - no grey frame around a clip */
.msg.photo { background: none; padding: 0; }
.msg.photo video, .msg.photo img { width: 260px; max-width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
.msg.photo small { padding: 6px 4px 0; }
.msg.photo.pending { background: var(--bg3); padding: 12px 16px; }
/* the chat fills its column (an auto margin made it shrink to its content) and a picture bubble keeps no blank lines */
.chat-wrap .chat { margin: 0; width: 100%; }
.msg.photo { white-space: normal; }

/* ---------- chat: suggested replies, games, gifts ---------- */
.suggest { display: flex; gap: 8px; padding: 6px 12px 0; overflow-x: auto; scrollbar-width: none; flex: none; }
.suggest[hidden] { display: none; }
.suggest button { flex: none; max-width: 80%; border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); color: var(--fg);
  border-radius: 14px; padding: 7px 12px; font: 13px var(--sans); cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .suggest button:hover { border-style: solid; } }
.quick .play { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.gift-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 12px; }
.gift { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg3); color: var(--fg); cursor: pointer; }
.gift span { font-size: 34px; line-height: 1; } .gift b { font-size: 13px; } .gift small { color: var(--accent); font-weight: 700; }
@media (hover: hover) { .gift:hover { border-color: var(--accent); } }

/* ---------- inbox: new messages waiting, a chat always open ---------- */
.inbox-h { display: flex; align-items: center; gap: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); margin: 16px 6px 6px; }
.inbox-h span { background: var(--grad); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px; letter-spacing: 0; }
.chat-list.waiting a.unread b { color: var(--fg); }
.chat-list.waiting a.unread p { color: var(--fg); display: flex; align-items: center; gap: 8px; }
.chat-list.waiting a.unread p .dot { flex: none; margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.chat-list.waiting time { color: var(--accent) !important; }
.inbox-more { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.inbox-more .more-faces { display: flex; }
.inbox-more .more-faces img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--bg); margin-left: -9px; }
.inbox-more .more-faces img:first-child { margin-left: 0; }
/* a phone: a chat he did not pick stays behind the list */
@media (max-width: 1023px) {
  .inbox.auto-open .inbox-list { display: flex; }
  .inbox.auto-open .inbox-pane { display: none; }
}
body.bare:has(.inbox.auto-open) .tabs { display: flex; }

/* ---------- chat tools: menus, favourites, unread, memory, our photos ---------- */
.chat-menu { position: relative; margin-left: auto; }
.chat-head .chat-menu + .lock-chip { margin-left: 8px; }
.chat-menu-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--bg3); color: var(--fg); font-size: 20px; line-height: 1; cursor: pointer; }
.chat-menu-list { position: absolute; right: 0; top: 42px; z-index: 50; min-width: 230px; padding: 6px; border-radius: 14px; background: var(--bg2);
  border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0,0,0,.5); display: flex; flex-direction: column; }
.chat-menu-list[hidden] { display: none; }
.chat-menu-list button { text-align: left; border: 0; background: none; color: var(--fg); padding: 10px 12px; border-radius: 10px; font: 14px var(--sans); cursor: pointer; }
.chat-menu-list button:hover { background: var(--bg3); }
.chat-menu-list .danger { color: #ff6b81; }
.row-pop { position: fixed; top: 0; left: 0; }
.inbox-list li { position: relative; }
.row-menu { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: var(--bg3); color: var(--fg); cursor: pointer; opacity: 0; transition: opacity .15s; }
@media (hover: hover) { .inbox-list li:hover .row-menu { opacity: 1; } .inbox-list li:hover time { visibility: hidden; } }
@media (hover: none) { .row-menu { display: none; } }
.chat-list a.unread p { color: var(--fg); display: flex; align-items: center; gap: 8px; }
.chat-list a.unread .dot { flex: none; margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.chat-list .star { color: #fbbf24; margin-right: 4px; }
.inbox-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.inbox-tabs button { border: 1px solid var(--line); background: none; color: var(--mut); border-radius: 999px; padding: 6px 12px; font: 500 13px var(--sans); cursor: pointer; }
.inbox-tabs button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.mem-list { list-style: none; padding: 0; margin: 6px 0 12px; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.mem-list li { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bg3); font-size: 14px; }
.mem-list li span { flex: 1; } .mem-list button { border: 0; background: none; color: var(--mut); cursor: pointer; font-size: 14px; }
.our-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 12px; max-height: 60vh; overflow-y: auto; }
.our-photos img, .our-photos video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; display: block; }
.our-photos a { position: relative; display: block; }
.our-photos a.locked img { filter: blur(6px); }
.our-photos a.locked span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; }
.chat-head .lock-chip { margin-left: 8px; }
/* the row menu sits where it was opened (the shared menu rule pinned it to the right edge, stretching it across the screen) */
.row-pop { right: auto; width: max-content; }
.chat-list.waiting a.read time { color: var(--mut) !important; }

/* ---------- sign-up with her picture (account page and the chat's join sheet) ---------- */
.account.account-auth { max-width: 900px; padding: 32px 0; text-align: left; }
.auth-card { display: grid; grid-template-columns: 1fr; border-radius: 24px; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); }
.ac-girl { position: relative; aspect-ratio: 4 / 3; }
.ac-girl > img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; }
.ac-girl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0,0,0,.75)); }
.ac-girl-text { position: absolute; z-index: 1; left: 16px; bottom: 14px; color: #fff; font-size: 15px; }
.ac-logo { position: absolute; z-index: 1; left: 16px; top: 14px; display: flex; align-items: center; gap: 6px; font: 700 18px var(--sans); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.ac-form { padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; }
.ac-form h2 { font-size: 24px; margin: 0 0 4px; }
.ac-form .auth { margin: 0; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 14px; background: #fff; color: #3c4043 !important; border: 1px solid #dadce0; font: 500 15px Roboto, var(--sans); text-decoration: none; cursor: pointer; transition: background .15s, box-shadow .15s; }
.btn-google:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.btn-google:active { transform: scale(.98); }
.btn-google svg { flex: none; width: 18px; height: 18px; stroke: none; }
.btn-google svg path { stroke: none; }
.ac-or { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.ac-or::before, .ac-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ac-perks { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; color: var(--mut); font-size: 13px; }
.ac-perks li::before { content: "✓ "; color: var(--accent); font-weight: 700; }
.ac-terms { color: var(--dim); font-size: 12px; margin: 4px 0 0; } .ac-terms a, .ac-switch a { color: var(--accent); }
.ac-forgot { align-self: flex-end; margin-top: -2px; font-size: 13px; color: var(--accent); }
.ac-note { color: var(--mut); font-size: 14px; margin: 0 0 6px; }
.ac-switch { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--line); text-align: center; }
.sheet-auth { width: min(860px, calc(100% - 24px)); padding: 0; overflow: hidden; }
.sheet-auth .auth-card { border: 0; border-radius: 0; }
.sheet-auth form { padding: 0; text-align: left; }
.sheet-x { position: absolute; right: 12px; top: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; font-size: 22px; cursor: pointer; }
@media (min-width: 760px) {
  .auth-card { grid-template-columns: 1fr 1fr; }
  .auth-card.no-girl { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .ac-girl { aspect-ratio: auto; min-height: 520px; }
  .ac-form { padding: 40px 36px; justify-content: center; }
}

/* ---------- account ---------- */
.account.account-member { max-width: 900px; text-align: left; padding: 28px 0 40px; display: flex; flex-direction: column; gap: 22px; }
.acct-flash { background: color-mix(in srgb, var(--accent) 18%, var(--bg2)); border: 1px solid var(--accent); padding: 10px 14px; border-radius: 12px; margin: 0; }
.acct-head { display: flex; gap: 16px; align-items: center; }
.acct-ava { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: top; border: 3px solid var(--accent); flex: none; }
.acct-ava.letter { display: grid; place-items: center; background: var(--grad); font: 700 30px var(--sans); color: #fff; }
.acct-head h1 { font-size: 26px; margin: 0; } .acct-head p { margin: 2px 0 0; font-size: 13px; }
.acct-cards { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .acct-cards { grid-template-columns: 1fr 1fr; } }
.acct-card { padding: 20px; border-radius: 20px; background: var(--bg2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.acct-card.is-pro { border: 2px solid var(--accent); }
.acct-card h2 { font-size: 20px; margin: 0; } .acct-card p { margin: 0; color: var(--mut); }
.acct-card .btn { margin-top: auto; }
.acct-offer { background: var(--grad); color: #fff; border-radius: 12px; padding: 9px 12px; font-weight: 600; font-size: 14px; }
.acct-offer time { font-family: ui-monospace, monospace; background: rgba(0,0,0,.25); padding: 1px 6px; border-radius: 6px; }
.acct-prices { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.acct-prices li { display: flex; justify-content: space-between; color: var(--mut); font-size: 14px; } .acct-prices b { color: var(--fg); }
.acct-sec h2 { font-size: 18px; margin: 0 0 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.acct-sec h2 a { font: 500 13px var(--sans); color: var(--accent); }
.acct-girls { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.acct-girls a { flex: none; width: 76px; text-align: center; font-size: 12px; }
.acct-girls img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; object-position: top; display: block; margin: 0 auto 6px; border: 2px solid var(--line); }
.acct-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.acct-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; display: block; }
.acct-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 12px; }
.acct-table th { text-align: left; color: var(--mut); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.acct-table td { padding: 8px; border-bottom: 1px solid var(--line); }
.acct-table .plus { color: #4ade80; } .acct-table .minus { color: #ff8fa3; }
.st-paid { color: #4ade80; } .st-expired { color: var(--mut); } .acct-table a { color: var(--accent); }
.acct-form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin-bottom: 12px; }
.acct-form label { display: flex; flex-direction: column; gap: 6px; color: var(--mut); font-size: 14px; }
.acct-form select, .acct-form input:not([type=checkbox]) { min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg3); color: var(--fg); font: 15px var(--sans); }
.acct-form .acct-check { flex-direction: row; align-items: center; gap: 10px; color: var(--fg); }
.acct-form .btn { align-self: flex-start; }
.acct-more { margin: 8px 0; } .acct-more summary { cursor: pointer; color: var(--mut); padding: 6px 0; }
.acct-more.danger summary { color: #ff6b81; }
.acct-logout { margin: 6px 0; } .acct-del { background: #b91c3c; }
/* safe mode: explicit pictures blurred until tapped */
body.safe .gallery .ph img, body.safe .feed img, body.safe .feed video, body.safe .feed-side .hp-media img, body.safe .hp-thumbs img, body.safe .msg.photo img, body.safe .acct-photos img { filter: blur(22px); transition: filter .2s; }
body.safe .revealed img, body.safe .revealed video, body.safe img.revealed { filter: none !important; }
/* the account page colours its links pink; the offer is a link on a pink background */
.account a.acct-offer { color: #fff; }
.account a.acct-offer time { color: #fff; }
.account .acct-girls a, .account .acct-photos a { color: var(--fg); }
/* "Continue": his latest chats, or three girls to start with */
.acct-cont { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .acct-cont { grid-template-columns: repeat(3, 1fr); } }
.account a.acct-cont-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--line); color: var(--fg); min-width: 0; }
.acct-cont-item img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; border: 2px solid var(--accent); }
.acct-cont-item span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-cont-item b { font-size: 15px; display: flex; align-items: center; gap: 6px; }
.acct-cont-item small { color: var(--mut); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-cont-item .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display: inline-block; }
/* a one-time notice after a redirect (?ok=, templates/layout.php): floats over any page, fades out by itself */
.toast { position: fixed; z-index: 60; left: 50%; top: 64px; transform: translateX(-50%); margin: 0; max-width: calc(100vw - 32px); padding: 10px 18px;
         border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, var(--bg2)); border: 1px solid var(--accent); color: var(--fg);
         font-size: 14px; font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.35); animation: toast-out .4s ease 5s forwards; }
@keyframes toast-out { to { opacity: 0; visibility: hidden; } }
.account a.acct-fav { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); color: var(--mut); font-size: 13px; }
.acct-fav img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: top; }
.acct-fav b { color: var(--fg); }
/* header buttons on a phone: one height, one shape, quiet colours - gold PRO, a light Join */
.hb { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 36px; padding: 0 14px; border-radius: 999px;
  font: 600 13px var(--sans); border: 1px solid var(--line); background: var(--bg3); color: var(--fg); white-space: nowrap; }
.hb-pro { border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.08); color: #fbbf24; }
.hb-join { background: #fff; color: #111; border-color: #fff; }
.hb-icon { width: 36px; padding: 0; }
.hb-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.hb .coin { color: var(--accent); }
/* a phone: the top bar sticks, the offer bar scrolls away with the page (both stuck at 0 covered the buttons) */
@media (max-width: 1023px) { .offer-bar { position: static; } }
/* a desktop: the slim top bar carries only the buttons on the right (the logo is on the side rail); the offer bar scrolls under it */
@media (min-width: 1024px) {
  .topbar { display: flex; justify-content: flex-end; padding: 10px 32px; }
  .topbar .logo { display: none; }
  .offer-bar { position: static; }
}

/* ---------- Shorts ---------- */
.post-media { position: absolute; inset: 0; }
.post-media .post-img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.post.is-locked .post-media .post-img { filter: blur(14px) brightness(.9); transform: scale(1.08); }
.heart-pop { position: absolute; left: 50%; top: 45%; z-index: 3; transform: translate(-50%, -50%) scale(0); font-size: 96px; color: var(--accent);
  pointer-events: none; text-shadow: 0 4px 24px rgba(0,0,0,.4); }
.heart-pop.go { animation: heartpop .8s ease-out; }
@keyframes heartpop { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1.15); } 100% { transform: translate(-50%, -60%) scale(1); opacity: 0; } }
.paused { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 3; color: #fff; font-size: 54px; opacity: .8; pointer-events: none; }
.paused[hidden] { display: none; }
.post-side { bottom: 150px; gap: 16px; }
.act-ava img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid #fff; }
.act-gift span { font-size: 28px; line-height: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.act small { text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.post-info .who { color: #fff; font-size: 16px; } .post-info .who i { color: #ddd; font-style: normal; } .post-info .who time { color: #ccc; font-size: 13px; }
.post-info .cap { margin: 4px 0 10px; color: #f1f1f1; }
.post-cta { display: inline-flex; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); color: #fff; font: 600 13px var(--sans); }
.feed-back { color: #fff; font-size: 26px; padding: 0 10px; line-height: 36px; }
.promo-post { display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 20%, #4c1066 0%, #1a0b24 55%, #0b0710 100%); }
.pp-card { width: min(340px, 86%); text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pp-card .cd { justify-content: center; }
.pp-big { margin: 6px 0 0; font: 800 88px/1 var(--sans); background: linear-gradient(180deg, #fff 30%, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pp-title { margin: 0; font: 800 italic 24px var(--sans); } .pp-title em { color: #fde047; }
.pp-sub { margin: 0 0 10px; color: #d6c4e2; }
.pp-card .btn b { background: #fff; color: var(--accent); border-radius: 6px; padding: 0 6px; margin: 0 2px; }
.wall-card { width: min(360px, 90%); }
.wall-ava { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: top; border: 3px solid var(--accent); margin: 0 auto 10px; display: block; }
.wall-card .auth { margin: 10px 0 6px; }
.wall-card .auth input { min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font: 15px var(--sans); }
.wall-in { color: #ccc; font-size: 13px; } .wall-in a { color: var(--accent); }
/* the menu's Shorts: a dot until it has been opened */
.tabs a.tab-feed { position: relative; }
.tabs a.tab-feed.new::after { content: ""; position: absolute; top: 8px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
/* cards with a clip carry a badge */
.card.has-video::before { content: "▶"; position: absolute; z-index: 3; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.55); color: #fff; font-size: 10px; padding-left: 2px; }
/* the home Shorts row: tall cards */
.shorts-track .short { flex: 0 0 140px; aspect-ratio: 9 / 16; position: relative; border-radius: 14px; overflow: hidden; background: var(--bg2); scroll-snap-align: start; }
.short video { width: 100%; height: 100%; object-fit: cover; display: block; }
.short span { position: absolute; left: 8px; bottom: 8px; color: #fff; font: 600 13px var(--sans); text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.short::after { content: "▶"; position: absolute; top: 8px; right: 8px; color: #fff; font-size: 12px; text-shadow: 0 1px 3px #000; }
@media (min-width: 1024px) { .shorts-track .short { flex-basis: 170px; } }
.more-shorts { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--accent); }
/* her shorts under the chat button: a second, quieter wide button with the clip count */
#cta-main { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 1024px) { #cta-main { flex-direction: row; flex-wrap: wrap; align-items: center; } }
.shorts-cta svg { fill: currentColor; stroke: none; }
/* a clip in her gallery opens her shorts full screen from that clip: the play badge says it can be tapped */
.ph-video { position: relative; display: block; }
.ph-play { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px); }
.ph-play svg { width: 16px; height: 16px; fill: #fff; margin-left: 2px; }
.shorts-cta span { margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); font-size: 12px; font-weight: 700; }
.post-lock[hidden] { display: none; }

/* ---------- builder 2: picture tiles, live preview, finale, two columns on a desktop ---------- */
.builder { display: grid; grid-template-columns: 1fr; gap: 20px; }
.b-tools { display: flex; gap: 8px; margin: 10px 0 14px; flex-wrap: wrap; }
.b-chip { border: 1px solid var(--line); background: var(--bg2); color: var(--fg); border-radius: 999px; padding: 8px 14px; font: 600 13px var(--sans); cursor: pointer; }
@media (hover: hover) { .b-chip:hover { border-color: var(--accent); } }
.tiles-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .tiles-pics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tiles-pics .tile { padding: 0; overflow: hidden; display: flex; flex-direction: column; text-align: center; }
.tiles-pics .tile:not(.tile-img) { justify-content: center; min-height: 64px; padding: 10px; }
.tiles-pics .tile-img img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 12%; display: block; }
.tiles-pics .tile-face img { object-position: center 8%; transform: scale(1.5); transform-origin: center 18%; }
.tiles-scen .tile-img img { aspect-ratio: 3 / 4; transform: none; object-position: center 20%; }
.tiles-pics .tile-img span { padding: 8px 6px; font-weight: 600; font-size: 13px; }
.step h3 { font-size: 14px; color: var(--mut); margin: 14px 0 8px; }
.b-preview { position: sticky; top: 72px; z-index: 4; display: grid; grid-template-columns: 72px 1fr; gap: 4px 12px; align-items: center;
  padding: 10px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--line); order: -1; }
.bp-photo { grid-row: span 2; width: 72px; height: 88px; border-radius: 12px; overflow: hidden; background: var(--bg3); display: grid; place-items: center; }
.bp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bp-photo img[hidden] { display: none; }
.bp-empty { font-size: 11px; color: var(--mut); text-align: center; padding: 4px; }
.bp-label { margin: 0; font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: .06em; }
.bp-summary { margin: 0; font-size: 13px; line-height: 1.4; }
@media (min-width: 1024px) {
  .builder { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; max-width: 1180px; margin: 0 auto; }
  .b-preview { order: 0; position: sticky; top: 24px; align-self: start; display: block; padding: 0; overflow: hidden; }
  .bp-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 0; }
  .bp-empty { font-size: 14px; }
  .bp-label { padding: 14px 16px 0; } .bp-summary { padding: 4px 16px 16px; font-size: 14px; }
}
.like-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 60vh; overflow-y: auto; margin: 8px 0 12px; }
.like-grid button { border: 0; padding: 0; background: none; color: var(--fg); cursor: pointer; font-size: 11px; }
.like-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 10px; display: block; margin-bottom: 3px; }
.b-final { text-align: center; padding: 10px 0 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.b-final[hidden] { display: none; }
.bf-photo { width: min(320px, 80vw); aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--bg2); display: grid; place-items: center; border: 2px solid var(--accent); }
.bf-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; animation: bfin .8s ease-out; }
.bf-photo img[hidden] { display: none; }
@keyframes bfin { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
.bf-name { font-size: 30px; margin: 4px 0 0; }
.bf-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; max-width: 460px; text-align: left; }
.bf-lines li { display: flex; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--bg2); animation: bfin .5s ease-out; }
.bf-wait { color: var(--mut); }
.owner-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.owner-tools .ot-msg { flex-basis: 100%; margin: 0; color: var(--mut); }
.edit-form { display: flex; flex-direction: column; gap: 10px; padding: 24px; text-align: left; }
.edit-form label { display: flex; flex-direction: column; gap: 6px; color: var(--mut); font-size: 14px; }
.edit-form input, .edit-form select { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg3); color: var(--fg); font: 15px var(--sans); }
/* builder picture tiles: the label always shows under the picture (the face zoom painted over it) */
.tiles-pics .tile-img { position: relative; }
.tiles-pics .tile-img span { position: relative; z-index: 1; background: var(--bg2); display: block; }
.tiles-pics .tile-img.on span { background: color-mix(in srgb, var(--accent) 14%, var(--bg2)); }
.tiles-pics .tile-static img { object-position: center; }
/* eyes: a tight crop on her face so the colour reads */
.tiles-pics .tile-eyes img { object-position: center 6%; transform: scale(2.6); transform-origin: center 14%; }
/* builder tiles without a picture: a colour swatch (eyes, hair) or a soft gradient with the label, never a blank grey box */
.tiles-pics .tile.tile-sw, .tiles-pics .tile.tile-ph { align-items: center; justify-content: center; gap: 8px; padding: 12px 6px 10px; min-height: 0; }
.tiles-pics .tile.tile-sw { aspect-ratio: 1; }
.tiles-pics .tile.tile-ph { aspect-ratio: 1; background: linear-gradient(160deg, var(--bg3), var(--bg2) 70%); }
.tiles-pics .tile.tile-ph.on { background: color-mix(in srgb, var(--accent) 14%, var(--bg2)); }
.tile .sw { display: block; width: 62%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 6px 14px rgba(0,0,0,.35); }
.sw-eye { background: radial-gradient(circle, #05030a 0 17%, transparent 18%),
                      radial-gradient(circle, color-mix(in srgb, var(--c) 65%, #fff) 20%, var(--c) 58%, color-mix(in srgb, var(--c) 50%, #000) 100%); }
.sw-hair { background: linear-gradient(145deg, color-mix(in srgb, var(--c) 60%, #fff) 0%, var(--c) 50%, color-mix(in srgb, var(--c) 65%, #000) 100%); }
.b-reset { color: var(--mut); }

/* the creator slide (SoulGen): a fan of girls on the right, the steps on the left */
.slide-create { background: radial-gradient(120% 140% at 85% 30%, color-mix(in srgb, var(--accent2) 45%, #0b0b14) 0%, #10101c 55%, #0a0a12 100%); }
.slide-create::after { display: block; background: linear-gradient(90deg, #0a0a12 0%, rgba(10,10,18,.9) 40%, rgba(10,10,18,0) 70%); }
.fan { position: absolute; right: 4%; top: 8%; bottom: 0; width: 56%; }
.fan img { position: absolute; bottom: -6%; width: 46%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 16px;
  border: 3px solid rgba(255,255,255,.9); box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.fan .fan-0 { left: 4%; transform: rotate(-9deg); z-index: 1; }
.fan .fan-1 { left: 28%; transform: translateY(-6%); z-index: 3; width: 50%; }
.fan .fan-2 { left: 54%; transform: rotate(9deg); z-index: 2; }
.sc-kicker { font: 700 11px var(--sans); letter-spacing: .12em; color: var(--accent) !important; }
.sc-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-steps i { font-style: normal; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; }
@media (max-width: 1023px) { .fan { width: 60%; opacity: .55; } }
/* creator slide: the text stays clear of the fan, the button keeps dark text */
.slide-create .slide-text { z-index: 4; max-width: 46%; }
.slide-create .slide-text b { text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.slide-create .offer-btn, .slide .offer-btn { color: #111 !important; }
.slide-create .fan { right: 2%; width: 50%; }
@media (max-width: 1023px) { .slide-create .slide-text { max-width: 70%; } .slide-create .fan { width: 58%; right: -6%; opacity: .5; } }

/* Email: the verify / consent bar under the top bar, the One Tap notice, the /email/* message pages, the settings form */
.mail-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding: 10px 16px;
  background: var(--bg2); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--mut); }
.mail-bar span { flex: 1 1 220px; }
.mail-bar b { color: var(--fg); font-weight: 600; }
.mail-bar .link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.onetap-notice { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabs-h) + 12px + env(safe-area-inset-bottom)); z-index: 60;
  margin: 0 auto; max-width: 420px; padding: 10px 14px; border-radius: 12px; background: var(--bg3); border: 1px solid var(--line);
  color: var(--mut); font-size: 12px; line-height: 1.45; }
.onetap-notice a { color: var(--accent); }
.feed .wall .ac-terms { text-align: center; }
.email-page { max-width: 480px; margin: 48px auto; padding: 0 16px; text-align: center; }
.email-page h1 { font-size: 26px; margin-bottom: 14px; }
.email-page p { color: var(--mut); }
.email-page form { margin: 22px 0; }
.email-page a { color: var(--accent); }
.acct-form h3 { font-size: 16px; margin: 6px 0 2px; }
.acct-form .acct-check.sub { padding-left: 26px; color: var(--mut); }

/* the operator pages: no rail, no tab bar - the whole width is the admin */
body.adminpage, body.adminpage.bare { padding-left: 0; padding-bottom: 0; }
/* phone: the create slide's text fits the 220px slide (no step chips, a smaller headline); swipe and dots replace the arrows */
@media (max-width: 1023px) {
  .slide-create .slide-text { padding: 14px 16px; gap: 5px; }
  .slide-create .slide-text b { font-size: 19px; line-height: 1.2; }
  .slide-create .sc-steps { display: none; }
}
@media (hover: none) { .banner .strip-arrow { display: none; } }
/* landing breadcrumb (templates/landing.php) */
/* landing breadcrumb: a quiet pill above the h1, in the hero (centred with it on desktop) */
.crumbs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 12px; padding: 6px 14px; border-radius: 999px;
  background: var(--bg2); border: 1px solid var(--line); font-size: 13px; color: var(--mut); }
.crumbs a { color: var(--accent); text-decoration: none; } .crumbs a:hover { text-decoration: underline; } .crumbs span { color: var(--fg); }
/* the tile that fills the rest of the last grid row on landings */
.card-more { display: flex; align-items: center; justify-content: center; min-height: 180px; border-radius: 16px; text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--bg2)), var(--bg2)); border: 1px solid var(--line);
  color: var(--fg); font: 600 18px var(--sans); padding: 20px; text-decoration: none; }
.card-more:hover { border-color: var(--accent); }
/* spanning several columns, the card's portrait aspect-ratio would make it as tall as it is wide: take the row's height */
.card.card-more { aspect-ratio: auto; min-height: 0; height: 100%; }

/* ---------- landings: featured girl cards and the sample chat (templates/landing.php) ---------- */
.featured, .sample { max-width: 1000px; margin: 40px auto 0; }
.featured h2, .sample h2 { font-size: 20px; margin: 0 0 14px; text-align: center; }
.featured-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.fcard { display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fcard-img { display: block; aspect-ratio: 640 / 784; background: var(--bg3); }
.fcard-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fcard-body { display: flex; flex-direction: column; gap: 8px; padding: 14px; flex: 1; }
.fcard-body h3 { margin: 0; font-size: 18px; } .fcard-body h3 a { color: var(--fg); } .fcard-body h3 span { color: var(--mut); font-weight: 400; }
.fcard-tag { margin: 0; color: var(--fg); font-weight: 500; }
.fcard-bio { margin: 0; color: var(--mut); font-size: 14px; line-height: 1.55; }
.fcard-body .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fcard-body .tags a { background: var(--bg3); padding: 4px 10px; font-size: 12px; }
.fcard-body .btn { margin-top: auto; text-align: center; }
@media (min-width: 720px) { .featured-grid { grid-template-columns: repeat(3, 1fr); } }
.sample { max-width: 620px; }
.sample-chat { display: flex; flex-direction: column; gap: 8px; padding: 16px 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); }
.sample-chat .msg { max-width: 82%; white-space: normal; }
.sample-chat .msg.me { align-self: flex-end; }
.sc-row { display: flex; align-items: flex-end; gap: 8px; align-self: flex-start; max-width: 92%; }
.sc-row .msg { max-width: none; }
.sc-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; }
.sample-cta { text-align: center; margin: 14px 0 0; }

/* home rows: the title alone in the h2, the "See all" link beside it (not inside the heading) */
.row-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; }
.row-h h2 { margin: 0; } .row-h a { font: 500 13px var(--sans); color: var(--mut); }

/* the sign-up form's hidden trap field (app/pages/account.php SIGNUP_GUARD): out of sight and out of the tab order */
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* the Shorts sign-up wall (templates/feed.php): her picture blurred behind, Google first, her chat, email folded */
.post.wall { position: relative; overflow: hidden; }
.wall-bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(28px) brightness(.45); z-index: 0; }
.post.wall .wall-card { position: relative; z-index: 1; background: rgba(20, 18, 28, .72); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; backdrop-filter: blur(6px); }
.wall-card .wall-google { display: flex; width: 100%; justify-content: center; margin: 4px 0 10px; }
.wall-card .wall-write { display: block; margin: 0 0 12px; }
.wall-email summary { cursor: pointer; color: #ccc; font-size: 13px; list-style: none; margin-bottom: 6px; }
.wall-email summary::-webkit-details-marker { display: none; }
.wall-email summary::after { content: " ▾"; }

/* an empty chat's starters (templates/chat.php): bigger than the reply ideas, wrapped so all three are seen at once */
.suggest.starters { flex-wrap: wrap; padding-top: 10px; }
.suggest.starters button { border-style: solid; padding: 10px 14px; font-size: 15px; max-width: 100%; white-space: normal; text-align: left; }

/* her *action in asterisks* in a chat line (chat_line_html / chat.js herHtml) */
.msg em.narr { font-style: italic; color: var(--mut); }

/* 2026-10-13 footer: the floating "Chat with X" button no longer covers the last footer line (shared by the three brands) */
body:has(.cta-float:not([hidden])) .foot { padding-bottom: 88px; }

/* 2026-10-13 contrast audit (shared by aigirl.best, soulgenaitool.com, qrlsx.com): the engine sets #fff on the accent gradient (promo bar, promo box, lock chip, send button,
   my chat bubble, buttons, badges, unlock pills); on the cyan/orange/pink gradients of the three brands that fell below WCAG 4.5:1. Per brand (body.brand-<key>):
   a dark ink where the gradient is light, a slightly deeper gradient where white is nearly enough; her stage directions follow the bubble's ink.
   Generated by the contrast probe (scratchpad/probe.js). */
/* aigirl */
body.brand-aigirl { --grad: linear-gradient(135deg, #d43374, #9c48f0); }
body.brand-aigirl .offer-pct i { background: #d3175a; }
body.brand-aigirl .msg.me em.narr { color: inherit; opacity: 1; }
/* soulgen */
body.brand-soulgen .btn,
body.brand-soulgen .msg.me,
body.brand-soulgen .send,
body.brand-soulgen .badge,
body.brand-soulgen .photo-unlock,
body.brand-soulgen .promo,
body.brand-soulgen .promo time,
body.brand-soulgen .lock-chip,
body.brand-soulgen .slide-text .btn,
body.brand-soulgen .offer-bar,
body.brand-soulgen .offer-bar time,
body.brand-soulgen .offer-btn i,
body.brand-soulgen .inbox-h span,
body.brand-soulgen .acct-offer,
body.brand-soulgen .acct-offer time,
body.brand-soulgen .account a.acct-offer,
body.brand-soulgen .account a.acct-offer time,
body.brand-soulgen .chat-head .lock-chip,
body.brand-soulgen .composer .send,
body.brand-soulgen .gate .btn,
body.brand-soulgen .gate-card .btn,
body.brand-soulgen .plan .btn { color: #000; }
body.brand-soulgen .tabs .tab-create svg,
body.brand-soulgen .post-lock svg,
body.brand-soulgen .hp-lock svg { stroke: var(--bg); }
body.brand-soulgen .card-create .plus,
body.brand-soulgen .lock.big.ok,
body.brand-soulgen .acct-ava.letter { color: var(--bg); }
body.brand-soulgen .offer-pct i { background: #d3175a; }
body.brand-soulgen .msg.me em.narr { color: inherit; opacity: 0.9; }
/* qrlsx */
body.brand-qrlsx .btn,
body.brand-qrlsx .card-create .plus,
body.brand-qrlsx .msg.me,
body.brand-qrlsx .send,
body.brand-qrlsx .badge,
body.brand-qrlsx .lock.big.ok,
body.brand-qrlsx .photo-unlock,
body.brand-qrlsx .promo,
body.brand-qrlsx .promo time,
body.brand-qrlsx .lock-chip,
body.brand-qrlsx .slide-text .btn,
body.brand-qrlsx .offer-bar,
body.brand-qrlsx .offer-bar time,
body.brand-qrlsx .offer-btn i,
body.brand-qrlsx .inbox-h span,
body.brand-qrlsx .acct-ava.letter,
body.brand-qrlsx .acct-offer,
body.brand-qrlsx .acct-offer time,
body.brand-qrlsx .account a.acct-offer,
body.brand-qrlsx .account a.acct-offer time,
body.brand-qrlsx .chat-head .lock-chip,
body.brand-qrlsx .composer .send,
body.brand-qrlsx .gate .btn,
body.brand-qrlsx .gate-card .btn,
body.brand-qrlsx .plan .btn { color: var(--bg); }
body.brand-qrlsx .tabs .tab-create svg,
body.brand-qrlsx .post-lock svg,
body.brand-qrlsx .hp-lock svg { stroke: var(--bg); }
body.brand-qrlsx .offer-pct i { background: #d3175a; }
body.brand-qrlsx .msg.me em.narr { color: inherit; opacity: 0.9; }
/* end contrast audit */

/* the photo viewer, 2026-10-13 (templates/_lightbox.php, app.js "Gallery lightbox"): "N / M" and the reply / unlock button
   on top, the picture, a strip of every gallery photo below. Last in the file so it wins over the older .lightbox rules
   above (every button there was a round absolute arrow). Mirrors on a right-to-left page (/ar/). */
.lightbox { flex-direction: column; align-items: stretch; justify-content: flex-start; color: #fff;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.lightbox .lb-top { display: flex; align-items: center; gap: 8px; padding: 10px 16px; min-height: 64px; box-sizing: border-box; }
.lightbox .lb-count { flex: 1; font-size: 14px; font-weight: 600; letter-spacing: .02em; opacity: .85; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lightbox .lb-top button, .lightbox .lb-top a { position: static; inset: auto; transform: none; }
.lightbox .lb-close { flex: none; width: 44px; height: 44px; border-radius: 50%; font-size: 26px; line-height: 1; padding: 0; }
.lightbox .lb-act { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; max-width: min(64vw, 340px); padding: 8px 14px;
  font-size: 14px; line-height: 1.2; text-align: start; text-decoration: none; width: auto; height: auto; }   /* colours: the site's own .btn */
.lightbox .lb-act[hidden] { display: none; }
.lightbox .lb-act svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox .lb-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lightbox .lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox.is-locked .lb-stage img { filter: blur(6px); transform: scale(1.03); }
.lightbox .lb-lock { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0,0,0,.55); pointer-events: none; }
.lightbox .lb-lock[hidden] { display: none; }
.lightbox .lb-lock svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox .lb-prev, .lightbox .lb-next { position: absolute; top: 50%; transform: translateY(-50%); left: auto; right: auto;
  width: 44px; height: 44px; border-radius: 50%; padding: 0; display: grid; place-items: center; }
.lightbox .lb-prev { inset-inline-start: 8px; } .lightbox .lb-next { inset-inline-end: 8px; }
.lightbox .lb-prev svg, .lightbox .lb-next svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .lightbox .lb-prev svg, [dir="rtl"] .lightbox .lb-next svg { transform: scaleX(-1); }
.lightbox.lb-one .lb-prev, .lightbox.lb-one .lb-next { display: none; }
.lightbox .lb-strip { flex: none; display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 10px 16px 14px; scroll-padding-inline: 16px; }
.lightbox .lb-strip::-webkit-scrollbar { display: none; }
.lightbox .lb-strip[hidden] { display: none; }
.lightbox .lb-th { position: relative; flex: none; inset: auto; transform: none; width: 52px; height: 64px; padding: 0; border-radius: 8px;
  overflow: hidden; background: rgba(255,255,255,.08); opacity: .55; outline: 2px solid transparent; outline-offset: -2px; transition: opacity .15s; }
.lightbox .lb-th img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.lightbox .lb-th.on { opacity: 1; outline-color: #fff; }
.lightbox .lb-th:hover { opacity: .9; }
.lightbox .lb-th.locked img { filter: blur(4px); transform: scale(1.1); }
.lightbox .lb-th span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.35); }
.lightbox .lb-th span svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.safe .lightbox .lb-th:not(.locked) img { filter: blur(8px); }
body.safe .lightbox .lb-th.revealed img { filter: none; }
@media (min-width: 768px) {
  .lightbox .lb-th { width: 64px; height: 80px; }
  .lightbox .lb-prev { inset-inline-start: 16px; } .lightbox .lb-next { inset-inline-end: 16px; }
}
@media (max-width: 380px) {
  .lightbox .lb-act { font-size: 13px; padding: 7px 12px; max-width: 62vw; }
}
/* quick-wrap-2026-10-14: the chips row had a hidden scrollbar - a mouse could not reach the last chips. Mouse: wrap.
   Touch: swipe, with a fade on the right edge so the row reads as "more". */
@media (pointer: fine) { .quick { flex-wrap: wrap; overflow: visible; } }
@media (pointer: coarse) { .quick { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 28px; } }
@media (pointer: coarse) { [dir="rtl"] .quick { -webkit-mask-image: linear-gradient(270deg, #000 85%, transparent); mask-image: linear-gradient(270deg, #000 85%, transparent); padding-right: 12px; padding-left: 28px; } }

/* ---------- narrow screens: the rail's labels and the Shorts columns (owner, 2026-10-14: jrgliht.xyz/shua in Russian in
   a narrow desktop window - "Сгенерировать её" broke into two lines and stuck out of the rail, the filter column was cut
   off at the right). A label stays on one line inside its tab (a long word ends in "…"); the Shorts grid shrinks instead
   of overflowing; the filter column shows only where the three columns fit, the tabs above the feed take over below. */
.tabs a { min-width: 0; }
.tabs a > span:not([class]) { display: block; max-width: 100%; padding: 0 3px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
@media (min-width: 1024px) {
  .tabs a { max-width: 100%; box-sizing: border-box; }
  .tabs a > span:not([class]) { font-size: clamp(9px, .72rem, 11px); }
  .feed-wrap { grid-template-columns: minmax(0, 520px) minmax(0, 360px); }
  .feed-wrap > * { min-width: 0; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .feed-wrap:not(.one-girl) { grid-template-columns: minmax(0, 520px) minmax(0, 360px); }
  .feed-wrap:not(.one-girl) .feed-tabs { display: flex; }
  .feed-wrap .feed-left { display: none; }
}
@media (min-width: 1280px) {
  .feed-wrap:not(.one-girl) { grid-template-columns: minmax(0, 200px) minmax(0, 520px) minmax(0, 360px); }
  .feed-left > button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* The Shorts tabs stay on one line in every language (owner, 2026-10-14: "Для тебя" wrapped on jrgliht.xyz/shua): a box
   centred with left: 50% is only as wide as the other half of the screen unless it is told its own width. */
.feed-tabs { width: max-content; max-width: calc(100% - 24px); }
.feed-tabs button { white-space: nowrap; }
@media (max-width: 380px) { .feed-tabs button { padding: 8px 14px; } }
/* ====================================================================================================================
   sexynudecam.top (Sexy Nude Cam AI): an AI cam show with the honesty on the marquee. Black cherry (#12070f) with warm paper
   (#fdf1e6) for what is read, hot rose (#ff4f8b) for the actions, marquee gold (#ffb43b) for the bulbs, and four stage colours
   as the only other hues - rose (Velvet), amber (Pole), lilac (Boudoir), ice (After Hours). The one bold device is the
   curtain: two velvet drapes part once on load on tonight's act under a spotlight beam; elsewhere a string of marquee bulbs
   runs along an edge (CSS dots), and every performer wears an unlit "AI, not live" bulb. Limelight (wordmark, headings, stage
   names) and Kumbh Sans (the interface). Mobile first.
   ==================================================================================================================== */
.v-velvet  { --vc: #ff4f8b; --vi: #2c0618; }
.v-pole    { --vc: #ffb43b; --vi: #2f1c00; }
.v-boudoir { --vc: #c9a6ff; --vi: #220b4a; }
.v-after   { --vc: #4fd0e6; --vi: #032b34; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
body { background: radial-gradient(900px 480px at 50% -220px, rgba(255, 79, 139, .18), transparent 70%) no-repeat,
       radial-gradient(520px 320px at 100% 8%, rgba(255, 180, 59, .07), transparent 70%) no-repeat, var(--bg); }
.sn-wrap { max-width: 1240px; margin: 0 auto; }
.sn-hero h1, .sn-h2, .sn-hub-top h1, .sn-page-top h1, .sn-pf-id h1, .sn-shop-top h1, .sn-blk > h2, .sn-prose h2, .sn-file h2, .sn-about h1,
.sn-act-n, .sn-card-n, .sn-brand-t, .sn-stg b, .sn-pass b, .sn-plan h3 {
  font-family: var(--display); font-weight: 400; letter-spacing: .005em; color: var(--fg); }
.sn-prose.sn-paper h2, .sn-prose.sn-paper h1 { color: var(--ink); }

/* buttons and links */
.sn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border: 0; border-radius: 12px;
  background: var(--grad); color: #fff; font: 700 15px var(--sans); cursor: pointer; text-align: center;
  box-shadow: 0 8px 26px rgba(232, 51, 110, .35), inset 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .15s ease, box-shadow .15s ease; }
.sn-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(232, 51, 110, .5), inset 0 0 0 1px rgba(255, 255, 255, .2); }
.sn-btn:active { transform: scale(.98); }
.sn-btn.sn-ghost { background: transparent; color: var(--fg); box-shadow: none; border: 1.5px solid var(--line2); }
.sn-btn.sn-ghost:hover { background: rgba(255, 255, 255, .05); border-color: var(--gold); }
.sn-btn.sn-sm { min-height: 36px; padding: 0 16px; font-size: 13px; border-radius: 10px; }
.sn-btn.sn-wide { width: 100%; }
.sn-more { color: var(--gold); font-size: 14px; font-weight: 700; white-space: nowrap; }
.sn-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.sn-more-static { color: var(--mut); font-size: 14px; }
.sn-row { margin: 18px 0 0; }
.sn-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* the stage-lamp mark */
.sn-mark { width: 30px; height: 30px; stroke: var(--gold); stroke-width: 1.8; fill: none; flex: none; }
.sn-mark circle { fill: var(--gold); stroke: none; }
.sn-mark-lg { width: 54px; height: 54px; }

/* the bulbs: lit gold, unlit grey; the honesty lamp is the unlit one */
.sn-bulb { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #6b5560; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); flex: none; }
.sn-bulb.on { background: var(--gold); box-shadow: 0 0 10px 2px rgba(255, 180, 59, .65); }
.sn-ai { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line2); color: #e6d4dc; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sn-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--vc, var(--mut)); flex: none; }
.sn-dot-lg { width: 14px; height: 14px; margin-right: 4px; }
.sn-stage-chip { position: absolute; bottom: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 6px;
  background: var(--vc); color: var(--vi); font-size: 12px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.sn-stage-chip .sn-dot { background: var(--vi); width: 7px; height: 7px; }
.sn-page-tag .sn-stage-chip { position: static; background: var(--gold); color: #2f1c00; }

/* a string of marquee bulbs along an edge (decorative, CSS only) */
.sn-bulbs, .sn-top::after, .sn-gate-bulbs, .sn-card::before {
  content: ""; display: block; height: 10px;
  background: radial-gradient(circle at 50% 50%, #ffd27a 0 2.6px, rgba(255, 180, 59, .22) 3px 5px, transparent 5.5px) 0 0 / 22px 10px repeat-x; }
@media (prefers-reduced-motion: no-preference) {
  .sn-bulbs, .sn-top::after, .sn-gate-bulbs, .sn-card::before { animation: sn-twinkle 2.4s steps(2, jump-none) infinite; }
  @keyframes sn-twinkle { 0% { opacity: 1; } 50% { opacity: .55; } 100% { opacity: 1; } }
}

/* ---------- top bar ---------- */
.sn-top { position: sticky; top: 0; z-index: 30; background: rgba(18, 7, 15, .9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.sn-top::after { position: absolute; left: 0; right: 0; bottom: -10px; pointer-events: none; opacity: .8; }
.sn-top-in { display: flex; align-items: center; gap: 18px; min-height: 60px; padding: 0 12px; max-width: 1400px; margin: 0 auto; }
.sn-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); flex: none; }
.sn-brand-t { font-size: 21px; line-height: 1; letter-spacing: .01em; }
.sn-brand-t b { font-weight: 400; color: var(--accent); }
.sn-brand-t i { font-style: normal; font-size: .52em; margin-left: 5px; padding: 2px 5px; border-radius: 4px; background: var(--gold); color: #2f1c00; vertical-align: .55em; font-family: var(--sans); font-weight: 800; }
.sn-menu { display: none; gap: 2px; align-self: stretch; }
.sn-menu a { position: relative; display: flex; align-items: center; padding: 0 14px; color: var(--mut); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.sn-menu a:hover { color: var(--fg); }
.sn-menu a.on { color: var(--fg); }
.sn-menu a.on::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px 2px rgba(255, 180, 59, .6); }
.sn-acct { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sn-ai-note { display: none; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--line2); border-radius: 999px; color: var(--mut); font-size: 12.5px; white-space: nowrap; }
.sn-ai-note:hover { color: var(--fg); border-color: var(--gold); }
.sn-pill { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 13px; border-radius: 999px; background: var(--bg3); color: var(--fg); font-size: 13px; font-weight: 700; }
.sn-pill .coin { color: var(--gold); }
.sn-pill-go { background: var(--grad); color: #fff; }
.sn-me { width: 34px; padding: 0; justify-content: center; }
.sn-me svg { width: 18px; height: 18px; }
.sn-login { color: var(--mut); font-size: 14px; padding: 6px 4px; }
.sn-acct .sn-btn { white-space: nowrap; }
.sn-top .lang-head summary { color: var(--mut); }
@media (max-width: 420px) { .sn-acct .sn-sm { padding: 0 12px; font-size: 12px; } .sn-acct { gap: 6px; } .sn-login { display: none; } .sn-brand-t { font-size: 18px; } }
@media (min-width: 1024px) {
  .sn-menu { display: flex; }
  .sn-top-in { padding: 0 28px; }
  /* the top bar carries the menu: no side rail */
  body:not(.bare) .sn-tabs { display: none; }
  body:not(.bare):not(.adminpage) { padding-left: 0; }
  body:not(.bare) .page { max-width: none; }
}
@media (min-width: 1280px) { .sn-ai-note { display: inline-flex; } }

/* bottom tabs on phones */
.sn-tabs { background: rgba(18, 7, 15, .96); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.sn-tabs a.on { color: var(--fg); }
.sn-tabs a.on svg { stroke: var(--gold); }
.sn-tabs .tab-create svg { width: 46px; height: 46px; padding: 11px; border-radius: 14px; background: var(--grad); stroke: #fff; margin-top: -14px;
  box-shadow: 0 0 0 4px var(--bg), 0 8px 20px rgba(232, 51, 110, .45); }

/* ---------- sections ---------- */
.sn-sec { margin: 58px 0 0; }
.sn-sec-tight { margin-top: 22px; }
.sn-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.sn-h2 { font-size: 28px; line-height: 1.12; margin: 0; }
.sn-sub { color: var(--mut); margin: 8px 0 18px; max-width: 62ch; }
.sn-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; color: var(--gold); font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sn-lead { color: color-mix(in srgb, var(--fg) 90%, var(--bg)); font: 400 17.5px/1.6 var(--sans); margin: 16px 0 0; max-width: 62ch; }
.sn-crumbs { margin: 16px 0 6px; color: var(--dim); font-size: 13px; }
.sn-crumbs a:hover { color: var(--fg); }

/* ---------- home hero + the curtain ---------- */
.sn-hero { display: grid; gap: 26px; padding-top: 22px; }
.sn-hero h1 { font-size: 34px; line-height: 1.1; margin: 0; }
.sn-truth { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 20px 0 0; }
.sn-truth li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .04); font-size: 13.5px; font-weight: 700; }
.sn-facts { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--mut); font-size: 13.5px; }
.sn-facts li::before { content: "·"; color: var(--gold); margin-right: 7px; }
.sn-curtain { position: relative; isolation: isolate; border-radius: 18px 18px 14px 14px; padding: 26px 18px 18px; background: linear-gradient(180deg, #2a0f20, #170813 70%); overflow: hidden;
  border: 1px solid var(--line2); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.sn-curtain::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 12px; z-index: 3; background: radial-gradient(circle at 50% 50%, #ffd27a 0 2.6px, rgba(255, 180, 59, .22) 3px 5px, transparent 5.5px) 0 0 / 22px 12px repeat-x; }
.sn-drape { position: absolute; top: 0; bottom: 0; width: 56%; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(90deg, #7a1230 0 14px, #4a0a1d 14px 22px, #8d1a3b 22px 30px, #3c0817 30px 36px);
  box-shadow: inset 0 -80px 80px rgba(0, 0, 0, .35); }
.sn-drape-l { left: 0; border-radius: 0 0 60% 0 / 0 0 22% 0; transform: translateX(-80%); }
.sn-drape-r { right: 0; border-radius: 0 0 0 60% / 0 0 0 22%; transform: translateX(80%); }
.sn-beam { position: absolute; left: 50%; top: 0; width: 120%; height: 100%; margin-left: -60%; z-index: 0; pointer-events: none;
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255, 226, 170, .28), rgba(255, 79, 139, .05) 70%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .sn-drape-l { animation: sn-open-l 1.6s .2s cubic-bezier(.6, .1, .2, 1) backwards; }
  .sn-drape-r { animation: sn-open-r 1.6s .2s cubic-bezier(.6, .1, .2, 1) backwards; }
  .sn-act { animation: sn-rise .9s .9s ease-out backwards; }
  @keyframes sn-open-l { from { transform: translateX(0); } to { transform: translateX(-80%); } }
  @keyframes sn-open-r { from { transform: translateX(0); } to { transform: translateX(80%); } }
  @keyframes sn-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
.sn-act { position: relative; z-index: 1; display: grid; gap: 16px; justify-items: center; text-align: center; }
.sn-act-pic { display: block; width: min(78%, 330px); border-radius: 999px 999px 16px 16px; overflow: hidden; border: 3px solid var(--gold);
  box-shadow: 0 0 0 5px rgba(255, 180, 59, .18), 0 20px 50px rgba(0, 0, 0, .55); aspect-ratio: 4 / 5; background: var(--bg3); }
.sn-act-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.sn-act-k { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 0; }
.sn-pick { color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.sn-act-n { font-size: 34px; line-height: 1.05; margin: 4px 0 0; }
.sn-act-n span { color: var(--vc); font-size: .6em; margin-left: 4px; }
.sn-act-job { margin: 4px 0 0; color: var(--mut); }
.sn-act-show { display: inline-flex; align-items: center; gap: 7px; margin: 8px 0 0; color: var(--fg); font-weight: 600; font-size: 14px; }
.sn-act-show svg, .sn-card-show svg { width: 16px; height: 16px; stroke: var(--vc); flex: none; }
.sn-act-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0 0; }
.sn-wings { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line2); }
.sn-wings-k { color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sn-wing { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line2); font-size: 13px; }
.sn-wing img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--vc); }
@media (min-width: 900px) {
  .sn-hero { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 44px; padding-top: 36px; }
  .sn-hero h1 { font-size: 46px; }
  .sn-curtain { padding: 34px 28px 22px; }
}

/* ---------- house rules (is / is not) ---------- */
.sn-isnt { display: grid; gap: 14px; }
.sn-is, .sn-not { padding: 20px 22px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.sn-is { border-top: 3px solid var(--gold); }
.sn-not { border-top: 3px solid var(--accent); }
.sn-is h3, .sn-not h3 { font: 800 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; }
.sn-not h3 { color: #ff8db3; }
.sn-isnt ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 9px; color: #e6d4dc; }
.sn-isnt li { position: relative; padding-left: 24px; }
.sn-is li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 800; }
.sn-not li::before { content: "✕"; position: absolute; left: 0; color: #ff8db3; font-weight: 800; }
@media (min-width: 760px) { .sn-isnt { grid-template-columns: 1fr 1fr; } }

/* ---------- stages ---------- */
.sn-stages { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sn-stg { position: relative; overflow: hidden; display: grid; gap: 4px; align-content: start; padding: 18px 16px 16px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); transition: transform .15s ease, border-color .15s ease; }
.sn-stg:hover { transform: translateY(-2px); border-color: var(--vc); }
.sn-cone { position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none; clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, var(--vc), transparent); opacity: .3; }
.sn-stg b { position: relative; font-size: 22px; color: var(--vc); }
.sn-stg small { position: relative; color: var(--mut); font-size: 12.5px; line-height: 1.35; min-height: 34px; }
.sn-faces { display: flex; margin: 8px 0 2px; }
.sn-faces img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--bg2); margin-left: -10px; }
.sn-faces img:first-child { margin-left: 0; }
.sn-stg em { position: relative; font-style: normal; color: var(--dim); font-size: 12.5px; }
@media (min-width: 900px) { .sn-stages { grid-template-columns: repeat(4, 1fr); } }

/* tonight's shows: a rail of slots */
.sn-rail { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 12px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.sn-slot { position: relative; flex: 0 0 168px; scroll-snap-align: start; border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--bg3); border: 1px solid var(--line); }
.sn-slot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.sn-slot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10, 3, 8, .92)); }
.sn-slot-t { position: absolute; left: 10px; right: 10px; bottom: 34px; z-index: 1; display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.3; font-weight: 600; color: #fff; }
.sn-slot-t .sn-dot { margin-top: 4px; }
.sn-slot-w { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; font-size: 14px; color: #fff; }
@media (min-width: 900px) { .sn-slot { flex-basis: 200px; } }

/* how it works: acts */
.sn-acts { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; counter-reset: act; }
.sn-acts li { counter-increment: act; position: relative; padding: 18px 18px 18px 64px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); display: grid; gap: 4px; }
.sn-acts li::before { content: counter(act, upper-roman); position: absolute; left: 16px; top: 14px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: var(--gold); color: #2f1c00; font: 400 17px var(--display); }
.sn-acts b { font-size: 16px; }
.sn-acts span { color: var(--mut); font-size: 14px; }
@media (min-width: 900px) { .sn-acts { grid-template-columns: repeat(4, 1fr); } .sn-acts li { padding: 62px 16px 16px; } .sn-acts li::before { left: 16px; top: 16px; } }

/* ---------- performer cards ---------- */
.sn-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .sn-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .sn-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sn-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, border-color .18s ease; }
.sn-card::before { height: 8px; background-size: 22px 8px; opacity: .85; }
.sn-card:hover { transform: translateY(-3px); border-color: var(--vc); }
.sn-card-pic { position: relative; display: block; margin: 8px 8px 0; border-radius: 999px 999px 12px 12px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--bg3); }
.sn-card-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .4s ease; }
.sn-card:hover .sn-card-pic img { transform: scale(1.04); }
.sn-card-ai { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; background: rgba(18, 7, 15, .8); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.sn-card-cap { padding: 12px 14px 14px; display: grid; gap: 5px; flex: 1; align-content: start; }
.sn-card-n { margin: 0; font-size: 22px; line-height: 1.1; display: flex; align-items: baseline; gap: 8px; }
.sn-card-n span { color: var(--vc); font: 700 15px var(--sans); }
.sn-card-job { margin: 0; color: var(--mut); font-size: 13px; }
.sn-card-show { margin: 2px 0 0; display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; font-weight: 600; color: #f1dfe6; line-height: 1.35; }
.sn-card-show svg { margin-top: 1px; }
.sn-card-line { margin: 2px 0 0; color: var(--dim); font-size: 13px; font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sn-card-foot { margin: 8px 0 0; display: grid; gap: 8px; }
.sn-card-go { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 10px; border-radius: 10px; background: var(--grad); color: #fff; font-size: 13.5px; font-weight: 700; text-align: center; }
.sn-heat { display: inline-flex; gap: 4px; }
.sn-heat i { width: 8px; height: 8px; border-radius: 50%; background: #4d3544; }
.sn-heat i.on { background: var(--gold); box-shadow: 0 0 6px rgba(255, 180, 59, .7); }

/* ---------- landing / hub tops ---------- */
.sn-hub-top, .sn-page-top { position: relative; margin-top: 8px; padding: 26px 0 8px; }
.sn-page-top { padding: 30px 22px 24px; border-radius: 16px; background: linear-gradient(180deg, #2a0f20, rgba(23, 8, 19, .6)); border: 1px solid var(--line2); }
.sn-page-top .sn-bulbs { position: absolute; left: 0; right: 0; top: 0; height: 10px; }
.sn-hub-top h1, .sn-page-top h1 { font-size: 32px; line-height: 1.12; margin: 14px 0 0; }
.sn-page-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; }
.sn-plain { margin: 22px 0 0; padding: 12px 16px; border-left: 4px solid var(--gold); background: rgba(255, 180, 59, .09); border-radius: 0 10px 10px 0; color: #f4e3d6; font-size: 14.5px; }
.sn-plain b { color: var(--gold); }
.sn-note { margin: 16px 0 0; color: var(--mut); font-size: 13.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
@media (min-width: 900px) { .sn-hub-top h1, .sn-page-top h1 { font-size: 44px; } .sn-page-top { padding: 40px 40px 30px; } }

.sn-filter { display: flex; gap: 8px; overflow-x: auto; padding: 18px 0 4px; scrollbar-width: none; }
.sn-filter::-webkit-scrollbar { display: none; }
.sn-filter a { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 8px 15px; border-radius: 8px; border: 1px solid var(--line2); color: var(--mut); font-size: 14px; font-weight: 700; }
.sn-filter a sup { color: var(--dim); font-size: 11px; }
.sn-filter a.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.sn-filter a.on sup { color: #6d4a5c; }
.sn-course .sn-h2 { display: flex; align-items: center; color: var(--vc); }
.sn-make { display: grid; gap: 16px; padding: 26px; border-radius: 16px; background: linear-gradient(135deg, #3a1229, #1f0c19); border: 1px solid var(--line2); align-items: center; }
.sn-make p { color: var(--mut); margin: 8px 0 0; }
@media (min-width: 760px) { .sn-make { grid-template-columns: 1fr auto; } }

/* photo wall */
.sn-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (min-width: 720px) { .sn-wall { grid-template-columns: repeat(6, 1fr); gap: 8px; } }
.sn-ph { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--bg3); }
.sn-ph img { width: 100%; height: 100%; object-fit: cover; }
.sn-ph .lock { position: absolute; left: 6px; right: 6px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 8px; background: rgba(18, 7, 15, .66); backdrop-filter: blur(3px); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.sn-ph .lock svg { width: 18px; height: 18px; }
.sn-ph-name { position: absolute; left: 8px; bottom: 6px; color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }

/* sample chat */
.sn-sample { display: grid; gap: 20px; padding: 24px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--line); }
.sn-sample p { color: var(--mut); }
.sn-thread { display: grid; gap: 8px; align-content: start; }
.sn-msg { margin: 0; padding: 10px 14px; border-radius: 14px; max-width: 88%; font-size: 14.5px; line-height: 1.45; }
.sn-msg.her { background: #3a1229; border-bottom-left-radius: 4px; justify-self: start; }
.sn-msg.me { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; justify-self: end; }
@media (min-width: 900px) { .sn-sample { grid-template-columns: .9fr 1.1fr; align-items: center; padding: 32px; } }

/* topics (the ten landings) */
.sn-topics ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sn-topics a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.sn-topics a:hover { border-color: var(--vc); }

/* prose on paper */
.sn-prose { max-width: 78ch; }
.sn-prose h2 { font-size: 26px; margin: 28px 0 10px; line-height: 1.15; }
.sn-prose h2:first-child { margin-top: 0; }
.sn-prose p, .sn-prose li { color: #dcc8d1; line-height: 1.7; }
.sn-prose.sn-paper { max-width: none; padding: 28px 22px; border-radius: 16px; background: var(--paper); color: var(--ink); }
.sn-prose.sn-paper p, .sn-prose.sn-paper li { color: #45303b; }
.sn-prose.sn-paper a { color: #b3195a; text-decoration: underline; }
.sn-prose.sn-paper .sn-lead { color: #2a1020; }
.sn-prose.sn-paper .sn-btn { color: #fff; text-decoration: none; }
@media (min-width: 900px) { .sn-prose.sn-paper { padding: 44px 56px; } .sn-prose.sn-paper > * { max-width: 78ch; } }

/* faq */
.sn-faq { display: grid; gap: 8px; max-width: 860px; }
.sn-faq details { border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.sn-faq summary { cursor: pointer; padding: 15px 18px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.sn-faq summary::-webkit-details-marker { display: none; }
.sn-faq summary::after { content: "+"; color: var(--gold); font-size: 20px; line-height: 1; }
.sn-faq details[open] summary::after { content: "−"; }
.sn-faq p { margin: 0; padding: 0 18px 16px; color: var(--mut); }

/* membership pass */
.sn-member { display: grid; gap: 22px; padding: 26px; border-radius: 16px; background: linear-gradient(135deg, #3a1229, #1a0a16); border: 1px solid var(--line2); align-items: center; }
.sn-member-slim { padding: 22px; }
.sn-pass { position: relative; justify-self: start; width: min(100%, 320px); aspect-ratio: 1.62; border-radius: 16px; padding: 18px 20px; display: grid; align-content: space-between; color: #2a1020;
  background: linear-gradient(135deg, #ffe3a8, #ffb43b 55%, #e58a1d); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); transform: rotate(-2.5deg); }
.sn-pass::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: radial-gradient(circle at 50% 50%, #fff6d8 0 2.4px, transparent 3px) 0 0 / 18px 8px repeat-x; }
.sn-pass b { font-size: 24px; color: #2a1020; }
.sn-pass b i { font-style: normal; color: #b3195a; }
.sn-pass small { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
.sn-pass-t { font-weight: 800; font-size: 13px; }
.sn-pass-bar { display: flex; gap: 6px; }
.sn-pass-bar i { flex: 1; height: 8px; border-radius: 4px; background: var(--vc); }
.sn-pass-lg { width: min(100%, 360px); }
.sn-steps { list-style: none; counter-reset: st; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.sn-steps li { counter-increment: st; display: grid; gap: 2px; padding-left: 40px; position: relative; }
.sn-steps li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: #2f1c00; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.sn-steps span { color: var(--mut); font-size: 14px; }
.sn-steps-row { grid-template-columns: 1fr; margin: 26px 0; }
@media (min-width: 760px) { .sn-member { grid-template-columns: 340px 1fr; padding: 36px; gap: 40px; } .sn-steps-row { grid-template-columns: repeat(3, 1fr); } }

/* ---------- performer page ---------- */
.sn-pf-hero { display: grid; gap: 22px; padding-top: 6px; }
.sn-pf-art { display: grid; gap: 10px; align-content: start; }
.sn-frame { position: relative; display: block; border-radius: 999px 999px 18px 18px; overflow: hidden; border: 3px solid var(--vc); box-shadow: 0 0 0 6px rgba(255, 255, 255, .04), 0 24px 50px rgba(0, 0, 0, .5); aspect-ratio: 4 / 5; background: var(--bg3); }
.sn-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.sn-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sn-strip a { display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--bg3); }
.sn-strip img { width: 100%; height: 100%; object-fit: cover; }
.sn-strip-more { display: grid !important; place-items: center; text-align: center; padding: 6px; border: 1px dashed var(--line2); color: var(--gold); font-size: 12px; font-weight: 700; }
.sn-pf-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.sn-status { display: inline-flex; align-items: center; gap: 7px; color: var(--mut); font-size: 12.5px; }
.sn-on { width: 8px; height: 8px; border-radius: 50%; background: #6b5560; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); } /* never a lit "online" dot: nothing here is live */
.sn-pf-id h1 { font-size: 40px; line-height: 1.05; margin: 0; }
.sn-pf-id h1 span { color: var(--vc); font-size: .55em; margin-left: 6px; }
.sn-pf-job { margin: 6px 0 0; color: var(--mut); font-size: 15px; }
.sn-says { margin: 16px 0 0; padding: 0 0 0 16px; border-left: 3px solid var(--vc); font: italic 400 18px/1.45 var(--sans); color: #f4e3d6; }
.sn-show-card { margin-top: 20px; padding: 16px 18px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); display: grid; gap: 10px; }
.sn-show-k { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mut); }
.sn-show-k svg { width: 18px; height: 18px; stroke: var(--vc); }
.sn-show-k b { color: var(--fg); }
.sn-show-met { margin: 0; color: #dcc8d1; font-size: 14.5px; line-height: 1.55; }
.sn-show-first { margin: 0; display: grid; gap: 6px; }
.sn-show-who { color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sn-show-line { padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: #3a1229; font-size: 14.5px; line-height: 1.5; }
.sn-pf-fine { margin: 12px 0 0; color: var(--dim); font-size: 13px; }
.sn-float { position: fixed; left: 16px; right: 16px; bottom: calc(var(--tabs-h) + 12px + env(safe-area-inset-bottom)); z-index: 25; }
.sn-nb { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.sn-nb a { display: grid; gap: 2px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); font-weight: 700; }
.sn-nb small { color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sn-nb-next { text-align: right; margin-left: auto; }
.sn-pf-body { display: grid; gap: 28px; margin-top: 34px; }
.sn-file { align-self: start; padding: 20px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.sn-file h2 { font-size: 22px; margin: 0 0 12px; }
.sn-file dl { margin: 0; display: grid; gap: 4px; }
.sn-file dt { margin-top: 8px; color: var(--dim); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sn-file dd { margin: 0; color: #f1dfe6; font-size: 14.5px; }
.sn-file dd small { display: block; color: var(--dim); }
.sn-file .sn-dot { margin-right: 6px; }
.sn-blk { margin: 0 0 32px; }
.sn-blk > h2 { font-size: 26px; margin: 0 0 12px; }
.sn-paper.sn-blk { padding: 22px; border-radius: 14px; background: var(--paper); }
.sn-paper.sn-blk h2 { color: var(--ink); }
.sn-paper.sn-blk p { color: #45303b; }
.sn-drop { font-size: 17px; line-height: 1.65; }
.sn-lines { display: flex; flex-wrap: wrap; gap: 8px; }
.sn-lines a { padding: 9px 15px; border-radius: 14px 14px 14px 4px; background: #3a1229; font-size: 14px; }
.sn-lines a:hover { background: var(--accent); }
.sn-setlist .sn-sub { margin-top: 0; }
.sn-acts-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sn-acts-list li { display: grid; gap: 6px; }
.sn-acts-list a { display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--bg3); border: 1px solid var(--line2); }
.sn-acts-list img { width: 100%; height: 100%; object-fit: cover; }
.sn-acts-list b { font-size: 13.5px; }
.sn-finale a { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #2a1021 0 10px, #35162a 10px 20px); border-style: dashed; }
.sn-finale .lock { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--gold); color: #2f1c00; }
.sn-finale .lock svg { width: 24px; height: 24px; }
.sn-ml { margin-top: 12px; }
.sn-ml-btn { width: 100%; }
.sn-wide { width: 100%; margin-top: 12px; }
@media (min-width: 700px) { .sn-acts-list { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) {
  .sn-pf-hero { grid-template-columns: 420px 1fr; gap: 48px; }
  .sn-pf-body { grid-template-columns: 300px 1fr; gap: 44px; }
  .sn-pf-id h1 { font-size: 54px; }
  .sn-float { display: none !important; }
}
.sn-sh .sn-h2 { font-size: 24px; }

/* ---------- shop ---------- */
.sn-shop-top { display: grid; gap: 22px; align-items: center; }
.sn-shop-top h1 { font-size: 34px; line-height: 1.1; margin: 0; }
.sn-bal { margin: 14px 0 0; color: var(--mut); }
.sn-deal { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(255, 180, 59, .12); border: 1px solid rgba(255, 180, 59, .4); }
.sn-plans { display: grid; gap: 14px; }
.sn-plan { position: relative; padding: 22px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.sn-plan.best { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 14px 40px rgba(255, 180, 59, .12); }
.sn-flag { position: absolute; top: -12px; right: 18px; padding: 4px 12px; border-radius: 6px; background: var(--gold); color: #2f1c00; font-size: 12px; font-weight: 800; }
.sn-plan h3 { font-size: 24px; margin: 0; }
.sn-plan h3 span { font: 600 14px var(--sans); color: var(--mut); margin-left: 6px; }
.sn-price { font: 400 34px var(--display); }
.sn-price small { font: 600 14px var(--sans); color: var(--mut); }
.sn-per { margin: 0; color: var(--mut); font-size: 13.5px; }
.sn-plan ul { list-style: none; padding: 0; margin: 8px 0 14px; display: grid; gap: 7px; flex: 1; }
.sn-plan li { padding-left: 22px; position: relative; font-size: 14px; }
.sn-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 800; }
@media (min-width: 760px) { .sn-plans { grid-template-columns: repeat(3, 1fr); } .sn-shop-top { grid-template-columns: 360px 1fr; gap: 44px; } }
.sn-vs { border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
.sn-vs > div { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 6px; padding: 11px 14px; font-size: 13.5px; border-top: 1px solid var(--line); }
.sn-vs > div:first-child { border-top: 0; }
.sn-vs-h { background: var(--bg3); font-weight: 800; }
.sn-vs .y { color: var(--gold); font-weight: 700; }
.sn-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 760px) { .sn-packs { grid-template-columns: repeat(4, 1fr); } }
.sn-pack { display: grid; gap: 6px; padding: 16px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); color: var(--fg); text-align: left; cursor: pointer; font: inherit; }
.sn-pack:hover { border-color: var(--gold); }
.sn-pack b { font: 400 28px var(--display); margin-right: 6px; }
.sn-pack i { font-style: normal; color: var(--gold); font-size: 12.5px; font-weight: 700; }
.sn-pack-price { color: var(--mut); font-size: 14px; }
.sn-buy { display: grid; gap: 28px; }
@media (min-width: 760px) { .sn-buy { grid-template-columns: 1fr 1fr; } }
.sn-uses { display: grid; gap: 6px; }
.sn-uses div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); font-size: 14px; }
.sn-uses b { color: var(--gold); }
.sn-fine { color: var(--mut); font-size: 13.5px; margin: 10px 0 0; }

/* ---------- footer ---------- */
.sn-foot { margin-top: 70px; padding: 28px 12px 40px; background: #0b0409; border-top: 1px solid var(--line); }
.sn-foot-honest { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; color: #dcc8d1; font-size: 14px; }
.sn-explore { margin-bottom: 26px; }
.sn-explore-h { display: block; margin-bottom: 10px; color: var(--gold); font: 800 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.sn-explore ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sn-explore a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--line2); font-size: 13px; color: #e6d4dc; }
.sn-explore a:hover { border-color: var(--vc); }
.sn-foot-cols { display: grid; gap: 26px; }
.sn-foot-cols nav { display: grid; gap: 9px; align-content: start; font-size: 14px; color: var(--mut); }
.sn-foot-cols nav b { color: var(--fg); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.sn-foot-cols nav a:hover { color: var(--fg); }
.sn-foot-cols nav .sn-dot { margin-right: 8px; }
.sn-foot-brand p { color: var(--mut); font-size: 13.5px; max-width: 46ch; }
.sn-foot-pay { display: flex; gap: 8px; align-items: center; }
.sn-foot-pay span { color: var(--gold); font-weight: 800; }
.sn-foot-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12.5px; }
@media (min-width: 760px) { .sn-foot-cols { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1024px) { .sn-foot { padding-inline: 28px; } .sn-wrap { padding: 0 4px; } }

/* ---------- age gate ---------- */
.sn-gate-card { position: relative; overflow: hidden; background: linear-gradient(180deg, #3a1229, #1a0a16 60%); border: 1px solid var(--line2); border-radius: 18px; }
.sn-gate-bulbs { position: absolute; left: 0; right: 0; top: 0; }
.sn-gate-top { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 10px; }
.sn-gate-title { font: 400 24px var(--display); }
.sn-gate-title i { font-style: normal; color: var(--accent); }
.sn-gate-18 { padding: 3px 9px; border-radius: 6px; background: var(--gold); color: #2f1c00; font-weight: 800; font-size: 13px; }

/* the original site's pieces reused by this one */
.sn-prose a { color: var(--gold); }
@media (min-width: 900px) { .sn-h2 { font-size: 34px; } .sn-sh .sn-h2 { font-size: 28px; } }