/* =====================================================================
   TNT Studio — Mobile App CSS  (world-class rewrite)
   ---------------------------------------------------------------------
   Aesthetic   : Discord x Instagram x Twitch, gaming-forward, neon edges
   Techniques  : glassmorphism, aurora gradients, layered shadows,
                 soft-lift hovers, 60fps transitions, CSS skeletons,
                 scroll-snap, backdrop-filter blurs, conic story rings,
                 custom properties, dark-first design.
   Compatible  : all existing class names from the previous sheet are
                 preserved so current .js/.html continue to work.
   Reduce Motion opt-out included at the bottom.
   =====================================================================
   TABLE OF CONTENTS
     00  Reset, tokens, base typography
     01  Utility primitives (row, col, chip, btn, card, avatar, empty)
     02  Boot splash
     03  Auth
     04  App chrome (topbar, tabbar, FAB, toasts)
     05  Views container, transitions
     06  Feed (stories, composer, posts, pull-to-refresh, skeleton)
     07  Reels (vertical scroller, overlays, actions, comments)
     08  Friends (search, tabs, rows, presence, leaderboard)
     09  Messages (list, swipe actions, chat bubbles, typing)
     10  Wallet (hero, actions, transactions, deposit)
     11  Profile (banner, avatar, rank, xp, stats, grid)
     12  Alerts (notification rows, filters, grouping)
     13  Squads (list, detail, chat, crest)
     14  Live (sheet, viewer, chat, reactions)
     15  Modals & sheets
     16  Skeletons / loaders
     17  Animations keyframes library
     18  Reduced motion, print, accessibility
   ===================================================================== */


/* ═══════════════════════════════════════════════════════════════════════
   00. RESET + DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* -------- Surfaces (deep-space ladder) -------- */
  --bg:            #04040b;
  --bg-1:          #07070f;
  --bg-2:          #0b0b16;
  --bg-elev:       #0d0d18;
  --bg-elev-2:     #141422;
  --bg-elev-3:     #1c1c2e;
  --bg-elev-4:     #262639;
  --bg-input:      #10101c;
  --bg-hover:      #181828;

  /* Glass surfaces — use with backdrop-filter */
  --glass:         rgba(22, 22, 38, .60);
  --glass-strong:  rgba(22, 22, 38, .86);
  --glass-light:   rgba(255, 255, 255, .04);
  --glass-border:  rgba(255, 255, 255, .08);

  /* -------- Borders -------- */
  --border:        rgba(255, 255, 255, .06);
  --border-1:      rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .16);
  --border-neon:   rgba(255, 107, 26, .42);
  --border-hot:    rgba(255, 77, 142, .38);

  /* -------- Text -------- */
  --text:          #ffffff;
  --text-2:        #e7e7ef;
  --text-dim:      #a0a3c0;
  --text-mute:     #6b6d82;
  --text-faint:    #4a4c63;

  /* -------- Brand accents -------- */
  --accent:        #ff6b1a;             /* TNT orange */
  --accent-hot:    #ff8a3a;             /* hot orange */
  --accent-2:      #ff9050;             /* soft orange */
  --accent-3:      #ffcd6b;             /* amber highlight */
  --accent-pink:   #ff4d8e;             /* pink for duo-gradient */
  --accent-magenta:#ff2d95;             /* deep magenta */
  --accent-cyan:   #5cf3ff;             /* cool cyan */
  --accent-violet: #7a55ff;             /* violet */
  --accent-blue:   #4a8dff;             /* cool blue */
  --accent-dim:    rgba(255, 107, 26, .14);
  --accent-pink-dim:rgba(255, 77, 142, .14);

  /* -------- Glows -------- */
  --glow-orange:   0 0 24px rgba(255, 107, 26, .45);
  --glow-orange-lg:0 0 48px rgba(255, 107, 26, .55), 0 0 12px rgba(255, 107, 26, .9);
  --glow-pink:     0 0 24px rgba(255, 77, 142, .50);
  --glow-cyan:     0 0 24px rgba(92, 243, 255, .45);
  --glow-violet:   0 0 24px rgba(122, 85, 255, .45);
  --glow-ok:       0 0 16px rgba(74, 222, 128, .55);
  --glow-danger:   0 0 18px rgba(255, 77, 94, .65);
  --neon-glow:     var(--glow-orange);
  --neon-glow-strong: var(--glow-orange-lg);

  /* -------- Shadows -------- */
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md:     0 6px 18px rgba(0, 0, 0, .45);
  --shadow-lg:     0 14px 38px rgba(0, 0, 0, .55);
  --shadow-xl:     0 26px 60px rgba(0, 0, 0, .65);
  --shadow-card:   0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -12px rgba(0,0,0,.55);

  /* -------- Gradients -------- */
  --grad-hot:      linear-gradient(135deg, #ff6b1a 0%, #ff4d8e 100%);
  --grad-hot-strong: linear-gradient(135deg, #ff8a3a 0%, #ff2d95 100%);
  --grad-cool:     linear-gradient(135deg, #5cf3ff 0%, #7a55ff 100%);
  --grad-sunset:   linear-gradient(135deg, #ffcd6b 0%, #ff6b1a 50%, #ff2d95 100%);
  --grad-aurora:   conic-gradient(from 0deg at 50% 50%,
                     #ff6b1a 0deg,
                     #ff4d8e 90deg,
                     #7a55ff 180deg,
                     #5cf3ff 270deg,
                     #ff6b1a 360deg);
  --grad-card:     linear-gradient(150deg, rgba(255,107,26,.14), rgba(255,77,142,.04) 60%, transparent);
  --grad-card-cool:linear-gradient(150deg, rgba(92,243,255,.10), rgba(122,85,255,.04) 60%, transparent);
  --grad-story:    conic-gradient(from 180deg, #ff6b1a 0deg, #ff4d8e 120deg, #ffcd6b 240deg, #ff6b1a 360deg);

  /* -------- State colors -------- */
  --danger:        #ff4d5e;
  --danger-dim:    rgba(255,77,94,.14);
  --ok:            #4ade80;
  --ok-dim:        rgba(74,222,128,.14);
  --info:          #5cf3ff;
  --info-dim:      rgba(92,243,255,.14);
  --warn:          #ffcd6b;
  --warn-dim:      rgba(255,205,107,.14);
  --live:          #ff2a3d;

  /* -------- Geometry -------- */
  --safe-top:      env(safe-area-inset-top, 0px);
  --safe-bot:      env(safe-area-inset-bottom, 0px);
  --safe-left:     env(safe-area-inset-left, 0px);
  --safe-right:    env(safe-area-inset-right, 0px);
  --topbar-h:      58px;
  --tabbar-h:      68px;
  --fab-size:      58px;
  --radius-xs:     6px;
  --radius-sm:     10px;
  --radius-md:     14px;
  --radius-lg:     20px;
  --radius-xl:     28px;
  --radius-pill:   999px;

  /* -------- Motion -------- */
  --ease-out:      cubic-bezier(.2, .8, .2, 1);
  --ease-in:       cubic-bezier(.4, 0, 1, 1);
  --ease-inout:    cubic-bezier(.6, .05, .3, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
  --ease-bounce:   cubic-bezier(.68, -0.55, .27, 1.55);
  --dur-fast:      .12s;
  --dur-med:       .22s;
  --dur-slow:      .45s;

  /* -------- Typography -------- */
  --font-sans:     'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-display:  'Inter', 'SF Pro Display', -apple-system, system-ui, sans-serif;

  /* -------- Z-index layers -------- */
  --z-base:        1;
  --z-sticky:      20;
  --z-chrome:      30;
  --z-fab:         35;
  --z-toast:       80;
  --z-modal:       100;
  --z-sheet:       110;
  --z-boot:        9999;
}

/* -------- Universal reset -------- */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.002em;
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

input, textarea, [contenteditable] {
  user-select: text;
  -webkit-user-select: text;
}

a { color: var(--accent); text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  letter-spacing: inherit;
}

img, video { display: block; max-width: 100%; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }

::selection { background: rgba(255,107,26,.3); color: #fff; }

/* Scrollbar reset for webviews */
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Focus ring (keyboard only) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Screen wrappers */
.screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
}

.hidden { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════
   01. UTILITY PRIMITIVES
   ═══════════════════════════════════════════════════════════════════════ */

/* Layout helpers */
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.row.center { justify-content: center; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 8px; }
.spacer { flex: 1 1 auto; }
.stack > * + * { margin-top: 8px; }

/* Text utilities */
.muted { color: var(--text-dim); }
.faint { color: var(--text-mute); }
.small { font-size: 12px; }
.xsmall { font-size: 11px; }
.caps { text-transform: uppercase; letter-spacing: .10em; font-weight: 700; }
.center { text-align: center; }
.bold { font-weight: 800; }
.text-ok { color: var(--ok); }
.text-danger { color: var(--danger); }
.text-accent { color: var(--accent); }
.text-info { color: var(--info); }
.text-warn { color: var(--warn); }

/* Spacing shortcuts (kept compatible with old sheet) */
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; } .mt24 { margin-top: 24px; }
.mb4 { margin-bottom: 4px; } .mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; }
.mb16 { margin-bottom: 16px; } .mb24 { margin-bottom: 24px; }
.p8 { padding: 8px; } .p12 { padding: 12px; } .p14 { padding: 14px; } .p16 { padding: 16px; }
.px14 { padding-inline: 14px; }

/* Divider */
.divider {
  height: 1px;
  background: var(--border);
  margin-block: 10px;
}
.divider.soft { background: linear-gradient(90deg, transparent, var(--border-strong), transparent); }

/* Neon text gradient */
.neon-text {
  background: var(--grad-hot);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
  letter-spacing: .02em;
}
.neon-text.cool { background: var(--grad-cool); -webkit-background-clip: text; background-clip: text; }
.neon-text.sunset { background: var(--grad-sunset); -webkit-background-clip: text; background-clip: text; }

/* -------- Card (base surface) -------- */
.card {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.card-pad { padding: 16px 18px; }
.card-pad-lg { padding: 22px 22px; }
.card-neon {
  border-color: var(--border-neon);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,107,26,.14), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(255,77,142,.08), transparent 50%),
    var(--bg-elev);
  box-shadow:
    0 0 0 1px rgba(255,107,26,.14) inset,
    0 14px 42px -16px rgba(255,107,26,.28),
    var(--shadow-card);
}
.card-cool {
  border-color: rgba(92,243,255,.3);
  background:
    radial-gradient(circle at 0% 0%, rgba(92,243,255,.10), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(122,85,255,.06), transparent 50%),
    var(--bg-elev);
}
.card-glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glass-border);
}
.card-title { font-weight: 800; font-size: 15px; margin-bottom: 4px; letter-spacing: -.01em; }

/* -------- Glass surface (utility) -------- */
.glass {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}

/* -------- Chip -------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
  white-space: nowrap;
}
.chip:hover { background: var(--bg-elev-3); }
.chip:active { transform: scale(.96); }
.chip-active, .chip.active {
  background: var(--grad-hot);
  color: #0b0208;
  border-color: transparent;
  box-shadow: var(--glow-orange);
}
.chip.hot { background: var(--accent-dim); border-color: var(--border-neon); color: var(--accent-2); }
.chip.ok  { background: var(--ok-dim); border-color: rgba(74,222,128,.3); color: var(--ok); }
.chip.danger, .chip-danger { background: var(--danger-dim); border-color: rgba(255,77,94,.3); color: var(--danger); }
.chip.info { background: var(--info-dim); border-color: rgba(92,243,255,.3); color: var(--info); }
.chip.muted { background: var(--bg-elev); color: var(--text-dim); }

/* -------- Buttons -------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
  transition: transform var(--dur-fast), filter var(--dur-med),
              background var(--dur-med), border-color var(--dur-med),
              box-shadow var(--dur-med);
  white-space: nowrap;
  -webkit-user-select: none;
}
.btn:hover { background: var(--bg-elev-3); }
.btn:active { transform: scale(.97); }
.btn.accent {
  background: var(--grad-hot); color: #080106;
  border-color: transparent;
  box-shadow: var(--glow-orange);
}
.btn.accent:hover { filter: brightness(1.08); box-shadow: var(--glow-orange-lg); }
.btn.ghost { background: transparent; }
.btn.danger {
  background: var(--danger-dim);
  color: var(--danger);
  border-color: rgba(255,77,94,.3);
}
.btn.small { padding: 7px 12px; font-size: 12.5px; border-radius: var(--radius-xs); }
.btn.block { width: 100%; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Primary CTA */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--grad-hot);
  color: #080106;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 14px 22px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  box-shadow: var(--glow-orange), 0 10px 28px -10px rgba(255,107,26,.6);
  transition: transform var(--dur-fast), filter var(--dur-med), box-shadow var(--dur-med);
  cursor: pointer;
  -webkit-user-select: none;
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: var(--glow-orange-lg), 0 14px 34px -8px rgba(255,107,26,.7); }
.btn-primary:active { transform: scale(.97); filter: brightness(.94); }
.btn-primary:disabled, .btn-primary[disabled] {
  opacity: .5; cursor: not-allowed; box-shadow: none; filter: grayscale(.2);
}

/* Ghost button — secondary action */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  font-weight: 600;
  font-size: 14.5px;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
  cursor: pointer;
}
.btn-ghost:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.btn-ghost:active { transform: scale(.97); }
.btn-ghost:disabled, .btn-ghost[disabled] { opacity: .55; cursor: not-allowed; }

/* SSO button */
.btn-sso {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  padding: 13px 16px;
  font-weight: 700;
  font-size: 14.5px;
  transition: background var(--dur-med), border-color var(--dur-med), transform var(--dur-fast);
  cursor: pointer;
}
.btn-sso:hover { background: var(--bg-elev-3); border-color: var(--border-strong); }
.btn-sso:active { transform: scale(.98); border-color: var(--accent); }

.btn-link {
  background: none;
  border: 0;
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
}
.btn-link:hover { text-decoration: underline; }

.btn-back {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
  border: 1px solid var(--glass-border);
  font-size: 22px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), transform var(--dur-fast);
  cursor: pointer;
}
.btn-back:hover { background: var(--bg-elev-3); }
.btn-back:active { transform: scale(.92); }

/* Icon button */
.icon-btn {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--text);
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
  cursor: pointer;
}
.icon-btn:hover { background: var(--bg-hover); }
.icon-btn:active { background: var(--bg-elev-3); color: var(--accent); transform: scale(.93); }

/* Badges */
.badge, .tab-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent-pink), var(--accent));
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bg), 0 0 14px rgba(255,77,142,.55);
  animation: badgePop .35s var(--ease-spring);
  letter-spacing: .02em;
}
.tab-badge { top: 6px; right: calc(50% - 18px); }

@keyframes badgePop {
  0%   { transform: scale(0) rotate(-20deg); }
  70%  { transform: scale(1.2) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}

/* -------- Avatar -------- */
.avatar {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-elev-2) center/cover no-repeat;
  flex-shrink: 0;
  border: 1px solid var(--border-1);
  overflow: hidden;
}
.avatar.xs { width: 24px; height: 24px; }
.avatar.sm { width: 32px; height: 32px; }
.avatar.md { width: 48px; height: 48px; }
.avatar.lg { width: 80px; height: 80px; border-width: 2px; }
.avatar.xl { width: 112px; height: 112px; border-width: 3px; }
.avatar.round { border-radius: 50%; }

.avatar-init {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-hot);
  color: #0a0306;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}

.avatar-stack {
  display: inline-flex;
}
.avatar-stack > * {
  margin-left: -10px;
  box-shadow: 0 0 0 2px var(--bg-elev);
}
.avatar-stack > *:first-child { margin-left: 0; }
.avatar-overflow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-elev-3);
  color: var(--text-dim);
  font-size: 10.5px; font-weight: 800;
  box-shadow: 0 0 0 2px var(--bg-elev);
}

