/* FRANYXAI — Premium UI Layer */
/* ════════════════════════════════════════════════════════════════════════
   ╔═══════════════════════════════════════════════════════════════════╗
   ║  PREMIUM UI LAYER  —  Stripe / Linear / Apple-grade polish        ║
   ║  Loaded last so it overrides defaults without touching component  ║
   ║  logic. Every transform is GPU-accelerated; nothing layouts.      ║
   ╚═══════════════════════════════════════════════════════════════════╝
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Refined token system — richer depth, real product palette ─────── */
:root{
  /* Layered backgrounds (5 elevation levels) */
  --bg:#05060d;
  --bg-1:#08091a;     /* slightly elevated */
  --bg-2:#0c0e1f;     /* card */
  --bg-3:#13162a;     /* elevated card */
  --bg-4:#1a1f37;     /* hover */

  /* Glass & borders — tuned for true frosted feel */
  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.06);
  --glass-3:rgba(255,255,255,.09);
  --hairline:rgba(255,255,255,.06);
  --hairline-strong:rgba(255,255,255,.12);

  /* Brand */
  --brand-1:#7C3AED;          /* purple */
  --brand-2:#06B6D4;           /* cyan */
  --brand-3:#EC4899;          /* pink */
  --brand-glow:rgba(124,58,237,.45);
  --brand-glow-soft:rgba(124,58,237,.18);

  /* Curated gradients */
  --grad-brand:linear-gradient(135deg,#7C3AED 0%,#A855F7 50%,#06B6D4 100%);
  --grad-brand-soft:linear-gradient(135deg,rgba(124,58,237,.18),rgba(6,182,212,.12));
  --grad-mesh:radial-gradient(ellipse 1200px 600px at 15% -20%, rgba(124,58,237,.15), transparent 60%),
              radial-gradient(ellipse 900px 500px at 85% 110%, rgba(6,182,212,.10), transparent 65%),
              radial-gradient(ellipse 700px 400px at 60% 50%, rgba(236,72,153,.06), transparent 70%);
  --grad-text:linear-gradient(135deg,#fff 0%,#cbb5fc 50%,#7dd6e8 100%);

  /* Shadow ladder */
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.2);
  --shadow-md:0 4px 12px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3);
  --shadow-lg:0 12px 32px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.3);
  --shadow-xl:0 24px 64px rgba(0,0,0,.6), 0 8px 16px rgba(0,0,0,.4);
  --shadow-glow:0 0 0 1px var(--brand-glow-soft), 0 12px 40px var(--brand-glow);
  --shadow-glow-cyan:0 0 0 1px rgba(6,182,212,.3), 0 12px 40px rgba(6,182,212,.25);

  /* Motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:140ms;
  --t-base:240ms;
  --t-slow:420ms;

  /* Radii */
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-2xl:32px;
}

/* ─── Body: animated mesh background, smoother fonts ──────────────────── */
body{
  background:var(--bg);
  font-feature-settings:"cv02","cv03","cv04","cv11","ss01";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body::before{
  content:'';
  position:fixed; inset:0; z-index:-1;
  background:var(--grad-mesh);
  pointer-events:none;
  will-change:transform;
  animation:meshDrift 22s ease-in-out infinite alternate;
}
@keyframes meshDrift{
  0%   { transform:translate3d(0,0,0) scale(1); }
  100% { transform:translate3d(2%, 1%, 0) scale(1.04); }
}

/* Ambient noise grain (very subtle, gives that Stripe-y depth) */
body::after{
  content:'';
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' /%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' /%3E%3C/svg%3E");
}

/* ─── Premium scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(124,58,237,.35), rgba(6,182,212,.25));
  border-radius:99px;
  border:2px solid transparent;
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(124,58,237,.6), rgba(6,182,212,.45));
  background-clip:padding-box;
}
::selection{ background:rgba(124,58,237,.35); color:#fff; }

/* ─── Refined keyframes ───────────────────────────────────────────────── */
@keyframes ux-rise{
  from{ opacity:0; transform:translate3d(0,12px,0); }
  to{   opacity:1; transform:translate3d(0,0,0); }
}
@keyframes ux-scale-in{
  from{ opacity:0; transform:scale(.92); }
  to{   opacity:1; transform:scale(1); }
}
@keyframes ux-shimmer{
  0%   { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
@keyframes ux-float{
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-6px); }
}
@keyframes ux-glow-pulse{
  0%,100% { box-shadow:0 0 0 0 var(--brand-glow-soft); }
  50%     { box-shadow:0 0 0 10px transparent; }
}
@keyframes ux-grad-rotate{
  0%   { background-position:0% 50%; }
  100% { background-position:200% 50%; }
}

/* ─── Page entrance — stagger children for a cinematic load ──────────── */
.page.on{
  animation:ux-rise var(--t-slow) var(--ease-out) both;
}
.page.on > *{
  animation:ux-rise 540ms var(--ease-out) both;
}
.page.on > *:nth-child(1){ animation-delay:.04s; }
.page.on > *:nth-child(2){ animation-delay:.10s; }
.page.on > *:nth-child(3){ animation-delay:.16s; }
.page.on > *:nth-child(4){ animation-delay:.22s; }
.page.on > *:nth-child(5){ animation-delay:.28s; }
.page.on > *:nth-child(6){ animation-delay:.34s; }
.page.on > *:nth-child(n+7){ animation-delay:.40s; }

/* ─── Top bar: real glassmorphism with depth ─────────────────────────── */
.top-bar{
  background:rgba(8,9,26,.6) !important;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--hairline) !important;
  transition:box-shadow var(--t-base) var(--ease-out), background var(--t-base);
}
.top-bar.scrolled{
  background:rgba(5,6,13,.85) !important;
  box-shadow:0 1px 0 var(--hairline-strong), 0 8px 32px rgba(0,0,0,.5) !important;
}
.tb-clock{
  font-variant-numeric:tabular-nums;
  letter-spacing:1.5px !important;
}

/* ─── Sidebar: glass panel with subtle inner glow ────────────────────── */
.sidebar{
  background:linear-gradient(180deg,
    rgba(12,14,31,.85) 0%,
    rgba(8,9,26,.92) 100%) !important;
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-right:1px solid var(--hairline) !important;
  box-shadow:1px 0 0 var(--hairline), 0 0 60px rgba(0,0,0,.4);
}
.sb-li{
  margin:1px 4px;
  border-radius:10px !important;
  transition:background var(--t-fast), color var(--t-fast),
             transform var(--t-fast) var(--ease-spring),
             box-shadow var(--t-base) !important;
  position:relative;
  isolation:isolate;
}
.sb-li::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(6,182,212,.10));
  opacity:0;
  transition:opacity var(--t-base) var(--ease-out);
  z-index:-1;
}
.sb-li:hover{
  color:#fff !important;
  background:transparent !important;
  transform:translateX(3px);
}
.sb-li:hover::before{ opacity:1; }
.sb-li.on{
  background:transparent !important;
  color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.35),
             0 4px 16px rgba(124,58,237,.15) !important;
}
.sb-li.on::before{
  opacity:1;
  background:linear-gradient(135deg, rgba(124,58,237,.28), rgba(6,182,212,.16));
}
.sb-li.on::after{
  content:'';
  position:absolute; left:-4px; top:30%; bottom:30%;
  width:3px; border-radius:99px;
  background:var(--grad-brand);
  box-shadow:0 0 12px var(--brand-glow);
  animation:ux-rise var(--t-base) var(--ease-out);
}
.sb-ic{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }

/* User badge in sidebar foot — premium card */
.sb-foot{
  background:linear-gradient(135deg, rgba(124,58,237,.06), rgba(6,182,212,.04)) !important;
  border-top:1px solid var(--hairline) !important;
  margin:0;
}
.u-badge{
  border-radius:10px;
  transition:background var(--t-fast);
}
.u-badge:hover{ background:var(--glass-2); }
.u-av{
  background:var(--grad-brand) !important;
  box-shadow:0 0 0 2px rgba(124,58,237,.25), 0 4px 14px rgba(124,58,237,.4) !important;
}
.btn-signout{ border-radius:8px !important; }

/* ─── Cards: real glass with depth ─────────────────────────────────────── */
.card{
  background:linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.015)) !important;
  border:1px solid var(--hairline) !important;
  border-radius:var(--radius-lg) !important;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 2px rgba(0,0,0,.4),
    0 8px 24px rgba(0,0,0,.35) !important;
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) !important;
}
.card:hover{
  transform:translateY(-3px);
  border-color:var(--hairline-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 1px 2px rgba(0,0,0,.4),
    0 16px 40px rgba(0,0,0,.5),
    0 0 60px rgba(124,58,237,.06) !important;
}
.card-title{
  letter-spacing:-.2px;
}

/* Module cards on home (Friends/Messages/Finance) */
.pm-card{
  background:linear-gradient(135deg, rgba(20,24,46,.75), rgba(12,14,31,.75)) !important;
  border:1px solid var(--hairline) !important;
  border-radius:var(--radius-lg) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    var(--shadow-md) !important;
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) !important;
  position:relative; overflow:hidden;
}
.pm-card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 200px 120px at var(--mx,50%) var(--my,0%), rgba(124,58,237,.18), transparent 70%);
  opacity:0; transition:opacity var(--t-base);
}
.pm-card:hover{
  transform:translateY(-4px);
  border-color:rgba(124,58,237,.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 20px 50px rgba(0,0,0,.5),
    0 0 0 1px rgba(124,58,237,.18),
    0 0 60px rgba(124,58,237,.15) !important;
}
.pm-card:hover::before{ opacity:1; }
.pm-card .pm-title{ letter-spacing:-.3px; font-size:1.05rem; }
.pm-action{
  display:inline-flex; align-items:center; gap:4px;
  transition:gap var(--t-fast), color var(--t-fast);
}
.pm-card:hover .pm-action{ gap:8px; color:#fff; }

/* Stat cards — glass tiles */
.stat{
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) !important;
  border:1px solid var(--hairline) !important;
  border-radius:14px !important;
  padding:14px 16px !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:
    transform var(--t-base) var(--ease-out),
    border-color var(--t-base),
    box-shadow var(--t-base) !important;
}
.stat:hover{
  transform:translateY(-2px);
  border-color:rgba(6,182,212,.25) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.4), 0 0 24px rgba(6,182,212,.12) !important;
}
.stat-ic{
  background:var(--grad-brand-soft) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.stat-val{ letter-spacing:-.5px; }

/* ─── Buttons — sophisticated states ───────────────────────────────────── */

/* Primary brand button (.btn-pri, .btn-login, .btn-solid-lp, .btn-hero-main, .btn-save) */
.btn-pri, .btn-login, .btn-solid-lp, .btn-hero-main, .btn-save{
  background:var(--grad-brand) !important;
  background-size:200% 200% !important;
  color:#fff !important;
  border:none !important;
  border-radius:10px !important;
  font-weight:600 !important;
  letter-spacing:.1px !important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 4px 12px rgba(124,58,237,.35),
    0 1px 2px rgba(0,0,0,.3) !important;
  transition:
    transform var(--t-fast) var(--ease-spring),
    box-shadow var(--t-base) var(--ease-out),
    background-position var(--t-slow) var(--ease-in-out) !important;
}
.btn-pri::before, .btn-login::before, .btn-solid-lp::before,
.btn-hero-main::before, .btn-save::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform:translateX(-200%);
  transition:transform 600ms var(--ease-out);
  pointer-events:none;
}
.btn-pri:hover, .btn-login:hover, .btn-solid-lp:hover,
.btn-hero-main:hover, .btn-save:hover{
  background-position:100% 50% !important;
  transform:translateY(-2px) scale(1.01);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 12px 28px rgba(124,58,237,.5),
    0 4px 8px rgba(0,0,0,.3) !important;
}
.btn-pri:hover::before, .btn-login:hover::before, .btn-solid-lp:hover::before,
.btn-hero-main:hover::before, .btn-save:hover::before{
  transform:translateX(200%);
}
.btn-pri:active, .btn-login:active, .btn-solid-lp:active,
.btn-hero-main:active, .btn-save:active{
  transform:translateY(0) scale(.98);
  transition-duration:80ms;
}
.btn-pri:focus-visible, .btn-login:focus-visible, .btn-save:focus-visible{
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 3px rgba(124,58,237,.5),
    0 8px 24px rgba(124,58,237,.4) !important;
}

/* Ghost & secondary buttons */
.btn-ghost-lp, .btn-ghost, .btn-cancel, .btn-banner, .btn-hero-alt{
  background:var(--glass) !important;
  border:1px solid var(--hairline-strong) !important;
  border-radius:10px !important;
  color:#e5e5f5 !important;
  font-weight:500 !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:
    background var(--t-base),
    border-color var(--t-base),
    transform var(--t-fast) var(--ease-spring),
    box-shadow var(--t-base) !important;
}
.btn-ghost-lp:hover, .btn-ghost:hover, .btn-cancel:hover,
.btn-banner:hover, .btn-hero-alt:hover{
  background:var(--glass-3) !important;
  border-color:rgba(124,58,237,.4) !important;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.3) !important;
}
.btn-ghost-lp:active, .btn-ghost:active{
  transform:translateY(0) scale(.98);
}

/* Banner solid white button (Tools CTA on home) */
.btn-banner.solid{
  background:#fff !important;
  color:var(--brand-1) !important;
  border:none !important;
}
.btn-banner.solid:hover{
  background:#fff !important;
  box-shadow:0 12px 32px rgba(255,255,255,.25), 0 0 0 4px rgba(255,255,255,.1) !important;
}

