/* Fonts are served from our own site: no extra connection to Google, faster first paint. */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/jakarta-400.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/jakarta-500.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/jakarta-600.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/jakarta-700.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/jakarta-800.woff2) format('woff2'); }
:root {
  --green: #0B6B3F; --green-d: #084D2E; --green-t: #EAF5EF;
  --amber: #F5A524; --amber-t: #FFF4DB; --amber-d: #8A5A00;
  --ink: #10231C; --muted: #5B6B64; --line: #E6E9E7; --soft: #F4F6F5; --bg: #FFFFFF;
  --red: #B42318; --red-t: #FEF3F2; --dark: #0F1A16; --dark2: #1B2B25;
  --r: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.45; }
a { color: var(--green); }
a:hover { color: var(--green-d); }
img, video { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 560px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.xs { font-size: 12px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 12px; }
.between { justify-content: space-between; }
.wrapflex { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main { padding-bottom: 96px; min-height: 70vh; }
.section { padding-top: 24px; padding-bottom: 24px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-title h2 { font-size: 20px; font-weight: 800; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 12px; height: 60px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 22px; letter-spacing: -0.03em; }
.brand:hover { color: var(--ink); }
.brand .mark { width: 34px; height: 34px; border-radius: 9px; }
.top nav.desk { display: none; gap: 4px; margin-left: 12px; }
.top nav.desk a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; padding: 10px 12px; border-radius: 10px; }
.top nav.desk a:hover, .top nav.desk a.on { background: var(--soft); }
.top .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.searchbox { display: none; }
.searchbox input { height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); padding: 0 16px; font: inherit; font-size: 14px; width: 220px; }

/* Bottom nav (phones) */
.bottom { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: #fff; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); padding: 4px 0 calc(6px + env(safe-area-inset-bottom)); }
.bottom a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); text-decoration: none; padding: 6px 0; min-height: 48px; justify-content: center; }
.bottom a.on { color: var(--ink); font-weight: 700; }
.bottom svg, .ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 860px) {
  .top nav.desk, .searchbox { display: flex; }
  .bottom { display: none; }
  main { padding-bottom: 48px; }
}

/* Buttons & forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 12px; border: 0; background: var(--green); color: #fff; font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--green-d); color: #fff; }
.btn.block { width: 100%; }
.btn.big { min-height: 54px; font-size: 16px; font-weight: 800; border-radius: 14px; }
.btn.ghost { background: #fff; color: var(--ink); border: 1.5px solid #D5DBD8; }
.btn.ghost:hover { background: var(--soft); color: var(--ink); }
.btn.dark { background: var(--ink); }
.btn.dark:hover { background: #000; }
.btn.amber { background: var(--amber); color: var(--ink); }
.btn.amber:hover { background: #E2941A; color: var(--ink); }
.btn.danger { background: #fff; color: var(--red); border: 1.5px solid var(--red); }
.btn.danger:hover { background: var(--red-t); color: var(--red); }
.btn.sm { min-height: 38px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--soft); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill.on { background: var(--ink); color: #fff; }
.pill:hover { color: inherit; }
.pill.on:hover { color: #fff; }
.pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
label.lbl { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.field { display: flex; flex-direction: column; }
.hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
input:not([type]), input[type=text], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=month], input[type=datetime-local], input[type=email], input[type=url], input[type=search], select, textarea {
  width: 100%; min-height: 48px; border: 1.5px solid #D5DBD8; border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 16px; color: var(--ink); background: #fff;
}
textarea { min-height: 100px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
input[type=file] { font: inherit; font-size: 14px; width: 100%; padding: 14px; border: 1.5px dashed #B9C3BE; border-radius: 12px; background: #F8FAF9; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; min-height: 44px; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--green); flex-shrink: 0; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.choice input { position: absolute; opacity: 0; }
.choice span { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 1.5px solid #D5DBD8; border-radius: 12px; font-weight: 700; font-size: 14px; cursor: pointer; background: #fff; }
.choice input:checked + span { border: 2px solid var(--green); background: var(--green-t); color: var(--green); }
.choice input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }

/* Alerts */
.alert { padding: 12px 14px; border-radius: 12px; font-size: 14px; margin: 12px 0; }
.alert.ok { background: var(--green-t); color: var(--green-d); }
.alert.err { background: var(--red-t); color: var(--red); }
.alert.info { background: var(--amber-t); color: var(--amber-d); }