/* Presence ring around avatar */
.avatar-ring {
  position: relative;
  display: inline-flex;
  padding: 2px;
  border-radius: 50%;
  background: var(--border);
}
.avatar-ring.online  { background: conic-gradient(#4ade80, #2fd46e, #4ade80); box-shadow: 0 0 10px rgba(74,222,128,.45); }
.avatar-ring.in-game { background: conic-gradient(var(--accent), var(--accent-pink), var(--accent)); box-shadow: 0 0 12px rgba(255,107,26,.55); animation: avatarRingSpin 4s linear infinite; }
.avatar-ring.idle    { background: conic-gradient(var(--warn), #ffae3c, var(--warn)); box-shadow: 0 0 10px rgba(255,205,107,.35); }
.avatar-ring.offline { background: var(--bg-elev-3); }
.avatar-ring .avatar { border-color: var(--bg); }

@keyframes avatarRingSpin { to { transform: rotate(360deg); } }

/* -------- Section head -------- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 8px;
}
.section-title {
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.section-action {
  font-size: 13px;
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}
.section-action:hover { text-decoration: underline; text-underline-offset: 3px; }

/* -------- Empty state -------- */
.empty {
  text-align: center;
  padding: 64px 24px 80px;
  color: var(--text-dim);
}
.empty-icon {
  position: relative;
  width: 88px; height: 88px;
  margin: 0 auto 20px;
  border-radius: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,107,26,.24), transparent 60%),
    var(--bg-elev);
  border: 1px solid var(--border-neon);
  color: var(--accent);
  box-shadow: var(--glow-orange), inset 0 1px 0 rgba(255,255,255,.05);
  animation: emptyFloat 5s ease-in-out infinite;
}
.empty-icon svg, .empty-icon::before {
  width: 40px; height: 40px;
  filter: drop-shadow(0 0 10px rgba(255,107,26,.5));
}
.empty h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.01em;
}
.empty p {
  margin: 0 auto;
  font-size: 14px;
  max-width: 280px;
  line-height: 1.55;
}
.empty .btn,
.empty .btn-primary {
  margin-top: 22px;
}

@keyframes emptyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* -------- Loading -------- */
.loading {
  padding: 60px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader {
  width: 30px; height: 30px;
  border: 3px solid rgba(255,107,26,.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .85s linear infinite;
}
.boot-spinner, .spinner {
  width: 26px; height: 26px;
  border: 3px solid rgba(255,107,26,.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .85s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }


/* ═══════════════════════════════════════════════════════════════════════
   02. BOOT SPLASH
   ═══════════════════════════════════════════════════════════════════════ */

.boot {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background:
    radial-gradient(ellipse at 50% 30%, #17081a 0%, #04040b 60%, #020206 100%);
  z-index: var(--z-boot);
  overflow: hidden;
}

.boot::before {
  /* aurora plates */
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 20% 35%, rgba(255,107,26,.20), transparent 40%),
    radial-gradient(circle at 80% 65%, rgba(255,77,142,.18), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(122,85,255,.12), transparent 45%);
  animation: bootAurora 14s ease-in-out infinite alternate;
  filter: blur(30px);
}

@keyframes bootAurora {
  0%   { transform: translate(0, 0) scale(1); opacity: .8; }
  50%  { transform: translate(2%, -3%) scale(1.05); opacity: 1; }
  100% { transform: translate(-3%, 2%) scale(.98); opacity: .9; }
}

.boot-grid {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(rgba(255,107,26,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,107,26,.08) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(600px) rotateX(64deg) translateY(10%);
  animation: bootGridSlide 12s linear infinite;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 72%);
}

@keyframes bootGridSlide {
  0%   { background-position: 0 0; }
  100% { background-position: 48px 48px; }
}

.boot-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 720px; height: 720px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,107,26,.45) 0%, transparent 55%);
  animation: bootGlowPulse 2.4s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes bootGlowPulse {
  from { opacity: .55; transform: translate(-50%, -50%) scale(.85); }
  to   { opacity: 1;   transform: translate(-50%, -50%) scale(1.1); }
}

.boot-logo-wrap {
  position: relative;
  width: 164px; height: 164px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bootLogoIn 1.2s var(--ease-spring) both;
  z-index: 2;
}

@keyframes bootLogoIn {
  0%   { opacity: 0; transform: scale(.2) rotate(-90deg); }
  60%  { opacity: 1; transform: scale(1.18) rotate(12deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.boot-logo {
  width: 104px; height: 104px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(255,107,26,.75)) drop-shadow(0 0 36px rgba(255,107,26,.35));
  position: relative;
  z-index: 3;
}

.boot-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  animation: bootRingSpin 2.4s linear infinite;
}
.boot-ring.ring-1 { animation-duration: 2.2s; border-top-color: var(--accent); }
.boot-ring.ring-2 { inset: 10px; border-top-color: var(--accent-pink); animation-duration: 3.4s; animation-direction: reverse; }
.boot-ring.ring-3 { inset: 22px; border-top-color: var(--accent-3); animation-duration: 5s; }

@keyframes bootRingSpin { to { transform: rotate(360deg); } }

.boot-brand {
  margin-top: 30px;
  font-weight: 900;
  font-size: 32px;
  letter-spacing: .24em;
  background: var(--grad-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: bootBrandIn .9s var(--ease-out) .4s both;
  position: relative; z-index: 2;
}
.boot-brand span { font-weight: 300; letter-spacing: .32em; }

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

.boot-tag {
  margin-top: 8px;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  animation: bootBrandIn .9s var(--ease-out) .6s both;
  position: relative; z-index: 2;
}

.boot-bar {
  margin-top: 30px;
  width: 200px; height: 3px;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  overflow: hidden;
  position: relative; z-index: 2;
}

.boot-bar-fill {
  width: 30%; height: 100%;
  background: var(--grad-sunset);
  border-radius: 3px;
  animation: bootBarLoad 1.6s var(--ease-out) .8s forwards;
  box-shadow: var(--glow-orange);
}

@keyframes bootBarLoad {
  0%   { width: 10%; }
  60%  { width: 85%; }
  100% { width: 100%; }
}

.boot.fade-out { animation: bootFadeOut .55s ease-in forwards; }

@keyframes bootFadeOut { to { opacity: 0; visibility: hidden; } }


/* ═══════════════════════════════════════════════════════════════════════
   03. AUTH SCREEN
   ═══════════════════════════════════════════════════════════════════════ */

.auth {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  padding: calc(var(--safe-top) + 24px) 22px calc(var(--safe-bot) + 32px);
  background:
    radial-gradient(ellipse at 50% 0%, #1a0a15 0%, #04040b 60%, #020206 100%);
  z-index: 20;
}

.auth-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.auth-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,107,26,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,107,26,.055) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  animation: bootGridSlide 14s linear infinite;
}

.auth-bg-glow {
  position: absolute;
  top: -22%; left: 50%;
  transform: translateX(-50%);
  width: 640px; height: 640px;
  background:
    radial-gradient(circle at 40% 40%, rgba(255,107,26,.35) 0%, transparent 55%),
    radial-gradient(circle at 60% 60%, rgba(255,77,142,.25) 0%, transparent 55%);
  animation: bootGlowPulse 5s ease-in-out infinite alternate;
  filter: blur(10px);
}

.auth-hero {
  text-align: center;
  padding: 24px 0 20px;
  position: relative;
  z-index: 1;
}

.auth-logo {
  width: 88px; height: 88px;
  object-fit: contain;
  margin: 0 auto;
  filter: drop-shadow(0 0 14px rgba(255,107,26,.6)) drop-shadow(0 0 36px rgba(255,77,142,.28));
  animation: bootLogoIn 1s var(--ease-spring) both;
}

.auth-title {
  font-weight: 900;
  font-size: 32px;
  letter-spacing: .2em;
  background: var(--grad-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 18px;
}
.auth-title span { font-weight: 300; }

.auth-sub {
  color: var(--text-dim);
  font-size: 13.5px;
  margin-top: 8px;
  letter-spacing: .04em;
}

.auth-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px;
  margin: 26px auto 20px;
  max-width: 360px;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.auth-tab {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  color: var(--text-dim);
  font-weight: 700;
  font-size: 14px;
  transition: background var(--dur-med), color var(--dur-med), box-shadow var(--dur-med);
}
.auth-tab.active {
  background: var(--grad-hot);
  color: #080106;
  box-shadow: var(--glow-orange);
}

.auth-form {
  max-width: 360px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.auth-form input {
  background: var(--bg-input);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 15px 18px;
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
  font-family: inherit;
  letter-spacing: .01em;
}

.auth-form input::placeholder { color: var(--text-mute); }

.auth-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim), 0 0 16px rgba(255,107,26,.25);
  background: var(--bg-elev);
}

.auth-form .btn-primary { margin-top: 6px; padding: 16px; font-size: 15.5px; }

.auth-sso {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-sso::before {
  content: 'or continue with';
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .22em;
  color: var(--text-mute);
  margin-bottom: 4px;
  font-weight: 700;
  position: relative;
}

.auth-error {
  color: var(--danger);
  font-size: 13px;
  min-height: 18px;
  text-align: center;
  margin-top: 6px;
  font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════════════
   04. APP CHROME — Top bar / Tab bar / FAB
   ═══════════════════════════════════════════════════════════════════════ */

/* -------- Offline banner (shown when @capacitor/network reports disconnected) -------- */
.offline-banner {
  position: fixed;
  top: var(--safe-top);
  left: 0; right: 0;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #ffe1d3;
  background: linear-gradient(90deg, #a3360a 0%, #c6420c 45%, #9a2e08 100%);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  z-index: calc(var(--z-chrome) + 1);
  animation: offline-in .28s ease-out;
}
.offline-banner.hidden { display: none; }
.offline-banner svg { opacity: .92; }

@keyframes offline-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* Shift the topbar + main body down while the banner is visible.
   Keyed on body.is-offline (set by app.js) for broad WebView support. */
body.is-offline .topbar {
  transform: translateY(26px);
}
body.is-offline #app > main.view {
  padding-top: calc(var(--topbar-h) + var(--safe-top) + 26px);
}

/* -------- Top bar -------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--topbar-h) + var(--safe-top));
  padding-top: var(--safe-top);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 16px;
  padding-right: 10px;
  background: linear-gradient(180deg, rgba(4,4,11,.92) 0%, rgba(4,4,11,.72) 100%);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--border);
  z-index: var(--z-chrome);
}

.topbar::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 35%, var(--accent-pink) 65%, transparent);
  opacity: .5;
  filter: blur(.5px);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.topbar-logo {
  width: 30px; height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255,107,26,.6));
  animation: logoBreathe 4s ease-in-out infinite alternate;
}

@keyframes logoBreathe {
  from { filter: drop-shadow(0 0 4px rgba(255,107,26,.4)); }
  to   { filter: drop-shadow(0 0 12px rgba(255,107,26,.7)); }
}

.topbar-title {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(180deg, #fff, #e9e9f4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Live indicator — red pulsing dot on topbar live button */
#btn-live {
  position: relative;
}
#btn-live.has-live::after {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 2px var(--bg), 0 0 10px var(--live);
  animation: livePulse 1.2s ease-out infinite;
}

@keyframes livePulse {
  0%   { box-shadow: 0 0 0 2px var(--bg), 0 0 0 0 rgba(255,42,61,.7); }
  70%  { box-shadow: 0 0 0 2px var(--bg), 0 0 0 12px rgba(255,42,61,0); }
  100% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 0 rgba(255,42,61,0); }
}

/* -------- View container -------- */
.view {
  position: absolute;
  top: calc(var(--topbar-h) + var(--safe-top));
  bottom: calc(var(--tabbar-h) + var(--safe-bot));
  left: 0; right: 0;
  overflow-y: auto;
  display: none;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  scrollbar-width: none;
  isolation: isolate;
}
.view.active {
  display: block;
  animation: viewSlideIn .32s var(--ease-out);
}
.view::-webkit-scrollbar { display: none; }

@keyframes viewSlideIn {
  from { opacity: 0; transform: translateY(8px) scale(.998); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Reels uses full-bleed (no scroll container) */
#view-reels { overflow: hidden; }

/* -------- Tab bar (floating rounded with blur) -------- */
.tabbar {
  position: fixed;
  left: 8px; right: 8px;
  bottom: calc(var(--safe-bot) + 6px);
  height: var(--tabbar-h);
  display: flex;
  align-items: center;
  background: rgba(8, 8, 18, .82);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--border-1);
  border-radius: 22px;
  z-index: var(--z-chrome);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 18px 42px -12px rgba(0,0,0,.7),
    0 4px 12px rgba(0,0,0,.4);
  padding-inline: 4px;
}

.tabbar::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 35%, var(--accent-pink) 65%, transparent);
  opacity: .3;
  filter: blur(.4px);
}

.tab {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  transition: color var(--dur-med), transform var(--dur-fast);
  height: 100%;
  padding: 6px 2px;
  cursor: pointer;
}

.tab svg {
  opacity: .75;
  transition: opacity var(--dur-med), filter var(--dur-med), transform var(--dur-med);
}
.tab span { opacity: .85; transition: opacity var(--dur-med); }

.tab:hover { color: var(--text-2); }
.tab:hover svg { opacity: 1; }
.tab:active { transform: scale(.94); color: var(--accent-2); }

.tab.active { color: var(--accent); }
.tab.active svg {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(255,107,26,.7));
  transform: translateY(-2px) scale(1.08);
}
.tab.active span {
  opacity: 1;
  text-shadow: 0 0 10px rgba(255,107,26,.5);
}

.tab.active::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 30%; right: 30%;
  height: 3px;
  background: var(--grad-hot);
  border-radius: 0 0 4px 4px;
  box-shadow: var(--glow-orange);
  animation: tabUnderlineIn .3s var(--ease-spring);
}

@keyframes tabUnderlineIn {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Center wallet tab visual emphasis */
.tab.tab-center svg { transform: scale(1.05); }
.tab.tab-center.active svg { transform: translateY(-3px) scale(1.14); }

/* -------- FAB (floating action button) -------- */
.fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--tabbar-h) + var(--safe-bot) + 16px);
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  background: var(--grad-hot);
  color: #0a0104;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 14px 34px -6px rgba(255,107,26,.55),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 24px rgba(255,77,142,.35);
  z-index: var(--z-fab);
  transition: transform var(--dur-med) var(--ease-spring), opacity var(--dur-med), box-shadow var(--dur-med);
  cursor: pointer;
  animation: fabFloat 4s ease-in-out infinite alternate;
}
.fab:hover {
  box-shadow:
    0 18px 46px -4px rgba(255,107,26,.7),
    0 0 0 1px rgba(255,255,255,.15) inset,
    0 0 42px rgba(255,77,142,.6);
}
.fab:active { transform: scale(.9); }
.fab.hidden { opacity: 0; pointer-events: none; transform: scale(.6) rotate(-30deg); }

.fab-plus { transition: transform var(--dur-med) var(--ease-spring); }
.fab.spin .fab-plus { transform: rotate(135deg); }

@keyframes fabFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-3px); }
}


/* ═══════════════════════════════════════════════════════════════════════
   05. COMMON VIEW CHROME
   ═══════════════════════════════════════════════════════════════════════ */

.view-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(4,4,11,.85) 100%);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
}


/* ═══════════════════════════════════════════════════════════════════════
   06. FEED — stories, posts, composer, pull-to-refresh
   ═══════════════════════════════════════════════════════════════════════ */

.feed-head {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: linear-gradient(180deg, var(--bg) 0%, rgba(4,4,11,.85) 80%, transparent);
  padding: 10px 0 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Pull-to-refresh indicator */
.pull-indicator {
  position: absolute;
  left: 0; right: 0; top: -40px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
.pull-indicator.visible { opacity: 1; }
.pull-indicator .chip {
  background: var(--glass-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: var(--border-neon);
  color: var(--accent);
  box-shadow: var(--glow-orange);
  padding: 8px 14px;
}
.pull-indicator.spinning .chip::before {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  margin-right: 6px;
  border: 2px solid rgba(255,107,26,.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin .75s linear infinite;
}

/* -------- Soft-keyboard aware layout --------------------------------------
   Set by app.js when @capacitor/keyboard fires keyboardWillShow / DidShow.
   --keyboard-height is a px value so views can add bottom padding equal to
   the keyboard height, and the bottom tab bar tucks away so the chat
   composer isn't pushed off-screen on small phones.                          */
:root { --keyboard-height: 0px; }
body.keyboard-visible .tabbar {
  transform: translateY(calc(100% + var(--safe-bot)));
  transition: transform .18s ease;
}
body.keyboard-visible #app > main.view {
  padding-bottom: calc(var(--keyboard-height) + 12px);
}
body.keyboard-visible .chat-compose {
  /* Lift composer above the keyboard on iOS where the webview doesn't
     resize automatically (Capacitor's Body resize handles Android).        */
  bottom: var(--keyboard-height);
  transition: bottom .18s ease;
}

/* -------- Stories rail -------- */
.stories, .story-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 14px 14px 18px;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.stories::-webkit-scrollbar, .story-rail::-webkit-scrollbar { display: none; }

.story {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 78px;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform var(--dur-fast);
}
.story:active { transform: scale(.96); }

.story-ring {
  width: 72px; height: 72px;
  border-radius: 50%;
  padding: 3px;
  background: var(--grad-story);
  animation: storyRingSpin 8s linear infinite;
  position: relative;
  transition: transform var(--dur-med);
  box-shadow: 0 6px 20px -6px rgba(255,107,26,.4);
}
.story-ring::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--grad-story);
  filter: blur(8px);
  opacity: .5;
  z-index: -1;
}
.story-ring.viewed, .story-ring.story-ring-empty {
  background: var(--border-strong);
  box-shadow: none;
  animation: none;
}
.story-ring.viewed::after, .story-ring.story-ring-empty::after { display: none; }
.story-ring.new {
  box-shadow: 0 0 18px rgba(255,107,26,.5), 0 6px 22px -6px rgba(255,77,142,.45);
}

@keyframes storyRingSpin { to { transform: rotate(360deg); } }

.story-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--bg-elev) center/cover no-repeat;
  border: 2px solid var(--bg);
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.story-avatar .avatar { width: 100%; height: 100%; border: 0; border-radius: 0; }

.story-label {
  font-size: 11.5px;
  color: var(--text-dim);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.story-plus {
  position: absolute;
  bottom: 0; right: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--grad-hot);
  color: #0a0104;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  border: 2px solid var(--bg);
  z-index: 3;
}

.story.story-mine .story-ring { animation: none; background: var(--border-strong); }