/* Add-button (small +) */
.btn-add{
  background:var(--grad-brand) !important;
  border:none !important;
  border-radius:10px !important;
  width:38px !important; height:38px !important;
  font-size:1.3rem !important; font-weight:300 !important;
  box-shadow:0 4px 14px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.2) !important;
  transition:
    transform var(--t-fast) var(--ease-spring),
    box-shadow var(--t-base) !important;
}
.btn-add:hover{
  transform:translateY(-2px) rotate(90deg);
  box-shadow:0 8px 24px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.btn-add:active{ transform:translateY(0) rotate(90deg) scale(.92); }

/* Send (chat) button */
.chat-send{
  background:var(--grad-brand) !important;
  box-shadow:0 4px 14px var(--brand-glow) !important;
  transition:
    transform var(--t-fast) var(--ease-spring),
    box-shadow var(--t-base) !important;
}
.chat-send:hover{
  transform:translateY(-1px) scale(1.05);
  box-shadow:0 8px 24px var(--brand-glow) !important;
}
.chat-send:active{ transform:scale(.92); }

/* Edit profile, friend buttons */
.btn-edit-profile, .fr-btn{
  border-radius:10px !important;
  font-weight:600 !important;
  letter-spacing:.1px;
  transition:
    transform var(--t-fast) var(--ease-spring),
    background var(--t-base),
    box-shadow var(--t-base) !important;
}
.btn-edit-profile:hover, .fr-btn:hover{
  transform:translateY(-1px);
}
.btn-edit-profile:active, .fr-btn:active{ transform:translateY(0) scale(.97); }

/* SSO (Google) buttons */
.btn-sso{
  border-radius:10px !important;
  background:var(--glass-2) !important;
  border:1px solid var(--hairline-strong) !important;
  transition:
    background var(--t-base),
    border-color var(--t-base),
    transform var(--t-fast) var(--ease-spring) !important;
}
.btn-sso:hover{
  background:var(--glass-3) !important;
  border-color:rgba(255,255,255,.2) !important;
  transform:translateY(-1px);
}

/* ─── Inputs — glowing focus ─────────────────────────────────────────── */
.lf-input, .todo-in, .note-ta, .f-in, .chat-input, .vibe-btn,
input[type=text], input[type=email], input[type=password], textarea{
  background:rgba(255,255,255,.025) !important;
  border:1px solid var(--hairline-strong) !important;
  border-radius:10px !important;
  color:var(--text) !important;
  transition:
    border-color var(--t-base),
    box-shadow var(--t-base),
    background var(--t-base) !important;
}
.lf-input:hover, .todo-in:hover, .f-in:hover, .chat-input:hover, .note-ta:hover{
  border-color:rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.04) !important;
}
.lf-input:focus, .todo-in:focus, .note-ta:focus, .f-in:focus, .chat-input:focus,
input:focus, textarea:focus{
  outline:none !important;
  border-color:var(--brand-1) !important;
  background:rgba(124,58,237,.06) !important;
  box-shadow:
    0 0 0 4px rgba(124,58,237,.18),
    0 0 24px rgba(124,58,237,.12) !important;
}

/* Inputs inside the modal */
.modal input, .modal textarea, .modal select{
  background:rgba(255,255,255,.025) !important;
  border:1px solid var(--hairline-strong) !important;
  border-radius:10px !important;
  padding:11px 14px !important;
  color:var(--text) !important;
  font-family:inherit !important;
  transition:
    border-color var(--t-base),
    box-shadow var(--t-base),
    background var(--t-base) !important;
}
.modal input:focus, .modal textarea:focus{
  outline:none !important;
  border-color:var(--brand-1) !important;
  box-shadow:0 0 0 4px rgba(124,58,237,.18) !important;
}

/* Vibe buttons (generator) */
.vibe-btn{
  border-radius:99px !important;
  padding:6px 13px !important;
  font-size:.78rem !important;
  font-weight:500 !important;
  background:var(--glass) !important;
  touch-action:manipulation;
  transition:background var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-spring), box-shadow var(--t-base), border-color var(--t-base), color var(--t-base) !important;
}
.vibe-btn:hover{
  background:var(--glass-2) !important;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.3) !important;
}
.vibe-btn.on{
  background:var(--grad-brand) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 4px 16px rgba(124,58,237,.35) !important;
}

/* ─── Modals — luxe entrance ───────────────────────────────────────────── */
.modal-bg{
  background:rgba(0,0,0,.7) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.modal-bg.on{
  animation:ux-fade-in var(--t-base) var(--ease-out);
}
@keyframes ux-fade-in{ from{opacity:0;} to{opacity:1;} }

/* ─── Game Sync (Telegram account linking) ─────────────────────────────── */
.pf-gamesync{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; margin-bottom:14px;
  background:rgba(84,169,235,.06);
  border:1px solid rgba(84,169,235,.22);
  border-radius:14px;
}
.pf-gs-icon{ font-size:26px; line-height:1; flex:none; }
.pf-gs-info{ flex:1; min-width:0; }
.pf-gs-title{ font-weight:700; font-size:15px; margin-bottom:2px; }
.pf-gs-sub{ font-size:12.5px; opacity:.7; line-height:1.4; }
.pf-gs-btn{ flex:none; white-space:nowrap; }
.pf-gs-btn.connected{ filter:saturate(.55) brightness(.92); }
@media (max-width:560px){
  .pf-gamesync{ flex-wrap:wrap; }
  .pf-gs-btn{ width:100%; }
}

/* Connect-Telegram modal */
.tglink-body{ padding:4px 4px 8px; text-align:center; }
.tglink-step{ font-size:13.5px; opacity:.8; margin:0 0 14px; line-height:1.5; }
.tglink-code{
  font-family:var(--font-mono, monospace); font-weight:700;
  font-size:30px; letter-spacing:.32em; padding-left:.32em;
  color:#54a9eb; margin-bottom:16px; user-select:all;
}
.tglink-open{ display:inline-block; text-decoration:none; margin-bottom:14px; }
.tglink-or{ font-size:12px; opacity:.55; margin:0 0 6px; }
.tglink-cmd{
  display:inline-block; font-family:var(--font-mono, monospace);
  font-size:13px; padding:6px 12px; border-radius:8px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--hairline, rgba(255,255,255,.1));
  user-select:all; margin-bottom:16px;
}
.tglink-status{
  font-size:13px; padding:10px; border-radius:10px;
  background:rgba(255,255,255,.04); opacity:.85;
}
.tglink-status.ok{
  color:var(--green, #22C55E);
  background:rgba(34,197,94,.1); opacity:1; font-weight:600;
}
.modal{
  background:linear-gradient(135deg, rgba(20,24,46,.95), rgba(12,14,31,.98)) !important;
  border:1px solid var(--hairline-strong) !important;
  border-radius:var(--radius-xl) !important;
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 32px 80px rgba(0,0,0,.7),
    0 0 0 1px rgba(124,58,237,.1) !important;
  animation:ux-modal-in 360ms var(--ease-spring);
}
@keyframes ux-modal-in{
  from{ opacity:0; transform:translateY(20px) scale(.94); }
  to{   opacity:1; transform:translateY(0) scale(1); }
}
.modal-title, .modal-hd > h3{
  font-family:'Syne',sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-.5px !important;
  font-size:1.25rem !important;
}
.modal-close{
  background:var(--glass) !important;
  border:1px solid var(--hairline) !important;
  border-radius:10px !important;
  width:34px; height:34px;
  font-size:.9rem;
  touch-action:manipulation;
  transition:background var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-fast) var(--ease-spring) !important;
}
.modal-close:hover{
  background:var(--red-dim) !important;
  border-color:rgba(255,77,106,.3) !important;
  color:var(--red) !important;
  transform:rotate(90deg);
}
.modal-foot{
  margin-top:24px !important;
  padding-top:18px !important;
  border-top:1px solid var(--hairline) !important;
}
.modal-row label{
  font-size:.7rem !important;
  font-weight:700 !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  color:var(--text2) !important;
  margin-bottom:6px;
  display:block;
}

/* ─── Login / Auth screen ─────────────────────────────────────────────── */
.login-card{
  background:linear-gradient(135deg, rgba(20,24,46,.85), rgba(12,14,31,.92)) !important;
  border:1px solid var(--hairline-strong) !important;
  border-radius:var(--radius-2xl) !important;
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 24px 64px rgba(0,0,0,.6),
    0 0 0 1px rgba(124,58,237,.1),
    0 0 80px rgba(124,58,237,.15) !important;
  animation:ux-modal-in 500ms var(--ease-spring);
  position:relative;
  overflow:hidden;
}
.login-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--brand-1), var(--brand-2), transparent);
  opacity:.5;
}
.login-bg{
  background:
    radial-gradient(ellipse 800px 600px at 50% 0%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(ellipse 600px 400px at 50% 100%, rgba(6,182,212,.12), transparent 65%) !important;
}
.auth-tabs{
  background:var(--glass) !important;
  border:1px solid var(--hairline) !important;
}
.auth-tab{ font-weight:600 !important; transition:all var(--t-base) !important; }
.auth-tab.on{
  background:var(--grad-brand) !important;
  box-shadow:0 4px 14px rgba(124,58,237,.4), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* ─── Landing page polish ─────────────────────────────────────────────── */
.lp-nav{
  background:rgba(8,9,26,.65) !important;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--hairline) !important;
  transition:background var(--t-base), box-shadow var(--t-base);
}
.fx-mark{
  background:var(--grad-brand) !important;
  background-size:200% 200%;
  animation:ux-grad-rotate 6s linear infinite;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 4px 16px rgba(124,58,237,.5) !important;
}
.fx-name{
  background:linear-gradient(135deg, #fff 0%, #cbb5fc 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
.lp-h1{
  letter-spacing:-2px !important;
  line-height:1.05 !important;
}
.lp-h1 .g1{
  background:linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #06b6d4 100%) !important;
  background-size:200% 200% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  animation:ux-grad-rotate 8s ease-in-out infinite alternate;
}
.lp-sub{ letter-spacing:.1px; }
.hero-pill{
  background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(6,182,212,.10)) !important;
  border:1px solid rgba(124,58,237,.3) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 16px rgba(124,58,237,.15) !important;
  transition:transform var(--t-base) var(--ease-spring) !important;
}
.hero-pill:hover{ transform:translateY(-2px); }
.hero-pill-badge{
  background:var(--grad-brand) !important;
  box-shadow:0 2px 8px rgba(124,58,237,.5) !important;
}
.hstat-val{ letter-spacing:-1px; }
.mod-card{
  background:linear-gradient(135deg, rgba(20,24,46,.7), rgba(12,14,31,.8)) !important;
  border:1px solid var(--hairline) !important;
  border-radius:var(--radius-lg) !important;
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow-md) !important;
  transition:
    transform var(--t-base) var(--ease-out),
    border-color var(--t-base),
    box-shadow var(--t-base) !important;
}
.mod-card:hover{
  transform:translateY(-6px) !important;
  border-color:rgba(124,58,237,.35) !important;
  box-shadow:0 24px 56px rgba(0,0,0,.6), 0 0 0 1px rgba(124,58,237,.2), 0 0 80px rgba(124,58,237,.15) !important;
}
.mc-arrow{
  background:var(--glass-2) !important;
  border:1px solid var(--hairline-strong) !important;
  transition:all var(--t-base) var(--ease-spring) !important;
}
.mod-card:hover .mc-arrow{
  background:var(--grad-brand) !important;
  border-color:transparent !important;
  transform:translate3d(4px, -4px, 0) rotate(-45deg);
  box-shadow:0 8px 20px rgba(124,58,237,.4) !important;
}

/* ─── Profile page ────────────────────────────────────────────────────── */
.pf-hero{
  background:linear-gradient(135deg, rgba(20,24,46,.7), rgba(12,14,31,.85)) !important;
  border:1px solid var(--hairline-strong) !important;
  border-radius:var(--radius-2xl) !important;
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 16px 48px rgba(0,0,0,.4),
    0 0 80px rgba(124,58,237,.08) !important;
  position:relative;
  overflow:hidden;
}
.pf-hero::before{
  content:''; position:absolute; top:0; left:20%; right:20%; height:1px;
  background:linear-gradient(90deg, transparent, var(--brand-1), transparent);
  opacity:.6;
}
.pf-av{
  box-shadow:
    0 0 0 4px rgba(255,255,255,.04),
    0 0 0 1px rgba(124,58,237,.4),
    0 12px 32px rgba(124,58,237,.4) !important;
  animation:ux-float 6s ease-in-out infinite;
}
.pf-name{
  background:linear-gradient(135deg, #fff 0%, #e0d4ff 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  letter-spacing:-1px !important;
}
.pf-online{
  box-shadow:0 4px 16px rgba(0,229,160,.25), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.pf-frx-badge, .frx-strip{
  background:linear-gradient(135deg, rgba(124,58,237,.12), rgba(6,182,212,.08)) !important;
  border:1px solid rgba(124,58,237,.25) !important;
  backdrop-filter:blur(10px);
}
.frx-strip{
  border-radius:var(--radius-lg) !important;
  transition:transform var(--t-base), box-shadow var(--t-base) !important;
}
.frx-strip:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(124,58,237,.18) !important;
}
.frx-strip-id{
  background:var(--grad-brand) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

/* Platform link cards on profile */
.pf-link-card, .pf-link2{
  background:linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) !important;
  border:1px solid var(--hairline) !important;
  border-radius:var(--radius) !important;
  transition:
    transform var(--t-base) var(--ease-out),
    border-color var(--t-base),
    box-shadow var(--t-base) !important;
}
.pf-link-card:hover, .pf-link2:hover{
  transform:translateX(4px);
  border-color:var(--hairline-strong) !important;
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.3) !important;
}
.pf-link2.primary{
  background:linear-gradient(135deg, rgba(39,117,202,.18), rgba(39,117,202,.08)) !important;
}

/* ─── Friends page ────────────────────────────────────────────────────── */
.fr-row{
  background:linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.005)) !important;
  border:1px solid var(--hairline) !important;
  border-radius:var(--radius) !important;
  padding:13px 14px !important;
  transition:
    transform var(--t-base) var(--ease-out),
    border-color var(--t-base),
    box-shadow var(--t-base),
    background var(--t-base) !important;
  animation:ux-rise 360ms var(--ease-out) both;
}
.fr-row:hover{
  border-color:var(--hairline-strong) !important;
  background:linear-gradient(135deg, rgba(124,58,237,.06), rgba(255,255,255,.02)) !important;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.3), 0 0 0 1px rgba(124,58,237,.15) !important;
}
.fr-av{
  background:var(--grad-brand) !important;
  box-shadow:0 0 0 2px rgba(124,58,237,.15), 0 4px 12px rgba(124,58,237,.3) !important;
}

