/* ============================================================
   FreeM0ney v2 — Liquid Cyber design tokens
   ============================================================ */
:root {
  /* base canvas */
  --bg-deep:        #05080f;
  --bg-deep-2:      #070b15;
  --bg-card:        rgba(20, 30, 52, 0.55);
  --bg-card-solid:  #0c1322;
  --bg-elev:        rgba(14, 22, 40, 0.78);

  /* foreground */
  --fg:        #eaf1ff;
  --fg-2:      rgba(220, 230, 248, 0.85);
  --fg-muted:  rgba(190, 205, 235, 0.62);
  --fg-dim:    rgba(150, 170, 210, 0.45);
  --fg-faint:  rgba(120, 140, 180, 0.30);

  /* accents — palette 0 (teal · cyan · pink) */
  --acc:        #27f0a3;   /* primary teal */
  --acc-2:      #4fe4ff;   /* cyan */
  --acc-3:      #ff4d8d;   /* pink magenta */
  --acc-warn:   #ffb648;   /* basketball / warning */
  --acc-loss:   #ff5d5d;

  /* surfaces / borders */
  --bd:        rgba(150, 190, 255, 0.16);
  --bd-strong: rgba(150, 190, 255, 0.28);
  --grid-line: rgba(90, 130, 210, 0.05);

  /* radii */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  28px;

  /* type */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: 'Space Grotesk', var(--font-sans);

  /* shadows */
  --shadow-card:
    0 14px 40px -20px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -14px 30px -26px rgba(0,0,0,0.85);
  --shadow-card-lg:
    0 24px 60px -22px rgba(0,0,0,0.85),
    0 4px 20px -8px rgba(0,0,0,0.6),
    inset 0 1.4px 0 rgba(255,255,255,0.40),
    inset 0 -16px 36px -28px rgba(0,0,0,0.9);
  --shadow-modal:
    0 30px 70px -22px rgba(0,0,0,0.9),
    inset 0 1.4px 0 rgba(255,255,255,0.30);
}

/* ============== reset / base ============== */
* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg);
  background:
    radial-gradient(900px 620px at 12% -4%, color-mix(in srgb, var(--acc) 8%, transparent), transparent 60%),
    radial-gradient(820px 600px at 96% 8%, color-mix(in srgb, var(--acc-2) 9%, transparent), transparent 55%),
    radial-gradient(700px 500px at 50% 110%, color-mix(in srgb, var(--acc-3) 7%, transparent), transparent 60%),
    var(--bg-deep);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 18%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 18%, #000 35%, transparent 100%);
  animation: grid-drift 8s linear infinite;
  will-change: background-position;
  transform: translateZ(0);
}
/* moving accent sweep — kept as a single fixed layer, NO blur / NO blend mode (cheap to scroll). */
body::after {
  content: ""; position: fixed; inset: -20% -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(420px 320px at var(--bg-x, 30%) var(--bg-y, 20%),
      color-mix(in srgb, var(--acc) 12%, transparent) 0%,
      transparent 65%);
  animation: grid-sweep 22s ease-in-out infinite;
  transform: translateZ(0);
}

@keyframes grid-drift {
  0%   { background-position: 0 0,        0 0; }
  100% { background-position: 46px 46px,  46px 46px; }
}

@keyframes grid-sweep {
  0%   { transform: translate3d( -8%, -6%, 0); }
  25%  { transform: translate3d( 18%,  4%, 0); }
  50%  { transform: translate3d( 30%, -10%, 0); }
  75%  { transform: translate3d( -4%, 12%, 0); }
  100% { transform: translate3d( -8%, -6%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}
#root { position: relative; z-index: 1; }

/* scrollbar */
* { scrollbar-width: thin; scrollbar-color: rgba(120,160,240,0.4) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(rgba(120,160,240,0.55), rgba(79,228,255,0.45));
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}

/* ============== glass primitives ============== */
.glass {
  background: linear-gradient(165deg, rgba(70,94,142,0.22), rgba(12,18,34,0.30)),
              rgba(20, 30, 52, 0.55);
  backdrop-filter: blur(18px) saturate(1.7) brightness(1.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.7) brightness(1.06);
  border: 1px solid var(--bd);
  box-shadow: var(--shadow-card);
}
.glass-elev {
  background: linear-gradient(165deg, rgba(70,94,142,0.30), rgba(12,18,34,0.45)),
              var(--bg-elev);
  backdrop-filter: blur(34px) saturate(1.9);
  -webkit-backdrop-filter: blur(34px) saturate(1.9);
  border: 1px solid var(--bd);
  box-shadow: var(--shadow-modal);
}

/* refraction rim */
.rim { position: relative; }
.rim::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(170,210,255,0.45), transparent 45%, rgba(0,0,0,0.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* mono caption */
.mono { font-family: var(--font-mono); letter-spacing: 0.06em; }
.cap  { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim); font-weight: 600; }

/* utilities */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; }

/* glow text */
.glow-acc { text-shadow: 0 0 16px color-mix(in srgb, var(--acc) 55%, transparent); }

/* pulse */
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes sheen { 0%,100% { background-position: 0 0, 120% 0; } 50% { background-position: 0 0, -20% 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes eq { from { transform: scaleY(.22); } to { transform: scaleY(1); } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 16px -2px color-mix(in srgb, #ff3b4d 60%, transparent), inset 0 1px 0 rgba(255,255,255,0.18); }
  50%      { box-shadow: 0 0 22px 0   color-mix(in srgb, #ff3b4d 85%, transparent), inset 0 1px 0 rgba(255,255,255,0.22); }
}