/* Story viewer */
.story-viewer {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
}
.story-progress {
  position: absolute;
  top: calc(var(--safe-top) + 10px);
  left: 12px; right: 12px;
  height: 3px;
  background: rgba(255,255,255,.2);
  border-radius: 3px;
  z-index: 3;
  overflow: hidden;
}
.story-progress-fill {
  height: 100%;
  background: var(--grad-hot);
  width: 0%;
  box-shadow: var(--glow-orange);
  border-radius: 3px;
}
.story-viewer-head {
  position: absolute;
  top: calc(var(--safe-top) + 22px);
  left: 12px; right: 12px;
  z-index: 3;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.story-viewer-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.story-viewer-body {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-viewer-body img,
.story-viewer-body video {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.story-text {
  position: absolute;
  left: 18px; right: 18px; bottom: 60px;
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
  text-shadow: 0 2px 6px rgba(0,0,0,.75);
  background: rgba(0,0,0,.35);
  padding: 10px 14px;
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.story-nav {
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  background: transparent;
  z-index: 2;
}
.story-nav-prev { left: 0; }
.story-nav-next { right: 0; }

/* -------- Composer trigger card -------- */
.composer {
  margin: 12px 14px;
  border-radius: var(--radius-lg);
}
.composer-trigger {
  flex: 1;
  text-align: left;
  color: var(--text-dim);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-input);
  border: 1px solid var(--border-1);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  cursor: pointer;
}
.composer-trigger:hover {
  background: var(--bg-elev-2);
  border-color: var(--border-strong);
}

.composer-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.composer-row .btn-primary { flex: 1; }

/* Composer modal */
.composer-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.composer-textarea,
.composer textarea {
  width: 100%;
  min-height: 150px;
  background: var(--bg-input);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  resize: vertical;
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  line-height: 1.5;
}
.composer-textarea:focus,
.composer textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.composer-media-input {
  background: var(--bg-input);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color var(--dur-fast);
}
.composer-media-input:focus { border-color: var(--accent); }

.composer-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.composer-toolbar .btn.small { padding: 8px 14px; }

/* -------- Posts -------- */
.feed-list {
  padding: 6px 0 24px;
}

.post {
  position: relative;
  margin: 14px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  animation: postIn .4s var(--ease-out) both;
  transition: transform var(--dur-med), box-shadow var(--dur-med), border-color var(--dur-med);
}
.post:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 42px -14px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,107,26,.12) inset;
  border-color: rgba(255,107,26,.18);
}
.post::before {
  /* hover glow */
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,107,26,0) 20%, rgba(255,107,26,.25) 50%, rgba(255,77,142,0) 80%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-med);
  pointer-events: none;
}
.post:hover::before { opacity: 1; }

.post[data-demo="1"]::after,
.post._demo::after {
  content: 'Demo';
  position: absolute;
  top: 14px; right: 14px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,107,26,.14);
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid rgba(255,107,26,.3);
  z-index: 2;
  pointer-events: none;
}

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

.post-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 10px;
}

.post-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--bg-elev) center/cover no-repeat;
  flex-shrink: 0;
  border: 2px solid var(--border-1);
  overflow: hidden;
}

.post-author { flex: 1; min-width: 0; }
.post-author-name {
  font-weight: 700;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -.005em;
}
.post-author-name .verified { width: 14px; height: 14px; color: var(--info); }
.post-meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
  letter-spacing: .01em;
}

.post-menu {
  color: var(--text-dim);
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.post-menu:hover { background: var(--bg-hover); color: var(--text); }
.post-menu:active { background: var(--bg-elev-3); }

.post-body { padding: 2px 16px 12px; }

.post-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--text-2);
}
.post-text a, .post-text .mention, .post-text .tag {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.post-text a:hover { text-decoration: underline; text-underline-offset: 3px; }

.post-media {
  margin: 10px 0 0;
  width: calc(100% + 32px);
  margin-inline: -16px;
  max-height: 580px;
  background: var(--bg-elev);
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease-out);
}
.post:hover .post-media { transform: scale(1.01); }

.post-media-video {
  margin: 10px 0 0;
  width: calc(100% + 32px);
  margin-inline: -16px;
  background: #000;
  max-height: 580px;
  object-fit: cover;
}

.post-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px 6px;
  border-top: 1px solid var(--border);
}
.post-action {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  transition: color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
  cursor: pointer;
}
.post-action .post-action-icon {
  font-size: 17px;
  line-height: 1;
  display: inline-flex;
  transition: transform var(--dur-med) var(--ease-spring);
}
.post-action:hover { background: var(--bg-hover); }
.post-action:active { transform: scale(.94); background: var(--bg-elev-2); }
.post-action.liked { color: var(--accent-pink); }
.post-action.liked .post-action-icon {
  text-shadow: 0 0 12px rgba(255,77,142,.8);
  animation: likePulse .5s var(--ease-spring);
}
.post-action.liked-pulse .post-action-icon { animation: likePulse .5s var(--ease-spring); }
.post-action.bookmarked { color: var(--accent); }
.post-action svg { width: 20px; height: 20px; }

@keyframes likePulse {
  0%   { transform: scale(.6); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.post-stats {
  padding: 0 16px 14px;
  font-size: 12.5px;
  color: var(--text-dim);
  letter-spacing: .01em;
}

/* Comments sheet */
.comments-sheet {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 240px;
}
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 2px 12px;
  max-height: 380px;
  overflow-y: auto;
}
.comment-row {
  display: flex;
  gap: 10px;
  padding: 6px 4px;
}
.comment-body { flex: 1; min-width: 0; }
.comment-author {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}
.comment-text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
  margin-top: 2px;
}
.comment-empty {
  padding: 40px 16px;
  text-align: center;
}

.comments-compose {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.comment-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  padding: 11px 16px;
  color: var(--text);
  outline: none;
  font-size: 14.5px;
  transition: border-color var(--dur-fast);
}
.comment-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.comment-input::placeholder { color: var(--text-mute); }

/* Share sheet */
.share-sheet {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.share-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  color: var(--text);
  font-weight: 600;
  font-size: 14.5px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  transition: background var(--dur-fast), border-color var(--dur-fast);
  text-align: left;
}
.share-option:hover { background: var(--bg-elev-3); border-color: var(--border-strong); }
.share-option span { font-size: 18px; }

/* Menu sheet */
.menu-sheet {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.menu-option {
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  transition: background var(--dur-fast);
}
.menu-option:hover { background: var(--bg-elev-3); }


/* ═══════════════════════════════════════════════════════════════════════
   07. REELS — fullscreen vertical snap
   ═══════════════════════════════════════════════════════════════════════ */

.reels {
  position: relative;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  background: #000;
  scrollbar-width: none;
}
.reels::-webkit-scrollbar { display: none; }

.reel {
  position: relative;
  width: 100%; height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reel video, .reel-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
}

.reel-grad-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 32%;
  background: linear-gradient(180deg, rgba(0,0,0,.65), transparent);
  pointer-events: none;
  z-index: 1;
}

.reel-grad-bot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 52%;
  background: linear-gradient(0deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.35) 45%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.reel-ghost {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 1;
  cursor: pointer;
}

/* Big heart animation on double-tap */
.reel-heart {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 140px;
  color: #ff3a55;
  opacity: 0;
  transition: transform .5s var(--ease-spring), opacity .5s var(--ease-spring);
  pointer-events: none;
  z-index: 3;
  text-shadow:
    0 0 28px rgba(255,58,85,.75),
    0 0 8px rgba(255,58,85,.95);
}
.reel-heart.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  animation: reelHeartBeat .9s var(--ease-spring);
}

@keyframes reelHeartBeat {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(-8deg); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(1.25) rotate(4deg); opacity: 1; }
  55%  { transform: translate(-50%, -50%) scale(.95) rotate(-2deg); }
  80%  { transform: translate(-50%, -50%) scale(1.05) rotate(0); opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(1.4) rotate(0); opacity: 0; }
}

/* Meta — author + caption */
.reel-meta {
  position: absolute;
  bottom: 24px;
  left: 16px;
  right: 96px;
  color: #fff;
  z-index: 2;
}

.reel-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.reel-user-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.reel-name {
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  letter-spacing: -.01em;
}

.reel-handle {
  color: rgba(255,255,255,.78);
  font-weight: 500;
  font-size: 13px;
  margin-left: 2px;
}

.reel-ago {
  font-size: 11.5px;
  color: rgba(255,255,255,.65);
  letter-spacing: .02em;
}

.reel-caption {
  font-size: 13.5px;
  line-height: 1.45;
  color: #f0f0f7;
  max-height: 92px;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  word-break: break-word;
}

.reel-follow,
.reel-author-row .reel-follow {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--grad-hot);
  color: #080106;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  box-shadow: var(--glow-orange);
}

/* Side action column */
.reel-side, .reel-actions {
  position: absolute;
  right: 12px;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  z-index: 2;
}

.reel-side-btn, .reel-act {
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--dur-fast), background var(--dur-fast);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px -6px rgba(0,0,0,.7);
}
.reel-side-btn:hover, .reel-act:hover { background: rgba(0,0,0,.55); }
.reel-side-btn:active, .reel-act:active { transform: scale(.9); }

.reel-side-btn.liked, .reel-act.is-liked, .reel-act.is-liked .reel-act-ico {
  color: #ff3a55;
}
.reel-act.is-liked .reel-act-ico {
  text-shadow: 0 0 12px rgba(255,58,85,.85);
}

.reel-side-btn svg, .reel-act-ico {
  width: 24px; height: 24px;
  font-size: 26px;
  line-height: 1;
}

.reel-side-count, .reel-act-n {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-top: -4px;
  text-shadow: 0 1px 2px rgba(0,0,0,.85);
}

.reel-act-avatar {
  padding: 0;
  border: 2px solid var(--accent);
  overflow: hidden;
  width: 40px; height: 40px;
  background: #14141d;
}
.reel-act-avatar img,
.reel-act-avatar .avatar {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.reel-views {
  position: absolute;
  top: 16px; right: 16px;
  color: #fff;
  font-size: 12px;
  background: rgba(0, 0, 0, .5);
  padding: 5px 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.08);
}

/* Play/pause indicator in middle */
.reel-playpause {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}
.reel-playpause svg {
  width: 84px; height: 84px;
  color: rgba(255,255,255,.85);
  opacity: 0;
  transition: opacity .3s;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.55));
}
.reel.paused .reel-playpause svg { opacity: 1; }

/* Progress bar */
.reel-progress {
  position: absolute;
  bottom: 82px;
  left: 14px; right: 14px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,.2);
  overflow: hidden;
  z-index: 2;
}
.reel-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--grad-hot);
  transition: width .1s linear;
  box-shadow: var(--glow-orange);
}

/* First-time tip */
.reel-tip {
  position: absolute;
  left: 50%;
  bottom: 40%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 600;
  z-index: 4;
  animation: reelTipBounce 1.4s ease-in-out infinite alternate;
  border: 1px solid rgba(255,255,255,.1);
  pointer-events: none;
}
.reel-tip.is-fading {
  opacity: 0;
  transition: opacity .5s;
}
.reel-tip span { margin-right: 6px; }

@keyframes reelTipBounce {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-8px); }
}

/* Reels demo badge */
.reel[data-demo="1"]::before,
.reel._demo::before {
  content: 'Demo';
  position: absolute;
  top: 14px; left: 14px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,107,26,.22);
  color: #ffdecf;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid rgba(255,107,26,.4);
  z-index: 3;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Reels comments modal */
.reel-comments-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #0a0a13;
}
.reel-comments-list .reel-comment-row {
  display: flex;
  gap: 10px;
  color: #e8e8ef;
  font-size: 13.5px;
  line-height: 1.45;
}
.reel-comments-list .reel-comment-row b {
  color: var(--accent);
  font-weight: 700;
  margin-right: 6px;
}
.reel-comments-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(var(--safe-bot) + 10px);
  border-top: 1px solid rgba(255,255,255,.08);
  background: #0a0a13;
}
.reel-comments-input {
  flex: 1;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  padding: 11px 16px;
  border-radius: 999px;
  outline: none;
  font-size: 14px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.reel-comments-input:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,.09);
}


/* ═══════════════════════════════════════════════════════════════════════
   08. FRIENDS
   ═══════════════════════════════════════════════════════════════════════ */

.friends-search {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(4,4,11,.9) 100%);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  padding: 12px 14px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-input);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.search-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.search-input input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: var(--text);
  font-size: 14.5px;
  font-family: inherit;
}
.search-input input::placeholder { color: var(--text-mute); }
.search-input svg { color: var(--text-dim); width: 18px; height: 18px; flex-shrink: 0; }

/* Standalone search that is also a search input */
input.search-input {
  background: var(--bg-input);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: var(--text);
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  width: 100%;
}
input.search-input::placeholder { color: var(--text-mute); }
input.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

#friends-invite {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--border-neon);
  font-size: 22px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), transform var(--dur-fast);
  flex-shrink: 0;
}
#friends-invite:hover { background: rgba(255,107,26,.24); }
#friends-invite:active { transform: scale(.9); }

/* Friend tabs — pill row */
.friend-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 14px 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.friend-tabs::-webkit-scrollbar { display: none; }

.friend-tab {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--bg-elev);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  border: 1px solid var(--border);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  white-space: nowrap;
  cursor: pointer;
}
.friend-tab:hover { background: var(--bg-elev-2); color: var(--text); }
.friend-tab.active {
  background: var(--grad-hot);
  color: #080106;
  border-color: transparent;
  box-shadow: var(--glow-orange);
}
.friend-tab .chip {
  margin-left: 6px;
  padding: 2px 7px;
  font-size: 10px;
  background: rgba(0,0,0,.3);
  border-color: rgba(0,0,0,.2);
}
.friend-tab.active .chip { background: rgba(0,0,0,.2); color: #080106; }

/* Friend row */
.friend-list { padding: 4px 0 14px; }

.friend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  transition: background var(--dur-fast);
  cursor: pointer;
  position: relative;
}
.friend-row:hover { background: var(--bg-hover); }
.friend-row:active { background: var(--bg-elev-2); }

.friend-avatar {
  position: relative;
  flex-shrink: 0;
}
.friend-avatar .avatar {
  width: 46px; height: 46px;
  border: 2px solid transparent;
}
.friend-row .presence-dot {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--text-mute);
  border: 2px solid var(--bg);
}

.presence-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-mute); }
.presence-dot.online {
  background: var(--ok);
  box-shadow: 0 0 0 2px var(--bg), 0 0 10px rgba(74,222,128,.55);
  animation: presencePulse 2s ease-in-out infinite;
}
.presence-dot.in-game {
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg), 0 0 10px rgba(255,107,26,.7);
  animation: presencePulse 1.6s ease-in-out infinite;
}
.presence-dot.away, .presence-dot.idle {
  background: var(--warn);
  box-shadow: 0 0 0 2px var(--bg);
}
.presence-dot.busy, .presence-dot.dnd { background: var(--danger); box-shadow: 0 0 0 2px var(--bg); }
.presence-dot.offline { background: var(--text-mute); box-shadow: 0 0 0 2px var(--bg); }

@keyframes presencePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

.friend-main {
  flex: 1;
  min-width: 0;
}
.friend-name {
  font-weight: 700;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -.005em;
  color: var(--text);
}
.friend-status {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 3px;
  letter-spacing: .01em;
}

.friend-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.friend-actions .btn-primary,
.friend-actions .btn-ghost {
  padding: 7px 12px;
  font-size: 12.5px;
  border-radius: var(--radius-pill);
}
.friend-actions .btn-primary { box-shadow: 0 0 12px rgba(255,107,26,.35); }

.friend-menu-btn {
  width: 34px; height: 34px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--text-dim);
}

/* Rank tag */
.rank-badge, .badge-rank {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-dim);
  color: var(--accent-2);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  border: 1px solid var(--border-neon);
}
.rank-badge.gold    { color: #ffcd6b; background: rgba(255,205,107,.14); border-color: rgba(255,205,107,.35); }
.rank-badge.silver  { color: #cfd6e4; background: rgba(207,214,228,.12); border-color: rgba(207,214,228,.24); }
.rank-badge.bronze  { color: #e0a074; background: rgba(224,160,116,.14); border-color: rgba(224,160,116,.3); }
.rank-badge.diamond { color: #9fe6ff; background: rgba(159,230,255,.14); border-color: rgba(159,230,255,.3); }

/* Demo badge on friend rows */
.friend-row[data-demo="1"]::after,
.friend-row._demo::after {
  content: 'Demo';
  position: absolute;
  top: 10px; right: 12px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: rgba(255,107,26,.14);
  color: var(--accent-2);
  border: 1px solid rgba(255,107,26,.3);
  pointer-events: none;
}

/* Friend profile sheet */
.profile-sheet { padding: 4px 0; }
.profile-sheet .profile-stats {
  display: flex;
  gap: 22px;
  justify-content: center;
  margin-top: 14px;
  flex-wrap: wrap;
}
.profile-sheet .profile-stats > div { text-align: center; }
.profile-sheet .profile-stats .small { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

/* Sheet actions */
.sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sheet-actions .btn-ghost {
  text-align: left;
  width: 100%;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  padding: 14px 16px;
  border-radius: var(--radius-md);
  justify-content: flex-start;
}
.sheet-actions .btn-ghost:hover { background: var(--bg-elev-3); }


/* ═══════════════════════════════════════════════════════════════════════
   09. MESSAGES
   ═══════════════════════════════════════════════════════════════════════ */

.msg-list-wrap { padding-bottom: 16px; }

.msg-search-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  padding: 12px 14px 8px;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(4,4,11,.9) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.msg-search-input-wrap {
  position: relative;
}
.msg-search-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 18px;
  pointer-events: none;
  opacity: .7;
}
.msg-search-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 11px 14px 11px 40px;
  color: var(--text);
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.msg-search-input::placeholder { color: var(--text-mute); }
.msg-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Active now strip */
.msg-active-strip {
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--border);
}
.msg-active-title {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-dim);
  padding: 0 16px 8px;
}
.msg-active-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 14px 8px;
  scrollbar-width: none;
}
.msg-active-row::-webkit-scrollbar { display: none; }

.msg-active-chip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 64px;
  position: relative;
  cursor: pointer;
}
.msg-active-chip .msg-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(var(--ok), #2fd46e, var(--ok));
  position: relative;
}
.msg-active-chip .msg-avatar .avatar,
.msg-active-chip .msg-avatar .avatar-init {
  width: 100%; height: 100%;
  border: 2px solid var(--bg);
  border-radius: 50%;
}
.msg-active-chip .presence-dot {
  position: absolute;
  bottom: 1px; right: 1px;
  background: var(--ok);
  box-shadow: 0 0 0 2px var(--bg-elev);
  width: 10px; height: 10px;
  border-radius: 50%;
}
.msg-active-name {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-active-empty {
  color: var(--text-mute);
  font-size: 12.5px;
  padding: 8px 18px 12px;
  font-style: italic;
}

/* Message list */
.msg-list {
  padding: 4px 0 16px;
}
.msg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  transition: background var(--dur-fast);
  position: relative;
  cursor: pointer;
}
.msg-row:hover { background: var(--bg-hover); }
.msg-row:active { background: var(--bg-elev-2); }