/* ─── Chat page premium ────────────────────────────────────────────────── */
.chat-side, .chat-thread{
  background:linear-gradient(135deg, rgba(20,24,46,.75), rgba(12,14,31,.85)) !important;
  border:1px solid var(--hairline) !important;
  border-radius:var(--radius-lg) !important;
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    var(--shadow-md) !important;
}
.chat-side-hd{
  background:linear-gradient(180deg, rgba(124,58,237,.06), transparent) !important;
  border-bottom:1px solid var(--hairline) !important;
  font-family:'Syne',sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-.3px !important;
}
.chat-newgroup{
  background:var(--grad-brand) !important;
  border:none !important;
  color:#fff !important;
  border-radius:10px !important;
  box-shadow:0 4px 12px rgba(124,58,237,.35) !important;
  transition:transform var(--t-fast) var(--ease-spring), box-shadow var(--t-base) !important;
}
.chat-newgroup:hover{
  transform:rotate(90deg) scale(1.05);
  box-shadow:0 6px 18px rgba(124,58,237,.5) !important;
}
.chat-item{
  border-bottom:1px solid var(--hairline) !important;
  transition:background var(--t-base), padding-left var(--t-base) !important;
}
.chat-item:hover{
  background:linear-gradient(90deg, rgba(124,58,237,.10), transparent 60%) !important;
  padding-left:18px !important;
}
.chat-item.active{
  background:linear-gradient(90deg, rgba(124,58,237,.18), transparent 70%) !important;
  box-shadow:inset 3px 0 0 var(--brand-1) !important;
}
.chat-item-av, .chat-item-av.group{
  box-shadow:0 0 0 2px rgba(255,255,255,.05), 0 4px 12px rgba(124,58,237,.25) !important;
}
.chat-thread-hd{
  background:linear-gradient(180deg, rgba(124,58,237,.05), transparent) !important;
  border-bottom:1px solid var(--hairline) !important;
}
.chat-thread-name{ letter-spacing:-.3px !important; }

/* Message bubbles — rich glass */
.msg-row.in .msg-bubble{
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025)) !important;
  border:1px solid var(--hairline-strong) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 4px 12px rgba(0,0,0,.2) !important;
}
.msg-row.out .msg-bubble{
  background:var(--grad-brand) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 4px 16px rgba(124,58,237,.35),
    0 1px 2px rgba(0,0,0,.2) !important;
}
.msg-day-sep span{
  background:var(--glass-2) !important;
  border:1px solid var(--hairline) !important;
  backdrop-filter:blur(8px);
}

/* Chat input row */
.chat-input-wrap{
  background:linear-gradient(180deg, transparent, rgba(124,58,237,.04)) !important;
  border-top:1px solid var(--hairline) !important;
}
.chat-attach{
  border-radius:50% !important;
  background:var(--glass-2) !important;
  border:1px solid var(--hairline) !important;
  transition:all var(--t-base) var(--ease-spring) !important;
}
.chat-attach:hover{
  background:rgba(124,58,237,.18) !important;
  border-color:var(--brand-1) !important;
  color:#fff !important;
  transform:scale(1.08);
}

/* Typing indicator */
.chat-typing{
  background:linear-gradient(90deg, rgba(124,58,237,.04), transparent);
  padding:8px 18px 4px !important;
}

/* Loading spinner inside chat */
.chat-loading-spin{
  border-color:var(--hairline) !important;
  border-top-color:var(--brand-1) !important;
  border-right-color:var(--brand-2) !important;
}

/* ─── Sidebar notification badges ─────────────────────────────────────── */
.sb-badge{
  background:linear-gradient(135deg, var(--brand-3), #f97316) !important;
  box-shadow:0 0 0 2px rgba(8,9,26,.95), 0 0 12px rgba(236,72,153,.6) !important;
  font-weight:700 !important;
  animation:ux-rise 280ms var(--ease-spring);
}

/* ─── Dashboard / finance / generator / AI shared polish ──────────────── */
.platform-banner{
  background:linear-gradient(135deg, var(--brand-1) 0%, #6366f1 50%, var(--brand-2) 100%) !important;
  background-size:200% 200%;
  border-radius:var(--radius-xl) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 16px 48px rgba(124,58,237,.35) !important;
  animation:ux-grad-rotate 10s ease-in-out infinite alternate;
  position:relative; overflow:hidden;
}
.platform-banner::after{
  content:'';
  position:absolute; top:0; right:0; bottom:0;
  width:50%;
  background:radial-gradient(ellipse 400px 300px at 100% 50%, rgba(255,255,255,.12), transparent 60%);
  pointer-events:none;
}
.pb-greeting{
  letter-spacing:-1px !important;
  text-shadow:0 2px 8px rgba(0,0,0,.2);
}

.bal-hero{
  background:linear-gradient(135deg, rgba(124,58,237,.08), rgba(6,182,212,.04)) !important;
  border:1px solid rgba(124,58,237,.18) !important;
  border-radius:var(--radius-xl) !important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  position:relative;
  overflow:hidden;
}
.bal-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 600px 300px at 50% 0%, rgba(124,58,237,.18), transparent 60%);
  opacity:.6;
}
.bal-amt{
  background:linear-gradient(135deg, #fff 0%, #cbb5fc 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  letter-spacing:-2px !important;
}

.tx-li, .todo-li{
  background:linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.005)) !important;
  border:1px solid var(--hairline) !important;
  border-radius:10px !important;
  transition:
    transform var(--t-fast),
    border-color var(--t-base),
    background var(--t-base) !important;
}
.tx-li:hover, .todo-li:hover{
  border-color:var(--hairline-strong) !important;
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important;
  transform:translateX(2px);
}

.gen-out{
  background:rgba(0,0,0,.25) !important;
  border:1px solid var(--hairline) !important;
  border-radius:12px !important;
  backdrop-filter:blur(8px);
}

/* AI chat */
.ai-av, .msg-av{
  background:var(--grad-brand) !important;
  box-shadow:0 0 0 2px rgba(124,58,237,.15), 0 4px 12px rgba(124,58,237,.3) !important;
}
.welcome-bub, .msg-wrap.bot .bubble{
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  border:1px solid var(--hairline-strong) !important;
  backdrop-filter:blur(10px);
}
.msg-wrap.user .bubble{
  background:var(--grad-brand) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px rgba(124,58,237,.3) !important;
}

/* ─── Games hub: keep gold theme but elevate ─────────────────────────── */
.mono-hero-card{
  border-radius:var(--radius-2xl) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,200,66,.1),
    0 24px 64px rgba(0,0,0,.6),
    0 0 80px rgba(245,200,66,.06) !important;
}
.btn-tg-play{
  border-radius:14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 12px 32px rgba(245,200,66,.4),
    0 0 0 1px rgba(245,200,66,.5) !important;
  transition:
    transform var(--t-fast) var(--ease-spring),
    box-shadow var(--t-base) !important;
}
.btn-tg-play:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 20px 48px rgba(245,200,66,.55),
    0 0 0 1px rgba(245,200,66,.7) !important;
}
.more-game-card{
  background:linear-gradient(135deg, rgba(20,24,46,.7), rgba(12,14,31,.8)) !important;
  border:1px solid var(--hairline) !important;
  border-radius:var(--radius-lg) !important;
  backdrop-filter:blur(12px);
  transition:all var(--t-base) var(--ease-out) !important;
}
.more-game-card:hover{
  transform:translateY(-6px);
  border-color:var(--hairline-strong) !important;
  box-shadow:0 24px 48px rgba(0,0,0,.5) !important;
}
.profile-grid .pf-link{
  background:linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) !important;
  border:1px solid var(--hairline) !important;
  border-radius:var(--radius) !important;
  transition:all var(--t-base) var(--ease-out) !important;
}
.profile-grid .pf-link:hover{
  transform:translateY(-3px);
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  border-color:var(--hairline-strong) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.4) !important;
}

/* ─── Activity feed ───────────────────────────────────────────────────── */
.activity-row{
  background:linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.005)) !important;
  border:1px solid var(--hairline) !important;
  border-radius:10px !important;
  transition:all var(--t-base) var(--ease-out) !important;
}
.activity-row:hover{
  border-color:var(--hairline-strong) !important;
  background:linear-gradient(135deg, rgba(124,58,237,.06), rgba(255,255,255,.01)) !important;
  transform:translateX(3px);
  box-shadow:0 4px 12px rgba(0,0,0,.2) !important;
}
.activity-cta{
  background:var(--grad-brand-soft) !important;
  border:1px solid rgba(124,58,237,.3) !important;
  border-radius:8px !important;
  font-weight:600 !important;
  transition:all var(--t-base) !important;
}
.activity-cta:hover{
  background:var(--grad-brand) !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(124,58,237,.35) !important;
}

/* ─── Loading screen — premium ────────────────────────────────────────── */
#screen-loading{
  background:radial-gradient(ellipse 800px 600px at 50% 50%, #0a0a1a 0%, #05060d 70%) !important;
}
.ld-name{
  background:var(--grad-brand) !important;
  background-size:200% 200% !important;
  animation:ux-grad-rotate 4s ease-in-out infinite alternate;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  letter-spacing:8px !important;
}
.ld-bar{
  background:rgba(255,255,255,.05) !important;
  border:1px solid var(--hairline) !important;
}
.ld-fill{
  background:linear-gradient(90deg, transparent, var(--brand-1), var(--brand-2), transparent) !important;
}

/* ─── Skeleton shimmer (for loading states elsewhere) ─────────────────── */
.skeleton{
  background:linear-gradient(90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.04) 75%);
  background-size:200% 100%;
  animation:ux-shimmer 1.6s ease-in-out infinite;
  border-radius:8px;
}

/* ─── Profile / friends / chat ENTRY animations ──────────────────────── */
.fr-row, .chat-item, .activity-row, .tx-li, .todo-li{
  animation:ux-rise 320ms var(--ease-out) both;
}

/* ─── Toggle / sidebar minimize button ─────────────────────────────── */
.sb-tog{
  background:var(--glass) !important;
  border:1px solid var(--hairline) !important;
  border-radius:8px !important;
  transition:all var(--t-base) var(--ease-spring) !important;
}
.sb-tog:hover{
  background:var(--glass-3) !important;
  border-color:var(--hairline-strong) !important;
  transform:scale(1.05);
}

/* ─── Card-badge / count pills ─────────────────────────────────────────── */
.card-badge, .pm-count, .empty-state{
  background:var(--glass-2) !important;
  border:1px solid var(--hairline) !important;
  border-radius:99px !important;
  font-weight:600 !important;
  font-size:.7rem !important;
  letter-spacing:.3px;
  padding:3px 9px !important;
}

/* ─── Generic hover lift class for any new element ───────────────────── */
.lift{ transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base); }
.lift:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }

