/* ==========================================================================
   ImpowerTZ — Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Editorial palette: near-black surfaces and warm neutral type, the same
     world the Wenye Ushawishi pages live in, so the whole app reads as one
     product rather than two. Every component below is already token-driven,
     which is why re-skinning happens here rather than component by component.
     js/theme.js overrides --bg/--bg-elev/--gold/--grad-brand per partner
     brand, so these are defaults, not constants. */
  --bg: #08080c;
  --bg-elev: #101015;
  --card: #15151b;
  --card-2: #1c1c23;
  --border: rgba(255,255,255,0.09);
  --text: #f4f2ee;
  --text-dim: #9b968d;
  --text-faint: #6f6a62;

  --gold: #e7c06b;
  --orange: #dd9a52;
  --green: #16d492;
  --green-dim: #12b47e;
  --red: #e0748a;
  --blue: #7fa8d8;

  --grad-brand: linear-gradient(135deg, #f2d489 0%, #e7c06b 48%, #c2913f 100%);
  --grad-money: linear-gradient(135deg, #16d492 0%, #0fae9c 100%);
  --grad-dark: linear-gradient(180deg, rgba(8,8,12,0) 0%, rgba(8,8,12,0.85) 60%, rgba(8,8,12,1) 100%);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Real rendered height of #bottomnav (6px+6px padding + ~26px icon/label
     stack), used so Reels content/scrub-track can sit just above it instead
     of hiding underneath or leaving a dead gap - see the Reels section. */
  --nav-height: 58px;

  --shadow-card: 0 8px 28px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 0 1px rgba(231,192,107,0.16), 0 10px 30px rgba(0,0,0,0.5);

  font-size: 16px;
}

/* ---- Light mode ----------------------------------------------------------
   Selected by the visitor (see js/colorScheme.js) and applied as
   [data-theme="light"] on <html>. Same token set, so every component below
   that already reads var(--bg)/var(--card)/etc repaints for free - nothing
   past this block needs to know which mode is active. A partner brand's own
   colours (js/theme.js) are set as inline styles on <html>, which always
   beat this or any other stylesheet rule, so branding still wins over
   whichever mode the visitor picked. */
:root[data-theme="light"] {
  --bg: #f7f5f1;
  --bg-elev: #ffffff;
  --card: #ffffff;
  --card-2: #f0ede6;
  --border: rgba(20,16,8,0.1);
  --text: #201c14;
  --text-dim: #6b6355;
  --text-faint: #948c7b;

  --gold: #b8863a;
  --orange: #c07a35;
  --green: #128a5e;
  --green-dim: #0e7350;
  --red: #c14d68;
  --blue: #3f6fa8;

  --grad-brand: linear-gradient(135deg, #e0b768 0%, #b8863a 48%, #96682a 100%);
  --grad-dark: linear-gradient(180deg, rgba(247,245,241,0) 0%, rgba(247,245,241,0.85) 60%, rgba(247,245,241,1) 100%);
  --shadow-card: 0 8px 28px rgba(20,16,8,0.08);
  --shadow-glow: 0 0 0 1px rgba(184,134,58,0.18), 0 10px 24px rgba(20,16,8,0.1);
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(20,16,8,0.18); }
:root[data-theme="light"].scrolling ::-webkit-scrollbar-thumb { background: rgba(20,16,8,0.32); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, .brand, .heading {
  font-family: 'Poppins', 'Inter', sans-serif;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img, video { max-width: 100%; display: block; }

/* Scrollbar -------------------------------------------------------------------
   A slim rounded overlay thumb instead of the old "hide it completely", which
   left no clue that a pane could scroll at all. It is fully transparent at
   rest and fades in while scrolling: js/scrollHint.js puts .scrolling on
   <html> on every scroll and takes it off ~900ms after the last one. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
  opacity: 0;
  transition: background-color 0.35s ease;
}
/* Chrome cannot transition a scrollbar thumb's opacity, so the fade is done
   with the colour itself - transparent at rest, visible while scrolling. */
html:not(.scrolling) ::-webkit-scrollbar-thumb,
html:not(.scrolling)::-webkit-scrollbar-thumb { background: transparent; }
html.scrolling ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.26); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }
::-webkit-scrollbar-corner { background: transparent; }
/* Firefox has no per-state control, so it gets the thin thumb permanently. */
@supports (scrollbar-width: thin) {
  html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.22) transparent; }
}
/* Panes that opt out entirely (chip rows, the reels rail) keep doing so via
   their own scrollbar-width:none - see .icons-chips and friends below. */

/* ---- App shell / phone frame on wide screens --------------------------- */
body {
  display: flex;
  justify-content: center;
  background: radial-gradient(1200px 800px at 50% -10%, #1c1533 0%, #0a0a12 55%);
}

#app-frame {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 80px rgba(0,0,0,0.6);
  overflow: hidden;
}

/* #topbar/#view-root/#bottomnav live inside this wrapper (it's what the
   desktop sidebar sits beside - see the 900px block at the end of this file),
   so it has to carry the full-height flex column at EVERY width, not just on
   desktop. Without it #view-root's own `flex: 1` has no flex parent to
   stretch against, its height collapses to content, and its overflow-y:auto
   never scrolls - which is exactly what broke every non-Reels page on mobile
   (Reels kept working only because #reels-scroller scrolls itself). */
#main-col {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

@media (min-width: 560px) {
  #app-frame {
    margin: 20px 0;
    min-height: 92vh;
    border-radius: 36px;
    border: 8px solid #1a1730;
  }
}

/* ---- Splash screen ---------------------------------------------------------
   Shown immediately on load (no JS needed for first paint) so the very
   first thing anyone sees is a welcome, not a flash of "no approved videos"
   while Reels' first Firestore snapshot is still in flight - app.js hides
   this once real feed data has actually arrived (see waitForInitialData). */
#splash-screen {
  position: absolute; inset: 0; z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(120% 100% at 50% 15%, #241a3f 0%, #0a0a12 65%);
  padding: 32px 28px;
  text-align: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#splash-screen.hide { opacity: 0; visibility: hidden; pointer-events: none; }

.splash-orbit {
  position: relative;
  width: 176px; height: 176px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
}
.splash-core {
  position: relative; z-index: 2;
  width: 80px; height: 80px; border-radius: 26px;
  background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; color: #241300;
  box-shadow: var(--shadow-glow);
  animation: splashPulse 1.8s ease-in-out infinite;
}
@keyframes splashPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.splash-ring {
  position: absolute; inset: 0;
  animation: splashSpin 16s linear infinite;
}
@keyframes splashSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.splash-ring .ic {
  position: absolute;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
  animation: splashSpinReverse 16s linear infinite;
}
@keyframes splashSpinReverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.splash-ring .ic:nth-child(1) { top: 0; left: 50%; margin-left: -20px; }
.splash-ring .ic:nth-child(2) { top: 50%; right: 0; margin-top: -20px; }
.splash-ring .ic:nth-child(3) { bottom: 0; left: 50%; margin-left: -20px; }
.splash-ring .ic:nth-child(4) { top: 50%; left: 0; margin-top: -20px; }

.splash-title {
  font-family: 'Poppins'; font-weight: 800; font-size: 30px; margin: 0;
  letter-spacing: -0.02em;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.splash-tag { color: var(--text-dim); font-weight: 700; font-size: 14px; margin: 4px 0 14px; }
.splash-sub { color: var(--text-faint); font-size: 12.5px; line-height: 1.6; max-width: 280px; margin: 0 0 28px; }

.splash-loader { display: flex; gap: 7px; }
.splash-loader span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  animation: splashDot 1.2s ease-in-out infinite;
}
.splash-loader span:nth-child(2) { animation-delay: 0.15s; }
.splash-loader span:nth-child(3) { animation-delay: 0.3s; }
@keyframes splashDot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.2); }
}

/* ---- Topbar -------------------------------------------------------------- */
#topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  background: linear-gradient(180deg, rgba(10,10,18,0.92) 60%, rgba(10,10,18,0));
  backdrop-filter: blur(6px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.brand .logo-dot {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--grad-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  box-shadow: var(--shadow-glow);
}
.brand small { color: var(--text-dim); font-weight: 500; font-size: 11px; display:block; margin-top:-2px;}

.topbar-actions { display: flex; align-items: center; gap: 8px; }
#user-search-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer;
}

.wallet-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  color: var(--green);
  cursor: pointer;
}
.wallet-chip .plus {
  background: var(--grad-money);
  color: #06231b;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items:center; justify-content:center;
  font-size: 13px; font-weight: 900;
}

/* ---- Main / views --------------------------------------------------------- */
#view-root {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 90px;
  scrollbar-width: none;
}

.view {
  animation: fadeIn 0.25s ease;
  padding: 0 16px;
}
.view.no-pad { padding: 0; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity:1; transform: translateY(0);} }

.section-title {
  font-weight: 800;
  font-size: 20px;
  margin: 18px 0 12px;
  letter-spacing: -0.01em;
}
.section-title.small { font-size: 15px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

.subtle { color: var(--text-dim); font-size: 13px; }

/* ---- Bottom nav ------------------------------------------------------------ */
#bottomnav {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: rgba(18,16,34,0.9);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  transition: transform 0.25s ease;
}
/* Auto-hidden while scrolling down through Reels so it doesn't sit over the
   video; slides back the moment the user stops or scrolls up (see
   reels.js's scroll listener). */
#bottomnav.nav-hidden { transform: translateY(100%); }

.nav-btn {
  background: none; border: none; color: var(--text-faint);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 9.5px; font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
}
.nav-btn .ic { font-size: 17px; line-height: 1; }
.nav-btn.active { color: var(--gold); transform: translateY(-2px); }
/* Six tabs + the FAB no longer fit at their intrinsic widths on a narrow
   phone ("Mashindano" alone is wide), and an overflowing nav stretches the
   whole page sideways. Scoped to #bottomnav so the sidenav's full-width
   horizontal rows keep their untruncated labels. */
#bottomnav .nav-btn { flex: 1 1 0; min-width: 0; padding: 3px 2px; }
#bottomnav .nav-btn.fab { flex: 0 0 auto; }
#bottomnav .nav-btn > span:not(.ic) {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

#chat-fab {
  display: none; position: absolute; right: 14px; top: 70px; z-index: 55;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--grad-brand); color: #201200; font-size: 21px;
  align-items: center; justify-content: center; box-shadow: var(--shadow-glow);
  /* Without this, mobile browsers spend the first several pixels of a touch
     drag deciding whether the gesture is a page scroll or a custom gesture
     (no such ambiguity with a mouse) - the exact "nzito kumove" (heavy to
     move) feeling on phones that didn't show up on desktop. */
  touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

.nav-btn.fab {
  background: var(--grad-brand);
  color: #201200;
  width: 44px; height: 44px;
  border-radius: 16px;
  margin-top: -20px;
  box-shadow: var(--shadow-glow);
  font-size: 22px;
  justify-content: center;
}
.nav-btn.fab .ic { font-size: 22px; }

/* ---- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; cursor: pointer;
  padding: 13px 18px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14.5px;
  transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--grad-brand); color: #241300; box-shadow: var(--shadow-glow); }
.btn-money { background: var(--grad-money); color: #052019; }
.btn-ghost { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.btn-outline { background: transparent; color: var(--gold); border: 1.5px solid rgba(255,201,74,0.45); }
.btn-danger { background: rgba(255,77,109,0.15); color: var(--red); border: 1px solid rgba(255,77,109,0.3); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 12px; font-size: 12.5px; border-radius: var(--radius-sm); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- Cards ------------------------------------------------------------------ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
}

/* ---- Wenye Ushawishi (personality pages) -------------------------------------
   Deliberately its own visual world, not ImpowerTZ's card theme: an editorial,
   poster-led surface where every person carries their OWN colour, supplied per
   element as --ic-accent/--ic-deep from the person's own page (see
   js/personalityUtil.js). Nothing here reads the app's --gold, so the
   chrome outside these containers is untouched. */
.icons-view, .icon-page { background: var(--bg); color: var(--text); min-height: 100%; }
.icons-view { padding-bottom: 28px; }

.icons-head { padding: 22px 18px 16px; }
.icons-eyebrow {
  font-size: 10.5px; letter-spacing: 0.22em; font-weight: 700;
  color: var(--text-faint); margin-bottom: 8px;
}
.icons-head h1 {
  font-family: 'Poppins'; font-weight: 800; font-size: 30px; line-height: 1.05;
  margin: 0; letter-spacing: -0.02em;
}
.icons-head p { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin: 10px 0 0; }

/* Featured "Icon wa leo" - the person's photo is the backdrop, their colour
   is the light source, the copy sits over a scrim. */
