/* ==========================================================================
   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 {
  --bg: #0a0a12;
  --bg-elev: #121022;
  --card: #1a1630;
  --card-2: #201b3a;
  --border: rgba(255,255,255,0.08);
  --text: #f6f4ff;
  --text-dim: #a79fc4;
  --text-faint: #6f6890;

  --gold: #ffc94a;
  --orange: #ff8a3d;
  --green: #16d492;
  --green-dim: #12b47e;
  --red: #ff4d6d;
  --blue: #4f9dff;

  --grad-brand: linear-gradient(135deg, #ffc94a 0%, #ff8a3d 55%, #ff5f8f 100%);
  --grad-money: linear-gradient(135deg, #16d492 0%, #0fae9c 100%);
  --grad-dark: linear-gradient(180deg, rgba(10,10,18,0) 0%, rgba(10,10,18,0.85) 60%, rgba(10,10,18,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(255,201,74,0.15), 0 8px 24px rgba(255,138,61,0.18);

  font-size: 16px;
}

* { 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 */
::-webkit-scrollbar { width: 0; height: 0; }

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

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

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

#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);
}

/* ---- 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. Kept paused
   and unloaded except while its reel is the one on screen (see wireReels).*/
.reel-bg {
  position: absolute; inset: 0;
  overflow: hidden;
}
.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; }
.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: rgba(255,255,255,0.1); 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 { background: rgba(255,77,109,0.2); color: var(--red); }

.cause-strip {
  margin-top: 8px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.08);
  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);
}
.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); }

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

/* ---- Groups -------------------------------------------------------------------- */
.group-card { margin-bottom: 14px; }
.group-card .pot { font-size: 22px; font-weight: 800; color: var(--green); font-family: 'Poppins'; }
.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; }

/* ---- 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: rgba(255,255,255,0.08); }
.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 rgba(255,255,255,0.1); }
.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); }

/* ---- Misc ---------------------------------------------------------------------- */
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.empty-state { text-align: center; padding: 50px 20px; color: var(--text-faint); }
.empty-state .ic { font-size: 40px; margin-bottom: 10px; }
.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; }