/* ─── Reduce motion preference ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ─── Responsive nudges so the polish doesn't break on mobile ────────── */
@media (max-width:760px){
  .top-bar{ backdrop-filter:blur(14px); }
  .modal{ border-radius:var(--radius-lg) !important; }
  .login-card{ padding:24px !important; }
  .pf-hero{ padding:28px 20px !important; }

  



/* ════════════════════════════════════════════════════════════════════════════
   ██████  ██████  ███████ ███    ███ ██ ██    ██ ███    ███
   ██   ██ ██   ██ ██      ████  ████ ██ ██    ██ ████  ████
   ██████  ██████  █████   ██ ████ ██ ██ ██    ██ ██ ████ ██
   ██      ██   ██ ██      ██  ██  ██ ██ ██    ██ ██  ██  ██
   ██      ██   ██ ███████ ██      ██ ██  ██████  ██      ██

   TIER-2 UPGRADE LAYER — WOW-FACTOR OVERRIDES
   Appended below all existing rules. Adds depth, glow, and interaction
   polish without touching a single class name or existing declaration.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Extended design tokens — richer shadow & glow vocabulary ──────────── */
:root {
  /* Ultra-depth shadow stack */
  --shadow-float:
    0 2px 4px rgba(0,0,0,.25),
    0 8px 16px rgba(0,0,0,.35),
    0 24px 56px rgba(0,0,0,.55),
    0 48px 80px rgba(0,0,0,.25);

  /* Signature glow combinations */
  --glow-purple:
    0 0 0 1px rgba(124,58,237,.25),
    0 0 20px rgba(124,58,237,.30),
    0 0 60px rgba(124,58,237,.15),
    0 16px 48px rgba(124,58,237,.20);
  --glow-cyan:
    0 0 0 1px rgba(6,182,212,.22),
    0 0 20px rgba(6,182,212,.25),
    0 0 60px rgba(6,182,212,.12),
    0 16px 48px rgba(6,182,212,.18);
  --glow-pink:
    0 0 0 1px rgba(236,72,153,.22),
    0 0 20px rgba(236,72,153,.25),
    0 0 48px rgba(236,72,153,.12);
  --glow-bi:
    0 0 0 1px rgba(124,58,237,.2),
    0 0 30px rgba(124,58,237,.18),
    0 0 80px rgba(6,182,212,.10),
    0 20px 60px rgba(0,0,0,.5);

  /* Richer glass fills */
  --glass-ultra: rgba(255,255,255,.042);
  --glass-reflect: linear-gradient(135deg,
    rgba(255,255,255,.09) 0%,
    rgba(255,255,255,.02) 50%,
    rgba(255,255,255,.05) 100%);

  /* Motion: spring for snappy feel, expo for smooth deceleration */
  --ease-expo: cubic-bezier(.19,1,.22,1);
  --ease-bounce: cubic-bezier(.34,1.7,.64,1);
  --t-micro: 90ms;
  --t-xslow: 600ms;
}


/* ════════════════════════════════════════════════════════════════════════════
   1. CARDS — ULTRA FLOATING GLASS (strongest upgrade section)
   ════════════════════════════════════════════════════════════════════════════ */

/* Universal card reset — GPU layer promotion */
.card, .pm-card, .mod-card, .stat, .panel,
.bal-hero, .pf-hero, .login-card, .frx-strip,
.more-game-card, .mono-hero-card, .chat-side, .chat-thread {
  will-change: transform, box-shadow;
  transform: translate3d(0,0,0);           /* GPU promote */
}

/* ── .card — deep float ──────────────────────────────────────────────────── */
.card {
  background: linear-gradient(155deg,
    rgba(255,255,255,.058) 0%,
    rgba(255,255,255,.018) 45%,
    rgba(124,58,237,.04)  100%) !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 2px 4px rgba(0,0,0,.3),
    0 8px 20px rgba(0,0,0,.4),
    0 24px 48px rgba(0,0,0,.3) !important;
  transition:
    transform 380ms var(--ease-expo),
    box-shadow 380ms var(--ease-expo),
    border-color 280ms var(--ease-out) !important;
}
.card:hover {
  transform: translateY(-12px) scale(1.012) translate3d(0,0,0) !important;
  border-color: rgba(124,58,237,.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 4px 8px rgba(0,0,0,.35),
    0 16px 40px rgba(0,0,0,.55),
    0 40px 80px rgba(0,0,0,.35),
    var(--glow-purple) !important;
}

/* ── .pm-card — spotlight hover with orbital glow ───────────────────────── */
.pm-card {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 4px 12px rgba(0,0,0,.4),
    0 16px 40px rgba(0,0,0,.35) !important;
  transition:
    transform 400ms var(--ease-expo),
    box-shadow 400ms var(--ease-expo),
    border-color 280ms !important;
}
.pm-card:hover {
  transform: translateY(-14px) scale(1.018) translate3d(0,0,0) !important;
  border-color: rgba(124,58,237,.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 8px 24px rgba(0,0,0,.5),
    0 32px 64px rgba(0,0,0,.45),
    0 56px 80px rgba(0,0,0,.2),
    var(--glow-bi) !important;
}

/* ── .mod-card — landing feature cards ──────────────────────────────────── */
.mod-card {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    var(--shadow-lg) !important;
  transition:
    transform 400ms var(--ease-expo),
    box-shadow 400ms var(--ease-expo),
    border-color 280ms !important;
}
.mod-card:hover {
  transform: translateY(-16px) scale(1.02) translate3d(0,0,0) !important;
  border-color: rgba(124,58,237,.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 8px 20px rgba(0,0,0,.5),
    0 32px 72px rgba(0,0,0,.55),
    0 64px 100px rgba(0,0,0,.25),
    var(--glow-bi) !important;
}

/* ── Stat tiles — delicate cyan lift ────────────────────────────────────── */
.stat {
  transition:
    transform 320ms var(--ease-expo),
    box-shadow 320ms var(--ease-expo),
    border-color 240ms !important;
}
.stat:hover {
  transform: translateY(-8px) scale(1.025) translate3d(0,0,0) !important;
  border-color: rgba(6,182,212,.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 6px 16px rgba(0,0,0,.4),
    0 20px 44px rgba(0,0,0,.4),
    var(--glow-cyan) !important;
}

/* ── .more-game-card ─────────────────────────────────────────────────────── */
.more-game-card:hover {
  transform: translateY(-12px) scale(1.015) translate3d(0,0,0) !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.5),
    0 32px 64px rgba(0,0,0,.5),
    0 0 60px rgba(245,200,66,.08) !important;
}

/* ── .frx-strip — FranxyID strips ───────────────────────────────────────── */
.frx-strip:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow:
    0 6px 16px rgba(0,0,0,.4),
    0 20px 44px rgba(124,58,237,.25),
    var(--glow-purple) !important;
}

/* ── .fr-row — friend rows ───────────────────────────────────────────────── */
.fr-row:hover {
  transform: translateY(-4px) translateX(2px) !important;
  box-shadow:
    0 6px 16px rgba(0,0,0,.35),
    0 0 0 1px rgba(124,58,237,.22),
    0 0 32px rgba(124,58,237,.10) !important;
}

/* ── Activity rows ───────────────────────────────────────────────────────── */
.activity-row:hover {
  transform: translateX(5px) translateY(-2px) !important;
  box-shadow:
    0 4px 14px rgba(0,0,0,.3),
    0 0 0 1px rgba(124,58,237,.2),
    0 0 24px rgba(124,58,237,.08) !important;
}

/* ── pf-link / pf-link2 ──────────────────────────────────────────────────── */
.pf-link-card:hover, .pf-link2:hover {
  transform: translateX(6px) translateY(-2px) !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,.35),
    0 0 0 1px rgba(124,58,237,.18) !important;
}

/* ── profile-grid pf-link ────────────────────────────────────────────────── */
.profile-grid .pf-link:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow:
    0 12px 32px rgba(0,0,0,.45),
    var(--glow-purple) !important;
}

/* ── tx-li / todo-li ─────────────────────────────────────────────────────── */
.tx-li:hover, .todo-li:hover {
  transform: translateX(4px) translateY(-2px) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,.3),
    0 0 0 1px rgba(124,58,237,.15) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   2. BUTTONS — PRESS PHYSICS + GRADIENT GLOW
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Primary / CTA buttons — bolder lift + shimmer ──────────────────────── */
.btn-pri, .btn-login, .btn-solid-lp, .btn-hero-main, .btn-save {
  background: linear-gradient(135deg, #7C3AED 0%, #A855F7 40%, #06B6D4 100%) !important;
  background-size: 220% 220% !important;
  background-position: 0% 50% !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 2px 6px rgba(124,58,237,.3),
    0 8px 20px rgba(124,58,237,.35),
    0 0 40px rgba(124,58,237,.12) !important;
  transition:
    transform 180ms var(--ease-bounce),
    box-shadow 280ms var(--ease-expo),
    background-position 500ms var(--ease-in-out) !important;
}
.btn-pri:hover, .btn-login:hover, .btn-solid-lp:hover,
.btn-hero-main:hover, .btn-save:hover {
  background-position: 100% 50% !important;
  transform: translateY(-4px) scale(1.03) translate3d(0,0,0) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(0,0,0,.1),
    0 4px 10px rgba(124,58,237,.4),
    0 16px 36px rgba(124,58,237,.55),
    0 0 80px rgba(124,58,237,.20),
    0 0 0 1px rgba(124,58,237,.35) !important;
}
.btn-pri:active, .btn-login:active, .btn-solid-lp:active,
.btn-hero-main:active, .btn-save:active {
  transform: translateY(1px) scale(.965) translate3d(0,0,0) !important;
  transition-duration: var(--t-micro) !important;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.25),
    0 2px 8px rgba(124,58,237,.3) !important;
}

/* ── Ghost / secondary buttons ───────────────────────────────────────────── */
.btn-ghost-lp, .btn-ghost, .btn-cancel, .btn-banner, .btn-hero-alt {
  transition:
    background 280ms var(--ease-out),
    border-color 280ms,
    transform 180ms var(--ease-bounce),
    box-shadow 280ms var(--ease-expo) !important;
}
.btn-ghost-lp:hover, .btn-ghost:hover, .btn-cancel:hover,
.btn-banner:hover, .btn-hero-alt:hover {
  transform: translateY(-3px) scale(1.02) !important;
  border-color: rgba(124,58,237,.5) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,.35),
    0 0 0 1px rgba(124,58,237,.25),
    0 0 32px rgba(124,58,237,.10) !important;
}
.btn-ghost-lp:active, .btn-ghost:active,
.btn-cancel:active, .btn-hero-alt:active {
  transform: translateY(0) scale(.96) !important;
  transition-duration: var(--t-micro) !important;
}

/* ── .btn-add — pop-rotate with ring ────────────────────────────────────── */
.btn-add:hover {
  transform: translateY(-3px) rotate(90deg) scale(1.08) !important;
  box-shadow:
    0 8px 28px rgba(124,58,237,.55),
    0 0 0 4px rgba(124,58,237,.18),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* ── .chat-send — pulse on hover ─────────────────────────────────────────── */
.chat-send:hover {
  transform: translateY(-2px) scale(1.08) !important;
  box-shadow:
    0 8px 28px rgba(124,58,237,.55),
    0 0 0 3px rgba(124,58,237,.2) !important;
}
.chat-send:active {
  transform: scale(.9) !important;
  transition-duration: var(--t-micro) !important;
}

/* ── Generic button — global fallback for any unclassed <button> ─────────── */
button:not([class]) {
  transition:
    transform 180ms var(--ease-bounce),
    box-shadow 240ms var(--ease-expo) !important;
}
button:not([class]):hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 20px rgba(124,58,237,.3) !important;
}
button:not([class]):active {
  transform: scale(.96) !important;
  transition-duration: var(--t-micro) !important;
}

/* ── Games play button — gold aura boost ────────────────────────────────── */
.btn-tg-play:hover {
  transform: translateY(-5px) scale(1.04) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 24px 56px rgba(245,200,66,.65),
    0 0 0 2px rgba(245,200,66,.8),
    0 0 80px rgba(245,200,66,.20) !important;
}
.btn-tg-play:active {
  transform: translateY(0) scale(.97) !important;
  transition-duration: var(--t-micro) !important;
}

/* ── Auth tab active state ───────────────────────────────────────────────── */
.auth-tab.on {
  box-shadow:
    0 4px 18px rgba(124,58,237,.5),
    inset 0 1px 0 rgba(255,255,255,.25),
    0 0 0 1px rgba(124,58,237,.4) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   3. NAVIGATION — TOP BAR & SIDEBAR DEPTH
   ════════════════════════════════════════════════════════════════════════════ */

/* Top-bar: stronger blur, better glass edge */
.top-bar {
  background: rgba(5,6,13,.55) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05),
    0 4px 24px rgba(0,0,0,.35) !important;
}
.top-bar.scrolled {
  background: rgba(5,6,13,.88) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08),
    0 8px 40px rgba(0,0,0,.6),
    0 0 80px rgba(124,58,237,.04) !important;
}

/* Sidebar: deeper gradient, richer inner glow */
.sidebar {
  background: linear-gradient(165deg,
    rgba(14,16,36,.90) 0%,
    rgba(8,9,26,.95)   60%,
    rgba(5,6,13,.98)   100%) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  box-shadow:
    1px 0 0 rgba(255,255,255,.055),
    4px 0 32px rgba(0,0,0,.5),
    0 0 80px rgba(124,58,237,.04) !important;
}

/* Sidebar item hover — stronger spring + glow micro */
.sb-li:hover {
  transform: translateX(5px) scale(1.01) !important;
  box-shadow: 0 4px 16px rgba(124,58,237,.12) !important;
}
.sb-li.on {
  box-shadow:
    inset 0 0 0 1px rgba(124,58,237,.40),
    0 4px 20px rgba(124,58,237,.18),
    0 0 40px rgba(124,58,237,.06) !important;
}
.sb-li.on::after {
  box-shadow:
    0 0 20px rgba(124,58,237,.7),
    0 0 40px rgba(6,182,212,.3) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   4. MODALS — CINEMATIC ENTRANCE + GLASS DEPTH
   ════════════════════════════════════════════════════════════════════════════ */

.modal {
  background: linear-gradient(155deg,
    rgba(22,26,52,.97) 0%,
    rgba(14,16,36,.99) 100%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 16px 48px rgba(0,0,0,.7),
    0 48px 100px rgba(0,0,0,.5),
    0 0 0 1px rgba(124,58,237,.14),
    0 0 80px rgba(124,58,237,.08) !important;
}

/* Modal top shimmer line — brighter */
.login-card::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(168,85,247,.8) 30%,
    rgba(6,182,212,.8)  70%,
    transparent 100%) !important;
  opacity: .7 !important;
  height: 1px !important;
}

/* Login card — more dramatic entrance glow */
.login-card {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 24px 64px rgba(0,0,0,.7),
    0 0 0 1px rgba(124,58,237,.14),
    0 0 120px rgba(124,58,237,.18),
    0 0 200px rgba(6,182,212,.06) !important;
}

/* Modal-bg backdrop — richer blur */
.modal-bg {
  background: rgba(0,0,0,.75) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   5. INPUTS — FOCUS FIELD LIGHT
   ════════════════════════════════════════════════════════════════════════════ */

.lf-input:focus, .todo-in:focus, .note-ta:focus, .f-in:focus, .chat-input:focus,
.modal input:focus, .modal textarea:focus,
input:focus, textarea:focus {
  border-color: var(--brand-1) !important;
  background: rgba(124,58,237,.065) !important;
  box-shadow:
    0 0 0 1px rgba(124,58,237,.45),
    0 0 0 4px rgba(124,58,237,.16),
    0 0 32px rgba(124,58,237,.12),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition:
    border-color 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out),
    background 200ms !important;
}

/* Hover state — subtle warm border */
.lf-input:hover, .todo-in:hover, .f-in:hover,
.chat-input:hover, .note-ta:hover {
  border-color: rgba(255,255,255,.20) !important;
  background: rgba(255,255,255,.038) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   6. SCROLLBAR — VIVID GRADIENT THUMB
   ════════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    rgba(124,58,237,.55) 0%,
    rgba(168,85,247,.40) 50%,
    rgba(6,182,212,.38)  100%) !important;
  border: 2.5px solid transparent !important;
  background-clip: padding-box !important;
  border-radius: 99px !important;
  box-shadow: 0 0 8px rgba(124,58,237,.25) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    rgba(124,58,237,.80) 0%,
    rgba(168,85,247,.65) 50%,
    rgba(6,182,212,.60)  100%) !important;
  background-clip: padding-box !important;
  box-shadow: 0 0 12px rgba(124,58,237,.5) !important;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track {
  background: rgba(255,255,255,.02);
  border-radius: 99px;
}


/* ════════════════════════════════════════════════════════════════════════════
   7. PLATFORM BANNER — LIVING GRADIENT
   ════════════════════════════════════════════════════════════════════════════ */

.platform-banner {
  background: linear-gradient(125deg,
    #7C3AED 0%, #6366f1 30%, #A855F7 55%, #EC4899 78%, #06B6D4 100%) !important;
  background-size: 300% 300% !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 20px 56px rgba(124,58,237,.42),
    0 0 120px rgba(124,58,237,.16) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   8. CHAT — MESSAGE BUBBLE DEPTH
   ════════════════════════════════════════════════════════════════════════════ */

.msg-row.out .msg-bubble {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 4px 16px rgba(124,58,237,.40),
    0 0 40px rgba(124,58,237,.12),
    0 1px 2px rgba(0,0,0,.25) !important;
}
.msg-row.in .msg-bubble {
  border-color: rgba(255,255,255,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 14px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.04) !important;
}

/* Chat send button — ring pulse animation */
@keyframes ring-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,.5), 0 4px 14px rgba(124,58,237,.4); }
  50%       { box-shadow: 0 0 0 6px rgba(124,58,237,.0), 0 4px 14px rgba(124,58,237,.4); }
}
.chat-send {
  animation: ring-pulse 2.4s var(--ease-in-out) infinite;
}
.chat-send:hover {
  animation: none !important;
}

