/* happybook.cc (HappyBook): its own copy of the engine's stylesheet (docs/plans/2026-10-09-multisite-design.md 2.3) - own
   design 2026-10-29 "the lending shelf" (batch3 step 5). The engine part keeps the class names the engine's templates and
   scripts use (chat, feed, builder, account, store, gallery), taken from the network's light stylesheet (site/amature's
   engine part, itself site/bf / pscout) with this site's tokens; then the shop's own section (bk-), the photo viewer's
   unlock button, the Premium page's long half, the offer bar and landing fixes, and the one self-hosted Latin face.
   Built by claude_projects/candy/new-sites/batch3/build/design/happybook_gudumei/build_css.py. Mobile first. */
:root {
  /* warm paper, brown-black ink, library green for actions, a vermilion date stamp, wood and brass */
  --bg: #f5eedf; --bg2: #fffaf0; --bg3: #ebe1cc; --line: #e0d3b8; --line2: #c8b28c;
  --fg: #2b2219; --mut: #574a3a; --dim: #6c5d4a;
  --paper: var(--bg); --card: var(--bg2); --sunk: var(--bg3);
  --ink: #2b2219; --ink2: #3a2f25; --ink3: #4b3e31;
  --green: #2f5d4f; --green-lo: #234a3e; --green-wash: #e1ebe3;
  --stamp: #b5412b; --brass: #8f6c2f; --wood: #8a6643; --wood-hi: #ad8659;
  --hot: var(--green); --hot-lo: var(--green-lo); --teal: var(--green);
  --cobalt: var(--green); --cobalt-hi: #3d7563; --cobalt-lo: var(--green-lo); --cobalt-wash: var(--green-wash);
  --pencil: var(--green); --pencil-lo: var(--green-lo); --pencil-wash: var(--green-wash);
  --kumkum: var(--stamp); --kumkum-lo: #8f3020;
  /* Korean in the system's faces: a Myeongjo-style serif for headings and quotes, the system sans for reading;
     Instrument Serif only for Latin accents (wordmark, call numbers, numerals) */
  --display: 'Noto Serif KR', 'Noto Serif CJK KR', 'AppleMyungjo', Georgia, 'Nanum Myeongjo', 'Batang', serif; --poster: var(--display);
  --sans: system-ui, -apple-system, 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Noto Sans CJK KR', 'Malgun Gothic', Roboto, sans-serif;
  --latin: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --hand: var(--display);
  --radius: 10px; --r: 8px; --r-sm: 8px; --r-xs: 5px; --tabs-h: 62px;
  --grad: linear-gradient(var(--green), var(--green));
  --hole: var(--bg3);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 15.5px/1.6 var(--sans);
  padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom));
}
body.gated { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; 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(--display);
  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(--display); }
.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(--display); 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(--display); 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(--display); 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; }
/* her own line on a public photo of her gallery (2026-10-22: her card's caption, app/profile_card_i18n.php profile_captions()) -
   inside the tile at its foot, never past it (.ph clips: overflow hidden) */
.ph-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 7px 6px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .74));
  color: #fff; font: italic 400 11px/1.3 var(--sans); text-align: start; overflow-wrap: anywhere; pointer-events: none; }