/* Cards */
.card { background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.pad { padding: 16px; }
.box { background: var(--soft); border-radius: var(--r); padding: 14px 16px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.vcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; text-decoration: none; color: var(--ink); }
.vcard:hover { color: var(--ink); box-shadow: 0 6px 20px rgba(16,35,28,.08); }
.thumb { position: relative; aspect-ratio: 16 / 10; background: var(--dark2); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.locked img { filter: blur(10px) brightness(.7); transform: scale(1.1); }
.thumb .dur { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.thumb .price { position: absolute; bottom: 10px; right: 10px; background: var(--green); color: #fff; font-weight: 800; font-size: 13px; padding: 6px 12px; border-radius: 999px; }
.thumb .price.free { background: #fff; color: var(--green); }
.thumb .lock { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.vcard .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.vcard h3 { font-size: 15px; font-weight: 700; }
.vcard .desc { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.av { width: 36px; height: 36px; border-radius: 50%; background: #F4C9A8; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; overflow: hidden; color: var(--ink); }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.lg { width: 88px; height: 88px; font-size: 28px; }
.av.md { width: 48px; height: 48px; font-size: 16px; }
.tick { width: 16px; height: 16px; stroke: var(--green); fill: none; stroke-width: 2.4; vertical-align: -2px; }
.tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; letter-spacing: .02em; text-transform: uppercase; }
.tag.green { background: var(--green-t); color: var(--green-d); }
.tag.amber { background: var(--amber-t); color: var(--amber-d); }
.tag.red { background: var(--red-t); color: var(--red); }
.tag.grey { background: var(--soft); color: var(--muted); }

/* Hero */
.hero { margin: 16px 0; border-radius: 24px; background: var(--ink); color: #fff; padding: 32px 22px; position: relative; overflow: hidden; }
.hero h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; max-width: 620px; }
.hero h1 em { font-style: normal; color: var(--amber); }
.hero p { color: #C9D3CF; margin-top: 12px; font-size: 16px; max-width: 520px; }
.hero .row { margin-top: 22px; flex-wrap: wrap; }
.hero .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.hero .btn.ghost:hover { background: rgba(255,255,255,.08); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.step { background: var(--soft); border-radius: 16px; padding: 16px; }
.step b { display: block; font-size: 15px; margin-bottom: 4px; }
.step .n { width: 28px; height: 28px; border-radius: 50%; background: var(--amber); color: var(--ink); display: grid; place-items: center; font-weight: 800; font-size: 14px; margin-bottom: 10px; }
@media (min-width: 860px) { .hero { padding: 56px 48px; } .hero h1 { font-size: 48px; } }

/* Creator chips */
.creators { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ccard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 10px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink); }
.ccard:hover { color: var(--ink); background: var(--soft); }

/* Video page */
.player-wrap { position: relative; background: #000; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; }
.player-wrap video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.watermark { position: absolute; pointer-events: none; color: rgba(255,255,255,.35); font-size: 13px; font-weight: 700; animation: wm 24s linear infinite; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
@keyframes wm { 0% { top: 8%; left: 6%; } 25% { top: 70%; left: 60%; } 50% { top: 20%; left: 70%; } 75% { top: 80%; left: 10%; } 100% { top: 8%; left: 6%; } }
.badge-free { position: absolute; top: 12px; left: 12px; background: var(--amber); color: var(--ink); font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; }
.paybox { border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.paybox .price { font-size: 28px; font-weight: 800; }
.vlayout { display: grid; gap: 20px; padding-top: 16px; }
@media (min-width: 860px) { .vlayout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .vlayout aside { position: sticky; top: 76px; } }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.iconbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; }
.iconbtn:hover { background: var(--soft); color: var(--ink); }
.iconbtn.on { color: var(--red); border-color: #F4C7C3; background: var(--red-t); }
.iconbtn.on svg { fill: currentColor; }

/* Pay waiting */
.spinner { width: 56px; height: 56px; border-radius: 50%; border: 5px solid var(--green-t); border-top-color: var(--green); animation: spin 1s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Profile header */
.phead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 24px 0 8px; }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; gap: 8px; width: 100%; max-width: 420px; }
.stats3 b { display: block; font-size: 18px; }

/* Lists & tables */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #EEF1EF; }
.tablebox { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #EEF1EF; vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--soft); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

/* Studio & admin */
.subnav { display: flex; gap: 6px; overflow-x: auto; padding: 12px 0; border-bottom: 1px solid var(--line); margin-bottom: 18px; scrollbar-width: none; }
.subnav a { white-space: nowrap; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; padding: 10px 14px; border-radius: 10px; }
.subnav a.on { background: var(--ink); color: #fff; }
.subnav .count { background: var(--amber); color: var(--ink); border-radius: 999px; font-size: 11px; font-weight: 800; padding: 1px 7px; margin-left: 4px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.kpi { background: var(--soft); border-radius: 14px; padding: 14px; }
.kpi b { display: block; font-size: 22px; font-weight: 800; }
.kpi span { font-size: 12px; color: var(--muted); }
.balance { background: var(--green); color: #fff; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.balance .amt { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; }
.balance .sub { color: #D6EDE0; font-size: 13px; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.bars div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.bars i { display: block; width: 100%; background: var(--green); border-radius: 4px 4px 0 0; min-height: 2px; }
.bars div.max i { background: var(--amber); }
.bars span { font-size: 11px; color: var(--muted); }
.modcard { display: grid; gap: 14px; border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
@media (min-width: 860px) { .modcard { grid-template-columns: 420px 1fr; } }
.modcard video { width: 100%; border-radius: 12px; background: #000; aspect-ratio: 16/9; }
.docs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.docs img { border-radius: 10px; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--soft); }
.docs.big { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.docs.big figure { margin: 0; display: grid; gap: 6px; }
.docs.big img { aspect-ratio: auto; max-height: 420px; object-fit: contain; background: #000; }
details summary { cursor: pointer; font-weight: 700; font-size: 14px; min-height: 40px; display: flex; align-items: center; }
footer.foot { border-top: 1px solid var(--line); padding: 24px 0 110px; color: var(--muted); font-size: 13px; }
footer.foot a { color: var(--muted); margin-right: 14px; }
@media (min-width: 860px) { footer.foot { padding-bottom: 32px; } }
.empty { text-align: center; padding: 40px 16px; color: var(--muted); }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(15,26,22,.6); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.modal[hidden] { display: none; }
.modal-card { position: relative; background: #fff; width: 100%; max-width: 460px; border-radius: 24px 24px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); max-height: 92vh; overflow-y: auto; }
@media (min-width: 600px) { .modal { align-items: center; padding: 16px; } .modal-card { border-radius: 24px; } }
.modal-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: var(--soft); border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink); }
.earnbar { height: 10px; border-radius: 5px; background: #DDE3E0; overflow: hidden; }
.earnbar i { display: block; height: 100%; background: var(--green); }
.num { font-variant-numeric: tabular-nums; }

.topstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
@media (min-width: 640px) { .topstats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.topstats b { display: block; font-size: 18px; font-weight: 800; }
.topstats span { font-size: 12px; color: #C9D3CF; }
.topstats.light span { color: var(--muted); }

.installbox { display: flex; align-items: center; gap: 12px; background: var(--soft); border-radius: 16px; padding: 12px 14px; margin-bottom: 16px; font-size: 13px; }
.installbox[hidden] { display: none; }
.installbox img { border-radius: 11px; }

.langs { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.langs a { margin: 0 !important; text-decoration: none; padding: 6px 0; }
.langs a.on { color: var(--ink) !important; font-weight: 700; text-decoration: underline; }
@media (min-width: 860px) { .subnav { flex-wrap: wrap; overflow: visible; } }
.qr svg { width: 100%; height: auto; display: block; }
.ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.idea { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--r); background: var(--soft); color: var(--ink); text-decoration: none; border: 1.5px solid transparent; }
.idea:hover { border-color: var(--line, #D5DBD8); }
@media (min-width: 860px) { .ideas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Feed ---------- */
.hero-feed { padding: 26px 22px; }
.hero-feed h1 { font-size: 30px; }
.feed { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 70px; }
.fitem { scroll-snap-align: start; }
.fmedia { position: relative; height: min(78vh, 760px); min-height: 460px; border-radius: 22px; overflow: hidden; background: #000; isolation: isolate; }
.fback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) brightness(.55); transform: scale(1.15); z-index: 0; }
.fmedia.gated .fback { filter: blur(22px) brightness(.45); }
.fmedia.gated .fcover { object-fit: cover; } /* the picture itself is already blurred by the server (admin sets how much) */
.fvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; background: transparent; }
.fmedia::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 45%, rgba(0,0,0,.85) 100%); }
.ftop { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 6px; align-items: center; z-index: 3; }
.fdur { margin-left: auto; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.fside { position: absolute; right: 8px; bottom: 150px; display: flex; flex-direction: column; gap: 14px; z-index: 3; }
.fbtn { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; min-width: 48px; }
.fbtn svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.8; padding: 9px; box-sizing: content-box; background: rgba(0,0,0,.35); border-radius: 50%; }
.fbtn[aria-pressed="true"] svg { fill: var(--pink-hot2); stroke: var(--pink-hot2); }
.fbtn:focus-visible svg { outline: 3px solid var(--amber); }
.fbottom { position: absolute; left: 0; right: 64px; bottom: 0; padding: 16px; display: flex; flex-direction: column; gap: 8px; color: #fff; z-index: 3; }
.ftitle { color: #fff; font-weight: 800; font-size: 18px; line-height: 1.25; text-decoration: none; }
.fdesc { color: #E3E9E6; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fgate { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; text-align: center; padding: 24px; }
.fgate b { font-size: 34px; font-weight: 800; border: 3px solid #fff; border-radius: 14px; padding: 4px 14px; }
.fend { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(8,14,11,.72); color: #fff; padding: 24px; text-align: center; }
.fend[hidden] { display: none; }
.fend b { font-size: 20px; }
.sellcta { background: var(--amber-t); border: 2px solid var(--amber); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.sellcta h2 { font-size: 22px; font-weight: 800; }
.player-wrap .fgate { background: rgba(8,14,11,.35); }
/* Post button in the bottom bar */
.bottom a.post { justify-content: center; }
.bottom .plus { display: grid; place-items: center; width: 52px; height: 36px; border-radius: 12px; background: var(--ink); color: #fff; box-shadow: -3px 0 0 var(--amber), 3px 0 0 var(--green); }
.bottom .plus svg { width: 22px; height: 22px; stroke: #fff; }
.big-search input { width: 100%; }
@media (min-width: 860px) { .fmedia { height: min(82vh, 780px); } }
.grid2 { display: grid; gap: 16px; }
@media (min-width: 860px) { .grid2 { grid-template-columns: 1fr 1fr; align-items: start; } }
.page-body h2 { margin-top: 10px; }
.page-body ul { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.page-body p + p { margin-top: 8px; }

/* =====================================================================
   OnlySecretClips theme: black, hot pink, white text, grey accents.
   (Earlier rules use --green for the main action colour and --amber for highlights;
   both now map to pink. Success states keep a real green so "Paid" still reads as good.)
   ===================================================================== */
:root {
  --pink: #FF2E88;        /* bright accent: links, highlights, glow (5.7:1 on black) */
  --pink-btn: #E0157A;    /* button fill: white text passes 4.6:1 */
  --pink-d: #B80F62;
  --pink-rgb: 255, 46, 136; --pink-btn-rgb: 224, 21, 122;
  --pink-2: #FF8CC0; --pink-hot: #FF2E4D; --pink-hot2: #FF4D6D; --pink-warm: #FF4FA3;
  --pink-pale: #FFD3E8; --pink-pale2: #FFB3D5; --pink-t: #2A0C1B; --pink-t2: #1F0B15;
  --green: var(--pink-btn); --green-d: var(--pink-d); --green-t: var(--pink-t);
  --amber: var(--pink); --amber-t: var(--pink-t2); --amber-d: var(--pink-2);
  --ink: #F5F5F7; --muted: #A1A1AA; --line: #26262C; --soft: #17171C; --bg: #09090B;
  --surface: #121216; --surface2: #1A1A20;
  --red: #FF6B6B; --red-t: #2A1215; --dark: #000; --dark2: #141418;
  --ok: #4ADE80; --ok-t: rgba(74, 222, 128, .12);
  color-scheme: dark;
}
a { color: var(--pink); }
a:hover { color: #FF6AAA; }
.top { background: rgba(9, 9, 11, .88); }
.brand { color: #fff; }
.brand b { color: var(--pink); font-weight: 800; }
.bottom { background: #0E0E11; }
.bottom a.on { color: #fff; }
.bottom .plus { background: var(--pink-btn); box-shadow: -3px 0 0 #fff, 3px 0 0 #6B6B75; }
.btn { background: var(--pink-btn); color: #fff; }
.btn:hover { background: var(--pink-d); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border-color: #3A3A42; }
.btn.ghost:hover { background: var(--soft); color: #fff; }
.btn.dark { background: var(--surface2); color: #fff; border: 1px solid #3A3A42; }
.btn.amber { background: var(--pink-btn); color: #fff; box-shadow: 0 6px 24px rgba(var(--pink-rgb), .28); }
.btn.amber:hover { background: var(--pink-d); color: #fff; }
.btn.danger { background: transparent; }
.pill { background: var(--soft); color: var(--muted); }
.pill.on, .pill.on:hover { background: #fff; color: #09090B; }
input, select, textarea { background: var(--surface) !important; color: var(--ink) !important; border-color: #2E2E35 !important; }
input::placeholder, textarea::placeholder { color: #6B6B75; }
input:focus, select:focus, textarea:focus { outline-color: var(--pink); border-color: var(--pink) !important; }
.check input { accent-color: var(--pink-btn); }
.choice span { background: var(--surface); border-color: #2E2E35; }
.choice input:checked + span { border-color: var(--pink); background: var(--green-t); color: #fff; }
.card, .vcard, .modal-card { background: var(--surface); }
.vcard:hover { box-shadow: 0 8px 28px rgba(var(--pink-rgb), .12); border-color: #3A1A2A; }
.av { color: #111; }
.tag.green, .alert.ok { background: var(--ok-t); color: var(--ok); }
.tag.amber { background: rgba(var(--pink-rgb), .16); color: var(--pink-2); }
.tag.red { background: rgba(255, 107, 107, .15); color: #FF8A8A; }
.tag.grey { background: var(--soft); color: var(--muted); }
.alert.info { background: var(--pink-t2); color: var(--pink-pale2); border: 1px solid #3A1A2A; }
.alert.err { background: var(--red-t); color: #FF9A9A; }
.box { background: var(--soft); }
.hero { background: radial-gradient(120% 90% at 100% 0%, rgba(var(--pink-rgb), .35) 0%, rgba(var(--pink-rgb), 0) 55%), #141418; border: 1px solid #2A1520; }
.hero h1 em { color: var(--pink); }
.hero p { color: #C9C9D1; }
.step .n { background: var(--pink-btn); color: #fff; }
.subnav a.on { background: var(--pink-btn); color: #fff; }
.subnav .count { background: #fff; color: #09090B; }
.balance { background: linear-gradient(135deg, var(--pink-btn) 0%, #8E0E50 100%); }
.bars i { background: var(--pink-btn); }
.bars div.max i { background: #fff; }
.earnbar { background: var(--soft); }
.sellcta { background: linear-gradient(160deg, #24101A 0%, #121216 70%); border-color: var(--pink); }
.sellcta h2 { color: #fff; }
.badge-free { background: var(--pink-btn); color: #fff; }
.iconbtn { background: var(--surface); }
.fbtn[aria-pressed="true"] svg { fill: var(--pink); stroke: var(--pink); }
.fend { background: rgba(9, 9, 11, .8); }
.player-wrap { background: #000; }
.tablebox, table { color: var(--ink); }
th { color: var(--muted); }
.foot { border-top-color: var(--line); color: var(--muted); }
.langs a.on { color: #fff !important; }
/* Verified badge: white tick on a hot-pink seal */
.vbadge { width: 16px; height: 16px; vertical-align: -3px; display: inline-block; flex-shrink: 0; }
.vbadge .seal { fill: var(--pink); }
.vbadge .ck { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* Full screen button */
.fsbtn { position: absolute; right: 10px; top: 10px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; cursor: pointer; }
.fsbtn svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }
.ftop .fsbtn { position: static; width: 34px; height: 34px; }
th, td { border-bottom-color: var(--line); }
.list li { border-bottom-color: var(--line); }
.brand { font-size: 18px; gap: 7px; }
.brand .mark { border-radius: 8px; }
@media (min-width: 420px) { .brand { font-size: 21px; } }
@media (max-width: 380px) { .brand span { font-size: 15px; } }
.covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cover { position: relative; cursor: pointer; }
.cover input { position: absolute; opacity: 0; }
.cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; border: 3px solid transparent; }
.cover input:checked + img { border-color: var(--pink); }
.cover input:focus-visible + img { outline: 2px solid #fff; }
.fcover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
.lockcover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 800; background: rgba(9, 9, 11, .45); }
.lockcover svg { width: 44px; height: 44px; stroke: #fff; fill: none; stroke-width: 2; padding: 14px; box-sizing: content-box; border-radius: 50%; background: var(--pink-btn); }
.lockcover:hover { color: #fff; }
.phonebox { display: flex; align-items: stretch; }
.phonebox .dial { display: flex; align-items: center; padding: 0 12px; border: 1.5px solid #2E2E35; border-right: 0; border-radius: 12px 0 0 12px; background: var(--soft); color: var(--ink); font-weight: 700; white-space: nowrap; }
.phonebox input { border-radius: 0 12px 12px 0 !important; }
.hero-sub { margin-top: 16px !important; font-size: 14px !important; color: var(--pink-pale2) !important; font-weight: 600; }
.comments { display: flex; flex-direction: column; gap: 10px; }
.comment { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.hero-tagline { margin-top: 18px !important; font-size: 12px !important; font-weight: 800; letter-spacing: .18em; color: var(--pink) !important; }
.hero-feed h1 em { display: block; }
.toasts { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { pointer-events: auto; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 14px; background: #1A0B13; border: 1px solid var(--pink); color: #fff; text-decoration: none; box-shadow: 0 10px 30px rgba(var(--pink-rgb), .25); animation: toastIn .3s ease; transition: opacity .4s, transform .4s; }
.toast:hover { color: #fff; }
.toast span { font-size: 13px; color: #E3C3D3; }
.toast.out { opacity: 0; transform: translateY(-8px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.bell { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink); }
.bell:hover { background: var(--soft); color: #fff; }
.bell .count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; border-radius: 9px; background: var(--pink-btn); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }
@media (max-width: 600px) { .hide-sm { display: none !important; } }
.joinpick { text-decoration: none; border: 1.5px solid #2E2E35; transition: border-color .15s; }
.joinpick:hover { border-color: var(--pink); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid3 .card { text-decoration: none; padding: 14px; }
.menu-list li { padding: 0; }
.menu-list li a, .menu-list .linkbtn { display: flex; align-items: center; gap: 12px; padding: 13px 4px; color: var(--ink); text-decoration: none; font-weight: 600; width: 100%; }
.menu-list svg { width: 20px; height: 20px; flex: none; }
.linkbtn { background: none; border: 0; font: inherit; cursor: pointer; text-align: start; min-height: 0; }
.menu-list li:last-child { border-bottom: 0; }
/* Header: never wrap or squash the logo; extra tabs scroll sideways */
.top .brand { flex-shrink: 0; }
.top nav.desk { min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.top nav.desk::-webkit-scrollbar { display: none; }
.top nav.desk a, .top .right .btn { white-space: nowrap; }
.top .right { flex-shrink: 0; }
@media (max-width: 1360px) { body[data-user] .top .searchbox { display: none; } }
/* Maintenance screen */
body.maint { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(ellipse at top, #3A0F25 0%, var(--bg) 60%); padding: 24px 16px; }
.maint-box { max-width: 460px; text-align: center; display: grid; justify-items: center; gap: 10px; }
.maint-box .brand-txt { font-weight: 800; font-size: 22px; color: #fff; margin: 0; }
.maint-box .brand-txt b { color: var(--pink); }
.maint-box h1 { font-size: 30px; margin: 14px 0 0; color: #fff; }
.maint-box .lead { color: var(--ink); font-size: 16px; line-height: 1.6; margin: 0; }
.maint-box .when { color: var(--ink); margin: 0; }
.maint-banner { background: #3A2A06; color: #FFD27A; text-align: center; font-size: 13px; font-weight: 700; padding: 8px 16px; }
/* Statements */
table.stmt { width: 100%; border-collapse: collapse; font-size: 14px; }
table.stmt td, table.stmt th { padding: 9px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.stmt td:last-child, table.stmt th:last-child, table.stmt.lines td:nth-child(4), table.stmt.lines th:nth-child(4) { text-align: right; white-space: nowrap; }
table.stmt th { font-size: 12px; color: var(--muted); font-weight: 700; }
table.stmt tr.total td { font-weight: 800; color: #fff; border-bottom: 0; border-top: 2px solid var(--pink); }
table.stmt .pos { color: #5BE49B; } table.stmt .neg { color: #FF7A9A; }
.geobar { height: 4px; background: var(--soft); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.geobar span { display: block; height: 100%; background: var(--pink); border-radius: 2px; }
table.geo td:nth-child(n+2), table.geo th:nth-child(n+2) { text-align: right; white-space: nowrap; }
/* ---------- Live ---------- */
.livedot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--pink-hot); box-shadow: 0 0 0 0 rgba(255,46,77,.6); animation: livepulse 1.6s infinite; vertical-align: middle; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(255,46,77,.55); } 70% { box-shadow: 0 0 0 9px rgba(255,46,77,0); } 100% { box-shadow: 0 0 0 0 rgba(255,46,77,0); } }
@media (prefers-reduced-motion: reduce) { .livedot { animation: none; } }
.livebadge { background: var(--pink-hot); color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .06em; padding: 4px 8px; border-radius: 6px; }
.livebadge.off { background: #3A3A44; }
.liveviewers { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 6px; }
.liveviewers svg { width: 14px; height: 14px; }
.livetimer { background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.livegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.livestrip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.livestrip::-webkit-scrollbar { display: none; }
.livestrip .livecard { flex: 0 0 150px; }
.livecard { position: relative; aspect-ratio: 9 / 14; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 12px; text-decoration: none; color: #fff;
  background: radial-gradient(circle at 50% 35%, #5A1435 0%, #1A0A12 60%, #09090B 100%); border: 1.5px solid var(--pink-hot); }
.livecard .livebadge { position: absolute; top: 10px; left: 10px; }
.livecard .liveviewers { position: absolute; top: 10px; right: 10px; }
.livecard .accbadge { position: absolute; top: 40px; left: 10px; }
.accbadge { background: rgba(0,0,0,.6); color: #fff; font-weight: 700; font-size: 11px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.livegate { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 70px 20px 24px; text-align: center; color: #fff;
  background: radial-gradient(120% 80% at 50% 0%, rgba(var(--pink-btn-rgb), .35), transparent 60%), linear-gradient(#141018, #07060a); }
.livegate .gicon { font-size: 40px; line-height: 1; }
.livegate .gtitle { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.livegate .gprice { font-size: 30px; font-weight: 800; color: var(--pink-warm); }
.livegate .gform { width: 100%; max-width: 320px; gap: 10px; }
.livegate input { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.25) !important; color: #fff !important; }
.livegate input::placeholder { color: rgba(255,255,255,.55); }
.livegate [data-gstatus] { min-height: 1.2em; color: var(--pink-pale); margin: 0; }
.codebox { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; background: var(--surface2, #1A1A20); padding: 2px 8px; border-radius: 6px; }
.chat li.join { color: var(--pink-pale); font-style: italic; }
.livecard .liveface { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%); }
.livecard .liveface .av { box-shadow: 0 0 0 3px var(--pink-hot); }
.livetitle { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.livepage { max-width: 1040px; margin: 0 auto; padding: 12px 16px 24px; display: grid; gap: 16px; }
@media (min-width: 900px) { .livepage { grid-template-columns: minmax(0, 460px) 1fr; align-items: start; } }
.stage { position: relative; width: 100%; max-width: 460px; margin: 0 auto; aspect-ratio: 9 / 16; max-height: calc(100vh - 150px); background: #000; border-radius: 18px; overflow: hidden; }
.stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.stage video.mirror { transform: scaleX(-1); }
.stage .fgate { position: absolute; inset: 0; }
.stage-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 12px; background: linear-gradient(rgba(0,0,0,.6), transparent); z-index: 2; }
.stage-top .who { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; flex: 1; min-width: 0; font-size: 14px; }
.stage-top .who > span { min-width: 0; overflow: hidden; }
.stage-top .who .xs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: #fff; font-weight: 600; text-align: center; padding: 20px; z-index: 1; }
.spin.sm { width: 12px; height: 12px; border-width: 2px; display: inline-block; vertical-align: -1px; margin-right: 4px; }
.spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--pink); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.unmute { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 3; background: rgba(0,0,0,.65); color: #fff; border: 0; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 700; display: flex; gap: 6px; align-items: center; cursor: pointer; }
.stage-chat { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 10px 12px; background: linear-gradient(transparent, rgba(0,0,0,.75) 35%); z-index: 2; }
.chat { list-style: none; margin: 0 0 8px; padding: 0; max-height: 34vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; -webkit-mask-image: linear-gradient(transparent, #000 25%); mask-image: linear-gradient(transparent, #000 25%); scrollbar-width: none; }
.chat li { color: #fff; font-size: 14px; line-height: 1.35; text-shadow: 0 1px 2px rgba(0,0,0,.8); word-wrap: break-word; }
.chat li b { color: var(--pink-pale2); margin-right: 2px; }
.chat li.tip { background: rgba(var(--pink-btn-rgb), .45); border-radius: 10px; padding: 4px 8px; align-self: flex-start; font-weight: 700; }
.chat[data-owner] li { cursor: pointer; }
.modbar { display: inline-flex; gap: 10px; margin-left: 8px; }
.modbar .linkbtn { color: #FFD27A; text-decoration: underline; }
.chatform { display: flex; gap: 6px; align-items: center; }
.chatform input { flex: 1; min-width: 0; min-height: 42px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); color: #fff; padding: 0 14px; }
.chatform input.nick { flex: 0 0 96px; }
.chatform .btn { min-height: 42px; border-radius: 999px; }
.tipbtn { font-size: 18px; padding: 0 12px; }
.chaterr { color: #FFB3B3; margin: 6px 4px 0; }
.tipfx { position: absolute; left: 12px; top: 34%; z-index: 3; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.tippop { display: flex; align-items: center; gap: 8px; background: rgba(var(--pink-btn-rgb), .85); color: #fff; font-weight: 700; font-size: 13px; padding: 6px 12px 6px 6px; border-radius: 999px; animation: tipin 4.2s ease forwards; }
.tippop em { font-style: normal; font-size: 30px; line-height: 1; }
@keyframes tipin { 0% { opacity: 0; transform: translateX(-30px) scale(.8); } 10% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }
.stage-ended { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(9,9,11,.92); color: #fff; padding: 20px; text-align: center; }
.stage-ended[hidden] { display: none; }
.bcontrols { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 16px; background: linear-gradient(transparent, rgba(0,0,0,.85) 30%); text-align: center; color: #fff; }
.bcontrols[hidden] { display: none; }
#bstage .stage-chat { bottom: 88px; background: none; }
.liveside { display: grid; gap: 12px; align-content: start; }
dialog.sheet { border: 0; border-radius: 20px 20px 0 0; background: var(--surface); color: var(--ink); width: 100%; max-width: 520px; margin: auto auto 0; padding: 18px 16px 24px; max-height: 88vh; }
dialog.sheet::backdrop { background: rgba(0,0,0,.6); }
@media (min-width: 700px) { dialog.sheet { border-radius: 20px; margin: auto; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 17px; }
.qopt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1.5px solid #2E2E35; border-radius: 14px; cursor: pointer; }
.qopt input { margin-top: 4px; accent-color: var(--pink-btn); }
.qopt span { display: grid; gap: 2px; } .qopt small { color: var(--muted); font-size: 13px; }
.qopt:has(input:checked) { border-color: var(--pink); background: var(--green-t); }
[hidden] { display: none !important; }
.chat li { display: block; }
.chat li b { display: inline; }
.stmtcards .card { display: grid; gap: 2px; align-content: start; }
.stmtcards .card b { font-size: 17px; }
@media (max-width: 600px) {
  table.stmt.lines th:nth-child(3), table.stmt.lines td:nth-child(3), table.stmt.lines th:nth-child(5), table.stmt.lines td:nth-child(5) { display: none; }
  table.stmt { font-size: 13px; }
}
.livepin { position: absolute; top: 64px; left: 12px; right: 12px; z-index: 3; background: rgba(var(--pink-btn-rgb), .88); color: #fff; font-weight: 700; font-size: 14px; line-height: 1.35; padding: 8px 12px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.stage .unmute { top: 38%; }
.tipbtn { font-size: 14px; white-space: nowrap; }
/* Channel */
.chanhead { gap: 12px; align-items: center; }
.chanhead img { border-radius: 14px; }
.chanpost.new { border: 1.5px solid var(--pink); }
.chanbody { white-space: pre-line; line-height: 1.6; font-size: 15.5px; margin-bottom: 12px; overflow-wrap: anywhere; }
.chanimg { width: 100%; border-radius: 12px; margin-bottom: 10px; display: block; }
.chanreact { margin-top: 12px; }
.react { min-width: 52px; min-height: 40px; border-radius: 999px; border: 1.5px solid #2E2E35; background: var(--surface2); font-size: 20px; cursor: pointer; transition: transform .12s; }
.react.on { border-color: var(--pink); background: var(--green-t); transform: scale(1.06); }
.react:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.navdot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 2px var(--bg); }
.iconbtn2 { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink); }
.iconbtn2:hover { background: var(--soft); color: #fff; }
.installsheet { padding: 20px 18px 22px; }
.iossteps { margin: 16px 0 0; padding-left: 22px; display: grid; gap: 10px; font-weight: 600; }
.iossteps svg { vertical-align: -4px; color: #4BA3FF; }
.installbtn { min-height: 52px; font-size: 17px; }
/* Phones turned sideways: give the screen to the content. Slim header that scrolls away, icon-only bottom bar. */
@media (orientation: landscape) and (max-height: 500px) {
  .top { position: static; }
  .top .wrap { height: 48px; }
  .bottom { padding: 2px 0 calc(2px + env(safe-area-inset-bottom)); }
  .bottom a { min-height: 40px; padding: 2px 0; font-size: 0; gap: 0; }
  .bottom .plus { height: 30px; width: 46px; }
  main { padding-bottom: 60px; }
  .stage { max-height: calc(100vh - 70px); }
  .hero h1 { font-size: 30px; }
}

/* ID check: pick from gallery or camera, with a preview */
.idpick { gap: 6px; }
.idprev { display: flex; align-items: center; gap: 10px; }
.idprev img { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; border: 1px solid #2E2E35; }
.idpick .btn .ico, .idpick .btn svg { width: 16px; height: 16px; }
/* Admin ID tools */
.docs.big figure { overflow: hidden; }
.docs.big img { transition: transform .2s ease; transform-origin: center; }
.docs.big img.zoomed { cursor: zoom-out; }

/* A live stream inside the feed */
.flive { display: block; text-decoration: none; color: #fff; background: radial-gradient(circle at 50% 38%, #5a1838 0%, #1a0a14 55%, #000 100%); }
.flive .fbottom { right: 0; }
.fliveface { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 3; }
.fliveface .av { width: 120px; height: 120px; font-size: 40px; box-shadow: 0 0 0 4px var(--pink-hot), 0 0 0 10px rgba(255,46,77,.25); animation: avpulse 2s ease-in-out infinite; }
@keyframes avpulse { 50% { box-shadow: 0 0 0 4px var(--pink-hot), 0 0 0 16px rgba(255,46,77,.08); } }
@media (prefers-reduced-motion: reduce) { .fliveface .av { animation: none; } }

/* Featured and New badges */
.tag.pink { background: var(--pink); color: #fff; }
.tag.newtag { background: #fff; color: #0B0B10; }

.ftop { flex-wrap: wrap; row-gap: 6px; padding-right: 44px; }
.ftop .tag { white-space: nowrap; }
.ftop .fsbtn { position: absolute; top: 0; right: 0; }

/* Fits every phone: wide tables scroll inside their card, and nothing can push the page sideways. */
html, body { max-width: 100%; overflow-x: clip; }
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tscroll > table.stmt { min-width: 100%; }
.tscroll > table.stmt th { white-space: nowrap; }
img, video, iframe, canvas, svg { max-width: 100%; }
input, select, textarea { max-width: 100%; }
.row.wrapflex, .row { min-width: 0; }
.langpick select { min-width: 0; flex: 1 1 160px; }
/* Very small phones (320–345px wide) */
@media (max-width: 345px) {
  .wrap { padding-left: 12px; padding-right: 12px; }
  .brand { font-size: 15px; gap: 5px; }
  .brand .mark { width: 28px; height: 28px; }
  .top .wrap { gap: 6px; }
  .top .right { gap: 4px; }
  .top .right .btn.sm { padding-left: 10px; padding-right: 10px; }
}

/* Live chat: empty hint, creator replies, own-live note */
.chat.isempty::before { content: attr(data-empty); color: rgba(255,255,255,.75); font-size: 13px; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.chat li.host { background: rgba(255,255,255,.14); border-radius: 10px; padding: 4px 8px; align-self: flex-start; }
.chat li.host b::after { content: ' · creator'; font-weight: 600; font-size: 11px; color: var(--pink-2); }
.ownnote { color: var(--pink-pale); margin: 0 0 6px; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
#bstage .chatform { margin-top: 6px; }

/* After-live summary, tips and past lives */
.lsumtotal { display: grid; gap: 2px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(var(--pink-rgb), .22), rgba(var(--pink-rgb), .06)); }
.lsumtotal b { font-size: 34px; letter-spacing: -.02em; color: #fff; }
.tiplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tiplist li { display: grid; gap: 2px; padding-left: 14px; border-left: 3px solid var(--pink); }
.tiplist li span { font-size: 14px; color: var(--muted); }
.pastlives { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pastlives a { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: inherit; position: relative; padding-right: 90px; }
.pastlives .earn { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #5BE49B; }
/* Easy to tap with a thumb: links in the footer and short text links get a 32px+ touch area */
.foot a { display: inline-block; padding: 8px 4px; min-height: 32px; }
.foot p { line-height: 2; }
a.xs, p.small > a:only-child, .fmore + p a, a.ftitle { display: inline-block; padding-top: 6px; padding-bottom: 6px; }

/* Live comments easy to read over any picture: each in its own dark bubble */
.stage .chat li.chat, .stage .chat li.join { background: rgba(0,0,0,.52); border-radius: 12px; padding: 5px 10px; align-self: flex-start; max-width: 92%; }
#bstage .chat { max-height: 42vh; -webkit-mask-image: none; mask-image: none; }
#bstage .chat li { font-size: 15px; }
/* Admin users: a card per person on phones, so every button is visible without sliding sideways */
.promoform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
@media (max-width: 760px) {
  table.cardtable, table.cardtable tbody, table.cardtable tr, table.cardtable td { display: block; width: 100%; }
  table.cardtable thead { display: none; }
  table.cardtable tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  table.cardtable td { padding: 4px 0; border: 0; white-space: normal !important; min-width: 0 !important; }
  table.cardtable td[data-label]:not([data-label=""]):not([data-label="User"])::before { content: attr(data-label) ": "; color: var(--muted); font-size: 12px; font-weight: 700; }
  table.cardtable td[data-label=""] { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
  table.cardtable td[data-label=""] form, table.cardtable td[data-label=""] a { margin: 0 !important; }
}

.countsbox { display: grid; gap: 6px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; width: 100%; }

/* ---------- Polished popups ---------- */
/* Alerts (sales, tips, lives, requests, channel) */
.toasts { top: 72px; gap: 10px; width: min(94vw, 440px); }
.toast { position: relative; overflow: hidden; display: grid; grid-template-columns: 42px 1fr 28px; align-items: center; gap: 12px; padding: 12px 10px 14px 12px;
  border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(135deg, rgba(36,14,26,.97), rgba(20,10,16,.97));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--pink-rgb), .18) inset;
  animation: toastIn .45s cubic-bezier(.2,.9,.25,1.15); }
.toast-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, var(--pink), #C2185B); box-shadow: 0 6px 16px rgba(var(--pink-rgb), .35); }
.toast-ic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toast-sale .toast-ic, .toast-tip .toast-ic { background: linear-gradient(135deg, #22C55E, #0F9F4F); box-shadow: 0 6px 16px rgba(34,197,94,.35); }
.toast-live .toast-ic { background: linear-gradient(135deg, #FF3B5C, #D61F45); }
.toast-tx { display: grid; gap: 2px; min-width: 0; }
.toast-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.toast-row b { font-size: 15px; color: #fff; }
.toast-amt { font-weight: 800; font-size: 15px; color: #5BE49B; letter-spacing: -.01em; }
.toast-body { font-size: 13px; color: #CDB8C4; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.toast-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; align-self: start; }
.toast-x:hover { background: rgba(255,255,255,.16); }
.toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--pink), var(--pink-2)); transform-origin: left; animation: toastBar 8s linear forwards; }
.toast.hold .toast-bar { animation-play-state: paused; }
.toast.out { opacity: 0; transform: translateY(-12px) scale(.97); transition: opacity .3s, transform .3s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Page messages (saved, errors, information) */
.alert.flashmsg { display: grid; grid-template-columns: 26px 1fr 28px; align-items: start; gap: 10px; padding: 12px 10px 12px 14px; border-radius: 14px;
  border: 1px solid transparent; border-left-width: 4px; animation: alertIn .35s ease; line-height: 1.45; }
.alert.flashmsg .alert-ic { width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: currentColor;
  -webkit-mask: var(--ic) center / 22px no-repeat; mask: var(--ic) center / 22px no-repeat; }
.alert.flashmsg.ok { background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.25); border-left-color: #22C55E; color: #8FF0B4;
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.3 15.6-4.6-4.6 1.6-1.6 3 3 6.4-6.4 1.6 1.6-8 8z'/%3E%3C/svg%3E"); }
.alert.flashmsg.err { background: rgba(255,90,110,.10); border-color: rgba(255,90,110,.25); border-left-color: #FF5A6E; color: #FFB1BC;
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm1.2 17h-2.4v-2.4h2.4V18zm0-4.4h-2.4V6h2.4v7.6z'/%3E%3C/svg%3E"); }
.alert.flashmsg.info { background: rgba(var(--pink-rgb), .08); border-color: rgba(var(--pink-rgb), .22); border-left-color: var(--pink); color: #FFC2DC;
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm1.2 17h-2.4v-7.6h2.4V18zm0-10h-2.4V5.6h2.4V8z'/%3E%3C/svg%3E"); }
.alert.flashmsg .alert-tx { color: #fff; font-size: 14px; }
.alert-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255,255,255,.06); color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.alert-x:hover { background: rgba(255,255,255,.14); }
.alert.flashmsg.out { opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; }
@keyframes alertIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Live tip popup */
.tipfx { left: 12px; right: 12px; top: 26%; align-items: flex-start; gap: 10px; }
.tippop { position: relative; display: grid; grid-template-columns: 48px auto; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 20px; max-width: min(88%, 340px);
  background: linear-gradient(120deg, rgba(var(--pink-rgb), .96), rgba(194,24,91,.96) 60%, rgba(140,20,90,.96)); color: #fff; font-weight: 600;
  box-shadow: 0 14px 34px rgba(var(--pink-rgb), .45), 0 0 0 1px rgba(255,255,255,.18) inset; animation: tipIn .55s cubic-bezier(.2,1.2,.3,1) both; overflow: visible; }
.tippop.out { animation: tipOut .45s ease forwards; }
.tp-coin { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #FFE58A, #F5B700 60%, #C98A00); box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 6px 14px rgba(0,0,0,.3); animation: coinSpin 1.2s ease .1s; }
.tp-coin svg { width: 28px; height: 28px; fill: none; stroke: #7A4B00; stroke-width: 2.2; stroke-linecap: round; }
.tp-coin svg circle { stroke: rgba(122,75,0,.35); }
.tp-tx { display: grid; gap: 1px; min-width: 0; }
.tp-tx small { font-size: 12px; font-weight: 600; opacity: .92; }
.tp-tx b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; text-shadow: 0 2px 6px rgba(0,0,0,.2); }
.tp-msg { font-size: 13px; font-weight: 500; opacity: .95; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.tp-spark { position: absolute; left: 34px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: #FFE58A; opacity: 0; pointer-events: none;
  animation: spark .9s ease-out .15s forwards; }
.tp-spark:nth-child(odd) { background: #fff; width: 4px; height: 4px; }
@keyframes tipIn { from { opacity: 0; transform: translateX(-40px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes tipOut { to { opacity: 0; transform: translateY(-24px) scale(.95); } }
@keyframes coinSpin { 0% { transform: rotateY(0) scale(.6); } 60% { transform: rotateY(360deg) scale(1.1); } 100% { transform: rotateY(360deg) scale(1); } }
@keyframes spark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)); } }
@media (prefers-reduced-motion: reduce) { .tippop, .tp-coin, .tp-spark, .toast, .toast-bar, .alert.flashmsg { animation: none !important; } }

/* Live tab and scheduled lives */
.searchlink { display: grid; }
@media (min-width: 900px) { .searchlink { display: none; } }
.navlive { position: relative; display: inline-grid; }
.navlivedot { position: absolute; top: -1px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--pink-hot); box-shadow: 0 0 0 2px var(--bg, #0B0B10); }
.evgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.evstrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 78%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
@media (min-width: 700px) { .evstrip { grid-auto-columns: 300px; } }
.evcard { scroll-snap-align: start; display: grid; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface, #141418); }
.evcover { position: relative; display: block; aspect-ratio: 16 / 9; background: radial-gradient(circle at 50% 40%, #4a1532, #170911 70%); overflow: hidden; }
.evcover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evface { position: absolute; inset: 0; display: grid; place-items: center; }
.evwhen { position: absolute; left: 10px; bottom: 10px; display: grid; gap: 0; padding: 6px 10px; border-radius: 12px; background: rgba(0,0,0,.66); color: #fff; line-height: 1.2; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.evwhen b { font-size: 13px; } .evwhen span { font-size: 15px; font-weight: 800; }
.evrel { position: absolute; right: 10px; top: 10px; padding: 4px 9px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 12px; font-weight: 800; }
.evadult { position: absolute; left: 10px; top: 10px; }
.evbody { display: grid; gap: 6px; padding: 12px 14px 14px; }
.evwho { gap: 8px; color: inherit; text-decoration: none; }
.evtitle { font-weight: 800; font-size: 16px; color: #fff; text-decoration: none; line-height: 1.3; }
.evabout { margin: 0; font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.evfoot { justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.evgoing:not(:empty) { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: 12px; }
.evrow { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.evrow > div:first-child { display: grid; gap: 2px; }
/* Top bar on phones: logo, search, alerts and the main button always fit */
@media (max-width: 480px) {
  .top .wrap { gap: 6px; }
  .top .right { gap: 2px; }
  .top .right .iconbtn2, .top .right .bell { width: 36px; height: 36px; }
  .brand { font-size: 16px; gap: 6px; }
  .brand .mark { width: 28px; height: 28px; }
  .top .right .btn.sm { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 380px) {
  body[data-user] .top .right a[href="/channel"] { display: none; } /* the channel is still in the menu */
  .brand { font-size: 15px; }
}

/* Bottom menu: six tabs (Home, Search, +, Live, and two for the account), fitting every phone */
.bottom { grid-template-columns: repeat(6, 1fr); }
.bottom a { font-size: 10.5px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding-left: 1px; padding-right: 1px; }
.bottom .plus { width: 46px; }
@media (max-width: 360px) { .bottom a { font-size: 9.5px; } .bottom svg { width: 21px; height: 21px; } .bottom .plus { width: 40px; height: 34px; } }

/* Footer: tidy links, one language button, small print */
.footwrap { display: grid; gap: 14px; padding-top: 22px; padding-bottom: 22px; }
.footlinks { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.foot .footlinks a { white-space: nowrap; text-decoration: none; color: #B9B9C3; font-size: 14px; padding: 8px 0; min-height: 36px; display: inline-flex; align-items: center; }
.foot .footlinks a:hover { color: #fff; }
.footbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.foot .langbtn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; min-height: 42px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.04); color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; }
.foot .langbtn:hover { border-color: var(--pink); color: #fff; }
.langbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.langbtn .chev { width: 16px; height: 16px; opacity: .7; }
.footpay { font-size: 13px; color: var(--muted); }
.foot p.footcopy { font-size: 12.5px; color: #77777F; line-height: 1.5; margin: 0; }
.langsheet { max-height: 80vh; display: none; }
.langsheet[open] { display: flex; flex-direction: column; }
.langsearch { width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); color: #fff; padding: 0 14px; font: inherit; margin-bottom: 10px; }
.langlist { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: 2px; }
.langlist li[hidden] { display: none; }
.langlist a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; min-height: 48px; border-radius: 12px; color: #fff; text-decoration: none; }
.langlist a:hover { background: rgba(255,255,255,.05); }
.langlist a[aria-current] { background: rgba(var(--pink-rgb), .14); }
.langlist a span { display: grid; gap: 1px; }
.langlist small { color: var(--muted); font-size: 12px; }
.langlist svg { width: 20px; height: 20px; fill: none; stroke: var(--pink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Only 18+ pictures are blurred (by the server, light by default). Paid clips show their real picture with a lock. */
.thumb.locked img { filter: none; transform: none; }
.thumb.locked::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45)); pointer-events: none; }
.empty a { display: inline-block; padding: 6px 0; }

.waitcard { text-align: center; justify-items: center; }
.waitnum { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--pink-rgb), .25), rgba(var(--pink-rgb), .05)); box-shadow: 0 0 0 2px rgba(var(--pink-rgb), .35); }
.waitnum small { font-size: 11px; color: var(--muted); }
.waitnum b { font-size: 34px; color: #fff; line-height: 1; }

/* Live studio: stats in the top bar, connection light, mic meter, tip goal */
.bearn { background: rgba(34,197,94,.85) !important; }
.bleft.warn { background: var(--pink-hot) !important; animation: avpulse 1.5s infinite; }
.netdot { width: 10px; height: 10px; border-radius: 50%; background: #6B6B75; box-shadow: 0 0 0 2px rgba(0,0,0,.4); align-self: center; }
.netdot.good { background: #22C55E; } .netdot.ok { background: #F5B700; } .netdot.bad { background: var(--pink-hot); }
.micmeter { position: absolute; left: 12px; top: 52px; width: 80px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.2); z-index: 3; overflow: hidden; }
.micmeter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22C55E, #F5B700 70%, var(--pink-hot)); transition: width .08s; }
#bstage .stage-top { flex-wrap: wrap; row-gap: 6px; }
.goalbar { position: absolute; left: 12px; right: 12px; top: 64px; z-index: 3; display: grid; gap: 5px; padding: 8px 12px; border-radius: 14px; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; }
.goalbar[hidden] { display: none; }
#bstage .goalbar { top: 76px; }
.goaltx { font-size: 13px; } .goaltx b { font-size: 15px; } .goalof { color: #ddd; }
.goalbar i { display: block; height: 8px; border-radius: 99px; background: rgba(255,255,255,.18); overflow: hidden; }
.goalbar i b { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--pink), var(--pink-pale2)); transition: width .6s ease; }
.goalbar.done i b { background: linear-gradient(90deg, #22C55E, #8FF0B4); }
.bstats { grid-template-columns: repeat(2, 1fr); }
.livepin:not([hidden]) ~ .goalbar { top: 118px; }
#bstage .livepin:not([hidden]) ~ .goalbar { top: 130px; }
#bstage .livepin { top: 76px; }

/* ===== Full-screen live (watching and going live) =====
   The picture fills the whole phone like TikTok/Instagram live. Site header, bottom tabs and footer are hidden;
   everything on top is small and see-through. On a computer the live is a tall phone-shaped column in the middle. */
body.fs { background: #000; overflow: hidden; }
body.fs > header.top, body.fs nav.bottom, body.fs footer.foot, body.fs .installbar { display: none !important; }
body.fs main { padding: 0; min-height: 0; }
.livepage.fs { display: block; max-width: none; padding: 0; margin: 0; }
.livepage.fs .stage { position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  aspect-ratio: auto; border-radius: 0; z-index: 40; background: #000; }
@media (min-width: 700px) { .livepage.fs .stage { width: min(100vw, calc(100dvh * 9 / 16)); box-shadow: 0 0 0 1px #1c1c22; } }
.livepage.fs .stage video { object-fit: cover; }

/* Top bar */
.fs-top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 10px 22px; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); }
.fs-top .who { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; flex: 1; min-width: 0; font-size: 13px; line-height: 1.2; }
.fs-top .who .av { width: 34px; height: 34px; flex: 0 0 34px; font-size: 13px; box-shadow: 0 0 0 2px var(--pink-hot); }
.fs-top .who > span { min-width: 0; overflow: hidden; }
.fs-top .who b { white-space: nowrap; }
.fs-title { display: block; color: rgba(255,255,255,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-top .livebadge, .fs-top .liveviewers, .fs-top .livetimer, .fs-top .accbadge { font-size: 11px; padding: 3px 7px; border-radius: 6px; white-space: nowrap; flex: 0 0 auto; }
.fs-top .liveviewers svg { width: 12px; height: 12px; }
.fs-status { display: inline-flex; align-items: center; gap: 0; border-radius: 6px; overflow: hidden; flex: 0 0 auto; }
.fs-status .livebadge { border-radius: 6px 0 0 6px; }
.fs-status .livetimer { border-radius: 0 6px 6px 0; background: rgba(0,0,0,.55); }
.fs-status .netdot { margin-left: 6px; width: 8px; height: 8px; }
.fs-top .grow { flex: 1; }
.fs-ico { flex: 0 0 auto; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; color: #fff;
  background: rgba(0,0,0,.38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-decoration: none; }
.fs-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fs-ico svg circle { fill: currentColor; }
.fs-ico.big { width: 52px; height: 52px; } .fs-ico.big svg { width: 24px; height: 24px; }
.fs-ico.solid { background: var(--pink-btn, var(--pink-btn)); }
.fs-ico.solid svg circle { fill: none; }
.fs-ico[aria-pressed="true"] { background: var(--pink-hot); }
.fs-ico[aria-pressed="true"]::after { content: ''; position: absolute; width: 22px; height: 2px; background: #fff; transform: rotate(-45deg); }
.fs-ico[aria-pressed] { position: relative; }
/* Mic meter: a thin line under the top bar */
.livepage.fs .micmeter { top: calc(env(safe-area-inset-top, 0px) + 54px); left: 10px; width: 64px; height: 3px; }

/* Tip goal and pinned message: small, under the top bar */
.fs-under { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 60px); left: 10px; right: 10px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.fs-under > * { pointer-events: auto; }
.livepage.fs .goalbar { position: static; width: min(230px, 64%); gap: 4px; padding: 6px 10px; border-radius: 12px; background: rgba(0,0,0,.42); }
.livepage.fs .goaltx { font-size: 11.5px; } .livepage.fs .goaltx b { font-size: 13px; }
.livepage.fs .goalbar i { height: 5px; }
.livepage.fs .livepin { position: static; max-width: 78%; font-size: 12.5px; padding: 6px 10px; border-radius: 12px; background: rgba(var(--pink-btn-rgb), .8); box-shadow: none; }

/* Comments: bottom left, a few lines, fading at the top */
.livepage.fs .stage-chat { left: 0; right: 0; bottom: 0; padding: 40px 10px calc(env(safe-area-inset-bottom, 0px) + 10px); background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5) 45%); z-index: 4; }
.livepage.fs .chat { width: 80%; max-height: 30vh; margin: 0 0 8px; gap: 5px; -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); }
.livepage.fs .chat li { font-size: 13px; line-height: 1.32; }
.livepage.fs .chat li.chat, .livepage.fs .chat li.join, .livepage.fs .chat li.host { background: rgba(0,0,0,.35); padding: 4px 10px; border-radius: 14px; max-width: 100%; }
.livepage.fs .chat li.tip { font-size: 13px; }
.livepage.fs .chat.isempty::before { font-size: 12px; }
.livepage.fs .chatform { gap: 8px; flex-wrap: nowrap; margin: 0; }
.livepage.fs .chatform input { min-height: 40px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 14px; }
.livepage.fs .chatform input.nick { flex: 0 0 78px; }
.livepage.fs .chatform .fs-ico { width: 40px; height: 40px; }
.fs-tip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 11px; border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: inherit; font-weight: 800; font-size: 14px;
  background: linear-gradient(120deg, var(--pink), #C2185B); box-shadow: 0 6px 18px rgba(var(--pink-rgb), .4); }
.fs-tip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.livepage.fs .chaterr { margin: 0 0 6px; }
.livepage.fs .tipfx { top: 30%; }
.livepage.fs .stage .unmute { top: 42%; }
.livepage.fs .stage-wait { font-size: 14px; }

/* Studio: reply + mic + End in one row while live */
.fs-bar { display: flex; gap: 8px; align-items: center; }
.fs-bar .chatform { flex: 1; min-width: 0; }
.fs-end { min-height: 40px; border-radius: 999px; background: var(--pink-hot) !important; border-color: var(--pink-hot) !important; padding: 0 16px; font-weight: 800; }
.fs-note { margin: 6px 2px 0; font-size: 12px; color: var(--pink-pale); text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.fs-note:empty { display: none; }
#bstage.isrunning .stage-chat { padding-top: 40px; }
/* Before going live: flip camera, big Go live, tools */
.fs-setup { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; justify-items: center; gap: 10px;
  padding: 50px 16px calc(env(safe-area-inset-bottom, 0px) + 22px); background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6) 50%); text-align: center; }
.fs-setup .fs-note { margin: 0; font-size: 13px; color: #fff; }
.fs-setrow { display: flex; align-items: center; justify-content: center; gap: 18px; }
.fs-go { min-width: 150px; min-height: 56px; border-radius: 999px; font-size: 17px; font-weight: 800; box-shadow: 0 10px 28px rgba(var(--pink-rgb), .45); }
.fs-allow { color: #fff; text-decoration: underline; }
#bstage:not(.isrunning) .stage-chat { bottom: 150px; padding-top: 0; background: none; }
#bstage:not(.isrunning) .stage-chat .chat:empty { display: none; }
.livepage.fs .bstats { grid-template-columns: repeat(4, 1fr); }
.livepage.fs .bstats .kpi b { font-size: 18px; }
.livepage.fs .livegate { padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }
.livepage.fs .stage-ended { z-index: 6; }
@media (max-width: 360px) {
  .fs-top { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .fs-top .bearn { display: none; }
  .fs-ico { width: 32px; height: 32px; }
  .fs-tip span { display: none; } .fs-tip { padding: 0 11px; }
}
/* Sale/tip notices during a live: smaller, below the top bar, never over the buttons */
body.fs .toasts { top: calc(env(safe-area-inset-top, 0px) + 110px); width: min(86vw, 340px); }
body.fs .toast { padding: 8px 8px 10px 10px; grid-template-columns: 34px 1fr 24px; gap: 10px; background: rgba(20,10,16,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Go live setup: short choices as chips, one hint line, extras folded away */
.chipset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chipset legend { width: 100%; margin-bottom: 6px; padding: 0; }
.qchip { position: relative; display: inline-flex; cursor: pointer; }
.qchip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.qchip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid #2E2E35; font-weight: 700; font-size: 14px; background: var(--surface2, #1A1A20); transition: border-color .15s, background .15s; }
.qchip input:checked + span { border-color: var(--pink); background: rgba(var(--pink-rgb), .16); color: #fff; }
.qchip input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }
.chiphint { width: 100%; margin: 0; min-height: 1.3em; }
.chipset .accessmore { width: 100%; }
.golive-title { font-size: 17px; min-height: 50px; }
.golive-row { gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.golive-18 { flex: 0 0 auto; min-height: 46px; align-items: center; }
.golive-btn { min-height: 56px; font-size: 17px; border-radius: 999px; }
details.golive-more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
details.golive-more > summary::-webkit-details-marker { display: none; }
details.golive-more > summary::after { content: '⌄'; font-size: 20px; color: var(--muted); transition: transform .2s; }
details.golive-more[open] > summary::after { transform: rotate(180deg); }
details.golive-more[open] > summary { margin-bottom: 10px; }

/* Bottom menu: seven tabs (Home, Search, Channel, +, Live, and two for the account), fitting phones down to 320px */
.bottom { grid-template-columns: repeat(7, 1fr) !important; }
.bottom a { font-size: 10.5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 1px; padding-right: 1px; }
.bottom .plus { width: 44px; height: 34px; }
.navlivedot.chdot { background: var(--pink, var(--pink)); }
@media (max-width: 340px) { .bottom a { font-size: 9.5px; } .bottom svg { width: 20px; height: 20px; } .bottom .plus { width: 40px; } }

/* Search: one big box always visible, results update while typing */
.big-search { display: flex !important; }
.big-search input { width: 100%; }
.srch { display: grid; gap: 14px; }
.sbar { position: sticky; top: 64px; z-index: 5; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 8px 0 16px; border-radius: 999px; background: var(--soft, #1A1A20); border: 1.5px solid var(--line, #2E2E35); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.sbar:focus-within { border-color: var(--pink); }
.sbar-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.sbar input { flex: 1; min-width: 0; height: 100%; border: 0 !important; background: transparent !important; color: var(--ink); font: inherit; font-size: 16px; padding: 0; outline: none; box-shadow: none !important; }
.sbar input::-webkit-search-cancel-button { display: none; }
.sbar-x { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--ink); cursor: pointer; }
.sbar-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.stabs { margin: 0; }
.sh { font-size: 18px; margin: 8px 0 4px; display: flex; align-items: center; gap: 8px; }
.slist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.slist a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 6px; border-radius: 14px; color: var(--ink); text-decoration: none; }
.slist a:hover { background: var(--soft); }
.slist .grow { min-width: 0; display: grid; gap: 2px; }
.slist .d { display: block; overflow: hidden; text-overflow: ellipsis; }
.slist .bio { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.srch mark { background: rgba(var(--pink-rgb), .28); color: #fff; border-radius: 4px; padding: 0 2px; }
.screators { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.screators::-webkit-scrollbar { display: none; }
.scard { flex: 0 0 104px; display: grid; justify-items: center; gap: 4px; text-align: center; padding: 12px 6px; border-radius: 16px; background: var(--soft); color: var(--ink); text-decoration: none; }
.scard b, .scard span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-sresults].loading { opacity: .55; transition: opacity .15s; }
/* Live ⋯ sheet numbers: always on one line */
#liveTools .bstats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#liveTools .kpi { padding: 10px 8px; min-width: 0; }
#liveTools .kpi b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#liveTools .kpi span { font-size: 11px; }
/* The + (post) button: one clean pink shape (no coloured side edges, which looked tilted) */
.bottom .plus { background: linear-gradient(135deg, var(--pink), var(--pink-btn)) !important; box-shadow: 0 4px 14px rgba(var(--pink-rgb), .35) !important; border-radius: 12px; }

/* Share a clip sheet */
.sharesheet .shclip { display: flex; gap: 12px; align-items: center; }
.sharesheet .shthumb { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 12px; overflow: hidden; background: var(--soft); }
.sharesheet .shthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sharesheet .shclip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.shgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 10px; }
.shbtn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 0; border-radius: 16px; background: var(--soft); color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; min-height: 72px; justify-content: center; }
.shbtn svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; padding: 9px; border-radius: 50%; box-sizing: content-box; }
.shbtn.wa svg { background: #25D366; } .shbtn.tg svg { background: #229ED9; } .shbtn.x svg { background: #000; box-shadow: 0 0 0 1px #333; } .shbtn.fb svg { background: #1877F2; } .shbtn.more svg { background: var(--pink, var(--pink)); }
.shbtn:hover { background: #24242B; }
.shtips { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
/* App permissions card */
.permrow { display: flex; align-items: center; gap: 12px; }
.permrow .grow { display: grid; gap: 2px; min-width: 0; }
.permic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: rgba(var(--pink-rgb), .14); color: var(--pink, var(--pink)); display: grid; place-items: center; }
.permic svg { width: 20px; height: 20px; }
.permrow .btn { flex: 0 0 auto; }
/* Creator mark on older clips (new clips carry it in the video itself): bottom right, see-through, still */
.watermark { animation: none !important; top: auto !important; left: auto !important; right: 3.5%; bottom: 13%; font-size: clamp(11px, 2.6vw, 15px); color: rgba(255,255,255,.62); text-shadow: 0 1px 3px rgba(0,0,0,.6); letter-spacing: .01em; }
.fwlist { display: flex; flex-wrap: wrap; gap: 8px; }
.fwchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--soft); font-size: 14px; }
.fwchip .linkbtn { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
/* Channel: advertise here + support */
.chanact { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.chanad { flex: 1 1 260px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: var(--ink);
  background: linear-gradient(120deg, rgba(var(--pink-rgb), .22), rgba(var(--pink-rgb), .06)); border: 1px solid rgba(var(--pink-rgb), .4); }
.chanad > span:first-child { font-size: 24px; }
.chanad .grow { display: grid; gap: 2px; } .chanad .xs { color: var(--pink-pale); }
.chanad svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.chanact .btn { align-self: center; }
/* Support chat */
.chatbox { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.chathead { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.chathead img { border-radius: 10px; }
.chatlog { list-style: none; margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 10px; max-height: 58vh; min-height: 220px; overflow-y: auto; background: #0C0B0F; }
.cm { display: flex; flex-direction: column; max-width: 82%; gap: 3px; }
.cm span { padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; }
.cm.them { align-self: flex-start; } .cm.them span { background: #1E1C24; border-bottom-left-radius: 6px; }
.cm.me { align-self: flex-end; align-items: flex-end; } .cm.me span { background: var(--pink-btn, var(--pink-btn)); color: #fff; border-bottom-right-radius: 6px; }
.cm time { color: var(--muted); padding: 0 6px; }
.chatsend { padding: 12px 16px 16px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.chatsend textarea { min-height: 48px; resize: vertical; }
.chatsend .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Rozie, the support assistant */
.chathead .rzav { border-radius: 50%; box-shadow: 0 0 0 2px var(--pink), 0 0 14px rgba(var(--pink-rgb), .45); }
.chathead .tag.pink { font-size: 10px; padding: 1px 6px; vertical-align: 2px; }
.cm .who { font-size: 11px; font-weight: 700; color: var(--muted); padding: 0 6px; }
.cm.bot .who { color: var(--pink-2); padding-left: 30px; position: relative; }
.cm.bot .who::before { content: ''; position: absolute; left: 4px; top: -3px; width: 20px; height: 20px; border-radius: 50%; background: url(/icons/rozie-96.jpg) center/cover; }
.cm.me .who { align-self: flex-end; }
.cm.bot span { background: #241521; border: 1px solid rgba(var(--pink-rgb), .22); }
.chatbox .typing { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 16px 10px; background: #0C0B0F; color: var(--pink-2); }
.chatbox .typing[hidden] { display: none; }
.chatbox .typing img { border-radius: 50%; }
.chatbox .typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--pink-2); animation: rztype 1.1s infinite ease-in-out; }
.chatbox .typing i:nth-of-type(2) { animation-delay: .15s; } .chatbox .typing i:nth-of-type(3) { animation-delay: .3s; }
@keyframes rztype { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .chatbox .typing i { animation: none; opacity: .7; } }
.chatsend .btn .askrz { margin-left: 6px; font-weight: 700; white-space: nowrap; }
@media (max-width: 380px) { .chatsend .btn .askrz { display: none; } }

/* Live paused ("be right back") on the creator's screen */
.livepage.fs .brb { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: rgba(9, 8, 11, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; }
.livepage.fs .brb[hidden] { display: none; }
.livepage.fs .brb b { font-size: 26px; }
.livepage.fs .brb .small { color: #DDD6E2; max-width: 300px; }
.livepage.fs .brb .btn { min-width: 220px; }

/* After watching a clip: watch again / tip / more from this creator */
.aw-head { display: flex; gap: 12px; align-items: center; padding-right: 36px; }
.aw-head .av { flex: none; }
.aw-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aw-actions .btn { display: flex; gap: 10px; align-items: center; justify-content: flex-start; text-align: left; min-height: 64px; padding: 10px 14px; }
.aw-actions .btn > span { display: flex; flex-direction: column; line-height: 1.2; font-weight: 800; }
.aw-actions .btn small { font-weight: 500; font-size: 12px; opacity: .8; margin-top: 2px; }
.aw-actions .btn svg { flex: none; width: 24px; height: 24px; }
.aw-more { display: grid; gap: 8px; }
.aw-row { list-style: none; margin: 0; padding: 0 0 4px; display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.aw-row li { scroll-snap-align: start; }
.aw-row a { display: grid; gap: 6px; text-decoration: none; color: inherit; }
.aw-thumb { position: relative; display: block; aspect-ratio: 9 / 14; border-radius: 14px; overflow: hidden; background: #1E1C24; }
.aw-thumb img { width: 100%; height: 100%; object-fit: cover; }
.aw-tag { position: absolute; left: 6px; bottom: 6px; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(0,0,0,.65); color: #fff; }
.aw-tag.open { background: var(--pink); }
.aw-18 { position: absolute; right: 6px; top: 6px; padding: 2px 6px; border-radius: 8px; font-size: 11px; font-weight: 800; background: rgba(0,0,0,.65); color: #fff; }
.aw-title { font-size: 13px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aw-share summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.aw-share summary::-webkit-details-marker { display: none; }
@media (max-width: 360px) { .aw-actions { grid-template-columns: 1fr; } }

/* News & tips (articles from the channel) */
.newscard { overflow: hidden; padding: 0; }
.newslink { display: block; color: inherit; text-decoration: none; }
.newslink img { display: block; width: 100%; max-height: 360px; object-fit: cover; }
.newsimg { width: 100%; border-radius: 18px; }
.newsbody { font-size: 17px; line-height: 1.65; }
.newsbody p { margin: 0 0 14px; }
.newsbody a { word-break: break-all; }
.newsitem a.card { text-decoration: none; color: inherit; display: block; }
.newsitem a.card b { color: var(--pink-2); }
.chathead .newchat { white-space: nowrap; }
.cm.sys { align-self: center; max-width: 100%; }
.cm.sys span { background: transparent; border: 1px dashed rgba(255,255,255,.25); color: var(--muted); font-size: 12px; padding: 4px 12px; border-radius: 999px; }
.cm .topic { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--pink-2); padding: 0 6px; text-transform: uppercase; }

/* ---- Bottom bar v7: even, tighter tabs; a smaller + that doesn't take extra room ---- */
.bottom { display: flex !important; align-items: stretch; padding: 2px 4px calc(4px + env(safe-area-inset-bottom)); }
.bottom > a { flex: 1 1 0; min-width: 0; min-height: 50px; padding: 4px 0 2px; gap: 3px; font-size: 10.5px; }
.bottom > a.post { flex: 0 0 52px; }
.bottom .plus { width: 40px !important; height: 30px !important; border-radius: 10px; }
.bottom .plus svg { width: 19px; height: 19px; }
.bottom svg.ico { width: 22px; height: 22px; }
.navcount { position: absolute; top: -5px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg, #0B0B10); }
@media (max-width: 360px) { .bottom > a { font-size: 9.5px; } .bottom > a.post { flex-basis: 46px; } .bottom .plus { width: 36px !important; } }
@media (max-width: 860px) { .hide-sm-dm { display: none !important; } }

/* ---- Messages ---- */
.dmlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dmlist a { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; color: var(--ink); text-decoration: none; }
.dmlist a:hover { background: var(--soft); }
.dmlist li.unread a { background: rgba(var(--pink-rgb), .08); }
.dmlist li.unread .dmname, .dmlist li.unread .dmlast { color: var(--ink); font-weight: 700; }
.dmmeta { display: grid; gap: 2px; min-width: 0; }
.dmlast { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dmcount { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.avwrap { position: relative; display: inline-block; flex: none; }
.ondot { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 2.5px var(--bg, #0B0B10), 0 0 10px rgba(var(--pink-rgb), .8); }
.avwrap.lg .ondot { width: 18px; height: 18px; right: 4px; bottom: 4px; }
.ontext { color: #FF5FA2; font-weight: 700; }
.dmbox .chathead { position: relative; }
.dmmenu { position: relative; }
.dmmenu summary { list-style: none; cursor: pointer; padding: 6px; border-radius: 10px; color: var(--muted); }
.dmmenu summary::-webkit-details-marker { display: none; }
.dmmenu-pop { position: absolute; right: 0; top: 38px; z-index: 5; width: 250px; background: #16151B; border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: grid; gap: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.dmmenu-pop input { height: 36px; font-size: 13px; }
.linkbtn { background: none; border: 0; padding: 6px 4px; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; width: 100%; }
.cm.pending span { opacity: .6; border: 1px dashed rgba(255,255,255,.4); }
.cm.sys { align-self: center; max-width: 100%; } .cm.sys span { background: none; color: var(--muted); font-size: 12px; padding: 2px; }
.dmpay { padding-top: 4px; }

/* ---- Notification tabs ---- */
.ntabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ntabs::-webkit-scrollbar { display: none; }
.ntabs a { flex: none; display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--soft); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.ntabs a.on { background: var(--pink); color: #fff; }
.ntabs a i { font-style: normal; font-size: 12px; opacity: .75; }
.nlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nlist a { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; color: var(--ink); text-decoration: none; }
.nlist a:hover { background: var(--soft); }
.nlist li.new a { background: rgba(var(--pink-rgb), .08); }
.nic { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font-size: 18px; }
.nlist .nt { display: grid; gap: 2px; min-width: 0; }
.aw-actions .aw-dm { grid-column: 1 / -1; min-height: 54px; }
.react .rn { font-size: 13px; font-weight: 700; margin-left: 2px; }
a.react { text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; }
.react { padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; }

/* ---- Sideways tab rows: arrows, edge fades and a first-time "swipe for more" hint ---- */
.hsw { position: relative; }
.hsw > .subnav { margin-bottom: 18px; }
.hsw-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: rgba(22,21,27,.95); color: #fff; font-size: 22px; line-height: 1; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.45); padding: 0 0 3px; }
.hsw > .subnav ~ .hsw-btn { top: calc(50% - 9px); }
.hsw-btn.l { left: -4px; } .hsw-btn.r { right: -4px; }
.hsw-btn[hidden] { display: none; }
.hsw::before, .hsw::after { content: ''; position: absolute; top: 0; bottom: 0; width: 44px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .2s; }
.hsw::before { left: 0; background: linear-gradient(90deg, var(--bg, #0B0B10), transparent); }
.hsw::after { right: 0; background: linear-gradient(270deg, var(--bg, #0B0B10), transparent); }
.hsw.fade-l::before, .hsw.fade-r::after { opacity: 1; }
.hsw-hint { position: absolute; right: 36px; top: calc(50% - 14px); z-index: 4; display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 6px 18px rgba(var(--pink-rgb), .45); animation: hswIn .3s ease-out; transition: opacity .35s; }
.hsw-hint b { display: inline-block; animation: hswNudge 1s ease-in-out infinite; }
.hsw-hint.out { opacity: 0; }
@keyframes hswNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes hswIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.hsw > .subnav ~ .hsw-hint { top: calc(50% - 23px); }
@media (min-width: 860px) { .hsw > .subnav ~ .hsw-btn, .hsw > .subnav ~ .hsw-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .hsw-hint b { animation: none; } }
.chip { border: 1px solid var(--line); background: var(--soft); color: var(--ink); border-radius: 999px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 12px; }
.declinebox summary { list-style: none; display: inline-flex; cursor: pointer; }
.declinebox summary::-webkit-details-marker { display: none; }
.declinebox[open] { background: var(--soft); padding: 8px; border-radius: 12px; min-width: 240px; }

/* ---- Clip plates (grids): portrait picture with title, length and price on it; 2 per row on phones ---- */
.grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.vcard { border-radius: 16px; }
.vcard .thumb { aspect-ratio: 4 / 5; }
.vcard .vtags { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 2; display: flex; gap: 4px; flex-wrap: wrap; }
.vcard .vtags .tag { font-size: 10px; padding: 2px 7px; }
.vcard .vshade { position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0)); z-index: 1; }
.vcard .vtitle { position: absolute; left: 10px; right: 10px; bottom: 42px; z-index: 2; color: #fff; font-weight: 800; font-size: 15px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.vcard .vmeta { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.vcard .thumb .dur, .vcard .thumb .price { position: static; }
.vcard .thumb .dur { display: inline-flex; align-items: center; gap: 3px; background: rgba(0,0,0,.55); padding: 3px 7px; border-radius: 999px; font-size: 11px; }
.vcard .thumb .dur svg { width: 11px; height: 11px; fill: currentColor; }
.vcard .thumb .price { font-size: 12px; padding: 4px 10px; background: var(--pink); }
.vcard .thumb .price.free { background: #fff; color: #0B0A0F; }
.vcard .thumb .price.owned { background: #3DDC97; color: #06210F; }
.vcard .thumb .lock { z-index: 1; }
.vcard .thumb .lock svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.vcard .body { padding: 10px 12px 12px; gap: 6px; }
.vcard .vby { gap: 8px; flex-wrap: nowrap; }
.vcard .vby .av { width: 26px; height: 26px; font-size: 10px; }
.vcard .vname { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vcard .vstats { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.vcard .vstats svg { width: 12px; height: 12px; }
@media (max-width: 700px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vcard .desc { display: none; }
  .vcard .vtitle { font-size: 13.5px; bottom: 38px; }
  .vcard .body { padding: 8px 9px 10px; gap: 4px; }
  .vcard .vstats { font-size: 11px; }
}
/* Home: a compact welcome for visitors on phones (clips start higher up); signed-in people go straight to the feed. */
@media (max-width: 700px) {
  .hero-feed { padding: 20px 18px; margin: 12px 0; }
  .hero-feed h1 { font-size: 25px; line-height: 1.1; }
  .hero-feed > p:not(.hero-tagline) { display: none; }
  .hero-feed .row { margin-top: 14px; gap: 8px; flex-wrap: nowrap; }
  .hero-feed .row .btn { flex: 1 1 0; min-width: 0; font-size: 13.5px; line-height: 1.2; padding: 10px; min-height: 50px; white-space: normal; text-align: center; justify-content: center; }
  .hero-feed .row .btn svg { display: none; }
  .hero-feed .hero-tagline { margin-top: 12px; font-size: 11px; }
}
.tablebox { position: relative; max-width: 100%; } /* keeps hidden labels inside the scrolling table from widening the page */
/* On a creator's own page their name isn't repeated on every clip. */
.grid.nocreator .vcard .vby { display: none; }
/* Creator page buttons: even widths, nothing squashed. */
.phead .row { gap: 8px; flex-wrap: nowrap; }
.phead .row > form, .phead .row > a.grow { flex: 1 1 0; min-width: 0; }
.phead .row .btn { padding-left: 8px; padding-right: 8px; font-size: 15px; white-space: nowrap; }
.phead .row > a:not(.grow) { flex: 0 0 auto; }
.pwrow { display: flex; gap: 8px; align-items: center; } .pwrow input { flex: 1; min-width: 0; }
.cm span a { color: var(--pink-2); text-decoration: underline; word-break: break-all; }
/* "Need help? Ask Rozie" under the login and sign-up forms */
.helpcard { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(var(--pink-rgb), .14), rgba(var(--pink-rgb), .04)); border: 1px solid rgba(var(--pink-rgb), .3); color: var(--ink); text-decoration: none; }
.helpcard:hover { color: var(--ink); border-color: var(--pink); }
.helpcard img { border-radius: 50%; box-shadow: 0 0 0 2px var(--pink); flex: none; }
.helpcard b { font-size: 15px; }
.helpcard svg { flex: none; color: var(--pink-2); }
/* Rozie's tappable page links: a small pink pill so it's obvious where to tap */
.cm span a.rzlink { display: inline-block; margin: 2px 0; padding: 3px 10px; border-radius: 999px; background: rgba(var(--pink-rgb), .16); border: 1px solid rgba(var(--pink-rgb), .45); color: var(--pink-2); font-weight: 700; text-decoration: none; word-break: normal; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: baseline; }
.cm span a.rzlink::after { content: ' →'; }
.cm span a.rzlink:active { background: rgba(var(--pink-rgb), .3); }
.askchips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 14px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.askchips::-webkit-scrollbar { display: none; }
.askchips .chip { flex: 0 0 auto; white-space: nowrap; border: 1px solid rgba(var(--pink-rgb), .4); background: rgba(var(--pink-rgb), .08); color: var(--pink-2); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
/* Fast lives aren't re-encoded, so the site address sits on top of the picture instead of inside it */
.livewm { position: absolute; right: 10px; bottom: 30%; z-index: 2; pointer-events: none; font: 600 12px/1 system-ui, sans-serif; color: rgba(255,255,255,.55); text-shadow: 0 1px 2px rgba(0,0,0,.6); letter-spacing: .02em; }
/* Rozie is online: pink dot on her photo and a small "Online" label */
.rzwrap { position: relative; display: inline-block; flex: 0 0 auto; line-height: 0; }
.rzwrap img { border-radius: 50%; }
.rzwrap .ondot { right: 1px; bottom: 1px; animation: rzpulse 2.4s ease-in-out infinite; }
.rzon { color: #FF5FA2; font-weight: 700; }
@keyframes rzpulse { 0%, 100% { box-shadow: 0 0 0 2.5px var(--bg, #0B0B10), 0 0 4px rgba(var(--pink-rgb), .5); } 50% { box-shadow: 0 0 0 2.5px var(--bg, #0B0B10), 0 0 12px rgba(var(--pink-rgb), .95); } }
@media (prefers-reduced-motion: reduce) { .rzwrap .ondot { animation: none; } }

/* ---- Computers and big screens: use the whole width ---- */
@media (min-width: 1100px) {
  .wrap { max-width: 1480px; padding: 0 28px; }
  /* Home feed: several clips side by side instead of one narrow column (the one under the mouse plays) */
  .feed { max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; align-items: start; }
  .feed > .fmore, .feed > .empty { grid-column: 1 / -1; }
  .feed .fmedia { height: min(72vh, 640px); min-height: 440px; }
  .feed { margin-top: 16px; }
  .vlayout .player-wrap video { max-height: 78vh; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
  .vlayout { grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; }
  /* The menu bar at the bottom becomes a small floating bar in the middle */
  .bottom { left: 50% !important; right: auto !important; transform: translateX(-50%); bottom: 14px; width: min(620px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.55); padding: 2px 6px !important; }
  main { padding-bottom: 110px; }
}
@media (min-width: 1100px) and (max-width: 1279px) { .top .searchbox { display: none !important; } } /* room for the menu */
@media (min-width: 1700px) { .wrap { max-width: 1680px; } .feed { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } }
/* Button-style link inside a notification (e.g. a paid withdrawal → its statement) */
.nbtn { display: inline-flex; justify-self: start; gap: 4px; margin: 6px 0 2px; padding: 5px 12px; border-radius: 999px; background: rgba(var(--pink-rgb), .14); border: 1px solid rgba(var(--pink-rgb), .45); color: var(--pink-2); font-size: 12.5px; font-weight: 700; }
.stmtlink { display: inline-block; margin-top: 4px; color: var(--pink-2); font-weight: 700; text-decoration: none; }
/* First-visit tour */
.tour .tourlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tour .tourlist a { display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; align-items: center; padding: 10px; border-radius: 14px; background: var(--soft); text-decoration: none; color: var(--ink); height: 100%; box-sizing: border-box; }
.tour .tourlist span { grid-row: span 2; font-size: 20px; }
.tour .tourlist b { font-size: 14px; }
.tour .tourlist small { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
@media (max-width: 360px) { .tour .tourlist { grid-template-columns: 1fr; } }
/* Statement: money right now + calculator */
.mngrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.mnbox { display: grid; gap: 3px; align-content: start; padding: 12px; border-radius: 14px; background: var(--soft); }
.mnbox span { font-size: 12px; color: var(--muted); }
.mnbox b { font-size: 20px; }
.mnbox small { font-size: 11.5px; color: var(--muted); }
.mnbox.hi { background: linear-gradient(135deg, rgba(var(--pink-rgb), .22), rgba(var(--pink-rgb), .08)); border: 1px solid rgba(var(--pink-rgb), .45); }
.mnbox .btn { justify-self: start; margin-top: 4px; }
.calcbox { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--soft); }
.calcout { margin: 0; color: #FFD3E6; font-weight: 600; }
.wdlist li { gap: 10px; }
/* Studio → Followers */
.flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.flink { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--soft); text-decoration: none; color: var(--ink); }
.flink:hover { background: #1c1c22; }
.fname { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.ftags .tag { font-size: 11px; }
/* Admin → Lives: Normal / Fast switch */
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); gap: 2px; }
.seg button { all: unset; cursor: pointer; padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--muted); }
.seg button.on { background: var(--pink); color: #fff; box-shadow: 0 2px 12px rgba(var(--pink-rgb), .45); }
.seg button:focus-visible { outline: 3px solid var(--amber); }
/* Earnings calculator under the price */
.earncalc { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(var(--pink-rgb), .14), rgba(var(--pink-rgb), .04)); border: 1px solid rgba(var(--pink-rgb), .35); }
.earncalc .ecline { margin: 0; font-weight: 600; color: #FFD3E6; font-size: 14px; }
.earncalc [data-ec-total] { color: var(--pink-2); font-size: 16px; }
.ecchips { display: flex; flex-wrap: wrap; gap: 6px; }
.ecchips .chip { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--muted); }
.teamnote { border: 1px solid rgba(var(--pink-rgb), .35); background: rgba(var(--pink-rgb), .06); }
.teamnote pre { margin: 6px 0 0; white-space: pre-wrap; font-family: inherit; color: var(--ink); line-height: 1.5; }
/* Straight, even layout everywhere: nothing can push the page sideways (no wobble/tilt when swiping), and clip
   plates in a row are the same height with their numbers on one line at the bottom. */
body { max-width: 100%; overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
.vcard { height: 100%; }
.vcard .body { flex: 1 1 auto; min-width: 0; }
.vcard .vname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcard .desc { line-height: 1.35; min-height: 2.7em; margin: 0; }
.vcard .vstats { flex-wrap: nowrap !important; white-space: nowrap; overflow: hidden; margin-top: auto; min-width: 0; }
.vcard .vstats .ago { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.grid { align-items: stretch; }

/* Admin → Moderation → Blur: cover and free preview stay blurred until the viewer pays; then the clip plays normally. */
.softblur video, .softblur .fcover, .player-wrap.softblur > img { filter: blur(26px) brightness(.72); transform: scale(1.08); }
.fmedia.softblur, .player-wrap.softblur { overflow: hidden; }

/* Statements: the period at a glance, next goal and thank-you */
.hlgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .hlgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hlbox { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.hlbox > span { font-size: 12px; color: var(--muted); }
.hlbox b { font-size: 20px; font-weight: 800; color: var(--ink); }
.hlbox b.hlt { font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.hlbox a { text-decoration: none; }
.hlbox b.up { color: #2BB673; } .hlbox b.down { color: #FF5A6E; }
.hlbox small { font-size: 12px; color: var(--muted); }
.hlgoal { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; background: var(--soft); }
.hlgoal > span { font-weight: 700; color: var(--pink, var(--pink)); letter-spacing: .02em; }
.hlgoal b { font-size: 16px; }
.hlthanks { margin: 4px 0 0; text-align: center; font-weight: 800; font-size: 15px; }
.hlthanks span { font-weight: 700; font-size: 13px; color: var(--pink, var(--pink)); }

/* Admin → Daily statement: deposits check */
.depcheck { border: 1px solid var(--line); }
.depcheck.ok { border-color: rgba(61, 220, 151, .45); }
.depcheck.bad { border-color: rgba(255, 90, 110, .6); }

/* Scrolling tab rows (Studio, Admin, notification tabs): the ‹ › arrows sit in their own space at the ends, never on
   top of a tab, so every tab can be tapped. */
.hsw.more { padding: 0 30px; }
.hsw.more > .hsw-btn.l { left: 0; }
.hsw.more > .hsw-btn.r { right: 0; }
.hsw.more::before { left: 30px; }
.hsw.more::after { right: 30px; }
.hsw-btn { width: 28px; height: 28px; font-size: 20px; }

/* Earnings this week: the best day glows pink with its amount on top */
.bars div.max i { background: linear-gradient(180deg, var(--pink-2) 0%, var(--pink) 100%); box-shadow: 0 0 16px rgba(var(--pink-rgb), .45); max-height: calc(100% - 18px); }
.bars .barv { font-size: 11px; font-weight: 800; color: var(--pink-2); white-space: nowrap; }

/* Ask Rozie AI: a glowing pink tab at the front of the Studio tabs, and a floating button on every Studio page */
.rzfab { position: fixed; right: 14px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 25; display: inline-flex; align-items: center; gap: 9px; padding: 6px 16px 6px 6px; border-radius: 999px; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--pink) 0%, #C2126A 100%); box-shadow: 0 0 0 1px rgba(255, 140, 192, .6), 0 8px 28px rgba(var(--pink-rgb), .55); animation: rzglow 2.6s ease-in-out infinite; }
.rzfab:hover { filter: brightness(1.08); color: #fff; }
.rzfab-av { position: relative; display: inline-block; line-height: 0; }
.rzfab-av img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.rzfab-av .ondot { right: 0; bottom: 0; }
.rzfab-t { display: flex; flex-direction: column; line-height: 1.15; }
.rzfab-t b { font-size: 14px; font-weight: 800; }
.rzfab-t small { font-size: 11px; opacity: .9; }
@keyframes rzglow { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 140, 192, .55), 0 0 14px rgba(var(--pink-rgb), .45); } 50% { box-shadow: 0 0 0 1px rgba(255, 170, 210, .9), 0 0 28px rgba(var(--pink-rgb), .9); } }
@media (prefers-reduced-motion: reduce) { .rzfab { animation: none; transition: none; } }
body:has(.rzfab) main { padding-bottom: 150px; }
@media (min-width: 1100px) { .rzfab { right: 24px; bottom: 24px; } }
body.fs .rzfab { display: none; }
.rzfab-av .ondot { background: #3DDC97; box-shadow: 0 0 0 2px #C2126A, 0 0 8px rgba(61, 220, 151, .8); width: 10px; height: 10px; }
.rzfab { transition: padding .2s ease, opacity .2s ease; }
.rzfab.off { opacity: 0; pointer-events: none; }
.rzfab.mini { padding: 5px; }
.rzfab.mini .rzfab-t { display: none; }
@media (hover: hover) { .rzfab.mini:hover { padding: 6px 16px 6px 6px; } .rzfab.mini:hover .rzfab-t { display: flex; } }
body:has(.rzfab) footer.foot { padding-bottom: 96px; }

/* Clip upload: progress bar and status (pieces continue by themselves when the signal comes back). */
.upstat { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.upstat[hidden] { display: none; }
.upstat p { margin: 0; }
.upstat [data-uptext] { font-weight: 700; font-variant-numeric: tabular-nums; }
.upbar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.upbar i { display: block; width: 2%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--pink-btn), var(--pink)); box-shadow: 0 0 12px rgba(var(--pink-rgb), .55); transition: width .4s ease; }
.upstat.wait { border-color: #5A4310; background: #1D160A; }
.upstat.wait .upbar i { background: linear-gradient(90deg, #C98A12, #F5C451); box-shadow: none; animation: upwait 1.4s ease-in-out infinite; }
.upstat.wait [data-uptext] { color: #F5C451; }
.upstat.bad { border-color: #5C1E22; background: var(--red-t); }
.upstat.bad [data-uptext] { color: #FF9A9A; }
.upstat.bad .upbar { display: none; }
@keyframes upwait { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .upbar i { transition: none; } .upstat.wait .upbar i { animation: none; } }

/* Rozie's “Did you mean…?” suggestions inside her reply: one tap asks the question. */
.cm .rzasks, .cm.bot span.rzasks, .cm.them span.rzasks { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 12px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; max-width: none; }
.cm .rzasks .chip { white-space: normal; text-align: left; border: 1px solid rgba(var(--pink-rgb), .45); background: rgba(var(--pink-rgb), .1); color: var(--pink-2); border-radius: 14px; padding: 8px 12px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.cm .rzasks .chip::after { content: ' →'; }
.cm .rzasks .chip:hover, .cm .rzasks .chip:focus-visible { background: rgba(var(--pink-rgb), .2); color: #fff; }

/* Sister-site link in the footer (QueerX → the main OnlySecretClips, and vice versa if ever set). */
.sistersite { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 10px; padding: 11px 16px; border-radius: 14px; text-decoration: none; font-size: 14px; color: var(--ink); border: 1px solid var(--line); background: var(--surface); transition: border-color .15s, background .15s; }
.sistersite span:first-child { color: var(--muted); }
.sistersite b { color: var(--pink); font-weight: 700; }
.sistersite:hover, .sistersite:focus-visible { border-color: var(--pink); background: var(--pink-t); }