.msg-row.unread::after {
  content: '';
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(255,107,26,.75);
  animation: presencePulse 2s ease-in-out infinite;
}

.msg-avatar {
  position: relative;
  flex-shrink: 0;
}
.msg-avatar .avatar,
.msg-avatar .avatar-init {
  width: 48px; height: 48px;
  border: 2px solid var(--border-1);
}
.msg-avatar .presence-dot {
  position: absolute;
  right: 0; bottom: 0;
  width: 12px; height: 12px;
  border: 2px solid var(--bg);
  background: var(--ok);
}

.msg-main {
  flex: 1;
  min-width: 0;
}
.msg-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.msg-name {
  font-weight: 700;
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.005em;
  color: var(--text);
}
.msg-time {
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
}
.msg-preview {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.msg-preview-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-preview.is-unread,
.msg-row.unread .msg-preview {
  color: var(--text);
  font-weight: 600;
}

/* Unread badge pill */
.msg-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--grad-hot);
  color: #080106;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: var(--glow-orange);
}

/* Swipe surface */
.msg-swipe-wrap {
  position: relative;
  display: flex;
  width: 100%;
  overflow: hidden;
}
.msg-swipe-surface {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  padding: 12px 14px;
  background: inherit;
  transition: transform .18s var(--ease-out);
}
.msg-swipe-actions {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  pointer-events: none;
}
.msg-row.swipe-open .msg-swipe-actions { pointer-events: auto; }

.msg-swipe-btn {
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 0;
  cursor: pointer;
}
.msg-swipe-btn.mute { background: #4a8dff; }
.msg-swipe-btn.delete { background: linear-gradient(135deg, #ff4d5e, #b8343f); }
.msg-swipe-btn:active { filter: brightness(.92); }

/* Search results "Start a new conversation" section */
.msg-search-results {
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--border);
}
.msg-search-title {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 8px 16px 6px;
}
.msg-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  width: 100%;
  background: transparent;
  transition: background var(--dur-fast);
  cursor: pointer;
}
.msg-search-item:hover { background: var(--bg-hover); }
.msg-search-item .msg-avatar .avatar { width: 42px; height: 42px; }
.msg-search-name { flex: 1; font-weight: 600; font-size: 14px; }
.msg-search-cta {
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.msg-error {
  padding: 50px 20px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}

.msg-row.skeleton {
  pointer-events: none;
  opacity: .7;
}
.msg-row.skeleton .msg-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--bg-elev) 0%, var(--bg-elev-2) 50%, var(--bg-elev) 100%);
  background-size: 200% 100%;
  animation: skelShimmer 1.2s ease-in-out infinite;
}

/* -------- Chat thread -------- */
.chat, .thread-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
}

.chat-head, .thread-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, var(--bg-elev) 0%, rgba(13,13,24,.85) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 5;
}
.chat-head .avatar { width: 38px; height: 38px; }
.chat-head-name { font-weight: 800; font-size: 15px; letter-spacing: -.005em; }
.chat-head-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.chat-head-actions { margin-left: auto; display: flex; gap: 4px; }

.chat-body, .thread-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,107,26,.04), transparent 30%),
    radial-gradient(circle at 90% 90%, rgba(255,77,142,.04), transparent 30%),
    var(--bg);
  scroll-behavior: smooth;
}

/* Bubbles with tails */
.bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 20px;
  font-size: 14.5px;
  line-height: 1.4;
  animation: bubbleIn .22s var(--ease-out);
  word-wrap: break-word;
  position: relative;
  letter-spacing: .005em;
}

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

.bubble.them, .bubble-them {
  align-self: flex-start;
  background: var(--bg-elev-2);
  border-bottom-left-radius: 6px;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.bubble.me, .bubble-me {
  align-self: flex-end;
  background: var(--grad-hot);
  color: #080106;
  border-bottom-right-radius: 6px;
  font-weight: 500;
  box-shadow: 0 6px 20px -10px rgba(255,107,26,.55);
}
.bubble.system {
  align-self: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 999px;
}

.bubble-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.bubble-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}
.bubble-text { white-space: pre-wrap; }

.bubble-time {
  font-size: 10.5px;
  color: var(--text-dim);
  padding: 2px 10px;
  margin-top: -2px;
  margin-bottom: 6px;
  align-self: flex-start;
}
.bubble.me + .bubble-time { text-align: right; align-self: flex-end; }

.thread-sep, .msg-date-sep {
  align-self: center;
  font-size: 11px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  padding: 8px 12px;
}

/* Typing indicator */
.typing-indicator {
  display: inline-flex;
  gap: 4px;
  padding: 12px 16px;
  background: var(--bg-elev-2);
  border-radius: 20px;
  align-self: flex-start;
  width: 62px;
  border: 1px solid var(--border);
  animation: bubbleIn .2s var(--ease-out);
}
.typing-indicator span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(255,107,26,.55);
  animation: typingDot 1.3s ease-in-out infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: .2s; }
.typing-indicator span:nth-child(3) { animation-delay: .4s; }

@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .3; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Compose bar */
.chat-compose, .thread-compose {
  padding: 10px 12px calc(var(--safe-bot) + 10px);
  border-top: 1px solid var(--border);
  background:
    linear-gradient(0deg, var(--bg-elev) 0%, rgba(13,13,24,.9) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.chat-compose textarea {
  flex: 1;
  min-height: 44px;
  max-height: 128px;
  background: var(--bg-input);
  border: 1px solid var(--border-1);
  border-radius: 22px;
  padding: 11px 16px;
  color: var(--text);
  font-size: 14.5px;
  font-family: inherit;
  resize: none;
  outline: none;
  line-height: 1.35;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.chat-compose textarea::placeholder { color: var(--text-mute); }
.chat-compose textarea:focus {
  border-color: var(--accent);
  background: var(--bg-elev);
}
.chat-send {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad-hot);
  color: #080106;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--glow-orange), 0 8px 22px -6px rgba(255,107,26,.55);
  transition: transform var(--dur-fast), filter var(--dur-fast);
  cursor: pointer;
  font-weight: 900;
  font-size: 16px;
}
.chat-send:hover { filter: brightness(1.08); }
.chat-send:active { transform: scale(.9); }
.chat-send:disabled { opacity: .5; box-shadow: none; cursor: not-allowed; }


/* ═══════════════════════════════════════════════════════════════════════
   10. WALLET
   ═══════════════════════════════════════════════════════════════════════ */

.wallet { padding: 14px 14px 20px; }

.wallet-card, .balance-card {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 26px 24px 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,107,26,.55), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(255,77,142,.45), transparent 55%),
    linear-gradient(135deg, #241015 0%, #0d0916 60%, #06040c 100%);
  border: 1px solid rgba(255,107,26,.30);
  color: #fff;
  box-shadow:
    0 26px 60px -28px rgba(255,107,26,.55),
    0 0 0 1px rgba(255,255,255,.04) inset,
    var(--shadow-lg);
  animation: walletCardIn .6s var(--ease-out);
}

@keyframes walletCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.wallet-card::before {
  /* diagonal shine sweep */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 28%, rgba(255,255,255,.10) 50%, transparent 72%);
  animation: shineSweep 6.5s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
.wallet-card::after {
  /* grain + conic accent in corner */
  content: '';
  position: absolute;
  top: -40%; right: -30%;
  width: 360px; height: 360px;
  background: conic-gradient(from 200deg, rgba(255,205,107,.24), rgba(255,77,142,.10), transparent 60%, rgba(255,205,107,.24));
  opacity: .55;
  filter: blur(32px);
  pointer-events: none;
}

@keyframes shineSweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.wallet-card-claimed {
  animation: walletCardBurst .85s var(--ease-spring);
}
@keyframes walletCardBurst {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(255,205,107,.5); }
  100% { transform: scale(1); }
}

.wallet-label {
  font-size: 11px;
  color: rgba(255,255,255,.7);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 800;
  position: relative;
  z-index: 2;
}

.wallet-balance, .balance-hero {
  font-size: 50px;
  font-weight: 900;
  letter-spacing: -.02em;
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1.02;
  background: linear-gradient(90deg, #fff, #ffd5b8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 2;
}

.wallet-currency, .balance-currency {
  font-size: 22px;
  color: rgba(255,255,255,.65);
  margin-left: 6px;
  font-weight: 700;
  -webkit-text-fill-color: rgba(255,255,255,.65);
}

.wallet-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 24px;
  position: relative;
  z-index: 2;
}
.wallet-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  padding: 13px 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: background var(--dur-fast), transform var(--dur-fast), border-color var(--dur-fast);
  cursor: pointer;
}
.wallet-action small { font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.wallet-action:hover { background: rgba(255,255,255,.13); border-color: rgba(255,205,107,.3); }
.wallet-action:active { transform: scale(.95); }
.wallet-action svg,
.wallet-action span[aria-hidden] {
  width: 22px; height: 22px;
  font-size: 18px;
  color: var(--accent-3);
}

/* Transactions */
.tx-list {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tx {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast);
  cursor: pointer;
}
.tx:last-child { border-bottom: 0; }
.tx:hover { background: var(--bg-hover); }
.tx:active { background: var(--bg-elev-2); }

.tx-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}
.tx-icon svg { width: 20px; height: 20px; }
.tx-icon.ok, .tx-icon-pos {
  color: var(--ok);
  background: var(--ok-dim);
  box-shadow: 0 0 0 1px rgba(74,222,128,.2) inset;
}
.tx-icon.down, .tx-icon-neg {
  color: var(--danger);
  background: var(--danger-dim);
  box-shadow: 0 0 0 1px rgba(255,77,94,.2) inset;
}

.tx-main { flex: 1; min-width: 0; }
.tx-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-time {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 2px;
  letter-spacing: .01em;
}

.tx-amount {
  font-weight: 800;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.tx-amount.plus, .tx-amount-pos { color: var(--ok); }
.tx-amount.minus, .tx-amount-neg { color: var(--danger); }

.tx-loading {
  padding: 14px;
  text-align: center;
}

.tx[data-demo="1"] .tx-title::after,
.tx._demo .tx-title::after {
  content: 'Demo';
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,107,26,.14);
  color: var(--accent-2);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid rgba(255,107,26,.3);
  vertical-align: 1px;
}

/* Deposit modal */
.wallet-deposit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wallet-deposit h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}


/* ═══════════════════════════════════════════════════════════════════════
   11. PROFILE
   ═══════════════════════════════════════════════════════════════════════ */

.profile-hero {
  position: relative;
  padding: 36px 18px 18px;
  background:
    radial-gradient(ellipse at top, rgba(255,107,26,.25), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(255,77,142,.14), transparent 55%),
    var(--bg);
  display: flex;
  align-items: center;
  gap: 18px;
  overflow: hidden;
}
.profile-hero::before {
  /* banner gradient background */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background:
    linear-gradient(135deg, rgba(255,107,26,.3), rgba(255,77,142,.18) 50%, transparent),
    linear-gradient(180deg, rgba(255,107,26,.2), transparent);
  opacity: .65;
  pointer-events: none;
}

.profile-hero .avatar.xl {
  border: 3px solid var(--accent);
  box-shadow:
    0 0 0 3px var(--bg),
    0 0 36px rgba(255,107,26,.55),
    var(--shadow-lg);
  position: relative;
  z-index: 2;
}

.profile-name {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -.015em;
  position: relative;
  z-index: 2;
}
.profile-handle {
  color: var(--text-dim);
  font-size: 13.5px;
  margin-top: 3px;
  position: relative;
  z-index: 2;
}
.profile-rank-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  border: 1px solid var(--border-neon);
  position: relative;
  z-index: 2;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px 16px 16px;
}

.stat {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 10px;
  text-align: center;
  transition: transform var(--dur-fast), border-color var(--dur-fast);
}
.stat:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.stat-value {
  font-weight: 900;
  font-size: 22px;
  background: var(--grad-hot);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 4px;
  font-weight: 700;
}

/* XP bar */
.profile-xp {
  padding: 8px 16px 20px;
}
.xp-bar {
  height: 12px;
  background: var(--bg-elev-2);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 8px;
  border: 1px solid var(--border);
  position: relative;
}
.xp-bar::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.05));
  pointer-events: none;
}
.xp-fill {
  height: 100%;
  border-radius: 8px;
  background: var(--grad-hot);
  box-shadow: var(--glow-orange);
  transition: width .7s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.xp-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  animation: xpShimmer 2s linear infinite;
}

@keyframes xpShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.xp-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: .02em;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 6px;
}
.profile-grid img,
.profile-grid-item {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  background: var(--bg-elev);
  border-radius: 2px;
}



/* === PROFILE V2 START ===
   Modern redesigned profile page with cover banner, glowing avatar,
   colored stat cards, pill action buttons.
   ============================================ */
.pv2 { display: flex; flex-direction: column; }

.pv2-cover {
  height: 180px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, #c0391a 0%, #ff6b1a 25%, #ff4d8e 55%, #6b3fa0 85%, #1a1a2e 100%);
}
.pv2-cover-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 70% at 18% 60%, rgba(255,180,80,.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 82% 30%, rgba(255,80,160,.45) 0%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 50% 100%, rgba(60,20,120,.65) 0%, transparent 60%);
  animation: pv2Glow 5s ease-in-out infinite alternate;
}
@keyframes pv2Glow {
  from { opacity: .75; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.06); }
}
.pv2-cover::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

.pv2-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px 18px;
  margin-top: -56px;
  position: relative;
  z-index: 2;
}

