/* fyn.me — design system from Halo handoff */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;

  --stack: var(--sp-5);          /* between sections in a column */
  --stack-tight: var(--sp-3);    /* a heading and the block it introduces */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #16181D;
}
a { color: #7B5BE6; text-decoration: none; }
a:hover { color: #5B3FD6; }
button { font-family: 'DM Sans', system-ui, sans-serif; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(20,20,20,.16); border-radius: 20px; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes floaty  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-16px) } }
@keyframes floaty2 { 0%,100% { transform: translateY(0) } 50% { transform: translateY(14px) } }
@keyframes spinblob { to { transform: rotate(360deg) } }
@keyframes pop { from { transform: scale(.9); opacity: 0 } to { transform: scale(1); opacity: 1 } }
/* For anything centred with translateX(-50%). A keyframe's transform replaces
   the element's own outright, so animating plain scale() on a centred element
   drops the centring for the length of the animation — the tooltip appeared
   half its width to the right and snapped back when the animation ended. The
   translate has to be carried through every frame. */
@keyframes pop-centred {
  from { transform: translateX(-50%) scale(.94); opacity: 0 }
  to   { transform: translateX(-50%) scale(1);   opacity: 1 }
}
@keyframes dot { 0%,60%,100% { transform: translateY(0); opacity:.4 } 30% { transform: translateY(-5px); opacity:1 } }

