/* dsjx.cc (都市姐系): its own copy of the engine's stylesheet (docs/plans/2026-10-09-multisite-design.md 2.3) on the light
   "night metro" tokens of docs/plans/2026-10-13-dsjx-seo.md section 8: wall tiles, navy signs, white nameplates, three
   line colours; system faces only (Google Fonts does not load in mainland China); the site's own dj- section at the end.
   Mobile first: the phone layout is the base, wider screens add more columns. */
:root {
  --bg: #e9ece8; --bg2: #ffffff; --bg3: #dde2e1; --line: #c8cfd1; --line2: #aeb7bb;
  --fg: #14213d; --mut: #4e586d; --dim: #7b8496;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 6px; --tabs-h: 64px;
  --grad: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
  color-scheme: light;
}
* { 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(--sans); 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 { 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); }

/* ====================================================================================================================
   dsjx.cc (都市姐系): the night metro line. A light concourse of wall tiles, navy station signs, white nameplates and
   three line colours (M1 制服线 amber, M2 御姐线 plum, M3 晚风线 teal). The one bold device is the route map: every
   heroine is a station on a coloured track. Station codes and numbers in the system's DIN face (Bahnschrift on Windows,
   DIN Alternate on Apple), everything else in the CJK sans. No web fonts (blocked in mainland China).
   ==================================================================================================================== */