.icon-hero {
  position: relative; margin: 0 14px 22px; border-radius: 26px; overflow: hidden;
  min-height: 330px; display: flex; align-items: flex-end;
  background: var(--ic-deep, #15161d);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.icon-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; opacity: 0.85;
}
.icon-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(190deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.82) 62%, var(--bg) 100%),
    linear-gradient(90deg, var(--ic-deep, #15161d) 0%, rgba(0,0,0,0) 78%);
}
.icon-hero-inner { position: relative; z-index: 1; padding: 22px 20px; width: 100%; }
.icon-hero-kicker {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: 0.2em; font-weight: 700; color: var(--ic-accent, #e7c06b);
}
.icon-hero-kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ic-accent, #e7c06b); }
.icon-hero-kicker i { flex: 0 0 26px; height: 1px; background: currentColor; opacity: 0.5; }
.icon-hero-pre { color: #cfcac1; font-size: 13px; line-height: 1.45; margin: 12px 0 4px; }
.icon-hero-name {
  font-family: 'Poppins'; font-weight: 800; font-size: 34px; line-height: 0.98;
  margin: 0; letter-spacing: -0.03em;
}
.icon-hero-name span { color: var(--ic-accent, #e7c06b); font-size: 22px; vertical-align: super; margin-left: 6px; }
.icon-hero-bio {
  color: #b3ada3; font-size: 12.5px; line-height: 1.6; margin: 12px 0 16px;
  max-width: 46ch;
}
.icon-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.icon-btn-solid {
  background: var(--ic-accent, #e7c06b); color: #12100c; border: 0;
  border-radius: 999px; padding: 11px 20px; font-weight: 700; font-size: 13px;
  font-family: inherit; cursor: pointer; transition: transform 0.12s, filter 0.15s;
}
.icon-btn-solid:hover { filter: brightness(1.08); }
.icon-btn-solid:active { transform: scale(0.98); }
.icon-btn-solid.full { display: block; width: 100%; padding: 12px; }
.icon-btn-ghost {
  background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
  padding: 11px 20px; font-weight: 600; font-size: 13px;
  font-family: inherit; cursor: pointer;
}
.icon-btn-ghost:hover { border-color: var(--ic-accent, #e7c06b); color: var(--ic-accent, #e7c06b); }
.icon-btn-ghost.sm { padding: 8px 16px; font-size: 12px; }

.icons-chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 14px;
  scrollbar-width: none;
}
.icons-chips::-webkit-scrollbar { display: none; }
.icons-chip {
  flex-shrink: 0; background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text-dim);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: 999px;
  padding: 8px 15px; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.icons-chip.selected { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Poster grid - two up on a phone, more as the column widens. */
.icons-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 14px; padding: 0 16px;
}
.icon-poster {
  position: relative; display: block; width: 100%; text-align: left; padding: 0;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); border-radius: 22px; overflow: hidden;
  background: var(--ic-deep, #15161d); color: inherit; font-family: inherit;
  cursor: pointer; transition: transform 0.15s, border-color 0.15s;
}
.icon-poster:hover { transform: translateY(-3px); border-color: var(--ic-accent, #e7c06b); }
.icon-poster-img { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.icon-poster-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.icon-poster-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.55) 72%, var(--ic-deep, #15161d) 100%);
}
.icon-poster-tag {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  font-size: 9px; letter-spacing: 0.16em; font-weight: 800;
  color: #12100c; background: var(--ic-accent, #e7c06b);
  padding: 4px 8px; border-radius: 6px;
}
.icon-poster-body { display: block; padding: 0 14px 14px; margin-top: -26px; position: relative; z-index: 1; }
.icon-poster-cat { display: block; font-size: 9.5px; letter-spacing: 0.16em; font-weight: 700; color: var(--ic-accent, #e7c06b); }
.icon-poster-name { display: block; font-family: 'Poppins'; font-weight: 800; font-size: 15px; line-height: 1.15; margin-top: 5px; }
.icon-poster-label { display: block; color: var(--text-dim); font-size: 11.5px; margin-top: 3px; line-height: 1.35; }
.icon-poster-price {
  display: inline-block; margin-top: 9px; font-size: 11px; font-weight: 700;
  color: var(--ic-accent, #e7c06b);
  border: 1px solid color-mix(in srgb, var(--ic-accent, #e7c06b) 45%, transparent);
  border-radius: 999px; padding: 4px 10px;
}

.icons-empty { padding: 40px 20px; text-align: center; color: var(--text-faint); font-size: 13px; }
.icons-empty p { margin: 0 0 14px; }

/* ---- One person's page ------------------------------------------------------- */
.icon-page { padding-bottom: 30px; }
.icon-cover { position: relative; min-height: 400px; display: flex; flex-direction: column; justify-content: flex-end; }
.icon-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.icon-cover-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 34%, rgba(8,8,12,0.9) 82%, var(--bg) 100%);
}
.icon-page-top { position: relative; z-index: 2; padding: 14px 16px 0; }
.icon-back {
  background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.2); color: #fff;
  border-radius: 999px; padding: 8px 15px; font-size: 12.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; backdrop-filter: blur(6px);
}
.icon-cover-text { position: relative; z-index: 1; padding: 0 20px 20px; margin-top: auto; }
.icon-cover-tag {
  display: inline-block; font-size: 9.5px; letter-spacing: 0.18em; font-weight: 800;
  color: #12100c; background: var(--ic-accent, #e7c06b); padding: 4px 9px; border-radius: 6px;
}
.icon-cover-text h1 {
  font-family: 'Poppins'; font-weight: 800; font-size: 32px; line-height: 1.02;
  margin: 12px 0 0; letter-spacing: -0.03em;
}
.icon-cover-label { color: var(--ic-accent, #e7c06b); font-size: 12.5px; font-weight: 600; margin: 8px 0 0; }
.icon-cover-handle { color: var(--text-faint); font-size: 12px; margin: 3px 0 0; }

.icon-intro {
  font-family: 'Poppins'; font-size: 16px; line-height: 1.5; font-style: italic;
  color: #e8e4dd; padding: 18px 20px 0; margin: 0;
}
.icon-bio { color: var(--text-dim); font-size: 13px; line-height: 1.65; padding: 12px 20px 0; margin: 0; }

.icon-section-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 10.5px; letter-spacing: 0.2em; font-weight: 700; color: var(--text-faint);
  padding: 26px 20px 12px;
}
.icon-section-title span { width: 22px; height: 1px; background: var(--ic-accent, #e7c06b); }

.icon-pkgs { display: grid; gap: 12px; padding: 0 16px; }
.icon-pkg {
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: 20px; padding: 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ic-deep, #15161d) 70%, transparent), color-mix(in srgb, var(--text) 2%, transparent));
  position: relative; overflow: hidden;
}
/* Level 3 - the person themselves - is the one that should feel scarce. */
.icon-pkg.lvl-3 { border-color: color-mix(in srgb, var(--ic-accent, #e7c06b) 55%, transparent); }
.icon-pkg header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.icon-pkg-level {
  font-size: 9.5px; letter-spacing: 0.18em; font-weight: 800; color: var(--ic-accent, #e7c06b);
  border: 1px solid color-mix(in srgb, var(--ic-accent, #e7c06b) 40%, transparent);
  padding: 3px 8px; border-radius: 5px;
}
.icon-pkg-price { font-family: 'Poppins'; font-weight: 800; font-size: 16px; white-space: nowrap; }
.icon-pkg h3 { font-family: 'Poppins'; font-weight: 700; font-size: 16px; margin: 12px 0 0; }
.icon-pkg p { color: var(--text-dim); font-size: 12.5px; line-height: 1.55; margin: 7px 0 0; }
.icon-pkg-meta { color: var(--text-faint); font-size: 11px; margin: 10px 0 14px; }

.icon-promise { color: var(--text-faint); font-size: 11.5px; line-height: 1.6; padding: 20px 20px 0; margin: 0; text-align: center; }
.icon-report { text-align: center; padding: 14px 20px 0; }


/* ---- Rotating hero, search, and the paid-chat / studio surfaces -------------
   All of these belong to the same editorial world as .icons-view above and
   read the same per-person --ic-accent / --ic-deep. */
.icon-hero.swap { animation: icHeroIn 0.45s ease; }
@keyframes icHeroIn {
  from { opacity: 0.25; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.icon-hero-dots { display: flex; justify-content: center; gap: 7px; margin: -10px 0 16px; }
.icon-hero-dot {
  width: 7px; height: 7px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 0; background: rgba(255,255,255,0.22); transition: width 0.2s, background 0.2s;
}
.icon-hero-dot.on { width: 22px; border-radius: 999px; background: var(--text); }

.icons-search {
  display: flex; align-items: center; gap: 10px; margin: 0 16px 14px;
  background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 999px; padding: 0 16px;
}
.icons-search span { color: var(--text-faint); font-size: 17px; }
.icons-search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--text); font-family: inherit; font-size: 13.5px; padding: 12px 0;
}
.icons-search input::placeholder { color: var(--text-faint); }
.icons-search input::-webkit-search-cancel-button { filter: invert(0.6); }

/* Live session banner on a tier card the buyer already owns. */
.icon-pkg-live {
  font-size: 11.5px; font-weight: 700; color: var(--ic-accent, #e7c06b);
  margin: 0 0 10px;
}

/* ---- Paid conversation ------------------------------------------------------
   A full-height column: fixed header and meter, a scrolling log, a composer
   pinned to the bottom. min-height:0 on the log is what lets it scroll rather
   than stretching the column. */
.pchat-shell { height: 100%; padding-bottom: 0; }
.pchat {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
  background: var(--bg); color: var(--text);
}
.pchat-head {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ic-deep, #15161d) 85%, transparent), transparent);
}
.pchat-avatar {
  width: 40px; height: 40px; border-radius: 14px; overflow: hidden; flex-shrink: 0;
  background: var(--ic-deep, #15161d);
}
.pchat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pchat-who-head { min-width: 0; }
.pchat-who-head strong { display: block; font-size: 14.5px; }
.pchat-who-head small { color: var(--ic-accent, #e7c06b); font-size: 11.5px; }

.pchat-meter {
  display: flex; justify-content: space-between; flex-shrink: 0;
  padding: 8px 16px; font-size: 11.5px; font-weight: 600;
  color: var(--ic-accent, #e7c06b);
  background: color-mix(in srgb, var(--ic-accent, #e7c06b) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
}
.pchat-meter.spent { color: #e08b8b; background: rgba(224,139,139,0.1); }

.pchat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 14px; }
.pchat-welcome { text-align: center; padding: 40px 20px; color: var(--text-faint); }
.pchat-welcome h3 { font-family: 'Poppins'; font-size: 19px; color: var(--text); margin: 0 0 8px; }
.pchat-welcome p { font-size: 13px; line-height: 1.6; margin: 0; }

.pchat-row { display: flex; margin-bottom: 14px; }
.pchat-row.mine { justify-content: flex-end; }
.pchat-wrap { max-width: min(78%, 520px); }
.pchat-who { font-size: 10px; letter-spacing: 0.1em; color: var(--text-faint); margin-bottom: 4px; }
.pchat-row.mine .pchat-who { text-align: right; }
.pchat-bubble {
  background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 18px 18px 18px 6px; padding: 11px 14px;
}
.pchat-row.mine .pchat-bubble {
  background: var(--ic-accent, #e7c06b); color: #12100c; border-color: transparent;
  border-radius: 18px 18px 6px 18px;
}
.pchat-bubble p { margin: 0; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.pchat-bubble audio, .pchat-bubble video { width: 100%; margin-bottom: 8px; border-radius: 10px; }
.pchat-bubble.typing { color: var(--text-faint); font-size: 13px; }

.pchat-compose {
  display: flex; gap: 10px; flex-shrink: 0; align-items: center;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); background: var(--bg);
}
.pchat-compose input {
  flex: 1; min-width: 0; background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: 999px;
  padding: 12px 18px; color: var(--text); font-family: inherit; font-size: 13.5px; outline: none;
}
.pchat-compose input:focus { border-color: var(--ic-accent, #e7c06b); }
.pchat-send {
  width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%;
  background: var(--ic-accent, #e7c06b); color: #12100c; font-size: 17px; cursor: pointer;
}

/* ---- Studio ("Nyuma ya Pazia") --------------------------------------------- */
.studio-money {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0 16px 8px; padding: 18px; border-radius: 22px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--ic-accent, #e7c06b) 22%, #101014), #101014);
  border: 1px solid color-mix(in srgb, var(--ic-accent, #e7c06b) 30%, transparent);
}
.studio-money small { display: block; color: var(--text-dim); font-size: 11.5px; }
.studio-money strong { font-family: 'Poppins'; font-size: 26px; }

.studio-threads { display: grid; gap: 10px; padding: 0 16px; }
.studio-thread {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 16px; padding: 13px 14px; color: inherit; font-family: inherit; cursor: pointer;
}
.studio-thread.waiting { border-color: var(--ic-accent, #e7c06b); }
.studio-thread-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.2);
}
.studio-thread.waiting .studio-thread-dot { background: var(--ic-accent, #e7c06b); }
.studio-thread-body { flex: 1; min-width: 0; }
.studio-thread-body strong { display: block; font-size: 13.5px; }
.studio-thread-body small {
  display: block; color: var(--text-faint); font-size: 11.5px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.studio-badge {
  flex-shrink: 0; background: var(--ic-accent, #e7c06b); color: #12100c;
  border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 800;
}

.studio-panel {
  margin: 0 16px; padding: 16px; border-radius: 20px;
  background: color-mix(in srgb, var(--text) 3%, transparent); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.studio-note { color: var(--text-faint); font-size: 12px; line-height: 1.6; margin: 0 0 14px; }
.studio-field { display: block; font-size: 11.5px; color: var(--text-dim); margin-bottom: 12px; }
.studio-field input, .studio-field textarea {
  display: block; width: 100%; margin-top: 5px; background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: 12px; padding: 11px 13px;
  color: var(--text); font-family: inherit; font-size: 13.5px; outline: none; resize: vertical;
}
.studio-field input:focus, .studio-field textarea:focus { border-color: var(--ic-accent, #e7c06b); }

.studio-tier {
  border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent); padding-top: 12px; margin-top: 12px;
}
.studio-toggle { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; cursor: pointer; }
.studio-toggle input { width: 17px; height: 17px; accent-color: var(--ic-accent, #e7c06b); }
.studio-tier-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 10px; }
.studio-tier-fields label { font-size: 11px; color: var(--text-dim); }
.studio-tier-fields input {
  display: block; width: 100%; margin-top: 4px; background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: 10px; padding: 9px 10px;
  color: var(--text); font-family: inherit; font-size: 13px; outline: none;
}
.studio-qa { margin-top: 14px; display: grid; gap: 10px; }
.studio-qa-item {
  background: color-mix(in srgb, var(--text) 4%, transparent); border-radius: 14px; padding: 12px;
}
.studio-qa-item strong { display: block; font-size: 13px; }
.studio-qa-item p { color: var(--text-dim); font-size: 12.5px; line-height: 1.5; margin: 5px 0 9px; }

/* ---- Wallet balance hero ------------------------------------------------------ */
.balance-hero {
  border-radius: var(--radius-xl);
  padding: 22px;
  background: radial-gradient(120% 140% at 15% 0%, #24304a 0%, #171233 55%, #120f26 100%);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.balance-hero::after {
  content: "";
  position: absolute; inset: -40% -20% auto auto;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(22,212,146,0.35), transparent 70%);
}
.balance-hero .label { color: var(--text-dim); font-size: 13px; font-weight: 600; }
.balance-hero .amount { font-size: 34px; font-weight: 800; margin: 6px 0 18px; font-family: 'Poppins'; }
.balance-hero .actions { display: flex; gap: 10px; }

/* ---- Provider grid (mobile money) ------------------------------------------- */
.provider-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.provider-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border-radius: var(--radius);
  background: var(--card-2); border: 1.5px solid var(--border);
  cursor: pointer; font-weight: 700; font-size: 13px;
  transition: border-color 0.15s, background 0.15s;
}
.provider-card.selected { border-color: var(--gold); background: rgba(255,201,74,0.08); }
.provider-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

/* ---- Transaction list --------------------------------------------------------- */
.tx-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.tx-row:last-child { border-bottom: none; }
.tx-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items:center; justify-content:center; font-size: 17px; flex-shrink:0; }
.tx-icon.in { background: rgba(22,212,146,0.15); color: var(--green); }
.tx-icon.out { background: rgba(255,138,61,0.15); color: var(--orange); }
.tx-main { flex: 1; min-width: 0; }
.tx-title { font-weight: 700; font-size: 13.5px; }
.tx-sub { color: var(--text-faint); font-size: 11.5px; }
.tx-amt { font-weight: 800; font-size: 13.5px; }
.tx-amt.in { color: var(--green); }
.tx-amt.out { color: var(--text); }

/* ---- Reels feed --------------------------------------------------------------- */
#reels-scroller {
  height: calc(100vh - 0px);
  height: calc(100dvh - 0px);
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.reel {
  position: relative;
  height: calc(100vh - 0px);
  height: calc(100dvh - 0px);
  scroll-snap-align: start;
  display: flex;
  align-items: flex-end;
  background: #000;
  overflow: hidden;
}
.reel-restricted { align-items: center; justify-content: center; }
.reel-restricted-notice {
  max-width: 280px; text-align: center; padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.reel-restricted-notice i { font-size: 40px; color: var(--red); }
.reel-restricted-title { font-weight: 800; font-size: 17px; }

.reel-main-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  /* contain (not cover) so nothing is ever cropped - a true 9:16 clip fills
     the frame exactly like cover would anyway; anything else (16:9, square,
     etc.) shows the blurred backdrop behind it instead of losing picture off
     the edges or plain black bars. */
  object-fit: contain;
}
/* Backdrop layer: a second copy of the same clip, blurred and zoomed to
   cover the whole frame, so a video whose aspect doesn't match the screen
   fills the space with a soft duplicate of itself (Instagram/TikTok-style)
   instead of black letterbox bars. Only actually visible on non-9:16 clips -
   a true 9:16 video's foreground copy covers this completely. It is the
   video's own thumbnail, not a second copy of the video: blurred this hard
   nobody can tell it is a still, and it halves the bytes a reel costs. */
.reel-bg {
  position: absolute; inset: 0;
  overflow: hidden;
}
.reel-bg img, .reel-bg video {
  position: absolute; inset: -5%;
  width: 110%; height: 110%;
  object-fit: cover;
  filter: blur(30px) brightness(0.55);
  transform: scale(1.1);
}
.reel-topbar {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 3;
}
.reel-topbar-right { display: flex; align-items: center; gap: 8px; }
/* Shown only while the video has stalled (waiting/stalled/error) - see
   wireBuffering() in reels.js. Without this, a rebuffer mid-playback just
   freezes on the last painted frame with no sign anything is happening. */
.reel-buffering {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.15s ease;
  pointer-events: none;
}
.reel-buffering.show { opacity: 1; visibility: visible; }
.reel-buffering .spinner {
  width: 34px; height: 34px; border-width: 3px;
  border-color: rgba(255,255,255,0.25); border-top-color: #fff;
}
.reel-mute-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.15); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer;
  flex-shrink: 0;
}
/* Brief center-screen play/pause confirmation on single-tap, same idea as
   the multi-tap heart burst but a one-shot fade instead of a spawn layer. */
.reel-pause-flash {
  position: absolute; top: 50%; left: 50%; z-index: 6;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #fff;
  opacity: 0; transform: translate(-50%, -50%) scale(0.7);
  pointer-events: none;
}
.reel-pause-flash.show { animation: pauseFlash 0.6s ease; }
@keyframes pauseFlash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
/* Vertical seek bar on the video's left edge (own-brand take on the
   Instagram-web reel viewer's side scrubber - our action icons already own
   the right edge, so the scrub lane goes on the left instead). A wide
   invisible hit-area with a slim visible track/fill down the middle, so it's
   still easy to grab on a phone without looking chunky. Bounded between the
   topbar and #bottomnav so it's never hidden under either. */
.reel-scrub-track {
  position: absolute; left: 0; top: 64px;
  /* Stops well above .reel-content (caption/owner/action icons all live in
     the bottom ~40-45% of the screen) so this hit-area never steals taps
     meant for that text/those icons - only overlaps plain video/backdrop. */
  bottom: 44%;
  width: 24px;
  z-index: 4;
  cursor: pointer;
  touch-action: none;
}
.reel-scrub-track::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 12px; width: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,0.25);
}
.reel-scrub-fill {
  position: absolute; top: 0; left: 12px; width: 3px; height: 0%;
  border-radius: 3px;
  background: var(--grad-brand);
}
.reel-scrub-fill::after {
  content: ""; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
}
.reel-content {
  position: relative; z-index: 2;
  padding: 0 16px 20px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  /* Just clears #bottomnav plus a small breathing gap - previously reserved
     100px here, which sat far above the nav's real ~58px height and left a
     dead empty band between the caption/action icons and the nav bar. */
  padding-bottom: calc(var(--nav-height) + 14px + env(safe-area-inset-bottom));
}
/* Localized dark gradient behind the caption/tags only (not a full-screen
   veil - that was deliberately removed earlier) so the text stays readable
   over bright/busy video content. Negative z-index puts it behind
   .reel-content's own normal-flow children while still sitting above the
   video, since .reel-content establishes its own stacking context. */
.reel-content::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 230px;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}
.reel-info { flex: 1; min-width: 0; padding-bottom: 6px; }
.reel-owner { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.reel-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--card-2); display:flex; align-items:center; justify-content:center; font-size:16px; border: 2px solid var(--gold); overflow:hidden; }
.reel-caption { font-size: 13.5px; color: #ece8ff; line-height: 1.4; margin-bottom: 8px; }
.reel-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.reel-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 10px; }
.reel-action { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; background:none; border:none; color: #fff; }
.reel-action .ic {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  font-size: 21px;
  transition: transform 0.15s, background 0.15s;
}
.reel-action.liked .ic { background: rgba(255,77,109,0.25); color: var(--red); }
.reel-action.donate .ic { background: var(--grad-money); color: #052019; }
.reel-action:active .ic { transform: scale(0.88); }
.reel-action .lbl { font-size: 11px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--text) 10%, transparent); color: #fff;
}
.pill.gold { background: rgba(255,201,74,0.2); color: var(--gold); }
.pill.green { background: rgba(22,212,146,0.2); color: var(--green); }
.pill.live, .pill.red { background: rgba(255,77,109,0.2); color: var(--red); }

.cause-strip {
  margin-top: 8px;
  display: flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  max-width: 240px;
}
.cause-strip .bar-track { flex:1; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.15); overflow:hidden; }
.cause-strip .bar-fill { height: 100%; background: var(--grad-money); }
.cause-strip .cause-text { font-size: 10.5px; color: var(--text-dim); line-height: 1.3; }
.cause-strip .cause-pct { font-size: 10.5px; font-weight: 800; color: var(--green); flex-shrink: 0; }

/* ---- Competitions --------------------------------------------------------------- */
.comp-card {
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 14px;
  background: linear-gradient(145deg, var(--card) 0%, var(--card-2) 100%);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.comp-card .emoji-badge {
  width: 54px; height: 54px; border-radius: 16px;
  background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 10px;
  box-shadow: var(--shadow-glow);
}
/* Prize banner across the top of a competition card, above the title - the
   goal is to sell the prize before the reader even gets to the description,
   so it bleeds to the card's own edges (negative margin matching .comp-card's
   padding) and reuses the same per-competition theme gradients as the detail
   page's prize section (see js/utils.js's themeFor). */
.comp-prize-banner {
  display: flex; align-items: center; gap: 10px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 10px 16px; margin: -18px -18px 14px -18px;
  position: relative; overflow: hidden;
}
.comp-prize-banner.theme-a { background: linear-gradient(120deg, #5c2e0a, #a8501a); }
.comp-prize-banner.theme-b { background: linear-gradient(120deg, #123a4a, #1f6fa8); }
.comp-prize-banner.theme-c { background: linear-gradient(120deg, #4a1550, #8a2aa0); }
.comp-prize-banner.theme-d { background: linear-gradient(120deg, #0a5c3e, #17a874); }
.comp-prize-banner .icon { font-size: 26px; flex-shrink: 0; animation: prizeBounce 2.2s ease-in-out infinite; }
.comp-prize-banner .text { flex: 1; min-width: 0; }
.comp-prize-banner .label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.75); }
.comp-prize-banner .title { font-size: 15px; font-weight: 900; color: #fff; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-prize-banner::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: prizeShine 2.6s ease-in-out infinite;
}
@keyframes prizeShine { 0% { left: -60%; } 100% { left: 130%; } }

/* Category-flavored hype strip on the competition detail page - "kila
   anayeingia kwenye card ya shindano" should feel invited in immediately,
   before reading the plain description. Reuses the same per-competition
   theme gradients as .comp-prize-banner/.prize-section. */
.hype-strip {
  display: flex; align-items: center; gap: 8px;
  border-radius: 10px; padding: 9px 14px; margin: 8px 0 12px;
  font-size: 13px; font-weight: 700; color: #fff;
  animation: hypePulse 2.4s ease-in-out infinite;
}
.hype-strip.theme-a { background: linear-gradient(120deg, #5c2e0a, #a8501a); }
.hype-strip.theme-b { background: linear-gradient(120deg, #123a4a, #1f6fa8); }
.hype-strip.theme-c { background: linear-gradient(120deg, #4a1550, #8a2aa0); }
.hype-strip.theme-d { background: linear-gradient(120deg, #0a5c3e, #17a874); }
.hype-strip i { flex-shrink: 0; color: var(--gold, #ffc94a); }
@keyframes hypePulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
.comp-card h3 { margin: 0 0 4px; font-size: 17px; }
.comp-card p { margin: 0 0 12px; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.comp-meta { display: flex; gap: 14px; margin-bottom: 14px; }
.comp-meta .item { font-size: 11.5px; color: var(--text-faint); }
.comp-meta .item b { display: block; color: var(--text); font-size: 13.5px; }

.entry-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
}
.entry-rank {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-elev); display: flex; align-items:center; justify-content:center;
  font-weight: 800; font-size: 13px; flex-shrink:0; color: var(--text-dim);
}
.entry-rank.top1 { background: var(--grad-brand); color: #241300; }
.entry-thumb { width: 46px; height: 46px; border-radius: 12px; background: var(--bg-elev); display:flex; align-items:center; justify-content:center; font-size: 22px; flex-shrink:0; overflow:hidden; }
.entry-main { flex: 1; min-width: 0; }
.entry-name { font-weight: 700; font-size: 13.5px; }
.entry-votes { font-size: 11.5px; color: var(--text-faint); }
.entry-votes-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.vote-pill { font-size: 10.5px; padding: 2px 8px; }

/* Leaderboard rank distinction ("yule wa kwanza akiwa anautofauti jina lake
   na number zao") - #1 gets a glowing gold-gradient name + crown and a
   pulsing card border, #2/#3 get a lighter silver/bronze version, everyone
   else stays plain. */
.entry-row.rank-1 { border-color: rgba(255,201,74,0.6); background: linear-gradient(135deg, rgba(255,201,74,0.10), var(--card-2)); animation: rankGlow1 2.6s ease-in-out infinite; }
.entry-row.rank-2 { border-color: rgba(200,205,215,0.5); background: linear-gradient(135deg, rgba(200,205,215,0.08), var(--card-2)); }
.entry-row.rank-3 { border-color: rgba(205,140,90,0.5); background: linear-gradient(135deg, rgba(205,140,90,0.08), var(--card-2)); }
@keyframes rankGlow1 { 0%, 100% { box-shadow: 0 0 0 rgba(255,201,74,0); } 50% { box-shadow: 0 0 16px rgba(255,201,74,0.35); } }
.entry-name-gold {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 900; font-size: 15px;
  background: linear-gradient(90deg, #ffd86b, #ffc94a 60%, #ff9d4a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.entry-name-gold i { color: var(--gold, #ffc94a); -webkit-text-fill-color: initial; }
.entry-name.rank-2 { color: #d6dbe4; font-weight: 800; }
.entry-name.rank-3 { color: #d6a577; font-weight: 800; }

/* ---- Forms --------------------------------------------------------------------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--card-2);
  border: 1.5px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 13px 14px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }
.field textarea { resize: vertical; min-height: 80px; }
.chip-select { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt {
  padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: var(--card-2); border: 1.5px solid var(--border); color: var(--text-dim); cursor: pointer;
}
.chip-opt.selected { background: rgba(255,201,74,0.15); border-color: var(--gold); color: var(--gold); }

.upload-drop {
  border: 2px dashed rgba(255,255,255,0.18);
  border-radius: var(--radius-lg);
  padding: 30px 16px;
  text-align: center;
  cursor: pointer;
  color: var(--text-dim);
  transition: border-color 0.15s, background 0.15s;
}
.upload-drop:hover { border-color: var(--gold); background: rgba(255,201,74,0.04); }
.progress-track { height: 8px; border-radius: 999px; background: var(--card-2); overflow: hidden; margin-top: 10px; }
.progress-fill { height: 100%; background: var(--grad-brand); transition: width 0.2s ease; }

/* ---- Profile ------------------------------------------------------------------- */
.profile-header { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 0 6px; }
.profile-bio { max-width: 280px; }
.profile-avatar {
  width: 84px; height: 84px; border-radius: 26px;
  background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; margin-bottom: 10px;
  box-shadow: var(--shadow-glow);
  overflow: hidden; position: relative;
}
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-upload-btn {
  position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold); color: #241300; border: 2px solid var(--bg); display: flex; align-items: center;
  justify-content: center; font-size: 13px; cursor: pointer;
}
.profile-follow-row { display: flex; justify-content: center; gap: 26px; margin-top: 12px; }
.profile-follow-row .fstat { text-align: center; }
.profile-follow-row .fstat b { display: block; font-size: 16px; font-weight: 800; }
.profile-follow-row .fstat span { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; }
.follow-btn { min-width: 130px; }

.stat-row { display: flex; gap: 10px; margin: 16px 0; }
.stat-box { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; text-align: center; }
.stat-box .n { font-weight: 800; font-size: 18px; }
.stat-box .l { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; }

.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.video-grid .thumb {
  aspect-ratio: 9/14; border-radius: 12px; background: var(--card-2);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  position: relative; overflow: hidden;
  border: 1px solid var(--border);
}
.video-grid .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-grid .thumb .thumb-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: rgba(255,255,255,0.9); background: rgba(0,0,0,0.15);
}
.video-grid .thumb .status-badge {
  position: absolute; top: 5px; left: 5px; font-size: 9px; padding: 3px 6px; border-radius: 6px; font-weight: 800;
}
.video-grid .thumb .votes-badge {
  position: absolute; bottom: 5px; right: 5px; font-size: 9.5px; padding: 3px 6px; border-radius: 6px; background: rgba(0,0,0,0.55); font-weight: 700;
}

/* ---- User search / friend suggestions ------------------------------------------ */
.user-search-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 4px;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.user-search-row:last-child { border-bottom: none; }
.user-search-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--card-2);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  overflow: hidden; flex-shrink: 0;
}
.user-search-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.user-search-info .subtle { font-size: 11.5px; }
.user-search-vibe {
  font-size: 11px; font-style: italic; color: var(--gold, #ffc94a);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Groups -------------------------------------------------------------------- */
.group-card { margin-bottom: 14px; }
.group-card-desc { max-width: 230px; }
.group-card .pot { font-size: 22px; font-weight: 800; color: var(--green); font-family: 'Poppins'; }

/* Current-turn banner on the group card, "kama zawadi juu ya card ya
   shindano" - same shine/theme treatment as .comp-prize-banner, sized for
   .card's 16px padding (comp-card uses 18px) so the bleed-to-edge margin
   lines up exactly. */
.group-turn-banner {
  display: flex; align-items: center; gap: 10px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 10px 16px; margin: -16px -16px 12px -16px;
  position: relative; overflow: hidden;
}
.group-turn-banner.theme-a { background: linear-gradient(120deg, #5c2e0a, #a8501a); }
.group-turn-banner.theme-b { background: linear-gradient(120deg, #123a4a, #1f6fa8); }
.group-turn-banner.theme-c { background: linear-gradient(120deg, #4a1550, #8a2aa0); }
.group-turn-banner.theme-d { background: linear-gradient(120deg, #0a5c3e, #17a874); }
.group-turn-banner .icon { font-size: 22px; flex-shrink: 0; animation: prizeBounce 2.2s ease-in-out infinite; }
.group-turn-banner .text { flex: 1; min-width: 0; }
.group-turn-banner .label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.75); }
.group-turn-banner .title { font-size: 14px; font-weight: 900; color: #fff; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-turn-banner .btn { flex-shrink: 0; }
.group-turn-banner::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: prizeShine 2.6s ease-in-out infinite;
}
.member-avatars { display: flex; margin-top: 8px; }
.member-avatars span {
  width: 28px; height: 28px; border-radius: 50%; background: var(--card-2);
  border: 2px solid var(--card); display: flex; align-items: center; justify-content: center;
  font-size: 13px; margin-left: -8px;
}
.member-avatars span:first-child { margin-left: 0; }

/* ---- Influencer hype messages (js/views/profile.js/groups.js/groupDetail.js) --- */
.group-hype-strip {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(120deg, rgba(79,157,255,0.18), rgba(255,201,74,0.12));
  border: 1px solid rgba(79,157,255,0.3); border-radius: var(--radius);
  padding: 9px 12px; font-size: 12.5px; font-weight: 600; color: var(--text);
  margin: -16px -16px 12px -16px;
}
.group-hype-strip i { color: var(--blue); flex-shrink: 0; }
.profile-hype-banner {
  display: flex; align-items: center; gap: 8px; text-align: left;
  background: rgba(79,157,255,0.12); border: 1px solid rgba(79,157,255,0.3);
  border-radius: var(--radius); padding: 9px 12px; margin-top: 10px;
  font-size: 12.5px; font-weight: 600; max-width: 280px;
}
.profile-hype-banner i { color: var(--blue); flex-shrink: 0; }

/* ---- Influencer dashboard (contract/earnings/vetting/hype composer) ------------ */
.contract-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; font-size: 13px; color: var(--text-dim);
}
.contract-row b { color: var(--gold); font-size: 14px; }
.commission-row, .pending-req-row, .hype-msg-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.commission-row:last-child, .pending-req-row:last-child, .hype-msg-row:last-child { border-bottom: none; }
.commission-row .ic { font-size: 18px; flex-shrink: 0; }
.commission-row .mid, .pending-req-row .mid, .hype-msg-row .mid { flex: 1; min-width: 0; }
.commission-row .amt { color: var(--green); font-size: 14px; flex-shrink: 0; }
.hype-msg-row .mid p { font-size: 13px; font-style: italic; color: var(--text); }

/* ---- Login --------------------------------------------------------------------- */
.login-wrap { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 32px 24px; }
.login-logo { width: 84px; height: 84px; border-radius: 26px; background: var(--grad-brand); display:flex; align-items:center; justify-content:center; font-size:40px; margin: 0 auto 18px; box-shadow: var(--shadow-glow); }
.login-title { text-align: center; font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.login-sub { text-align: center; color: var(--text-dim); font-size: 13.5px; margin-bottom: 30px; }

/* ---- Modal --------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(4,3,10,0.7);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 100; backdrop-filter: blur(3px);
  animation: fadeIn 0.2s ease;
}
.modal-sheet {
  width: 100%; max-width: 480px;
  background: var(--bg-elev);
  border-radius: 28px 28px 0 0;
  padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
  border: 1px solid var(--border);
  max-height: 88vh; overflow-y: auto;
}
.modal-handle { width: 42px; height: 4px; background: var(--border); border-radius: 4px; margin: 0 auto 16px; }
.modal-title { font-size: 18px; font-weight: 800; margin-bottom: 4px; }

/* ---- Comments ------------------------------------------------------------------ */
.comments-list { max-height: 46vh; overflow-y: auto; margin: 14px 0; }
.comment-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.comment-row:last-child { border-bottom: none; }
.comment-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--card-2); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; overflow:hidden; }
.comment-main { flex: 1; min-width: 0; }
.comment-name { font-weight: 700; font-size: 12.5px; }
.comment-text { font-size: 13.5px; color: var(--text); margin: 2px 0 3px; line-height: 1.4; }
.comment-time { font-size: 10.5px; color: var(--text-faint); }
.comment-input-row { display: flex; gap: 8px; align-items: center; }
.comment-input-row input {
  flex: 1; background: var(--card-2); border: 1.5px solid var(--border); color: var(--text);
  border-radius: var(--radius); padding: 12px 14px; font-size: 14px; font-family: inherit; outline: none;
}
.comment-input-row input:focus { border-color: var(--gold); }
.comment-mention { color: var(--gold); font-weight: 700; }
.comment-sticker .comment-text { font-size: 30px; line-height: 1.2; margin: 4px 0; }
.comment-reply-btn { background: none; border: none; color: var(--text-faint); font-size: 11.5px; font-weight: 700; padding: 0; cursor: pointer; }
.comment-reply-btn:hover { color: var(--gold); }
.comment-replies { margin-top: 8px; padding-left: 14px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.comment-reply-input-row { display: none; gap: 8px; margin-top: 8px; }
.comment-reply-input-row.open { display: flex; }
.comment-reply-input-row input {
  flex: 1; background: var(--card-2); border: 1.5px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-family: inherit; outline: none;
}
.comment-toolbar { display: flex; gap: 6px; margin-bottom: 8px; }
.comment-tool-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--card-2);
  color: var(--text-dim); font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.comment-tool-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(255,201,74,0.12); }
.comment-picker { display: none; flex-wrap: wrap; gap: 6px; padding: 10px; margin-bottom: 8px; background: var(--card-2); border-radius: var(--radius); border: 1px solid var(--border); max-height: 140px; overflow-y: auto; }
.comment-picker.open { display: flex; }
.comment-picker-item { font-size: 20px; padding: 6px; border-radius: 8px; cursor: pointer; line-height: 1; }
.comment-picker-item:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.comment-picker-item.sticker-item { font-size: 22px; }

/* ---- Competition prize / winner display ------------------------------------------ */
.prize-section { margin-top:16px; border-radius: var(--radius-lg); padding: 18px; position: relative; overflow: hidden; }
.prize-section.theme-a { background: linear-gradient(135deg, #3a1f0d, #5c2e0a); }
.prize-section.theme-b { background: linear-gradient(135deg, #1f2a3a, #123a4a); }
.prize-section.theme-c { background: linear-gradient(135deg, #2a1030, #4a1550); }
.prize-section.theme-d { background: linear-gradient(135deg, #0d2a1f, #0a5c3e); }
.prize-section::before, .prize-section::after { content:""; position:absolute; border-radius:50%; opacity:0.15; pointer-events:none; }
.prize-section::before { width:120px; height:120px; background:var(--gold, #ffc94a); top:-40px; right:-30px; }
.prize-section::after { width:80px; height:80px; background:#fff; bottom:-30px; left:-20px; }
.prize-title-row { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color: var(--gold, #ffc94a); margin-bottom:12px; position:relative; z-index:1; }
.prize-tier { display:flex; align-items:center; gap:12px; padding:9px 0; position:relative; z-index:1; animation: prizePop 0.5s ease both; }
.prize-tier + .prize-tier { border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.prize-tier:nth-child(2) { animation-delay: 0.08s; }
.prize-tier:nth-child(3) { animation-delay: 0.16s; }
.prize-medal { font-size:30px; flex-shrink:0; animation: prizeBounce 2.2s ease-in-out infinite; }
.prize-tier-title { font-size:18px; font-weight:900; color:#fff; line-height:1.25; }
.prize-tier-desc { font-size:12.5px; color:rgba(255,255,255,0.75); margin-top:2px; }
@keyframes prizePop { from { opacity:0; transform: translateY(10px) scale(0.92); } to { opacity:1; transform: translateY(0) scale(1); } }
@keyframes prizeBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.winner-section { margin-top:16px; text-align:center; padding:28px 16px; border-radius: var(--radius-lg); background: linear-gradient(160deg, #241300, #402000); position:relative; overflow:hidden; }
.winner-confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.winner-confetti-piece { position:absolute; top:-20px; font-size:18px; animation: confettiFall 3.6s linear infinite; opacity:0.85; }
@keyframes confettiFall { 0% { transform: translateY(-20px) rotate(0deg); opacity:0; } 10% { opacity:1; } 100% { transform: translateY(240px) rotate(360deg); opacity:0; } }
.winner-crown { font-size:44px; display:inline-block; animation: prizeBounce 1.8s ease-in-out infinite; position:relative; z-index:1; }
.winner-heading { font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; color: var(--gold, #ffc94a); margin-top:6px; position:relative; z-index:1; }
.winner-name { font-size:22px; font-weight:900; color:#fff; margin-top:6px; position:relative; z-index:1; }
.winner-podium { display:flex; justify-content:center; gap:16px; margin-top:20px; position:relative; z-index:1; }
.podium-slot { display:flex; flex-direction:column; align-items:center; gap:4px; }
.podium-slot .medal { font-size:28px; }
.podium-slot .name { font-size:11.5px; font-weight:700; color:#fff; max-width:80px; text-align:center; }
.entry-rank.medal-1, .entry-rank.medal-2, .entry-rank.medal-3 { background: none; font-size:20px; }

/* ---- Embeds (Instagram / YouTube) ------------------------------------------------ */
.embed-wrap { border-radius: var(--radius); overflow: hidden; margin: 10px 0; background: var(--card-2); }
.embed-youtube { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.embed-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-instagram { max-width: 100%; }
.embed-instagram blockquote.instagram-media { max-width: 100% !important; min-width: 0 !important; }
/* Direct Instagram /embed/ iframe (see embeds.js) - plays the post/reel's
   video right there instead of the official widget's "View this post" /
   in-card play button, which opens instagram.com in a new tab. */
.embed-instagram-frame { position: relative; width: 100%; }
.embed-instagram-frame.reel { aspect-ratio: 9 / 16; max-height: 70vh; }
.embed-instagram-frame.post { aspect-ratio: 4 / 5; }
.embed-instagram-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-action-row { display: flex; gap: 8px; margin: 8px 0 4px; }

/* ---- Reels multi-tap heart burst ------------------------------------------------ */
.heart-burst-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 5; }
.heart-burst {
  position: absolute; font-size: 46px; transform: translate(-50%, -50%) scale(0.4);
  animation: heartBurst 900ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
@keyframes heartBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(var(--rot, 0deg)); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(var(--rot, 0deg)); }
  35% { transform: translate(-50%, -50%) scale(1) rotate(var(--rot, 0deg)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 90px)) scale(0.8) rotate(var(--rot, 0deg)); }
}

/* ---- Toast --------------------------------------------------------------------- */
#toast-host { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; width: calc(100% - 32px); max-width: 448px; pointer-events: none; }
.toast {
  background: var(--card); border: 1px solid var(--border);
  padding: 12px 16px; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; text-align: center;
  box-shadow: var(--shadow-card);
  opacity: 0; transform: translateY(-10px);
  transition: opacity 0.25s, transform 0.25s;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { border-color: rgba(22,212,146,0.4); color: var(--green); }
.toast-error { border-color: rgba(255,77,109,0.4); color: var(--red); }

/* ---- Install-to-Home-Screen / notification-permission banner ------------------- */
.install-app-banner {
  position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(420px, calc(100% - 24px));
  background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius); padding: 14px 14px;
  display: flex; align-items: center; gap: 12px;
  z-index: 250;
}
.install-app-icon img { width: 42px; height: 42px; border-radius: 12px; display: block; }
.install-app-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.install-app-text strong { color: var(--text); font-size: 13.5px; }
.install-app-text span { color: var(--text-dim); font-size: 11.5px; line-height: 1.4; }
.install-app-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.install-app-close {
  background: none; border: none; color: var(--text-faint);
  font-size: 16px; cursor: pointer; padding: 6px;
}
@media (max-width: 380px) {
  .install-app-banner { flex-wrap: wrap; }
  .install-app-text { order: 1; width: calc(100% - 54px); }
  .install-app-actions { order: 2; width: 100%; justify-content: flex-end; margin-top: 6px; }
}

/* ---- Misc ---------------------------------------------------------------------- */
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.empty-state { text-align: center; padding: 50px 20px; color: var(--text-faint); }
/* Icon badge: the glyph is a Font Awesome <i>, not an emoji, so it needs its
   own plate to keep the weight the emoji used to carry. */
.empty-state .ic {
  font-size: 26px; margin: 0 auto 14px;
  width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold);
}
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.25); border-top-color: #241300;
  animation: spin 0.7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.row-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap { display: flex; align-items: center; gap: 8px; }

/* ---- Chat attachments: full-screen image viewer + generic file chip ------------- */
.media-viewer-backdrop {
  position: fixed; inset: 0; background: rgba(4,3,10,0.92); z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.media-viewer-content { max-width: 100%; max-height: 90vh; border-radius: 10px; object-fit: contain; }
.media-viewer-close {
  position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: none; color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.chat-file-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px;
  background: var(--card-2); border: 1.5px solid var(--border); color: var(--text); font-size: 13px;
  text-decoration: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-deleted { font-style: italic; opacity: 0.6; }
.chat-media-wrap { position: relative; display: inline-block; }
.chat-dl-btn {
  position: absolute; bottom: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(4,3,10,0.65); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; text-decoration: none;
}
.chat-forwarded-tag {
  display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text-faint);
  font-style: italic; margin-bottom: 3px;
}
.chat-reply-quote {
  border-left: 3px solid var(--gold); padding: 4px 8px; margin-bottom: 5px; border-radius: 4px;
  background: color-mix(in srgb, var(--text) 4%, transparent); font-size: 12px; color: var(--text-dim);
}
.chat-reply-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px;
  background: var(--card-2); border-radius: 10px; margin: 8px 0; border-left: 3px solid var(--gold);
}
.chat-reply-preview { font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply-banner button { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 15px; }

.chat-emoji-popover {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 6px; display: grid;
  grid-template-columns: repeat(5, 1fr); gap: 4px; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 50;
}
.chat-emoji-popover button { background: none; border: none; font-size: 20px; cursor: pointer; padding: 4px; border-radius: 6px; }
.chat-emoji-popover button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }

.chat-ctx-menu-backdrop {
  position: fixed; inset: 0; background: rgba(4,3,10,0.6); z-index: 310;
  display: flex; align-items: flex-end; justify-content: center; padding: 0;
}
.chat-ctx-menu {
  width: 100%; max-width: 420px; background: var(--card); border-radius: 18px 18px 0 0;
  padding: 10px; display: flex; flex-direction: column; box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
}
.chat-ctx-menu-title { font-size: 12px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; padding: 8px 12px 4px; }
.chat-ctx-menu button {
  display: flex; align-items: center; gap: 10px; background: none; border: none; color: var(--text);
  font-size: 15px; padding: 14px 12px; text-align: left; cursor: pointer; border-radius: 10px;
}
.chat-ctx-menu button:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.chat-ctx-menu button.danger { color: var(--red); }

/* ---- Desktop app shell ----------------------------------------------------
   Below 900px the app is a single mobile column (with the 560px phone-mockup
   frame above). At 900px+ it becomes a real desktop layout: a left sidebar
   nav replaces the bottom tab bar, content is capped to a readable column
   width instead of stretching edge-to-edge, and a footer appears where the
   bottom nav used to sit. See js/app.js's sidenav wiring + js/theme.js's
   pluralized .brand patching (a second .brand now exists in the sidebar). */
#sidenav, #desktop-footer { display: none; }

@media (min-width: 900px) {
  body { padding: 20px 0; }

  #app-frame {
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    max-width: 1180px;
    margin: 0;
    border: none;
    border-radius: var(--radius-lg);
  }

  #sidenav {
    display: flex;
    flex-direction: column;
    width: 240px;
    flex-shrink: 0;
    padding: 20px 14px;
    gap: 4px;
    background: var(--bg-elev);
    border-right: 1px solid var(--border);
    overflow-y: auto;
  }
  .sidenav-brand { padding: 4px 10px 20px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
  .sidenav-btn {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border-radius: var(--radius);
    font-size: 14px;
  }
  .sidenav-btn .ic { font-size: 19px; }
  .sidenav-btn:hover { background: var(--card); color: var(--text); }
  .sidenav-btn.active { background: rgba(255,201,74,0.1); color: var(--gold); transform: none; }
  .sidenav-upload-btn { margin-top: auto; }

  /* (the flex column itself is set unconditionally near #app-frame) */

  /* Reels hides #topbar on mobile for full-bleed immersion (see app.js's
     updateChrome) - at desktop the sidenav doesn't carry Wallet/Search, so
     that would strand a desktop visitor on Reels with no way to reach them.
     Force it visible regardless of route here. */
  #topbar { display: flex !important; justify-content: flex-end; }
  /* The sidenav already carries the app/partner identity prominently - the
     topbar's own .brand (and each Reels card's own .reel-topbar .brand
     overlay, meant to stand in for the topbar on mobile where it's hidden)
     become redundant duplicates once a sidenav is visible, so hide both
     rather than showing the same name/logo three times on one screen. */
  #topbar .brand, .reel-topbar .brand { display: none; }
  .reel-topbar { justify-content: flex-end; }
  /* app.js unconditionally re-sets bottomNav.style.display="flex" inline on
     every route change - only !important beats an inline style. */
  #bottomnav { display: none !important; }
  #view-root { padding-bottom: 24px; } /* was 90px, clearing a bottomnav that no longer exists here */

  .view { max-width: 680px; margin: 0 auto; width: 100%; }
  /* Reels alone stays full-bleed - competitions/{id} and groups/{id} also
     carry .no-pad (they hand-roll their own padding) but are normal reading
     content that should still get the 680px cap, so they're deliberately
     excluded from this override. See js/app.js's "reels-view" class. */
  .view.reels-view { max-width: none; margin: 0; }
  /* Same reasoning as Reels: the paid chat and the Wenye Ushawishi
     storefront paint their own full-width layouts, so squeezing them into the
     reading column left dead space on the right instead of centring them. */
  .view.icons-shell { max-width: none; margin: 0; }
  .view.pchat-shell { height: 100%; padding-bottom: 0; }
  .pchat { max-width: 900px; margin: 0 auto; width: 100%; }
  .studio-money, .studio-panel, .studio-threads, .icons-search { max-width: 900px; margin-left: auto; margin-right: auto; }
  .icons-view .icons-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); max-width: 1180px; margin: 0 auto; }
  .ent-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); max-width: 1180px; margin: 0 auto; }
  .ent-hero { max-width: 1180px; margin-left: auto; margin-right: auto; min-height: 360px; }
  .ent-hero-inner h2 { font-size: 42px; }
  .icons-foot, .wallet-earning { max-width: 1180px; margin-left: auto; margin-right: auto; }
  .wallet-stage { border-radius: 0 0 30px 30px; }
  .prof-stage { border-radius: 0 0 30px 30px; padding-top: 44px; }
  .prof-stage-inner, .prof-numbers, .prof-tools, .prof-studio,
  .prof > .section-title, .prof .video-grid, .prof > .profile-dashboard-grid,
  .prof > #my-groups-list { max-width: 1180px; margin-left: auto; margin-right: auto; }
  .prof .video-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .inv-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); max-width: 1180px; margin: 0 auto; }
  .inv-split, .inv-form, .inv-examples, .inv-modes { max-width: 1180px; margin-left: auto; margin-right: auto; }
  .inv-hero { min-height: 320px; }
  .bl-hero { min-height: 540px; }
  .bl-hero-inner, .bl-section, .bl-closing { max-width: 1180px; margin-left: auto; margin-right: auto; }
  .bl-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .bl-paths { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .fursa-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); max-width: 1180px; margin: 0 auto; }
  .fursa-person, .fursa-facts, .fursa-cta, .fursa-portfolio, .inv-board-entry { max-width: 900px; margin-left: auto; margin-right: auto; }
  .icons-view .icons-head, .icons-view .icons-chips { max-width: 1180px; margin-left: auto; margin-right: auto; }
  .icon-hero { max-width: 1180px; margin-left: auto; margin-right: auto; min-height: 560px; }
  .icon-hero-name { font-size: 46px; }
  .icon-page .icon-cover { min-height: 640px; }
  .icon-page .icon-cover-text, .icon-page .icon-intro, .icon-page .icon-bio,
  .icon-page .icon-section-title, .icon-page .icon-pkgs, .icon-page .icon-promise { max-width: 900px; margin-left: auto; margin-right: auto; }
  .icon-page .icon-pkgs { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }

  #desktop-footer {
    display: flex; flex-shrink: 0; align-items: center; justify-content: center;
    gap: 18px; flex-wrap: wrap;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    font-size: 12px; color: var(--text-faint);
  }
  #desktop-footer a { color: var(--text-dim); }
  #desktop-footer a:hover { color: var(--gold); }

  .video-grid    { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .provider-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

  /* ---- Phase 2: per-view desktop reflows ---------------------------------- */
  .group-card-desc, .profile-bio, .profile-hype-banner { max-width: none; }

  #comps-list, #groups-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
  }
  #comps-list .comp-card, #groups-list .group-card { margin-bottom: 0; }
  #comps-list .empty-state, #groups-list .empty-state { grid-column: 1 / -1; }

  .gd-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

  .profile-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }

  /* ---- Reels: TikTok-style centered video card + action rail ---------------
     Two things were wrong on desktop. First, #reels-scroller/.reel are sized
     at 100dvh - correct on mobile where the app IS the viewport, but here
     they sit under #topbar and above #desktop-footer inside a padded shell,
     so a full-viewport-tall reel overflowed its own container and left a
     dead band below the video. Both now fill their real container instead.
     Second, the video and its overlay chrome each stretched the full width
     independently, so nothing lined up. Now the video is a portrait card of
     a fixed width, the action buttons form a rail immediately to its right,
     the caption sits over the card's bottom edge (same as mobile, same as
     TikTok), and the blurred backdrop fills everything around them. */
  #app-frame { height: calc(100vh - 40px); min-height: 0; }
  #view-root:has(.reels-view) { padding-bottom: 0; }
  /* #view-root is a flex:1 item of a fixed-height column, so its own height is
     definite - which is what lets these two percentage heights resolve
     instead of collapsing to content height. */
  .view.reels-view { height: 100%; }
  #reels-scroller { height: 100%; }
  .reel {
    height: 100%;
    --reel-card-w: 420px;
    --reel-rail-w: 76px;
    --reel-gap: 10px;
    --reel-pad-y: 16px;
    /* How far the card sits left of dead centre so that card + rail together
       are what's actually centred in the available space. */
    --reel-shift: calc((var(--reel-rail-w) + var(--reel-gap)) / 2);
    /* Extra leftward push applied to the whole stage (card, chrome, caption
       and rail alike) when the comments panel takes over the right side. */
    --reel-nudge: 0px;
  }

  .reel-main-video, .reel-topbar {
    left: 50%;
    right: auto;
    width: var(--reel-card-w);
    transform: translateX(calc(-50% - var(--reel-shift) - var(--reel-nudge)));
  }
  .reel-main-video {
    top: var(--reel-pad-y);
    /* A <video> is a replaced element: with height:auto it takes its own
       intrinsic height and ignores `bottom` entirely, so the card has to be
       sized explicitly rather than stretched between top and bottom. */
    bottom: auto;
    height: calc(100% - (var(--reel-pad-y) * 2));
    border-radius: var(--radius-lg);
  }
  .reel-topbar { top: var(--reel-pad-y); padding: 12px 14px; }
  /* The main #topbar (forced visible on Reels at desktop, see above) already
     shows a wallet chip - this per-card one becomes a redundant duplicate. */
  .reel-topbar .wallet-chip { display: none; }
  .reel-scrub-track {
    left: calc(50% - (var(--reel-card-w) / 2) - var(--reel-shift) - var(--reel-nudge));
    top: calc(var(--reel-pad-y) + 54px);
    bottom: calc(var(--reel-pad-y) + 150px);
  }

  .reel-content {
    left: 50%;
    right: auto;
    width: calc(var(--reel-card-w) + var(--reel-gap) + var(--reel-rail-w));
    max-width: none;
    transform: translateX(calc(-50% - var(--reel-nudge)));
    gap: var(--reel-gap);
    padding: 0 0 calc(var(--reel-pad-y) + 14px);
  }
  /* Readability veil follows the card, not the whole row - it must not run
     under the action rail, which sits over plain backdrop. */
  .reel-content::before {
    right: calc(var(--reel-rail-w) + var(--reel-gap));
    height: 180px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  .reel-info { padding: 0 14px; }
  .reel-actions { width: var(--reel-rail-w); flex-shrink: 0; }

  /* ---- Reels comments: right-side panel instead of a centered bottom sheet -
     tagged only on the comments modal specifically (see reels.js's
     openCommentsModal) - every other modal in the app (deposit, edit
     profile, hype message, etc.) keeps its normal centered bottom-sheet
     look untouched, both on mobile and desktop. The max-width/margin pair
     lines its right edge up with #app-frame's rather than the viewport's, so
     it lands exactly over the details panel it's replacing. */
  .modal-backdrop.reel-comments-modal {
    justify-content: flex-end;
    align-items: stretch;
    max-width: 1180px;
    margin: 0 auto;
    /* Matches body's own desktop padding so the panel lines up with the
       top and bottom edges of #app-frame instead of the raw viewport. */
    padding: 20px 0;
    /* No dimming veil - the video keeps playing beside the panel rather than
       sitting behind a scrim, and the reel shifts left to stay clear of it
       (see the --reel-shift override below). */
    background: transparent;
    backdrop-filter: none;
  }
  /* While comments are open, re-centre the card + action rail in what's left
     of the space instead of leaving them half-hidden under the panel. */
  body:has(.reel-comments-modal) .reel { --reel-nudge: 170px; }
  .reel-comments-modal .modal-sheet {
    width: 340px; max-width: 340px;
    height: 100%; max-height: 100%;
    border-radius: 0;
    border-width: 0 0 0 1px;
    animation: slideInRight 0.2s ease;
  }
  .reel-comments-modal .modal-handle { display: none; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* ==========================================================================
   Editorial pass over the app chrome
   --------------------------------------------------------------------------
   The palette itself moved in :root; this block is the shape and weight that
   goes with it - calmer borders, wider radii, eyebrow-style section titles,
   and a topbar/nav that recede instead of competing with the content. It sits
   at the end of the file deliberately: later rules win, and that is how these
   override the component defaults declared further up without having to edit
   each one in place.
   ========================================================================== */

/* ---- Section headings read as eyebrows, like the personality pages ------- */
.section-title {
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.01em;
}
.section-title.small {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}

/* ---- Surfaces ------------------------------------------------------------ */
.card, .comp-card, .group-card, .stat-box, .pcard {
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: none;
}
.card:hover, .comp-card:hover, .group-card:hover { border-color: rgba(255,255,255,0.16); }

.stat-box {
  background: color-mix(in srgb, var(--text) 3%, transparent);
  padding: 14px 10px;
}
.stat-box .n { font-family: 'Poppins', sans-serif; font-weight: 800; }
.stat-box .l {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.btn-primary { color: #12100c; }
.btn-ghost {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ---- Pills and chips ----------------------------------------------------- */
.pill, .chip-opt {
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.chip-opt {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.chip-opt.selected {
  background: var(--text);
  border-color: var(--text);
  color: #111;
}

/* ---- Top bar: quieter, with a hairline instead of a slab ----------------- */
#topbar {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.wallet-chip {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 700;
  font-size: 12.5px;
}
.wallet-chip:hover { border-color: var(--gold); }

/* ---- Bottom nav / sidenav ------------------------------------------------ */
#bottomnav {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
}
.nav-btn { color: var(--text-faint); }
.nav-btn span:last-child {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.nav-btn.active { color: var(--gold); }
/* The active tab gets a small bar above it rather than a filled pill - the
   same "quiet chrome, loud content" idea as the topbar. */
.nav-btn.active::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 20px; height: 2px; border-radius: 999px;
  background: var(--gold); transform: translateX(-50%);
}
.nav-btn { position: relative; }
.nav-btn.fab::before { display: none; }

#sidenav { border-right: 1px solid var(--border); background: var(--bg-elev); }
.sidenav-btn {
  border-radius: 14px;
  color: var(--text-dim);
  font-weight: 600;
}
.sidenav-btn.active {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--gold);
}
.sidenav-btn.active::before { display: none; }

/* ---- Wallet ------------------------------------------------------------- */
.wallet-hero, .balance-card {
  border-radius: 26px;
  border: 1px solid var(--border);
}
.wallet-hero .amount, .balance-card .amount {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---- Modals -------------------------------------------------------------- */
.modal-sheet {
  border-radius: 26px 26px 0 0;
  border: 1px solid var(--border);
  background: var(--bg-elev);
}
.modal-handle { background: rgba(255,255,255,0.18); }

/* ---- Themed alert / confirm / prompt (js/dialog.js) ----------------------
   Replaces the browser's own dialogs, which rendered in OS chrome and read as
   a browser warning rather than as part of the app - especially wrong on a
   payment confirmation. */
.app-dialog-backdrop {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(4, 4, 8, 0.72);
  backdrop-filter: blur(6px);
  animation: appDialogIn 0.16s ease;
}
.app-dialog-backdrop.closing { animation: appDialogOut 0.14s ease forwards; }
@keyframes appDialogIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes appDialogOut { to { opacity: 0; } }

.app-dialog {
  width: min(92vw, 400px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  animation: appDialogPop 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes appDialogPop {
  from { transform: scale(0.94) translateY(10px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.app-dialog-title {
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 18px;
  margin: 0 0 8px; letter-spacing: -0.01em;
}
.app-dialog-msg {
  color: var(--text-dim); font-size: 13.5px; line-height: 1.6; margin: 0;
}
.app-dialog-input {
  display: block; width: 100%; margin-top: 14px;
  background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px;
  color: var(--text); font-family: inherit; font-size: 14px; outline: none;
}
.app-dialog-input:focus { border-color: var(--gold); }
.app-dialog-actions {
  display: flex; gap: 10px; margin-top: 20px;
}
.app-dialog-btn {
  flex: 1; border: 0; border-radius: 999px; padding: 13px 16px;
  font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.app-dialog-btn.solid  { background: var(--grad-brand); color: #12100c; }
.app-dialog-btn.danger { background: var(--red); color: #fff; }
.app-dialog-btn.ghost  {
  background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text);
  border: 1px solid var(--border);
}
.app-dialog-btn:active { transform: scale(0.98); }

/* ---- Portrait framing ----------------------------------------------------
   A personality's photo is a portrait; the hero and cover are much wider than
   they are tall, so "cover" zooms in hard and object-position decides which
   slice survives. Anchored near the top of the frame but not AT it, which is
   what was slicing foreheads off, and the frames themselves are taller at
   desktop where the aspect mismatch is worst. */
.icon-hero-bg { object-position: center 18%; }
.icon-cover img { object-position: center 16%; }

/* ==========================================================================
   Entertainment surfaces - Mashindano, Vikundi, Pochi
   --------------------------------------------------------------------------
   Same language as the Wenye Ushawishi pages: a marquee at the top, poster
   cards below, each carrying its own --ic-accent / --ic-deep (assigned from
   the record's own id in the view, so nothing needs a designer per item).
   ========================================================================== */

.ent-grid {
  display: grid; gap: 14px; padding: 0 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
}

.ent-card {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); border-radius: 24px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--ic-deep, #15161d) 85%, transparent), #101014);
  transition: transform 0.16s, border-color 0.16s;
}
.ent-card:hover { transform: translateY(-3px); border-color: var(--ic-accent, #e7c06b); }

/* The art block: a big emoji floating on the item's own colour wash. It
   replaces the old tiny "emoji-badge", which read as an icon rather than as
   artwork. */
.ent-art {
  position: relative; height: 128px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--ic-accent, #e7c06b) 30%, transparent), transparent 70%),
    var(--ic-deep, #15161d);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
}
.ent-emoji { font-size: 58px; line-height: 1; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.5)); }

.ent-badge {
  font-size: 9.5px; letter-spacing: 0.16em; font-weight: 800; text-transform: uppercase;
  color: #12100c; background: var(--ic-accent, #e7c06b);
  padding: 4px 9px; border-radius: 6px; white-space: nowrap;
}
.ent-art .ent-badge { position: absolute; top: 12px; left: 12px; }
.ent-badge.soft {
  background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-dim);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); letter-spacing: 0.1em;
}

.ent-body { padding: 16px; }
.ent-body h3 {
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 17px;
  margin: 10px 0 0; letter-spacing: -0.015em; line-height: 1.2;
}
.ent-body > p {
  color: var(--text-dim); font-size: 12.5px; line-height: 1.55; margin: 7px 0 0;
}
.ent-row { display: flex; gap: 8px; flex-wrap: wrap; }

.ent-prize {
  border-left: 2px solid var(--ic-accent, #e7c06b); padding-left: 10px;
}
.ent-prize small {
  display: block; font-size: 9px; letter-spacing: 0.2em; font-weight: 800;
  color: var(--ic-accent, #e7c06b);
}
.ent-prize strong {
  display: block; font-family: 'Poppins', sans-serif; font-size: 15px; margin-top: 3px;
}

.ent-stats {
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px;
  padding-top: 13px; border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
}
.ent-stat small {
  display: block; font-size: 9px; letter-spacing: 0.14em; font-weight: 700;
  text-transform: uppercase; color: var(--text-faint);
}
.ent-stat b { display: block; font-family: 'Poppins', sans-serif; font-size: 14px; margin-top: 2px; }
.ent-stats.light { border-top-color: rgba(255,255,255,0.14); }

.ent-actions { margin-top: 14px; display: flex; gap: 9px; flex-wrap: wrap; }
.icon-btn-solid.sm, .icon-btn-ghost.sm { padding: 8px 16px; font-size: 12px; }
.icon-btn-solid[disabled], .icon-btn-ghost[disabled] { opacity: 0.45; cursor: default; }

.ent-hype {
  font-size: 12px; color: var(--ic-accent, #e7c06b); line-height: 1.5;
  margin-bottom: 10px; padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--ic-accent, #e7c06b) 50%, transparent);
}

/* Rotation progress - the single most useful thing on a group card, so it
   gets its own panel rather than being one more row of small print. */
.ent-turn {
  margin-top: 14px; padding: 12px; border-radius: 16px;
  background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
}
.ent-turn-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ent-turn-top small {
  display: block; font-size: 9px; letter-spacing: 0.18em; font-weight: 800;
  color: var(--ic-accent, #e7c06b);
}
.ent-turn-top strong { display: block; font-size: 14px; margin-top: 2px; }
.ent-bar {
  height: 6px; border-radius: 999px; margin: 11px 0 8px;
  background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden;
}
.ent-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--ic-accent, #e7c06b); transition: width 0.4s ease;
}
.ent-turn-foot { font-size: 11.5px; color: var(--text-dim); }

/* ---- The marquee at the top of a list ------------------------------------ */
.ent-hero {
  position: relative; overflow: hidden;
  margin: 0 14px 22px; border-radius: 26px; min-height: 300px;
  display: flex; align-items: flex-end;
  background:
    radial-gradient(90% 120% at 82% 12%, color-mix(in srgb, var(--ic-accent, #e7c06b) 34%, transparent), transparent 62%),
    var(--ic-deep, #15161d);
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
}
.ent-hero-emoji {
  position: absolute; right: -10px; top: 6px;
  font-size: 190px; line-height: 1; opacity: 0.28;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6));
  pointer-events: none;
}
.ent-hero-inner { position: relative; z-index: 1; padding: 22px 20px; width: 100%; }
.ent-hero-inner h2 {
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 30px;
  line-height: 1.02; letter-spacing: -0.03em; margin: 12px 0 0;
}
.ent-hero-prize { font-size: 13px; color: var(--text); margin: 10px 0 0; }
.ent-hero-prize strong { color: var(--ic-accent, #e7c06b); }
.ent-hero-sub {
  color: var(--text-dim); font-size: 12.5px; line-height: 1.6;
  margin: 8px 0 0; max-width: 46ch;
}
.ent-hero .icon-btn-solid { margin-top: 16px; }

.icons-foot { padding: 22px 16px 0; text-align: center; }

/* ---- Pochi ---------------------------------------------------------------
   The balance is the whole screen's reason to exist, so it is set as a
   display number rather than as a line inside a card. */
.wallet-stage {
  text-align: center; padding: 34px 20px 26px; margin: 0 0 18px;
  background:
    radial-gradient(110% 130% at 50% 0%, rgba(231,192,107,0.16), transparent 62%),
    var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.wallet-amount {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: clamp(38px, 12vw, 56px); line-height: 1; letter-spacing: -0.035em;
  margin: 10px 0 20px;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.wallet-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.wallet-earning {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0 16px 18px; padding: 16px 18px; border-radius: 20px;
  background: linear-gradient(140deg, rgba(22,212,146,0.16), var(--card));
  border: 1px solid rgba(22,212,146,0.3);
}
.wallet-earning small {
  display: block; font-size: 9px; letter-spacing: 0.18em; font-weight: 800; color: var(--green);
}
.wallet-earning strong {
  display: block; font-family: 'Poppins', sans-serif; font-size: 22px; margin-top: 3px;
}

/* ==========================================================================
   Wasifu - the cinematic profile
   --------------------------------------------------------------------------
   The old header was a centred avatar over flat background with three grey
   stat boxes under it. This makes the person's own picture the set: blurred
   and scaled as a backdrop, their accent colour washing through it, and the
   numbers set as an editorial strip rather than as boxes.
   ========================================================================== */
.prof { background: var(--bg); padding-bottom: 28px; }

.prof-stage {
  position: relative; overflow: hidden;
  padding: 34px 20px 26px; text-align: center;
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--ic-accent, #e7c06b) 26%, transparent), transparent 66%),
    var(--ic-deep, #15161d);
  border-bottom: 1px solid var(--border);
}
/* The backdrop is the same photo, pushed far out of focus - it reads as
   lighting and colour rather than as a second copy of the avatar. */
.prof-bg {
  position: absolute; inset: -20%; width: 140%; height: 140%;
  object-fit: cover; filter: blur(46px) saturate(1.3); opacity: 0.55;
}
.prof-stage-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,12,0.25) 0%, rgba(8,8,12,0.55) 55%, var(--bg) 100%);
}
.prof-stage-inner { position: relative; z-index: 1; }

.prof-avatar {
  width: 112px; height: 112px; margin: 0 auto 14px;
  border-radius: 38px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 46px; line-height: 1;
  background: var(--ic-deep, #15161d);
  border: 2px solid color-mix(in srgb, var(--ic-accent, #e7c06b) 70%, transparent);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
}
.prof-avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; }

.prof-stage-inner h1 {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: clamp(26px, 8vw, 36px); line-height: 1.05; letter-spacing: -0.03em;
  margin: 0;
}
.prof-sub {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin-top: 10px; font-size: 11.5px; color: var(--text-dim);
}
.prof-sub span {
  background: color-mix(in srgb, var(--text) 7%, transparent); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 999px; padding: 4px 11px;
}
.prof-verified {
  color: #12100c !important;
  background: var(--ic-accent, #e7c06b) !important;
  border-color: transparent !important;
  font-weight: 800; letter-spacing: 0.06em;
}
.prof-bio {
  color: var(--text-dim); font-size: 13px; line-height: 1.6;
  margin: 14px auto 0; max-width: 44ch;
}

.prof-counts {
  display: flex; justify-content: center; gap: 30px; margin-top: 20px;
}
.prof-counts b {
  display: block; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 20px;
}
.prof-counts small {
  display: block; margin-top: 2px; font-size: 9px; letter-spacing: 0.16em;
  font-weight: 700; text-transform: uppercase; color: var(--text-faint);
}
.prof-cta { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

/* The owner's own money/activity line - a strip, not three boxes. */
.prof-numbers {
  display: flex; gap: 26px; flex-wrap: wrap;
  margin: 0 16px; padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.prof-studio {
  display: flex; align-items: center; gap: 14px; text-align: left;
  margin: 18px 0 0; padding: 16px 18px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--ic-accent, #e7c06b) 45%, transparent);
  border-radius: 20px; color: inherit; font-family: inherit;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ic-accent, #e7c06b) 20%, transparent), var(--card));
}
.prof-studio-ic {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--ic-accent, #e7c06b); color: #12100c;
}
.prof-studio span:nth-child(2) { flex: 1; min-width: 0; }
.prof-studio strong { display: block; font-family: 'Poppins', sans-serif; font-size: 15px; }
.prof-studio small { display: block; color: var(--text-dim); font-size: 11.5px; margin-top: 2px; }
.prof-studio-go { color: var(--ic-accent, #e7c06b); font-size: 19px; }

.prof-tools {
  display: flex; gap: 9px; flex-wrap: wrap; margin: 18px 0 4px;
}
.icon-btn-ghost.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.icon-btn-ghost.danger:hover { border-color: var(--red); color: var(--red); }

/* Everything below the stage shares the page gutter. */
.prof > .profile-dashboard-grid,
.prof > .prof-tools,
.prof > .prof-studio,
.prof > .section-title,
.prof > .video-grid,
.prof > .empty-state,
.prof > #my-groups-list,
.prof > .profile-hype-banner { margin-left: 16px; margin-right: 16px; }
.prof > .section-title { margin-top: 26px; margin-bottom: 12px; }

/* Video grid as posters rather than square tiles. */
.prof .video-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.prof .thumb {
  aspect-ratio: 9 / 14; border-radius: 18px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.prof .thumb:hover { border-color: var(--ic-accent, #e7c06b); }

/* ==========================================================================
   Wekeza Goodlife
   --------------------------------------------------------------------------
   Each sector carries its own --ic-accent / --ic-deep from js/investConfig.js,
   so a page about kilimo is green-lit and one about madini is gold-lit
   without any per-page CSS.
   ========================================================================== */
.inv-split {
  display: grid; gap: 12px; padding: 0 16px 6px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.inv-door {
  text-align: left; cursor: pointer; font-family: inherit; color: inherit;
  padding: 20px; border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: linear-gradient(150deg, rgba(231,192,107,0.14), var(--card));
  transition: border-color 0.15s, transform 0.15s;
}
.inv-door:hover { border-color: var(--gold); transform: translateY(-2px); }
.inv-door-ic { font-size: 28px; display: block; margin-bottom: 10px; }
.inv-door strong { display: block; font-family: 'Poppins', sans-serif; font-size: 16px; }
.inv-door small { display: block; color: var(--text-dim); font-size: 12px; line-height: 1.55; margin-top: 6px; }

.inv-grid { display: grid; gap: 12px; padding: 0 16px; }
.inv-card {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 0 16px 0 0; cursor: pointer; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); border-radius: 20px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--ic-deep) 90%, transparent), #101014);
  color: inherit; font-family: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.inv-card:hover { border-color: var(--ic-accent); transform: translateX(3px); }
.inv-art {
  width: 86px; flex-shrink: 0; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 120% at 50% 20%, color-mix(in srgb, var(--ic-accent) 34%, transparent), transparent 70%),
    var(--ic-deep);
  border-right: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
}
.inv-emoji { font-size: 34px; }
.inv-body { flex: 1; min-width: 0; padding: 16px 0; }
.inv-name { display: block; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 16px; }
.inv-tag { display: block; color: var(--text-dim); font-size: 12px; margin-top: 3px; line-height: 1.45; }
.inv-go { color: var(--ic-accent); font-size: 20px; flex-shrink: 0; }

/* ---- One sector's page --------------------------------------------------- */
.inv-page { background: var(--bg); }
.inv-hero {
  position: relative; overflow: hidden; min-height: 260px;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(90% 110% at 78% 14%, color-mix(in srgb, var(--ic-accent) 36%, transparent), transparent 64%),
    var(--ic-deep);
  border-bottom: 1px solid var(--border);
}
.inv-hero-emoji {
  position: absolute; right: -6px; bottom: -22px;
  font-size: 180px; line-height: 1; opacity: 0.3;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,0.6)); pointer-events: none;
}
.inv-hero-text { position: relative; z-index: 1; padding: 0 20px 22px; }
.inv-hero-text h1 {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: clamp(28px, 9vw, 40px); line-height: 1.03; letter-spacing: -0.03em;
  margin: 12px 0 0;
}
.inv-hero-tag { color: var(--ic-accent); font-size: 13.5px; font-weight: 600; margin: 8px 0 0; }

.inv-examples {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px 0;
}
.inv-examples span {
  font-size: 11.5px; color: var(--text-dim);
  background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  border-radius: 999px; padding: 6px 12px;
}
.inv-modes { padding-top: 20px; }
.inv-form { margin-bottom: 4px; }
.inv-form select {
  display: block; width: 100%; margin-top: 5px;
  background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 12px; padding: 11px 13px;
  color: var(--text); font-family: inherit; font-size: 13.5px; outline: none;
}
.inv-form select:focus { border-color: var(--ic-accent); }

.inv-done { text-align: center; padding: 34px 20px; }
.inv-done span {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--ic-accent); color: #12100c; font-size: 27px; font-weight: 800;
}
.inv-done h3 { font-family: 'Poppins', sans-serif; font-size: 19px; margin: 0 0 8px; }
.inv-done p { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin: 0; }

.inv-entry { --ic-accent: var(--green); margin: 22px 16px 0; }

/* ==========================================================================
   Fursa - the public investor / project board
   ========================================================================== */
.fursa-grid {
  display: grid; gap: 14px; padding: 0 16px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  align-items: start;
}
.fursa-card {
  display: flex; width: 100%; text-align: left; cursor: pointer; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); border-radius: 22px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--ic-deep) 88%, transparent), #101014);
  color: inherit; font-family: inherit; padding: 0;
  transition: transform 0.15s, border-color 0.15s;
}
.fursa-card:hover { transform: translateY(-3px); border-color: var(--ic-accent); }
.fursa-art {
  position: relative; width: 92px; flex-shrink: 0; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(130% 130% at 50% 18%, color-mix(in srgb, var(--ic-accent) 32%, transparent), transparent 72%),
    var(--ic-deep);
  border-right: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
}
.fursa-emoji { font-size: 36px; }
.fursa-kind {
  font-size: 8.5px; letter-spacing: 0.16em; font-weight: 800; white-space: nowrap;
  padding: 3px 7px; border-radius: 5px;
}
.fursa-art .fursa-kind { position: absolute; bottom: 8px; }
/* Two different answers to "which side is this?", so the board can be read at
   a glance without stopping to read the label. */
.fursa-kind.inv  { background: var(--green); color: #05170f; }
.fursa-kind.seek { background: var(--ic-accent, #e7c06b); color: #12100c; }

.fursa-body { flex: 1; min-width: 0; padding: 14px 15px; }
.fursa-sector {
  display: block; font-size: 9.5px; letter-spacing: 0.14em; font-weight: 700;
  text-transform: uppercase; color: var(--ic-accent, #e7c06b);
}
.fursa-title {
  display: block; font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: 15px; line-height: 1.2; margin-top: 5px;
}
.fursa-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: var(--text-dim); font-size: 12px;
  line-height: 1.5; margin-top: 6px;
}
.fursa-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
}
/* The name is who a visitor is actually trusting with their money, so it
   carries more visual weight than a footnote - bigger and full-strength
   text color, not dimmed like a caption. */
.fursa-who {
  display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1;
  font-size: 15px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fursa-who i {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ic-accent, #e7c06b); color: #12100c;
  font-style: normal; font-weight: 800; font-size: 13px;
}
.fursa-amount {
  flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--ic-accent, #e7c06b);
  border: 1px solid color-mix(in srgb, var(--ic-accent, #e7c06b) 45%, transparent);
  border-radius: 999px; padding: 3px 9px;
}

/* ---- One listing's page -------------------------------------------------- */
.fursa-page .inv-hero-text .fursa-kind { display: inline-block; margin-bottom: 10px; }
.fursa-person {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 20px 0; padding: 14px 16px;
  border-radius: 18px; background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.fursa-avatar {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ic-accent, #e7c06b); color: #12100c;
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 19px;
}
.fursa-person strong { display: block; font-size: 15px; }
.fursa-person small { display: block; color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.fursa-about { white-space: pre-wrap; }

.fursa-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 22px 20px 0;
}
.fursa-row {
  padding: 13px 15px; border-radius: 16px;
  background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.fursa-row small {
  display: block; font-size: 9px; letter-spacing: 0.16em; font-weight: 700;
  text-transform: uppercase; color: var(--text-faint);
}
.fursa-row strong { display: block; font-family: 'Poppins', sans-serif; font-size: 14px; margin-top: 4px; }

.fursa-portfolio { padding: 18px 20px 0; }
.fursa-cta { padding: 26px 20px 0; }

.inv-board-entry { --ic-accent: #9dbbd5; margin: 0 16px 20px; }
.inv-consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 16px 0 4px; font-size: 11.5px; line-height: 1.55; color: var(--text-dim);
}
.inv-consent input { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; accent-color: var(--ic-accent, #e7c06b); }
.inv-consent b { color: var(--text); }
.inv-areas { padding: 8px 0 0; }

/* ---- Native <select> dropdown lists -----------------------------------------
   The open list is painted by the browser, not by us: it gets a white popup
   background while its <option> text was inheriting the app's near-white
   --text, leaving the choices invisible until hovered (which is the one row
   the browser repaints itself). Declaring both colours on the options fixes
   it everywhere a select appears - Wekeza, the studio, deposits - rather than
   per form. The closed control keeps the dark app styling above. */
select option,
select optgroup {
  background-color: #ffffff;
  color: #111111;
}

/* An unclaimed personality page: visible, but nothing on it is for sale until
   the real person confirms (see functions/personalities/startPersonalitySession.js). */
.icon-pending {
  margin: 22px 16px 0; padding: 14px 16px; border-radius: 18px;
  background: rgba(224,116,138,0.1); border: 1px solid rgba(224,116,138,0.35);
}
.icon-pending strong { display: block; font-size: 13.5px; }
.icon-pending span { display: block; color: var(--text-dim); font-size: 12.5px; line-height: 1.55; margin-top: 5px; }
.icon-btn-ghost.full { display: block; width: 100%; padding: 12px; text-align: center; }

/* The share row on a personality / listing page - the action people are most
   likely to take after reading, so it sits above the report link and below
   the pitch rather than being buried in a menu. */
.icon-share { text-align: center; padding: 22px 20px 0; }
.icon-share button { width: 100%; max-width: 340px; }

/* Language switch, in the topbar so it is reachable on the very first screen
   a visitor from outside Tanzania lands on - usually a shared link, not a
   settings page. See js/i18n.js. */
.lang-toggle, .theme-toggle {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
  cursor: pointer;
}
.lang-toggle:hover, .theme-toggle:hover { border-color: var(--gold); color: var(--gold); }
.lang-toggle {
  padding: 7px 12px;
  font-family: inherit; font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.06em;
  margin-right: 8px;
}
.theme-toggle {
  width: 32px; height: 32px; margin-right: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}

/* Seven tabs rather than six: Wekeza was reachable only from the sidenav and
   the wallet, so on a phone - where most visitors are - it did not exist.
   Everything tightens a little to make room rather than hiding a whole
   section behind a "more" sheet. */
#bottomnav .nav-btn { padding-left: 2px; padding-right: 2px; min-width: 0; }
#bottomnav .nav-btn > span:last-child {
  font-size: 8.5px; letter-spacing: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
#bottomnav .nav-btn .ic { font-size: 17px; }
@media (max-width: 360px) {
  #bottomnav .nav-btn > span:last-child { font-size: 8px; }
}

/* ---- Icon fonts -------------------------------------------------------------
   Emoji were replaced with Font Awesome glyphs: emoji render as a different
   picture on every OS, carry their own colour that fights the accent, and sit
   on a different baseline to the type beside them. These rules give the new
   icons the sizes the emoji used to occupy. */
.inv-icon { font-size: 30px; color: var(--ic-accent, #e7c06b); }
.inv-hero-emoji { font-size: 150px; color: var(--ic-accent, #e7c06b); }
.fursa-emoji { font-size: 32px; color: var(--ic-accent, #e7c06b); }
.inv-door-ic { display: block; font-size: 25px; margin-bottom: 12px; color: var(--gold); }
.icons-chip i, .inv-examples i { margin-right: 5px; opacity: 0.85; }
.icons-search i { color: var(--text-faint); font-size: 14px; }
.icon-hero-star { font-size: 16px; vertical-align: super; margin-left: 7px; color: var(--ic-accent, #e7c06b); }
.icon-pkg-live i { font-size: 7px; vertical-align: middle; margin-right: 4px; }
.prof-verified i, .prof-sub i { margin-right: 4px; }
.icon-promise i, .studio-note i { margin-right: 5px; }
.icon-btn-solid i, .icon-btn-ghost i { margin-left: 6px; }
.icon-btn-solid i.fa-share-nodes, .icon-btn-ghost i.fa-share-nodes { margin-left: 0; margin-right: 7px; }
.inv-done span i { font-size: 24px; }

/* ==========================================================================
   Partner landing page (js/views/brandLanding.js)
   --------------------------------------------------------------------------
   A partner's front door on their own domain. Reads --gold / --bg from
   whatever brand js/theme.js has applied, so it is their page without a
   single hardcoded colour.
   ========================================================================== */
.bl { background: var(--bg); color: var(--text); padding-bottom: 30px; }

.bl-hero {
  position: relative; overflow: hidden;
  min-height: 460px; display: flex; align-items: center;
  border-bottom: 1px solid var(--border);
}
.bl-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bl-hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 6%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.2) 100%),
    linear-gradient(0deg, var(--bg) 2%, rgba(0,0,0,0) 45%);
}
.bl-hero-inner { position: relative; z-index: 1; padding: 34px 20px; width: 100%; }
.bl-eyebrow {
  font-size: 10.5px; letter-spacing: 0.24em; font-weight: 800; color: var(--gold);
}
.bl-hero-inner h1 {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: clamp(32px, 10vw, 54px); line-height: 1.02; letter-spacing: -0.035em;
  margin: 10px 0 0;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bl-tagline { font-size: 15px; font-weight: 600; margin: 12px 0 0; }
.bl-sub { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin: 8px 0 0; max-width: 46ch; }
.bl-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.bl-fine { color: var(--text-faint); font-size: 11.5px; margin: 12px 0 0; }

.bl-section { padding: 34px 16px 0; }
.bl-h2 {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: 22px; letter-spacing: -0.02em; margin: 0;
}
.bl-p { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin: 6px 0 0; }
.bl-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.bl-more {
  flex-shrink: 0; background: none; border: 0; cursor: pointer;
  color: var(--gold); font-family: inherit; font-size: 12.5px; font-weight: 700;
}
.bl-more i { margin-left: 5px; }

.bl-paths {
  display: grid; gap: 11px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.bl-path {
  text-align: left; cursor: pointer; font-family: inherit; color: inherit;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 20px; padding: 16px;
  transition: border-color 0.15s, transform 0.15s;
}
.bl-path:hover { border-color: var(--gold); transform: translateY(-2px); }
.bl-path-ic {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 14px; margin-bottom: 12px;
  background: var(--grad-brand); color: #12100c; font-size: 17px;
}
.bl-path strong { display: block; font-family: 'Poppins', sans-serif; font-size: 14.5px; }
.bl-path small { display: block; color: var(--text-dim); font-size: 11.5px; margin-top: 3px; }

.bl-cards {
  display: grid; gap: 12px; margin-top: 18px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.bl-card {
  text-align: left; cursor: pointer; font-family: inherit; color: inherit; padding: 0;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.bl-card:hover { border-color: var(--ic-accent, var(--gold)); transform: translateY(-3px); }
.bl-card-img {
  display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--bg-elev);
}
.bl-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.bl-card-img.flat {
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: var(--ic-accent, var(--gold));
}
.bl-card-body { display: block; padding: 12px 13px 14px; }
.bl-card-tag {
  display: block; font-size: 9px; letter-spacing: 0.15em; font-weight: 800;
  text-transform: uppercase; color: var(--ic-accent, var(--gold));
}
.bl-card-body strong { display: block; font-family: 'Poppins', sans-serif; font-size: 14px; margin-top: 5px; line-height: 1.2; }
.bl-card-body small { display: block; color: var(--text-dim); font-size: 11.5px; margin-top: 3px; }
.bl-card-price {
  display: inline-block; margin-top: 9px; font-size: 10.5px; font-weight: 700;
  color: var(--ic-accent, var(--gold));
  border: 1px solid color-mix(in srgb, var(--ic-accent, #e7c06b) 45%, transparent);
  border-radius: 999px; padding: 3px 9px;
}

.bl-sectors {
  display: grid; gap: 10px; margin-top: 18px;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.bl-sector {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 16px 10px; cursor: pointer; font-family: inherit; color: inherit;
  border-radius: 18px; border: 1px solid var(--border);
  background: linear-gradient(160deg, color-mix(in srgb, var(--ic-deep) 80%, transparent), var(--card));
}
.bl-sector:hover { border-color: var(--ic-accent); }
.bl-sector i { font-size: 21px; color: var(--ic-accent); }
.bl-sector span { font-size: 11.5px; font-weight: 600; text-align: center; }

.bl-closing {
  margin: 38px 16px 0; padding: 34px 20px; border-radius: 26px; text-align: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--gold) 20%, transparent), var(--card));
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
}
.bl-closing h2 {
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 24px;
  letter-spacing: -0.02em; margin: 0;
}
.bl-closing p { color: var(--text-dim); font-size: 13px; margin: 8px 0 0; }
.bl-closing .bl-cta { justify-content: center; }
.bl-powered { color: var(--text-faint); font-size: 11px; margin-top: 18px !important; }

/* "Kuhusu" / Faragha / Masharti (js/views/kuhusu.js) */
.legal-text { max-width: 680px; }
.legal-text .bl-h2 { margin-top: 22px; }

/* Wadau / Partners strip (js/views/kuhusu.js) - logos as-supplied, each in
   a neutral card so a black-background logo and a white-background one sit
   at the same visual weight instead of one looking like a hole in the page. */
.wadau-strip {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px;
}
.wadau-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 132px; padding: 16px 12px; border-radius: 18px;
  background: #ffffff; border: 1px solid var(--border);
  text-align: center; color: #111;
  transition: transform 0.15s;
}
a.wadau-card:hover { transform: translateY(-3px); }
.wadau-card img { width: 100%; height: 56px; object-fit: contain; }
.wadau-card span { font-size: 11.5px; font-weight: 700; color: #111; line-height: 1.3; }

/* ==========================================================================
   Partner landing page - "#/karibu" (js/views/brandLanding.js)
   --------------------------------------------------------------------------
   The brand's shop window, built to the layout the partner supplied. It
   carries its OWN palette rather than the app's editorial theme, and does not
   read --bg/--text - it is marketing, not product. It does follow light/dark
   though, through its own --gl-* token set (see the dark block below). Only
   --gold/--grad-brand (the partner's own accent, set by js/theme.js) bleeds
   through from the app.
   ========================================================================== */
.gl {
  --gl-ink: #1a1710;
  --gl-ink-dim: #6a6252;
  --gl-ink-faint: #9a917f;
  --gl-paper: #faf8f4;
  --gl-card: #ffffff;
  --gl-line: rgba(26,23,16,0.1);
  --gl-dark: #0f0d09;
  background: var(--gl-paper);
  color: var(--gl-ink);
  min-height: 100%;
  font-family: 'Inter', system-ui, sans-serif;
}


/* Dark mode. The landing keeps its own palette rather than the app's, so it
   needs its own dark set: same layout, inverted paper. Both the explicit
   toggle (data-theme) and the system preference are honoured, the latter only
   when the visitor has not chosen light. */
:root[data-theme="dark"] .gl,
:root[data-theme="dark"] .gl-community::before { color-scheme: dark; }
:root[data-theme="dark"] .gl {
  --gl-ink: #f3efe7;
  --gl-ink-dim: #a9a294;
  --gl-ink-faint: #7b7366;
  --gl-paper: #121017;
  --gl-card: #1b1824;
  --gl-line: rgba(255,255,255,0.1);
  --gl-dark: #0b0910;
}
:root[data-theme="dark"] .gl-community::before {
  background: linear-gradient(140deg, color-mix(in srgb, var(--gold, #d8a63a) 22%, rgba(18,16,23,.86)), rgba(18,16,23,.82));
}
:root[data-theme="dark"] .gl-community { background-color: #121017; }
:root[data-theme="dark"] .gl-card-art.photo { background: #26222e; }
:root[data-theme="dark"] .gl-path:hover,
:root[data-theme="dark"] .gl-card:hover { box-shadow: 0 14px 30px rgba(0,0,0,0.5); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gl {
    --gl-ink: #f3efe7;
    --gl-ink-dim: #a9a294;
    --gl-ink-faint: #7b7366;
    --gl-paper: #121017;
    --gl-card: #1b1824;
    --gl-line: rgba(255,255,255,0.1);
    --gl-dark: #0b0910;
  }
  :root:not([data-theme="light"]) .gl-community::before {
    background: linear-gradient(140deg, color-mix(in srgb, var(--gold, #d8a63a) 22%, rgba(18,16,23,.86)), rgba(18,16,23,.82));
  }
  :root:not([data-theme="light"]) .gl-community { background-color: #121017; }
  :root:not([data-theme="light"]) .gl-card-art.photo { background: #26222e; }
}

/* ---- Nav ---------------------------------------------------------------- */
.gl-nav {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
  background: var(--gl-card);
  border-bottom: 1px solid var(--gl-line);
  position: sticky; top: 0; z-index: 30;
}
.gl-nav-brand { flex-shrink: 0; margin-right: auto; }
.gl-nav-brand img { height: 38px; width: auto; object-fit: contain; }
.gl-nav-brand strong { font-family: 'Poppins', sans-serif; font-size: 17px; }
.gl-nav-panel { display: contents; }
.gl-nav-links { display: flex; gap: 4px; }
.gl-nav-links button {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--gl-ink-dim);
  padding: 7px 11px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 9px;
}
.gl-nav-links button i { display: none; }
.gl-nav-links button:hover { background: var(--gl-paper); color: var(--gl-ink); }
.gl-nav-cta { display: flex; gap: 8px; flex-shrink: 0; }
/* The hamburger and its scrim only exist below the breakpoint. */
.gl-nav-toggle { display: none; }
.gl-nav-scrim { display: none; }

@media (max-width: 860px) {
  .gl-nav { gap: 10px; }
  .gl-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--gl-paper); border: 1px solid var(--gl-line);
    color: var(--gl-ink); font-size: 17px; cursor: pointer; z-index: 2;
  }
  /* A sheet that drops from under the bar, not a wrapped row of links. */
  .gl-nav-panel {
    display: block; position: absolute; top: 100%; left: 10px; right: 10px;
    background: var(--gl-card); border: 1px solid var(--gl-line);
    border-radius: 18px; padding: 10px; margin-top: 8px;
    box-shadow: 0 22px 50px rgba(0,0,0,0.22);
    transform-origin: top right;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px) scale(0.97);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }
  .gl-nav.open .gl-nav-panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .gl-nav-links { display: block; }
  .gl-nav-links button {
    width: 100%; justify-content: flex-start;
    font-size: 15px; padding: 13px 14px; border-radius: 12px;
    color: var(--gl-ink);
  }
  .gl-nav-links button i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px; font-size: 13px;
    background: color-mix(in srgb, var(--gold, #d8a63a) 15%, transparent);
    color: var(--gold, #b8863a);
  }
  .gl-nav-cta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--gl-line);
  }
  .gl-nav-cta .gl-btn { justify-content: center; padding: 12px 8px; min-width: 0; font-size: 12.5px; white-space: nowrap; }
  .gl-nav.open .gl-nav-scrim {
    display: block; position: fixed; inset: 0; top: 66px; z-index: -1;
    background: rgba(0,0,0,0.35);
  }
}

.gl-btn {
  border-radius: 999px; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 700; padding: 10px 18px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid transparent; text-decoration: none;
}
.gl-btn.solid { background: var(--grad-brand, #d8a63a); color: #14110a; }
.gl-btn.solid:hover { filter: brightness(1.06); }
.gl-btn.ghost { background: transparent; border-color: var(--gl-line); color: var(--gl-ink); }
.gl-btn.ghost:hover { border-color: var(--gl-ink); }
.gl-btn.lg { padding: 14px 26px; font-size: 14px; }
.gl-btn.sm { padding: 8px 12px; }

/* ---- Hero --------------------------------------------------------------- */
.gl-hero {
  position: relative; overflow: hidden;
  min-height: 460px; display: flex; align-items: center;
  background: var(--gl-dark);
}
.gl-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gl-hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(15,13,9,0.94) 0%, rgba(15,13,9,0.7) 55%, rgba(15,13,9,0.35) 100%);
}
.gl-hero-inner { position: relative; z-index: 1; padding: 44px 24px; max-width: 700px; }
.gl-hero-kicker {
  font-size: 11px; letter-spacing: 0.26em; font-weight: 800;
  color: var(--gold, #d8a63a);
}
.gl-hero-inner h1 {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: clamp(32px, 8vw, 56px); line-height: 1.02; letter-spacing: -0.03em;
  margin: 12px 0 0; color: #fff;
}
.gl-hero-tagline {
  font-size: clamp(16px, 3.4vw, 21px); font-weight: 700; margin: 14px 0 0;
  color: var(--gold, #d8a63a);
}
.gl-hero-sub {
  color: rgba(255,255,255,0.78); font-size: 14px; line-height: 1.65;
  margin: 12px 0 0; max-width: 48ch;
}
.gl-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.gl-hero-cta.center { justify-content: center; }
.gl-hero-cta .gl-btn.ghost { border-color: rgba(255,255,255,0.4); color: #fff; }
.gl-hero-cta .gl-btn.ghost:hover { border-color: #fff; }
.gl-hero-fine { color: rgba(255,255,255,0.5); font-size: 12px; margin: 14px 0 0; }
.gl-hero-pin {
  position: absolute; right: 18px; bottom: 18px; z-index: 1;
  background: rgba(0,0,0,0.5); color: #fff; font-size: 11.5px; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 6px 13px;
  backdrop-filter: blur(6px);
}
.gl-hero-pin i { color: var(--gold, #d8a63a); margin-right: 5px; }

/* ---- Sections ----------------------------------------------------------- */
.gl-section { padding: 44px 20px 0; max-width: 1140px; margin: 0 auto; }
.gl-h2 {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: clamp(21px, 4.4vw, 30px); letter-spacing: -0.02em; margin: 0;
  color: var(--gl-ink);
}
.gl-h2.center { text-align: center; }
.gl-h2.big { font-size: clamp(26px, 6vw, 40px); }
.gl-p { color: var(--gl-ink-dim); font-size: 14px; line-height: 1.65; margin: 8px 0 0; }
.gl-p.center { text-align: center; }
.gl-about {
  color: var(--gl-ink-dim); font-size: 15px; line-height: 1.8;
  max-width: 68ch; margin: 0 auto; text-align: center;
}
.gl-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gl-more {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 700; color: var(--gold, #b8863a);
}
.gl-more i { margin-left: 6px; }

/* ---- Path tiles --------------------------------------------------------- */
.gl-paths {
  display: grid; gap: 14px; margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}
.gl-path {
  text-align: center; cursor: pointer; font-family: inherit; color: inherit;
  background: var(--gl-card); border: 1px solid var(--gl-line);
  border-radius: 18px; padding: 22px 14px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.gl-path:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(26,23,16,0.09); }
.gl-path-ic {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px;
  font-size: 20px; color: #fff;
}
.tone-green  { background: #2f8f5b; }
.tone-gold   { background: #d8a63a; color: #14110a !important; }
.tone-blue   { background: #3d6ea8; }
.tone-orange { background: #d97a34; }
.tone-purple { background: #7d5ba6; }
.tone-brown  { background: #8a6244; }
.gl-path strong { display: block; font-family: 'Poppins', sans-serif; font-size: 14.5px; }
.gl-path small { display: block; color: var(--gl-ink-faint); font-size: 11.5px; margin-top: 4px; line-height: 1.4; }

/* ---- Three big tiles ---------------------------------------------------- */
.gl-tiles {
  display: grid; gap: 16px; padding: 40px 20px 0;
  max-width: 1140px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.gl-tile {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  font-family: inherit; color: #fff; border: 0; border-radius: 22px;
  min-height: 230px; display: flex; align-items: flex-end; padding: 22px;
  transition: transform 0.16s;
  background-size: cover; background-position: center; background-color: #17402c;
}
.gl-tile:hover { transform: translateY(-4px); }
/* The photo arrives as an inline background-image, so the tone tint has to
   live on an overlay or it would be overwritten. */
.gl-tile::after { content: ""; position: absolute; inset: 0; }
.gl-tile.tone-green::after { background: linear-gradient(160deg, rgba(47,143,91,.62), rgba(10,28,19,.93)); }
.gl-tile.tone-gold::after  { background: linear-gradient(160deg, rgba(216,166,58,.58), rgba(48,34,8,.93)); }
.gl-tile.tone-blue::after  { background: linear-gradient(160deg, rgba(61,110,168,.58), rgba(8,18,30,.93)); }
.gl-tile.tone-gold { color: #fff !important; }
.gl-tile-ic {
  position: absolute; right: -8px; top: -8px;
  font-size: 110px; opacity: 0.16; pointer-events: none;
}
.gl-tile-body { position: relative; z-index: 1; }
.gl-tile-kicker {
  display: block; font-size: 10px; letter-spacing: 0.2em; font-weight: 800;
  opacity: 0.85;
}
.gl-tile-title {
  display: block; font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: 22px; line-height: 1.15; margin-top: 8px;
}
.gl-tile-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px; padding: 8px 15px; font-size: 12px; font-weight: 700;
}

/* ---- Two-panel (start here + ask) --------------------------------------- */
.gl-duo { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.gl-panel {
  background: var(--gl-card); border: 1px solid var(--gl-line);
  border-radius: 22px; padding: 26px;
}
.gl-panel h3 { font-family: 'Poppins', sans-serif; font-size: 19px; margin: 0; }
.gl-panel > p { color: var(--gl-ink-dim); font-size: 13.5px; line-height: 1.6; margin: 10px 0 0; }
.gl-panel.dark {
  background: var(--gl-dark); color: #fff;
  border-color: rgba(255,255,255,0.12);
}
.gl-panel.dark > p { color: rgba(255,255,255,0.72); }
.gl-panel.dark h3 i { color: var(--gold, #d8a63a); margin-right: 8px; }
.gl-check { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 9px; }
.gl-check li { font-size: 13.5px; color: var(--gl-ink-dim); display: flex; align-items: center; gap: 10px; }
.gl-check i {
  color: #2f8f5b; background: rgba(47,143,91,0.12);
  width: 20px; height: 20px; border-radius: 50%; font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.gl-search {
  display: flex; align-items: center; gap: 10px; margin-top: 18px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px; padding: 6px 6px 6px 16px;
}
.gl-search i { color: rgba(255,255,255,0.55); font-size: 14px; }
.gl-search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: #fff; font-family: inherit; font-size: 13.5px; padding: 9px 0;
}
.gl-search input::placeholder { color: rgba(255,255,255,0.45); }
.gl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.gl-chips button {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.85); border-radius: 999px;
  padding: 7px 13px; font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.gl-chips button:hover { border-color: var(--gold, #d8a63a); color: var(--gold, #d8a63a); }

/* ---- Opportunity cards -------------------------------------------------- */
.gl-cards {
  display: grid; gap: 16px; margin-top: 24px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.gl-card {
  text-align: left; cursor: pointer; font-family: inherit; color: inherit; padding: 0;
  background: var(--gl-card); border: 1px solid var(--gl-line);
  border-radius: 20px; overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.gl-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(26,23,16,0.1); }
.gl-card-art {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10; font-size: 38px;
  color: var(--gl-accent, #d8a63a);
  background: color-mix(in srgb, var(--gl-accent, #d8a63a) 16%, #f3efe7);
}
.gl-card-art.photo { display: block; overflow: hidden; background: #efeae1; }
.gl-card-art.photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.gl-card-body { display: block; padding: 15px 16px 18px; }
.gl-card-tag {
  display: inline-block; font-size: 9.5px; letter-spacing: 0.14em; font-weight: 800;
  text-transform: uppercase; color: var(--gl-ink-faint);
}
.gl-card-body strong { display: block; font-family: 'Poppins', sans-serif; font-size: 15px; margin-top: 6px; line-height: 1.25; }
.gl-card-body small { display: block; color: var(--gl-ink-dim); font-size: 12px; margin-top: 5px; }
.gl-card-cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-size: 12px; font-weight: 700; color: var(--gold, #b8863a);
}

/* ---- The BOB reveal ------------------------------------------------------ */
.gl-bob {
  margin-top: 52px; padding: 52px 20px;
  background: var(--gl-dark); color: #fff;
}
.gl-bob-inner { max-width: 1140px; margin: 0 auto; }
.gl-bob-badge {
  display: inline-block; font-size: 10px; letter-spacing: 0.22em; font-weight: 800;
  background: var(--grad-brand, #d8a63a); color: #14110a;
  border-radius: 999px; padding: 6px 14px;
}
.gl-bob h2 {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: clamp(28px, 6.5vw, 46px); line-height: 1.04; letter-spacing: -0.03em;
  margin: 16px 0 0;
}
.gl-bob > .gl-bob-inner > p {
  color: rgba(255,255,255,0.72); font-size: 14.5px; line-height: 1.65;
  margin: 12px 0 0; max-width: 56ch;
}
.gl-doors {
  display: grid; gap: 13px; margin-top: 30px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.gl-door {
  display: flex; align-items: center; gap: 14px; text-align: left;
  cursor: pointer; font-family: inherit; color: #fff;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px; padding: 16px 18px;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.gl-door:hover {
  border-color: var(--gold, #d8a63a); transform: translateX(4px);
  background: rgba(255,255,255,0.08);
}
.gl-door-ic {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: var(--grad-brand, #d8a63a); color: #14110a;
}
.gl-door-body { flex: 1; min-width: 0; }
.gl-door-body strong { display: block; font-family: 'Poppins', sans-serif; font-size: 15px; }
.gl-door-body small { display: block; color: rgba(255,255,255,0.6); font-size: 11.5px; margin-top: 3px; line-height: 1.4; }
.gl-door-go { color: var(--gold, #d8a63a); flex-shrink: 0; }

/* ---- Community ---------------------------------------------------------- */
.gl-community {
  position: relative; margin-top: 52px; padding: 56px 20px; text-align: center;
  background-size: cover; background-position: center; background-color: #f3efe7;
  border-top: 1px solid var(--gl-line); border-bottom: 1px solid var(--gl-line);
}
.gl-community::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(140deg, color-mix(in srgb, var(--gold, #d8a63a) 32%, rgba(243,239,231,.82)), rgba(243,239,231,.74));
}
.gl-community-inner { position: relative; max-width: 620px; margin: 0 auto; }
.gl-community h2 {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: clamp(24px, 5.2vw, 36px); letter-spacing: -0.025em; margin: 0;
}
.gl-community p { color: var(--gl-ink-dim); font-size: 14.5px; line-height: 1.65; margin: 12px 0 24px; }

/* ---- Partner family ----------------------------------------------------- */
.gl-family {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 28px;
}
.gl-family-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 190px; padding: 24px 18px; text-decoration: none;
  background: var(--gl-card); border: 1px solid var(--gl-line);
  border-radius: 20px; color: var(--gl-ink); text-align: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
a.gl-family-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(26,23,16,0.1); }
.gl-family-card img { width: 100%; height: 78px; object-fit: contain; }
.gl-family-card strong { font-family: 'Poppins', sans-serif; font-size: 14px; line-height: 1.3; }
.gl-family-card small { font-size: 11.5px; color: var(--gold, #b8863a); font-weight: 700; }

/* ---- Closing + footer ---------------------------------------------------- */
.gl-closing {
  margin: 56px 20px 0; padding: 50px 24px; text-align: center;
  max-width: 1140px; margin-left: auto; margin-right: auto;
  background: var(--gl-dark); color: #fff; border-radius: 28px;
}
.gl-closing h2 {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: clamp(24px, 5.4vw, 38px); letter-spacing: -0.025em; margin: 0;
}
.gl-closing p { color: rgba(255,255,255,0.7); font-size: 14.5px; margin: 12px 0 26px; }

.gl-footer { margin-top: 56px; border-top: 1px solid var(--gl-line); background: var(--gl-card); }
.gl-footer-cols {
  display: grid; gap: 30px; padding: 44px 20px;
  max-width: 1140px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.gl-footer-brand img { height: 46px; width: auto; object-fit: contain; }
.gl-footer-brand p { color: var(--gl-ink-dim); font-size: 12.5px; line-height: 1.6; margin: 12px 0 0; }
.gl-footer-cols h4 {
  font-family: 'Poppins', sans-serif; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gl-ink-faint); margin: 0 0 12px;
}
.gl-footer-cols button, .gl-footer-cols a {
  display: block; background: none; border: 0; padding: 0 0 9px; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--gl-ink-dim);
  text-align: left; text-decoration: none;
}
.gl-footer-cols button:hover, .gl-footer-cols a:hover { color: var(--gold, #b8863a); }
.gl-footer-base {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 18px 20px; border-top: 1px solid var(--gl-line);
  max-width: 1140px; margin: 0 auto;
  font-size: 11.5px; color: var(--gl-ink-faint);
}

@media (min-width: 900px) {
  .gl-hero { min-height: 540px; }
  .gl-hero-inner { padding: 60px 40px; }
  .gl-section { padding-left: 40px; padding-right: 40px; }
  .gl-tiles { padding-left: 40px; padding-right: 40px; }
}

/* ==========================================================================
   Live - list (#/live) and room (#/live/{id}) - js/views/live.js
   ========================================================================== */
.lv-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: #ff2d55; color: #fff; font-weight: 800; font-size: 10.5px;
  letter-spacing: 0.08em; padding: 3px 8px; border-radius: 6px;
}
.lv-pill i { font-size: 6px; animation: lvBlink 1.2s infinite; }
@keyframes lvBlink { 50% { opacity: 0.25; } }

.lv-list { padding: 18px 16px 90px; max-width: 1100px; margin: 0 auto; }
.lv-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.lv-list-head h1 { font-family: "Poppins", sans-serif; font-size: 28px; margin: 8px 0 4px; }
.lv-list-head p { color: var(--text-dim); margin: 0; font-size: 14px; }
.lv-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.lv-card {
  display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px; color: inherit; font-family: inherit;
  transition: transform 0.15s;
}
.lv-card:hover { transform: translateY(-3px); }
.lv-card-media { position: relative; aspect-ratio: 3 / 4; background: var(--card-2); display: flex; align-items: center; justify-content: center; }
.lv-card-media img { width: 100%; height: 100%; object-fit: cover; }
.lv-card-emoji { font-size: 48px; }
.lv-card-pill { position: absolute; top: 10px; left: 10px; }
.lv-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.lv-card-body strong { font-size: 14px; line-height: 1.25; }
.lv-card-body small { color: var(--text-dim); font-size: 12px; }
.lv-card-stats { display: flex; gap: 10px; font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }
.lv-card-stats i { color: #ff4d6d; }
.lv-bucket-pick { display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto; }
.lv-check { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.lv-check span { display: flex; flex-direction: column; font-size: 13.5px; }
.lv-check small { color: var(--text-dim); font-size: 11.5px; }
.lv-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; }
.lv-note i { color: var(--green); margin-top: 3px; }

/* The room takes the whole viewport, nav and topbar hidden by the router. */
body.lv-open { overflow: hidden; }
.lv-shell { padding: 0 !important; }
.lv-room {
  position: fixed; inset: 0; z-index: 40; background: #000; color: #fff; overflow: hidden;
  font-family: "Inter", system-ui, sans-serif; user-select: none; -webkit-user-select: none;
}
@media (min-width: 900px) {
  .lv-room { left: 50%; right: auto; width: min(480px, 100vw); transform: translateX(-50%); border-left: 1px solid #222; border-right: 1px solid #222; }
}
.lv-stage { position: absolute; inset: 0; }
.lv-stage video { object-fit: cover !important; }
.lv-fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(120% 80% at 50% 30%, #2a1a3a 0%, #0b0910 70%); padding: 30px; text-align: center;
  transition: opacity 0.3s;
}
.lv-fallback.hidden { opacity: 0; pointer-events: none; }
.lv-fallback p { color: rgba(255,255,255,0.75); font-size: 14px; max-width: 280px; line-height: 1.5; }
.lv-fallback-avatar {
  width: 110px; height: 110px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  font-size: 54px; background: rgba(255,255,255,0.08); box-shadow: 0 0 0 4px #ff2d55, 0 0 40px rgba(255,45,85,0.5);
  animation: lvPulse 2s infinite;
}
.lv-fallback-avatar img { width: 100%; height: 100%; object-fit: cover; }
@keyframes lvPulse { 50% { box-shadow: 0 0 0 8px rgba(255,45,85,0.35), 0 0 60px rgba(255,45,85,0.55); } }
.lv-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.75) 100%);
}
.lv-tap-layer { position: absolute; inset: 70px 0 150px; z-index: 2; }

.lv-top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: flex-start; padding: max(12px, env(safe-area-inset-top)) 12px 0; gap: 8px; }
.lv-host { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.38); border-radius: 999px; padding: 4px 10px 4px 4px; max-width: 72%; flex-wrap: wrap; }
.lv-host-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.15); font-size: 18px; flex-shrink: 0; }
.lv-host-av img { width: 100%; height: 100%; object-fit: cover; }
.lv-host-text { display: flex; flex-direction: column; min-width: 0; }
.lv-host-text b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.lv-host-text small { font-size: 11px; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.lv-likes { font-size: 11px; opacity: 0.9; }
.lv-likes i { color: #ff4d6d; }
.lv-top-right { display: flex; align-items: center; gap: 6px; }
.lv-viewers { background: rgba(0,0,0,0.38); border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 700; }
.lv-icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 15px;
  background: rgba(0,0,0,0.42); display: inline-flex; align-items: center; justify-content: center;
}
.lv-icon-btn.off { background: rgba(255,45,85,0.75); }
.lv-icon-btn.danger { background: rgba(255,45,85,0.85); }

.lv-buckets {
  position: absolute; top: 64px; left: 0; right: 0; z-index: 5; display: flex; gap: 8px; overflow-x: auto;
  padding: 6px 12px; scrollbar-width: none;
}
.lv-buckets::-webkit-scrollbar { display: none; }
.lv-bucket {
  flex: 0 0 auto; min-width: 170px; max-width: 220px; text-align: left; cursor: pointer; color: #fff; font-family: inherit;
  background: rgba(10,10,14,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 9px 11px; display: flex; flex-direction: column; gap: 4px;
}
.lv-bucket-title { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-bucket-title i { color: #16d492; }
.lv-bucket-amt { font-size: 13px; font-weight: 800; }
.lv-bucket-amt small { opacity: 0.7; font-weight: 600; }
.lv-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.18); overflow: hidden; }
.lv-bar span { display: block; height: 100%; background: linear-gradient(90deg, #16d492, #ffc94a); }
.lv-bucket-cta { align-self: flex-start; font-size: 11px; font-weight: 800; background: #16d492; color: #04140d; padding: 3px 9px; border-radius: 999px; margin-top: 2px; }

.lv-chat {
  position: absolute; left: 10px; right: 76px; bottom: 74px; z-index: 4; max-height: 38%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
}
.lv-chat::-webkit-scrollbar { display: none; }
.lv-msg { display: flex; align-items: flex-start; gap: 7px; animation: lvMsgIn 0.25s ease; }
@keyframes lvMsgIn { from { opacity: 0; transform: translateY(8px); } }
.lv-msg-av { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.lv-msg-av img { width: 100%; height: 100%; object-fit: cover; }
.lv-msg-body { background: rgba(0,0,0,0.38); border-radius: 12px; padding: 5px 10px; font-size: 13px; line-height: 1.35; word-break: break-word; }
.lv-msg-body b { color: #ffd36b; font-weight: 700; margin-right: 3px; }
.lv-msg-del { background: none; border: 0; color: rgba(255,255,255,0.55); cursor: pointer; padding: 4px; }

.lv-host-tools { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 6; flex-direction: column; gap: 10px; }

.lv-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 8px;
  padding: 10px 10px max(12px, env(safe-area-inset-bottom));
}
.lv-input { flex: 1; display: flex; align-items: center; background: rgba(255,255,255,0.14); border-radius: 999px; padding: 0 4px 0 14px; min-width: 0; }
.lv-input input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; font-size: 14px; padding: 11px 0; outline: none; font-family: inherit; }
.lv-input input::placeholder { color: rgba(255,255,255,0.6); }
.lv-input button { background: none; border: 0; color: #fff; width: 36px; height: 36px; cursor: pointer; font-size: 15px; }
.lv-round {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 18px; flex-shrink: 0;
  background: rgba(255,255,255,0.16); display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.1s;
}
.lv-round:active { transform: scale(0.88); }
.lv-round.gift { background: linear-gradient(135deg, #ffb020, #ff4d6d); }
.lv-round.heart { background: linear-gradient(135deg, #ff4d6d, #ff2d55); }

/* Hearts rising up the right edge */
.lv-hearts { position: absolute; right: 18px; bottom: 80px; width: 60px; height: 60%; z-index: 4; pointer-events: none; }
.lv-float-heart {
  position: absolute; bottom: 0; right: 12px; font-size: 26px;
  animation: lvRise 2.6s ease-out forwards;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}
@keyframes lvRise {
  0% { transform: translate(0, 0) scale(0.3); opacity: 0; }
  12% { transform: translate(0, -20px) scale(var(--scale, 1)); opacity: 1; }
  100% { transform: translate(var(--drift, 0), -340px) scale(calc(var(--scale, 1) * 0.8)); opacity: 0; }
}
.lv-burst, .lv-burst-big { position: absolute; z-index: 7; pointer-events: none; color: #ff2d55; transform: translate(-50%, -50%); }
.lv-burst { font-size: 16px; animation: lvBurst 0.85s ease-out forwards; }
@keyframes lvBurst {
  to { transform: translate(calc(-50% + 70px * cos(var(--a))), calc(-50% + 70px * sin(var(--a)))) scale(0.4); opacity: 0; }
}
.lv-burst-big { font-size: 74px; animation: lvBig 0.85s ease-out forwards; filter: drop-shadow(0 4px 18px rgba(255,45,85,0.6)); }
@keyframes lvBig {
  0% { transform: translate(-50%, -50%) scale(0.2) rotate(-12deg); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1.15) rotate(6deg); opacity: 1; }
  100% { transform: translate(-50%, -90%) scale(1) rotate(0); opacity: 0; }
}
.lv-combo {
  position: absolute; right: 70px; bottom: 140px; z-index: 6; font-size: 26px; font-weight: 900; font-style: italic;
  color: #fff; text-shadow: 0 3px 12px rgba(255,45,85,0.85); opacity: 0; pointer-events: none;
}
.lv-combo i { color: #ff2d55; }
.lv-combo.show { opacity: 1; }
.lv-combo.pop { animation: lvPop 0.25s ease; }
@keyframes lvPop { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* Gift / contribution banners slide in on the left, TikTok-style */
.lv-banners { position: absolute; left: 10px; bottom: calc(74px + 38%); z-index: 6; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.lv-banner {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border-radius: 999px; max-width: 280px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone, #16d492) 85%, transparent), rgba(0,0,0,0.25));
  animation: lvSlide 0.4s cubic-bezier(.2,.9,.3,1.3);
  transition: opacity 0.5s, transform 0.5s;
}
.lv-banner.donation { --tone: #16d492; }
.lv-banner.out { opacity: 0; transform: translateX(-30px); }
@keyframes lvSlide { from { transform: translateX(-120%); } }
.lv-banner-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.lv-banner-av img { width: 100%; height: 100%; object-fit: cover; }
.lv-banner-text { display: flex; flex-direction: column; min-width: 0; }
.lv-banner-text b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-banner-text small { font-size: 11px; opacity: 0.92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-banner-ic { font-size: 26px; padding: 0 6px; animation: lvGiftBob 0.6s ease infinite alternate; }
@keyframes lvGiftBob { to { transform: translateY(-3px) scale(1.08); } }
.lv-gift-hero {
  position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  pointer-events: none; animation: lvHero 2.6s ease forwards;
}
.lv-gift-hero i { font-size: 140px; color: var(--tone); filter: drop-shadow(0 0 40px var(--tone)); animation: lvHeroIcon 2.6s ease forwards; }
.lv-gift-hero b { font-size: 30px; font-weight: 900; text-shadow: 0 4px 20px rgba(0,0,0,0.6); }
@keyframes lvHero { 0%, 100% { opacity: 0; } 12%, 80% { opacity: 1; } }
@keyframes lvHeroIcon {
  0% { transform: scale(0.2) rotate(-25deg); }
  18% { transform: scale(1.2) rotate(8deg); }
  30% { transform: scale(1) rotate(0); }
  80% { transform: scale(1.05) translateY(-10px); }
  100% { transform: scale(1.6) translateY(-80px); }
}

.lv-ended {
  position: absolute; inset: 0; z-index: 9; background: rgba(5,5,8,0.92); flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px;
}
.lv-ended i.fa-tower-broadcast { font-size: 44px; color: #ff2d55; }
.lv-ended h2 { margin: 6px 0 0; font-family: "Poppins", sans-serif; }
.lv-ended p { color: rgba(255,255,255,0.75); }

.lv-gift-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 14px; }
.lv-gift-opt {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 14px; background: var(--card-2); color: var(--text); font-family: inherit;
}
.lv-gift-opt i { font-size: 28px; color: var(--tone); }
.lv-gift-opt b { font-size: 13px; }
.lv-gift-opt small { font-size: 11.5px; color: var(--text-dim); }
.lv-gift-opt.selected { border-color: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 25%, transparent); }
.lv-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.lv-amt { padding: 11px 6px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--card-2); color: var(--text); font-weight: 700; cursor: pointer; font-family: inherit; font-size: 13px; }
.lv-amt.selected { border-color: var(--green); color: var(--green); }

.reel-live-pill {
  display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer;
  background: #ff2d55; color: #fff; font-weight: 800; font-size: 11px; padding: 6px 10px; border-radius: 999px; letter-spacing: 0.05em;
}
.reel-live-pill i { font-size: 7px; animation: lvBlink 1.2s infinite; }
.reel-live-pill b { background: rgba(0,0,0,0.25); border-radius: 999px; padding: 0 6px; }

/* ==========================================================================
   Held buckets - #/michango and #/mchango/{id} - js/views/causePlan.js
   ========================================================================== */
.cp-page { max-width: 760px; margin: 0 auto; padding: 16px 16px 100px; }
.cp-topline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cp-h1 { font-family: "Poppins", sans-serif; font-size: 26px; margin: 14px 0 12px; }
.cp-hero { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 18px; }
.cp-kicker { font-size: 10.5px; letter-spacing: 0.14em; font-weight: 800; color: var(--gold); }
.cp-hero h1 { font-family: "Poppins", sans-serif; font-size: 22px; margin: 6px 0 4px; }
.cp-for { color: var(--text-dim); font-size: 13px; margin: 0 0 14px; }
.cp-money { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .cp-money { grid-template-columns: repeat(4, 1fr); } }
.cp-money div { background: var(--card-2); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.cp-money small { color: var(--text-dim); font-size: 11.5px; }
.cp-money b { font-size: 16px; }
.cp-bar { display: block; height: 6px; border-radius: 6px; background: var(--card-2); overflow: hidden; margin-top: 6px; }
.cp-bar.big { height: 8px; margin-top: 14px; }
.cp-bar span { display: block; height: 100%; background: var(--grad-money); }
.cp-target { color: var(--text-dim); font-size: 12px; }
.cp-notice {
  display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; padding: 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.6;
  background: color-mix(in srgb, var(--green) 9%, transparent); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
}
.cp-notice i { color: var(--green); font-size: 18px; margin-top: 2px; }
.cp-held-card { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp-held-card div { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.cp-held-card small { color: var(--text-dim); font-size: 12px; }
.cp-held-card b { font-size: 20px; }
.cp-list { display: flex; flex-direction: column; gap: 8px; }
.cp-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; font-family: inherit; color: inherit;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px;
}
.cp-row-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); flex-shrink: 0; }
.cp-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cp-row-body strong { font-size: 14.5px; }
.cp-row-body small { color: var(--text-dim); font-size: 12px; }
.cp-row-go { color: var(--text-faint); }
.cp-section { margin-top: 18px; }
.cp-section h2 { font-family: "Poppins", sans-serif; font-size: 18px; margin: 0; }
.cp-section-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.cp-free { margin: 0 0 10px; font-size: 13px; }
.cp-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.cp-step { display: flex; gap: 12px; position: relative; padding-bottom: 16px; }
.cp-step:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--border); }
.cp-step-n {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; background: var(--card-2); border: 2px solid var(--border); z-index: 1;
}
.cp-step.done .cp-step-n { background: var(--green); border-color: var(--green); color: #04140d; }
.cp-step.disbursed .cp-step-n, .cp-step.in_progress .cp-step-n { border-color: var(--blue); color: var(--blue); }
.cp-step.approved .cp-step-n { border-color: var(--blue); }
.cp-step.proposed .cp-step-n { border-color: var(--gold); color: var(--gold); }
.cp-step.rejected { opacity: 0.6; }
.cp-step-body { flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; }
.cp-step-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.cp-step-head strong { font-size: 15px; }
.cp-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.cp-badge.gold { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }
.cp-badge.blue { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); }
.cp-badge.green { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.cp-badge.red { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.cp-step-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12.5px; color: var(--text-dim); }
.cp-step-meta i { color: var(--gold); margin-right: 3px; }
.cp-step-desc { font-size: 13.5px; line-height: 1.55; margin: 8px 0 0; }
.cp-step-note { font-size: 12.5px; margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--card-2); }
.cp-step-note.red { color: var(--red); }
.cp-step-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cp-wadau { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cp-wadau-chip { font-size: 12px; padding: 4px 9px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--border); }
.cp-wadau-chip i { color: var(--blue); }
.cp-wadau-chip small { color: var(--text-dim); }
.cp-wadau-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.cp-log { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cp-log-item { display: flex; gap: 10px; }
.cp-log-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); margin-top: 6px; flex-shrink: 0; }
.cp-log-item.done .cp-log-dot, .cp-log-item.disbursed .cp-log-dot { background: var(--green); }
.cp-log-item.approved .cp-log-dot { background: var(--blue); }
.cp-log-item.proposed .cp-log-dot { background: var(--gold); }
.cp-log-item.rejected .cp-log-dot { background: var(--red); }
.cp-log-item p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.cp-log-item small { color: var(--text-dim); font-size: 11.5px; }
.cp-feedback textarea { width: 100%; margin: 10px 0; }
.cp-rate { display: flex; gap: 6px; margin-top: 8px; }
.cp-rate button { background: none; border: 0; font-size: 28px; color: var(--text-faint); cursor: pointer; }
.cp-rate button.on { color: #ffc94a; }
.cp-stars { color: #ffc94a; font-size: 22px; margin: 6px 0; }
@media print {
  #sidenav, #bottomnav, #topbar, #desktop-footer, #chat-fab, .cp-step-actions, .cp-topline, #cp-propose, #cp-note, #cp-close, .cp-feedback button { display: none !important; }
  .cp-page { max-width: none; padding: 0; }
  body, .cp-hero, .cp-step-body { background: #fff !important; color: #000 !important; }
}

/* ==========================================================================
   Partner - #/partner and #/jiunge/{CODE} - js/views/partner.js
   ========================================================================== */
.pt-page { max-width: 880px; margin: 0 auto; padding: 16px 16px 100px; }
.pt-hero { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 22px; background: var(--card); border: 1px solid var(--border); }
.pt-logo { width: 72px; height: 72px; border-radius: 18px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--card-2); font-size: 30px; color: var(--gold); flex-shrink: 0; }
.pt-logo img { width: 100%; height: 100%; object-fit: contain; }
.pt-logo.big { width: 110px; height: 110px; margin: 12px auto; }
.pt-kicker { font-size: 10.5px; letter-spacing: 0.16em; font-weight: 800; color: var(--gold); }
.pt-hero h1 { font-family: "Poppins", sans-serif; font-size: 24px; margin: 4px 0; }
.pt-hero p { color: var(--text-dim); margin: 0; font-size: 13.5px; }
.pt-money { margin-top: 12px; display: grid; gap: 10px; }
@media (min-width: 760px) { .pt-money { grid-template-columns: 1fr 2fr; } }
.pt-money-main {
  border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  background: var(--grad-brand); color: #14110a;
}
.pt-money-main small { font-weight: 700; opacity: 0.8; }
.pt-money-main b { font-size: 28px; font-weight: 900; }
.pt-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pt-kpis div { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.pt-kpis small { color: var(--text-dim); font-size: 11px; }
.pt-kpis b { font-size: 14.5px; }
.pt-code { margin-top: 12px; padding: 14px 16px; border-radius: 18px; background: var(--card); border: 1px dashed color-mix(in srgb, var(--gold) 50%, transparent); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pt-code-main { display: flex; flex-direction: column; gap: 2px; }
.pt-code-main small { color: var(--text-dim); font-size: 12px; }
.pt-code-main b { font-size: 24px; letter-spacing: 0.12em; font-family: "Poppins", sans-serif; color: var(--gold); }
.pt-code-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pt-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 16px 0 10px; scrollbar-width: none; }
.pt-tabs::-webkit-scrollbar { display: none; }
.pt-tabs button {
  flex-shrink: 0; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card);
  color: var(--text-dim); font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit;
}
.pt-tabs button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.pt-tabs button span { background: var(--red); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; margin-left: 4px; }
.pt-h3 { font-size: 14px; margin: 16px 0 8px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.pt-people, .pt-ledger { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pt-people li, .pt-ledger li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 9px 12px;
}
.pt-ledger li.clickable { cursor: pointer; }
.pt-person { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; font-family: inherit; min-width: 0; padding: 0; }
.pt-person span:last-child, .pt-ledger li > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.pt-person b, .pt-ledger b { font-size: 14px; }
.pt-person small, .pt-ledger small { color: var(--text-dim); font-size: 11.5px; }
.pt-av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--card-2); font-size: 18px; flex-shrink: 0; }
.pt-av img { width: 100%; height: 100%; object-fit: cover; }
.pt-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pt-mini { font-size: 12px; color: var(--text-dim); }
.pt-plus { color: var(--green); white-space: nowrap; }
.pt-live-stat { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.pt-sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
.pt-sources div { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.pt-sources small { color: var(--text-dim); font-size: 11.5px; }
.pt-colors { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 14px; }
.pt-colors label { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pt-colors input[type=color] { width: 52px; height: 52px; border: 0; border-radius: 12px; cursor: pointer; background: none; }
.pt-colors small { font-size: 11px; color: var(--text-dim); }
.pt-join { text-align: center; max-width: 480px; }
.pt-join h1 { font-family: "Poppins", sans-serif; font-size: 26px; margin: 8px 0; }
.pt-join-tag { color: var(--text-dim); }
.pt-join-card { margin-top: 16px; background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 18px; text-align: left; line-height: 1.6; }

/* Profile entry points + wallet held line */
.prof-studio.held .prof-studio-ic { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.prof-studio.live .prof-studio-ic { background: color-mix(in srgb, #ff2d55 16%, transparent); color: #ff2d55; }
.wallet-earning.held { border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.wallet-held-note { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }

/* Nothing of the app shell floats over a live room. */
body.lv-open #install-app-banner, body.lv-open #chat-fab, body.lv-open #toast-host { z-index: 60; }
body.lv-open #install-app-banner, body.lv-open #chat-fab { display: none !important; }

/* Manual M-Pesa deposit steps (js/views/wallet.js openManualDepositModal) */
.pay-steps { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 14px; }
.pay-step { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.pay-step > span {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); font-weight: 800; font-size: 12px;
}
.pay-number {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 4px;
  padding: 10px 12px; border-radius: 12px; background: var(--card-2); border: 1px dashed color-mix(in srgb, var(--green) 45%, transparent);
}
.pay-number b { font-size: 20px; letter-spacing: 0.06em; font-family: "Poppins", sans-serif; }