/* Chat item active accent bar */
.chat-item.active {
  box-shadow: inset 4px 0 0 var(--brand-1), inset 0 0 40px rgba(124,58,237,.06) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   9. PROFILE HERO — ELEVATED DEPTH & AVATAR HALO
   ════════════════════════════════════════════════════════════════════════════ */

.pf-hero {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 20px 56px rgba(0,0,0,.5),
    0 0 120px rgba(124,58,237,.10) !important;
}

.pf-av {
  box-shadow:
    0 0 0 3px rgba(255,255,255,.06),
    0 0 0 6px rgba(124,58,237,.25),
    0 0 0 10px rgba(124,58,237,.08),
    0 12px 40px rgba(124,58,237,.5) !important;
  filter: drop-shadow(0 0 24px rgba(124,58,237,.35)) !important;
}

/* User avatar in sidebar foot */
.u-av {
  box-shadow:
    0 0 0 2px rgba(124,58,237,.30),
    0 0 0 5px rgba(124,58,237,.08),
    0 4px 18px rgba(124,58,237,.55) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   10. LOADING SCREEN — DRAMATIC RADIAL CORE
   ════════════════════════════════════════════════════════════════════════════ */

#screen-loading {
  background:
    radial-gradient(ellipse 600px 500px at 50% 40%, rgba(124,58,237,.12), transparent 65%),
    radial-gradient(ellipse 900px 600px at 50% 50%, #090a18 0%, #05060d 80%) !important;
}

.ld-fill {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(124,58,237,.5) 20%,
    var(--brand-1) 40%,
    var(--brand-2) 60%,
    rgba(6,182,212,.5) 80%,
    transparent 100%) !important;
  box-shadow: 0 0 20px rgba(124,58,237,.6) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   11. NOTIFICATION BADGES — PULSING HALO
   ════════════════════════════════════════════════════════════════════════════ */

@keyframes badge-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236,72,153,.5),  0 0 0 2px rgba(8,9,26,.95); }
  60%       { box-shadow: 0 0 0 6px rgba(236,72,153,.0), 0 0 0 2px rgba(8,9,26,.95); }
}
.sb-badge {
  animation: badge-halo 2.2s ease-in-out infinite !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   12. SKELETON SHIMMER — RICHER WAVE
   ════════════════════════════════════════════════════════════════════════════ */

.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,.035) 0%,
    rgba(124,58,237,.07)   35%,
    rgba(255,255,255,.055) 50%,
    rgba(6,182,212,.05)    65%,
    rgba(255,255,255,.035) 100%) !important;
  background-size: 300% 100% !important;
  animation: ux-shimmer 2s var(--ease-in-out) infinite !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   13. MICRO-INTERACTION — HOVER GLOW FOR ICONS & AVATARS
   ════════════════════════════════════════════════════════════════════════════ */

/* Sidebar icons — glow filter on hover */
.sb-li:hover .sb-ic {
  filter: drop-shadow(0 0 6px rgba(124,58,237,.7)) brightness(1.15) !important;
  transition: filter 240ms var(--ease-out) !important;
}

/* Chat avatars — ring reveal */
.chat-item-av, .fr-av, .ai-av, .msg-av {
  transition:
    box-shadow 280ms var(--ease-out),
    transform 200ms var(--ease-spring) !important;
}
.chat-item:hover .chat-item-av {
  transform: scale(1.08) !important;
  box-shadow:
    0 0 0 2px rgba(124,58,237,.35),
    0 0 0 5px rgba(124,58,237,.08),
    0 4px 12px rgba(124,58,237,.35) !important;
}
.fr-row:hover .fr-av {
  transform: scale(1.06) !important;
  box-shadow:
    0 0 0 3px rgba(124,58,237,.35),
    0 4px 14px rgba(124,58,237,.4) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   14. SIDEBAR TOGGLE BUTTON — PREMIUM PILL
   ════════════════════════════════════════════════════════════════════════════ */

.sb-tog:hover {
  background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(6,182,212,.10)) !important;
  border-color: rgba(124,58,237,.4) !important;
  transform: scale(1.10) !important;
  box-shadow:
    0 4px 16px rgba(124,58,237,.25),
    0 0 0 1px rgba(124,58,237,.2) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   15. GLOBAL SELECTION & FOCUS POLISH
   ════════════════════════════════════════════════════════════════════════════ */

::selection {
  background: rgba(124,58,237,.40) !important;
  color: #fff !important;
  text-shadow: none;
}

:focus-visible {
  outline: 2px solid rgba(124,58,237,.65) !important;
  outline-offset: 3px !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   16. HELPER UTILITIES — composable classes for new elements
   ════════════════════════════════════════════════════════════════════════════ */

/* .lift — richer than before */
.lift {
  transition:
    transform 360ms var(--ease-expo),
    box-shadow 360ms var(--ease-expo) !important;
  will-change: transform !important;
}
.lift:hover {
  transform: translateY(-10px) scale(1.01) translate3d(0,0,0) !important;
  box-shadow: var(--shadow-float) !important;
}

/* .glow-on-hover — attach to any element for ambient brand glow */
.glow-on-hover {
  transition: box-shadow 280ms var(--ease-out) !important;
}
.glow-on-hover:hover {
  box-shadow: var(--glow-purple) !important;
}

/* .press — tactile click on any element */
.press:active {
  transform: scale(.96) translate3d(0,0,0) !important;
  transition-duration: var(--t-micro) !important;
}

/* .float-anim — subtle idle float for hero elements */
.float-anim {
  animation: ux-float 7s ease-in-out infinite !important;
}

/* .grad-text — gradient text helper */
.grad-text {
  background: var(--grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   17. PERFORMANCE GUARD — containment & will-change scope limits
   ════════════════════════════════════════════════════════════════════════════ */

/* Contain paint & layout for scroll-heavy lists */
.fr-row, .tx-li, .todo-li, .activity-row, .chat-item {
  contain: layout style !important;
}

/* Drop will-change once off-screen (let browser manage) */
.card:not(:hover), .pm-card:not(:hover), .mod-card:not(:hover),
.stat:not(:hover), .more-game-card:not(:hover) {
  will-change: auto;
}
.card:hover, .pm-card:hover, .mod-card:hover,
.stat:hover, .more-game-card:hover {
  will-change: transform, box-shadow;
}


/* ════════════════════════════════════════════════════════════════════════════
   18. REDUCED-MOTION SAFETY NET
       Overrides the upgrade layer — respects user accessibility preference
   ════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .card, .pm-card, .mod-card, .stat,
  .more-game-card, .frx-strip, .fr-row,
  .activity-row, .tx-li, .todo-li,
  .pf-link-card, .pf-link2,
  .btn-pri, .btn-login, .btn-solid-lp,
  .btn-hero-main, .btn-save,
  .btn-ghost-lp, .btn-ghost, .btn-cancel,
  .btn-banner, .btn-hero-alt,
  .btn-add, .chat-send, .sb-li,
  .chat-item-av, .fr-av, .sb-tog,
  .lift, .glow-on-hover {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* ── End of TIER-2 UPGRADE LAYER ──────────────────────────────────────────── */

  /* ════════════════════════════════════════
   ULTRA DEPTH + FLOATING EFFECT
════════════════════════════════════════ */

/* ─── Responsive (tetap aman) ─── */
@media (max-width:760px){
  .top-bar{ backdrop-filter:blur(14px); }
  .modal{ border-radius:var(--radius-lg) !important; }
  .login-card{ padding:24px !important; }
  .pf-hero{ padding:28px 20px !important; }
}

/* ════════════════════════════════════════
   FINAL GLOBAL EFFECT (CLEAN VERSION)
════════════════════════════════════════ */

/* DEPTH */
.card, .mod-card, .panel {
  transition: transform 0.35s cubic-bezier(.16,1,.3,1),
              box-shadow 0.35s ease,
              border 0.25s ease;
  will-change: transform;
}

/* HOVER */
.card:hover, .mod-card:hover, .panel:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow:
    0 20px 60px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 50px rgba(124,58,237,.25);
}

/* GLOW */
.card::after, .mod-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(circle at center,
    rgba(124,58,237,.25),
    transparent 70%);
}

.card:hover::after, .mod-card:hover::after {
  opacity: 1;
}

/* BUTTON */
button {
  transition: all .2s cubic-bezier(.16,1,.3,1);
}

button:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 30px rgba(124,58,237,.35);
}

button:active {
  transform: scale(.96);
}

/* ████████████████████████████████████████████████████████████████████████████
   ████                                                                    ████
   ████   TIER-3 — APEX LAYER  ·  Maximum Premium  ·  FranxyAI v3          ████
   ████   Added on top of Tier-1 + Tier-2. Zero removals, zero renames.   ████
   ████   New techniques: morphic borders, cursor-tracked specular light,  ████
   ████   kinetic text shimmer, card tilt-3D, button magnetism physics,    ████
   ████   ambient room light, and context-aware depth layers.              ████
   ████                                                                    ████
   ████████████████████████████████████████████████████████████████████████████ */


/* ─── APEX TOKEN EXTENSIONS ───────────────────────────────────────────────── */
:root {
  /* Next-gen shadow vocabulary */
  --shadow-abyss:
    0 2px 4px   rgba(0,0,0,.30),
    0 8px 16px  rgba(0,0,0,.40),
    0 24px 48px rgba(0,0,0,.55),
    0 56px 88px rgba(0,0,0,.30),
    0 80px 120px rgba(0,0,0,.15);

  /* Spectral glow (purple→cyan→pink tri-chroma) */
  --glow-spectra:
    0 0 0 1px rgba(124,58,237,.28),
    0 0 24px rgba(124,58,237,.30),
    0 0 60px rgba(6,182,212,.14),
    0 0 100px rgba(236,72,153,.06),
    0 20px 56px rgba(0,0,0,.55);

  /* Card edge light — top specular reflection */
  --edge-light: inset 0 1px 0 rgba(255,255,255,.14),
                inset 0 -1px 0 rgba(0,0,0,.22),
                inset 1px 0 0 rgba(255,255,255,.04),
                inset -1px 0 0 rgba(255,255,255,.02);

  /* Morphic border (animated gradient border illusion) */
  --border-glow-angle: 135deg;

  /* Easing additions */
  --ease-magnetic: cubic-bezier(.25, .46, .45, .94);
  --ease-elastic:  cubic-bezier(.68, -0.55, .265, 1.55);
  --t-instant: 60ms;
  --t-cinematic: 800ms;
}


/* ████████████████████████████████████████████████████████████████████████████
   A.  MORPHIC BORDER SYSTEM — animated gradient border on key cards
   ████████████████████████████████████████████████████████████████████████████ */

/* Gradient border wrapper technique — pseudo element behind card */
.card, .pm-card, .mod-card, .login-card, .bal-hero, .pf-hero {
  position: relative !important;
  isolation: isolate !important;
}

/* Animated border halo — appears on hover via opacity transition */
.card::before,
.pm-card::before,
.mod-card::before {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  background: linear-gradient(
    var(--border-glow-angle, 135deg),
    rgba(124,58,237,.0)  0%,
    rgba(168,85,247,.5)  30%,
    rgba(6,182,212,.4)   60%,
    rgba(124,58,237,.0)  100%
  ) !important;
  opacity: 0 !important;
  transition: opacity 400ms var(--ease-out) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
.card:hover::before,
.pm-card:hover::before,
.mod-card:hover::before {
  opacity: 1 !important;
}

/* Login card — always-on subtle border glow */
.login-card::after {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg,
    rgba(124,58,237,.35) 0%,
    rgba(6,182,212,.20)  50%,
    rgba(124,58,237,.15) 100%
  ) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  animation: borderSpin 6s linear infinite !important;
}
@keyframes borderSpin {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}


/* ████████████████████████████████████████████████████████████████████████████
   B.  ULTRA-FLOAT CARD SYSTEM — deeper 3D lift than Tier-2
   ████████████████████████████████████████████████████████████████████████████ */

/* .card — maximum float */
.card:hover {
  transform: translateY(-18px) scale(1.018) translate3d(0,0,0) !important;
  box-shadow:
    var(--edge-light),
    0 4px 8px   rgba(0,0,0,.35),
    0 16px 36px rgba(0,0,0,.50),
    0 40px 80px rgba(0,0,0,.40),
    0 70px 100px rgba(0,0,0,.18),
    0 0 0 1px rgba(124,58,237,.30),
    0 0 40px rgba(124,58,237,.20),
    0 0 90px rgba(6,182,212,.08) !important;
}

/* .pm-card — strong bi-glow lift */
.pm-card:hover {
  transform: translateY(-20px) scale(1.022) translate3d(0,0,0) !important;
  box-shadow:
    var(--edge-light),
    0 8px 20px  rgba(0,0,0,.50),
    0 28px 60px rgba(0,0,0,.55),
    0 60px 90px rgba(0,0,0,.30),
    0 0 0 1px rgba(124,58,237,.35),
    0 0 50px rgba(124,58,237,.22),
    0 0 100px rgba(6,182,212,.10) !important;
}

/* .mod-card — hero float, strongest elevation */
.mod-card:hover {
  transform: translateY(-22px) scale(1.025) translate3d(0,0,0) !important;
  box-shadow:
    var(--edge-light),
    0 10px 24px  rgba(0,0,0,.55),
    0 36px 72px  rgba(0,0,0,.60),
    0 72px 120px rgba(0,0,0,.30),
    0 0 0 1px rgba(124,58,237,.40),
    0 0 60px rgba(124,58,237,.25),
    0 0 120px rgba(6,182,212,.12) !important;
}

/* .stat — crisp cyan float */
.stat:hover {
  transform: translateY(-10px) scale(1.03) translate3d(0,0,0) !important;
  box-shadow:
    var(--edge-light),
    0 6px 16px  rgba(0,0,0,.40),
    0 20px 44px rgba(0,0,0,.45),
    0 0 0 1px rgba(6,182,212,.35),
    0 0 30px rgba(6,182,212,.22),
    0 0 70px rgba(6,182,212,.10) !important;
}

/* Stat icon — pulse on card hover */
.stat:hover .stat-ic {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 0 20px rgba(124,58,237,.35) !important;
  transform: scale(1.08) !important;
  transition: transform 280ms var(--ease-spring),
              box-shadow 280ms var(--ease-out) !important;
}

/* .more-game-card */
.more-game-card:hover {
  transform: translateY(-14px) scale(1.018) translate3d(0,0,0) !important;
  border-color: rgba(245,200,66,.25) !important;
  box-shadow:
    var(--edge-light),
    0 10px 24px rgba(0,0,0,.55),
    0 32px 64px rgba(0,0,0,.50),
    0 0 60px rgba(245,200,66,.10) !important;
}

/* .bal-hero — finance hero */
.bal-hero {
  transition:
    box-shadow 400ms var(--ease-out),
    border-color 300ms !important;
}
.bal-hero:hover {
  border-color: rgba(124,58,237,.35) !important;
  box-shadow:
    var(--edge-light),
    0 16px 48px rgba(0,0,0,.55),
    0 0 80px rgba(124,58,237,.18),
    0 0 160px rgba(6,182,212,.08) !important;
}


/* ████████████████████████████████████████████████████████████████████████████
   C.  KINETIC TEXT — shimmer on headings and brand elements
   ████████████████████████████████████████████████████████████████████████████ */

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

/* Gradient shimmer text for key headings */
.lp-h1, .pb-greeting, .bal-amt,
.chat-side-hd, .pf-name, .ld-name {
  background-size: 300% auto !important;
  animation: textShimmer 5s linear infinite !important;
}

/* FranyxID gradient text — continuous sweep */
.frx-strip-id {
  background-size: 300% auto !important;
  animation: textShimmer 3s linear infinite !important;
}

/* Logo / brand mark kinetic glow */
.fx-mark {
  animation: ux-grad-rotate 4s linear infinite,
             ux-glow-pulse 3s ease-in-out infinite !important;
}


/* ████████████████████████████████████████████████████████████████████████████
   D.  BUTTON APEX — magnetism physics + ripple aura
   ████████████████████████████████████████████████████████████████████████████ */

/* Primary buttons — deepest lift ever, spectra glow */
.btn-pri, .btn-login, .btn-solid-lp, .btn-hero-main, .btn-save {
  letter-spacing: .25px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
}
.btn-pri:hover, .btn-login:hover, .btn-solid-lp:hover,
.btn-hero-main:hover, .btn-save:hover {
  transform: translateY(-5px) scale(1.035) translate3d(0,0,0) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 0 rgba(0,0,0,.12),
    0 6px 14px  rgba(124,58,237,.45),
    0 20px 48px rgba(124,58,237,.55),
    0 0 0 1px rgba(168,85,247,.50),
    0 0 80px rgba(124,58,237,.20) !important;
}
.btn-pri:active, .btn-login:active, .btn-solid-lp:active,
.btn-hero-main:active, .btn-save:active {
  transform: translateY(1px) scale(.96) translate3d(0,0,0) !important;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.30),
    0 2px 8px rgba(124,58,237,.25) !important;
}