.pv2-avatar-wrap { position: relative; margin-bottom: 12px; }
.pv2-avatar-btn {
  width: 108px; height: 108px;
  border-radius: 50%;
  border: 4px solid var(--bg);
  box-shadow:
    0 0 0 3px var(--accent),
    0 0 44px rgba(255,107,26,.55),
    var(--shadow-lg, 0 8px 28px rgba(0,0,0,.5));
  background: var(--bg-elev);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: block;
  padding: 0;
}
.pv2-avatar-btn .avatar,
.pv2-avatar-btn .avatar-init {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  font-size: 38px;
  line-height: 100px;
  background-size: cover;
  background-position: center;
}
.pv2-edit-badge {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: white;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.pv2-level-badge {
  position: absolute;
  top: 2px; right: -10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--grad-hot, linear-gradient(135deg, #ff6b1a, #ff4d8e));
  color: white;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .06em;
  border: 2px solid var(--bg);
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(255,107,26,.5);
  z-index: 3;
}

.pv2-name {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.02em;
  margin: 0 0 2px;
  line-height: 1.15;
}
.pv2-handle {
  color: var(--text-dim);
  font-size: 13.5px;
  margin-bottom: 10px;
}
.pv2-rank {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255,107,26,.13);
  border: 1px solid rgba(255,107,26,.45);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  box-shadow: inset 0 0 12px rgba(255,107,26,.15);
}
.pv2-bio {
  font-size: 13px;
  color: var(--text-dim);
  margin: 12px 0 0;
  max-width: 280px;
  line-height: 1.5;
}

.pv2-xp { padding: 8px 16px 22px; }
.pv2-xp-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 7px;
}
.pv2-xp-track {
  height: 10px;
  background: var(--bg-elev-2, #14141c);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}
.pv2-xp-fill {
  height: 100%;
  background: var(--grad-hot, linear-gradient(90deg, #ff6b1a, #ff4d8e));
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(255,107,26,.55);
  position: relative;
  overflow: hidden;
  width: 0;
}
.pv2-xp-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,.3) 50%, transparent 80%);
  animation: xpShimmer 1.8s linear infinite;
}

.pv2-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 14px 18px;
}
.pv2-stat {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 8px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
  overflow: hidden;
  transition: transform .15s var(--ease-out, ease-out), border-color .15s, background .15s;
}
.pv2-stat:hover { border-color: var(--border-strong); background: var(--bg-elev-2); }
.pv2-stat:active { transform: scale(.95); }
.pv2-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
}
.s-wallet::before { background: linear-gradient(90deg,#f59e0b,#f97316); }
.s-wins::before   { background: linear-gradient(90deg,#ff6b1a,#ff4d8e); }
.s-wr::before     { background: linear-gradient(90deg,#10b981,#06b6d4); }
.s-fr::before     { background: linear-gradient(90deg,#8b5cf6,#d946ef); }
.s-po::before     { background: linear-gradient(90deg,#ec4899,#f97316); }
.s-kd::before     { background: linear-gradient(90deg,#f59e0b,#ef4444); }
.pv2-si { font-size: 22px; line-height: 1; margin-bottom: 2px; }
.pv2-sv {
  font-size: 18px;
  font-weight: 900;
  background: var(--grad-hot, linear-gradient(135deg, #ff6b1a, #ff4d8e));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.01em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.pv2-sl {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 700;
}
.pv2-stat-empty {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
}
.pv2-stat-empty::before { display: none; }

.pv2-actions {
  display: flex;
  gap: 8px;
  padding: 0 14px 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pv2-actions::-webkit-scrollbar { display: none; }
.pv2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform .12s, background .15s, box-shadow .15s;
  letter-spacing: .01em;
  font-family: inherit;
}
.pv2-btn-primary {
  background: var(--grad-hot, linear-gradient(135deg, #ff6b1a, #ff4d8e));
  color: #fff;
  box-shadow: 0 4px 18px rgba(255,107,26,.45);
}
.pv2-btn-primary:hover  { box-shadow: 0 6px 22px rgba(255,107,26,.6); }
.pv2-btn-primary:active { transform: scale(.97); box-shadow: 0 2px 8px rgba(255,107,26,.4); }
.pv2-btn-ghost {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
}
.pv2-btn-ghost:hover  { background: var(--bg-elev-2); border-color: var(--border-strong); }
.pv2-btn-ghost:active { transform: scale(.97); }
.pv2-btn-danger {
  background: rgba(239,68,68,.1);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.32);
}
.pv2-btn-danger:hover  { background: rgba(239,68,68,.2); }
.pv2-btn-danger:active { transform: scale(.97); }

.pv2-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 14px 22px;
}
.pv2-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 12px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: transform .15s, border-color .2s, background .15s;
  position: relative;
  overflow: hidden;
}
.pv2-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff6b1a, #ff4d8e);
  border-radius: 20px 20px 0 0;
  opacity: .8;
}
.pv2-card:hover { border-color: var(--accent); background: var(--bg-elev-2); }
.pv2-card:active { transform: scale(.97); }
.pv2-ci { font-size: 30px; line-height: 1; margin-bottom: 4px; }
.pv2-cv {
  font-size: 28px;
  font-weight: 900;
  background: var(--grad-hot, linear-gradient(135deg, #ff6b1a, #ff4d8e));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.pv2-cl {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}

@media (min-width: 480px) {
  .pv2-cover { height: 220px; }
  .pv2-name { font-size: 30px; }
  .pv2-stats { grid-template-columns: repeat(6, 1fr); }
}
/* === PROFILE V2 END === */
/* === PROFILE V3 START ===
   Adds: meta-pills, mini-meta ring, daily challenges, achievements strip,
   characters strip, detailed stats, activity timeline, verified/vip badges.
   ============================================ */

.pv2-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}
.pv2-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
.pv2-pill-rank {
  background: rgba(255,107,26,.13);
  border: 1px solid rgba(255,107,26,.45);
  color: var(--accent);
}
.pv2-pill-online {
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.4);
  color: #10b981;
}
.pv2-pill-joined {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  color: var(--text-dim);
  letter-spacing: .04em;
  text-transform: none;
}
.pv2-pill-streak {
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.4);
  color: #f59e0b;
}
.pv2-onlinedot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pv2DotPulse 1.6s ease-in-out infinite;
}
@keyframes pv2DotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .6; transform: scale(1.3); }
}

.pv2-status-dot {
  position: absolute;
  bottom: 6px; right: 8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #10b981;
  border: 3px solid var(--bg);
  box-shadow: 0 0 12px #10b981;
}
.pv2-verified, .pv2-vip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  margin-left: 6px;
  vertical-align: middle;
}
.pv2-verified {
  background: linear-gradient(135deg, #06b6d4, #0096ff);
  color: #fff;
  box-shadow: 0 0 14px rgba(0,150,255,.5);
}
.pv2-vip {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  box-shadow: 0 0 14px rgba(245,158,11,.55);
}

/* Mini meta bar */
.pv2-mini-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 4px 14px 18px;
}
.pv2-meta-item {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.pv2-meta-val {
  font-size: 18px;
  font-weight: 900;
  background: var(--grad-hot, linear-gradient(135deg, #ff6b1a, #ff4d8e));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.pv2-meta-lbl {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 700;
}
.pv2-meta-ring {
  --pct: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background:
    conic-gradient(#ff6b1a calc(var(--pct) * 1%), rgba(255,255,255,.08) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.pv2-meta-ring::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--bg-elev);
}
.pv2-meta-ring span {
  position: relative;
  font-size: 11px;
  font-weight: 900;
  color: var(--accent);
}

/* Generic section frame */
.pv2-section {
  padding: 0 14px 18px;
}
.pv2-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pv2-section-title {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .02em;
  margin: 0;
  color: var(--text);
}
.pv2-section-title small {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: .05em;
}
.pv2-section-cta {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  white-space: nowrap;
}
.pv2-section-cta:hover { text-decoration: underline; }

/* Daily challenges */
.pv2-challenges {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pv2-challenge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color .15s, background .15s;
}
.pv2-challenge--done {
  border-color: rgba(16,185,129,.4);
  background: rgba(16,185,129,.06);
}
.pv2-ch-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-elev-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.pv2-challenge--done .pv2-ch-icon {
  background: linear-gradient(135deg, #10b981, #06b6d4);
  color: #fff;
  box-shadow: 0 0 12px rgba(16,185,129,.4);
  font-weight: 900;
}
.pv2-ch-meta {
  flex: 1;
  min-width: 0;
}
.pv2-ch-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.pv2-ch-title small {
  color: var(--text-dim);
  font-weight: 600;
  margin-left: 6px;
  font-size: 11px;
}
.pv2-ch-bar {
  height: 5px;
  background: var(--bg-elev-2);
  border-radius: 999px;
  overflow: hidden;
}
.pv2-ch-bar > div {
  height: 100%;
  background: var(--grad-hot, linear-gradient(90deg, #ff6b1a, #ff4d8e));
  border-radius: 999px;
  transition: width .9s ease-out;
}
.pv2-challenge--done .pv2-ch-bar > div {
  background: linear-gradient(90deg, #10b981, #06b6d4);
}
.pv2-ch-reward {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Achievements strip */
.pv2-ach-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: none;
}
.pv2-ach-strip::-webkit-scrollbar { display: none; }
.pv2-ach {
  flex: 0 0 92px;
  padding: 14px 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  overflow: hidden;
  transition: transform .15s, border-color .15s;
}
.pv2-ach:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.pv2-ach--earned {
  background: linear-gradient(180deg, rgba(255,107,26,.12), var(--bg-elev));
  border-color: rgba(255,107,26,.4);
  box-shadow: 0 0 14px rgba(255,107,26,.18);
}
.pv2-ach--earned::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff6b1a, #ff4d8e);
}
.pv2-ach--locked {
  opacity: .55;
  filter: grayscale(.4);
}
.pv2-ach-icon {
  font-size: 28px;
  line-height: 1;
}
.pv2-ach-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.25;
}
.pv2-ach--earned .pv2-ach-title { color: var(--text); }

/* Characters strip */
.pv2-chars-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: none;
}
.pv2-chars-strip::-webkit-scrollbar { display: none; }
.pv2-charcard {
  flex: 0 0 88px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
  display: flex;
  flex-direction: column;
}
.pv2-charcard:hover { transform: translateY(-2px); border-color: var(--accent); }
.pv2-charcard--active {
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(255,107,26,.4);
}
.pv2-charcard img,
.pv2-charcard-empty {
  width: 100%;
  height: 100px;
  object-fit: cover;
  background: var(--bg-elev-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 900;
  color: var(--text-dim);
}
.pv2-charcard-name {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 7px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Detailed stats */
.pv2-detailed-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.pv2-dstat {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color .15s;
}
.pv2-dstat:hover { border-color: var(--border-strong); }
.pv2-dstat-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--bg-elev-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.pv2-dstat-meta { min-width: 0; }
.pv2-dstat-val {
  font-size: 18px;
  font-weight: 900;
  background: var(--grad-hot, linear-gradient(135deg, #ff6b1a, #ff4d8e));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pv2-dstat-lbl {
  font-size: 10.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin-top: 2px;
}

/* Activity timeline */
.pv2-activity {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pv2-activity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.pv2-activity-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-elev-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.pv2-activity-meta { flex: 1; min-width: 0; }
.pv2-activity-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}
.pv2-activity-sub {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}
.pv2-empty-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  background: var(--bg-elev);
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
  color: var(--text-dim);
  justify-content: center;
}
.pv2-empty-icon { font-size: 22px; }
.pv2-empty-text { font-size: 12px; font-weight: 600; }

@media (min-width: 480px) {
  .pv2-detailed-stats { grid-template-columns: repeat(4, 1fr); }
}
/* === PROFILE V3 END === */


/* ═══════════════════════════════════════════════════════════════════════
   12. ALERTS
   ═══════════════════════════════════════════════════════════════════════ */

.alerts-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  padding: 12px 14px 8px;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(4,4,11,.9) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}
.alerts-topbar .section-title { flex: 1; }
.alerts-unread {
  font-size: 13px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .02em;
}
.alerts-unread-none { color: var(--text-dim); font-weight: 500; }

.alerts-filters {
  display: flex;
  gap: 6px;
  padding: 10px 14px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.alerts-filters::-webkit-scrollbar { display: none; }

.alerts-filter, .alert-filter {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-elev);
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid var(--border);
  transition: background var(--dur-fast), color var(--dur-fast);
  white-space: nowrap;
  cursor: pointer;
}
.alerts-filter:hover { background: var(--bg-elev-2); color: var(--text); }
.alerts-filter.active,
.alerts-filter[aria-pressed="true"] {
  background: var(--grad-hot);
  color: #080106;
  border-color: transparent;
  box-shadow: var(--glow-orange);
}

.alerts-list {
  padding: 6px 0 16px;
}
.alerts-group {
  padding: 6px 0;
}
.alerts-group-title {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-dim);
  padding: 10px 16px 6px;
}

.alert-row, .notif-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast);
  cursor: pointer;
  position: relative;
}
.alert-row:hover { background: var(--bg-hover); }
.alert-row:active { background: var(--bg-elev-2); }

.alert-row.unread,
.notif-row.unread {
  background: rgba(255,107,26,.055);
  border-left: 3px solid var(--accent);
  padding-left: 11px;
}
.alert-row.unread::after {
  content: '';
  position: absolute;
  right: 14px; top: 18px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(255,107,26,.7);
}

.alert-icon, .notif-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev-2);
  color: var(--accent);
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.alert-icon svg, .notif-icon svg { width: 22px; height: 22px; }

.alert-icon.friend   { color: var(--info); background: var(--info-dim); border-color: rgba(92,243,255,.25); }
.alert-icon.like     { color: var(--accent-pink); background: var(--accent-pink-dim); border-color: rgba(255,77,142,.3); }
.alert-icon.squad    { color: var(--accent-3); background: var(--warn-dim); border-color: rgba(255,205,107,.3); }
.alert-icon.match    { color: var(--ok); background: var(--ok-dim); border-color: rgba(74,222,128,.3); }
.alert-icon.duel     { color: var(--accent-pink); background: var(--accent-pink-dim); border-color: rgba(255,77,142,.3); }
.alert-icon.wallet   { color: var(--accent-3); background: var(--warn-dim); border-color: rgba(255,205,107,.3); }
.alert-icon.xp_levelup, .alert-icon.achievement {
  color: var(--accent-3); background: var(--warn-dim); border-color: rgba(255,205,107,.3);
}
.alert-icon.message  { color: var(--info); background: var(--info-dim); border-color: rgba(92,243,255,.25); }
.alert-icon.system   { color: var(--text-dim); background: var(--bg-elev-2); }

.alert-main, .notif-main {
  flex: 1;
  min-width: 0;
}
.alert-title, .notif-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  letter-spacing: -.002em;
}
.alert-title b, .notif-title b { font-weight: 800; }
.alert-sub, .notif-sub {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.alert-time, .notif-time {
  font-size: 11.5px;
  color: var(--text-mute);
  margin-top: 4px;
  letter-spacing: .02em;
}

.alert-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
  margin-left: 8px;
}
.alert-actions .btn {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: var(--radius-pill);
}

.alert-row[data-demo="1"]::before,
.alert-row._demo::before {
  content: 'Demo';
  position: absolute;
  top: 8px; right: 12px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: rgba(255,107,26,.14);
  color: var(--accent-2);
  border: 1px solid rgba(255,107,26,.3);
  z-index: 1;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   13. SQUADS
   ═══════════════════════════════════════════════════════════════════════ */

.squads-header {
  padding: 12px 14px 6px;
  display: flex;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: linear-gradient(180deg, var(--bg), rgba(4,4,11,.85));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.squads-tabs {
  display: flex;
  gap: 6px;
  flex: 1;
}

.squad-create {
  margin: 14px 14px 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform var(--dur-fast), border-color var(--dur-fast);
}
.squad-create:hover { transform: translateY(-1px); }
.squad-create-icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--grad-hot);
  color: #080106;
  font-size: 32px; font-weight: 900; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--glow-orange);
  flex-shrink: 0;
}
.squad-create-body { flex: 1; min-width: 0; }
.squad-create-title { font-weight: 800; font-size: 16px; }
.squad-create-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }

.squad-list {
  padding: 6px 0 20px;
}

.squad-card {
  position: relative;
  margin: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-med), box-shadow var(--dur-med), border-color var(--dur-med);
  cursor: pointer;
}
.squad-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 48px -14px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,107,26,.16) inset;
  border-color: rgba(255,107,26,.22);
}

.squad-card[data-demo="1"]::after,
.squad-card._demo::after {
  content: 'Demo';
  position: absolute;
  top: 12px; right: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,107,26,.18);
  color: #ffdecf;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid rgba(255,107,26,.35);
  z-index: 2;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.squad-banner {
  height: 96px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,107,26,.55), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(255,77,142,.45), transparent 55%),
    linear-gradient(135deg, #211120, #0c0c18);
  position: relative;
  background-size: cover;
  background-position: center;
}
.squad-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: linear-gradient(to right, #000 20%, transparent 80%);
  -webkit-mask-image: linear-gradient(to right, #000 20%, transparent 80%);
  opacity: .6;
}

.squad-body {
  padding: 16px 18px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
}

.squad-crest, .crest {
  width: 68px; height: 68px;
  border-radius: 18px;
  background: var(--grad-hot);
  color: #0a0104;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 28px -8px rgba(255,107,26,.5),
    0 0 0 1px rgba(255,255,255,.08) inset;
  position: absolute;
  top: -38px; left: 18px;
  border: 3px solid var(--bg-elev);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.squad-crest-init {
  background: var(--grad-hot);
  color: #0a0104;
  font-weight: 900;
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.squad-info {
  margin-left: 84px;
  flex: 1;
  min-width: 0;
}
.squad-name {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.01em;
}
.squad-tag {
  font-size: 12px;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: .08em;
}
.squad-meta {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 5px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.squad-avatars {
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.squad-avatars .avatar {
  width: 28px; height: 28px;
  margin-left: -8px;
  box-shadow: 0 0 0 2px var(--bg-elev);
}
.squad-avatars .avatar:first-child { margin-left: 0; }

/* Squad detail */
.squad-detail-head {
  position: relative;
  height: 180px;
  overflow: hidden;
}
.squad-detail-head .btn-back {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
}
.squad-detail-banner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.squad-detail-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,4,11,0) 0%, rgba(4,4,11,.75) 100%);
}
.squad-detail-crest-wrap {
  position: absolute;
  left: 18px;
  bottom: -30px;
  z-index: 2;
}
.squad-detail-crest-wrap .squad-crest {
  position: static;
  margin: 0;
  width: 80px; height: 80px;
  border-radius: 22px;
  font-size: 32px;
  border-width: 4px;
}

.squad-detail-info {
  padding: 40px 18px 10px;
}
.squad-detail-info .squad-name {
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.squad-detail-info .squad-name .squad-tag {
  font-size: 14px;
  color: var(--accent);
}
.squad-desc {
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.5;
}
.squad-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
}

.squad-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.squad-tabs::-webkit-scrollbar { display: none; }

.squad-tab-body {
  padding: 10px 0 20px;
}

/* Members list */
.squad-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}
.squad-member-main { flex: 1; min-width: 0; }
.squad-member-name { font-weight: 700; font-size: 14.5px; }
.squad-member-role {
  font-size: 11.5px;
  color: var(--text-dim);
  letter-spacing: .04em;
}


/* ═══════════════════════════════════════════════════════════════════════
   14. LIVE (streaming)
   ═══════════════════════════════════════════════════════════════════════ */

/* Bottom sheet on feed showing ongoing streams */
.live-sheet {
  padding: 14px 16px 22px;
}
.live-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-weight: 800;
  color: var(--live);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
}

.live-pulse {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--live);
  margin-right: 8px;
  animation: livePulse 1.2s infinite;
  vertical-align: middle;
}

.live-card-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.live-card-row::-webkit-scrollbar { display: none; }

.live-card {
  min-width: 240px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
  scroll-snap-align: start;
  flex-shrink: 0;
  box-shadow: var(--shadow-card);
}
.live-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 12px 30px -10px rgba(255,42,61,.35);
}
.live-card:active { transform: translateY(0); }

.live-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000 center / cover no-repeat;
  position: relative;
}

.live-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--live);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 3px 9px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 10px rgba(255, 42, 61, .5);
  text-transform: uppercase;
}
.live-badge::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: livePulse 1s infinite;
}

.live-title {
  padding: 10px 14px 4px;
  font-weight: 800;
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.005em;
}

.live-meta {
  padding: 0 14px 12px;
  color: var(--text-dim);
  font-size: 12.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.live-viewers {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 700;
}
.live-viewers::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.live-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 12px;
  color: var(--text-dim);
  text-align: center;
}
.live-empty::before {
  content: "📡";
  font-size: 56px;
  line-height: 1;
  opacity: .6;
  filter: drop-shadow(0 0 14px rgba(255, 107, 26, .4));
}

/* Fullscreen viewer */
.live-viewer {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #000;
  overflow: hidden;
}

.live-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.live-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.live-overlay > * { pointer-events: auto; }

.live-top {
  position: absolute;
  top: calc(var(--safe-top) + 12px);
  left: 12px; right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  z-index: 3;
}

.live-streamer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, .55);
  padding: 7px 14px;
  border-radius: 999px;
  color: #fff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.08);
}
.live-streamer .avatar,
.live-streamer .avatar-init {
  width: 28px; height: 28px;
  font-size: 12px;
}

.live-kd {
  background: rgba(0, 0, 0, .55);
  padding: 7px 12px;
  border-radius: 10px;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: .06em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-neon);
  text-shadow: 0 0 6px rgba(255,107,26,.45);
}

.live-close-btn {
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background var(--dur-fast), transform var(--dur-fast);
  line-height: 1;
  cursor: pointer;
}
.live-close-btn:hover { background: rgba(255, 58, 85, .55); }
.live-close-btn:active { transform: scale(.92); }