.page {
  min-height: 100vh; width: 100%; position: relative;
  background: linear-gradient(140deg,#cfd3e4 0%,#c2c6da 38%,#d9d2df 72%,#c8cddd 100%);
}
.blob { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
.blob-a {
  top: -120px; left: -100px; width: 420px; height: 420px;
  background: radial-gradient(circle at 30% 30%,#b98bf5,#7b5be6 55%,transparent 72%);
  filter: blur(30px); opacity: .35; animation: floaty 9s ease-in-out infinite;
}
.blob-b {
  bottom: -140px; right: -90px; width: 460px; height: 460px;
  background: radial-gradient(circle at 60% 40%,#ff7fa6,#ff5c8a 50%,transparent 72%);
  filter: blur(34px); opacity: .28; animation: floaty2 11s ease-in-out infinite;
}
.hidden { display: none !important; }

/* ---------- brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; }
.logo {
  display: inline-block; width: 44px; height: 44px; border-radius: 14px;
  background: conic-gradient(from 210deg,#7b5be6,#ff5c8a,#ffb15c,#48c9b0,#7b5be6);
  box-shadow: 0 8px 22px rgba(123,91,230,.4);
}
.logo-sm { width: 38px; height: 38px; border-radius: 12px; box-shadow: 0 6px 16px rgba(123,91,230,.34); }
.logo-white { background: rgba(255,255,255,.9); box-shadow: none; }
.wordmark { font-family: 'Poppins'; font-weight: 800; font-size: 24px; letter-spacing: -.5px; color: #16181D; }
.wordmark-sm { font-size: 22px; }
.wordmark-white { color: #fff; font-size: 20px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; cursor: pointer; font-weight: 600; font-size: 15px;
  padding: 12px 22px; border-radius: 30px; transition: filter .15s, background .15s;
}
.btn:hover { filter: brightness(1.06); }
.btn-dark { background: #141414; color: #fff !important; box-shadow: 0 10px 24px rgba(20,20,20,.28); }
.btn-frost { background: rgba(255,255,255,.6); color: #16181D !important; backdrop-filter: blur(8px); }
.btn-white { background: #fff; color: #16181D !important; }
.btn-light { background: #F3F4F7; color: #16181D !important; }
.btn-quiet { background: transparent; color: #9AA0AB !important; }
.btn-grad {
  background: linear-gradient(100deg,#7b5be6,#ff5c8a); color: #fff !important; font-weight: 700;
  box-shadow: 0 8px 22px rgba(123,91,230,.4);
}
.btn-lg { font-size: 16px; font-weight: 700; padding: 16px 28px; border-radius: 34px; }
.btn-sm { font-size: 13.5px; padding: 10px 18px; border-radius: 20px; }
.btn-xs { font-size: 12.5px; padding: 7px 14px; border-radius: 16px; }
.btn-block { width: 100%; }

/* ---------- chips / badges ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; border: none; cursor: default;
  font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 20px; }
button.chip, .chip.quick { cursor: pointer; }
.chip-lilac { background: #F2EEFB; color: #7b5be6; }
.chip-blue  { background: #E9F0FE; color: #3d7ae6; }
.chip-pink  { background: #FDEBF1; color: #ff5c8a; }
.chip-mint  { background: #EAF7F0; color: #1f9d6b; }
.chip-cream { background: #FBF1DB; color: #c78a1e; }
.tint-blue  { background: #E9F0FE; }
.tint-cream { background: #FBF1DB; }
.tint-pink  { background: #FDEBF1; }
.tint-mint  { background: #EAF7F0; }
.badge {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 12px; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.badge-pink { background: #ff5c8a; color: #fff; }
.badge-lilac { background: #F2EEFB; color: #7b5be6; }

.dot-online { width: 8px; height: 8px; border-radius: 50%; background: #43e97b; display: inline-block; }
.dot-online.glow { box-shadow: 0 0 0 3px rgba(67,233,123,.25); }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #48c9b0; box-shadow: 0 0 0 4px rgba(72,201,176,.25); }

/* ---------- cards ---------- */
.card { background: #fff; border-radius: 24px; box-shadow: 0 16px 36px rgba(60,50,90,.12); position: relative; z-index: 1; }
.pad-card { padding: 16px 20px 20px; }
.pad-card-lg { padding: var(--sp-6); }
.card-label { font-size: 12px; font-weight: 700; color: #9AA0AB; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 12px; }
.card-title { font-family: 'Poppins'; font-weight: 700; font-size: 19px; margin: 0 0 16px; }
.empty-note { text-align: center; color: #9AA0AB; font-size: 14.5px; padding: 26px 18px; }
.empty-mini { color: #b3b8c2; font-size: 13px; }

.flash { border-radius: 14px; padding: 12px 16px; font-size: 14px; font-weight: 600; margin: 12px 0; 
  /* Some messages are a report rather than a sentence — the App Store key test
     lists what it sent, one field per line. pre-line keeps those breaks without
     letting any markup through. */
  white-space: pre-line; }
.flash-err { background: #FDEBF1; color: #d43f6d; }
.flash-ok  { background: #EAF7F0; color: #1f9d6b; }

/* ---------- forms ---------- */
.f-label { font-size: 13px; font-weight: 600; color: #4b5560; display: block; margin: 14px 0 7px; }
.f-hint { color: #9AA0AB; font-weight: 500; }
.f-input {
  width: 100%; border: none; background: #F3F4F7; border-radius: 14px;
  padding: 14px 16px; font-size: 15px; font-family: 'DM Sans'; outline: none; color: #16181D;
}
.f-input:focus { box-shadow: 0 0 0 2px rgba(123,91,230,.35); }
.f-area { min-height: 90px; resize: vertical; }
.f-input-row { display: flex; align-items: center; padding: 0 0 0 14px; }
.f-prefix { color: #9AA0AB; font-weight: 600; }
.f-input-row input { flex: 1; border: none; background: transparent; padding: 14px 12px 14px 4px; font-size: 15px; font-family: 'DM Sans'; outline: none; min-width: 0; }
.f-grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.f-grid4 { grid-template-columns: repeat(2,1fr); }
form .btn { margin-top: 20px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- segmented ---------- */
.seg { display: flex; background: #F3F4F7; padding: 5px; border-radius: 30px; gap: 2px; }
/* A tab bar with more than a handful of entries cannot share the width evenly on
   a phone — eight admin tabs would each get about 45px and the labels would be
   unreadable. This one scrolls sideways instead, and the tabs keep their size. */
.seg-scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.seg-scroll::-webkit-scrollbar { display: none; }
.seg-scroll .seg-btn { flex: 0 0 auto; padding-left: 16px; padding-right: 16px; white-space: nowrap; }
.seg-btn {
  flex: 1; border: none; background: transparent; text-align: center; cursor: pointer;
  font-weight: 700; font-size: 14px; padding: 11px; border-radius: 26px; color: #9AA0AB !important;
}
.seg-btn.is-active { background: #fff; color: #141414 !important; box-shadow: 0 3px 8px rgba(0,0,0,.08); }
.seg-light .seg-btn { padding: 8px 15px; font-size: 13px; font-weight: 600; flex: none; }

/* ---------- top navbar ---------- */
.topnav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.82); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(20,20,20,.06);
}
.topnav-in { width: 100%; padding: 12px 26px; display: flex; align-items: center; gap: 22px; }
.topnav-tabs { display: flex; align-items: center; gap: 4px; }
.toptab { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14.5px; padding: 10px 18px; border-radius: 22px; color: #4b5560 !important; white-space: nowrap; }
.toptab .badge { font-size: 11px; min-width: 19px; height: 19px; }
.toptab:hover { background: #f5f6f8; }
.toptab.is-active { background: #141414; color: #fff !important; }
.topnav-search {
  flex: 1; max-width: 360px; margin-left: auto; display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1.5px solid rgba(20,20,20,.08); border-radius: 22px;
  padding: 5px 6px 5px 15px; box-shadow: 0 2px 10px rgba(20,20,20,.05);
}
.ts-icon { display: flex; align-items: center; opacity: .5; color: #4b5560; }
.ts-icon .ico { width: 16px; height: 16px; vertical-align: middle; }
.topnav-search input { flex: 1; border: none; background: transparent; font-size: 14px; outline: none; color: #16181D; min-width: 0; padding: 8px 0; font-family:'DM Sans'; }
.topnav-right { display: flex; align-items: center; gap: 12px; flex: none; }
.btn-match { border: none; background: #141414; color: #fff; font-weight: 600; font-size: 14px; padding: 11px 18px; border-radius: 22px; cursor: pointer; white-space: nowrap; }
.nav-avatar {
  width: 42px; height: 42px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff !important; font-family: 'Poppins'; font-weight: 800; font-size: 16px;
}
.mobilenav { display: none; }

/* ---------- landing ---------- */
.landing { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 28px 28px 60px; }
.landing-top { display: flex; align-items: center; justify-content: space-between; }
.landing-top-actions { display: flex; align-items: center; gap: 10px; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; margin-top: 56px; }
.live-badge {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.6);
  padding: 7px 14px; border-radius: 30px; font-size: 13px; font-weight: 600; color: #5B3FD6; margin-bottom: 24px;
}
.hero-h1 { font-family: 'Poppins'; font-weight: 800; font-size: 58px; line-height: 1.04; letter-spacing: -1.8px; margin: 0 0 20px; }
.grad-text { background: linear-gradient(100deg,#7b5be6,#ff5c8a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: 18px; line-height: 1.55; color: #4b4f5a; max-width: 440px; margin: 0 0 30px; font-weight: 500; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.social-proof { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.avatar-stack { display: flex; }
.avatar-stack span { width: 38px; height: 38px; border-radius: 50%; border: 3px solid #d6d0dc; }
.avatar-stack span + span { margin-left: -12px; }
.proof-text { font-size: 14px; color: #4b4f5a; font-weight: 600; }

.hero-art { position: relative; height: 480px; }
.hero-card-q {
  position: absolute; top: 20px; right: 0; width: 320px; background: #fff; border-radius: 28px;
  padding: 20px; box-shadow: 0 30px 60px rgba(60,50,90,.25); animation: floaty 7s ease-in-out infinite;
}
.hcq-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.anon-ava {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg,#7b5be6,#ff5c8a);
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px;
}
.hcq-name { font-weight: 700; font-size: 14px; font-family: 'Poppins'; }
.hcq-time { font-size: 12px; color: #9AA0AB; }
.hero-card-q p { margin: 0; font-size: 15px; line-height: 1.5; color: #2b2e36; font-weight: 500; }
.hcq-actions { display: flex; gap: 8px; margin-top: 16px; }
.hero-card-chat {
  position: absolute; top: 220px; left: 0; width: 290px; background: #141414; border-radius: 26px;
  padding: 18px; box-shadow: 0 26px 50px rgba(20,20,20,.4); animation: floaty2 8s ease-in-out infinite;
}
.hcc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: #fff; font-weight: 600; font-size: 14px; }
.hcc-ava { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#43e97b,#38f9d7); }
.hcc-head .dot-online { margin-left: auto; }
.hcc-bubble-in { background: #26262b; color: #eee; font-size: 14px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; max-width: 80%; margin-bottom: 8px; }
.hcc-bubble-out { background: linear-gradient(100deg,#7b5be6,#ff5c8a); color: #fff; font-size: 14px; padding: 10px 14px; border-radius: 16px 16px 4px 16px; max-width: 80%; margin-left: auto; }
.hero-tile {
  position: absolute; top: 0; left: 40px; width: 78px; height: 78px; border-radius: 24px;
  background: conic-gradient(from 40deg,#ffb15c,#ff5c8a,#7b5be6,#48c9b0,#ffb15c);
  box-shadow: 0 16px 30px rgba(255,92,138,.4); animation: spinblob 14s linear infinite;
}
.features { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 60px; }
.feature { border-radius: 26px; padding: 26px; }
.feature-ico { width: 48px; height: 48px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.feature-ico .ico { width: 23px; height: 23px; vertical-align: middle; }
.fi-lilac { color: #7b5be6; }
.fi-mint { color: #1f9d6b; }
.fi-blue { color: #2f6fd0; }
.feature h3 { font-family: 'Poppins'; font-weight: 700; font-size: 19px; margin: 0 0 8px; }
.feature p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #4b5560; }

/* ---------- auth ---------- */
.auth-wrap { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px; }
.auth-card {
  width: 100%; max-width: 960px; background: #fff; border-radius: 34px;
  box-shadow: 0 40px 90px rgba(60,50,90,.28); overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; min-height: 560px;
}
/* The panel used to be one headline pinned to the bottom of a tall empty
   gradient. It now runs top to bottom: brand, promise, a small picture of the
   product, then what you get — the space carries meaning instead of filling it. */
.auth-brand {
  background: linear-gradient(150deg,#7b5be6,#ff5c8a); padding: 40px; color: #fff;
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 22px;
}
.auth-logo { align-self: flex-start; }
.auth-logo-chip { display: inline-flex; align-items: center; background: rgba(255,255,255,.95);
  border-radius: 14px; padding: 8px 12px; box-shadow: 0 8px 22px rgba(40,20,80,.18); }
.auth-logo-chip img { height: 34px; width: auto; max-width: 190px; display: block; }
.auth-brand-copy { margin-top: 6px; }
.auth-brand-copy h2 { font-family: 'Poppins'; font-weight: 800; font-size: 34px; line-height: 1.1; letter-spacing: -1px; margin: 0 0 14px; }
.auth-brand-copy p { font-size: 15px; line-height: 1.6; opacity: .9; margin: 0; }
/* A question arriving and its answer. Deliberately small and slightly tilted —
   it reads as an illustration, not as live content someone might try to use. */
.auth-demo { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.auth-msg { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px; padding: 12px 14px; backdrop-filter: blur(4px); max-width: 300px; }
.auth-msg-in  { border-bottom-left-radius: 6px; }
.auth-msg-out { border-bottom-right-radius: 6px; align-self: flex-end;
  background: rgba(255,255,255,.22); }
.auth-msg-who { display: flex; align-items: center; gap: 6px; font-size: 11.5px;
  font-weight: 700; opacity: .85; margin-bottom: 5px; }
.auth-msg-who i { font-style: normal; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.3); display: grid; place-items: center; font-size: 10px; }
.auth-msg-who .ico { width: 13px; height: 13px; }
.auth-msg p { margin: 0; font-size: 13.5px; line-height: 1.45; }

.auth-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.auth-points li { display: flex; align-items: center; gap: 9px; font-size: 13px;
  font-weight: 600; opacity: .92; }
.auth-points .ico { width: 15px; height: 15px; flex: none; opacity: .8; }

.auth-circle { position: absolute; border-radius: 50%; }
.auth-circle.a { top: -60px; right: -60px; width: 200px; height: 200px; background: rgba(255,255,255,.14); }
.auth-circle.b { bottom: 40px; right: -30px; width: 120px; height: 120px; background: rgba(255,255,255,.1); }
.auth-form { padding: 44px 46px; display: flex; flex-direction: column; justify-content: center; }
.auth-form .seg { margin-bottom: 24px; }
.auth-title { font-family: 'Poppins'; font-weight: 700; font-size: 26px; margin: 0 0 6px; }
.auth-sub { font-size: 14px; color: #9AA0AB; margin: 0 0 10px; }
.auth-form .btn-dark { width: 100%; margin-top: 24px; border-radius: 16px; padding: 15px; font-size: 16px; font-weight: 700; }

/* ---------- profile ---------- */
.profile-wrap { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; padding: 24px 26px 80px; }
.guest-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.profile-grid { display: grid; grid-template-columns: 360px 1fr; gap: 22px; align-items: start; }
.profile-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
.profile-card { border-radius: 30px; overflow: hidden; box-shadow: 0 24px 50px rgba(60,50,90,.16); }
.profile-cover { height: 120px; background: linear-gradient(120deg,#a18cd1,#fbc2eb 60%,#ffd6a5); }
.profile-card-body { padding: 0 26px 26px; text-align: center; }
.profile-ava {
  width: 110px; height: 110px; border-radius: 34px; border: 5px solid #fff; margin: -55px auto 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-family: 'Poppins'; font-weight: 800; font-size: 40px; box-shadow: 0 12px 24px rgba(123,91,230,.3);
}
.profile-name { font-family: 'Poppins'; font-weight: 800; font-size: 24px; margin: 14px 0 2px; letter-spacing: -.5px; }
.profile-handle { color: #9AA0AB; font-weight: 600; font-size: 14.5px; }
.profile-bio { margin: 14px 0 0; font-size: 14.5px; line-height: 1.55; color: #3b3f48; }
.profile-chips { display: flex; justify-content: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.profile-stats { display: flex; justify-content: center; gap: 26px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #f1f2f5; }
.profile-stats b { display: block; font-family: 'Poppins'; font-weight: 800; font-size: 22px; }
.profile-stats span { font-size: 12px; color: #9AA0AB; }
.profile-actions { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.profile-actions .btn { margin: 0; }
.btn-block-user {
  background: #FDEBF1; color: #d43f6d !important; font-weight: 700;
  transition: background .18s, color .18s, box-shadow .18s, transform .12s;
}
.btn-block-user:hover {
  background: #ff5c8a; color: #fff !important; filter: none;
  box-shadow: 0 8px 18px rgba(255,92,138,.38); transform: translateY(-1px);
}
.btn-block-user:active { transform: translateY(0); }
.btn-unblock-user {
  background: #EAF7F0; color: #1f9d6b !important; font-weight: 700;
  transition: background .18s, color .18s, box-shadow .18s;
}
.btn-unblock-user:hover {
  background: #43e97b; color: #fff !important; filter: none;
  box-shadow: 0 8px 18px rgba(67,233,123,.35);
}
.follow-list { display: flex; flex-direction: column; gap: 12px; }
.follow-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.follow-row .block-ava { position: relative; }
.follow-row .btn { margin: 0; }
.fol-online { color: #1f9d6b !important; font-weight: 700; }
.social-row { display: flex; gap: 10px; flex-wrap: wrap; }
.social-pill { flex: 1 1 calc(50% - 5px); display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 700; font-size: 13px; padding: 11px 0; border-radius: 16px; }

.online-label { display: flex; align-items: center; gap: 7px; }
.shuffle-btn {
  margin-left: auto; border: none; background: #F3F4F7; width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center; color: #4b5560;
}
.shuffle-btn .ico { width: 15px; height: 15px; vertical-align: middle; }
.shuffle-btn:hover { background: #e8eaef; }
.online-grid { display: grid; grid-template-columns: repeat(4,1fr); column-gap: 10px; row-gap: 18px; }
.online-cell { position: relative; cursor: pointer; display: block; }
.online-ava {
  width: 100%; aspect-ratio: 1; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: 'Poppins'; font-weight: 800; font-size: 20px;
}
.online-dot { position: absolute; bottom: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: #43e97b; border: 2.5px solid #fff; }
.online-tip {
  display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #141414; color: #fff; border-radius: 16px; padding: 12px 14px; width: 170px; z-index: 30;
  box-shadow: 0 14px 30px rgba(0,0,0,.35); animation: pop-centred .15s ease; text-align: center;
}
.online-cell:hover .online-tip { display: block; }
.online-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #141414; }
.online-tip b { display: block; font-family: 'Poppins'; font-weight: 700; font-size: 14px; }
.online-tip i { display: block; font-style: normal; font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 8px; }
.online-tip em { display: block; font-style: normal; font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.8); }
.tip-cta { display: block; margin-top: 8px; background: linear-gradient(100deg,#7b5be6,#ff5c8a); border-radius: 14px; padding: 7px 0; font-weight: 700; font-size: 12px; }

/* compose card: see the block near the end of this file */

.answers-head { display: flex; align-items: center; gap: 8px; margin: 0 var(--sp-1); }
.answers-head span:first-child { font-family: 'Poppins'; font-weight: 700; font-size: 20px; }
.count-pill { background: #141414; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.answers-list { display: flex; flex-direction: column; gap: 16px; }
.answer-card { border-radius: 26px; padding: 24px; }
.answer-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.qmark { width: 24px; height: 24px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.answer-q { margin: 0 0 12px; font-weight: 600; font-size: 17px; color: #1c1e24; }
.answer-a { margin: 0; font-size: 15.5px; line-height: 1.55; color: #3b3f48; }
.answer-foot { display: flex; gap: 16px; margin-top: 16px; }
.like-btn { border: none; background: transparent; font-size: 14px; color: #8890a0; font-weight: 600; cursor: pointer; padding: 0; }
.like-btn.liked { color: #ff5c8a; }
.share-wrap { position: relative; display: inline-block; }
.share-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 50;
  background: #fff; border-radius: 18px; padding: 8px; min-width: 180px;
  box-shadow: 0 18px 44px rgba(20,20,20,.22); animation: pop .15s ease;
  display: flex; flex-direction: column; gap: 2px;
}
.share-item {
  display: block; text-align: left; border: none; background: transparent; cursor: pointer;
  font-family: 'DM Sans'; font-weight: 600; font-size: 14px; color: #16181D !important;
  padding: 10px 14px; border-radius: 12px; text-decoration: none;
}
.share-item:hover { background: #F3F4F7; }
.answer-single { margin-bottom: 16px; }
.answer-cta { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.answer-cta .btn { margin-left: auto; }

/* ---------- share banner ---------- */
.share-banner {
  background: linear-gradient(120deg,#E9F0FE,#F2EEFB); border-radius: 24px; padding: 20px;
  display: flex; align-items: center; gap: 16px; position: relative; z-index: 1;
}
.share-ico { width: 52px; height: 52px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; color: #7b5be6; }
.share-ico .ico { width: 24px; height: 24px; vertical-align: middle; }
.share-copy { flex: 1; min-width: 0; }
.share-copy b { display: block; font-family: 'Poppins'; font-weight: 700; font-size: 16px; }
.share-copy span { font-size: 13.5px; color: #5b6270; }

/* ---------- dashboard ---------- */
.dash {
  position: relative; z-index: 2; background: #fff; display: grid;
  grid-template-columns: 264px 1fr 316px; min-height: calc(100vh - 67px);
}
.dash-2col { grid-template-columns: 264px 1fr; }
.feed-narrow { max-width: 680px; }
.view-all { margin-left: auto; }
.dash-side { padding: 26px 20px; display: flex; flex-direction: column; border-right: 1px solid #f1f2f5; }
/* The whole block is a link to your own profile. text-decoration and colour are
   reset because it sits inside a nav where links are styled, and the chevron
   only shows up on hover so the sidebar stays quiet at rest. */
.dash-me { display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
  text-decoration: none; color: inherit; border-radius: 16px; padding: 6px;
  margin-left: -6px; margin-right: -6px; transition: background .15s ease; }
.dash-me:hover { background: #F5F6F9; }
.dash-me-go { margin-left: auto; width: 16px; height: 16px; color: #C3C7D1;
  opacity: 0; transition: opacity .15s ease; flex: none; }
.dash-me:hover .dash-me-go { opacity: 1; }
/* Beats `.dash-me span` (0,1,1) with (0,2,0), so the crown keeps its gold
   instead of picking up the muted handle colour next to it. */
.dash-me .vip-tick { color: #b8860b; }
[data-theme="dark"] .dash-me:hover { background: #21222A; }
[data-theme="dark"] .dash-me .vip-tick { color: #EFC64B; }
.dash-me-ava {
  position: relative; width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-family: 'Poppins'; font-weight: 800; font-size: 20px;
}
.presence { position: absolute; bottom: 0; right: 0; width: 14px; height: 14px; border-radius: 50%; background: #43e97b; border: 3px solid #fff; }
.dash-me b { display: block; font-family: 'Poppins'; font-weight: 700; font-size: 16px; }
.dash-me span { font-size: 13px; color: #9AA0AB; }
.dash-nav { display: flex; flex-direction: column; gap: 4px; }
.dnav {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 16px;
  color: #3b3f48 !important; font-weight: 600; font-size: 15px; cursor: pointer;
  border: none; background: transparent; text-align: left; width: 100%;
}
.dnav:hover { background: #f5f6f8; }
.dnav.is-active { background: #141414; color: #fff !important; }
.dnav .badge { margin-left: auto; }
.dnav-quiet { color: #9AA0AB !important; }
.promo-card { margin-top: auto; background: linear-gradient(150deg,#7b5be6,#ff5c8a); border-radius: 22px; padding: 18px; color: #fff; }
.promo-card b { display: block; font-family: 'Poppins'; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.promo-card span { display: block; font-size: 12.5px; opacity: .9; line-height: 1.4; margin-bottom: 12px; }
.btn-promo { border: none; background: #fff; color: #7b5be6; font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 20px; cursor: pointer; width: 100%; }
.logout-form { margin-top: 8px; }

.dash-feed { padding: 26px 34px; overflow-y: auto; max-height: calc(100vh - 67px); }
.dash-feed-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.dash-feed-head h1 { font-family: 'Poppins'; font-weight: 800; font-size: 26px; margin: 0; letter-spacing: -.5px; }
.dash-feed-head p { margin: 2px 0 0; font-size: 14px; color: #9AA0AB; }

.inbox-card { border-radius: 24px; padding: 20px; }
.inbox-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.inbox-card-head b { display: block; font-weight: 700; font-size: 14.5px; font-family: 'Poppins'; }
.inbox-card-head span { font-size: 12px; color: #9AA0AB; }
.new-pill { margin-left: auto; background: #fff; color: #7b5be6; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 14px; font-style: normal; }
.answered-pill { margin-left: auto; background: #fff; color: #1f9d6b; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 14px; font-style: normal; }
.inbox-answer { background: rgba(255,255,255,.65); border-radius: 16px; padding: 12px 16px; margin-top: 12px; }
.ia-label { font-size: 11.5px; font-weight: 700; color: #9AA0AB; letter-spacing: .4px; text-transform: uppercase; display: block; margin-bottom: 4px; }
.ia-text { margin: 0; font-size: 14.5px; line-height: 1.5; color: #3b3f48; }
.inbox-body { margin: 0; font-size: 16px; line-height: 1.5; color: #1c1e24; font-weight: 500; }
.inbox-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.answer-box { margin-top: 16px; }
.answer-box textarea {
  width: 100%; border: none; background: rgba(255,255,255,.75); border-radius: 14px;
  padding: 12px 14px; font-size: 14.5px; font-family: 'DM Sans'; outline: none; resize: vertical; min-height: 70px;
}
.answer-box-foot { display: flex; gap: 8px; margin-top: 12px; }

.dash-rail { padding: 26px 24px; border-left: 1px solid #f1f2f5; overflow-y: auto; max-height: calc(100vh - 67px); }
/* No margin here on purpose: a type selector inside the container would be
   more specific than the spacing system's `.dash-rail > *` and would silently
   win. Vertical rhythm is set in one place, at the bottom of this file. */
.dash-rail h3 { font-family: 'Poppins'; font-weight: 700; font-size: 18px; }
.live-row { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2); }
.live-cell { min-width: 74px; text-align: center; }
.live-ava {
  width: 64px; height: 64px; border-radius: 22px; margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: 'Poppins'; font-weight: 800; font-size: 22px;
}
.live-name { font-size: 12px; font-weight: 600; color: #16181D; display: block; }
.stats-card { background: #141414; border-radius: 22px; padding: var(--sp-4); color: #fff; }
.stats-card > span { font-size: 13px; opacity: .7; display: block; margin-bottom: 4px; }
.stats-row { display: flex; align-items: flex-end; gap: 16px; }
.stats-row b { display: block; font-family: 'Poppins'; font-weight: 800; font-size: 28px; }
.stats-row span { font-size: 12px; opacity: .7; }
.meet-list { display: flex; flex-direction: column; gap: 12px; }
.meet-row { display: flex; align-items: center; gap: 11px; }
.meet-ava { width: 44px; height: 44px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.meet-info { flex: 1; min-width: 0; }
.meet-info b { display: block; font-weight: 700; font-size: 14px; color: #16181D; }
.meet-info span { font-size: 12px; color: #9AA0AB; }

/* ---------- chat ---------- */
.chat-layout {
  position: relative; z-index: 2; background: #fff; display: grid;
  grid-template-columns: 340px 1fr; height: calc(100vh - 67px); overflow: hidden;
}
.chat-list { border-right: 1px solid #f1f2f5; display: flex; flex-direction: column; min-height: 0; }
.chat-list-head { padding: 22px 20px 14px; display: flex; align-items: center; gap: 10px; }
.chat-back { display: inline-flex; color: #16181D !important; }
.chat-back .ico { width: 20px; height: 20px; vertical-align: middle; }
.chat-back-mob { display: none; color: #16181D !important; margin-right: 4px; }
.chat-back-mob .ico { width: 20px; height: 20px; vertical-align: middle; }
.chat-list-title { font-family: 'Poppins'; font-weight: 800; font-size: 20px; }
.chat-list-scroll { padding: 0 12px; overflow-y: auto; flex: 1; }
.conv-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; margin-bottom: 4px; }
.conv-row:hover { background: #f7f7f9; }
.conv-row.is-active { background: #F2EEFB; }
.conv-ava {
  position: relative; width: 46px; height: 46px; border-radius: 16px; flex: none;
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 17px;
}
.conv-dot { position: absolute; bottom: -2px; right: -2px; width: 13px; height: 13px; border-radius: 50%; background: #43e97b; border: 2.5px solid #fff; }
.conv-info { flex: 1; min-width: 0; }
.conv-info b { display: block; font-weight: 700; font-size: 14.5px; color: #16181D; }
/* Direct child, not any descendant. This styles the preview line, but the
   VIP tick is a span too — nested inside the name — so the loose selector
   caught it and `display: block` dropped the crown onto its own row. */
.conv-info > span { display: block; font-size: 12.5px; color: #9AA0AB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-time { font-size: 11px; color: #c1c5cd; font-style: normal; }
.chat-list-foot { padding: 14px; }

.chat-window { display: flex; flex-direction: column; background: #FAFAFB; min-height: 0; }
.chat-empty { align-items: center; justify-content: center; }
.chat-head { padding: 14px 22px; background: #fff; border-bottom: 1px solid #f1f2f5; display: flex; align-items: center; gap: 10px; }
.chat-head .btn, .chat-head .photo-toggle { flex: none; white-space: nowrap; }
.peer-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; overflow: hidden; color: inherit !important; }
.peer-link[href]:hover .chat-peer b { color: #7b5be6; }
[data-theme="dark"] .peer-link[href]:hover .chat-peer b { color: #a18cd1; }
.chat-peer { flex: 1; min-width: 0; overflow: hidden; }
.chat-peer b { display: block; font-family: 'Poppins'; font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Direct child, for the same reason as .conv-info above: this is the line
   under the name, and the VIP tick is a span nested inside the name. */
.chat-peer > span { display: block; font-size: 12.5px; color: #9AA0AB; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-peer span.is-online { color: #43e97b; }
.photo-toggle { display: inline-flex; align-items: center; gap: 6px; background: #F3F4F7; border-radius: 20px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.photo-toggle input { accent-color: #7b5be6; }

/* ---------- icon system ----------
   Inline SVG that inherits colour and scales with the text it sits next to. */
.ico { width: 1.15em; height: 1.15em; flex: none; display: inline-block;
  vertical-align: -0.19em; stroke-width: 1.75; }
.ico-sm { width: 1em; height: 1em; vertical-align: -0.15em; }
.ico-lg { width: 1.5em; height: 1.5em; vertical-align: -0.3em; }
.ico-xl { width: 26px; height: 26px; vertical-align: middle; stroke-width: 1.6; }
/* larger glyphs read better slightly thinner */
.ico-lg, .ico-xl { stroke-width: 1.6; }
.btn .ico, .dnav .ico, .seg-btn .ico { margin-right: 2px; }
.btn .ico:only-child { margin-right: 0; }

/* theme toggle shows one glyph per theme; no JS repaint, so no flash on load */
.btn-theme .ico-sun { display: none; }
[data-theme="dark"] .btn-theme .ico-moon { display: none; }
[data-theme="dark"] .btn-theme .ico-sun { display: inline-block; }

/* contexts where an icon sits alone in a pill/tag rather than beside a label */
.answered-pill .ico, .revealed-tag .ico, .closed-tag .ico, .po-status .ico,
.pm-tag .ico, .badge .ico { vertical-align: -0.14em; }
.key-dot { display: grid !important; place-items: center; }
.key-dot .ico { width: 14px; height: 14px; vertical-align: middle; }
.pm-icon .ico { width: 19px; height: 19px; vertical-align: middle; color: #6d7180; }
.settings-tab .ico { width: 15px; height: 15px; vertical-align: -0.2em; margin-right: 3px; }
.tip-cta .ico, .compose-note .ico, .chat-notice .ico, .ended-note .ico { vertical-align: -0.16em; }
.admin-section-title .ico, .card-title .ico { vertical-align: -0.2em; margin-right: 4px; }
/* mobile tab bar: glyph above label */
.mobilenav a .ico { width: 21px; height: 21px; vertical-align: middle; }

/* a tinted round plate for feature/empty-state icons */
.ico-plate { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  flex: none; background: #F3F4F7; color: #6d7180; }
.ico-plate .ico { width: 21px; height: 21px; vertical-align: middle; }
.ico-plate-lilac { background: #F2EEFB; color: #7b5be6; }
.ico-plate-pink  { background: #FDEBF1; color: #d43f6d; }
.ico-plate-mint  { background: #EAF7F0; color: #1f9d6b; }
.ico-plate-blue  { background: #E9F0FE; color: #2f6fd0; }
.ico-plate-cream { background: #FBF1DB; color: #9a7b1f; }

/* ---------- earnings & payouts ---------- */
.badge-mint { background: #EAF7F0; color: #1f9d6b; }
.badge-gold { background: #FFF3D0; color: #8a6508; }
.balance-card { background: linear-gradient(135deg, #F2EEFB 0%, #EAF7F0 100%); }
.bal-main { text-align: center; padding: 6px 0 14px; }
.bal-amount { display: block; font-family: 'Poppins', system-ui, sans-serif; font-weight: 800;
  font-size: 42px; line-height: 1.1; margin-top: 4px; }
.bal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bal-grid > div { background: rgba(255,255,255,.7); border-radius: 14px; padding: 10px 8px; text-align: center; }
.bal-grid b { display: block; font-size: 17px; font-weight: 800; }
.bal-grid span { font-size: 11.5px; color: #7c8090; font-weight: 600; }

.pm-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #F0F1F4; }
.pm-row:last-of-type { border-bottom: 0; }
.pm-icon { width: 38px; height: 38px; flex: none; border-radius: 12px; background: #F3F4F7;
  display: grid; place-items: center; font-size: 18px; }
.pm-info { flex: 1; min-width: 0; }
.pm-info b { display: block; font-size: 14px; }
.pm-info > span { font-size: 12.5px; color: #9AA0AB; font-weight: 600; word-break: break-all; }
.pm-tag { font-size: 10.5px; font-weight: 800; color: #1f9d6b; background: #EAF7F0;
  padding: 2px 8px; border-radius: 12px; font-style: normal; margin-left: 4px; vertical-align: middle; }
.pm-act { flex: none; }
.pm-add { margin-top: 16px; padding-top: 16px; border-top: 1px dashed #E4E5EB; }
.pm-types { margin-bottom: 8px; }
.pm-locked { display: flex; align-items: center; gap: 14px; background: #FBF1DB; border-radius: 16px; padding: 14px 16px; }
.pm-locked > span { font-size: 22px; }
.pm-locked div { flex: 1; min-width: 0; }
.pm-locked b { display: block; font-size: 14px; }
.pm-locked div span { font-size: 12.5px; color: #8a7c5c; font-weight: 600; }

.po-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #F0F1F4; }
.po-row:last-of-type { border-bottom: 0; }
.po-info { flex: 1; min-width: 0; }
.po-info b { display: block; font-size: 15px; }
.po-info > span { display: block; font-size: 12.5px; color: #9AA0AB; font-weight: 600; }
.po-note { color: #7b5be6 !important; margin-top: 2px; }
.po-status { flex: none; font-size: 11.5px; font-weight: 800; padding: 6px 11px; border-radius: 14px; white-space: nowrap; }
.st-wait { background: #FBF1DB; color: #9a7b1f; }
.st-proc { background: #E9F0FE; color: #2f6fd0; }
.st-paid { background: #EAF7F0; color: #1f9d6b; }
.st-rej  { background: #FDEBF1; color: #d43f6d; }


/* saved-secret banner (admin) */
.key-saved { display: flex; align-items: center; gap: 12px; background: #EAF7F0; border: 1px solid #cbe9d9;
  border-radius: 16px; padding: 11px 14px; margin-bottom: 12px; }
.key-saved > div { flex: 1; min-width: 0; }
.key-saved b { display: block; font-size: 13.5px; color: #1f9d6b; }
.key-saved span { font-size: 12.5px; color: #6d8a7d; font-weight: 600; word-break: break-all; }
.key-dot { width: 26px; height: 26px; flex: none; border-radius: 50%; background: #1f9d6b; color: #fff;
  display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.key-clear { background: #fff; flex: none; }

/* bot language picker (admin) */
.bot-langs { margin-top: 20px; padding: 16px; border: 1px solid #ECEDF1; border-radius: 18px; background: #FBFBFD; }
.bot-langs .f-label { margin-top: 0; }
.lang-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.lang-chip { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #E4E5EB;
  border-radius: 20px; padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none;
  transition: background .15s, border-color .15s, color .15s; }
.lang-chip:hover { border-color: #b9a6f0; }
.lang-chip input { accent-color: #7b5be6; margin: 0; }
.lang-chip.on { background: #F1ECFE; border-color: #b9a6f0; color: #5c3fc4; }
.lang-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.revealed-tag { font-size: 12.5px; color: #1f9d6b; font-weight: 700; background: #EAF7F0; padding: 8px 14px; border-radius: 20px; }
.closed-tag { font-size: 12.5px; color: #d43f6d; font-weight: 700; background: #FDEBF1; padding: 8px 14px; border-radius: 20px; white-space: nowrap; }
.chat-ended { text-align: center; }
.ended-note { font-size: 13.5px; color: #9AA0AB; font-weight: 600; padding: 10px 0; }

.chat-canvas { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.chat-notice { text-align: center; font-size: 12px; color: #b3b8c2; font-weight: 600; margin-bottom: 8px; }
.chat-sys { text-align: center; font-size: 12.5px; color: #8890a0; font-weight: 600; background: #f1f2f5; border-radius: 14px; padding: 8px 14px; align-self: center; max-width: 90%; }
/* Wraps so the timestamp drops onto its own line under the bubble. Without
   this the row is a single flex line and the clock would sit beside the text. */
.brow { display: flex; flex-wrap: wrap; }

/* The clock under a chat bubble. Quiet by design: there when you look for it,
   out of the way when you are reading. `flex-basis: 100%` is what puts it on
   its own line; the row's own justify-content then aligns it with the bubble,
   so yours read right and theirs read left. */
.btime { flex-basis: 100%; font-size: 10.5px; color: #9AA0AB; margin-top: 3px;
  font-style: normal; }
.brow.mine   .btime { text-align: right; }
.brow.theirs .btime { text-align: left; }
[data-theme="dark"] .btime { color: #7d8290; }
.brow.mine { justify-content: flex-end; }
.brow.theirs { justify-content: flex-start; }
.bubble { max-width: 74%; font-size: 15px; line-height: 1.45; padding: 12px 16px; word-wrap: break-word; overflow-wrap: break-word; }
.brow.theirs .bubble { background: #fff; color: #1c1e24; border-radius: 20px 20px 20px 5px; box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.brow.mine .bubble { background: linear-gradient(100deg,#7b5be6,#ff5c8a); color: #fff; border-radius: 20px 20px 5px 20px; }
.bubble-photo { padding: 4px; background: #fff; border-radius: 18px; box-shadow: 0 4px 12px rgba(0,0,0,.08); display: block; max-width: 74%; }
.brow.mine .bubble-photo { background: linear-gradient(100deg,#7b5be6,#ff5c8a); }
.bubble-photo img { display: block; max-width: 260px; max-height: 300px; width: 100%; object-fit: cover; border-radius: 15px; }
.typing { align-self: flex-start; background: #fff; border-radius: 18px 18px 18px 5px; padding: 14px 16px; display: flex; gap: 5px; box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: #b3b8c2; animation: dot 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }

.chat-composer { padding: 14px 18px; background: #fff; border-top: 1px solid #f1f2f5; }
.quick-chips { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.composer-row { display: flex; align-items: center; gap: 10px; background: #F3F4F7; border-radius: 24px; padding: 6px 6px 6px 18px; }
#chat-input { flex: 1; border: none; background: transparent; font-size: 15px; font-family: 'DM Sans'; outline: none; padding: 10px 0; min-width: 0; }
.photo-btn { font-size: 19px; cursor: pointer; padding: 4px; }
.photo-btn.is-off { opacity: .35; cursor: not-allowed; }
.send-btn {
  border: none; background: #141414; color: #fff; width: 44px; height: 44px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none;
}
.send-btn .ico { width: 19px; height: 19px; vertical-align: middle; margin-right: 2px; }

/* ---------- photo settings ---------- */
.ps-item { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.ps-item:last-of-type { margin-bottom: 0; }
.ps-ava {
  width: 56px; height: 56px; border-radius: 18px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: 'Poppins'; font-weight: 800; font-size: 22px;
}
.ps-cover { width: 96px; height: 32px; border-radius: 10px; flex: none; display: inline-block; }
.ps-upload { cursor: pointer; }
.ps-item .btn { margin: 0; }

/* ---------- blocked list (settings) ---------- */
.block-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.block-row { display: flex; align-items: center; gap: 12px; }
.block-ava {
  width: 42px; height: 42px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 16px;
}
.block-info { flex: 1; min-width: 0; }
.block-info b { display: block; font-weight: 700; font-size: 14px; color: #16181D; }
.block-info span { font-size: 12px; color: #9AA0AB; }
.block-row .btn { margin: 0; }
.block-label-2 { margin-top: 20px; }
.block-empty { display: block; margin: 0 0 8px; }

/* ---------- confirm modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20,20,20,.45); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 22px; animation: fadein .15s ease;
}
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
.modal-card {
  background: #fff; border-radius: 26px; padding: 26px;
  width: 100%; max-width: 380px; text-align: center;
  box-shadow: 0 40px 90px rgba(60,50,90,.35);
  animation: pop .18s ease;
}
.modal-ico {
  width: 56px; height: 56px; border-radius: 18px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  color: #2b2e36; /* icons stay dark on the pastel tile in BOTH themes */
}
.modal-title { font-family: 'Poppins'; font-weight: 700; font-size: 19px; margin: 0 0 8px; color: #16181D; }
.modal-text { margin: 0 0 22px; font-size: 14.5px; line-height: 1.55; color: #4b5560; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1; margin: 0; padding: 13px; border-radius: 16px; font-size: 14.5px; font-weight: 700; }
.btn-danger { background: #ff5c8a; color: #fff !important; box-shadow: 0 8px 22px rgba(255,92,138,.35); }

/* ---------- narrow pages ---------- */
.narrow-wrap { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; padding: 30px 22px 80px; }
.narrow-wrap.wide { max-width: 1000px; }
.page-title { font-family: 'Poppins'; font-weight: 800; font-size: 26px; letter-spacing: -.5px; margin: 0; }
.center-note { text-align: center; padding-top: 90px; }
.discover-search { display: flex; gap: 10px; margin-bottom: 24px; }
.discover-search .btn { margin: 0; }
/* ---------- discover ----------
   Five to a row rather than three. At three the cards were wide panels with a
   short name marooned in the middle of them; the page is a list of people to
   scan, so the cards are sized to the face and the name and nothing else has
   to stretch to fill the space. Everything below is scaled for a ~150px card. */
.discover-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; align-items: stretch; }
.disc-empty { grid-column: 1 / -1; }   /* a message, not one of the people */

.discover-card {
  padding: 16px 10px 14px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 0;   /* lets the name truncate instead of forcing the column wider */
  transition: transform .15s ease, box-shadow .15s ease;
}
.discover-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20,20,40,.10); }
.disc-ava {
  position: relative; width: 56px; height: 56px; border-radius: 19px; margin-bottom: 9px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-family: 'Poppins'; font-weight: 800; font-size: 21px; flex: none;
}
/* The crown sits outside the truncating name, so a long name is clipped and
   the badge is never the part that disappears. */
.disc-name { display: flex; align-items: center; justify-content: center; gap: 3px;
  max-width: 100%; min-width: 0; }
.disc-name b { font-family: 'Poppins'; font-weight: 700; font-size: 13.5px; color: #16181D;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.disc-name .vip-tick { margin-left: 0; flex: none; }
.disc-handle { font-size: 11.5px; color: #9AA0AB; font-weight: 600;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Two lines, so a long bio cannot make one card taller than the rest of its row. */
.discover-card p { margin: 7px 0 0; font-size: 11.5px; color: #6b7280; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 100%; }
.discover-card .conv-dot { bottom: 1px; right: 1px; }

/* ---------- responsive ---------- */
.mob-only { display: none; }
.online-card-mob { margin-bottom: 20px; }
@media (max-width: 1080px) {
  .topnav-search { display: none; }
  .topnav-right { margin-left: auto; }
  .desk-only { display: none; }
  .mob-only { display: block; }
  .hero { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-side { position: static; }
  .dash { grid-template-columns: 264px 1fr; }
  .dash-rail { display: none; }
  .discover-grid { grid-template-columns: repeat(4,1fr); }
}
/* Step down a column at a time. Jumping five to two left the cards enormous on
   a tablet, which is the shape the redesign was meant to get rid of. */
@media (max-width: 900px) { .discover-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px) { .discover-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 760px) {
  .hero { margin-top: 36px; }
  .hero-h1 { font-size: 40px; letter-spacing: -1.2px; }
  .features { grid-template-columns: 1fr; margin-top: 40px; }
  .auth-card { grid-template-columns: 1fr; min-height: 0; }
  .auth-brand { min-height: 0; padding: 26px 24px; gap: 14px; }
  .auth-brand-copy h2 { font-size: 26px; }
  .auth-demo, .auth-points { display: none; }
  .auth-circle.b { display: none; }
  .auth-form { padding: 30px 24px; }
  .dash { grid-template-columns: 1fr; min-height: auto; }
  .dash-side { display: none; }
  .bal-amount { font-size: 34px; }
  .bal-grid { grid-template-columns: 1fr; }
  .bal-split { grid-template-columns: repeat(2, 1fr); }
  .ins-tiles { grid-template-columns: repeat(2, 1fr); }
  .vip-perks { grid-template-columns: 1fr; }
  .nf-grid { grid-template-columns: 1fr; }
  .bal-when { display: none; }
  /* money rows: the amount keeps its own line rather than squeezing the label */
  .tx-row { flex-wrap: wrap; }
  .tx-row .block-info { flex-basis: calc(100% - 46px); }
  .tx-amt { margin-left: 46px; }
  .bal-grid > div { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; }
  .bal-grid b { font-size: 15px; }
  .pm-row, .po-row { flex-wrap: wrap; }
  .pm-info, .po-info { flex-basis: 60%; }
  .po-field b { text-align: left; }
  .dash-feed { max-height: none; padding: 20px 16px 90px; }
  .topnav-tabs { display: none; }
  .topnav-in { padding: 10px 14px; gap: 10px; }
  /* chat: list-first navigation — the window only opens for an explicitly chosen chat */
  .chat-layout { grid-template-columns: 1fr; height: calc(100vh - 63px); height: calc(100dvh - 63px); }
  .chat-layout.has-active .chat-list { display: none; }
  .chat-layout:not(.has-active) .chat-window { display: none; }
  .chat-back-mob { display: inline; }
  .chat-list-scroll { padding-bottom: 84px; }   /* keep last rows above the bottom tab bar */
  .chat-list-foot { padding-bottom: calc(14px + 58px + env(safe-area-inset-bottom)); }
  /* full-screen conversation: hide the bottom tab bar so the composer is reachable */
  .page:has(.chat-layout.has-active) .mobilenav { display: none; }
  .chat-layout.has-active { height: calc(100vh - 63px); height: calc(100dvh - 63px); }
  .chat-composer { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  /* compact header: name row first, action buttons wrap to a second row if needed */
  .chat-head { padding: 10px 12px; gap: 7px; row-gap: 8px; flex-wrap: wrap; }
  .peer-link { flex: 1 1 0; min-width: 45%; }
  .chat-head .conv-ava { width: 38px; height: 38px; font-size: 15px; }
  .chat-peer b { font-size: 14.5px; }
  .chat-peer span { font-size: 11.5px; }
  .chat-head .btn-sm { font-size: 11.5px; padding: 7px 10px; }
  .photo-toggle { padding: 6px 9px; font-size: 11.5px; gap: 4px; }
  .revealed-tag, .closed-tag { font-size: 11px; padding: 6px 9px; }
  .quick-chips { display: none; }               /* reclaim vertical space on small screens */
  .chat-canvas { padding: 14px; }
  /* browsers without :has() keep the tab bar — lift the composer above it */
  @supports not selector(:has(*)) {
    .chat-layout.has-active .chat-composer { padding-bottom: calc(14px + 60px + env(safe-area-inset-bottom)); }
  }
  .f-grid3 { grid-template-columns: 1fr; }
  .profile-wrap { padding: 16px 14px 100px; }
  .mobilenav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
    background: rgba(255,255,255,.92); backdrop-filter: blur(16px);
    border-top: 1px solid rgba(20,20,20,.06); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .mobilenav a {
    flex: 1; text-align: center; color: #9AA0AB !important;
    display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 0; border-radius: 12px;
  }
  .mobilenav a span { font-size: 10.5px; font-weight: 600; }
  .mobilenav a.is-active { color: #141414 !important; }
  .mobilenav .mob-chat { position: relative; }
  .mob-badge {
    position: absolute; top: 0; left: calc(50% + 6px);
    background: #ff5c8a; color: #fff; font-style: normal;
    font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
  }
  .narrow-wrap { padding-bottom: 100px; }
}

/* ---------- theme toggle ---------- */
.theme-btn {
  border: none; background: rgba(255,255,255,.55); width: 42px; height: 42px;
  border-radius: 50%; cursor: pointer; font-size: 17px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-btn:hover { filter: brightness(1.06); }

/* ---------- DARK MODE ---------- */
[data-theme="dark"] body { color: #e8e9ee; }
[data-theme="dark"] .page {
  background: linear-gradient(140deg,#181a22 0%,#14151c 38%,#1c1826 72%,#161824 100%);
}
[data-theme="dark"] .blob { opacity: .18; }
[data-theme="dark"] .wordmark, [data-theme="dark"] .wordmark-sm { color: #f2f3f7; }
[data-theme="dark"] .hero-h1, [data-theme="dark"] .page-title,
[data-theme="dark"] .answers-head span:first-child { color: #f2f3f7; }
[data-theme="dark"] .hero-sub, [data-theme="dark"] .proof-text { color: #a7abb8; }
[data-theme="dark"] .live-badge { background: rgba(255,255,255,.08); }

[data-theme="dark"] .card, [data-theme="dark"] .profile-card {
  background: #1e2028; box-shadow: 0 16px 36px rgba(0,0,0,.4); color: #e8e9ee;
}
[data-theme="dark"] .card-title, [data-theme="dark"] .profile-name,
[data-theme="dark"] .block-info b, [data-theme="dark"] .meet-info b,
[data-theme="dark"] .conv-info b, [data-theme="dark"] .chat-peer b,
[data-theme="dark"] .disc-name b, [data-theme="dark"] .dash-me b,
[data-theme="dark"] .live-name, [data-theme="dark"] .share-copy b { color: #f2f3f7; }
[data-theme="dark"] .profile-bio { color: #b8bcc8; }
[data-theme="dark"] .empty-note { color: #7c8090; }
[data-theme="dark"] .empty-note a { color: #a18cd1; }

[data-theme="dark"] .btn-frost { background: rgba(255,255,255,.1); color: #e8e9ee !important; }
[data-theme="dark"] .btn-white, [data-theme="dark"] .btn-light { background: #2a2c36; color: #e8e9ee !important; }
[data-theme="dark"] .theme-btn { background: rgba(255,255,255,.1); }
[data-theme="dark"] .ico-plate { background: #2a2c36; color: #a7abb8; }
[data-theme="dark"] .ico-plate-lilac { background: #2e2745; color: #b9a6f0; }
[data-theme="dark"] .ico-plate-pink  { background: #3a2029; color: #f5809f; }
[data-theme="dark"] .ico-plate-mint  { background: #1c2c25; color: #43e97b; }
[data-theme="dark"] .ico-plate-blue  { background: #1e2a3d; color: #7ab0f5; }
[data-theme="dark"] .ico-plate-cream { background: #33301f; color: #e8c65c; }
[data-theme="dark"] .badge-mint { background: #1c2c25; color: #43e97b; }
[data-theme="dark"] .balance-card { background: linear-gradient(135deg, #272338 0%, #1c2c25 100%); }
[data-theme="dark"] .bal-grid > div { background: rgba(255,255,255,.06); }
[data-theme="dark"] .bal-grid span, [data-theme="dark"] .pm-info > span,
[data-theme="dark"] .po-info > span, [data-theme="dark"] .po-when { color: #8b8f9c; }
[data-theme="dark"] .pm-row, [data-theme="dark"] .po-row,
[data-theme="dark"] .po-detail { border-color: #2f313b; }
[data-theme="dark"] .pm-add { border-color: #33353f; }
[data-theme="dark"] .pm-icon { background: #2a2c36; }
[data-theme="dark"] .pm-tag { background: #1c2c25; color: #43e97b; }
[data-theme="dark"] .pm-locked { background: #33301f; }
[data-theme="dark"] .pm-locked div span { color: #bfae83; }
[data-theme="dark"] .st-wait { background: #33301f; color: #e8c65c; }
[data-theme="dark"] .st-proc { background: #1e2a3d; color: #7ab0f5; }
[data-theme="dark"] .st-paid { background: #1c2c25; color: #43e97b; }
[data-theme="dark"] .st-rej  { background: #3a2029; color: #f5809f; }
[data-theme="dark"] .upd-banner { background: #33301f; border-color: #4a4429; color: #e8c65c !important; }
[data-theme="dark"] .upd-banner:hover { background: #3c3826; }
[data-theme="dark"] .upd-stat { background: #23252e; }
[data-theme="dark"] .upd-stat span, [data-theme="dark"] .upd-info span,
[data-theme="dark"] .upd-when { color: #8b8f9c; }
[data-theme="dark"] .upd-pending { background: #33301f; }
[data-theme="dark"] .upd-pending b { color: #e8c65c; }
[data-theme="dark"] .upd-pending span { color: #bfae83; }
[data-theme="dark"] .upd-ok { background: #1c2c25; color: #43e97b; }
[data-theme="dark"] .upd-row { border-color: #2f313b; }
[data-theme="dark"] .po-account { background: #23252e; border-color: #33353f; }
[data-theme="dark"] .po-field { border-color: #2f313b; }
[data-theme="dark"] .po-field > span, [data-theme="dark"] .po-method { color: #8b8f9c; }
[data-theme="dark"] .po-who { color: #a7abb8; }
[data-theme="dark"] .po-detail { border-color: #2f313b; }
[data-theme="dark"] .po-admin.is-open { box-shadow: 0 0 0 2px #7b5be6, 0 16px 36px rgba(0,0,0,.4); }
[data-theme="dark"] .key-saved { background: #1c2c25; border-color: #2c463a; }
[data-theme="dark"] .key-saved b { color: #43e97b; }
[data-theme="dark"] .key-saved span { color: #8fae9f; }
[data-theme="dark"] .key-clear { background: #2a2c36; }
[data-theme="dark"] .bot-langs { background: #23252e; border-color: #33353f; }
[data-theme="dark"] .lang-chip { background: #2a2c36; border-color: #3a3d48; color: #e8e9ee; }
[data-theme="dark"] .lang-chip:hover { border-color: #7b5be6; }
[data-theme="dark"] .lang-chip.on { background: #362d55; border-color: #7b5be6; color: #d7c9ff; }
[data-theme="dark"] .f-input, [data-theme="dark"] .f-input-row { background: #262832; color: #e8e9ee; }
[data-theme="dark"] .f-input::placeholder { color: #6d7180; }
[data-theme="dark"] .f-input-row input { color: #e8e9ee; }
[data-theme="dark"] .f-label { color: #a7abb8; }
[data-theme="dark"] .seg { background: #262832; }
[data-theme="dark"] .seg-btn.is-active { background: #3a3d4a; color: #f2f3f7 !important; }

[data-theme="dark"] .topnav { background: rgba(24,26,34,.86); border-bottom-color: rgba(255,255,255,.06); }
[data-theme="dark"] .toptab { color: #b8bcc8 !important; }
[data-theme="dark"] .toptab:hover { background: rgba(255,255,255,.06); }
[data-theme="dark"] .toptab.is-active { background: #f2f3f7; color: #16181D !important; }
[data-theme="dark"] .topnav-search { background: #262832; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .topnav-search input { color: #e8e9ee; }
[data-theme="dark"] .mobilenav { background: rgba(24,26,34,.92); border-top-color: rgba(255,255,255,.06); }
[data-theme="dark"] .mobilenav a.is-active { color: #f2f3f7 !important; }
[data-theme="dark"] .mob-badge { border-color: #1e2028; }

[data-theme="dark"] .dash, [data-theme="dark"] .chat-layout { background: #171921; }
[data-theme="dark"] .dash-side, [data-theme="dark"] .dash-rail,
[data-theme="dark"] .chat-list { border-color: #262832; }
[data-theme="dark"] .dnav { color: #b8bcc8 !important; }
[data-theme="dark"] .dnav:hover { background: rgba(255,255,255,.05); }
[data-theme="dark"] .dnav.is-active { background: #f2f3f7; color: #16181D !important; }
[data-theme="dark"] .dash-feed-head h1, [data-theme="dark"] .dash-rail h3,
[data-theme="dark"] .chat-list-title, [data-theme="dark"] .chat-back,
[data-theme="dark"] .chat-back-mob { color: #f2f3f7 !important; }
[data-theme="dark"] .conv-row:hover { background: rgba(255,255,255,.04); }
[data-theme="dark"] .conv-row.is-active { background: #2b2640; }
[data-theme="dark"] .conv-dot, [data-theme="dark"] .online-dot, [data-theme="dark"] .presence { border-color: #1e2028; }

[data-theme="dark"] .chat-window { background: #14161d; }
[data-theme="dark"] .chat-head, [data-theme="dark"] .chat-composer { background: #1b1d26; border-color: #262832; }
[data-theme="dark"] .brow.theirs .bubble { background: #262832; color: #e8e9ee; box-shadow: none; }
[data-theme="dark"] .composer-row { background: #262832; }
[data-theme="dark"] #chat-input { color: #e8e9ee; }
[data-theme="dark"] .chat-sys { background: #262832; color: #8b8fa0; }
[data-theme="dark"] .typing { background: #262832; }
[data-theme="dark"] .bubble-photo { background: #262832; }
[data-theme="dark"] .photo-toggle { background: #262832; color: #e8e9ee; }

[data-theme="dark"] .tint-blue  { background: #1f2536; }
[data-theme="dark"] .tint-cream { background: #2b2618; }
[data-theme="dark"] .tint-pink  { background: #2e1d26; }
[data-theme="dark"] .tint-mint  { background: #17281f; }
[data-theme="dark"] .answer-q, [data-theme="dark"] .inbox-body { color: #f2f3f7; }
[data-theme="dark"] .answer-a, [data-theme="dark"] .ia-text { color: #b8bcc8; }
[data-theme="dark"] .qmark, [data-theme="dark"] .new-pill,
[data-theme="dark"] .answered-pill, [data-theme="dark"] .feature-ico { background: #1e2028; }
[data-theme="dark"] .inbox-answer { background: rgba(0,0,0,.25); }
[data-theme="dark"] .answer-box textarea { background: rgba(0,0,0,.3); color: #e8e9ee; }
[data-theme="dark"] .share-banner { background: linear-gradient(120deg,#1f2536,#251f38); }
[data-theme="dark"] .share-copy span { color: #a7abb8; }
[data-theme="dark"] .share-menu { background: #262832; box-shadow: 0 18px 44px rgba(0,0,0,.5); }
[data-theme="dark"] .share-item { color: #e8e9ee !important; }
[data-theme="dark"] .share-item:hover { background: rgba(255,255,255,.07); }

[data-theme="dark"] .auth-card { background: #1e2028; }
[data-theme="dark"] .auth-title { color: #f2f3f7; }
[data-theme="dark"] .modal-card { background: #1e2028; }
[data-theme="dark"] .modal-title { color: #f2f3f7; }
[data-theme="dark"] .modal-text { color: #a7abb8; }
[data-theme="dark"] .modal-ico { color: #2b2e36; }
[data-theme="dark"] .feature p { color: #a7abb8; }
[data-theme="dark"] .feature h3 { color: #f2f3f7; }
[data-theme="dark"] .shuffle-btn { background: #262832; color: #e8e9ee; }
[data-theme="dark"] .stats-card { background: #101116; }
[data-theme="dark"] .btn-match { background: #f2f3f7; color: #16181D; }
[data-theme="dark"] .send-btn { background: #f2f3f7; color: #16181D; }
[data-theme="dark"] .btn-dark { background: #f2f3f7; color: #16181D !important; box-shadow: 0 10px 24px rgba(0,0,0,.4); }
[data-theme="dark"] .count-pill { background: #f2f3f7; color: #16181D; }
[data-theme="dark"] .chip-lilac { background: #2b2640; }
[data-theme="dark"] .chip-blue  { background: #1f2536; }
[data-theme="dark"] .chip-pink  { background: #2e1d26; }
[data-theme="dark"] .chip-mint  { background: #17281f; }
[data-theme="dark"] .chip-cream { background: #2b2618; }
[data-theme="dark"] .btn-block-user { background: #2e1d26; }
[data-theme="dark"] .btn-unblock-user { background: #17281f; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }

/* ---------- admin ---------- */
/* The tiles carry a drop shadow, so whatever follows needs real clearance —
   without it the next block sits flush and the two read as one collided lump. */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 20px; }
.admin-stats:last-child { margin-bottom: 0; }
.stat-tile { text-align: center; }
.stat-tile b { display: block; font-family: 'Poppins'; font-weight: 800; font-size: 30px; }
.stat-tile span { font-size: 12.5px; color: #9AA0AB; }
.stat-warn b { color: #ff5c8a; }
.admin-list { display: flex; flex-direction: column; gap: 10px; }
.admin-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; flex-wrap: wrap; }
.admin-row.is-banned { opacity: .6; }
.admin-row-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.admin-row-actions form { display: flex; gap: 6px; }
.admin-row-actions .btn { margin: 0; }

/* ---------- admin updates ---------- */
.upd-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
  background: #FBF1DB; border: 1px solid #f0dfae; border-radius: 16px; padding: 14px 18px;
  color: #7a5f14 !important; text-decoration: none; }
.upd-banner:hover { background: #f8e9c8; }
/* The route warning is a notice, not a link — nothing to click, so it must not
   light up under the cursor the way the update banner does. */
.upd-banner-warn { background: #FDEBF1; border-color: #f3c9d8; color: #8f2b4d !important; cursor: default; }
.upd-banner-warn:hover { background: #FDEBF1; }
[data-theme="dark"] .upd-banner-warn { background: #33202a; border-color: #4d2b39; color: #f093b3 !important; }
[data-theme="dark"] .upd-banner-warn:hover { background: #33202a; }
.upd-banner > span { flex: 1; min-width: 0; font-size: 13.5px; }
.upd-banner b { display: block; font-size: 14.5px; }
.upd-banner em { font-style: normal; font-weight: 700; font-size: 13px; white-space: nowrap; }
.upd-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.upd-stat { background: #F8F9FB; border-radius: 14px; padding: 12px; text-align: center; }
.upd-stat b { display: block; font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: 20px; }
.upd-stat span { font-size: 11.5px; color: #9AA0AB; font-weight: 600; }
.upd-pending { background: #FBF1DB; border-radius: 14px; padding: 13px 15px; margin: 16px 0 4px; }
.upd-pending b { display: block; font-size: 14px; color: #7a5f14; }
.upd-pending span { font-size: 12.5px; color: #8a7c5c; }
.upd-ok { display: flex; align-items: center; gap: 9px; background: #EAF7F0; color: #1f9d6b;
  border-radius: 14px; padding: 13px 15px; margin-top: 16px; font-size: 14px; }
.upd-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #F0F1F4; }
.upd-row:last-of-type { border-bottom: 0; }
.upd-info { flex: 1; min-width: 0; }
.upd-info b { display: block; font-size: 14px; }
.upd-info span { font-size: 11.5px; color: #9AA0AB; font-family: ui-monospace, Menlo, monospace; word-break: break-all; }
.upd-when { font-size: 12px; color: #9AA0AB; text-align: right; white-space: nowrap; font-weight: 600; }
.upd-when em { font-style: normal; color: #b8bcc8; font-size: 11px; }

/* ---------- admin payouts ----------
   Declared after .admin-row on purpose: these rows are their own layout and
   must not inherit the generic row's centring. */
.po-filter { display: inline-flex; width: auto; max-width: 100%; margin-bottom: 16px; flex-wrap: wrap; }
.po-admin { display: block; padding: 16px 18px; }
.po-admin + .po-admin { margin-top: 12px; }
.po-admin.is-open { box-shadow: 0 0 0 2px #7b5be6, 0 16px 36px rgba(20,20,20,.08); }

.po-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.po-status { flex: none; }
.po-amt { font-size: 19px; font-weight: 800; flex: none; }
.po-who { font-size: 13.5px; font-weight: 600; color: #6d7180; min-width: 0;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.po-who a { font-weight: 700; }
.po-method { color: #9AA0AB; word-break: break-word; }
.po-method::before { content: '·'; margin-right: 6px; }
.po-when { margin-left: auto; font-size: 12px; color: #9AA0AB; font-weight: 600; white-space: nowrap; }
.po-manage { flex: none; margin: 0 !important; }

.po-detail { margin-top: 16px; padding-top: 16px; border-top: 1px solid #F0F1F4; }
.po-detail .f-label:first-child { margin-top: 0; }
.po-account { background: #F8F9FB; border: 1px solid #ECEDF1; border-radius: 14px;
  padding: 14px 16px; margin-bottom: 16px; }
.po-account .card-label { margin-bottom: 12px; }
.po-field { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 6px 0; font-size: 13px; border-top: 1px solid #EDEEF2; }
.po-field:first-of-type { border-top: 0; }
.po-field > span { color: #9AA0AB; font-weight: 600; flex: none; }
.po-field b { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px;
  word-break: break-all; text-align: right; min-width: 0; }
.ban-tag { font-style: normal; background: #FDEBF1; color: #d43f6d; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 8px; letter-spacing: .5px; }
.super-tag { font-style: normal; background: #EDE9FB; color: #6b4fd4; font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 8px; letter-spacing: .5px; }

/* ---------- admin: a user's balance ----------
   Same four-up shape as .bal-grid on the earnings page, but on a plain white
   card rather than the tinted one, so the tiles need their own ground. */
.bal-split { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bal-split > div { background: #F7F8FA; border-radius: 14px; padding: 10px 8px; text-align: center; }
.bal-split b { display: block; font-size: 17px; font-weight: 800; }
.bal-split span { font-size: 11.5px; color: #7c8090; font-weight: 600; }
.bal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bal-actions .btn { margin: 0; }
.bal-ledger { display: flex; flex-direction: column; }
.bal-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0;
  border-top: 1px solid #EDEEF2; font-size: 13px; }
.bal-row:first-child { border-top: 0; }
.bal-row > span:first-child { min-width: 0; flex: 1; }
.bal-row em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
.bal-row > span:first-child em { font-weight: 500; color: #7c8090; }
.bal-pos { color: #2fa06a; }
.bal-neg { color: #d43f6d; }
.bal-when { flex: none; color: #9AA0AB; font-size: 11.5px; min-width: 74px; text-align: right; }

[data-theme="dark"] .super-tag { background: #2b2450; color: #b6a4ff; }
[data-theme="dark"] .bal-split > div { background: #21222A; }
[data-theme="dark"] .bal-row { border-top-color: #2A2C36; }

.admin-q-body { display: block; font-size: 13.5px; color: #4b5560; margin-top: 3px; word-break: break-word; }
[data-theme="dark"] .admin-q-body { color: #a7abb8; }
[data-theme="dark"] .stat-tile span { color: #7c8090; }

/* ---------- pagination & infinite scroll ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; }
.pager .btn { margin: 0; }
.pager-num { font-size: 13px; font-weight: 700; color: #9AA0AB; }
.answers-sentinel { display: flex; justify-content: center; padding: 22px 0; }
.loading-dots { display: inline-flex; gap: 5px; }
.loading-dots i { width: 8px; height: 8px; border-radius: 50%; background: #9AA0AB; animation: dot 1.2s infinite; }
.loading-dots i:nth-child(2) { animation-delay: .2s; }
.loading-dots i:nth-child(3) { animation-delay: .4s; }
.answer-q, .answer-a { white-space: pre-line; }

/* ---------- report fixes & report modal ---------- */
.act-report.is-reported, .act-report-answer.is-reported { color: #1f9d6b !important; opacity: 1; }
.act-report:disabled, .act-report-answer:disabled { cursor: default; }
[data-theme="dark"] .btn-quiet { color: #9ba0b0 !important; }
[data-theme="dark"] .btn-quiet:hover { color: #c8ccda !important; }
[data-theme="dark"] .act-report.is-reported,
[data-theme="dark"] .act-report-answer.is-reported { color: #43e97b !important; }
[data-theme="dark"] .like-btn { color: #9ba0b0; }
.modal-report { text-align: left; }
.modal-report .modal-ico, .modal-report .modal-title { text-align: center; margin-left: auto; margin-right: auto; }
.modal-report .modal-title { text-align: center; }
.modal-left { text-align: left; }
.modal-report select.f-input { appearance: auto; cursor: pointer; }
.modal-report .modal-actions { margin-top: 20px; }
.modal-report .flash { margin: 10px 0 0; }
.report-reason { text-transform: capitalize; font-size: 11px; padding: 4px 10px; }
.report-note { font-style: italic; color: #7b5be6 !important; }
[data-theme="dark"] .report-note { color: #a18cd1 !important; }

/* ---------- branding, legal, auth extras ---------- */
.brand-img { height: 44px; width: auto; max-width: 220px; display: block; }
.brand-img-sm { height: 36px; }
.brand-preview { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; height: 44px; background: repeating-conic-gradient(#e8eaf1 0% 25%, #f7f8fb 0% 50%) 0 0/16px 16px; border-radius: 10px; padding: 4px 8px; }
.brand-preview img { max-height: 36px; max-width: 140px; }
.brand-preview-sq { width: 52px; min-width: 52px; height: 52px; }
.brand-preview-sq img { max-height: 40px; max-width: 40px; }
[data-theme="dark"] .brand-preview { background: repeating-conic-gradient(#2a2c36 0% 25%, #1e2028 0% 50%) 0 0/16px 16px; }
/* settings sub-navigation — wraps cleanly no matter how many tabs exist */
.settings-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
  padding-bottom: 4px;
}
.settings-tab {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600; font-size: 13.5px; color: #4b5560 !important;
  background: #fff; border: 1.5px solid rgba(20,20,20,.08);
  padding: 9px 16px; border-radius: 14px; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.settings-tab:hover { border-color: rgba(123,91,230,.4); color: #7b5be6 !important; }
.settings-tab.is-active {
  background: #141414; color: #fff !important; border-color: #141414;
  box-shadow: 0 6px 16px rgba(20,20,20,.2);
}
[data-theme="dark"] .settings-tab { background: #1e2028; border-color: rgba(255,255,255,.1); color: #b8bcc8 !important; }
[data-theme="dark"] .settings-tab:hover { border-color: rgba(161,140,209,.5); color: #a18cd1 !important; }
[data-theme="dark"] .settings-tab.is-active { background: #f2f3f7; color: #16181D !important; border-color: #f2f3f7; }
.agree-row { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; font-size: 13.5px; color: #4b5560; line-height: 1.45; cursor: pointer; }
.agree-row input { margin-top: 2px; accent-color: #7b5be6; }
[data-theme="dark"] .agree-row { color: #a7abb8; }
.agree-row { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; font-size: 13.5px; color: #4b5560; line-height: 1.45; cursor: pointer; }
.agree-row input { margin-top: 2px; accent-color: #7b5be6; }
[data-theme="dark"] .agree-row { color: #a7abb8; }
.forgot-row { text-align: right; margin-top: 12px; font-size: 13.5px; font-weight: 600; }
.resend-form { margin-bottom: 16px; }
.notif-toggle { display: inline-flex; margin-bottom: 16px; }
.legal-updated { color: #9AA0AB; font-size: 13px; margin: -10px 0 18px; }
.legal-body h3 { font-family: 'Poppins'; font-size: 16px; margin: 22px 0 8px; }
.legal-body h3:first-child { margin-top: 0; }
.legal-body p { font-size: 14.5px; line-height: 1.65; color: #3b3f48; margin: 0 0 10px; }
[data-theme="dark"] .legal-body p { color: #b8bcc8; }
[data-theme="dark"] .legal-body h3 { color: #f2f3f7; }
.legal-links { text-align: center; margin-top: 20px; font-size: 14px; font-weight: 600; }
.landing-foot { text-align: center; margin-top: 48px; font-size: 13.5px; font-weight: 600; color: #4b4f5a; }

/* ---------- profile followers / guest chat note / report ---------- */
.profile-stats { gap: 18px; }
.guest-chat-note { background: rgba(255,255,255,.1); border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.85); margin-bottom: 16px; }
.guest-chat-note a { color: #fff; text-decoration: underline; font-weight: 700; }
.back-home { display: block; text-align: center; margin-top: 16px; font-size: 13.5px; font-weight: 600; color: #9AA0AB !important; }
.back-home:hover { color: #7b5be6 !important; }

/* ---------- blocked list modal ---------- */
.modal-blocked { max-width: 480px; text-align: left; max-height: 82vh; overflow-y: auto; position: relative; }
.modal-blocked .modal-title { text-align: center; margin-bottom: 20px; }
.modal-x { position: absolute; top: 16px; right: 16px; border: none; background: #F3F4F7; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; color: #4b5560; display: grid; place-items: center; }
.modal-x .ico { width: 16px; height: 16px; vertical-align: middle; }
[data-theme="dark"] .modal-x { background: #2a2c36; color: #c8ccda; }

/* ---------- chat direction filter & indicator ---------- */
.chat-dir-seg { margin: 0 12px 10px; }
.chat-dir-seg .seg-btn { flex: 1; padding: 8px 10px; font-size: 12.5px; white-space: nowrap; }
.dir-badge {
  position: absolute; top: -5px; left: -6px; width: 19px; height: 19px;
  border-radius: 50%; font-style: normal; line-height: 1; color: #4b5560;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 2px 5px rgba(20,20,20,.18); z-index: 2;
}
.dir-badge .ico { width: 11px; height: 11px; vertical-align: middle; }
.dir-badge-out { background: #F2EEFB; color: #7b5be6; }
.dir-badge-in { background: #E9F0FE; }
.conv-row .conv-ava { overflow: visible; }
[data-theme="dark"] .dir-badge { border-color: #1e2028; }
[data-theme="dark"] .dir-badge-out { background: #2b2640; }
[data-theme="dark"] .dir-badge-in { background: #1f2536; }
.admin-section-title { font-family: 'Poppins'; font-weight: 700; font-size: 15px; margin: 0 0 10px; }
[data-theme="dark"] .admin-section-title { color: #f2f3f7; }
.discover-search .btn-light { text-decoration: none; }

/* ---------- boost ---------- */
.boost-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 8px; }
.boost-card { padding: 24px 20px; text-align: center; position: relative; }
.boost-featured { outline: 2px solid #7b5be6; outline-offset: -2px; }
.boost-badge { position: absolute; top: 12px; right: 12px; background: linear-gradient(100deg,#7b5be6,#ff5c8a); color: #fff; font-size: 10px; font-weight: 800; padding: 4px 9px; border-radius: 10px; letter-spacing: .5px; }
.boost-name { font-family: 'Poppins'; font-weight: 800; font-size: 18px; margin-bottom: 8px; }
.boost-dur { font-size: 13.5px; color: #9AA0AB; margin-bottom: 16px; }
.boost-price { font-family: 'Poppins'; font-weight: 800; font-size: 30px; margin-bottom: 16px; }
[data-theme="dark"] .boost-name { color: #f2f3f7; }
.boost-active { background: linear-gradient(120deg,#FBF1DB,#FDEBF1); font-size: 14.5px; margin-bottom: 16px; }
[data-theme="dark"] .boost-active { background: linear-gradient(120deg,#2b2618,#2e1d26); color: #e8e9ee; }
/* boosted profile: gradient story-ring + crown badge + soft pulsing glow */
@keyframes boost-glow {
  0%, 100% { box-shadow: 0 4px 12px rgba(123,91,230,.30); }
  50%      { box-shadow: 0 4px 18px rgba(255,92,138,.55); }
}
.online-cell.is-boosted {
  padding: 3px;
  border-radius: 20px;
  background: conic-gradient(from 210deg, #7b5be6, #ff5c8a, #ffb15c, #48c9b0, #7b5be6);
  animation: boost-glow 2.6s ease-in-out infinite;
}
.online-cell.is-boosted .online-ava {
  border: 2px solid #fff;
  border-radius: 14px;
  font-size: 18px;
}
[data-theme="dark"] .online-cell.is-boosted .online-ava { border-color: #1e2028; }
.online-cell.is-boosted .online-dot { bottom: 4px; right: 4px; }
.boost-crown {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  line-height: 1; z-index: 3; color: #fff; display: flex;
  background: linear-gradient(100deg, #7b5be6, #ff5c8a);
  padding: 3px 6px; border-radius: 9px; border: 1.5px solid #fff;
  box-shadow: 0 2px 6px rgba(123,91,230,.5);
}
.boost-crown .ico { width: 11px; height: 11px; vertical-align: middle; }
[data-theme="dark"] .boost-crown { border-color: #1e2028; }
/* ---------- VIP membership ----------
   Deliberately quieter than boost. Boost already owns the animated purple-pink
   spotlight; a member badge that competed with it would make a boosted member
   unreadable, and the two mean different things — one is paid reach for the
   next few minutes, the other is who you are. Gold, still, small. */
.vip-tick { display: inline-flex; vertical-align: middle; margin-left: 4px;
  color: #b8860b; }
.vip-tick .ico { width: 14px; height: 14px; }
.vip-tick-lg .ico { width: 17px; height: 17px; }
.vip-line { display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .3px; color: #8a6508;
  background: linear-gradient(100deg, #FFF3D0, #FDE9B8); border: 1px solid #F0DCA4;
  padding: 3px 9px; border-radius: 999px; }
.vip-line .ico { width: 12px; height: 12px; }

/* Two badges on one tile, so they take opposite edges: boost keeps the top,
   membership takes the bottom, both centred. Cornering one of them was the
   first attempt and it read as a mistake rather than a second badge — an
   off-centre mark next to a centred one looks like it slipped. */
.vip-mark { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; line-height: 1; color: #6b4c00;
  background: linear-gradient(100deg, #FFD966, #F2B705);
  padding: 3px 5px; border-radius: 8px; border: 1.5px solid #fff;
  box-shadow: 0 2px 5px rgba(180,140,20,.45); }
.vip-mark .ico { width: 10px; height: 10px; }

/* Only when not boosted: .is-boosted paints its own ring and padding, and two
   rings on one avatar reads as a rendering fault rather than two honours. */
.online-cell.is-vip:not(.is-boosted) .online-ava { box-shadow: 0 0 0 2px #F2B705; }
.discover-card.is-vip { border-color: #F0DCA4; }

/* A member's conversation in the chat list. The wash fades out to the right so
   the preview text keeps a plain background to sit on, and the whole thing is
   deliberately faint — this marks a row, it does not compete with the unread
   badge for your eye. Anonymous peers never reach here: conv_peer_label
   reports them as non-members, because a gold row would narrow down who a
   deliberately hidden person is. */
.conv-row.is-vip {
  background: linear-gradient(100deg, rgba(242,183,5,.22), rgba(242,183,5,.07) 46%, rgba(242,183,5,0) 80%);
  box-shadow: inset 0 0 0 1px rgba(184,134,11,.18);
}
.conv-row.is-vip:hover {
  background: linear-gradient(100deg, rgba(242,183,5,.32), rgba(242,183,5,.13) 46%, rgba(242,183,5,.02) 80%);
}
/* The open conversation keeps its own colour: knowing which chat you are in
   matters more than the gold, so membership falls back to the edge alone. */
.conv-row.is-vip.is-active { background: #F2EEFB; box-shadow: inset 0 0 0 1.5px rgba(184,134,11,.45); }

[data-theme="dark"] .conv-row.is-vip {
  background: linear-gradient(100deg, rgba(239,198,75,.16), rgba(239,198,75,.05) 46%, rgba(239,198,75,0) 80%);
  box-shadow: inset 0 0 0 1px rgba(239,198,75,.20);
}
[data-theme="dark"] .conv-row.is-vip:hover {
  background: linear-gradient(100deg, rgba(239,198,75,.24), rgba(239,198,75,.09) 46%, rgba(239,198,75,.02) 80%);
}
[data-theme="dark"] .conv-row.is-vip.is-active { background: #2b2640; box-shadow: inset 0 0 0 1.5px rgba(239,198,75,.42); }

[data-theme="dark"] .vip-tick { color: #EFC64B; }
[data-theme="dark"] .vip-line { color: #F5D97A; background: #33290E; border-color: #4A3B14; }
[data-theme="dark"] .vip-mark { border-color: #1e2028; }
[data-theme="dark"] .discover-card.is-vip { border-color: #4A3B14; }
[data-theme="dark"] .discover-card p { color: #9aa0ad; }
[data-theme="dark"] .discover-card:hover { box-shadow: 0 12px 26px rgba(0,0,0,.4); }

/* pinned answers */
.pin-flag { display: inline-flex; margin-right: 5px; color: #F2B705; }
.pin-flag .ico { width: 13px; height: 13px; }
.answer-card.is-pinned, .inbox-card.is-pinned { box-shadow: inset 3px 0 0 #F2B705; }
.pinned-pill { font-style: normal; background: #FFF3D0; color: #8a6508; font-size: 10px;
  font-weight: 800; padding: 2px 7px; border-radius: 8px; letter-spacing: .3px;
  display: inline-flex; align-items: center; gap: 3px; }
.pinned-pill .ico { width: 10px; height: 10px; }
.edit-box { margin-top: 10px; }
.edit-box textarea { width: 100%; min-height: 90px; border-radius: 14px; padding: 12px 14px;
  border: 1px solid #E6E8EE; font: inherit; font-size: 14px; resize: vertical; }
.edit-left { font-variant-numeric: tabular-nums; opacity: .7; margin-left: 2px; }
[data-theme="dark"] .pinned-pill { background: #33290E; color: #F5D97A; }
[data-theme="dark"] .edit-box textarea { background: #21222A; border-color: #2A2C36; color: inherit; }

/* ---------- Insights ---------- */
.vip-chip { font-size: 10px; font-weight: 800; letter-spacing: .4px; vertical-align: middle;
  background: #FFF3D0; color: #8a6508; padding: 2px 6px; border-radius: 7px; margin-left: 6px; }
.vip-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid #EDEEF2; }
.vip-gate { text-align: left; }

.ins-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ins-tile { display: flex; flex-direction: column; gap: 2px; }
.ins-label { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #7c8090; }
.ins-label .ico { width: 13px; height: 13px; }
.ins-tile b { font-size: 26px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ins-tile em { font-style: normal; font-size: 12px; font-weight: 800; }
.ins-up { color: #1f9d6b; }
.ins-down { color: #d43f6d; }
.ins-vs { font-size: 11px; color: #9AA0AB; }

/* Bars are laid out with flex and percentage heights rather than drawn, so the
   chart scales with the card and needs no canvas or script. */
.ins-chart { display: flex; align-items: flex-end; gap: 3px; height: 160px;
  padding: 8px 0 0; overflow-x: auto; }
.ins-col { flex: 1 1 0; min-width: 6px; height: 100%; display: flex; align-items: flex-end;
  justify-content: center; gap: 1px; }
.ins-bar { flex: 1 1 0; border-radius: 3px 3px 0 0; min-height: 2px; }
.ins-bar-views { background: #7b5be6; }
.ins-bar-q     { background: #48c9b0; }
.ins-bar-a     { background: #ff5c8a; }
.ins-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 11.5px;
  font-weight: 700; color: #7c8090; flex-wrap: wrap; }
.ins-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ins-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ins-facts { display: flex; flex-direction: column; gap: 12px; }
.ins-fact { display: flex; align-items: baseline; gap: 12px; font-size: 13.5px; }
.ins-fact b { font-size: 22px; font-weight: 800; flex: none; min-width: 62px;
  font-variant-numeric: tabular-nums; }
.ins-fact span { color: #5b6270; }

[data-theme="dark"] .badge-gold { background: #33290E; color: #F5D97A; }
[data-theme="dark"] .vip-chip { background: #33290E; color: #F5D97A; }
[data-theme="dark"] .vip-block { border-top-color: #2A2C36; }
[data-theme="dark"] .ins-fact span { color: #a7abb8; }

/* ---------- VIP page ---------- */
.vip-active { background: linear-gradient(135deg, #FFF8E6 0%, #FDF1DA 100%); }
.vip-perks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
.vip-perk { display: flex; align-items: flex-start; gap: 12px; }
.vip-perk-ico { flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #FFF3D0; color: #8a6508; }
.vip-perk-ico .ico { width: 19px; height: 19px; }
.vip-perk b { display: block; font-size: 14px; margin-bottom: 2px; }
.vip-perk span { font-size: 12.5px; color: #7c8090; line-height: 1.45; }

[data-theme="dark"] .vip-active { background: linear-gradient(135deg, #2A230F 0%, #241E10 100%); }
[data-theme="dark"] .vip-perk-ico { background: #33290E; color: #F5D97A; }

/* admin: the three shapes of a VIP grant */
.vip-grant { display: flex; flex-direction: column; gap: 10px; }
.vip-mode { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1px solid #E6E8EE; border-radius: 14px; cursor: pointer; }
.vip-mode:has(input:checked) { border-color: #F2B705; background: #FFFCF3; }
.vip-mode > input { margin-top: 3px; flex: none; }
.vip-mode b { display: block; font-size: 13.5px; }
.vip-mode em { display: block; font-style: normal; font-size: 12px; color: #7c8090; margin: 2px 0 0; }
.vip-mode .f-input { margin-top: 8px; }
[data-theme="dark"] .vip-mode { border-color: #2A2C36; }
[data-theme="dark"] .vip-mode:has(input:checked) { border-color: #7a6218; background: #232010; }

/* ---------- admin: money rows ---------- */
.tx-row { align-items: center; }
.tx-ico { flex: none; width: 34px; height: 34px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; background: #F3F4F7; color: #7c8090; }
.tx-in   { background: #EAF7F0; color: #1f9d6b; }
.tx-out  { background: #FDEBF1; color: #d43f6d; }
.tx-move { background: #F2EEFB; color: #7b5be6; }
.tx-amt { font-style: normal; font-weight: 800; font-size: 15px; margin-left: auto;
  flex: none; font-variant-numeric: tabular-nums; }
.tx-who { font-weight: 600; color: #7c8090; font-size: 12.5px; margin-left: 6px; }
.tx-who .ico { width: 11px; height: 11px; vertical-align: -1px; }
.tx-ref { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; opacity: .65; }
.tx-status { font-weight: 700; }
.tx-st-paid, .tx-st-credit    { color: #1f9d6b; }
.tx-st-pending, .tx-st-requested, .tx-st-processing { color: #c98a1b; }
.tx-st-debit, .tx-st-rejected, .tx-st-void { color: #d43f6d; }
[data-theme="dark"] .tx-ico { background: #21222A; }
[data-theme="dark"] .tx-in   { background: #12291F; }
[data-theme="dark"] .tx-out  { background: #2C1620; }
[data-theme="dark"] .tx-move { background: #221D33; }

/* ---------- 404: somewhere to go next ---------- */
.nf-suggest { margin-top: 38px; padding-top: 28px; border-top: 1px solid #EDEEF2; }
.nf-suggest-head { font-size: 12.5px; font-weight: 700; color: #7c8090; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center; gap: 6px; }
.nf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.nf-card { display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 16px 12px; text-decoration: none; color: inherit; gap: 2px;
  transition: transform .15s ease, box-shadow .15s ease; }
.nf-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,20,40,.10); }
.nf-card.is-vip { border-color: #F0DCA4; }
.nf-ava { position: relative; width: 54px; height: 54px; border-radius: 18px; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-family: 'Poppins'; font-weight: 800; font-size: 21px; }
.nf-card b { font-size: 14px; }
.nf-handle { font-size: 12px; color: #9AA0AB; }
.nf-card p { font-size: 12px; color: #7c8090; margin: 6px 0 0; line-height: 1.4; }
[data-theme="dark"] .nf-suggest { border-top-color: #2A2C36; }
[data-theme="dark"] .nf-card.is-vip { border-color: #4A3B14; }

.code-area { font-family: 'Courier New', monospace; font-size: 12.5px; min-height: 200px; white-space: pre; }

/* ---------- gifts ---------- */
.gift-thumb { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; }
.gift-thumb img { max-width: 100%; max-height: 100%; }
.gift-emoji { font-size: 30px; line-height: 1; }
.gift-thumb-sm { width: 30px; height: 30px; }
.gift-thumb-sm .gift-emoji { font-size: 20px; }
/* gift button + modal: redesigned near the end of this file */
.earnings-total { font-family: 'Poppins'; font-weight: 800; font-size: 28px; }
.earnings-sub { font-size: 12.5px; color: #9AA0AB; margin-bottom: 12px; }
.earnings-list { display: flex; flex-direction: column; gap: 8px; }
.earnings-row { display: flex; align-items: center; gap: 9px; }
.earnings-info { flex: 1; min-width: 0; }
.earnings-info b { display: block; font-size: 13px; color: #16181D; }
.earnings-info span { font-size: 11.5px; color: #9AA0AB; }
.earnings-amt { font-style: normal; font-weight: 800; font-size: 13px; color: #1f9d6b; }
[data-theme="dark"] .earnings-info b { color: #f2f3f7; }

/* ---------- responsive tail ----------
   Kept at the end of the file so these overrides win over the base rules they
   refine, regardless of where those rules are declared above. */
/* Between the mobile tab bar (≤760) and the full navbar there is a band where
   four labelled tabs plus the right-hand controls no longer fit on one line and
   the page picked up a horizontal scrollbar. The tabs drop to icons only. */
@media (max-width: 980px) {
  .topnav-in { gap: 14px; padding: 12px 16px; }
  .topnav-tabs { min-width: 0; }
  .toptab { padding: 10px 13px; gap: 0; }
  .toptab-label { display: none; }
  .toptab .badge { position: absolute; top: 2px; right: 2px; }
  .toptab { position: relative; }
  .topnav-right { gap: 8px; }
  .btn-match { padding: 11px 14px; }
}
@media (max-width: 860px) {
  .btn-match .btn-match-label { display: none; }
  .btn-match { padding: 11px 13px; }
}

/* Below the full desktop width the admin feed gets narrow while the sidebar is
   still on screen, so the breakpoint that matters here is 1080, not 760. */
@media (max-width: 1080px) {
  /* section tabs and payout filters scroll sideways instead of wrapping */
  .dash-feed-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .dash-feed-head .seg, .po-filter {
    display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .dash-feed-head .seg::-webkit-scrollbar, .po-filter::-webkit-scrollbar { display: none; }
  .dash-feed-head .seg-btn, .po-filter .seg-btn { white-space: nowrap; flex: none; }

  .admin-stats { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
  .admin-stats .stat-tile b { font-size: 24px; }

  /* payout row: status + amount + timestamp on line one, account below, action last */
  .po-head { gap: 8px 10px; }
  .po-amt { font-size: 18px; }
  .po-who { flex-basis: 100%; order: 3; }
  .po-when { margin-left: auto; order: 2; }
  .po-manage { order: 4; margin-left: auto !important; }
}

@media (max-width: 760px) {
  .po-admin { padding: 14px 15px; }
  .po-amt { font-size: 17px; }
  .po-manage { flex-basis: 100%; text-align: center; margin-top: 4px !important; }
  .po-detail { margin-top: 16px; padding-top: 14px; }
  .po-account { padding: 12px 13px; }
  .po-field { flex-direction: column; align-items: stretch; gap: 2px; }
  .po-field b { text-align: left; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
  .admin-stats .stat-tile b { font-size: 22px; }
  .admin-stats .stat-tile { padding: 14px 10px; }
}

/* ---------- mobile "More" sheet ----------
   The bottom bar holds four destinations; everything else opens from here, so
   Admin, Earnings, Boost, Following and Discover stay reachable on a phone. */
.mob-more { display: none; }
.mob-sheet { position: fixed; inset: 0; z-index: 90; }
.mob-sheet-bg { position: absolute; inset: 0; background: rgba(12,12,16,.45);
  opacity: 0; transition: opacity .2s ease; }
.mob-sheet.is-open .mob-sheet-bg { opacity: 1; }
.mob-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; border-radius: 22px 22px 0 0; padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .22s cubic-bezier(.2,.8,.3,1);
  max-height: 82vh; overflow-y: auto; box-shadow: 0 -12px 40px rgba(20,20,20,.18); }
.mob-sheet.is-open .mob-sheet-panel { transform: translateY(0); }
.mob-sheet-grip { width: 40px; height: 4px; border-radius: 3px; background: #E1E3E9; margin: 6px auto 14px; }
/* The phone's version of the sidebar header: same job, so the same behaviour —
   tap it to reach your own profile. */
.mob-sheet-me { display: flex; align-items: center; gap: 12px; padding: 0 4px 14px;
  border-bottom: 1px solid #F0F1F4; margin-bottom: 8px;
  text-decoration: none; color: inherit; }
.mob-sheet-go { margin-left: auto; width: 16px; height: 16px; color: #C3C7D1; flex: none; }
/* (0,2,0) beats `.mob-sheet-me em` — without this the crown takes the muted
   handle colour sitting next to it. */
.mob-sheet-me .vip-tick { color: #b8860b; }
[data-theme="dark"] .mob-sheet-me .vip-tick { color: #EFC64B; }
.mob-sheet-ava { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: #fff; font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: 17px; }
.mob-sheet-me b { display: block; font-size: 15px; }
.mob-sheet-me em { font-style: normal; font-size: 12.5px; color: #9AA0AB; }
.mob-sheet-nav a, .mob-sheet-out button {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 6px;
  font-size: 15px; font-weight: 600; color: #16181D !important; text-decoration: none;
  background: none; border: none; font-family: inherit; cursor: pointer; text-align: left; }
.mob-sheet-nav a span, .mob-sheet-out button span { flex: 1; }
.mob-sheet-nav a:active { background: #F5F6F8; border-radius: 12px; }
.mob-sheet-out { border-top: 1px solid #F0F1F4; margin-top: 8px; }
.mob-sheet-out button { color: #9AA0AB !important; }

[data-theme="dark"] .mob-sheet-panel { background: #1e2028; }
[data-theme="dark"] .mob-sheet-grip { background: #3a3d48; }
[data-theme="dark"] .mob-sheet-me, [data-theme="dark"] .mob-sheet-out { border-color: #2f313b; }
[data-theme="dark"] .mob-sheet-nav a, [data-theme="dark"] .mob-sheet-out button { color: #e8e9ee !important; }
[data-theme="dark"] .mob-sheet-nav a:active { background: #2a2c36; }
[data-theme="dark"] .mob-sheet-out button { color: #8b8f9c !important; }

@media (max-width: 760px) {
  /* the More button takes a slot in the bar and behaves like the other tabs */
  .mob-more { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 5px 0; border: none; background: none; font-family: inherit; cursor: pointer;
    position: relative; color: #9AA0AB; }
  .mob-more span { font-size: 10.5px; font-weight: 600; }
  .mob-more.is-active { color: #141414; }
  [data-theme="dark"] .mob-more.is-active { color: #f2f3f7; }
}
@media (min-width: 761px) {
  .mob-sheet { display: none !important; }
}

/* ---------- compose card (profile: message / question) ----------
   The old version was a hard black slab: it fought the pastel page in light
   mode and vanished into the background in dark mode. This is a real surface
   card that follows the theme, and takes its accent from the selected mode —
   lilac for a live chat, pink for a public question. */
.compose-card {
  --acc: #7b5be6;            /* accent, swapped by .mode-question */
  --acc-soft: #F2EEFB;
  --acc-ring: rgba(123,91,230,.16);
  background: #fff; border: 1px solid #ECEDF1; border-radius: 24px; padding: 18px;
  box-shadow: 0 14px 34px rgba(20,20,20,.07);
  margin-bottom: 20px; position: relative; z-index: 1; overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.compose-card.mode-question {
  --acc: #e0457a;
  --acc-soft: #FDEBF1;
  --acc-ring: rgba(224,69,122,.16);
}
/* a hairline of the accent along the top edge ties the card to the active mode */
.compose-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--acc); opacity: .9; transition: background .25s ease;
}
.compose-card:focus-within { border-color: var(--acc); box-shadow: 0 14px 34px var(--acc-ring); }

/* segmented control */
.compose-seg { display: flex; gap: 4px; background: #F4F5F8; border-radius: 16px; padding: 4px; margin-bottom: 16px; }
.cseg-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 600; color: #6d7180; padding: 10px 12px; border-radius: 13px;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.cseg-btn:hover { color: #16181D; }
.cseg-btn.is-active { background: #fff; color: var(--acc); box-shadow: 0 2px 8px rgba(20,20,20,.09); }
.cseg-btn .ico { width: 17px; height: 17px; }

/* text field */
.compose-field { position: relative; }
.compose-card textarea {
  width: 100%; display: block; border: 1px solid #E9EAEF; background: #FAFBFC; color: #16181D;
  border-radius: 16px; padding: 14px 16px; font-size: 15px; line-height: 1.5;
  font-family: 'DM Sans', system-ui, sans-serif; outline: none; resize: none; height: 92px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.compose-card textarea::placeholder { color: #A6ABB6; }
.compose-card textarea:focus { background: #fff; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-ring); }

/* footer */
.compose-foot { display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; gap: 10px; flex-wrap: wrap; }
.compose-note { color: #9AA0AB; font-size: 12.5px; font-weight: 600; display: inline-flex;
  align-items: center; gap: 5px; min-width: 0; }
.compose-note .ico { color: var(--acc); opacity: .8; }
.compose-actions { display: flex; gap: 8px; margin-left: auto; }
.compose-actions .btn { margin: 0; font-size: 14px; padding: 11px 18px; border-radius: 20px; }
.compose-actions .btn[hidden], .compose-actions a[hidden] { display: none !important; }

/* buttons: primary picks up the mode accent, secondary stays quiet */
.btn-accent { background: var(--acc); color: #fff !important; box-shadow: 0 8px 20px var(--acc-ring); }
.btn-accent:hover { filter: brightness(1.07); }
.btn-soft { background: var(--acc-soft); color: var(--acc) !important; }
.btn-soft:hover { filter: brightness(.97); }

/* guest hint */
.guest-chat-note {
  display: flex; gap: 10px; background: var(--acc-soft); border-radius: 14px;
  padding: 11px 13px; font-size: 12.8px; line-height: 1.5; color: #4b5560; margin-bottom: 12px;
}
.guest-chat-note .ico { color: var(--acc); flex: none; margin-top: 1px; }
.guest-chat-note a { color: var(--acc); text-decoration: underline; font-weight: 700; }

/* ---- dark theme ---- */
[data-theme="dark"] .compose-card {
  --acc: #a78bfa; --acc-soft: rgba(167,139,250,.14); --acc-ring: rgba(167,139,250,.2);
  background: #1e2028; border-color: #2f313b; box-shadow: 0 16px 36px rgba(0,0,0,.4);
}
[data-theme="dark"] .compose-card.mode-question {
  --acc: #f7799f; --acc-soft: rgba(247,121,159,.14); --acc-ring: rgba(247,121,159,.2);
}
[data-theme="dark"] .compose-seg { background: #262832; }
[data-theme="dark"] .cseg-btn { color: #9096a3; }
[data-theme="dark"] .cseg-btn:hover { color: #e8e9ee; }
[data-theme="dark"] .cseg-btn.is-active { background: #33353f; color: var(--acc); box-shadow: none; }
[data-theme="dark"] .compose-card textarea { background: #262832; border-color: #33353f; color: #e8e9ee; }
[data-theme="dark"] .compose-card textarea::placeholder { color: #767c8a; }
[data-theme="dark"] .compose-card textarea:focus { background: #2b2d38; border-color: var(--acc); }
[data-theme="dark"] .compose-note { color: #8b8f9c; }
[data-theme="dark"] .guest-chat-note { color: #b8bcc8; }
[data-theme="dark"] .btn-accent { color: #16181D !important; box-shadow: none; }

@media (max-width: 760px) {
  .compose-card { padding: 15px; border-radius: 20px; }
  .cseg-btn { font-size: 13px; padding: 9px 8px; gap: 5px; }
  .cseg-btn .ico { width: 16px; height: 16px; }
  .compose-foot { flex-direction: column; align-items: stretch; }
  .compose-actions { margin-left: 0; }
  .compose-actions .btn { flex: 1; justify-content: center; }
}

/* ---------- landing: phone layout ----------
   The desktop hero was only being shrunk, not re-laid-out: the top bar wrapped
   its buttons onto two lines, the headline crowded itself, and the feature
   cards stayed in their tall desktop shape. This gives the page a phone rhythm. */
@media (max-width: 620px) {
  .landing { padding: 16px 18px 40px; }

  /* top bar: everything on one line, no wrapping */
  .landing-top { gap: 8px; }
  .landing-top .brand { flex: none; }
  .landing-top-actions { gap: 6px; flex: none; }
  .landing-top-actions .btn { padding: 9px 14px; font-size: 13.5px; white-space: nowrap; margin: 0; }
  .landing-top .theme-btn { width: 36px; height: 36px; flex: none; }

  /* hero */
  .hero { margin-top: 24px; gap: 0; }
  .live-badge { font-size: 11.5px; padding: 6px 12px; }
  .hero-h1 { font-size: 34px; line-height: 1.12; letter-spacing: -1px; margin: 14px 0 14px; }
  .hero-sub { font-size: 15.5px; line-height: 1.6; margin-bottom: 24px; max-width: none; }

  /* both calls to action get the same weight and full width */
  .hero-ctas { flex-direction: column; gap: 10px; }
  .hero-ctas .btn { width: 100%; justify-content: center; margin: 0;
    font-size: 15.5px; padding: 15px 20px; border-radius: 28px; }

  .social-proof { margin-top: 24px; gap: 11px; }
  .avatar-stack span { width: 30px; height: 30px; border-width: 2.5px; }
  .avatar-stack span + span { margin-left: -10px; }
  .proof-text { font-size: 12.5px; }

  /* feature cards: icon beside the title instead of stacked above it,
     which halves the height and stops each card reading as a page of its own */
  .features { margin-top: 32px; gap: 12px; }
  .feature { padding: 16px 17px; border-radius: 20px;
    display: grid; grid-template-columns: 40px 1fr; grid-template-areas: "ico title" "ico text";
    column-gap: 13px; row-gap: 3px; align-items: start; }
  .feature-ico { grid-area: ico; width: 40px; height: 40px; border-radius: 13px; margin: 0; }
  .feature-ico .ico { width: 20px; height: 20px; }
  .feature h3 { grid-area: title; margin: 1px 0 0; font-size: 16px; }
  .feature p { grid-area: text; margin: 0; font-size: 13.5px; line-height: 1.55; }

  .landing-foot { margin-top: 32px; font-size: 12.5px; }
}

@media (max-width: 400px) {
  .landing { padding: 14px 15px 36px; }
  .hero-h1 { font-size: 30px; }
  .landing-top-actions .btn { padding: 8px 12px; font-size: 13px; }
  .feature { grid-template-columns: 36px 1fr; column-gap: 11px; }
  .feature-ico { width: 36px; height: 36px; border-radius: 11px; }
}

/* ---------- PWA install bar ---------- */
.pwa-bar {
  position: fixed; left: 12px; right: 12px; z-index: 80;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #ECEDF1; border-radius: 18px; padding: 12px 14px;
  box-shadow: 0 16px 40px rgba(20,20,20,.16);
  transform: translateY(140%); opacity: 0; transition: transform .28s cubic-bezier(.2,.8,.3,1), opacity .28s ease;
}
.pwa-bar.is-in { transform: translateY(0); opacity: 1; }
.pwa-ico { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg,#7b5be6,#ff5c8a); color: #fff; }
.pwa-ico .ico { width: 20px; height: 20px; vertical-align: middle; }
.pwa-copy { flex: 1; min-width: 0; }
.pwa-copy b { display: block; font-size: 14px; }
.pwa-copy em { font-style: normal; font-size: 12px; color: #9AA0AB; }
.pwa-bar .btn { margin: 0; flex: none; }
.pwa-no { border: none; background: none; cursor: pointer; color: #9AA0AB; padding: 4px; flex: none; display: grid; place-items: center; }
[data-theme="dark"] .pwa-bar { background: #23252e; border-color: #33353f; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
[data-theme="dark"] .pwa-copy em { color: #8b8f9c; }

/* keep it clear of the bottom tab bar on phones */
@media (max-width: 760px) {
  .pwa-bar { bottom: calc(70px + env(safe-area-inset-bottom)); }
}
/* already running as an installed app: nothing to install */
@media (display-mode: standalone) {
  .pwa-bar { display: none !important; }
}

/* ---------- gift button (profile) ----------
   Was a full-width saturated orange slab: the loudest thing on the card, in the
   one colour the palette never uses, and out of scale with the buttons above.
   Now a soft warm pill that matches the row it belongs to. */
.btn-gift-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 10px 0 0; padding: 12px 18px; border-radius: 22px;
  font-size: 14px; font-weight: 700;
  background: linear-gradient(100deg, #FFF1E2, #FDE7EE);
  border: 1px solid #f6dfd0;
  color: #c2632f !important; box-shadow: none;
  transition: filter .15s ease, transform .12s ease;
}
.btn-gift-cta .ico { width: 18px; height: 18px; color: #e07a3c; }
.btn-gift-cta:hover { filter: brightness(.985); transform: translateY(-1px); }
[data-theme="dark"] .btn-gift-cta {
  background: linear-gradient(100deg, rgba(255,177,92,.15), rgba(255,92,138,.15));
  border-color: rgba(255,177,92,.28); color: #f0b98a !important;
}
[data-theme="dark"] .btn-gift-cta .ico { color: #ffb15c; }

/* ---------- gift modal ----------
   Fixed rhythm: every block has the same breathing room, the tiles are a
   uniform square regardless of emoji vs uploaded image, and the actions are
   separated from the form instead of touching the checkbox. */
.modal-gift { max-width: 460px; text-align: left; }
.modal-gift .modal-title { text-align: center; margin-bottom: 8px; }
.modal-gift .modal-text { text-align: center; margin: 0 0 18px; font-size: 13.5px; }

.gift-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.gift-pick {
  border: 1.5px solid #ECEDF1; background: #F7F8FA; border-radius: 18px; padding: 14px 8px 12px;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: 'DM Sans', system-ui, sans-serif; text-align: center;
  transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.gift-pick:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,20,20,.08); }
.gift-pick.is-on { border-color: #7b5be6; background: #F2EEFB; box-shadow: 0 8px 18px rgba(123,91,230,.16); }
/* one fixed square for every gift, whatever the artwork is */
.gift-pick .gift-thumb { width: 46px; height: 46px; }
.gift-pick .gift-thumb img { max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; }
.gift-pick .gift-emoji { font-size: 35px; line-height: 46px; }
.gift-pick b { font-size: 12.5px; color: #16181D; line-height: 1.25; }
.gift-pick span:last-child { font-size: 11.5px; color: #9AA0AB; font-weight: 600; }

/* form below the grid */
.modal-gift .f-label { margin: 18px 0 6px; }
.modal-gift .f-input { font-size: 14px; }
.modal-gift .agree-row { margin-top: 16px; font-size: 13px; }
.gift-pay { margin-top: 16px; min-height: 120px; }
/* the divider is what stops the checkbox and the buttons colliding */
.modal-gift .modal-actions { margin-top: 20px; padding-top: 18px; border-top: 1px solid #F0F1F4; }
.modal-gift .flash { margin: 14px 0 0; }

/* ---------- gift modal, second pass ----------
   The first one was styled for the light theme and left the dark one to
   inherit, which it cannot: .agree-row sets #4b5560, a dark grey, and on the
   dark card that is grey on near-black — the "send anonymously" line was
   effectively invisible. Everything the modal draws now has a colour in both
   themes, and the tiles read as things you can pick rather than as boxes. */

.modal-gift .modal-title { font-size: 20px; }

/* a tile is artwork, a name, and a price that looks like a price */
.gift-pick { position: relative; padding: 15px 8px 13px; gap: 7px; }
.gift-pick b { font-size: 12.5px; letter-spacing: -.005em; }
.gift-pick span:last-child {
  font-size: 11.5px; font-weight: 700; color: #6A6F7C;
  background: rgba(20,20,20,.055); border-radius: 999px; padding: 2px 9px;
}
.gift-pick.is-on span:last-child { background: rgba(123,91,230,.14); color: #5B3FD6; }
/* the tick is what says "this one", beyond a border you have to look for */
.gift-pick.is-on::after {
  content: ''; position: absolute; top: 8px; right: 8px;
  width: 17px; height: 17px; border-radius: 50%; background: #7b5be6;
  box-shadow: inset 0 0 0 3.5px #7b5be6, 0 0 0 2px var(--gift-card-bg, #fff);
}
.gift-pick.is-on::before {
  content: ''; position: absolute; top: 12px; right: 13px; z-index: 1;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

.modal-gift .f-label { margin: 20px 0 7px; font-weight: 700; }
.modal-gift .agree-row { color: #4b5560; }
.gift-pay {
  margin-top: 18px; min-height: 120px; padding: 14px;
  background: #F7F8FA; border: 1px solid #ECEDF1; border-radius: 16px;
}

[data-theme="dark"] {
  --gift-card-bg: #1e2028;
}
[data-theme="dark"] .gift-pick { background: #262832; border-color: #34363f; }
[data-theme="dark"] .gift-pick:hover { box-shadow: 0 8px 18px rgba(0,0,0,.4); }
[data-theme="dark"] .gift-pick.is-on { background: #2f2947; border-color: #8f74f0; }
[data-theme="dark"] .gift-pick b { color: #f2f3f7; }
[data-theme="dark"] .gift-pick span:last-child { background: rgba(255,255,255,.08); color: #a7abb8; }
[data-theme="dark"] .gift-pick.is-on span:last-child { background: rgba(155,132,239,.22); color: #cbbcfb; }
[data-theme="dark"] .gift-pick.is-on::after { background: #9b84ef; box-shadow: inset 0 0 0 3.5px #9b84ef, 0 0 0 2px #1e2028; }
/* the line that started this: dark grey on a dark card */
[data-theme="dark"] .modal-gift .agree-row { color: #b6bac6; }
[data-theme="dark"] .modal-gift .f-label { color: #d6d9e2; }
[data-theme="dark"] .gift-pay { background: #23252e; border-color: #33353f; }
[data-theme="dark"] .modal-gift .modal-actions { border-color: #2f313b; }

@media (max-width: 460px) {
  .gift-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .modal-gift { max-width: none; }
}

/* admin user list: a green dot marks accounts pinned to "online" */
.always-on { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #43e97b; box-shadow: 0 0 0 2px rgba(67,233,123,.25); vertical-align: middle;
  margin-left: 3px; font-style: normal; }

/* ---------- rich text editor (admin legal pages) ---------- */
.rte { border: 1px solid #E1E3E9; border-radius: 16px; overflow: hidden; background: #fff; }
.rte-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 7px 8px;
  background: #F7F8FA; border-bottom: 1px solid #ECEDF1; }
.rte-btn { width: 32px; height: 32px; border: none; background: none; border-radius: 9px;
  cursor: pointer; color: #4b5560; display: grid; place-items: center; padding: 0;
  transition: background .14s, color .14s; }
.rte-btn svg { width: 17px; height: 17px; }
.rte-btn:hover { background: #E9EAEF; color: #16181D; }
.rte-btn.is-on { background: #7b5be6; color: #fff; }
.rte-sep { width: 1px; height: 20px; background: #DFE1E7; margin: 0 5px; font-style: normal; }
.rte-area { min-height: 320px; max-height: 60vh; overflow-y: auto; padding: 18px 20px;
  font-size: 15px; line-height: 1.65; color: #16181D; outline: none; }
.rte-area:focus { background: #fff; }
.rte-area p { margin: 0 0 12px; }
.rte-area h2 { font-family: 'Poppins', system-ui, sans-serif; font-size: 21px; font-weight: 700; margin: 22px 0 8px; }
.rte-area h3 { font-family: 'Poppins', system-ui, sans-serif; font-size: 17px; font-weight: 700; margin: 20px 0 6px; }
.rte-area ul, .rte-area ol { margin: 0 0 12px; padding-left: 22px; }
.rte-area li { margin-bottom: 4px; }
.rte-area blockquote { margin: 0 0 12px; padding: 8px 14px; border-left: 3px solid #7b5be6;
  background: #F7F6FD; border-radius: 0 10px 10px 0; color: #4b5560; }
.rte-area a { color: #7b5be6; text-decoration: underline; }
.rte-area:empty::before { content: 'Start writing…'; color: #A6ABB6; }
.rte-foot { padding: 8px 14px; background: #F7F8FA; border-top: 1px solid #ECEDF1;
  font-size: 12px; color: #9AA0AB; font-weight: 600; text-align: right; }

[data-theme="dark"] .rte { background: #1e2028; border-color: #33353f; }
[data-theme="dark"] .rte-bar, [data-theme="dark"] .rte-foot { background: #23252e; border-color: #2f313b; }
[data-theme="dark"] .rte-btn { color: #a7abb8; }
[data-theme="dark"] .rte-btn:hover { background: #2f313b; color: #f2f3f7; }
[data-theme="dark"] .rte-sep { background: #3a3d48; }
[data-theme="dark"] .rte-area { color: #e8e9ee; }
[data-theme="dark"] .rte-area blockquote { background: #262233; color: #b8bcc8; }
[data-theme="dark"] .rte-area a { color: #a78bfa; }

@media (max-width: 620px) {
  .rte-area { min-height: 260px; padding: 14px 15px; font-size: 14.5px; }
  .rte-btn { width: 30px; height: 30px; }
}

/* legal page editor state banner */
.pg-state { display: flex; align-items: center; gap: 8px; background: #FBF1DB; color: #7a5f14;
  border-radius: 12px; padding: 10px 13px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.pg-state.is-custom { background: #EAF7F0; color: #1f9d6b; }
.pg-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.pg-actions .btn { margin: 0; }
[data-theme="dark"] .pg-state { background: #33301f; color: #e8c65c; }
[data-theme="dark"] .pg-state.is-custom { background: #1c2c25; color: #43e97b; }

/* ---------- app-like touch behaviour ----------
   manipulation = pan and pinch still work, but the browser stops waiting for a
   double-tap, which both removes double-tap zoom and makes taps feel instant.
   Text selection is left alone in places where people actually read or write. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.rte-area, .legal-body, .msg-bubble, .answer-body, textarea, input, [contenteditable] {
  touch-action: auto;
}

/* ---------- photo lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  padding: 24px; background: rgba(10,10,14,.86); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .18s ease;
}
.lightbox.is-in { opacity: 1; }
.lb-img {
  max-width: min(100%, 1100px); max-height: calc(100vh - 48px);
  border-radius: 14px; display: block; object-fit: contain;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  transform: scale(.97); opacity: 0; transition: transform .2s cubic-bezier(.2,.8,.3,1), opacity .2s ease;
  /* pinch to zoom the photo itself, unlike the rest of the app */
  touch-action: pinch-zoom;
}
.lightbox.is-ready .lb-img { transform: scale(1); opacity: 1; }
.lb-loading { position: absolute; color: rgba(255,255,255,.7); font-size: 14px; font-weight: 600; }
.lb-close {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px;
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center;
  backdrop-filter: blur(6px); transition: background .15s ease;
}
.lb-close:hover { background: rgba(255,255,255,.26); }
.lb-close .ico { width: 20px; height: 20px; }
/* freeze the page behind the viewer without disturbing the chat's own scroller */
html.lb-open, html.lb-open body { overflow: hidden; }

@media (max-width: 620px) {
  .lightbox { padding: 12px; }
  .lb-img { max-height: calc(100vh - 24px); border-radius: 10px; }
  .lb-close { top: calc(10px + env(safe-area-inset-top)); right: 10px; width: 38px; height: 38px; }
}

/* =========================================================================
   SPACING SYSTEM
   -------------------------------------------------------------------------
   Vertical spacing used to be set per element, and had drifted to eleven
   different values (6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26). Some elements
   set a bottom margin, some a top one, and a few set neither — which is how
   the dashboard rail ended up with the gift-earnings card touching the
   "People to meet" heading below it: the card had no bottom margin and the
   heading had `margin: 0 0 14px`, so nothing separated them.

   The rule is now positional, not per-element:

     1. A column lays its sections out with one gap  (--stack)
     2. A heading sits closer to the content it owns (--stack-tight)
     3. Elements do not set their own vertical margins inside those columns

   Rule 3 is what keeps it honest — a new card dropped into a feed is spaced
   correctly without knowing anything about its neighbours, and cannot end up
   glued to them. Horizontal margins are left alone, because a few elements use
   them for optical alignment rather than rhythm.

   Everything is a multiple of 4.
   ========================================================================= */


/* --- the columns that own a rhythm -------------------------------------
   .feed-narrow is excluded when it is also a .card: admin uses the class on
   the card itself to constrain its width, and applying a rhythm there would
   space out the fields inside the form. Only the wrapper form is a column. */
.dash-feed > *,
.dash-rail > *,
.dash-feed > .feed-narrow:not(.card) > *,
.profile-main > * {
  margin-top: 0;
  margin-bottom: 0;
}

.dash-feed > * + *,
.dash-rail > * + *,
.dash-feed > .feed-narrow:not(.card) > * + *,
.profile-main > * + * {
  margin-top: var(--stack);
}

/* A heading belongs to what follows it, so that pair sits closer together
   than two unrelated sections do. */
.dash-rail > h3 + *,
.dash-feed > .answers-head + *,
.dash-feed > .feed-narrow:not(.card) > .page-title + *,
.profile-main > .answers-head + * {
  margin-top: var(--stack-tight);
}

/* --- sibling stacks inside a section ------------------------------------ */
.meet-list { gap: var(--sp-3); }
.profile-side { gap: var(--sp-4); }
.profile-grid { gap: var(--sp-6); }

/* Cards listed one after another in a feed are sections in their own right,
   so they take the same gap as everything else rather than a tighter one. */
.dash-feed > .inbox-card + .inbox-card,
.profile-main > .answer-card + .answer-card {
  margin-top: var(--stack);
}

/* --- narrower screens ---------------------------------------------------
   The columns stack, so the same gap that reads as generous on a wide screen
   reads as wasted height on a phone. One step down, still on the scale. */
@media (max-width: 700px) {
  :root {
    --stack: var(--sp-4);
    --stack-tight: var(--sp-2);
  }
}

/* Gift editor rows in Settings › Mobile app. Each gift is its own form, so the
   rows need to read as separate objects rather than one long column of fields. */
.gift-edit-row {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line-soft, #F0F1F4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.gift-edit-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.gift-edit-row .f-label { margin-top: 0; }

/* Admin user filters. Chips rather than a <select>: the counts are the useful
   part — "12 banned" is a thing you want to see without opening a menu — and a
   row of them survives being wrapped on a narrow screen. */
.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.afilter {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0 14px; height: 36px;
  border-radius: 18px;
  background: #F3F4F7;
  color: #3b3f48 !important;
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.afilter:hover { background: #E9EBF0; }
.afilter em {
  font-style: normal; font-weight: 700; font-size: 12px;
  color: #9AA0AB;
  font-variant-numeric: tabular-nums;
}
.afilter.is-active { background: #141414; color: #fff !important; }
.afilter.is-active em { color: rgba(255,255,255,.6); }
/* A group with nobody in it stays visible — "0 banned" is information — but
   steps back so it does not compete with the groups that have people. */
.afilter.is-empty { opacity: .5; }

[data-theme="dark"] .afilter { background: #262832; color: #b8bcc8 !important; }
[data-theme="dark"] .afilter:hover { background: #2e3140; }
[data-theme="dark"] .afilter.is-active { background: #f2f3f7; color: #16181D !important; }
[data-theme="dark"] .afilter.is-active em { color: rgba(22,24,29,.55); }

/* ---------- admin: profile photo review ----------
   A grid to sweep and a page to judge on. The grid loads 160px thumbnails
   rather than the stored photos — about a fifth of the bytes for pictures
   being shown two centimetres wide. */
.photo-switch {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; padding: var(--sp-4); border-radius: 16px; background: #F5F6F8;
}
.photo-switch b { display: block; margin-bottom: 3px; }
.photo-switch .f-hint { display: block; max-width: 62ch; }

.photo-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.photo-cell {
  display: block; padding: 8px; border-radius: 14px; background: #fff;
  border: 1px solid #EDEEF2; position: relative; color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
.photo-cell:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,20,20,.10); }
/* The queue is the reason to be on this page, so waiting rows are marked. */
.photo-cell.is-waiting { border-color: #E8C98A; background: #FFFDF7; }
.photo-cell-img {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #F0F1F4;
}
.photo-cell-img.is-cover { aspect-ratio: 3 / 1; }
.photo-cell-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-cell-name {
  display: block; margin-top: 7px; font-size: 12.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.photo-cell-meta { display: block; font-size: 11px; color: #6A6F7C; }
.photo-flag {
  position: absolute; top: 12px; right: 12px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase; padding: 3px 7px; border-radius: 7px;
  background: #FBF1DB; color: #a8710f;
}
.photo-flag.is-off { background: #EFEFF2; color: #6A6F7C; }
.photo-gone-sm { font-size: 11px; color: #9AA0AB; }

.photo-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-6); margin-top: var(--sp-5); }
.photo-detail-img img { width: 100%; height: auto; border-radius: 16px; display: block; background: #F0F1F4; }
.photo-gone { padding: 40px; text-align: center; color: #6A6F7C; background: #F5F6F8; border-radius: 16px; }
.photo-current { width: 116px; height: 116px; object-fit: cover; border-radius: 12px; display: block; margin-bottom: var(--sp-4); }

.photo-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--sp-4); margin: 0 0 var(--sp-5); font-size: 13.5px; }
.photo-facts dt { color: #6A6F7C; }
.photo-facts dd { margin: 0; font-weight: 600; word-break: break-word; }
.photo-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

@media (max-width: 760px) {
  .photo-detail { grid-template-columns: 1fr; }
}

/* The site follows the viewer's theme, and admin is not exempt — a moderator
   working at night should not get a page of white cards. */
[data-theme="dark"] .photo-switch { background: #262832; }
[data-theme="dark"] .photo-cell { background: #1E2028; border-color: #2C2F3A; color: #e8e9ee; }
[data-theme="dark"] .photo-cell.is-waiting { background: #2B2618; border-color: #6C5A2E; }
[data-theme="dark"] .photo-cell:hover { box-shadow: 0 8px 20px rgba(0,0,0,.4); }
[data-theme="dark"] .photo-cell-img { background: #262832; }
[data-theme="dark"] .photo-cell-meta,
[data-theme="dark"] .photo-facts dt { color: #8B8FA0; }
[data-theme="dark"] .photo-detail-img img { background: #262832; }
[data-theme="dark"] .photo-gone { background: #262832; color: #8B8FA0; }
[data-theme="dark"] .photo-flag { background: #4A3D18; color: #F0C25E; }
[data-theme="dark"] .photo-flag.is-off { background: #2C2F3A; color: #8B8FA0; }

/* The answer's own address, worn by its timestamp.
   Takes the card's colour rather than the global link violet — the meta line
   sets a tint per card and a violet timestamp in the middle of it reads as a
   different kind of thing. It is a link, so it says so on hover. */
.answer-permalink { color: inherit; text-decoration: none; }
.answer-permalink:hover { color: inherit; text-decoration: underline; }

/* ---------- admin: create a user ----------
   A <details> rather than a second page: making an account by hand is rare
   enough that it should not push the user list down every time someone opens
   this tab, and common enough that it should not be somewhere else. */
.new-user { margin-bottom: var(--sp-5); }
.new-user > summary {
  cursor: pointer; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; gap: 8px; list-style: none;
}
.new-user > summary::-webkit-details-marker { display: none; }
.new-user > summary::after {
  content: '+'; margin-left: auto; font-size: 18px; font-weight: 500; color: #6A6F7C;
}
.new-user[open] > summary::after { content: '−'; }
.new-user[open] > summary { margin-bottom: var(--sp-3); }
.new-user .f-hint { display: block; margin: 0 0 var(--sp-4); max-width: 68ch; }
.new-user button[type=submit] { margin-top: var(--sp-4); }

.new-user-flags { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.f-check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 14px; }
.f-check input { margin-top: 3px; flex: none; }
.f-check em { font-style: normal; color: #6A6F7C; }

[data-theme="dark"] .new-user > summary::after,
[data-theme="dark"] .f-check em { color: #8B8FA0; }

/* ---------- a gift in a chat ----------
   Deliberately wider than a message bubble and painted in the gift's own tier
   colour. A gift is the one thing in a conversation somebody paid for, and it
   used to arrive as the same grey centred line that announces a chat ending.
   --tier is set per bubble from the server, so the two clients cannot drift on
   what colour a given gift is. */
.gift-bubble {
  --tier: #7B5BE6;
  width: 208px; max-width: 78%;
  padding: 20px 16px 15px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--tier) 26%, transparent), transparent 72%),
    color-mix(in srgb, var(--tier) 10%, #ffffff);
  text-align: center;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--tier) 18%, transparent);
}
.gift-bubble-art {
  height: 74px; display: flex; align-items: center; justify-content: center;
  font-size: 46px; line-height: 1; margin-bottom: 10px;
}
.gift-bubble-art img { max-width: 74px; max-height: 74px; width: auto; height: auto; object-fit: contain; }
.gift-bubble-name {
  font-size: 14px; font-weight: 700; letter-spacing: -.005em;
  color: color-mix(in srgb, var(--tier) 72%, #16181D);
}

/* Older browsers without color-mix get the flat brand look rather than nothing. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .gift-bubble { background: #F4F1FD; border-color: rgba(123,91,230,.4); }
  .gift-bubble-name { color: #5B3FD6; }
}

[data-theme="dark"] .gift-bubble {
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--tier) 34%, transparent), transparent 72%),
    color-mix(in srgb, var(--tier) 14%, #1b1d24);
  border-color: color-mix(in srgb, var(--tier) 52%, transparent);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
[data-theme="dark"] .gift-bubble-name { color: color-mix(in srgb, var(--tier) 62%, #FFFFFF); }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  [data-theme="dark"] .gift-bubble { background: #262233; border-color: rgba(155,132,239,.45); }
  [data-theme="dark"] .gift-bubble-name { color: #cbbcfb; }
}

/* The expiry beside "VIP member" on your own profile. Lighter than the label
   it follows: it is a detail about the badge, not a second badge. */
.vip-until { font-weight: 600; opacity: .72; }