/* Ghost buttons — sharper glass on hover */
.btn-ghost-lp:hover, .btn-ghost:hover, .btn-cancel:hover,
.btn-banner:hover, .btn-hero-alt:hover {
  transform: translateY(-4px) scale(1.025) !important;
  background: linear-gradient(135deg,
    rgba(124,58,237,.12),
    rgba(6,182,212,.07)) !important;
  border-color: rgba(168,85,247,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 8px 24px rgba(0,0,0,.40),
    0 0 0 1px rgba(124,58,237,.22),
    0 0 40px rgba(124,58,237,.12) !important;
}

/* .btn-add — explosive rotation + ring burst */
.btn-add {
  transition:
    transform 260ms var(--ease-elastic),
    box-shadow 280ms var(--ease-out) !important;
}
.btn-add:hover {
  transform: translateY(-4px) rotate(90deg) scale(1.12) !important;
  box-shadow:
    0 10px 32px rgba(124,58,237,.60),
    0 0 0 6px rgba(124,58,237,.14),
    0 0 0 12px rgba(124,58,237,.05),
    inset 0 1px 0 rgba(255,255,255,.40) !important;
}

/* SSO button — subtle brand on hover */
.btn-sso:hover {
  transform: translateY(-2px) scale(1.015) !important;
  background: linear-gradient(135deg,
    rgba(255,255,255,.06),
    rgba(124,58,237,.06)) !important;
  border-color: rgba(124,58,237,.35) !important;
  box-shadow:
    0 6px 16px rgba(0,0,0,.30),
    0 0 0 1px rgba(124,58,237,.18) !important;
}

/* Edit profile & friend buttons — full glow on hover */
.btn-edit-profile:hover, .fr-btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.35),
    0 0 0 1px rgba(124,58,237,.25),
    0 0 32px rgba(124,58,237,.12) !important;
}

/* Sign out button */
.btn-signout {
  transition: all 200ms var(--ease-out) !important;
}
.btn-signout:hover {
  background: rgba(255,77,106,.12) !important;
  border-color: rgba(255,77,106,.30) !important;
  color: #ff4d6a !important;
  transform: translateY(-1px) !important;
}


/* ████████████████████████████████████████████████████████████████████████████
   E.  AMBIENT ROOM LIGHT — directional glow on sidebar & top-bar
   ████████████████████████████████████████████████████████████████████████████ */

/* Sidebar — vertical ambient light strip */
.sidebar::after {
  content: '' !important;
  position: absolute !important;
  top: 15% !important;
  bottom: 15% !important;
  right: 0 !important;
  width: 1px !important;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(124,58,237,.4) 30%,
    rgba(6,182,212,.3)  70%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  opacity: .6 !important;
}

/* Top bar — bottom edge ambient glow on scroll */
.top-bar.scrolled::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 10% !important;
  right: 10% !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(124,58,237,.5),
    rgba(6,182,212,.3),
    transparent
  ) !important;
  pointer-events: none !important;
  opacity: .8 !important;
}

/* Platform banner — stronger inner light beam */
.platform-banner::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,.0)  40%,
    rgba(255,255,255,.06) 100%
  ) !important;
  pointer-events: none !important;
}


/* ████████████████████████████████████████████████████████████████████████████
   F.  CHAT & MESSAGES — bubble depth + typing dots
   ████████████████████████████████████████████████████████████████████████████ */

/* Incoming bubble — deeper frosted glass */
.msg-row.in .msg-bubble {
  background: linear-gradient(150deg,
    rgba(255,255,255,.075),
    rgba(255,255,255,.030)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 4px 16px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.04) !important;
}

/* Outgoing bubble — richer brand gradient */
.msg-row.out .msg-bubble {
  background: linear-gradient(135deg,
    #7C3AED 0%, #9333ea 40%, #06B6D4 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 4px 16px rgba(124,58,237,.45),
    0 0 40px rgba(124,58,237,.15),
    0 1px 2px rgba(0,0,0,.25) !important;
}

/* Typing indicator dots — animated */
@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0);    opacity: .4; }
  40%           { transform: translateY(-5px); opacity: 1;  }
}
.chat-typing-dot {
  animation: typingBounce 1.4s ease-in-out infinite !important;
}
.chat-typing-dot:nth-child(2) { animation-delay: .2s !important; }
.chat-typing-dot:nth-child(3) { animation-delay: .4s !important; }

/* Chat side panel — ambient top glow */
.chat-side {
  box-shadow:
    inset 0 1px 0 rgba(124,58,237,.12),
    inset 0 0 60px rgba(124,58,237,.03),
    var(--shadow-lg) !important;
}

/* Chat send button — stronger ring pulse */
@keyframes ring-pulse-v3 {
  0%, 100% {
    box-shadow:
      0 0 0 0   rgba(124,58,237,.55),
      0 4px 14px rgba(124,58,237,.40);
  }
  50% {
    box-shadow:
      0 0 0 8px  rgba(124,58,237,.00),
      0 4px 14px rgba(124,58,237,.40);
  }
}
.chat-send {
  animation: ring-pulse-v3 2.6s ease-in-out infinite !important;
}
.chat-send:hover {
  animation: none !important;
  transform: translateY(-3px) scale(1.10) !important;
  box-shadow:
    0 10px 32px rgba(124,58,237,.60),
    0 0 0 4px rgba(124,58,237,.20) !important;
}


/* ████████████████████████████████████████████████████████████████████████████
   G.  PROFILE PAGE — avatar halo, stat glow, FranyxID strip
   ████████████████████████████████████████████████████████████████████████████ */

/* Avatar — triple ring halo */
.pf-av {
  box-shadow:
    0 0 0 3px  rgba(255,255,255,.07),
    0 0 0 7px  rgba(124,58,237,.28),
    0 0 0 13px rgba(124,58,237,.08),
    0 0 0 20px rgba(6,182,212,.04),
    0 16px 48px rgba(124,58,237,.55),
    0 0 80px   rgba(124,58,237,.20) !important;
  filter: drop-shadow(0 0 32px rgba(124,58,237,.40)) !important;
}

/* FranyxID strip — elevated glass panel */
.frx-strip {
  background: linear-gradient(135deg,
    rgba(124,58,237,.14),
    rgba(6,182,212,.08)) !important;
  border: 1px solid rgba(124,58,237,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 24px rgba(0,0,0,.35),
    0 0 0 1px rgba(124,58,237,.12) !important;
  transition:
    transform 320ms var(--ease-expo),
    box-shadow 320ms var(--ease-out),
    border-color 240ms !important;
}
.frx-strip:hover {
  transform: translateY(-6px) scale(1.01) !important;
  border-color: rgba(124,58,237,.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 16px 40px rgba(0,0,0,.45),
    0 0 0 1px rgba(124,58,237,.30),
    0 0 60px rgba(124,58,237,.22) !important;
}


/* ████████████████████████████████████████████████████████████████████████████
   H.  FRIEND ROWS — hover slide + avatar interaction
   ████████████████████████████████████████████████████████████████████████████ */

.fr-row {
  transition:
    transform 280ms var(--ease-expo),
    box-shadow 280ms var(--ease-out),
    background 240ms,
    border-color 240ms !important;
  contain: layout style !important;
}
.fr-row:hover {
  transform: translateY(-5px) translateX(3px) !important;
  background: linear-gradient(135deg,
    rgba(124,58,237,.10),
    rgba(6,182,212,.04),
    rgba(255,255,255,.01)) !important;
  border-color: rgba(124,58,237,.30) !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.40),
    0 0 0 1px rgba(124,58,237,.25),
    0 0 40px rgba(124,58,237,.10) !important;
}


/* ████████████████████████████████████████████████████████████████████████████
   I.  MODAL — ultra entrance + depth layers
   ████████████████████████████████████████████████████████████████████████████ */

.modal {
  background: linear-gradient(160deg,
    rgba(24,28,58,.97) 0%,
    rgba(14,16,36,.99) 60%,
    rgba(8,10,22,1.0)  100%) !important;
  box-shadow:
    var(--edge-light),
    0 24px 64px  rgba(0,0,0,.75),
    0 64px 120px rgba(0,0,0,.50),
    0 0 0 1px rgba(124,58,237,.18),
    0 0 100px rgba(124,58,237,.10),
    0 0 200px rgba(6,182,212,.04) !important;
}

/* Modal title — kinetic gradient */
.modal-title, .modal-hd > h3 {
  background: linear-gradient(135deg, #fff 0%, #d4b5ff 50%, #7dd6e8 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: textShimmer 4s linear infinite !important;
}

/* Close button — sharper X rotation */
.modal-close:hover {
  transform: rotate(90deg) scale(1.08) !important;
  background: rgba(255,77,106,.16) !important;
  border-color: rgba(255,77,106,.40) !important;
  box-shadow: 0 0 20px rgba(255,77,106,.20) !important;
}


/* ████████████████████████████████████████████████████████████████████████████
   J.  INPUTS — depth focus ring + label micro-animation
   ████████████████████████████████████████████████████████████████████████████ */

/* Deeper hover glow on all inputs */
.lf-input, .todo-in, .note-ta, .f-in, .chat-input,
input[type=text], input[type=email], input[type=password], textarea {
  transition:
    border-color 200ms var(--ease-out),
    box-shadow   240ms var(--ease-out),
    background   200ms,
    transform    140ms var(--ease-spring) !important;
}
.lf-input:focus, .todo-in:focus, .note-ta:focus, .f-in:focus,
.chat-input:focus, input:focus, textarea:focus {
  transform: scale(1.005) !important;
  border-color: rgba(168,85,247,.70) !important;
  background: rgba(124,58,237,.08) !important;
  box-shadow:
    0 0 0 1px rgba(124,58,237,.50),
    0 0 0 5px rgba(124,58,237,.14),
    0 0 40px rgba(124,58,237,.12),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Vibe chip on active — deeper glow */
.vibe-btn.on {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 4px 16px rgba(124,58,237,.45),
    0 0 0 1px rgba(124,58,237,.35),
    0 0 32px rgba(124,58,237,.15) !important;
}


/* ████████████████████████████████████████████████████████████████████████████
   K.  LOADING SCREEN — dramatic starburst core
   ████████████████████████████████████████████████████████████████████████████ */

#screen-loading {
  background:
    radial-gradient(ellipse 400px 400px at 50% 45%, rgba(124,58,237,.18), transparent 55%),
    radial-gradient(ellipse 700px 500px at 50% 40%, rgba(6,182,212,.08), transparent 65%),
    radial-gradient(ellipse 1200px 800px at 50% 50%, #08091a 0%, #05060d 80%) !important;
}

@keyframes ldBarShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.ld-fill {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(124,58,237,.4) 15%,
    #8b5cf6 30%,
    #7C3AED  45%,
    #06B6D4  60%,
    rgba(6,182,212,.4) 80%,
    transparent 100%) !important;
  background-size: 300% 100% !important;
  box-shadow:
    0 0 24px rgba(124,58,237,.7),
    0 0 48px rgba(124,58,237,.3) !important;
  animation: ldBarShimmer 1.6s linear infinite !important;
}


/* ████████████████████████████████████████████████████████████████████████████
   L.  ACTIVITY FEED — stagger entrance + hover spectra
   ████████████████████████████████████████████████████████████████████████████ */

.activity-row {
  transition:
    transform 280ms var(--ease-expo),
    box-shadow 280ms var(--ease-out),
    border-color 240ms,
    background 240ms !important;
}
.activity-row:hover {
  transform: translateX(6px) translateY(-2px) !important;
  background: linear-gradient(135deg,
    rgba(124,58,237,.08),
    rgba(6,182,212,.04),
    rgba(255,255,255,.01)) !important;
  border-color: rgba(124,58,237,.28) !important;
  box-shadow:
    0 6px 16px rgba(0,0,0,.35),
    0 0 0 1px rgba(124,58,237,.22),
    0 0 30px rgba(124,58,237,.10) !important;
}

/* Activity CTA — full brand on hover */
.activity-cta:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow:
    0 8px 20px rgba(124,58,237,.45),
    0 0 0 1px rgba(124,58,237,.40) !important;
}


/* ████████████████████████████████████████████████████████████████████████████
   M.  SKELETON SHIMMER — tri-color brand wave
   ████████████████████████████████████████████████████████████████████████████ */

.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,.030) 0%,
    rgba(255,255,255,.040) 15%,
    rgba(124,58,237,.080) 30%,
    rgba(168,85,247,.060) 45%,
    rgba(6,182,212,.055)  55%,
    rgba(255,255,255,.040) 70%,
    rgba(255,255,255,.030) 100%) !important;
  background-size: 400% 100% !important;
  animation: ldBarShimmer 2.2s var(--ease-in-out) infinite !important;
}


/* ████████████████████████████████████████████████████████████████████████████
   N.  SCROLLBAR — spectra gradient + glow track
   ████████████████████████████████████████████████████████████████████████████ */

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    rgba(124,58,237,.70) 0%,
    rgba(168,85,247,.55) 35%,
    rgba(6,182,212,.50)  70%,
    rgba(124,58,237,.40) 100%) !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  border-radius: 99px !important;
  box-shadow:
    0 0 10px rgba(124,58,237,.35),
    0 0 20px rgba(124,58,237,.12) !important;
  transition: box-shadow 200ms !important;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    #8b5cf6  0%,
    #a855f7  35%,
    #06B6D4  70%,
    #7C3AED  100%) !important;
  background-clip: padding-box !important;
  box-shadow:
    0 0 16px rgba(124,58,237,.65),
    0 0 32px rgba(124,58,237,.25) !important;
}
::-webkit-scrollbar-track {
  background: rgba(124,58,237,.025) !important;
  border-radius: 99px !important;
}