@media (min-width: 640px) { .ph-cap { padding: 24px 10px 8px; font-size: 13px; } }
.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(--display); 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(--display); 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(--display); 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(--display); 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(--display); }
.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(--display); }
.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(--display); }
.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(--display); } .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(--display); 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(--display); } .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(--display); } .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(--display); }
.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(--display); } .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(--display); }
.plan-off { padding: 3px 9px; border-radius: 8px; background: #f5c542; color: #1a1300; font: 700 12px var(--display); }
.plan-tag { position: static; min-height: 14px; margin: 4px 0 0; padding: 0; background: none; font: 700 11px var(--display); 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(--display); }
.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(--display); }
/* 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(--display); } .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(--display); } .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(--display); 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(--display); 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(--display); letter-spacing: .14em; color: #cbb8d6; }
.offer-title { margin: 0; font: 800 italic 19px var(--display); color: #fff; }
.offer-btn { margin-top: 8px; width: max-content; background: #fff; color: #111; border-radius: 999px; padding: 8px 16px; font: 700 13px var(--display); }
.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(--display); 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(--display); }
.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(--display); 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(--display); 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(--display); 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(--display); }
.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(--display); 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(--display); } .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(--display); 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); }
.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(--display); 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: 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(--display); 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(--display); 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); }

/* ---------- the engine's screens on paper: what its dark defaults left light-on-light ---------- */
.tagline, .plan li, .plan-credits, .perks li { color: var(--mut); }
.b-error { color: #b42318; }
.msg.her { background: var(--ink); color: #fff; }
.msg.me { background: var(--cobalt-wash); color: var(--cobalt-lo); }
.msg.sys { color: var(--dim); }
.btn { border-radius: var(--r-sm); background: var(--cobalt); color: #fff; font: 700 15px var(--display); font-stretch: 108%; box-shadow: 0 8px 22px #e2342b33; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line2); }
.sheet { background: var(--card); color: var(--ink); }
.sheet::backdrop { background: rgba(21, 22, 26, .45); }
.gate { background: rgba(243, 241, 236, .96); }
.gate-card { background: var(--card); }
.field input:not([type=range]), .auth input { background: var(--paper); color: var(--ink); border-color: var(--line2); }
/* the studio's tiles are its own (hf- section): no engine tile box around them */
@media (min-width: 1024px) {
  /* the top bar carries the menu: no rail and no bottom tabs, except on the full-screen pages (chat, feed) */
  body:not(.bare):not(.feedmode):not(.adminpage) { padding-left: 0; padding-bottom: 0; }
  body:not(.bare):not(.feedmode) .tabs { display: none; }
}

/* 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 { color: var(--bg2); }
.offer-pct i { background: var(--hot); }
body .msg.her 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. */
.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; } }

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

/* The Shorts tabs stay on one line in every language (owner, 2026-10-14: "Для тебя" wrapped on jrgliht.xyz/shua): a box
   centred with left: 50% is only as wide as the other half of the screen unless it is told its own width. */
.feed-tabs { width: max-content; max-width: calc(100% - 24px); }
.feed-tabs button { white-space: nowrap; }
@media (max-width: 380px) { .feed-tabs button { padding: 8px 14px; } }

/* ==========================================================================================================================
   HappyBook / happybook.cc: "the lending shelf" - own design 2026-10-29 (batch3 step 5). The domain was once a Korean
   book-rental shop: a light, cozy, bookish page. Warm paper ground with a faint grain, brown-black ink, library green for
   every action, a vermilion date-stamp red for small marks, wood and brass for the shelf and the catalogue. Korean text
   in the system's own faces (sans for reading, Myeongjo-style serif for headings and quotes), Instrument Serif only for the
   Latin accents (the italic wordmark, call numbers, numerals). Layout: a two-row shop sign (sign row + index tabs), the
   women as books standing on wooden boards, the types as a table of contents with dot leaders, the text as numbered
   chapters, the FAQ as folding <details>, her profile as an open book (frontispiece | title page, epigraph, letter,
   library card), the footer as the dark cloth of the back cover. Mobile first; every grid/flex item holding text has
   min-width: 0 (360/390/430 px); Korean wraps by words (word-break: keep-all) and long strings still break.
   ========================================================================================================================== */
:root:root { --accent: #2f5d4f; --accent2: #b8432c; }   /* over the inline brand colours of _head.php (brands.php keeps the old amber) */
:root { --wrap: 1180px; --read: 780px; }
html:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
body {
  background-color: var(--bg);
  background-image: radial-gradient(rgba(110, 80, 40, .055) 1px, transparent 1.2px);
  background-size: 5px 5px;
  font: 400 16px/1.75 var(--sans);
}
::selection { background: rgba(47, 93, 79, .22); }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.35; letter-spacing: 0; font-stretch: normal; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
abbr[title] { text-decoration: none; }
.bk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:is(#index, #women-here, #her-line, #her-bio, #her-card, #her-photos, #her-more, #faq-h, #why, #fictional, #pictures, #free, #discretion, #rules, #fine-print) { scroll-margin-top: 16px; }

/* the engine's shared pieces in the shop's colours (chat, account, builder and store use these) */
.btn { background: var(--green); color: #fff; font: 600 15px/1.2 var(--sans); font-stretch: normal; border-radius: 8px; box-shadow: 0 2px 0 var(--green-lo); }
.btn:hover { background: var(--green-lo); }
.btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--line2); }
.btn-ghost:hover { background: var(--bg2); }
.chip { border-radius: 6px; background: var(--bg2); color: var(--mut); box-shadow: inset 0 0 0 1px var(--line2); }
.chip.on { background: var(--green); color: #fff; box-shadow: none; }
.g-tabs button.on { color: var(--fg); border-bottom-color: var(--green); }
.ph .lock, .ph-play, .ph-cap { font-style: normal; }
.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); }
.ph-play svg { width: 16px; height: 16px; fill: #fff; stroke: none; margin-left: 2px; }
.cta-float.cta-float { background: var(--green); color: #fff; }
@media (min-width: 1024px) { .cta-float.cta-float { left: 50%; } }

/* ---------- buttons and small type ---------- */
.bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 8px;
  background: var(--green); color: #fff; font: 600 15px/1.25 var(--sans); text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 0 var(--green-lo), 0 8px 18px rgba(47, 93, 79, .18); transition: background-color .15s, box-shadow .15s; }
.bk-btn:hover { background: var(--green-lo); }
.bk-btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--line2); }
.bk-btn-ghost:hover { background: var(--bg2); box-shadow: inset 0 0 0 1.5px var(--green); }
.bk-btn-wide { width: 100%; }
.bk-btn span { padding: 1px 8px; border-radius: 999px; background: rgba(0, 0, 0, .12); font-size: 12px; }
.bk-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.bk-cta-row > * { min-width: 0; }
.bk-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 600 13px/1.4 var(--sans); color: var(--stamp); letter-spacing: .02em; }
.bk-eyebrow::before { content: ""; width: 26px; height: 2px; flex: none; background: var(--stamp); }
.bk-lead { margin: 14px 0 0; max-width: 660px; font-size: 17px; line-height: 1.85; color: var(--mut); }
.bk-fine { display: block; margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--dim); }
.ax-no.bk-callno { position: absolute; right: 6px; bottom: 6px; z-index: 3; padding: 2px 7px; border-radius: 2px; background: var(--bg2); color: var(--fg);
  box-shadow: 0 0 0 1px var(--line2); font: 400 14px/1.2 var(--latin); letter-spacing: .02em; }

/* every cover is a book: the spine painted over its left edge */
.bk-cover::after, .bk-pick-cover::after, .bk-feature-cover::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(255, 255, 255, .22) 4px, rgba(0, 0, 0, .07) 8px, transparent 15px); }

/* ---------- the shop sign: sign row + index tabs ---------- */
.bk-sign { background: var(--bg3); border-bottom: 1px solid var(--line2); }
.bk-sign-row { display: flex; align-items: center; gap: 10px; max-width: var(--wrap); min-height: 58px; margin: 0 auto; padding: 8px 16px; }
.bk-logo { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--fg); text-decoration: none; }
.bk-logo-mark { width: 32px; height: 32px; flex: none; color: var(--green); stroke: none; }
.bk-logo b { font: italic 400 27px/1 var(--latin); letter-spacing: .005em; white-space: nowrap; }
.bk-motto { display: none; margin: 0; padding-inline-start: 14px; border-inline-start: 1px solid var(--line2); font: 400 14px/1.4 var(--display); color: var(--mut); min-width: 0; }
.bk-desk { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; min-width: 0; }
.bk-desk .lang-head { flex: none; margin-right: 0 !important; }
.bk-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 11px; border-radius: 6px; background: var(--bg2);
  box-shadow: inset 0 0 0 1px var(--line2); font: 600 13px/1 var(--sans); color: var(--fg); white-space: nowrap; text-decoration: none; }