.live-chat {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 42vh;
  background: linear-gradient(0deg, rgba(0,0,0,.95), transparent);
  display: flex;
  flex-direction: column;
  z-index: 3;
}

.live-chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  -webkit-overflow-scrolling: touch;
}
.live-chat-list::-webkit-scrollbar { width: 0; }

.live-chat-row {
  color: #fff;
  font-size: 13.5px;
  line-height: 1.4;
  word-break: break-word;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  animation: liveChatIn .25s ease-out;
}
.live-chat-row b {
  color: var(--accent);
  font-weight: 800;
  margin-right: 6px;
  text-shadow: 0 0 8px rgba(255, 107, 26, .45);
}

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

.live-chat-form {
  display: flex;
  gap: 8px;
  padding: 10px 14px calc(var(--safe-bot) + 16px);
}

.live-chat-input {
  flex: 1;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  padding: 11px 16px;
  border-radius: 999px;
  outline: none;
  font-size: 14px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.live-chat-input::placeholder { color: rgba(255,255,255,.55); }
.live-chat-input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, .14);
}

.live-chat-send {
  background: var(--grad-hot);
  color: #080106;
  border: 0;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .03em;
  transition: transform var(--dur-fast), filter var(--dur-fast);
  box-shadow: 0 4px 14px rgba(255, 107, 26, .4);
  cursor: pointer;
}
.live-chat-send:hover { filter: brightness(1.08); }
.live-chat-send:active { transform: scale(.95); }
.live-chat-send:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.live-reactions {
  position: absolute;
  right: 14px;
  bottom: 48vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 3;
}