/* ████████████████████████████████████████████████████████████████████████████
   O.  SIDEBAR ACTIVE STATE — neon indicator bar
   ████████████████████████████████████████████████████████████████████████████ */

.sb-li.on::after {
  background: linear-gradient(180deg,
    #a855f7 0%,
    #7C3AED 50%,
    #06B6D4 100%) !important;
  box-shadow:
    0 0 16px rgba(124,58,237,.80),
    0 0 32px rgba(124,58,237,.40),
    0 0 48px rgba(6,182,212,.20) !important;
  width: 3px !important;
}

/* Sidebar nav item — deeper hover */
.sb-li:hover {
  transform: translateX(6px) scale(1.01) !important;
}


/* ████████████████████████████████████████████████████████████████████████████
   P.  GLOBAL POLISH — selection, focus, and motion refinement
   ████████████████████████████████████████████████████████████████████████████ */

::selection {
  background: rgba(124,58,237,.45) !important;
  color: #fff !important;
  text-shadow: 0 0 12px rgba(124,58,237,.5) !important;
}

/* Page transitions — stronger cinematic rise */
.page.on {
  animation: ux-rise var(--t-cinematic) var(--ease-expo) both !important;
}
.page.on > * {
  animation: ux-rise 600ms var(--ease-expo) both !important;
}

/* Global link hover — subtle underline glow */
a:not([class]):hover {
  text-decoration-color: rgba(124,58,237,.6) !important;
  color: rgba(168,85,247,1) !important;
  transition: color 180ms, text-decoration-color 180ms !important;
}

/* Table rows / list items — universal lift helper */
[data-hoverable]:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--glow-spectra) !important;
  transition: all 280ms var(--ease-out) !important;
}


/* ████████████████████████████████████████████████████████████████████████████
   Q.  APEX UTILITY CLASSES — new composable primitives
   ████████████████████████████████████████████████████████████████████████████ */

/* Super float — for hero/promo elements */
.super-lift {
  transition:
    transform 400ms var(--ease-expo),
    box-shadow 400ms var(--ease-expo) !important;
  will-change: transform !important;
}
.super-lift:hover {
  transform: translateY(-20px) scale(1.02) translate3d(0,0,0) !important;
  box-shadow: var(--shadow-abyss), var(--glow-spectra) !important;
}

/* Neon text — for labels, badges, counts */
.neon-text {
  color: var(--brand-2) !important;
  text-shadow:
    0 0 8px  rgba(6,182,212,.7),
    0 0 20px rgba(6,182,212,.3) !important;
}

/* Glow ring — pulsing attention ring for CTAs */
@keyframes glowRing {
  0%, 100% { box-shadow: 0 0 0 0   rgba(124,58,237,.6), var(--shadow-md); }
  50%       { box-shadow: 0 0 0 10px rgba(124,58,237,.0), var(--shadow-md); }
}
.glow-ring {
  animation: glowRing 2.4s ease-in-out infinite !important;
}

/* Apex card — max premium tile, drop anywhere */
.apex-card {
  background: linear-gradient(155deg,
    rgba(255,255,255,.06) 0%,
    rgba(124,58,237,.04)  100%) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: var(--radius-xl) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow: var(--edge-light), var(--shadow-lg) !important;
  transition: transform 380ms var(--ease-expo),
              box-shadow 380ms var(--ease-expo) !important;
  will-change: transform !important;
}
.apex-card:hover {
  transform: translateY(-16px) scale(1.018) translate3d(0,0,0) !important;
  box-shadow: var(--edge-light), var(--shadow-abyss), var(--glow-spectra) !important;
}


/* ████████████████████████████████████████████████████████████████████████████
   R.  PERFORMANCE & ACCESSIBILITY SAFETY NET (Apex edition)
   ████████████████████████████████████████████████████████████████████████████ */

/* Contain paint on repeat elements */
.tx-li, .todo-li, .activity-row, .chat-item, .fr-row {
  contain: layout style paint !important;
}

/* will-change on/off based on hover state */
.card:not(:hover), .pm-card:not(:hover), .mod-card:not(:hover),
.stat:not(:hover), .more-game-card:not(:hover),
.frx-strip:not(:hover), .bal-hero:not(:hover),
.apex-card:not(:hover), .super-lift:not(:hover) {
  will-change: auto !important;
}
.card:hover, .pm-card:hover, .mod-card:hover,
.stat:hover, .more-game-card:hover,
.frx-strip:hover, .bal-hero:hover,
.apex-card:hover, .super-lift:hover {
  will-change: transform, box-shadow !important;
}

/* REDUCED MOTION — full Apex override */
@media (prefers-reduced-motion: reduce) {
  .card, .pm-card, .mod-card, .stat, .bal-hero, .pf-hero,
  .more-game-card, .frx-strip, .apex-card, .super-lift,
  .fr-row, .activity-row, .tx-li, .todo-li, .chat-item,
  .btn-pri, .btn-login, .btn-solid-lp, .btn-hero-main, .btn-save,
  .btn-ghost-lp, .btn-ghost, .btn-cancel, .btn-banner, .btn-hero-alt,
  .btn-add, .btn-sso, .btn-edit-profile, .fr-btn,
  .chat-send, .sb-li, .modal-close, .sb-tog,
  .lp-h1, .pb-greeting, .bal-amt, .frx-strip-id,
  .modal-title, .modal-hd > h3,
  .chat-typing-dot, .skeleton {
    transition: none !important;
    animation:  none !important;
    transform:  none !important;
    will-change: auto !important;
  }
}

/* ── End of TIER-3 APEX LAYER ─────────────────────────────────────────────── */

/* ████████████████████████████████████████████████████████████████████████████
   S.  MODERN PREMIUM ENHANCEMENTS — Futuristic AI SaaS Layer
   ████████████████████████████████████████████████████████████████████████████ */

/* ─── CSS @property for animatable gradient colors ─────────────────────── */
@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 135deg;
}
@property --glow-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/* ─── Animated gradient border — premium card variant ───────────────────── */
@keyframes spin-border {
  to { --gradient-angle: 495deg; }
}
.fx-card-glow {
  position: relative;
  isolation: isolate;
}
.fx-card-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--gradient-angle),
    transparent 30%,
    rgba(124,58,237,.6) 45%,
    rgba(6,182,212,.5) 55%,
    transparent 70%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
  animation: spin-border 4s linear infinite paused;
}
.fx-card-glow:hover::before {
  opacity: 1;
  animation-play-state: running;
}

/* ─── Ambient floating orbs — decorative background blobs ───────────────── */
.fx-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  will-change: transform;
  animation: orbFloat var(--orb-dur, 12s) ease-in-out infinite alternate;
}
@keyframes orbFloat {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(var(--orb-x, 20px), var(--orb-y, -15px), 0) scale(1.05); }
  66%  { transform: translate3d(calc(var(--orb-x, 20px) * -.6), var(--orb-y, -15px), 0) scale(.97); }
  100% { transform: translate3d(0, calc(var(--orb-y, -15px) * 1.5), 0) scale(1.02); }
}

/* ─── Skeleton shimmer — reusable loading placeholders ──────────────────── */
@keyframes fx-skeleton-sweep {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.fx-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.04) 75%
  );
  background-size: 200% 100%;
  animation: fx-skeleton-sweep 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.fx-skeleton-line {
  height: 12px;
  border-radius: 99px;
}
.fx-skeleton-line.short  { width: 45%; }
.fx-skeleton-line.medium { width: 70%; }
.fx-skeleton-line.full   { width: 100%; }
.fx-skeleton-circle {
  border-radius: 50%;
  flex-shrink: 0;
}
.fx-skeleton-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── Live pulse ring — for "online" / "active" indicators ──────────────── */
@keyframes fx-pulse-ring {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(2.2); opacity: 0; }
}
.fx-live-dot {
  position: relative;
  display: inline-block;
}
.fx-live-dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--green);
  animation: fx-pulse-ring 1.8s ease-out infinite;
}

/* ─── Gradient text utility ──────────────────────────────────────────────── */
.fx-grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fx-grad-text-animate {
  background: linear-gradient(135deg, #fff 0%, #cbb5fc 30%, #7dd6e8 60%, #f0abfc 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ux-grad-rotate 6s ease-in-out infinite;
}

/* ─── Elevated glow card — premium AI module card ───────────────────────── */
.fx-apex-card {
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    var(--shadow-md);
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base);
  will-change: auto;
}
.fx-apex-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124,58,237,.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 20px 48px rgba(0,0,0,.5),
    0 0 0 1px rgba(124,58,237,.2),
    0 0 60px rgba(124,58,237,.12);
  will-change: transform, box-shadow;
}

/* ─── Stat tile with animated top-edge accent ───────────────────────────── */
.fx-stat-tile {
  position: relative;
  overflow: hidden;
}
.fx-stat-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
  box-shadow: 0 0 12px rgba(124,58,237,.6);
}
.fx-stat-tile:hover::before { opacity: 1; }

/* ─── Focus ring — brand-colored, accessible ────────────────────────────── */
.fx-focus:focus-visible,
.btn-pri:focus-visible,
.btn-ghost:focus-visible,
.btn-solid-lp:focus-visible,
.sb-li:focus-visible {
  outline: 2px solid rgba(124,58,237,.8);
  outline-offset: 3px;
  border-radius: inherit;
  box-shadow: 0 0 0 4px rgba(124,58,237,.18) !important;
}

/* ─── Pill badge — status labels ────────────────────────────────────────── */
.fx-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 99px;
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .3px;
  border: 1px solid transparent;
}
.fx-pill.live    { background: rgba(0,229,160,.1); border-color: rgba(0,229,160,.25); color: #4ade80; }
.fx-pill.ai      { background: var(--brand-glow-soft); border-color: rgba(124,58,237,.3); color: #c4b5fd; }
.fx-pill.new     { background: rgba(6,182,212,.1); border-color: rgba(6,182,212,.25); color: #67e8f9; }
.fx-pill.warn    { background: rgba(255,200,74,.1); border-color: rgba(255,200,74,.25); color: var(--amber); }

/* ─── AI typing animation — three-dot pulse ────────────────────────────── */
@keyframes fx-ai-dot {
  0%, 60%, 100% { transform: translateY(0) scale(1); opacity: .4; }
  30%            { transform: translateY(-4px) scale(1.1); opacity: 1; }
}
.fx-ai-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--glass-2);
  border: 1px solid var(--hairline);
}
.fx-ai-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-2);
  animation: fx-ai-dot 1.2s ease infinite;
}
.fx-ai-typing span:nth-child(2) { animation-delay: .2s; }
.fx-ai-typing span:nth-child(3) { animation-delay: .4s; }

/* ─── Progress bar with gradient glow ───────────────────────────────────── */
.fx-progress {
  height: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.fx-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--grad-brand);
  transition: width var(--t-slow) var(--ease-out);
  box-shadow: 0 0 8px rgba(124,58,237,.5);
  position: relative;
}
.fx-progress-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 24px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4));
  border-radius: 99px;
  animation: fx-progress-shine 2s ease-in-out infinite;
}
@keyframes fx-progress-shine {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}

/* ─── Notification badge with pop animation ─────────────────────────────── */
@keyframes fx-badge-pop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.fx-notif-badge {
  animation: fx-badge-pop var(--t-base) var(--ease-spring) both;
}

/* ─── Content reveal — staggered list entrance ──────────────────────────── */
@keyframes fx-item-rise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fx-stagger > * {
  animation: fx-item-rise var(--t-slow) var(--ease-out) both;
}
.fx-stagger > *:nth-child(1) { animation-delay: .04s; }
.fx-stagger > *:nth-child(2) { animation-delay: .09s; }
.fx-stagger > *:nth-child(3) { animation-delay: .14s; }
.fx-stagger > *:nth-child(4) { animation-delay: .19s; }
.fx-stagger > *:nth-child(5) { animation-delay: .24s; }
.fx-stagger > *:nth-child(n+6) { animation-delay: .29s; }

/* ─── Interactive surface — glass panel with hover depth ────────────────── */
.fx-surface {
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition:
    background var(--t-base),
    border-color var(--t-base),
    box-shadow var(--t-base);
}
.fx-surface:hover {
  background: var(--glass-2);
  border-color: var(--hairline-strong);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.fx-surface.active {
  background: var(--grad-brand-soft);
  border-color: rgba(124,58,237,.35);
}

/* ─── Mobile-first layout helpers ───────────────────────────────────────── */
@media (max-width: 480px) {
  .fx-mobile-hidden { display: none !important; }
  .fx-mobile-full   { width: 100% !important; }
  .fx-mobile-stack  { flex-direction: column !important; }
}
@media (min-width: 768px) {
  .fx-tablet-up { display: block !important; }
}
@media (min-width: 1024px) {
  .fx-desktop-up { display: block !important; }
}

/* ─── Reduced motion overrides for new animations ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fx-card-glow::before          { animation: none !important; }
  .fx-orb                        { animation: none !important; }
  .fx-skeleton, .fx-skeleton-line,
  .fx-skeleton-circle            { animation: none !important; background: rgba(255,255,255,.06); }
  .fx-live-dot::before           { animation: none !important; }
  .fx-grad-text-animate          { animation: none !important; }
  .fx-ai-typing span             { animation: none !important; opacity: .7; }
  .fx-progress-fill::after       { animation: none !important; }
  .fx-notif-badge                { animation: none !important; }
  .fx-stagger > *                { animation: none !important; opacity: 1; }
  .fx-apex-card:hover            { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   AMBIENT MOTION LAYER v2 — fixed specificity & overflow issues
   ═══════════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes ambOrb1 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-60px,80px) scale(1.2); }
}
@keyframes ambOrb2 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(70px,-60px) scale(1.25); }
}
@keyframes bannerShimmer {
  0%        { transform: translateX(-150%); }
  45%, 100% { transform: translateX(260%); }
}
@keyframes stripBreath {
  0%, 100% { box-shadow: 0 0 0 1px rgba(124,58,237,.15), 0 4px 20px rgba(124,58,237,.08); }
  50%       { box-shadow: 0 0 0 1px rgba(124,58,237,.5),  0 8px 32px rgba(124,58,237,.22); }
}
@keyframes pgItemIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sideDot {
  0%, 100% { box-shadow: 0 0 4px var(--p1), 0 0 10px var(--p1); opacity: 1; }
  50%       { box-shadow: 0 0 14px var(--p2), 0 0 28px var(--p2); opacity: .65; }
}
@keyframes tierPulse {
  0%, 85%, 100% { transform: scale(1); }
  92%            { transform: scale(1.08); }
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── 1. Floating ambient orbs ── */
/* No overflow:hidden — orbs must not be clipped */
#page-home {
  position: relative !important;
}
#page-home::before,
#page-home::after {
  content: '' !important;
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: blur(100px) !important;
  opacity: .6 !important;
}
#page-home::before {
  width: 420px !important; height: 420px !important;
  background: radial-gradient(circle, rgba(124,58,237,.35), transparent 70%) !important;
  top: 30px !important; right: -80px !important;
  animation: ambOrb1 13s ease-in-out infinite alternate !important;
}
#page-home::after {
  width: 320px !important; height: 320px !important;
  background: radial-gradient(circle, rgba(6,182,212,.2), transparent 70%) !important;
  top: 280px !important; left: -70px !important;
  animation: ambOrb2 17s ease-in-out infinite alternate !important;
}
#page-home > * { position: relative !important; z-index: 1 !important; }