:root {
  --navy: #14213d; --navy2: #1f3260; --tile: #e9ece8; --plate: #ffffff;
  --l1: #f2a900; --l2: #a2266f; --l3: #00897b;
  --din: Bahnschrift, "DIN Alternate", "DIN Condensed", "Roboto Condensed", "Arial Narrow", var(--sans);
}
.l-zhifu { --lc: var(--l1); --lc-ink: var(--navy); }
.l-yujie { --lc: var(--l2); --lc-ink: #fff; }
.l-yese  { --lc: var(--l3); --lc-ink: #fff; }
body {
  background-color: var(--tile);
  background-image: linear-gradient(rgba(20, 33, 61, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 33, 61, .05) 1px, transparent 1px);
  background-size: 48px 24px;
}
body.bare, body.feedmode { background-image: none; }
:focus-visible { outline: 3px solid var(--l1); outline-offset: 2px; }
.dj-wrap { max-width: 1240px; margin: 0 auto; }

/* buttons */
.dj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0;
  border-radius: 4px; background: var(--l2); color: #fff; font: 700 15px var(--sans); cursor: pointer; letter-spacing: .02em; }
.dj-btn:hover { background: #8a1d5e; }
.dj-btn:active { transform: translateY(1px); }
.dj-ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.dj-ghost:hover { background: var(--navy); color: #fff; }
.dj-btn-amber { background: var(--l1); color: var(--navy); }
.dj-btn-amber:hover { background: #ffbe1f; }
.dj-sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.dj-wide { width: 100%; }
.dj-more { color: var(--l2); font-weight: 700; font-size: 14px; border-bottom: 2px solid currentColor; }
.dj-more-static { color: var(--mut); font: 600 13px var(--din); }
.dj-row { margin: 16px 0 0; }
.dj-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }

/* the station code: a block in the line's colour */
.dj-code { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 3px 7px; border-radius: 3px;
  background: var(--lc, var(--navy)); color: var(--lc-ink, #fff); font: 700 13px/1.2 var(--din); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.dj-code-lg { min-width: 72px; padding: 8px 10px; font-size: 22px; }
.dj-line-code { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 26px; border-radius: 13px;
  background: var(--lc); color: var(--lc-ink); font: 700 14px var(--din); }
.dj-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--lc, var(--navy)); margin-right: 6px; vertical-align: 1px; }

/* the line badge (logo) and the three-line rail */
.dj-badge { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 4px solid var(--l2);
  background: var(--navy); color: #fff; font: 900 16px/1 var(--sans); flex: none; }
.dj-rail { display: flex; height: 4px; }
.dj-rail i { flex: 1; background: var(--lc); }
.dj-rail .l-zhifu, .dj-rail .l-yujie, .dj-rail .l-yese { display: block; }

/* ---------- top bar: a station sign ---------- */
.dj-top { position: sticky; top: 0; z-index: 30; background: var(--navy); color: #fff; }
.dj-top-in { display: flex; align-items: center; gap: 18px; min-height: 58px; padding: 0 12px; max-width: 1400px; margin: 0 auto; }
.dj-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.dj-brand-t { display: flex; flex-direction: column; line-height: 1.05; }
.dj-brand-t b { font: 800 18px var(--sans); letter-spacing: .12em; }
.dj-brand-t small { font: 700 11px var(--din); letter-spacing: .32em; color: var(--l1); margin-top: 3px; }
.dj-menu { display: none; gap: 2px; }
.dj-menu a { padding: 8px 12px; color: rgba(255, 255, 255, .78); font-size: 15px; font-weight: 600; border-bottom: 3px solid transparent; }
.dj-menu a:hover { color: #fff; }
.dj-menu a.on { color: #fff; border-bottom-color: var(--l1); }
.dj-acct { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.dj-usdt { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .28);
  font: 700 12px var(--din); letter-spacing: .06em; color: #fff; }
.dj-t { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--l3); color: #fff; font: 700 11px var(--din); }
.dj-pill { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border-radius: 3px; background: rgba(255, 255, 255, .12);
  color: #fff; font: 700 13px var(--din); }
.dj-pill-pass { background: var(--l1); color: var(--navy); font-family: var(--sans); }
.dj-pill .coin { color: var(--l1); }
.dj-me svg { width: 18px; height: 18px; }
.dj-login { display: none; color: rgba(255, 255, 255, .85); font-size: 14px; padding: 0 6px; }
.dj-top .lang-head summary { color: #fff; }
body.bare .dj-top, body.feedmode .dj-top { display: none; }
@media (max-width: 420px) {
  .dj-usdt { font-size: 0; gap: 0; padding: 4px; border: 0; }
  .dj-brand-t b { font-size: 16px; letter-spacing: .06em; }
  .dj-top-in { gap: 8px; }
}

/* bottom tabs: the concourse floor strip */
.dj-tabs { background: var(--navy); border-top: 0; }
.dj-tabs a { color: rgba(255, 255, 255, .62); }
.dj-tabs a.on { color: #fff; }
.dj-tabs a.on svg { stroke: var(--l1); }
.dj-tabs .tab-create svg { width: 38px; height: 38px; padding: 7px; border-radius: 50%; background: var(--navy); border: 4px solid var(--l2); stroke: #fff; margin-top: -6px; }

/* ---------- sections, headings, text ---------- */
.dj-sec { margin: 40px 0 0; }
.dj-sec-tight { margin-top: 18px; }
.dj-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dj-h2 { font: 800 21px/1.3 var(--sans); color: var(--navy); display: flex; align-items: center; gap: 10px; }
.dj-lead { font-size: 16px; line-height: 1.85; color: var(--mut); max-width: 40em; margin: 12px 0 0; }
.dj-sub { color: var(--mut); line-height: 1.8; margin: 8px 0 0; }
.dj-crumbs { padding: 14px 0 0; font-size: 13px; color: var(--dim); }
.dj-crumbs a { color: var(--mut); }
.dj-crumbs a:hover { color: var(--l2); }
.dj-prose { max-width: 42em; }
.dj-prose h2 { font: 800 19px/1.35 var(--sans); color: var(--navy); margin: 30px 0 10px; padding-left: 12px; border-left: 5px solid var(--l2); }
.dj-prose h2:first-child { margin-top: 0; }
.dj-prose p, .dj-prose li { font-size: 16px; line-height: 1.9; color: #2b3650; }
.dj-prose p { margin: 0 0 14px; }
.dj-prose a { color: var(--l2); border-bottom: 1px solid currentColor; }
.empty { color: var(--mut); padding: 24px 0; }

/* ---------- the hero: the platform window, the announcement, the departures ---------- */
.dj-hero { display: grid; gap: 22px; padding: 20px 0 0; }
.dj-hero-art { position: relative; }
.dj-door { position: relative; display: block; border-radius: 6px; overflow: hidden; background: var(--navy); border: 6px solid var(--navy);
  box-shadow: 0 18px 40px rgba(20, 33, 61, .22); }
.dj-door img { height: auto; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 2px; }
.dj-door-empty { aspect-ratio: 4 / 5; }
.dj-door .dj-plate { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 1; }
.dj-train { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--lc, var(--l2)); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .dj-hero .dj-train { animation: dj-arrive 1.6s cubic-bezier(.2, .7, .2, 1) .3s both; }
  @keyframes dj-arrive { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.dj-plate { display: flex; align-items: stretch; background: var(--plate); color: var(--navy); border-radius: 4px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(20, 33, 61, .18); }
.dj-plate .dj-code { border-radius: 0; min-width: 52px; }
.dj-plate-n { display: flex; flex-direction: column; justify-content: center; padding: 5px 10px; min-width: 0; }
.dj-plate-n b { font: 800 17px/1.15 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dj-plate-n small { font: 600 11px/1.2 var(--din); color: var(--mut); letter-spacing: .08em; }
.dj-plate-lg .dj-plate-n b { font-size: 24px; }
.dj-plate-lg .dj-plate-n small { font-size: 13px; }
.dj-plate-lg .dj-code { min-width: 66px; font-size: 18px; }

.dj-pa { display: grid; gap: 6px; margin: 14px 0 0; padding: 14px 16px; border-radius: 4px; background: var(--navy); color: #fff;
  box-shadow: 0 12px 30px rgba(20, 33, 61, .25); }
.dj-pa-who { display: flex; align-items: center; gap: 6px; color: var(--l1); font-size: 13px; font-weight: 700; }
.dj-pa-who svg { width: 18px; height: 18px; }
.dj-pa-line { font-size: 15px; line-height: 1.7; }
.dj-pa-go { justify-self: start; color: var(--l1); font-weight: 700; font-size: 14px; border-bottom: 2px solid var(--l1); }
.dj-pa-static { margin: 16px 0 0; }

.dj-hero-text h1 { font: 900 30px/1.25 var(--sans); color: var(--navy); }
.dj-departures { margin: 22px 0 0; border-radius: 4px; background: var(--navy); color: #fff; padding: 12px 14px 6px; }
.dj-departures h2 { font: 700 13px var(--sans); color: var(--l1); margin: 0 0 6px; letter-spacing: .1em; }
.dj-departures ol { list-style: none; margin: 0; padding: 0; }
.dj-departures li + li { border-top: 1px solid rgba(255, 255, 255, .12); }
.dj-departures a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; }
.dj-dep-n { display: flex; flex-direction: column; min-width: 0; }
.dj-dep-n b { font-size: 15px; }
.dj-dep-n small { color: rgba(255, 255, 255, .6); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dj-dep-t { font: 700 16px var(--din); color: var(--l1); font-variant-numeric: tabular-nums; }
.dj-departures a:hover b { color: var(--l1); }
.dj-facts { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--mut); font-size: 13px; }
.dj-facts li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--l3); margin-right: 7px; vertical-align: 1px; }

/* ---------- the route map ---------- */
.dj-map { display: grid; gap: 8px; background: var(--plate); border-radius: 6px; padding: 16px 0 6px; box-shadow: 0 1px 0 rgba(20, 33, 61, .08); }
.dj-line { display: grid; gap: 4px; }
.dj-line-h { display: flex; align-items: center; gap: 10px; padding: 0 16px; color: var(--navy); font-weight: 800; font-size: 15px; }
.dj-line-h small { color: var(--dim); font: 600 12px var(--din); font-weight: 600; }
.dj-line-h:hover span:not(.dj-line-code) { color: var(--l2); }
.dj-track { list-style: none; display: flex; margin: 0; padding: 0 16px 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.dj-track li { position: relative; flex: 1 0 104px; scroll-snap-align: start; }
.dj-track li::before { content: ""; position: absolute; top: 12px; left: 0; right: 0; height: 6px; background: var(--lc); }
.dj-track li:first-child::before { left: 50%; }
.dj-track li:last-child::before { right: 50%; }
.dj-track li:only-child::before { display: none; }
.dj-track a { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 4px 4px; color: var(--navy); }
.dj-stop { position: absolute; top: 5px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #fff; border: 5px solid var(--lc); }
.dj-track b { font-size: 15px; font-weight: 800; }
.dj-track small { font: 600 11px var(--din); color: var(--dim); letter-spacing: .06em; }
.dj-track a:hover b { color: var(--l2); }
.dj-track a:hover .dj-stop { background: var(--lc); }
.dj-track li.here .dj-stop { width: 28px; height: 28px; margin-left: -14px; top: 1px; background: var(--lc); border-color: var(--navy); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--lc); }
.dj-map-big .dj-track b { font-size: 17px; }
.dj-map-big .dj-track li { flex-basis: 128px; }

/* ---------- cards: a nameplate over her picture ---------- */
.dj-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dj-card { display: flex; flex-direction: column; background: var(--plate); border-radius: 6px; overflow: hidden; border-top: 5px solid var(--lc, var(--navy));
  box-shadow: 0 1px 0 rgba(20, 33, 61, .1), 0 6px 18px rgba(20, 33, 61, .07); }
.dj-card-pic { position: relative; display: block; }
.dj-card-pic img { height: auto; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.dj-card-pic .dj-plate { position: absolute; left: 8px; right: 8px; bottom: 8px; }
.dj-card-pic .dj-plate .dj-code { min-width: 44px; font-size: 12px; }
.dj-card-pic .dj-plate-n b { font-size: 16px; }
.dj-card-cap { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 0; flex: 1; }
.dj-card-who { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--mut); min-width: 0; }
.dj-age { flex: none; font: 700 12px var(--din); color: var(--navy); }
.dj-job { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dj-card-line { margin: 0; font-size: 14px; line-height: 1.6; color: #2b3650; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dj-board-btn { margin: auto -12px 0; padding: 11px 12px; border-top: 1px dashed var(--line); color: var(--l2); font-weight: 800; font-size: 14px; }
.dj-board-btn:hover { background: var(--l2); color: #fff; border-top-color: var(--l2); }

/* ---------- the pass band: a transit card ---------- */
.dj-pass-band { display: grid; gap: 22px; padding: 22px 18px; border-radius: 6px; background: var(--plate); border-left: 6px solid var(--l3); }
.dj-ic { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1.586; border-radius: 12px; padding: 16px 18px; color: #fff; overflow: hidden;
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy2) 100%); box-shadow: 0 14px 30px rgba(20, 33, 61, .3); display: flex; flex-direction: column; }
.dj-ic::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 8px;
  background: linear-gradient(90deg, var(--l1) 0 33.3%, var(--l2) 33.3% 66.6%, var(--l3) 66.6%); }
.dj-ic-chip { width: 38px; height: 28px; border-radius: 5px; background: linear-gradient(135deg, #e9c46a, #b88a2a); }
.dj-ic b { margin-top: 12px; font: 700 26px var(--din); letter-spacing: .28em; }
.dj-ic small { font-size: 13px; color: rgba(255, 255, 255, .75); }
.dj-ic-t { position: absolute; right: 16px; top: 16px; font: 700 12px var(--din); color: var(--l1); }
.dj-ic-lg { max-width: 340px; }
.dj-steps { list-style: none; counter-reset: s; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.dj-steps li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; }
.dj-steps li::before { content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy); color: var(--l1); font: 700 15px var(--din); }
.dj-steps b { color: var(--navy); font-size: 15px; }
.dj-steps span { color: var(--mut); font-size: 13px; }

/* ---------- what she does ---------- */
.dj-does { display: grid; gap: 10px; }
.dj-does > div { background: var(--plate); border-radius: 4px; padding: 14px 16px; border-top: 4px solid var(--l1); }
.dj-does > div:nth-child(2) { border-top-color: var(--l2); }
.dj-does > div:nth-child(3) { border-top-color: var(--l3); }
.dj-does > div:nth-child(4) { border-top-color: var(--navy); }
.dj-does b { color: var(--navy); font-size: 16px; }
.dj-does p { margin: 6px 0 8px; color: var(--mut); font-size: 14px; line-height: 1.7; }

/* ---------- exits: the topics as lettered station exits ---------- */
.dj-exits { display: flex; flex-wrap: wrap; gap: 8px; }
.dj-exits a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 3px; background: var(--l1); color: var(--navy);
  font-weight: 800; font-size: 14px; }
.dj-exits a:hover { background: var(--navy); color: var(--l1); }
.dj-exit-l { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 2px; background: var(--navy); color: var(--l1); font: 700 15px var(--din); }
.dj-exits a:hover .dj-exit-l { background: var(--l1); color: var(--navy); }

/* ---------- FAQ ---------- */
.dj-faq { display: grid; gap: 8px; max-width: 46em; }
.dj-faq details { background: var(--plate); border-radius: 4px; border-left: 4px solid var(--l2); }
.dj-faq summary { cursor: pointer; padding: 13px 16px; font-weight: 800; color: var(--navy); list-style: none; }
.dj-faq summary::-webkit-details-marker { display: none; }
.dj-faq summary::after { content: "+"; float: right; font: 700 18px/1 var(--din); color: var(--l2); }
.dj-faq details[open] summary::after { content: "−"; }
.dj-faq p { margin: 0; padding: 0 16px 14px; color: #2b3650; line-height: 1.85; }

/* ---------- the catalog ---------- */
.dj-hub-top { padding: 18px 0 0; }
.dj-hub-top h1 { font: 900 28px/1.25 var(--sans); color: var(--navy); }
.dj-filter { display: flex; gap: 8px; overflow-x: auto; margin: 18px -16px 0; padding: 2px 16px 6px; scrollbar-width: none; }
.dj-filter a { flex: none; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 3px; background: var(--plate); color: var(--navy);
  font-weight: 700; font-size: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.dj-filter a sup { margin-left: 5px; font: 700 11px var(--din); color: var(--dim); }
.dj-filter a.on { background: var(--navy); color: #fff; box-shadow: none; }
.dj-filter a.on sup { color: var(--l1); }
.dj-lineband .dj-sh { padding-bottom: 8px; border-bottom: 4px solid var(--lc); }
.dj-make { display: grid; gap: 14px; align-items: center; padding: 20px 18px; border-radius: 6px; background: var(--navy); color: #fff; }
.dj-make .dj-h2 { color: #fff; }
.dj-make p { margin: 8px 0 0; color: rgba(255, 255, 255, .75); line-height: 1.7; }
.dj-make .dj-btn { justify-self: start; background: var(--l1); color: var(--navy); }

/* ---------- her station ---------- */
.dj-station { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; margin: 14px 0 0; padding: 14px 16px;
  background: var(--plate); border-radius: 6px; border-left: 10px solid var(--lc); box-shadow: 0 6px 18px rgba(20, 33, 61, .08); }
.dj-station-n h1 { font: 900 30px/1.15 var(--sans); color: var(--navy); }
.dj-station-n h1 span { font: 700 16px var(--din); color: var(--mut); margin-left: 6px; }
.dj-station-n p { margin: 4px 0 0; color: var(--mut); font-size: 14px; }
.dj-station-n p b { font: 700 14px var(--din); color: var(--navy); letter-spacing: .06em; margin-right: 6px; }
.dj-nb { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.dj-nb a { display: flex; flex-direction: column; color: var(--navy); font-weight: 800; font-size: 15px; }
.dj-nb small { color: var(--dim); font-weight: 600; font-size: 12px; }
.dj-nb-prev small::before { content: "‹ "; }
.dj-nb-next small::after { content: " ›"; }
.dj-nb-next { margin-left: auto; text-align: right; }
.dj-nb a:hover { color: var(--l2); }
.dj-pf-hero { display: grid; gap: 18px; margin: 16px 0 0; }
.dj-door-tall img { aspect-ratio: 4 / 5; }
.dj-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0 0; }
.dj-strip img { height: auto; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 3px; }
.dj-strip-more { display: grid; place-items: center; text-align: center; border-radius: 3px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; padding: 4px; }
.dj-status { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--mut); font-size: 13px; }
.dj-on { width: 9px; height: 9px; border-radius: 50%; background: var(--l3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--l3) 25%, transparent); }
.dj-tagline { font: 800 20px/1.5 var(--sans); color: var(--navy); margin: 10px 0 0; }
.dj-float.cta-float { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabs-h) + 12px + env(safe-area-inset-bottom));
  width: min(92%, 420px); min-height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--l2); color: #fff;
  font-weight: 800; box-shadow: 0 10px 28px rgba(20, 33, 61, .35); }
.dj-float[hidden] { display: none; }
.dj-pf-body { display: grid; gap: 22px; margin: 28px 0 0; }
.dj-file { background: var(--navy); color: #fff; border-radius: 6px; padding: 16px 18px; align-self: start; }
.dj-file h2 { font: 800 16px var(--sans); color: var(--l1); margin: 0 0 10px; letter-spacing: .08em; }
.dj-file dl { margin: 0; display: grid; gap: 2px; }
.dj-file dt { font-size: 12px; color: rgba(255, 255, 255, .55); margin-top: 8px; }
.dj-file dd { margin: 0; font-size: 14px; line-height: 1.65; }
.dj-blk { margin: 0 0 30px; }
.dj-blk > h2 { font: 800 19px var(--sans); color: var(--navy); margin: 0 0 12px; }
.dj-lines { display: flex; flex-wrap: wrap; gap: 8px; }
.dj-lines a { padding: 9px 14px; border-radius: 4px; background: var(--plate); color: var(--navy); font-size: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.dj-lines a:hover { box-shadow: inset 0 0 0 2px var(--l2); color: var(--l2); }

/* ---------- landing: the exit sign ---------- */
.dj-exit-top { padding: 18px 0 0; }
.dj-exit-sign { display: inline-flex; align-items: stretch; max-width: 100%; border-radius: 4px; overflow: hidden; background: var(--l1); color: var(--navy);
  box-shadow: 0 8px 22px rgba(20, 33, 61, .16); margin-bottom: 16px; }
.dj-exit-sign .dj-exit-l { width: auto; height: auto; min-width: 54px; border-radius: 0; font-size: 30px; }
.dj-exit-w { display: flex; flex-direction: column; justify-content: center; padding: 6px 12px; font: 900 20px/1 var(--sans); border-right: 2px solid var(--navy); }
.dj-exit-w small { font: 700 11px var(--din); letter-spacing: .2em; margin-top: 3px; }
.dj-exit-q { display: flex; align-items: center; padding: 6px 14px; font: 900 20px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dj-exit-top h1 { font: 900 28px/1.3 var(--sans); color: var(--navy); max-width: 22em; }
.dj-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dj-ph { position: relative; display: block; border-radius: 3px; overflow: hidden; background: var(--navy); }
.dj-ph img { height: auto; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.dj-ph-name { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 2px; background: var(--plate); color: var(--navy); font-size: 12px; font-weight: 800; }
.dj-ph .lock { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; color: #fff; font-size: 12px; text-align: center;
  background: rgba(20, 33, 61, .35); }
.dj-ph .lock svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.dj-sample { display: grid; gap: 18px; padding: 20px 18px; border-radius: 6px; background: var(--plate); }
.dj-sample p { color: var(--mut); line-height: 1.7; }
.dj-thread { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 4px; background: var(--tile); }
.dj-msg { margin: 0; max-width: 82%; padding: 9px 13px; border-radius: 4px; font-size: 15px; line-height: 1.6; }
.dj-msg.her { align-self: flex-start; background: var(--plate); color: var(--navy); border-left: 4px solid var(--l2); }
.dj-msg.me { align-self: flex-end; background: var(--navy); color: #fff; }

/* ---------- the pass page ---------- */
.dj-shop { padding: 18px 0 0; max-width: 1080px; margin: 0 auto; }
.dj-shop-top { display: grid; gap: 20px; align-items: center; }
.dj-shop-top h1 { font: 900 26px/1.3 var(--sans); color: var(--navy); }
.dj-bal { margin: 12px 0 0; color: var(--navy); font-weight: 700; }
.dj-bal .coin { color: var(--l2); }
.dj-deal { display: inline-block; margin: 12px 0 0; padding: 8px 12px; border-radius: 3px; background: var(--l1); color: var(--navy); font-size: 14px; }
.dj-deal time { font: 700 14px var(--din); }
.dj-steps-row { margin-top: 24px; }
.dj-plans { display: grid; gap: 12px; margin: 26px 0 0; }
.dj-plan { position: relative; display: flex; flex-direction: column; padding: 20px 18px; border-radius: 6px; background: var(--plate); border-top: 5px solid var(--navy); }
.dj-plan.best { border-top-color: var(--l1); box-shadow: 0 0 0 2px var(--l1), 0 14px 30px rgba(20, 33, 61, .14); }
.dj-flag { position: absolute; top: -14px; right: 14px; padding: 3px 10px; border-radius: 3px; background: var(--l1); color: var(--navy); font-size: 12px; font-weight: 800; }
.dj-plan h3 { font: 800 16px var(--sans); color: var(--navy); }
.dj-plan h3 span { color: var(--mut); font-weight: 600; margin-left: 4px; }
.dj-price { margin: 10px 0 2px; font: 700 36px var(--din); color: var(--navy); }
.dj-price small { font: 600 14px var(--sans); color: var(--mut); }
.dj-per { margin: 0 0 12px; color: var(--mut); font-size: 13px; }
.dj-plan ul { list-style: none; margin: 0 0 16px; padding: 0; flex: 1; }
.dj-plan li { padding: 6px 0 6px 22px; position: relative; color: #2b3650; font-size: 14px; }
.dj-plan li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 10px; height: 10px; border-radius: 50%; border: 3px solid var(--l3); }
.dj-vs { display: grid; border-radius: 6px; overflow: hidden; background: var(--plate); font-size: 13px; }
.dj-vs > div { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); border-top: 1px solid var(--line); }
.dj-vs > div:first-child { border-top: 0; }
.dj-vs span { padding: 10px 8px; }
.dj-vs .y { color: var(--l2); font-weight: 800; }
.dj-vs-h { background: var(--navy); color: #fff; font-weight: 800; }
.dj-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dj-pack { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 14px; border: 0; border-radius: 6px; background: var(--plate); color: var(--navy);
  cursor: pointer; text-align: left; box-shadow: inset 0 0 0 1px var(--line); font: inherit; }
.dj-pack:hover { box-shadow: inset 0 0 0 2px var(--l2); }
.dj-pack b { font: 700 26px var(--din); margin-right: 6px; }
.dj-pack i { font-style: normal; color: var(--l3); font-size: 12px; font-weight: 800; }
.dj-pack-price { font: 700 14px var(--din); color: var(--mut); }
.dj-buy { display: grid; gap: 22px; }
.dj-uses { display: grid; gap: 1px; background: var(--line); border-radius: 6px; overflow: hidden; }
.dj-uses div { display: flex; justify-content: space-between; gap: 10px; padding: 11px 14px; background: var(--plate); font-size: 14px; color: #2b3650; }
.dj-uses b { font: 700 15px var(--din); color: var(--l2); }
.dj-note { color: var(--mut); font-size: 14px; line-height: 1.75; }

/* ---------- about ---------- */
.dj-about { padding: 20px 0 10px; }
.dj-about h1 { font: 900 28px var(--sans); color: var(--navy); }

/* ---------- footer: the exit board ---------- */
.dj-foot { margin: 56px 0 0; padding: 26px 16px calc(var(--tabs-h) + 24px); background: var(--navy); color: rgba(255, 255, 255, .78); }
.dj-exits-foot { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.dj-foot-cols { display: grid; gap: 22px; }
.dj-foot-brand p { font-size: 13px; line-height: 1.75; margin: 12px 0 0; }
.dj-foot-pay { display: flex; align-items: center; gap: 8px; }
.dj-foot nav { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.dj-foot nav b { color: var(--l1); font-size: 13px; margin-bottom: 4px; }
.dj-foot nav a:hover { color: #fff; }
.dj-foot .dj-dot { width: 8px; height: 8px; }
.dj-foot-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 26px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14); font-size: 12px; color: rgba(255, 255, 255, .55); }
body.bare .dj-foot, body.feedmode .dj-foot { display: none; }

/* ---------- the age gate: a platform screen door ---------- */
.dj-gate { background: rgba(20, 33, 61, .9); backdrop-filter: blur(10px); }
.dj-gate-card { background: var(--plate); color: var(--navy); border-radius: 8px; overflow: hidden; padding-top: 0; }
.dj-gate-card .dj-rail { margin: 0 -24px 18px; }
.dj-gate-sign { display: flex; align-items: center; gap: 10px; margin: 0 -24px; padding: 14px 24px; background: var(--navy); color: #fff; }
.dj-gate-sign b { font: 800 18px var(--sans); letter-spacing: .14em; }
.dj-gate-18 { margin-left: auto; font: 700 14px var(--din); color: var(--navy); background: var(--l1); padding: 3px 8px; border-radius: 3px; }
.dj-gate-card h2 { color: var(--navy); }
.dj-gate-card p { color: var(--mut); }
.dj-gate-card .btn { border-radius: 4px; background: var(--l2); box-shadow: none; }
.dj-gate-card .link { color: var(--mut); }

/* ---------- the engine's own screens on the light concourse ---------- */
.btn { border-radius: 4px; background: var(--l2); box-shadow: none; font-family: var(--sans); font-weight: 700; }
.btn-ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.sheet, dialog.sheet { color: var(--fg); }
.tagline, .plan li, .plan-credits { color: var(--mut); }
.perks li { color: var(--fg); }

/* ---------- tablet ---------- */
@media (min-width: 720px) {
  .dj-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .dj-does { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dj-pass-band { grid-template-columns: 300px minmax(0, 1fr); align-items: center; padding: 28px; }
  .dj-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dj-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dj-sample { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; padding: 26px; }
  .dj-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dj-packs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dj-buy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dj-shop-top { grid-template-columns: 340px minmax(0, 1fr); }
  .dj-make { grid-template-columns: minmax(0, 1fr) auto; padding: 26px 28px; }
  .dj-foot-cols { grid-template-columns: 1.4fr 1fr 1fr; }
  .dj-station { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dj-nb { grid-column: auto; border-top: 0; padding-top: 0; gap: 24px; }
  .dj-vs { font-size: 14px; }
}

/* ---------- desktop: the top bar carries the menu; the rail stays only on the full-screen pages (chat, platform) ---------- */
@media (min-width: 1024px) {
  body:not(.bare):not(.feedmode):not(.adminpage) { padding-left: 0; padding-bottom: 0; }
  body:not(.bare):not(.feedmode) .tabs { display: none; }
  body:not(.bare):not(.feedmode) .b-nav { left: 0; }
  .dj-top-in { min-height: 68px; padding: 0 32px; }
  .dj-menu { display: flex; }
  .dj-login { display: inline; }
  .dj-hero { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 64px; align-items: start; padding: 40px 0 0; }
  .dj-hero-text { padding-top: 12px; }
  .dj-hero-text h1 { font-size: 44px; }
  .dj-hero .dj-pa { position: absolute; right: -44px; bottom: 34px; margin: 0; max-width: 320px; }
  .dj-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dj-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dj-pf-hero { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 48px; align-items: start; }
  .dj-pf-art { position: sticky; top: 90px; }
  .dj-pf-body { grid-template-columns: 300px minmax(0, 1fr); gap: 48px; }
  .dj-file { position: sticky; top: 90px; }
  .dj-float.cta-float { bottom: 28px; }
  .dj-foot { padding-bottom: 32px; }
  .dj-h2 { font-size: 24px; }
  .dj-station-n h1 { font-size: 40px; }
  .dj-exit-top h1, .dj-hub-top h1 { font-size: 38px; }
  .dj-track li { flex-basis: 130px; }
  .dj-filter { margin-inline: 0; padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { .dj-train { animation: none !important; } }

/* 2026-10-13 footer + CTA layout: the footer-column rules (.X-foot nav { flex-direction: column } and the bold column headings) also hit the language switcher, so it stacked one language per line with a big current-language label; it now sits on its own full-width compact row. The floating "Chat with X" button no longer covers the last footer row. The profile "Not quite your type?" box was a hard-coded dark panel with this light theme's dark text on it; it now takes the card colour. */
.dj-foot-legal .lang-switch { flex-direction: row; flex-wrap: wrap; order: 3; flex-basis: 100%; justify-content: center; gap: 4px 14px; margin: 6px 0 0; padding: 0; }
.dj-foot-legal .lang-switch b, .dj-foot-legal .lang-switch a { display: inline; margin: 0; padding: 0; font-size: 13px; line-height: 1.4; font-weight: 500; font-family: inherit; letter-spacing: 0; text-transform: none; }
.dj-foot-legal { flex-wrap: wrap; }
body:has(.cta-float:not([hidden])) .dj-foot-legal { padding-bottom: 88px; }
.more-cta { background: linear-gradient(var(--bg2), var(--bg2)) padding-box, var(--grad) border-box; }
.more-faces img { border-color: var(--bg2); }
/* end footer + CTA layout */

/* 2026-10-13 contrast audit: the engine sets #fff (or its dark-ink token) on the accent gradient for the promo bar, promo box, lock chip, send button, my chat bubble,
   buttons, badges, unlock pills and the like. On this site's accent that fell below WCAG 4.5:1, so those surfaces take a readable ink - or, where the
   accent is only a little too light for white, a slightly deeper accent so the white stays. Her stage directions (*...*) in the bubbles follow the
   bubble's own ink. Generated by the contrast probe (scratchpad/probe.js) from the real cascade. */
.card-create .plus,
.dj-train { color: var(--bg2); }
.offer-pct i { background: #d3175a; }
body .msg.me em.narr { color: inherit; opacity: 0.9; }
/* end contrast audit */

/* 2026-10-13 readability extras: text that disappeared on this site's palette - the muted/dim text tokens below 4.5:1, the accent used as a text colour (links, eyebrows, prices) on its own surface, and the status colours the engine tuned for dark pages (errors, coins, paid/PRO marks) on this light theme. Generated by the contrast probe. */
:root { --dim: #5e687d; }
.error, .b-error, .rej-box, .acct-more.danger summary, .chat-menu-list .danger, .acct-table .minus { color: #b3153a; }
.st-paid, .tbl .st-paid td, .acct-table .plus { color: #17753f; }
.coin, .hb-pro, .chat-list .star, .plan-tag-first { color: #8a5a00; }
/* end readability extras */

/* 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; } }