.bk-tag-prem { background: var(--green); color: #fff; box-shadow: none; }
.bk-tag svg { width: 18px; height: 18px; }
.bk-tag .coin { font-style: normal; color: var(--brass); }
.bk-login { font-size: 14px; font-weight: 600; color: var(--fg); white-space: nowrap; }
.bk-join { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 6px; background: var(--green); color: #fff;
  font: 600 14px/1 var(--sans); white-space: nowrap; text-decoration: none; }
.bk-adult { flex: none; padding: 4px 6px 3px; border: 1.5px solid var(--stamp); border-radius: 4px; color: var(--stamp); font: 400 14px/1 var(--latin); transform: rotate(-5deg); }
.bk-shelves { display: flex; align-items: flex-end; gap: 3px; max-width: var(--wrap); margin: 0 auto -1px; padding: 2px 16px 0; overflow-x: auto; scrollbar-width: none; }
.bk-shelves::-webkit-scrollbar { display: none; }
.bk-shelves a { --tab: var(--green); flex: none; padding: 8px 14px 7px; border: 1px solid var(--line2); border-bottom: 0; border-top: 3px solid var(--tab);
  border-radius: 7px 7px 0 0; background: #e3d7bd; color: var(--mut); font: 600 14px/1.2 var(--sans); white-space: nowrap; text-decoration: none; }
.bk-shelves a:nth-child(6n + 2) { --tab: var(--stamp); }
.bk-shelves a:nth-child(6n + 3) { --tab: var(--brass); }
.bk-shelves a:nth-child(6n + 4) { --tab: #3f4d6e; }
.bk-shelves a:nth-child(6n + 5) { --tab: #7a4152; }
.bk-shelves a:nth-child(6n + 6) { --tab: #5b6b34; }
.bk-shelves a:hover { background: var(--bg2); color: var(--fg); }
.bk-shelves a.is-here { padding-top: 10px; background: var(--bg); color: var(--fg); }
body.bare .bk-sign, body.feedmode .bk-sign { display: none; }

/* bottom tabs on phones: the open one has a green ribbon above its icon */
.bk-tabs { background: rgba(255, 250, 240, .96); border-top: 1px solid var(--line2); }
.bk-tabs a { position: relative; color: var(--dim); }
.bk-tabs a small { display: block; max-width: 100%; padding: 0 3px; font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-tabs a.on { color: var(--green); }
.bk-tabs a.on svg { stroke: var(--green); }
.bk-tabs a.on::before { content: ""; position: absolute; top: 0; left: 50%; width: 14px; height: 9px; margin-left: -7px; background: var(--green);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 62%, 0 100%); }

/* ---------- the home: the counter and today's pick ---------- */
.bk-counter, .bk-stacks, .bk-related, .bk-volume, .bk-drawers, .bk-members, .bk-preface, .bk-leaflet-head, .bk-drawers-foot { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.bk-contents, .bk-howto, .bk-rates, .bk-request, .bk-faq, .bk-seealso, .bk-figures, .bk-rulebook { max-width: var(--read); margin-left: auto; margin-right: auto; }
.bk-counter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 26px 0 8px; }
.bk-counter > * { min-width: 0; }
.home-h1 { font-size: clamp(28px, 7.6vw, 52px); line-height: 1.28; }
.bk-pick { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 14px; align-items: end; margin: 0; padding: 14px; background: var(--bg2);
  border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 1px 0 var(--line2), 0 16px 32px rgba(60, 40, 20, .1); }
.bk-pick > * { min-width: 0; }
.bk-pick-cover { position: relative; display: block; aspect-ratio: 640 / 784; overflow: hidden; border-radius: 2px 6px 6px 2px; background: var(--bg3); box-shadow: 4px 4px 0 var(--line2); }
.bk-pick-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bk-pick figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.bk-pick small { font: 600 12px/1.3 var(--sans); color: var(--stamp); }
.bk-pick b { font: 500 22px/1.3 var(--display); }
.bk-pick span { font-size: 13px; line-height: 1.5; color: var(--mut); }
.bk-pick q { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font: 400 15px/1.65 var(--display); color: var(--fg); quotes: "\201C" "\201D"; }

/* ---------- the shelf: books on wooden boards ---------- */
.bk-stacks { padding-top: 30px; }
.bk-stacks-head h2, .bk-stacks > h2 { font-size: clamp(24px, 5.8vw, 34px); }
.bk-stacks-head p { margin: 4px 0 0; color: var(--mut); }
.bk-chips { margin-top: 14px; }
.bk-chips .chip { text-decoration: none; }
.bk-chips .bk-chip-all { color: var(--green); font-weight: 600; }
.bk-shelf { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; column-gap: 0; margin: 18px -8px 0; padding: 0; }
.bk-book { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0 8px; }
.bk-cover { position: relative; display: block; aspect-ratio: 640 / 784; overflow: hidden; border-radius: 2px 5px 5px 2px; background: var(--bg3);
  box-shadow: 2px 0 0 rgba(0, 0, 0, .06), 6px 2px 12px rgba(60, 40, 20, .2); transform-origin: 50% 100%; transition: transform .2s; }
.bk-cover img, .bk-cover video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bk-cover video { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.bk-book.playing .bk-cover video { opacity: 1; }
.bk-book:hover .bk-cover { transform: translateY(-5px) rotate(-1.2deg); }
.bk-book-title { margin: 0 -8px; padding: 20px 8px 0; font-size: 17px; line-height: 1.4;
  background: linear-gradient(180deg, var(--wood-hi), var(--wood) 65%, #6a4b30) 0 0 / 100% 10px no-repeat,
              linear-gradient(rgba(60, 40, 20, .16), transparent) 0 10px / 100% 8px no-repeat; }
.bk-book-title a { color: var(--fg); text-decoration: none; }
.bk-book-title a:hover { color: var(--green); }
.bk-genre { display: none; margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--stamp); }
.bk-slip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; margin: 8px 0 0; padding: 4px 8px; border: 1px solid var(--line); border-left: 3px solid var(--green);
  background: var(--bg2) repeating-linear-gradient(transparent 0 21px, rgba(47, 93, 79, .12) 21px 22px); font-size: 13px; line-height: 22px; }
.bk-slip dt { color: var(--dim); white-space: nowrap; }
.bk-slip dd { margin: 0; min-width: 0; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 8px 0 0; font: 400 14px/1.65 var(--display); color: var(--mut); }
.bk-borrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: auto 0 0; padding-top: 10px; }
.bk-borrow-go { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 6px; background: var(--green); color: #fff;
  font: 600 13px/1.2 var(--sans); white-space: nowrap; text-decoration: none; }
.bk-borrow-go:hover { background: var(--green-lo); }
.bk-borrow small { font-size: 12px; color: var(--dim); }
.bk-empty { padding: 30px 0; color: var(--mut); }
.bk-empty a { color: var(--green); }

/* ---------- the types: a table of contents ---------- */
.bk-contents { padding-top: 44px; }
.bk-contents h2 { font-size: clamp(22px, 5.2vw, 30px); text-align: center; }
.bk-contents ol { list-style: none; counter-reset: bk-toc; margin: 18px 0 0; padding: 14px 20px; background: var(--bg2); border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(60, 40, 20, .08); }
.bk-contents li { counter-increment: bk-toc; }
.bk-contents li a { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; color: var(--fg); text-decoration: none; }
.bk-contents li a::before { content: counter(bk-toc, upper-roman) "."; flex: none; min-width: 2.2em; font: 400 18px/1 var(--latin); color: var(--stamp); }
.bk-contents span { min-width: 0; font: 500 17px/1.4 var(--display); }
.bk-contents i { flex: 1 1 12px; min-width: 12px; border-bottom: 2px dotted var(--line2); transform: translateY(-5px); }
.bk-contents b { flex: none; font-size: 13px; font-weight: 600; color: var(--mut); white-space: nowrap; }
.bk-contents li a:hover span { color: var(--green); }
.bk-contents-all { margin: 12px 0 0; text-align: center; }
.bk-contents-all a { color: var(--green); font-weight: 600; }

/* ---------- the text as numbered chapters ---------- */
.seo.bk-chapters { max-width: var(--read); margin-left: auto; margin-right: auto; padding: 44px 0 0; color: var(--fg); counter-reset: bk-ch; }
.bk-chapters > article, .bk-chapters > details { counter-increment: bk-ch; margin: 0 0 26px; }
.seo.bk-chapters h2 { margin: 0 0 10px; font-size: clamp(22px, 5.2vw, 28px); line-height: 1.4; text-align: start; color: var(--fg); }
.bk-chapters h2::before { content: "\00A7\00A0" counter(bk-ch, decimal-leading-zero); display: block; margin-bottom: 4px; font: 400 17px/1 var(--latin); color: var(--stamp); }
.bk-chapters p { margin: 0 0 12px; font-size: 16.5px; line-height: 1.95; color: var(--fg); }
.bk-chapters details summary h2 { display: block; }

/* ---------- how it works: a lending slip ---------- */
.bk-howto { padding-top: 34px; }
.bk-howto h2, .bk-rates h2, .bk-faq h2 { font-size: clamp(22px, 5vw, 30px); }
.bk-howto ol { list-style: none; counter-reset: bk-step; margin: 16px 0 0; padding: 0; background: var(--bg2); border: 1px solid var(--line2); }
.bk-howto li { counter-increment: bk-step; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 10px; padding: 14px 16px 14px 0; border-bottom: 1px dashed var(--line2); }
.bk-howto li:last-child { border-bottom: 0; }
.bk-howto li::before { content: counter(bk-step); grid-row: span 2; justify-self: center; font: 400 36px/1 var(--latin); color: var(--green); }
.bk-howto strong { font: 500 17px/1.45 var(--display); }
.bk-howto span { font-size: 15px; line-height: 1.7; color: var(--mut); }

/* ---------- what is free: the price list ---------- */
.bk-rates { padding-top: 36px; }
.bk-rates table { width: 100%; margin-top: 14px; border-collapse: collapse; background: var(--bg2); border: 1px solid var(--line2); font-size: 15px; }
.bk-rates th, .bk-rates td { padding: 12px 14px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); }
.bk-rates th { width: 40%; font-weight: 600; color: var(--fg); }
.bk-rates td { color: var(--mut); }
.bk-rates .bk-rate-prem { background: var(--green-wash); }
.bk-rates .bk-rate-prem th { color: var(--green-lo); }
.bk-rates tfoot td { border-bottom: 0; font-size: 14px; }
.bk-rates tfoot a { color: var(--green); font-weight: 600; }

/* ---------- build your own: a request card ---------- */
.bk-request { margin-top: 40px; padding: 22px 20px; background: var(--bg2); border: 1px solid var(--line2); border-top: 5px solid var(--stamp); border-radius: 3px;
  box-shadow: 6px 6px 0 var(--bg3); }
.bk-request h2 { font-size: clamp(21px, 4.8vw, 26px); }
.bk-request p { margin: 8px 0 16px; color: var(--mut); }

/* ---------- FAQ: folding questions; see also ---------- */
.bk-faq { padding-top: 40px; }
.bk-faq h2 { margin-bottom: 10px; }
.bk-faq details { border-top: 1px solid var(--line2); }
.bk-faq details:last-of-type { border-bottom: 1px solid var(--line2); }
.bk-faq summary { position: relative; padding: 15px 36px 15px 0; cursor: pointer; list-style: none; font: 500 17px/1.5 var(--display); color: var(--fg); }
.bk-faq summary::-webkit-details-marker { display: none; }
.bk-faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font: 400 28px/1 var(--latin); color: var(--stamp); }
.bk-faq details[open] summary::after { content: "\2212"; }
.bk-faq details p { margin: 0 0 16px; line-height: 1.85; color: var(--mut); }
.bk-faq .bk-cta-row { margin-top: 18px; }
.bk-seealso { padding-top: 32px; }
.bk-seealso h2 { font-size: 20px; }
.bk-seealso p { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.bk-seealso a { padding: 6px 12px; border: 1px solid var(--line2); border-radius: 4px; background: var(--bg2); font-size: 14px; color: var(--fg); text-decoration: none; }
.bk-seealso a:hover { border-color: var(--green); color: var(--green); }

/* ---------- the footer: the back cover ---------- */
.foot.bk-back { margin-top: 52px; padding: 32px 16px 26px; border-top: 0; text-align: start; font-size: 14px; color: #d8d0bf;
  background: #2c3a33 repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 5px); }
.bk-back a { color: #f1ead9; text-decoration: none; }
.bk-back a:hover { text-decoration: underline; }
.bk-back-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: var(--wrap); margin: 0 auto; }
.bk-back-in > * { min-width: 0; }
.bk-blurb-box { display: grid; gap: 6px; max-width: 640px; }
.bk-back-mark { width: 36px; height: 36px; color: #eadfc6; }
.bk-blurb-box strong { font: 500 19px/1.4 var(--display); color: #fffaf0; }
.bk-blurb-box p { margin: 0; line-height: 1.8; }
.bk-blurb-box small { color: #bdb4a0; }
.bk-back-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.bk-back-cols > * { min-width: 0; }
.bk-back-cols strong { display: block; margin-bottom: 8px; font: 600 13px/1.3 var(--sans); letter-spacing: .04em; color: #e6bb8e; }
.bk-back-cols ul { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.bk-imprint { max-width: var(--wrap); margin: 26px auto 0 !important; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); font: italic 400 16px/1.4 var(--latin); color: #bfb6a2; }
.bk-back .lang-switch { max-width: var(--wrap); margin: 10px auto 0 !important; justify-content: flex-start !important; }
body:has(.cta-float:not([hidden])) .foot.bk-back { padding-bottom: 96px; }

/* ---------- the 18+ gate: a library card at the door ---------- */
.gate.bk-door { background: rgba(245, 238, 223, .97); }
.bk-door-card { border: 1px solid var(--line2); border-top: 6px solid var(--green); border-radius: 4px; text-align: center; box-shadow: 0 24px 60px rgba(60, 40, 20, .25);
  background: var(--bg2) repeating-linear-gradient(transparent 0 27px, rgba(47, 93, 79, .09) 27px 28px); }
.gate-card .bk-door-stamp { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 14px; }
.bk-door-mark { width: 46px; height: 46px; color: var(--green); }
.bk-door-stamp b { display: inline-block; padding: 4px 10px 2px; border: 2px solid var(--stamp); border-radius: 6px; color: var(--stamp); font: 400 32px/1 var(--latin); transform: rotate(-6deg); }
.gate-card .bk-door-note { margin: 0 0 18px; font-size: 13px; line-height: 1.6; }
.bk-door-card .link { display: block; margin: 4px auto 0; }

/* ---------- her profile: an open book ---------- */
.bk-volume { padding-top: 14px; }
.bk-trail { margin: 0 0 14px; font-size: 14px; color: var(--dim); }
.bk-trail a { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-weight: 600; text-decoration: none; }
.bk-trail svg { width: 16px; height: 16px; }
.bk-spread { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.bk-spread > * { min-width: 0; }
.bk-frontis { position: relative; margin: 0; padding: 10px; background: var(--bg2); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(60, 40, 20, .14); }
.bk-frontis img { width: 100%; height: auto; aspect-ratio: 1280 / 1568; object-fit: cover; object-position: top; background: var(--bg3); transition: opacity .2s; }
[data-bk-photos].is-changing img { opacity: .5; }
.bk-frontis .bk-callno { top: 18px; right: 18px; bottom: auto; }
.bk-frontis figcaption { margin-top: 8px; text-align: center; font: 400 15px/1.4 var(--display); color: var(--mut); }
.bk-plates { list-style: none; counter-reset: bk-pl; display: flex; gap: 8px; max-width: 100%; margin: 12px 0 0; padding: 2px 2px 6px; overflow-x: auto; scrollbar-width: thin; }
.bk-plates li { flex: none; counter-increment: bk-pl; text-align: center; font: 400 13px/1 var(--latin); color: var(--dim); }
.bk-plates li::after { content: counter(bk-pl, upper-roman); display: block; margin-top: 4px; }
.bk-plate { display: block; width: 62px; padding: 3px; border: 1px solid var(--line2); background: var(--bg2); cursor: pointer; opacity: .7; }
.bk-plate img { width: 100%; aspect-ratio: 80 / 98; object-fit: cover; object-position: top; }
.bk-plate.is-on { opacity: 1; border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.bk-titlepage { padding: 4px 0 16px; border-bottom: 1px solid var(--line2); text-align: center; }
.bk-callline { margin: 0 0 8px; font: 400 15px/1.5 var(--display); color: var(--stamp); }
.bk-h1 { font-size: clamp(32px, 8vw, 50px); line-height: 1.2; overflow-wrap: anywhere; }
.bk-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 10px 0 0; font-size: 14px; color: var(--mut); }
.bk-facts span + span::before { content: "\00B7"; margin: 0 8px; color: var(--line2); }
.bk-genres { margin: 6px 0 0; font-size: 13px; color: var(--green); }
.bk-epigraph { max-width: 540px; margin: 20px auto 0; padding: 0; border: 0; text-align: center; }
.bk-epigraph p { margin: 0; font: 400 19px/1.75 var(--display); color: var(--fg); }
.bk-epigraph::after { content: ""; display: block; width: 44px; height: 2px; margin: 14px auto 0; background: var(--stamp); }
.bk-letter { margin-top: 24px; padding: 20px 18px; border: 1px solid var(--line2); box-shadow: 5px 5px 0 var(--bg3);
  background: var(--bg2) repeating-linear-gradient(transparent 0 29px, rgba(47, 93, 79, .1) 29px 30px); }
.bk-letter h2 { margin-bottom: 8px; font-size: 20px; }
.bk-letter-scene { margin: 0 0 8px; font-size: 14px; color: var(--dim); }
.bk-letter-body { margin: 0; font: 400 18px/1.8 var(--display); color: var(--fg); }
.bk-letter-sign { margin: 6px 0 14px; text-align: end; font: 400 17px/1.4 var(--display); color: var(--stamp); }
.bk-asks-h { margin: 8px 0 6px; font-size: 13px; font-weight: 600; color: var(--mut); }
.bk-asks { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; }
.bk-asks li { min-width: 0; }
.bk-asks a { display: block; padding: 7px 12px; border: 1px solid var(--line2); border-radius: 4px; background: var(--bg); font-size: 14px; line-height: 1.4; color: var(--fg); text-decoration: none; }
.bk-asks a:hover { border-color: var(--green); color: var(--green); }
.bk-letter .bk-fine { text-align: center; }
.bk-letter .shorts-cta { margin-top: 10px; }
.bk-met, .bk-story, .bk-catalog { margin-top: 28px; }
.bk-met h2, .bk-story h2, .bk-catalog h2, .bk-gallery h2, .bk-related h2 { font-size: clamp(21px, 4.8vw, 26px); }
.bk-met p { margin: 8px 0 0; line-height: 1.85; }
.bk-story p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.95; }
.bk-story .traits { margin-top: 12px; }
.bk-catalog-card { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); margin: 12px 0 0; padding: 4px 16px; background: #fffdf6;
  border: 1px solid var(--line2); border-top: 4px double var(--stamp); border-radius: 2px; box-shadow: 0 6px 16px rgba(60, 40, 20, .08); }
.bk-catalog-card dt, .bk-catalog-card dd { padding: 9px 0; border-bottom: 1px solid rgba(47, 93, 79, .15); }
.bk-catalog-card dt { padding-inline-end: 10px; font-size: 13px; font-weight: 600; color: var(--dim); }
.bk-catalog-card dd { margin: 0; min-width: 0; font-size: 15px; color: var(--fg); overflow-wrap: anywhere; }
.bk-subjects { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.bk-subjects a { padding: 4px 10px; border-radius: 3px; background: var(--green-wash); color: var(--green-lo); font-size: 13px; font-weight: 600; text-decoration: none; }
.bk-gallery { margin-top: 44px; }
.bk-gallery .g-tabs { margin-top: 14px; }
.bk-plates-all.gallery { gap: 10px; }
.bk-plates-all .ph { border: 4px solid var(--bg2); border-radius: 2px; outline: 1px solid var(--line); }
.bk-related { margin-top: 44px; }
.bk-related .bk-shelf { margin-top: 14px; }
.bk-notyours { margin-top: 32px; padding: 22px 20px; background: var(--bg2); border: 1px solid var(--line2); border-left: 6px solid var(--green); }
.bk-notyours h2 { font-size: 22px; }
.bk-notyours p { margin: 6px 0 0; color: var(--mut); }
.bk-notyours .bk-cta-row { margin-top: 16px; }

/* ---------- a landing, a type page: a leaflet; the type index: the card catalogue ---------- */
.bk-leaflet-head { padding: 22px 0 6px; }
.bk-leaflet-head h1 { max-width: 900px; font-size: clamp(28px, 7vw, 46px); line-height: 1.3; }
.bk-leaflet-head .bk-trail a { font-weight: 600; }
.bk-feature { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; max-width: 660px; margin: 24px auto 0 0; padding: 14px;
  background: var(--bg2); border: 1px solid var(--line); box-shadow: 5px 5px 0 var(--bg3); }
.bk-feature > * { min-width: 0; }
.bk-feature-cover { position: relative; display: block; aspect-ratio: 640 / 784; overflow: hidden; border-radius: 2px 5px 5px 2px; background: var(--bg3); }
.bk-feature-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bk-feature-name { margin: 0; }
.bk-feature-name b { font: 500 21px/1.3 var(--display); }
.bk-feature blockquote { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0 10px; padding: 0;
  font: 400 15px/1.65 var(--display); color: var(--mut); }
@media (min-width: 1180px) { .bk-feature { margin-left: calc((100% - var(--wrap)) / 2); } }
.bk-figures { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; padding: 0; background: var(--bg2); border: 1px solid var(--line2); }
.bk-figures li { min-width: 0; padding: 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bk-figures b { display: block; font: 400 38px/1 var(--latin); color: var(--green); }
.bk-figures span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--mut); }
.bk-drawers { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; padding: 0; }
.bk-drawers li { min-width: 0; }
.bk-drawers figure { margin: 0; padding: 10px; border-radius: 4px; background: linear-gradient(180deg, #a27c53, #86623e);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12), 0 8px 18px rgba(60, 40, 20, .2); }
.bk-drawer-pic { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--bg3); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25); }
.bk-drawer-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.bk-drawers .bk-callno { top: 6px; left: 6px; right: auto; bottom: auto; }
.bk-drawers figcaption { margin-top: 10px; padding: 8px 10px; border-radius: 3px; text-align: center; background: linear-gradient(#ead296, #c8a65a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .3); }
.bk-drawers figcaption a { display: block; font: 500 17px/1.3 var(--display); color: #2b2219; text-decoration: none; overflow-wrap: anywhere; }
.bk-drawers figcaption small { font-size: 12px; color: #4a3a22; }
.bk-drawers-foot { justify-content: center; }

/* ---------- the store: the members' counter ---------- */
.bk-members { padding: 22px 0 30px; max-width: 1000px; }
.bk-members .shop-h1 { max-width: 780px; font-size: clamp(25px, 6vw, 38px); line-height: 1.35; }
.bk-balance { margin: 14px 0 0; }
.bk-balance .coin { font-style: normal; color: var(--brass); }
.bk-members .promo { margin-top: 18px; }
.bk-perks { margin-top: 24px; }
.bk-perks h2, .bk-tokens h2, .bk-tariff h2 { margin-bottom: 10px; font-size: 21px; }
.bk-perks ul { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; }
.bk-perks li { position: relative; min-width: 0; padding: 12px 14px 12px 40px; background: var(--bg2); border: 1px solid var(--line); }
.bk-perks li::before { content: "\2713"; position: absolute; left: 15px; top: 12px; font-weight: 700; color: var(--green); }
.bk-perks strong { display: block; }
.bk-perks span { font-size: 14px; color: var(--mut); }
.bk-cards { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 22px 0 0; padding: 0; }
.bk-card { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 18px 16px 26px; border: 1px solid var(--line2); border-radius: 10px;
  background: var(--bg2) linear-gradient(90deg, var(--green) 0 8px, transparent 8px); box-shadow: 0 8px 20px rgba(60, 40, 20, .08); }
.bk-card-best { border: 2px solid var(--green); background-color: #f2f6f0; }
.bk-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.bk-card-top b { font: 500 21px/1.2 var(--display); }
.bk-card-tag { padding: 3px 8px; border-radius: 3px; background: var(--stamp); color: #fff; font-size: 12px; font-weight: 700; }
.bk-card-first { background: var(--brass); }
.bk-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; }
.bk-card-price b { font: 400 42px/1 var(--latin); color: var(--fg); }
.bk-card-price span { color: var(--mut); }
.bk-card-price s { font-size: 14px; color: var(--dim); }
.bk-card-price mark { padding: 1px 6px; border-radius: 3px; background: var(--green-wash); color: var(--green-lo); font-size: 13px; font-weight: 700; }
.bk-card-terms { margin: 0; font-size: 13px; line-height: 1.6; color: var(--mut); }
.bk-card-terms strong { display: block; margin-top: 2px; color: var(--fg); }
.bk-card .btn { width: 100%; margin-top: auto; }
.bk-tokens, .bk-tariff { margin-top: 32px; }
.bk-tokens-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bk-tokens .pack { width: 100%; min-width: 0; background: var(--bg2); border: 1px solid var(--line2); border-radius: 14px; }
.bk-tariff table { width: 100%; border-collapse: collapse; background: var(--bg2); border: 1px solid var(--line2); }
.bk-tariff th, .bk-tariff td { padding: 11px 14px; border-bottom: 1px dotted var(--line2); text-align: start; font-weight: 400; color: var(--mut); }
.bk-tariff td { text-align: end; font-weight: 700; color: var(--fg); white-space: nowrap; }
.bk-tariff td::after { content: " \2726"; color: var(--brass); }
.bk-tariff .muted { margin-top: 10px; font-size: 13px; }

/* ---------- about: the preface; legal: the rule book ---------- */
.bk-preface { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 48px; padding-bottom: 30px; }
.bk-preface > * { min-width: 0; }
.bk-preface-toc ul { list-style: none; counter-reset: bk-p; margin: 6px 0 0; padding: 12px 16px; background: var(--bg2); border: 1px solid var(--line); }
.bk-preface-toc li { counter-increment: bk-p; padding: 5px 0; }
.bk-preface-toc a { color: var(--green); font-size: 14px; text-decoration: none; }
.bk-preface-toc a::before { content: counter(bk-p, lower-roman) ".\00A0"; font-family: var(--latin); color: var(--stamp); }
.bk-preface-body { max-width: var(--read); }
.bk-preface-body section { padding-top: 22px; }
.bk-preface-body h2 { margin-bottom: 8px; font-size: 24px; }
.bk-preface-body p { margin: 0 0 10px; line-height: 1.85; }
.bk-terms { margin: 0; padding-left: 18px; }
.bk-terms li { margin: 8px 0; line-height: 1.8; color: var(--mut); }
.bk-terms strong { color: var(--fg); }
.bk-preface a:not(.bk-btn) { color: var(--green); }
.bk-rulebook { padding: 26px 0 30px; }
.bk-rulebook h1 { font-size: 32px; }
.bk-rulebook ul { list-style: none; counter-reset: bk-r; margin: 18px 0 0; padding: 8px 20px; background: var(--bg2); border: 1px solid var(--line2); }
.bk-rulebook li { counter-increment: bk-r; border-bottom: 1px dotted var(--line2); }
.bk-rulebook li:last-child { border-bottom: 0; }
.bk-rulebook a { display: flex; gap: 12px; padding: 12px 0; color: var(--fg); text-decoration: none; }
.bk-rulebook a::before { content: counter(bk-r, decimal-leading-zero); font: 400 17px/1.5 var(--latin); color: var(--stamp); }
.bk-rulebook a:hover { color: var(--green); }

/* ---------- wider screens ---------- */
@media (min-width: 640px) {
  .bk-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-genre { display: block; }
  .bk-drawers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-perks ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-feature { grid-template-columns: 150px minmax(0, 1fr); }
  .bk-back-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-back-cols ul { flex-direction: column; gap: 6px; }
  .bk-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 820px) {
  .bk-howto ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-howto li { display: block; padding: 18px; border-bottom: 0; border-inline-end: 1px dashed var(--line2); }
  .bk-howto li:last-child { border-inline-end: 0; }
  .bk-howto li::before { display: block; margin-bottom: 10px; text-align: start; }
  .bk-howto strong, .bk-howto span { display: block; }
  .bk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-request { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 28px; align-items: center; padding: 28px 30px; }
  .bk-request h2, .bk-request p { grid-column: 1; }
  .bk-request p { margin-bottom: 0; }
  .bk-request .bk-btn { grid-column: 2; grid-row: 1 / span 2; }
}
@media (min-width: 900px) {
  .bk-motto { display: block; }
  .bk-counter { grid-template-columns: minmax(0, 1fr) 380px; gap: 52px; align-items: center; padding: 48px 0 16px; }
  .bk-pick { grid-template-columns: minmax(0, 1fr); padding: 18px; transform: rotate(1.2deg); }
  .bk-pick-cover { width: 76%; margin: 0 auto; }
  .bk-pick figcaption { align-items: center; text-align: center; }
  .bk-spread { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 52px; align-items: start; }
  .bk-left-page { position: sticky; top: 20px; }
  .bk-titlepage { text-align: start; }
  .bk-facts { justify-content: flex-start; }
  .bk-epigraph { margin-left: 0; text-align: start; }
  .bk-epigraph::after { margin-left: 0; }
  .bk-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bk-drawers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bk-preface { grid-template-columns: 250px minmax(0, 1fr); }
  .bk-preface .bk-leaflet-head { grid-column: 1 / -1; }
  .bk-preface-toc { position: sticky; top: 20px; align-self: start; }
}
@media (min-width: 1024px) {
  .bk-sign-row { padding-inline: 32px; }
  .bk-shelves { padding-inline: 32px; }
  .bk-back-in { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 44px; }
  .foot.bk-back { padding-inline: 32px; }
}


/* ---------- phones: the signed-in sign row must fit 360 px ---------- */
@media (max-width: 520px) {
  .bk-rates table, .bk-rates tbody, .bk-rates tfoot, .bk-rates tr, .bk-rates th, .bk-rates td { display: block; width: auto; }
  .bk-rates th { padding-bottom: 0; border-bottom: 0; }
  .bk-rates td { padding-top: 2px; }
}
@media (max-width: 440px) {
  .ph .lock { font-size: 11.5px; }
  body:has(.bk-tag) .bk-logo b { display: none; }
  .bk-login, .bk-adult { display: none; }
  .bk-logo b { font-size: 24px; }
  .bk-catalog-card { grid-template-columns: minmax(0, 1fr); }
  .bk-catalog-card dt { padding-bottom: 0; border-bottom: 0; }
  .bk-feature { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 380px) {
  .bk-tag { padding: 0 8px; }
  .bk-join { padding: 0 11px; font-size: 13px; }
  .bk-tokens-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-book-title { font-size: 16px; }
  .bk-borrow-go { padding: 0 11px; }
}
.bk-book-title, .bk-h1, .home-h1, .bk-leaflet-head h1, .bk-members .shop-h1, .bk-pick b, .bk-feature-name b { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .bk-cover, .bk-btn, .bk-cover video, [data-bk-photos] img { transition: none; }
  .bk-book:hover .bk-cover { transform: none; }
  .bk-pick { transform: none; }
}
/* end HappyBook */

/* lightbox-unlock-2026-10-19: a locked photo in the viewer carries its unlock button in the middle (as on aigirl.best), not
   beside close: lock, "Unlock this photo", the price - one big tap target over the blurred picture (site/<key>/templates/
   _lightbox.php). The arrows stay clickable on both sides of it. */
.lightbox .lb-lock { width: auto; height: auto; min-width: 150px; max-width: min(70vw, 260px); padding: 16px 22px; border: 0; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--grad); color: #fff; cursor: pointer;
  pointer-events: auto; box-shadow: 0 10px 32px rgba(0,0,0,.45); text-align: center; font: inherit; z-index: 2; }
.lightbox .lb-lock[hidden] { display: none; }
.lightbox .lb-lock svg { width: 30px; height: 30px; margin-bottom: 4px; }
.lightbox .lb-lock b { font-size: 16px; font-weight: 700; line-height: 1.2; }
.lightbox .lb-lock small { font-size: 13px; opacity: .9; }
.lightbox .lb-lock:hover { filter: brightness(1.1); }
.lightbox .lb-lock:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* self-hosted-fonts-2026-10-29: Instrument Serif (from site/amature, SIL Open Font License), Latin only - the regular
   face for call numbers and numerals, the italic for the wordmark (preloaded by _head.php). font-display: swap; it only
   ever sits in boxes of a fixed size (badges, the sign), so the swap moves nothing. Hangul: the system's faces. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrumentserif-2d243d02.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrumentserif-52a6c245.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* premium-more-2026-10-22: the Premium page's long half (templates/_premium_more.php) - guest / free member / Premium side
   by side, the USDT walk-through and the FAQ - on this site's own colours (--accent, --line, --bg2, --fg, --mut, --dim);
   and the price on a locked tile of her gallery ("Unlock · 10 credits"), centred and wrapped inside the tile. */
.ph .lock { text-align: center; padding: 0 6px; line-height: 1.25; }
.prem-compare, .prem-usdt, .prem-faq { margin: 30px 0 0; min-width: 0; }
.prem-lead { color: var(--mut); margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.prem-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; line-height: 1.4; }
.prem-table th, .prem-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
.prem-table thead th { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); font-weight: 700; }
.prem-table thead th.prem-col { color: var(--accent); }
.prem-table th[scope=row] { width: 31%; font-weight: 600; color: var(--fg); }
.prem-table td { color: var(--mut); }
.prem-table td.prem-col { color: var(--fg); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.prem-table td b { color: var(--fg); }
.prem-line { display: block; }
.prem-line + .prem-line { margin-top: 2px; }
.prem-no { color: var(--dim); }
.prem-note { color: var(--dim); font-size: 13px; line-height: 1.5; margin: 10px 0 0; }
.prem-steps { list-style: none; margin: 0; padding: 0; counter-reset: prem; display: grid; gap: 10px; }
.prem-steps li { counter-increment: prem; position: relative; padding: 12px 14px; padding-inline-start: 50px; background: var(--bg2);
  border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; line-height: 1.5; color: var(--mut); overflow-wrap: anywhere; }
.prem-steps li::before { content: counter(prem); position: absolute; inset-inline-start: 14px; top: 11px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--bg); font: 700 13px/24px var(--sans); text-align: center; }
.prem-faq details { border-bottom: 1px solid var(--line); }
.prem-faq summary { cursor: pointer; list-style: none; position: relative; padding: 14px 0; padding-inline-end: 30px; font-weight: 600; color: var(--fg); line-height: 1.4; overflow-wrap: anywhere; }
.prem-faq summary::-webkit-details-marker { display: none; }
.prem-faq summary::after { content: '+'; position: absolute; inset-inline-end: 4px; top: 11px; font-size: 20px; line-height: 1; color: var(--accent); }
.prem-faq details[open] summary::after { content: '\2212'; }
.prem-faq details p { margin: 0 0 14px; color: var(--mut); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.prem-compare a, .prem-usdt a, .prem-faq a { color: var(--accent); }
@media (max-width: 560px) {
  .prem-table, .prem-table tbody { display: block; }
  .prem-table thead { display: none; }
  .prem-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6px; border-bottom: 1px solid var(--line); padding: 8px 0; }
  .prem-table th[scope=row] { grid-column: 1 / -1; width: auto; border: 0; padding: 2px 0 6px; }
  .prem-table td { border: 0; padding: 4px 6px; font-size: 13px; border-radius: 6px; }
  .prem-table td.prem-span { grid-column: span 2; }
  .prem-table td[colspan="3"] { grid-column: 1 / -1; }
  .prem-table td::before { content: attr(data-col); display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--dim); }
}

/* offer-bar-cls-2026-10-28: the countdown is "--:--:--" in the html and "6d 21:47:42" once app.js ticks - wider, so on a phone
   the bar wrapped to a second line and moved <main> (PSI mobile sexhihi CLS 0.153). Its width is held from the first paint. */
.offer-bar time { display: inline-block; min-width: 12ch; text-align: center; }

/* landing-layout-2026-10-29 (app/landing_layout.php: content rules 2 and 4, as batch2 2c6beb56) */
.lv-byline { margin: 10px 0 0; font-size: 13px; line-height: 1.4; opacity: .75; }
.lv-sec details { margin: 0 0 20px; }
.lv-sec summary { cursor: pointer; list-style: none; }
.lv-sec summary::-webkit-details-marker { display: none; }
.lv-sec summary h2 { display: inline; }
.lv-sec article { margin: 0 0 24px; }
.lv-sec .lv-body p, .lv-sec details p { margin: 10px 0 0; }