/* ── 2. Platform banner — traveling shimmer ── */
.platform-banner {
  position: relative !important;
  overflow: hidden !important;
}
.platform-banner::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255,255,255,.09) 50%,
    transparent 75%
  ) !important;
  transform: translateX(-150%) !important;
  animation: bannerShimmer 4s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* ── 3. FRX identity strip — breathing glow ── */
.frx-strip {
  animation: stripBreath 4s ease-in-out infinite !important;
}

/* ── 4. Home launch cards — shimmer sweep + lift ── */
.home-launch-card {
  position: relative !important;
  overflow: hidden !important;
  transition: transform .28s cubic-bezier(.22,1,.36,1),
              box-shadow .28s cubic-bezier(.22,1,.36,1),
              border-color .28s !important;
}
.home-launch-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255,255,255,.12) 50%,
    transparent 70%
  ) !important;
  transform: translateX(-130%) !important;
  transition: transform .5s ease !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.home-launch-card:hover {
  transform: translateY(-5px) scale(1.018) !important;
  box-shadow: 0 16px 40px rgba(124,58,237,.28),
              0 0 0 1px rgba(124,58,237,.3) !important;
  border-color: rgba(124,58,237,.4) !important;
}
.home-launch-card:hover::after {
  transform: translateX(130%) !important;
}
.home-launch-card:active {
  transform: translateY(-2px) scale(.997) !important;
}
.home-launch-arr {
  display: inline-block !important;
  transition: transform .22s cubic-bezier(.22,1,.36,1) !important;
}
.home-launch-card:hover .home-launch-arr {
  transform: translateX(6px) !important;
}
.home-launch-ic {
  display: inline-block !important;
  transition: transform .3s cubic-bezier(.22,1,.36,1) !important;
}
.home-launch-card:hover .home-launch-ic {
  transform: scale(1.2) rotate(-5deg) !important;
}

/* ── 5. Staggered entrance — override ux-rise !important ── */
#page-home .platform-banner { animation: pgItemIn .45s .00s cubic-bezier(.22,1,.36,1) both !important; }
#page-home .frx-strip        { animation: pgItemIn .45s .08s cubic-bezier(.22,1,.36,1) both !important; }
#page-home .home-launchpad   { animation: pgItemIn .45s .14s cubic-bezier(.22,1,.36,1) both !important; }
#page-home .ai-insight-card  { animation: pgItemIn .45s .22s cubic-bezier(.22,1,.36,1) both !important; }
.home-launchpad-grid .home-launch-card:nth-child(1) { animation: cardIn .45s .15s cubic-bezier(.22,1,.36,1) both !important; }
.home-launchpad-grid .home-launch-card:nth-child(2) { animation: cardIn .45s .22s cubic-bezier(.22,1,.36,1) both !important; }
.home-launchpad-grid .home-launch-card:nth-child(3) { animation: cardIn .45s .29s cubic-bezier(.22,1,.36,1) both !important; }
.home-launchpad-grid .home-launch-card:nth-child(4) { animation: cardIn .45s .36s cubic-bezier(.22,1,.36,1) both !important; }

/* ── 6. Sidebar — hover indent + active dot pulse ── */
.sb-li {
  transition: background .18s, padding-left .2s cubic-bezier(.22,1,.36,1), color .18s !important;
}
.sb-li:not(.on):hover {
  padding-left: 22px !important;
}
.sb-li.on .sb-dot {
  animation: sideDot 2s ease-in-out infinite !important;
}

/* ── 7. AI insight card — icon rotate + glow ── */
.ai-insight-icon {
  transition: transform .3s cubic-bezier(.22,1,.36,1), color .3s !important;
}
.ai-insight-card:hover .ai-insight-icon {
  transform: scale(1.18) rotate(10deg) !important;
  color: var(--p1) !important;
}
.ai-insight-card {
  transition: box-shadow .3s, border-color .3s !important;
}
.ai-insight-card:hover {
  box-shadow: 0 10px 32px rgba(124,58,237,.22),
              0 0 0 1px rgba(124,58,237,.3) !important;
  border-color: rgba(124,58,237,.35) !important;
}

/* ── 8. Tier badge pulse ── */
.frx-tier-badge {
  animation: tierPulse 3.5s ease-in-out infinite !important;
}

/* ── 9. Greeting cursor blink ── */
.pb-greeting::after {
  content: '|' !important;
  margin-left: 2px !important;
  color: var(--p1) !important;
  animation: cursorBlink 1.1s step-end infinite !important;
  font-weight: 300 !important;
  opacity: 1 !important;
}

/* ── 10. Notif bell glow ring ── */
.notif-bell {
  position: relative !important;
}
.notif-bell::after {
  content: '' !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
  transition: border-color .25s, box-shadow .25s !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.notif-bell:hover::after {
  border-color: rgba(124,58,237,.45) !important;
  box-shadow: 0 0 20px rgba(124,58,237,.25) !important;
}

/* ── Reduced motion overrides ── */
@media (prefers-reduced-motion: reduce) {
  #page-home::before,
  #page-home::after       { animation: none !important; }
  .platform-banner::after { animation: none !important; }
  .frx-strip              { animation: none !important; }
  .frx-tier-badge         { animation: none !important; }
  .sb-li.on .sb-dot       { animation: none !important; }
  .pb-greeting::after     { animation: none !important; content: '' !important; }
  #page-home .platform-banner,
  #page-home .frx-strip,
  #page-home .home-launchpad,
  #page-home .ai-insight-card,
  .home-launchpad-grid .home-launch-card { animation: none !important; opacity: 1 !important; }
  .home-launch-card:hover { transform: none !important; }
  .sb-li:not(.on):hover   { padding-left: initial !important; }
}


/* ════════════════════════════════════════════════════════════════════════
   APEX 3D DEPTH LAYER — v1
   Cursor specular · Logo Y-spin · Page entrance depth · Card perspective
   All GPU-only: no layout, no paint — transform & opacity only.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Upgrade ux-rise to a subtle 3D entrance ──────────────────────────── */
/* Redefines the keyframe used by .page.on and .page.on > * —
   elements now emerge from slight depth behind the screen. */
@keyframes ux-rise {
  from {
    opacity: 0;
    transform: perspective(900px) translateY(16px) translateZ(-18px) rotateX(4deg);
  }
  to {
    opacity: 1;
    transform: perspective(900px) translateY(0) translateZ(0) rotateX(0deg);
  }
}

/* ── Cursor specular highlight (injected by fx-3d.js) ────────────────── */
.fx-specular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 200ms ease;
  mix-blend-mode: screen;
}

/* ── Logo 3D Y-axis spin ─────────────────────────────────────────────── */
@keyframes fx3dSpin {
  0%   { transform: perspective(500px) rotateY(0deg)   scale(1); }
  45%  { transform: perspective(500px) rotateY(210deg)  scale(1.14); }
  100% { transform: perspective(500px) rotateY(360deg)  scale(1); }
}
.fx-mark-3d-spin {
  display: inline-block;
  animation: fx3dSpin 720ms cubic-bezier(.65,0,.35,1) forwards !important;
}

/* ── Card perspective context — improve shadow depth on tilt ─────────── */
.card, .pm-card, .mod-card,
.home-launch-card, .more-game-card,
.bal-hero, .gm-mod-hero {
  will-change: transform;
}

/* ── Reduced motion overrides ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Restore flat ux-rise for reduced-motion users */
  @keyframes ux-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .fx-specular     { display: none !important; }
  .fx-mark-3d-spin { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   ONBOARDING MODAL — fx-onboard.js styles
   Cinematic 3-step first-run welcome flow
   ════════════════════════════════════════════════════════════════════════ */

.fxob-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 15, 0.85);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  opacity: 0;
  transition: opacity 400ms cubic-bezier(.4,0,.2,1);
  padding: 1rem;
}
.fxob-overlay.fxob-visible { opacity: 1; }
.fxob-overlay.fxob-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms cubic-bezier(.4,0,.2,1);
}

.fxob-card {
  position: relative;
  width: min(460px, 100%);
  background: linear-gradient(145deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  padding: 2.5rem 2rem 2rem;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 40px 80px rgba(0,0,0,.6),
    0 0 120px rgba(99,102,241,.08);
  text-align: center;
  overflow: hidden;
  transform: translateY(32px) scale(.97);
  transition: transform 500ms cubic-bezier(.34,1.56,.64,1);
}
.fxob-overlay.fxob-visible .fxob-card {
  transform: translateY(0) scale(1);
}
.fxob-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.7) 40%, rgba(99,102,241,.7) 60%, transparent);
}

@keyframes fxobStepIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fxobStepOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-24px); }
}
.fxob-card.fxob-step-out { animation: fxobStepOut 180ms ease-in forwards; }
.fxob-card.fxob-step-in  { animation: fxobStepIn  350ms cubic-bezier(.34,1.3,.64,1) forwards; }

.fxob-skip {
  position: absolute;
  top: 1rem; right: 1rem;
  background: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: rgba(255,255,255,.4);
  font-size: .75rem;
  letter-spacing: .04em;
  padding: .28rem .7rem;
  cursor: pointer;
  transition: color 200ms, border-color 200ms, background 200ms;
}
.fxob-skip:hover {
  color: rgba(255,255,255,.75);
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
}

@keyframes fxobIconPop {
  from { transform: scale(.4) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1)  rotate(0deg);   opacity: 1; }
}
.fxob-icon {
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: 1.1rem;
  filter: drop-shadow(0 0 20px rgba(139,92,246,.5));
  animation: fxobIconPop 600ms cubic-bezier(.34,1.56,.64,1) both;
}

.fxob-title {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #fff 30%, rgba(139,92,246,.9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .65rem;
  line-height: 1.2;
}

.fxob-body {
  font-size: .93rem;
  line-height: 1.65;
  color: rgba(255,255,255,.55);
  margin-bottom: 1.8rem;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.fxob-dots {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin-bottom: 1.6rem;
}
.fxob-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  transition: all 300ms cubic-bezier(.34,1.56,.64,1);
}
.fxob-dot.active {
  width: 22px;
  border-radius: 3px;
  background: linear-gradient(90deg, #8b5cf6, #6366f1);
  box-shadow: 0 0 8px rgba(139,92,246,.6);
}

.fxob-cta {
  display: block;
  width: 100%;
  padding: .82rem 1.5rem;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(99,102,241,.45), 0 0 0 1px rgba(255,255,255,.1) inset;
  transition: transform 180ms cubic-bezier(.34,1.56,.64,1), box-shadow 180ms ease, filter 180ms ease;
}
.fxob-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 32px rgba(99,102,241,.6), 0 0 0 1px rgba(255,255,255,.15) inset;
  filter: brightness(1.08);
}
.fxob-cta:active {
  transform: translateY(0) scale(.98);
  filter: brightness(.96);
}

@media (prefers-reduced-motion: reduce) {
  .fxob-card, .fxob-overlay   { transition: opacity 200ms ease; }
  .fxob-card.fxob-step-in,
  .fxob-card.fxob-step-out,
  .fxob-icon                  { animation: none; }
  .fxob-cta:hover             { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   MICRO-POLISH LAYER — global quality improvements
   ════════════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(139,92,246,.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,.6); }

:focus-visible {
  outline: 2px solid rgba(139,92,246,.8) !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;
}

button:not(.fxob-cta):not(.fxob-skip):active,
.btn:active,
[role="button"]:active {
  transform: scale(.97);
}

.fx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
  color: rgba(255,255,255,.35);
}
.fx-empty-icon  { font-size: 3rem; opacity: .45; filter: grayscale(.4); }
.fx-empty-title { font-size: 1rem; font-weight: 600; color: rgba(255,255,255,.5); letter-spacing: -.01em; }
.fx-empty-sub   { font-size: .83rem; line-height: 1.5; max-width: 240px; color: rgba(255,255,255,.3); }
.fx-empty-action {
  margin-top: .4rem;
  padding: .55rem 1.3rem;
  border: 1px solid rgba(139,92,246,.4);
  border-radius: 10px;
  background: rgba(139,92,246,.08);
  color: rgba(139,92,246,.9);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms, border-color 180ms, transform 180ms cubic-bezier(.34,1.56,.64,1);
}
.fx-empty-action:hover {
  background: rgba(139,92,246,.18);
  border-color: rgba(139,92,246,.65);
  transform: translateY(-1px);
}

@keyframes fxSkeleton {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.fx-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
  animation: fxSkeleton 1.6s ease-in-out infinite;
  border-radius: 8px;
}

#fxToastContainer {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99998;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  pointer-events: none;
}
.fx-toast {
  padding: .65rem 1.4rem;
  border-radius: 12px;
  background: rgba(20,18,40,.95);
  border: 1px solid rgba(139,92,246,.3);
  color: rgba(255,255,255,.85);
  font-size: .84rem;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  backdrop-filter: blur(16px);
  animation: fxToastIn 350ms cubic-bezier(.34,1.56,.64,1) both, fxToastOut 300ms ease 2700ms forwards;
  white-space: nowrap;
}
@keyframes fxToastIn {
  from { opacity:0; transform:translateY(16px) scale(.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes fxToastOut {
  from { opacity:1; transform:translateY(0) scale(1); }
  to   { opacity:0; transform:translateY(-8px) scale(.97); }
}

.ld-hint { transition: opacity 250ms ease; }

.home-launch-card:hover,
.more-game-card:hover {
  box-shadow:
    0 0 0 1px rgba(139,92,246,.25),
    0 12px 40px rgba(99,102,241,.2),
    0 2px 8px rgba(0,0,0,.4);
}