.live-react-btn {
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 26px;
  width: 48px; height: 48px;
  border-radius: 50%;
  transition: transform var(--dur-fast), background var(--dur-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.live-react-btn:active { transform: scale(1.18); }
.live-react-btn:hover { background: rgba(0,0,0,.7); }

.live-react-float {
  position: absolute;
  right: 32px;
  font-size: 30px;
  pointer-events: none;
  animation: reactFloat 2s ease-out forwards;
  z-index: 4;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

@keyframes reactFloat {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-220px) scale(1.5); opacity: 0; }
}

.live-tip-btn {
  background: linear-gradient(135deg, #ffd93d, #ff9f43);
  color: #1a1a1a;
  font-weight: 900;
  padding: 10px 20px;
  border-radius: 999px;
  border: 0;
  font-size: 14px;
  letter-spacing: .04em;
  box-shadow: 0 4px 16px rgba(255, 159, 67, .45);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.live-tip-btn:hover { box-shadow: 0 6px 22px rgba(255, 159, 67, .6); }
.live-tip-btn:active { transform: scale(.95); }

.live-follow-btn {
  background: var(--grad-hot);
  color: #080106;
  padding: 7px 16px;
  border-radius: 999px;
  border: 0;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .03em;
  transition: transform var(--dur-fast), filter var(--dur-fast);
  box-shadow: 0 2px 10px rgba(255, 107, 26, .35);
  cursor: pointer;
}
.live-follow-btn:hover { filter: brightness(1.08); }
.live-follow-btn:active { transform: scale(.95); }
.live-follow-btn.is-following {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  box-shadow: none;
}

.live-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--bg);
  z-index: 5;
  flex-direction: column;
  gap: 16px;
}
.live-status::before {
  content: "";
  width: 36px; height: 36px;
  border: 3px solid rgba(255, 107, 26, .18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.live-ended {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  gap: 14px;
  background: rgba(0, 0, 0, .88);
  z-index: 5;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 28px;
  text-align: center;
}
.live-ended::before {
  content: "📴";
  font-size: 72px;
  line-height: 1;
  opacity: .8;
  filter: drop-shadow(0 0 14px rgba(255,107,26,.2));
}
.live-ended .live-ended-title {
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -.005em;
}
.live-ended .live-ended-sub {
  font-size: 14px;
  color: var(--text-dim);
  max-width: 300px;
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════════════
   15. MODALS & SHEETS
   ═══════════════════════════════════════════════════════════════════════ */

.modal-root, .sheet-root {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: var(--z-modal);
  animation: fadeIn .22s var(--ease-out);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
}
.modal-root.hidden, .sheet-root.hidden { display: none; }
.sheet-root { z-index: var(--z-sheet); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal, .sheet {
  width: 100%;
  max-width: 560px;
  background: var(--bg-elev);
  border-top: 1px solid var(--border-strong);
  border-inline: 1px solid var(--border);
  border-radius: 26px 26px 0 0;
  max-height: 92vh;
  overflow-y: auto;
  padding: 10px 18px calc(var(--safe-bot) + 22px);
  animation: sheetUp .32s var(--ease-spring);
  position: relative;
  box-shadow:
    0 -16px 52px -20px rgba(0,0,0,.7),
    0 -1px 0 rgba(255,255,255,.04);
}
.modal::before, .sheet::before {
  content: '';
  position: absolute;
  top: -1px; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 35%, var(--accent-pink) 65%, transparent);
  opacity: .35;
}

.modal.modal-full {
  max-height: 100vh;
  height: 100vh;
  border-radius: 0;
  padding-top: calc(var(--safe-top) + 10px);
}

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

.modal-grip, .sheet-grip {
  width: 48px; height: 5px;
  background: var(--border-strong);
  border-radius: 4px;
  margin: 8px auto 14px;
}

.modal-title, .sheet-title {
  font-weight: 900;
  font-size: 18px;
  padding: 4px 4px 16px;
  letter-spacing: -.01em;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.modal-close, .sheet-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast), transform var(--dur-fast);
  cursor: pointer;
  z-index: 2;
}
.modal-close:hover, .sheet-close:hover { background: var(--bg-elev-3); }
.modal-close:active, .sheet-close:active { transform: scale(.92); }

.modal-body, .sheet-body { padding: 2px; }


/* ═══════════════════════════════════════════════════════════════════════
   15b. TOASTS
   ═══════════════════════════════════════════════════════════════════════ */

.toast-root {
  position: fixed;
  left: 0; right: 0;
  top: calc(var(--safe-top) + 74px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  z-index: var(--z-toast);
}

.toast {
  pointer-events: auto;
  position: relative;
  background: var(--glass-strong);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--border-1);
  color: var(--text);
  padding: 12px 20px 12px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow:
    0 12px 36px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04) inset;
  animation: toastIn .26s var(--ease-spring), toastOut .3s ease-in 2.6s forwards;
  max-width: 92vw;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.toast::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
  border-radius: 4px 0 0 4px;
}
.toast.ok::before { background: var(--ok); }
.toast.err::before { background: var(--danger); }
.toast.info::before { background: var(--info); }
.toast.warn::before { background: var(--warn); }

.toast.ok { border-color: rgba(74, 222, 128, .38); color: #cbf6da; }
.toast.err { border-color: rgba(255, 77, 94, .48); color: #ffd5d9; }
.toast.info { border-color: rgba(92, 243, 255, .4); color: #c3f4fa; }
.toast.warn { border-color: rgba(255, 205, 107, .42); color: #ffecc1; }

@keyframes toastIn {
  from { transform: translateY(-18px) scale(.92); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes toastOut {
  to { transform: translateY(-18px) scale(.95); opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   16. SKELETONS / LOADERS
   ═══════════════════════════════════════════════════════════════════════ */

.skel, .skeleton, .sk-block, .sk-line {
  position: relative;
  background: linear-gradient(90deg,
    var(--bg-elev) 0%,
    var(--bg-elev-3) 50%,
    var(--bg-elev) 100%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
  overflow: hidden;
}

@keyframes skelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skel-row { display: flex; gap: 12px; padding: 12px 14px; align-items: center; }
.skel-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.skel-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.skel-line { height: 11px; border-radius: 5px; }
.skel-line.w70, .sk-w70 { width: 70%; }
.skel-line.w40, .sk-w40 { width: 40%; }
.skel-line.w15, .sk-w15 { width: 18%; }

.skel-post {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skel-post .skel-row { padding: 0; }
.skel-media { height: 240px; border-radius: 16px; margin-top: 8px; }

.sk-line { height: 10px; }


/* ═══════════════════════════════════════════════════════════════════════
   17. ANIMATION LIBRARY
   ═══════════════════════════════════════════════════════════════════════ */

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@keyframes shimmerSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Utility animation helpers */
.anim-fade-in { animation: fadeInUp .32s var(--ease-out); }
.anim-scale-in { animation: scaleIn .3s var(--ease-spring); }
.anim-float { animation: floaty 3s ease-in-out infinite; }


/* ═══════════════════════════════════════════════════════════════════════
   18. ACCESSIBILITY — Reduced motion
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .boot-grid,
  .boot-glow,
  .auth-bg-glow,
  .wallet-card::before,
  .story-ring,
  .fab,
  .topbar-logo,
  .xp-fill::after,
  .empty-icon {
    animation: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   19. FINE-GRAINED COMPATIBILITY (preserve old selectors)
   ═══════════════════════════════════════════════════════════════════════ */

.composer-modal { padding: 4px; }

/* Ensure nested msg-row inside .msg-swipe-surface renders like a row */
.msg-row .msg-swipe-wrap .msg-swipe-surface {
  padding: 0;
  background: transparent;
}

/* Alerts — alternate layout for messages with actions in-row */
.alert-row .alert-main .row { margin-top: 8px; }

/* Feed-specific composer trigger alignment */
#feed-composer.composer { margin-top: 14px; }
.composer .composer-row .avatar { flex-shrink: 0; }

/* Feed sentinel invisible */
.feed-sentinel { height: 24px; width: 100%; }

/* Skeleton specifically for post-media */
.skel-post > .skel-row + .skel { border-radius: 6px; }

/* Fix deep-nested gradient text in wallet card (sometimes needs explicit fill-color reset) */
.wallet-card .wallet-currency { -webkit-text-fill-color: rgba(255,255,255,.65); }


/* ═══════════════════════════════════════════════════════════════════════
   20. BIGGER-SCREEN POLISH (tablet landscape)
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 600px) {
  .post { max-width: 620px; margin-inline: auto; }
  .squad-card { max-width: 620px; margin-inline: auto; }
  .wallet { max-width: 640px; margin-inline: auto; }
  .tabbar { left: 50%; right: auto; transform: translateX(-50%); width: min(560px, calc(100% - 16px)); }
}

@media (min-width: 900px) {
  body { font-size: 16px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   21. MICRO POLISH & EDGE CASES
   ═══════════════════════════════════════════════════════════════════════ */

/* Tab bar safe-area overflow */
@supports (padding: env(safe-area-inset-bottom)) {
  .tabbar {
    bottom: calc(var(--safe-bot) + 6px);
  }
}

/* Ensure tap-target contrast on muted icons */
.icon-btn svg { pointer-events: none; }

/* Refined selection color */
::selection { background: rgba(255,107,26,.35); color: #fff; }

/* Tap state for presence chips */
.msg-active-chip:active { transform: scale(.94); }

/* Leaderboard position large number */
.friend-actions .chip { font-weight: 800; padding: 4px 10px; }

/* Defensive: ensure gradient text inherits size */
.neon-text, .stat-value, .auth-title, .boot-brand, .wallet-balance {
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════
   AUDIT FIX 2026-04-26 — feature parity pass
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────── COIN PACK PICKER (wallet.js) ─────────────── */
.modal-coin-deposit .modal-body { padding: 0 !important; }
.wallet-deposit { padding: 8px 4px 4px; }
.deposit-header {
  display: flex; align-items: center; gap: 10px;
  padding: 0 4px 12px; border-bottom: 1px solid rgba(255,107,26,.15);
}
.deposit-header svg { color: var(--accent, #ff6b1a); }
.deposit-header h3 {
  margin: 0; font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 18px; font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(135deg, #ffb84d, #ff6b1a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.coin-packs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin: 16px 0;
}
@media (min-width: 480px) { .coin-packs { grid-template-columns: repeat(4, 1fr); } }
.coin-pack-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px 10px; cursor: pointer;
  background: linear-gradient(165deg, rgba(20,18,32,.85), rgba(8,4,2,.95));
  border: 1px solid rgba(255,107,26,.22);
  border-radius: 14px;
  color: #fff; font-family: inherit;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.coin-pack-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,184,77,.55);
  box-shadow: 0 10px 26px rgba(255,107,26,.22);
}
.coin-pack-card.active {
  border-color: #ff6b1a;
  background: linear-gradient(165deg, rgba(255,107,26,.18), rgba(20,18,32,.95));
  box-shadow: 0 0 0 2px rgba(255,107,26,.45), 0 12px 28px rgba(255,107,26,.35);
}
.coin-pack-card.popular { border-color: rgba(255,184,77,.65); }
.pack-badge-pop {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #ff6b1a, #ffb84d);
  color: #08010a; font-size: 9px; font-weight: 800; letter-spacing: .12em;
  padding: 3px 7px; border-radius: 99px; white-space: nowrap;
  box-shadow: 0 4px 10px rgba(255,107,26,.45);
}
.pack-coins {
  display: flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', 'Orbitron', monospace;
  font-size: 14px; font-weight: 700;
  color: #ffb84d;
}
.pack-coin-amount { font-variant-numeric: tabular-nums; }
.pack-bonus {
  font-size: 10px; color: #00e5ff; font-weight: 700;
  letter-spacing: .04em; min-height: 12px;
}
.pack-bonus-inline { color: #00e5ff; font-weight: 700; }
.pack-price {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 22px; font-weight: 900;
  margin-top: 4px; color: #fff;
}
.pack-label { font-size: 11px; color: #aab; letter-spacing: .04em; text-transform: uppercase; }

.custom-amount-row { padding: 10px 4px 0; border-top: 1px solid rgba(255,255,255,.06); }
.custom-amount-row label { display: block; font-size: 12px; color: #aab; margin-bottom: 6px; }
.custom-amount-row input {
  width: 100%; padding: 11px 14px; border-radius: 10px;
  border: 1px solid rgba(255,107,26,.28); background: rgba(20,18,32,.85);
  color: #fff; font-family: inherit; font-size: 15px;
}
.custom-amount-row input:focus { outline: none; border-color: #ff6b1a; box-shadow: 0 0 0 3px rgba(255,107,26,.18); }
.amount-err { color: #ff6b6b; font-size: 12px; min-height: 14px; margin-top: 4px; }

.deposit-summary {
  margin: 14px 0 8px; padding: 10px 14px;
  background: rgba(255,107,26,.06); border: 1px dashed rgba(255,107,26,.3);
  border-radius: 10px; color: #ffb84d; font-size: 13px; text-align: center;
}
.paypal-buttons-wrap { min-height: 50px; margin-top: 4px; }
.paypal-placeholder {
  text-align: center; color: #888; font-size: 13px;
  padding: 14px; border: 1px dashed rgba(255,255,255,.1); border-radius: 10px;
}
.paypal-fallback { margin-top: 6px; }
.paypal-fallback button { display: flex; align-items: center; justify-content: center; }
.deposit-cancel { margin-top: 10px; width: 100%; }

/* ─────────────── FUTURISTIC SHOOTER CALL BUTTONS (messages.js) ─────────────── */
.fps-btn {
  position: relative;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(165deg, rgba(20,18,32,.85), rgba(8,4,2,.95));
  border: 1px solid rgba(255,107,26,.32);
  border-radius: 8px;
  color: #ffb84d; cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
  overflow: visible;
}
.fps-btn:hover {
  color: #00e5ff;
  border-color: rgba(0,229,255,.55);
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(0,229,255,.25), inset 0 0 12px rgba(0,229,255,.08);
}
.fps-btn:active { transform: scale(.94); }
.fps-btn .fps-icon { display: block; pointer-events: none; }
.fps-btn .fps-corner {
  position: absolute; width: 7px; height: 7px;
  border: 1.5px solid currentColor; opacity: .65;
  pointer-events: none; transition: opacity .14s ease;
}
.fps-btn .fps-corner.tl { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.fps-btn .fps-corner.tr { top: -2px; right: -2px; border-left: 0; border-bottom: 0; }
.fps-btn .fps-corner.bl { bottom: -2px; left: -2px; border-right: 0; border-top: 0; }
.fps-btn .fps-corner.br { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.fps-btn:hover .fps-corner { opacity: 1; }

.fps-btn-voice { color: #3af5c5; }
.fps-btn-voice:hover { color: #3af5c5; border-color: rgba(58,245,197,.55); box-shadow: 0 0 18px rgba(58,245,197,.3); }
.fps-btn-video { color: #ffb84d; }
.fps-btn-video:hover { color: #ffb84d; border-color: rgba(255,184,77,.65); box-shadow: 0 0 18px rgba(255,184,77,.35); }
.fps-btn-info { color: #b8b8d0; }

/* ─────────────── INCOMING-CALL RINGER (app.js) ─────────────── */
.incoming-ringer {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  animation: ringerIn .25s cubic-bezier(.4,0,.2,1);
}
.incoming-ringer.leaving { animation: ringerOut .2s ease forwards; }
@keyframes ringerIn  { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(18px); } }
@keyframes ringerOut { from { opacity: 1; } to { opacity: 0; } }
.ringer-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,107,26,.30), transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(0,229,255,.20), transparent 60%),
    rgba(4,3,8,.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.ringer-card {
  position: relative;
  width: min(440px, 92vw);
  display: flex; flex-direction: column; align-items: center;
  padding: 36px 28px 24px;
  background: linear-gradient(180deg, rgba(20,18,32,.94), rgba(8,4,2,.97));
  border: 1px solid rgba(255,107,26,.4);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(255,107,26,.25), inset 0 1px 0 rgba(255,255,255,.05);
}
.ringer-pulse {
  position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px;
  border: 2px solid rgba(255,107,26,.5);
  border-radius: 24px; pointer-events: none;
  animation: ringerPulse 1.6s ease-in-out infinite;
}
@keyframes ringerPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,107,26,.55); opacity: 1; }
  50%     { box-shadow: 0 0 0 14px rgba(255,107,26,0); opacity: .55; }
}
.ringer-avatar {
  width: 132px; height: 132px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, #ff6b1a, #ffb84d);
  display: flex; align-items: center; justify-content: center;
  border: 3px solid rgba(255,107,26,.45);
  box-shadow: 0 0 30px rgba(255,107,26,.45);
  margin-bottom: 18px;
  animation: avatarBob 1.6s ease-in-out infinite;
}
@keyframes avatarBob { 0%,100%{transform:scale(1);} 50%{transform:scale(1.04);} }
.ringer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ringer-init {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 56px; font-weight: 900; color: #08010a;
}
.ringer-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 24px; font-weight: 800; letter-spacing: .04em;
  color: #fff; margin-bottom: 6px; text-align: center;
}
.ringer-sub {
  display: flex; align-items: center; gap: 6px;
  color: #ffb84d;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: .06em;
  margin-bottom: 28px;
  animation: ringerBlink 1.4s ease-in-out infinite;
}
@keyframes ringerBlink { 0%,100%{opacity:1} 50%{opacity:.5} }
.ringer-actions {
  display: flex; gap: 60px; align-items: center; justify-content: center;
}
.ringer-btn {
  width: 72px; height: 72px;
  border-radius: 50%; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform .14s, box-shadow .14s, filter .14s;
  position: relative;
}
.ringer-btn::before {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 2px solid currentColor;
  opacity: .35;
}
.ringer-btn.decline {
  background: linear-gradient(135deg, #ff3a5c, #c4143b);
  box-shadow: 0 12px 32px rgba(255,58,92,.55), inset 0 1px 0 rgba(255,255,255,.25);
  animation: shakeRing 1.2s ease-in-out infinite;
}
@keyframes shakeRing {
  0%,100% { transform: rotate(0); }
  20%     { transform: rotate(-12deg); }
  40%     { transform: rotate(12deg); }
  60%     { transform: rotate(-8deg); }
  80%     { transform: rotate(6deg); }
}
.ringer-btn.accept {
  background: linear-gradient(135deg, #3af5c5, #2ecc71);
  box-shadow: 0 12px 32px rgba(58,245,197,.55), inset 0 1px 0 rgba(255,255,255,.25);
  animation: pulseAccept 1s ease-in-out infinite;
}
@keyframes pulseAccept {
  0%,100% { box-shadow: 0 12px 32px rgba(58,245,197,.55), inset 0 1px 0 rgba(255,255,255,.25); }
  50%     { box-shadow: 0 16px 44px rgba(58,245,197,.75), inset 0 1px 0 rgba(255,255,255,.3); }
}
.ringer-btn.accept.video {
  background: linear-gradient(135deg, #ffb84d, #ff6b1a);
  box-shadow: 0 12px 32px rgba(255,107,26,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.ringer-btn:hover { filter: brightness(1.1); transform: translateY(-2px) scale(1.04); }
.ringer-btn:active { transform: scale(.95); }

/* ─────────────── LOGIN EXTRAS (index.html) ─────────────── */
.auth-row-flex {
  display: flex; justify-content: space-between; align-items: center;
  margin: 4px 0 8px;
  font-size: 13px;
}
.auth-remember {
  display: inline-flex; align-items: center; gap: 6px;
  color: #aab; cursor: pointer; user-select: none;
}
.auth-remember input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: #ff6b1a;
  cursor: pointer;
}
.auth-forgot {
  color: #ffb84d; text-decoration: none;
  font-weight: 600;
  transition: color .14s ease;
}
.auth-forgot:hover { color: #ff6b1a; text-decoration: underline; }
.auth-sso-splitter {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 8px;
  color: #888; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.auth-sso-splitter::before, .auth-sso-splitter::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}
.btn-sso-google { background: #fff; color: #1f1f1f; }
.btn-sso-google:hover { background: #f5f5f5; }
.btn-sso-apple { background: #000; color: #fff; border: 1px solid #333; }
.btn-sso-apple:hover { background: #1a1a1a; }

/* ─────────────── FRIENDS DISCOVER + BLOCKED + DUEL (friends.js) ─────────────── */
.discover-search {
  position: relative; padding: 12px 14px 8px;
}
.discover-search input {
  width: 100%; padding: 12px 16px 12px 42px;
  background: rgba(20,18,32,.85); border: 1px solid rgba(255,107,26,.25);
  border-radius: 24px; color: #fff; font-size: 15px; font-family: inherit;
  outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.discover-search input:focus {
  border-color: #ff6b1a; box-shadow: 0 0 0 3px rgba(255,107,26,.18);
  background: rgba(20,18,32,1);
}
.discover-search-icon {
  position: absolute; left: 28px; top: 50%; transform: translateY(-30%);
  color: #ffb84d; pointer-events: none;
}
.btn-duel {
  background: linear-gradient(135deg, #ff4526, #ff6b1a) !important;
  color: #fff !important; border: none !important;
  font-weight: 700; padding: 8px 14px; border-radius: 8px;
  letter-spacing: .04em; cursor: pointer;
  box-shadow: 0 4px 12px rgba(255,69,38,.3);
  transition: transform .14s, box-shadow .14s;
}
.btn-duel:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,69,38,.45); }
.btn-icon-danger {
  width: 36px; height: 36px;
  background: rgba(255,58,92,.08); color: #ff4526;
  border: 1px solid rgba(255,58,92,.3); border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .14s;
}
.btn-icon-danger:hover { background: rgba(255,58,92,.18); border-color: #ff4526; }

/* ─── PHASE 5: rank chips + post-author link + linkified text ─────── */
.rank-chip {
  display: inline-block;
  font-family: 'JetBrains Mono', 'Orbitron', monospace;
  font-size: 9px; font-weight: 800;
  padding: 2px 7px; margin-left: 6px;
  border-radius: 4px;
  letter-spacing: .12em; text-transform: uppercase;
  vertical-align: middle;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.rank-bronze   { color: #cd7f32; border-color: rgba(205,127,50,.45);  background: rgba(205,127,50,.10); }
.rank-silver   { color: #c0c0c0; border-color: rgba(192,192,192,.45); background: rgba(192,192,192,.10); }
.rank-gold     { color: #ffd700; border-color: rgba(255,215,0,.45);   background: rgba(255,215,0,.10); }
.rank-plat     { color: #38d9a9; border-color: rgba(56,217,169,.45);  background: rgba(56,217,169,.10); }
.rank-diamond  { color: #00e5ff; border-color: rgba(0,229,255,.45);   background: rgba(0,229,255,.10); }
.rank-master   {
  color: #ff6b1a;
  border-color: rgba(255,107,26,.55);
  background: linear-gradient(135deg, rgba(255,107,26,.18), rgba(255,184,77,.12));
  box-shadow: 0 0 8px rgba(255,107,26,.35);
}
.post-author-link { color: #fff; text-decoration: none; font-weight: 700; }
.post-author-link:hover { color: #ffb84d; }
.post-text a, .bubble-content a { color: #ffb84d; text-decoration: none; }
.post-text a:hover, .bubble-content a:hover { text-decoration: underline; }
.post-text .hashtag, .post-text .mention { color: #00e5ff; font-weight: 600; }
.post-privacy { color: #aab; font-size: 11px; }

/* ─── messages: day-bucket separator + kebab menu ──────────────────── */
.bubble-day-sep {
  display: flex; align-items: center; justify-content: center;
  margin: 16px 0 8px;
}
.bubble-day-sep span {
  background: rgba(255,255,255,.05);
  color: #aab; font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: 99px;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.06);
}
.bubble { position: relative; }
.msg-kebab {
  position: absolute; top: 4px; right: -28px;
  width: 24px; height: 24px;
  background: rgba(20,18,32,.85);
  border: 1px solid rgba(255,255,255,.1); border-radius: 6px;
  color: #aab; font-size: 14px;
  cursor: pointer; opacity: 0;
  transition: opacity .12s ease;
}
.bubble.in .msg-kebab { left: -28px; right: auto; }
.bubble:hover .msg-kebab { opacity: 1; }
.msg-kebab:hover { color: #ff6b1a; border-color: rgba(255,107,26,.45); }
.bubble-status.seen { color: #00e5ff; font-weight: 700; }
.msg-kebab-menu {
  background: rgba(15,12,22,.97);
  border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
  padding: 4px;
  box-shadow: 0 12px 32px rgba(0,0,0,.6);
  display: flex; flex-direction: column;
  min-width: 130px;
}
.msg-kebab-item {
  background: transparent; border: none;
  color: #fff; font: 13px/1 system-ui, sans-serif;
  text-align: left; padding: 8px 12px;
  border-radius: 6px; cursor: pointer;
}
.msg-kebab-item:hover { background: rgba(255,107,26,.1); }
.msg-kebab-item.danger { color: #ff4526; }
.msg-kebab-item.danger:hover { background: rgba(255,69,38,.12); }

/* ─── reels extras: progress bar + tip + duel + follow + game chip ─── */
.reel-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: rgba(0,0,0,.35);
  pointer-events: none; z-index: 5;
}
.reel-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #ff6b1a, #ffb84d);
  box-shadow: 0 0 6px rgba(255,107,26,.6);
  transition: width .12s linear;
}
.reel-game-chip {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 4px 0 6px;
  padding: 3px 9px;
  background: rgba(255,107,26,.12);
  border: 1px solid rgba(255,107,26,.35);
  border-radius: 99px;
  color: #ffb84d; font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
}
.reel-follow {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 99px;
  background: linear-gradient(135deg, #ff6b1a, #ffb84d);
  color: #08010a; font-weight: 800; font-size: 12px;
  border: none; cursor: pointer;
  letter-spacing: .04em;
}
.reel-follow.is-following {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}
.reel-follow:hover { filter: brightness(1.1); }
.reel-act-tip { color: #ffd700 !important; }
.reel-act-duel { color: #ff4526 !important; }

/* ─── friends quick-tools toolbar + new tab buttons ─────────────────── */
.friends-quick-tools {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 0 12px 8px;
  align-items: center;
}
.qtool {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: rgba(255,107,26,.08);
  border: 1px solid rgba(255,107,26,.35);
  border-radius: 8px;
  color: #ffb84d; font-weight: 700; font-size: 12px;
  cursor: pointer;
  transition: all .14s ease;
}
.qtool:hover {
  background: rgba(255,107,26,.18);
  border-color: #ff6b1a;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255,107,26,.25);
}
.qtool-duel {
  background: linear-gradient(135deg, rgba(255,69,38,.18), rgba(255,107,26,.12));
  border-color: rgba(255,69,38,.45);
  color: #ff4526;
}
.qtool-duel:hover {
  background: linear-gradient(135deg, rgba(255,69,38,.3), rgba(255,107,26,.2));
  box-shadow: 0 4px 14px rgba(255,69,38,.3);
}
.qtool-ico { font-size: 14px; }
.qtool-select {
  padding: 8px 10px;
  background: rgba(20,18,32,.85);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #fff; font-size: 12px;
  cursor: pointer;
}
.qtool-select:focus { border-color: #ff6b1a; outline: none; }

/* ─── messages: duel button on chat header (FPS-style) ─────────────── */
.fps-btn-duel { color: #ff4526; }
.fps-btn-duel:hover { color: #ff4526; border-color: rgba(255,69,38,.6); box-shadow: 0 0 18px rgba(255,69,38,.35); }

/* === ALERTS V2 START ===
   Modern card-based alerts with gradient stripes, hover-dismiss, pill chips.
   ============================================ */
.av2 {
  display: flex;
  flex-direction: column;
  padding-bottom: 80px;
}

/* Header */
.av2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 6px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(180deg, var(--bg) 60%, transparent);
  backdrop-filter: blur(8px);
}
.av2-header-left { display: flex; align-items: center; gap: 10px; }
.av2-pill-unread {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  background: var(--grad-hot, linear-gradient(135deg, #ff6b1a, #ff4d8e));
  color: #fff;
  box-shadow: 0 2px 14px rgba(255,107,26,.35);
}
.av2-pill-unread--zero {
  background: rgba(16,185,129,.15);
  color: #10b981;
  border: 1px solid rgba(16,185,129,.4);
  box-shadow: none;
}
.av2-mark-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .15s;
}
.av2-mark-all:hover {
  background: var(--bg-elev-2);
  border-color: var(--border-strong);
}
.av2-mark-all:active { transform: scale(.97); }
.av2-mark-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

/* Filter chips */
.av2-chips {
  display: flex;
  gap: 8px;
  padding: 6px 16px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.av2-chips::-webkit-scrollbar { display: none; }
.av2-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--bg-elev);
  color: var(--text-dim);
  border: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  font-family: inherit;
}
.av2-chip:hover {
  background: var(--bg-elev-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.av2-chip--active {
  background: var(--grad-hot, linear-gradient(135deg, #ff6b1a, #ff4d8e));
  color: #fff !important;
  border-color: transparent;
  box-shadow: 0 2px 14px rgba(255,107,26,.35);
}
.av2-chip--active .av2-chip-count {
  background: rgba(255,255,255,.25);
  color: #fff;
}
.av2-chip-label { letter-spacing: .01em; }
.av2-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  background: rgba(255,107,26,.15);
  color: var(--accent);
}
.av2-chip-count:empty { display: none; }

/* Group header */
.av2-group-header {
  padding: 18px 16px 10px;
}
.av2-group-header span {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--bg-elev);
  border: 1px solid var(--border);
}

/* List */
.av2-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px;
}

/* Card */
.av2-card {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 14px 14px 18px;
  display: flex;
  cursor: pointer;
  overflow: hidden;
  transition: transform .12s, border-color .15s, background .15s;
}
.av2-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-elev-2);
  transform: translateY(-1px);
}
.av2-card:active { transform: translateY(0) scale(.99); }

/* Left gradient stripe */
.av2-card-stripe {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--text-dim), transparent);
  opacity: .35;
}
.av2-card[data-bucket="likes"]    .av2-card-stripe { background: linear-gradient(180deg,#ec4899,#f97316); opacity: 1; }
.av2-card[data-bucket="comments"] .av2-card-stripe { background: linear-gradient(180deg,#0096ff,#06b6d4); opacity: 1; }
.av2-card[data-bucket="duels"]    .av2-card-stripe { background: linear-gradient(180deg,#ff6b1a,#ff4d8e); opacity: 1; }
.av2-card[data-bucket="follows"]  .av2-card-stripe { background: linear-gradient(180deg,#8b5cf6,#d946ef); opacity: 1; }
.av2-card[data-bucket="mentions"] .av2-card-stripe { background: linear-gradient(180deg,#f59e0b,#ef4444); opacity: 1; }
.av2-card[data-bucket="friends"]  .av2-card-stripe { background: linear-gradient(180deg,#10b981,#06b6d4); opacity: 1; }
.av2-card[data-bucket="system"]   .av2-card-stripe { background: linear-gradient(180deg,#94a3b8,#64748b); opacity: 1; }

/* Unread state */
.av2-card--unread {
  background: var(--bg-elev-2);
  border-color: rgba(255,107,26,.35);
  box-shadow: 0 0 0 1px rgba(255,107,26,.1), 0 4px 16px rgba(255,107,26,.08);
}
.av2-card--unread .av2-title { color: var(--text); }
.av2-unread-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 8px;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--accent);
  animation: av2DotPulse 2s ease-in-out infinite;
}
@keyframes av2DotPulse {
  0%,100% { opacity: 1; }
  50% { opacity: .55; }
}

/* Dismiss button (top-right corner) */
.av2-dismiss {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .15s, transform .15s, background .15s, color .15s;
  font-family: inherit;
  z-index: 2;
}
.av2-card:hover .av2-dismiss {
  opacity: 1;
  transform: scale(1);
}
.av2-dismiss:hover {
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.45);
  color: #ef4444;
}
@media (hover: none) {
  /* Always show on touch devices */
  .av2-dismiss { opacity: .7; transform: scale(1); }
}

/* Card body */
.av2-card-body {
  display: flex;
  gap: 12px;
  width: 100%;
  align-items: flex-start;
}

/* Icon */
.av2-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  position: relative;
  color: var(--text);
}
.av2-icon[data-type="like"],
.av2-icon[data-type="post_like"] { background: rgba(236,72,153,.12); border-color: rgba(236,72,153,.4); color: #ec4899; }
.av2-icon[data-type="comment"],
.av2-icon[data-type="post_comment"] { background: rgba(0,150,255,.12); border-color: rgba(0,150,255,.4); color: #0096ff; }
.av2-icon[data-type="duel"],
.av2-icon[data-type="duel_invite"] { background: rgba(255,107,26,.14); border-color: rgba(255,107,26,.4); color: var(--accent); }
.av2-icon[data-type="follow"] { background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.4); color: #8b5cf6; }
.av2-icon[data-type="mention"] { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); color: #f59e0b; }
.av2-icon[data-type="friend_request"],
.av2-icon[data-type="friend_accepted"] { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.4); color: #10b981; }
.av2-icon[data-type="message"],
.av2-icon[data-type="dm"] { background: rgba(0,150,255,.12); border-color: rgba(0,150,255,.4); color: #0096ff; }
.av2-icon[data-type="xp_levelup"] { background: rgba(255,107,26,.14); border-color: rgba(255,107,26,.4); color: var(--accent); }
.av2-icon[data-type="squad_invite"] { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.4); color: #f59e0b; }

/* Avatar variant — image inside, badge on top-right */
.av2-icon--avatar {
  border-radius: 50%;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: none;
  width: 44px;
  height: 44px;
}
.av2-icon--avatar .avatar,
.av2-icon--avatar .avatar-init {
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 44px;
  background-size: cover;
  background-position: center;
}
.av2-icon-badge {
  position: absolute;
  bottom: -3px; right: -3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  box-shadow: 0 0 0 2px var(--bg-elev), 0 2px 8px rgba(0,0,0,.4);
}
.av2-icon-badge[data-type="like"] { background: linear-gradient(135deg,#ec4899,#f97316); color:#fff; }
.av2-icon-badge[data-type="comment"] { background: linear-gradient(135deg,#0096ff,#06b6d4); color:#fff; }
.av2-icon-badge[data-type="duel"] { background: linear-gradient(135deg,#ff6b1a,#ff4d8e); color:#fff; }
.av2-icon-badge[data-type="follow"] { background: linear-gradient(135deg,#8b5cf6,#d946ef); color:#fff; }
.av2-icon-badge[data-type="friend_request"],
.av2-icon-badge[data-type="friend_accepted"] { background: linear-gradient(135deg,#10b981,#06b6d4); color:#fff; }
.av2-icon-badge[data-type="mention"] { background: linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; }
.av2-icon-badge[data-type="message"],
.av2-icon-badge[data-type="dm"] { background: linear-gradient(135deg,#0096ff,#06b6d4); color:#fff; }
.av2-icon-badge[data-type="xp_levelup"] { background: var(--grad-hot,linear-gradient(135deg,#ff6b1a,#ff4d8e)); color:#fff; }

/* Main content */
.av2-main {
  flex: 1;
  min-width: 0;
  padding-right: 30px;
}
.av2-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.av2-flame {
  font-size: 16px;
  filter: drop-shadow(0 0 4px rgba(255,107,26,.6));
}
.av2-sub {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.45;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.av2-meta { display: flex; align-items: center; gap: 8px; }
.av2-time {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: .02em;
}

/* Inline action buttons */
.av2-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.av2-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s, background .15s, box-shadow .15s;
  font-family: inherit;
  letter-spacing: .01em;
}
.av2-btn--primary {
  background: var(--grad-hot, linear-gradient(135deg, #ff6b1a, #ff4d8e));
  color: #fff;
  box-shadow: 0 2px 12px rgba(255,107,26,.35);
}
.av2-btn--primary:hover { box-shadow: 0 4px 18px rgba(255,107,26,.5); }
.av2-btn--primary:active { transform: scale(.96); }
.av2-btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.av2-btn--ghost:hover { background: var(--bg-elev); border-color: var(--accent); color: var(--accent); }
.av2-btn--ghost:active { transform: scale(.96); }

/* Empty state */
.av2-empty {
  text-align: center;
  padding: 80px 20px 40px;
}
.av2-empty-icon {
  font-size: 56px;
  margin-bottom: 16px;
  display: inline-block;
  filter: drop-shadow(0 8px 24px rgba(255,107,26,.25));
}
.av2-empty-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--text);
}
.av2-empty-text {
  font-size: 13.5px;
  color: var(--text-dim);
  margin: 0;
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.5;
}

@media (min-width: 600px) {
  .av2-list { padding: 0 20px; }
  .av2-card { padding: 16px 16px 16px 22px; }
  .av2-icon, .av2-icon--avatar { width: 48px; height: 48px; }
  .av2-icon { font-size: 22px; }
  .av2-icon--avatar .avatar,
  .av2-icon--avatar .avatar-init { width: 48px; height: 48px; line-height: 48px; }
}
/* === ALERTS V2 END === */

/* === LIVE V2 START ===
   Twitch-killer Live page: hero, watch-to-earn, grid, categories,
   leaderboard, creator dashboard, monetization tiers.
   ============================================ */
.lv2 {
  display: flex;
  flex-direction: column;
  padding-bottom: 100px;
}

/* ===== HERO ===== */
.lv2-hero {
  position: relative;
  min-height: 240px;
  margin: 14px 14px 0;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}
.lv2-hero--empty {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,107,26,.45) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(255,77,142,.35) 0%, transparent 60%),
    linear-gradient(135deg, #1a0e1f 0%, #2a1234 50%, #0a0510 100%);
  border: 1px solid rgba(255,107,26,.2);
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
}
.lv2-hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 50%, rgba(255,107,26,.5) 0%, transparent 40%),
    radial-gradient(circle at 75% 50%, rgba(255,77,142,.4) 0%, transparent 40%);
  animation: lv2HeroGlow 5s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes lv2HeroGlow {
  from { opacity: .6; transform: scale(1); }
  to   { opacity: 1;  transform: scale(1.1); }
}
.lv2-hero-content { position: relative; z-index: 1; max-width: 460px; }
.lv2-hero-icon {
  font-size: 56px;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 20px rgba(255,107,26,.7));
  animation: lv2Pulse 2.5s ease-in-out infinite;
}
@keyframes lv2Pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.08); }
}
.lv2-hero-h1 {
  font-size: 26px;
  font-weight: 900;
  margin: 0 0 8px;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #fff 0%, #ffd2a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lv2-hero-sub {
  font-size: 14px;
  color: rgba(255,255,255,.75);
  margin: 0 0 20px;
  line-height: 1.5;
}
.lv2-hero-sub kbd {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.lv2-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Hero — live mode (with stream BG) */
.lv2-hero--live {
  cursor: pointer;
  transition: transform .15s;
}
.lv2-hero--live:hover { transform: scale(1.005); }
.lv2-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(2px) brightness(.8);
  z-index: -2;
}
.lv2-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 60%, rgba(0,0,0,.95) 100%);
  z-index: -1;
}
.lv2-hero-meta {
  position: absolute;
  top: 14px; left: 14px; right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lv2-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 2px 12px rgba(239,68,68,.5);
}
.lv2-live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: lv2LiveDot 1.4s ease-in-out infinite;
}
@keyframes lv2LiveDot {
  0%,100% { opacity: 1; }
  50%     { opacity: .35; }
}
.lv2-viewers {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.55);
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.lv2-hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
}
.lv2-hero-streamer {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.lv2-hero-title {
  color: #fff;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.25;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}
.lv2-hero-cat {
  color: rgba(255,255,255,.7);
  font-size: 12px;
  font-weight: 600;
}
.lv2-watch-btn {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--grad-hot, linear-gradient(135deg, #ff6b1a, #ff4d8e));
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255,107,26,.5);
  font-family: inherit;
  flex-shrink: 0;
}
.lv2-watch-btn:active { transform: scale(.97); }

/* ===== Watch & Earn banner ===== */
.lv2-earn-banner {
  margin: 12px 14px 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(16,185,129,.15) 0%, rgba(6,182,212,.12) 100%);
  border: 1px solid rgba(16,185,129,.35);
  display: flex;
  align-items: center;
  gap: 12px;
}
.lv2-earn-icon { font-size: 28px; }
.lv2-earn-text { flex: 1; min-width: 0; }
.lv2-earn-text strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #10b981;
  margin-bottom: 2px;
}
.lv2-earn-text span {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}
.lv2-earn-btn {
  background: rgba(16,185,129,.2);
  color: #10b981;
  border: 1px solid rgba(16,185,129,.45);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.lv2-earn-btn:hover { background: rgba(16,185,129,.3); }

/* ===== Filter chips ===== */
.lv2-chips {
  display: flex;
  gap: 8px;
  padding: 16px 14px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.lv2-chips::-webkit-scrollbar { display: none; }
.lv2-chip {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text-dim);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  font-family: inherit;
}
.lv2-chip:hover { background: var(--bg-elev-2); color: var(--text); border-color: var(--border-strong); }
.lv2-chip--active {
  background: var(--grad-hot, linear-gradient(135deg, #ff6b1a, #ff4d8e));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 14px rgba(255,107,26,.4);
}

/* ===== Sections ===== */
.lv2-section { padding: 6px 14px 14px; }
.lv2-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 12px;
}
.lv2-section-title {
  font-size: 16px;
  font-weight: 900;
  margin: 0;
  letter-spacing: -.01em;
}
.lv2-section-count {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--bg-elev);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.lv2-section-link {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.lv2-section-link:hover { text-decoration: underline; }

/* ===== Stream grid ===== */
.lv2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lv2-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.lv2-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.lv2-card:active { transform: translateY(0) scale(.99); }
.lv2-card-thumb {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #2a1234, #1a0e1f);
  background-size: cover;
  background-position: center;
  position: relative;
}
.lv2-card-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.5) 100%);
}
.lv2-card-live {
  position: absolute;
  top: 8px; left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #ef4444;
  color: #fff;
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .1em;
  z-index: 2;
}
.lv2-card-viewers {
  position: absolute;
  bottom: 8px; left: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.6);
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(6px);
  z-index: 2;
}
.lv2-card-info {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  align-items: flex-start;
}
.lv2-card-info .avatar,
.lv2-card-info .avatar-init {
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 32px;
  flex-shrink: 0;
}
.lv2-card-meta { flex: 1; min-width: 0; }
.lv2-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.lv2-card-streamer {
  font-size: 11.5px;
  color: var(--text-dim);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Empty grid (ghost placeholders) ===== */
.lv2-empty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: relative;
  min-height: 240px;
}
.lv2-empty-ghost {
  aspect-ratio: 16/9;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.lv2-empty-ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.03) 50%, transparent 70%);
  animation: lv2Shimmer 2.4s linear infinite;
}
@keyframes lv2Shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.lv2-empty-msg {
  position: absolute;
  inset: 0;
  background: rgba(15,8,18,.85);
  backdrop-filter: blur(4px);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  z-index: 5;
}
.lv2-empty-icon {
  font-size: 48px;
  margin-bottom: 10px;
  filter: drop-shadow(0 4px 16px rgba(255,107,26,.4));
}
.lv2-empty-msg p {
  margin: 4px 0;
  color: var(--text);
  font-size: 14px;
}
.lv2-empty-sub { color: var(--text-dim); font-size: 12px; }
.lv2-empty-sub kbd {
  background: rgba(255,107,26,.15);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}

/* ===== Empty state (filters) ===== */
.lv2-empty-state {
  text-align: center;
  padding: 60px 20px 30px;
}
.lv2-empty-state h3 {
  font-size: 17px;
  font-weight: 800;
  margin: 8px 0 6px;
}
.lv2-empty-state p {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0 0 20px;
  max-width: 280px;
  margin: 0 auto 20px;
}

/* ===== Categories ===== */
.lv2-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lv2-cat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px;
  border-radius: 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .15s, border-color .15s;
  position: relative;
  overflow: hidden;
  font-family: inherit;
  text-align: left;
}
.lv2-cat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent);
}
.lv2-cat--a::before { background: linear-gradient(90deg,#10b981,#06b6d4); }
.lv2-cat--b::before { background: linear-gradient(90deg,#ff6b1a,#ff4d8e); }
.lv2-cat--c::before { background: linear-gradient(90deg,#f59e0b,#f97316); }
.lv2-cat--d::before { background: linear-gradient(90deg,#06b6d4,#0096ff); }
.lv2-cat--e::before { background: linear-gradient(90deg,#facc15,#f97316); }
.lv2-cat--f::before { background: linear-gradient(90deg,#8b5cf6,#d946ef); }
.lv2-cat:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.lv2-cat-emoji { font-size: 28px; line-height: 1; margin-bottom: 4px; }
.lv2-cat-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.lv2-cat-count {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
}

/* ===== Leaderboard ===== */
.lv2-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lv2-lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s, transform .12s;
}
.lv2-lb-row:hover { border-color: var(--accent); transform: translateX(2px); }
.lv2-lb-rank {
  font-size: 22px;
  font-weight: 900;
  min-width: 36px;
  text-align: center;
  color: var(--text-dim);
}
.lv2-lb-row:nth-child(1) .lv2-lb-rank { font-size: 26px; }
.lv2-lb-row .avatar,
.lv2-lb-row .avatar-init {
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 40px;
  flex-shrink: 0;
}
.lv2-lb-meta { flex: 1; min-width: 0; }
.lv2-lb-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.lv2-lb-stat {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 2px;
}
.lv2-lb-earnings { text-align: right; flex-shrink: 0; }
.lv2-lb-coins {
  font-size: 14px;
  font-weight: 900;
  background: var(--grad-hot, linear-gradient(135deg, #ff6b1a, #ff4d8e));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lv2-lb-label {
  font-size: 9.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  margin-top: 2px;
}

/* ===== Monetization ===== */
.lv2-mon {
  margin: 14px 14px 0;
  padding: 22px 18px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,107,26,.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(245,158,11,.12) 0%, transparent 60%),
    linear-gradient(135deg, var(--bg-elev) 0%, var(--bg-elev-2) 100%);
  border: 1px solid rgba(255,107,26,.3);
  position: relative;
  overflow: hidden;
}
.lv2-mon-header { text-align: center; margin-bottom: 18px; }
.lv2-mon-title {
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 6px;
  background: var(--grad-hot, linear-gradient(135deg, #ff6b1a, #ff4d8e));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lv2-mon-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.5;
}

.lv2-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.lv2-tier {
  padding: 14px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lv2-tier::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.lv2-tier--rookie::before   { background: linear-gradient(90deg,#94a3b8,#64748b); }
.lv2-tier--verified::before { background: linear-gradient(90deg,#06b6d4,#0096ff); }
.lv2-tier--partner::before  { background: linear-gradient(90deg,#ff6b1a,#ff4d8e); }
.lv2-tier--elite::before    { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.lv2-tier-name {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  margin-bottom: 6px;
  color: var(--text);
}
.lv2-tier-rate {
  font-size: 17px;
  font-weight: 900;
  background: var(--grad-hot, linear-gradient(135deg, #ff6b1a, #ff4d8e));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}
.lv2-tier-need {
  font-size: 10.5px;
  color: var(--text-dim);
  font-weight: 600;
  line-height: 1.35;
}

.lv2-mon-extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lv2-mon-feat {
  padding: 12px;
  background: rgba(0,0,0,.25);
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.4;
}
.lv2-mon-feat span { font-size: 22px; line-height: 1; }
.lv2-mon-feat strong {
  font-size: 13px;
  color: var(--text);
  font-weight: 800;
}

/* ===== Creator dashboard ===== */
.lv2-creator-card {
  background:
    linear-gradient(135deg, rgba(255,107,26,.18), rgba(255,77,142,.12)),
    var(--bg-elev);
  border: 1px solid rgba(255,107,26,.4);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lv2-creator-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(255,107,26,.15), transparent);
  animation: lv2CreatorSpin 8s linear infinite;
}
@keyframes lv2CreatorSpin { to { transform: rotate(360deg); } }
.lv2-creator-card > * { position: relative; z-index: 1; }
.lv2-creator-tier {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .15em;
  margin-bottom: 4px;
  color: #fff;
}
.lv2-creator-next {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-bottom: 12px;
  font-weight: 600;
}
.lv2-creator-progress {
  height: 6px;
  background: rgba(0,0,0,.4);
  border-radius: 999px;
  overflow: hidden;
}
.lv2-creator-progress-fill {
  height: 100%;
  background: var(--grad-hot, linear-gradient(90deg, #ff6b1a, #ff4d8e));
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(255,107,26,.6);
  transition: width .9s ease-out;
}

.lv2-creator-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.lv2-cstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.lv2-cstat-icon { font-size: 22px; line-height: 1; margin-bottom: 4px; }
.lv2-cstat strong {
  font-size: 18px;
  font-weight: 900;
  background: var(--grad-hot, linear-gradient(135deg, #ff6b1a, #ff4d8e));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lv2-cstat small {
  font-size: 10.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}

.lv2-creator-payout {
  width: 100%;
  margin-bottom: 18px;
  font-size: 14px;
  padding: 14px;
}

.lv2-tips-empty,
.lv2-goal {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
}
.lv2-tips-empty { text-align: center; color: var(--text-dim); font-size: 13px; }
.lv2-tips-empty p { margin: 4px 0 0; }

.lv2-goal-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}
.lv2-goal-label span { color: var(--text-dim); }
.lv2-goal-bar {
  height: 8px;
  background: var(--bg-elev-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}
.lv2-goal-fill {
  height: 100%;
  background: var(--grad-hot, linear-gradient(90deg, #ff6b1a, #ff4d8e));
  border-radius: 999px;
}

.lv2-setup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lv2-setup-step {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.lv2-setup-step > span {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--grad-hot, linear-gradient(135deg, #ff6b1a, #ff4d8e));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(255,107,26,.4);
}
.lv2-setup-step > div { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }
.lv2-setup-step strong {
  display: block;
  font-size: 13.5px;
  color: var(--text);
  font-weight: 800;
  margin-bottom: 2px;
}

/* ===== Buttons ===== */
.lv2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s, box-shadow .15s;
  font-family: inherit;
}
.lv2-btn--primary {
  background: var(--grad-hot, linear-gradient(135deg, #ff6b1a, #ff4d8e));
  color: #fff;
  box-shadow: 0 4px 18px rgba(255,107,26,.45);
}
.lv2-btn--primary:hover { box-shadow: 0 6px 22px rgba(255,107,26,.6); }
.lv2-btn--primary:active { transform: scale(.97); }
.lv2-btn--ghost {
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(8px);
}
.lv2-btn--ghost:hover { background: rgba(255,255,255,.1); border-color: var(--accent); color: var(--accent); }
.lv2-btn--ghost:active { transform: scale(.97); }

@media (min-width: 600px) {
  .lv2-grid, .lv2-cats, .lv2-tiers, .lv2-mon-extras, .lv2-creator-stats { grid-template-columns: repeat(3, 1fr); }
  .lv2-hero { min-height: 320px; }
  .lv2-hero-h1 { font-size: 32px; }
}
@media (min-width: 900px) {
  .lv2-grid { grid-template-columns: repeat(4, 1fr); }
  .lv2-creator-stats { grid-template-columns: repeat(4, 1fr); }
  .lv2-tiers, .lv2-mon-extras { grid-template-columns: repeat(4, 1fr); }
}
/* === LIVE V2 END === */