/* ==========================================================================
   Lurna Plus Ventures — NEON POMP theme
   Loaded AFTER app.css. Everything is driven by the CSS variables below,
   so you can retune the whole platform by editing just this first block.
   ========================================================================== */

@property --vt-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  /* --- Neon palette (edit me) ------------------------------------------ */
  --n-pink:   #ff2bd6;
  --n-cyan:   #00e5ff;
  --n-purple: #9b5cff;
  --n-lime:   #b6ff3c;
  --n-orange: #ff8a1f;
  --n-yellow: #ffe600;
  --n-blue:   #3d7bff;

  --rainbow: linear-gradient(90deg, var(--n-pink), var(--n-orange), var(--n-yellow), var(--n-lime), var(--n-cyan), var(--n-blue), var(--n-purple), var(--n-pink));
  /* --- Remap the base theme onto the neon palette ---------------------- */
  --bg: #08031f;
  --bg-2: #130a38;
  --panel: rgba(34, 14, 90, 0.55);
  --panel-solid: #180d45;
  --panel-2: rgba(120, 60, 230, 0.28);
  --line: rgba(190, 150, 255, 0.2);
  --line-strong: rgba(0, 229, 255, 0.45);
  --text: #f8f3ff;
  --muted: #c6b8ee;
  --nav-text: #e9defc;
  --emerald: var(--n-purple);
  --emerald-2: var(--n-cyan);
  --emerald-3: #ff8ff0;
  --emerald-deep: #6d28d9;
  --danger: #ff4d6d;
  --ok: #7dff9a;

  --glass: rgba(30, 14, 82, 0.55);
  --glass-strong: rgba(28, 12, 76, 0.86);
  --glass-border: rgba(196, 150, 255, 0.3);
  --glass-highlight: rgba(255, 255, 255, 0.1);

  --glow: 0 0 0 1px rgba(0, 229, 255, 0.55), 0 0 26px -2px rgba(0, 229, 255, 0.55), 0 0 44px -8px rgba(255, 43, 214, 0.55);
  --shadow: 0 20px 50px -14px rgba(10, 0, 40, 0.7), 0 0 30px -14px rgba(155, 92, 255, 0.5), 0 1px 0 rgba(255, 255, 255, 0.05) inset;

  --link: #5ef2ff;
  --th: #8ff0ff;
  accent-color: var(--n-pink);
}

html[data-theme="light"] {
  /* Deeper neon tones so gradient text stays readable on light surfaces */
  --n-pink:   #e0119f;
  --n-cyan:   #0090b5;
  --n-purple: #7c3aed;
  --n-lime:   #2e9e00;
  --n-orange: #e85d00;
  --n-yellow: #c98a00;
  --n-blue:   #2563eb;

  --bg: #fdf1ff;
  --bg-2: #ffffff;
  --panel: rgba(255, 255, 255, 0.7);
  --panel-solid: #ffffff;
  --panel-2: rgba(155, 92, 255, 0.14);
  --line: rgba(124, 58, 237, 0.16);
  --line-strong: rgba(224, 17, 159, 0.4);
  --text: #24104a;
  --muted: #5d4a86;
  --nav-text: #3a2a66;
  --emerald-3: #c0129a;
  --emerald-deep: #6d28d9;

  --glass: rgba(255, 255, 255, 0.68);
  --glass-strong: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(155, 92, 255, 0.35);
  --glass-highlight: rgba(255, 255, 255, 0.9);

  --glow: 0 0 0 1px rgba(224, 17, 159, 0.4), 0 0 24px -4px rgba(224, 17, 159, 0.4), 0 0 40px -10px rgba(37, 99, 235, 0.4);
  --shadow: 0 18px 40px -16px rgba(124, 58, 237, 0.3), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  --link: #0a6fb0;
  --th: #5b21b6;
}

/* ==========================================================================
   Base: page background, floating orbs, sparkles, selection, scrollbar
   ========================================================================== */
body {
  background-image:
    linear-gradient(135deg, #08031f 0%, #14063f 45%, #06172f 100%);
  background-attachment: fixed;
}
html[data-theme="light"] body {
  background-image: linear-gradient(135deg, #fff0fb 0%, #eef2ff 50%, #effff8 100%);
}

/* Drifting colour orbs (GPU-only transform animation) */
body::before {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 20% 25%, rgba(255, 43, 214, 0.34), transparent 70%),
    radial-gradient(34% 30% at 80% 20%, rgba(0, 229, 255, 0.26), transparent 70%),
    radial-gradient(40% 34% at 70% 80%, rgba(155, 92, 255, 0.36), transparent 70%),
    radial-gradient(28% 24% at 15% 80%, rgba(255, 138, 31, 0.22), transparent 70%),
    radial-gradient(22% 20% at 50% 50%, rgba(182, 255, 60, 0.12), transparent 70%);
  animation: vt-drift 28s ease-in-out infinite alternate;
  will-change: transform;
}
html[data-theme="light"] body::before { opacity: 0.55; }

/* Twinkling sparkles */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 8% 18%, #fff, transparent),
    radial-gradient(2px 2px at 22% 72%, var(--n-cyan), transparent),
    radial-gradient(3px 3px at 35% 34%, var(--n-pink), transparent),
    radial-gradient(2px 2px at 48% 88%, var(--n-yellow), transparent),
    radial-gradient(2px 2px at 61% 12%, var(--n-lime), transparent),
    radial-gradient(3px 3px at 74% 58%, #fff, transparent),
    radial-gradient(2px 2px at 86% 30%, var(--n-orange), transparent),
    radial-gradient(2px 2px at 93% 82%, var(--n-cyan), transparent),
    radial-gradient(2px 2px at 14% 46%, var(--n-purple), transparent),
    radial-gradient(3px 3px at 55% 50%, var(--n-pink), transparent);
  opacity: 0.7;
  animation: vt-twinkle 5s ease-in-out infinite alternate;
}
html[data-theme="light"] body::after { opacity: 0.35; }

::selection { background: var(--n-pink); color: #fff; }
:focus-visible { outline: 2px solid var(--n-cyan); outline-offset: 2px; box-shadow: 0 0 14px rgba(0, 229, 255, 0.6); }

* { scrollbar-width: thin; scrollbar-color: var(--n-pink) rgba(120, 60, 230, 0.15); }
::-webkit-scrollbar-track { background: rgba(120, 60, 230, 0.12); border-radius: 99px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--n-pink), var(--n-purple), var(--n-cyan));
  background-clip: padding-box; border: 2px solid transparent; border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--n-orange), var(--n-pink), var(--n-yellow));
  background-clip: padding-box; border: 2px solid transparent;
}

/* ==========================================================================
   Brand / animated gradient text
   ========================================================================== */
.brand, .brand span {
  background: linear-gradient(90deg, var(--n-pink), var(--n-orange), var(--n-yellow), var(--n-lime), var(--n-cyan), var(--n-purple), var(--n-pink));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand { animation: vt-flow 7s linear infinite; filter: drop-shadow(0 0 10px rgba(255, 43, 214, 0.55)); font-size: 1.45rem; }
.brand span { background: none; -webkit-background-clip: text; background-clip: text; color: transparent; }
h1.brand { font-size: 2rem; margin: 0 0 6px; }

.topbar__title,
.app-content h1, .app-content > h2, .panel > h2, .panel > h3,
.auth-card h1:not(.brand), .gate-modal__panel h3 {
  background: linear-gradient(90deg, var(--n-pink), var(--n-orange), var(--n-yellow), var(--n-cyan), var(--n-purple));
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: vt-flow 9s ease-in-out infinite alternate;
}

/* ==========================================================================
   Sidebar / menu
   ========================================================================== */
.app-sidebar {
  background:
    radial-gradient(320px 260px at 0% 0%, rgba(255, 43, 214, 0.4), transparent 70%),
    radial-gradient(300px 300px at 100% 100%, rgba(0, 229, 255, 0.3), transparent 70%),
    linear-gradient(180deg, #2b0a72, #4a0a85, #0b2c7a, #3a0a72, #2b0a72);
  background-size: auto, auto, 100% 320%;
  animation: vt-sidebar-flow 16s ease-in-out infinite alternate;
  border-right: 2px solid transparent;
  border-image: linear-gradient(180deg, var(--n-pink), var(--n-orange), var(--n-yellow), var(--n-lime), var(--n-cyan), var(--n-purple)) 1;
  box-shadow: 10px 0 44px -14px rgba(255, 43, 214, 0.5), 4px 0 24px -8px rgba(0, 229, 255, 0.35);
}
html[data-theme="light"] .app-sidebar {
  background:
    radial-gradient(320px 260px at 0% 0%, rgba(255, 43, 214, 0.28), transparent 70%),
    radial-gradient(300px 300px at 100% 100%, rgba(0, 200, 255, 0.28), transparent 70%),
    linear-gradient(180deg, #ffe3f7, #ece2ff, #dff0ff, #ffeedd, #ffe3f7);
  background-size: auto, auto, 100% 320%;
  box-shadow: 10px 0 40px -18px rgba(224, 17, 159, 0.4);
}
.app-sidebar__brand { border-bottom: 1px solid transparent; border-image: var(--rainbow) 1; padding-bottom: 14px; }

.app-nav a {
  --ac: var(--n-pink);
  color: color-mix(in srgb, var(--ac) 30%, var(--nav-text));
  font-weight: 600;
}
.app-nav a:nth-child(7n+1) { --ac: var(--n-pink); }
.app-nav a:nth-child(7n+2) { --ac: var(--n-cyan); }
.app-nav a:nth-child(7n+3) { --ac: var(--n-lime); }
.app-nav a:nth-child(7n+4) { --ac: var(--n-orange); }
.app-nav a:nth-child(7n+5) { --ac: var(--n-purple); }
.app-nav a:nth-child(7n+6) { --ac: var(--n-yellow); }
.app-nav a:nth-child(7n+7) { --ac: var(--n-blue); }
.app-nav a span {
  display: inline-block; min-width: 1.5em; text-align: center;
  filter: drop-shadow(0 0 6px var(--ac));
  transition: transform var(--dur) var(--ease-spring);
}
.app-nav a::before {
  width: 4px; background: linear-gradient(180deg, #fff, var(--ac)); box-shadow: 0 0 14px var(--ac), 0 0 4px var(--ac);
}
.app-nav a:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 30%, transparent), transparent 96%);
  color: var(--text); transform: translateX(5px);
  text-shadow: 0 0 12px color-mix(in srgb, var(--ac) 70%, transparent);
}
.app-nav a:hover::before { height: 55%; }
.app-nav a:hover span { transform: scale(1.3) rotate(-8deg); }
.app-nav a.is-active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 42%, transparent), color-mix(in srgb, var(--ac) 6%, transparent));
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 70%, transparent), 0 0 22px -6px var(--ac);
  animation: vt-nav-glow 2.6s ease-in-out infinite;
}
.app-nav a.is-active::before { height: 72%; }
.app-nav a.is-active span { animation: vt-bob 2.2s ease-in-out infinite; }

/* ==========================================================================
   Header / topbar
   ========================================================================== */
.topbar,
.topbar.is-scrolled {
  background:
    linear-gradient(90deg, rgba(255, 43, 214, 0.16), rgba(0, 229, 255, 0.1) 50%, rgba(155, 92, 255, 0.18)),
    color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom: 0;
}
.topbar.is-scrolled { box-shadow: 0 14px 34px -16px rgba(255, 43, 214, 0.55); }
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--n-pink), var(--n-orange), var(--n-yellow), var(--n-lime), var(--n-cyan), var(--n-blue), var(--n-purple), var(--n-pink));
  background-size: 300% 100%;
  animation: vt-flow 6s linear infinite;
  box-shadow: 0 0 14px rgba(255, 43, 214, 0.75), 0 0 6px rgba(0, 229, 255, 0.6);
}
.topbar__title { font-size: 1.15rem; font-weight: 800; }

.avatar {
  background: linear-gradient(135deg, var(--n-pink), var(--n-purple), var(--n-cyan));
  background-size: 250% 250%; animation: vt-flow 5s ease-in-out infinite alternate, vt-avatar-glow 3s ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 0 18px rgba(255, 43, 214, 0.7);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.icon-btn { border-color: rgba(0, 229, 255, 0.35); }
.icon-btn:hover { border-color: var(--n-pink); box-shadow: var(--glow); transform: translateY(-2px) rotate(-6deg); }
.theme-icon--sun { color: var(--n-yellow); filter: drop-shadow(0 0 6px var(--n-yellow)); animation: vt-spin-slow 12s linear infinite; }
.theme-icon--moon { color: var(--n-cyan); filter: drop-shadow(0 0 6px var(--n-cyan)); }

/* ==========================================================================
   Wallet cards (neon variants)
   ========================================================================== */
.wallet-card {
  background-size: 220% 220%;
  animation: vt-flow 10s ease-in-out infinite alternate, vt-float 7s ease-in-out infinite;
  border-color: rgba(255, 255, 255, 0.35);
}
.wallet-stack .wallet-card:nth-child(even) { animation-delay: 0s, -3s; }
.wallet-card .amount { text-shadow: 0 0 18px rgba(255, 255, 255, 0.55), 0 4px 18px rgba(0, 0, 0, 0.3); }
.wallet-card:hover { animation-play-state: running, paused; }
.wallet-card--wa  { --c1: #1d2bff; --c2: #00a2ff; --c3: #00f0d0; --orb: rgba(0, 200, 255, 0.75); }
.wallet-card--wd  { --c1: #00733a; --c2: #00c853; --c3: #b6ff3c; --orb: rgba(120, 255, 60, 0.6); }
.wallet-card--dep { --c1: #c02500; --c2: #ff7a00; --c3: #ffd400; --orb: rgba(255, 170, 0, 0.7); }
.wallet-card--cb  { --c1: #6a00d0; --c2: #ff1fa9; --c3: #ff7ad9; --orb: rgba(255, 43, 214, 0.75); }
.wallet-card {
  box-shadow: 0 24px 44px -18px var(--orb), 0 0 34px -6px var(--orb), 0 2px 0 rgba(255, 255, 255, 0.3) inset, 0 -30px 60px -30px rgba(0, 0, 0, 0.35) inset;
}
.wallet-card:hover { box-shadow: 0 34px 60px -18px var(--orb), 0 0 50px -4px var(--orb), 0 2px 0 rgba(255, 255, 255, 0.35) inset; }

/* ==========================================================================
   Glass surfaces: spinning rainbow borders on panels / stats / auth / modal
   ========================================================================== */
.panel::after, .stat::after, .auth-card::after, .gate-modal__panel::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--vt-ang), var(--n-pink), var(--n-orange), var(--n-yellow), var(--n-lime), var(--n-cyan), var(--n-blue), var(--n-purple), var(--n-pink));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0.6; transition: opacity var(--dur) var(--ease);
  animation: vt-spin 8s linear infinite;
}
.panel:hover::after, .stat:hover::after, .auth-card:hover::after { opacity: 1; }
.panel, .auth-card { box-shadow: var(--shadow), 0 0 40px -18px rgba(255, 43, 214, 0.45); }
.auth-card, .gate-modal__panel { box-shadow: var(--shadow-lg), 0 0 60px -14px rgba(155, 92, 255, 0.7), 0 0 30px -8px rgba(0, 229, 255, 0.4); }

/* Colour-coded groups */
.cards > .pkg:nth-child(6n+1), .stat-row > .stat:nth-child(6n+1) { --ac1: var(--n-pink);   --ac2: var(--n-orange); }
.cards > .pkg:nth-child(6n+2), .stat-row > .stat:nth-child(6n+2) { --ac1: var(--n-cyan);   --ac2: var(--n-blue); }
.cards > .pkg:nth-child(6n+3), .stat-row > .stat:nth-child(6n+3) { --ac1: var(--n-lime);   --ac2: var(--n-cyan); }
.cards > .pkg:nth-child(6n+4), .stat-row > .stat:nth-child(6n+4) { --ac1: var(--n-purple); --ac2: var(--n-pink); }
.cards > .pkg:nth-child(6n+5), .stat-row > .stat:nth-child(6n+5) { --ac1: var(--n-yellow); --ac2: var(--n-orange); }
.cards > .pkg:nth-child(6n+6), .stat-row > .stat:nth-child(6n+6) { --ac1: var(--n-blue);   --ac2: var(--n-purple); }
.pkg, .stat { --ac1: var(--n-pink); --ac2: var(--n-purple); }

/* Package cards */
.pkg {
  border-color: color-mix(in srgb, var(--ac1) 50%, transparent);
  box-shadow: var(--shadow), 0 0 26px -12px var(--ac1);
  animation: vt-float 7s ease-in-out infinite;
}
.cards > .pkg:nth-child(even), .stat-row > .stat:nth-child(even) { animation-delay: -3.2s; }
.cards > .pkg:nth-child(3n), .stat-row > .stat:nth-child(3n) { animation-delay: -5s; }
.pkg::before {
  height: 4px; opacity: 1;
  background: linear-gradient(90deg, var(--ac1), var(--ac2), var(--ac1));
  background-size: 200% 100%; animation: vt-flow 4s linear infinite;
  box-shadow: 0 0 14px var(--ac1);
}
.pkg::after { background: radial-gradient(circle, color-mix(in srgb, var(--ac1) 45%, transparent), transparent 70%); }
.pkg:hover { animation-play-state: paused; border-color: var(--ac1); box-shadow: var(--shadow-lg), 0 0 0 1px var(--ac1), 0 0 36px -4px var(--ac1); }
.pkg h3 {
  background: linear-gradient(90deg, var(--ac1), var(--ac2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pkg .price {
  background: linear-gradient(90deg, var(--ac1), var(--ac2), var(--ac1));
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: vt-flow 5s linear infinite;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ac1) 60%, transparent));
}
html[data-theme="light"] .pkg .price { background: linear-gradient(90deg, var(--ac1), var(--ac2), var(--ac1)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; }
.pkg .pkg__proof, html[data-theme="light"] .pkg .pkg__proof { color: var(--link); }

/* Stat tiles */
.stat { animation: vt-float 8s ease-in-out infinite; box-shadow: var(--shadow), 0 0 22px -12px var(--ac1); }
.stat:hover { animation-play-state: paused; box-shadow: var(--shadow-lg), 0 0 34px -4px var(--ac1); border-color: var(--ac1); }
.stat::before { width: 4px; background: linear-gradient(180deg, var(--ac1), var(--ac2)); box-shadow: 0 0 12px var(--ac1); }
.stat::after { background: conic-gradient(from var(--vt-ang), var(--ac1), var(--ac2), var(--ac1)); }
.stat b {
  background: linear-gradient(90deg, var(--ac1), var(--ac2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Ticker / TV tape */
.ticker {
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow: var(--shadow), 0 0 24px -8px var(--n-cyan), 0 0 30px -12px var(--n-pink);
}
.ticker__item strong { color: var(--n-yellow); text-shadow: 0 0 10px color-mix(in srgb, var(--n-yellow) 60%, transparent); }
.ticker__item:nth-child(4n+2) strong { color: var(--n-lime); text-shadow: 0 0 10px color-mix(in srgb, var(--n-lime) 60%, transparent); }
.ticker__item:nth-child(4n+3) strong { color: var(--n-cyan); text-shadow: 0 0 10px color-mix(in srgb, var(--n-cyan) 60%, transparent); }
.ticker__item:nth-child(4n+4) strong { color: var(--n-pink); text-shadow: 0 0 10px color-mix(in srgb, var(--n-pink) 60%, transparent); }
html[data-theme="light"] .ticker__item strong { color: var(--n-orange); }
.tv-tape { box-shadow: 0 0 22px -8px var(--n-purple); border: 1px solid var(--glass-border); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  --btn-glow: rgba(224, 17, 159, 0.75);
  --btn-glow2: rgba(0, 229, 255, 0.5);
  background: linear-gradient(120deg, #e0119f, #7c3aed, #2563eb, #0891b2, #e0119f);
  background-size: 300% 100%;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  animation: vt-flow 6s ease-in-out infinite alternate, vt-btn-pulse 2.8s ease-in-out infinite;
}
.btn:hover {
  animation: vt-flow 2.5s ease-in-out infinite alternate;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 34px -8px var(--btn-glow), 0 0 30px 2px var(--btn-glow2), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
  filter: saturate(1.25) brightness(1.08);
}
.btn::before { background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.6) 50%, transparent 75%); }
.btn--ghost {
  --btn-glow: rgba(0, 229, 255, 0.55); --btn-glow2: rgba(255, 43, 214, 0.45);
  background: linear-gradient(var(--glass), var(--glass)) padding-box, linear-gradient(120deg, var(--n-cyan), var(--n-purple), var(--n-pink), var(--n-cyan)) border-box;
  background-size: auto, 300% 100%;
  border: 1.5px solid transparent; color: var(--text); text-shadow: none;
  animation: vt-flow 6s ease-in-out infinite alternate;
  box-shadow: 0 0 16px -6px var(--n-cyan);
}
.btn--ghost:hover {
  background: linear-gradient(120deg, color-mix(in srgb, var(--n-pink) 26%, var(--glass)), color-mix(in srgb, var(--n-cyan) 26%, var(--glass))) padding-box, linear-gradient(120deg, var(--n-cyan), var(--n-purple), var(--n-pink), var(--n-cyan)) border-box;
  background-size: auto, 300% 100%;
  box-shadow: 0 0 26px -2px var(--n-cyan), 0 0 40px -8px var(--n-pink);
}
.btn--danger {
  --btn-glow: rgba(255, 43, 94, 0.75); --btn-glow2: rgba(255, 138, 31, 0.5);
  background: linear-gradient(120deg, #be123c, #ff2b5e, #ff8a1f, #be123c); background-size: 300% 100%;
}
.btn--sm { border-radius: 12px; }
.btn[disabled], .btn[disabled]:hover {
  animation: none; box-shadow: none; filter: grayscale(0.55); transform: none; opacity: 0.5;
}
.gate .btn { --btn-glow: rgba(255, 138, 31, 0.75); background: linear-gradient(120deg, #ff5f00, #ff2bd6, #ff8a1f, #ff5f00); background-size: 300% 100%; }
.wallet-card .pill { background: rgba(255, 255, 255, 0.24); box-shadow: 0 0 16px rgba(255, 255, 255, 0.35); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); animation: vt-pill-pulse 2.6s ease-in-out infinite; }
.ripple { background: rgba(255, 255, 255, 0.6); }

/* ==========================================================================
   Alerts, promo, badges
   ========================================================================== */
.alert { border-width: 1px; border-left-width: 4px; }
.alert--ok {
  background: linear-gradient(90deg, rgba(182, 255, 60, 0.18), rgba(0, 229, 255, 0.14));
  border-color: rgba(0, 229, 255, 0.5); border-left-color: var(--n-lime);
  box-shadow: 0 0 22px -8px var(--n-lime);
}
.alert--error {
  background: linear-gradient(90deg, rgba(255, 43, 94, 0.2), rgba(255, 138, 31, 0.14));
  border-color: rgba(255, 77, 109, 0.55); border-left-color: var(--n-pink);
  box-shadow: 0 0 22px -8px var(--n-pink);
}
.promo {
  background: linear-gradient(120deg, rgba(255, 138, 31, 0.28), rgba(255, 43, 214, 0.24), rgba(0, 229, 255, 0.2), rgba(255, 138, 31, 0.28));
  background-size: 300% 100%; animation: vt-flow 8s linear infinite;
  border-color: var(--n-orange); box-shadow: 0 0 26px -8px var(--n-orange);
}
.promo__tag { background: linear-gradient(90deg, var(--n-yellow), var(--n-orange)); color: #2a1400; animation: vt-badge-pulse 1.8s ease-in-out infinite; }
.promo__timer { text-shadow: 0 0 12px var(--n-yellow); }

.badge {
  background: linear-gradient(120deg, rgba(0, 229, 255, 0.22), rgba(155, 92, 255, 0.28), rgba(255, 43, 214, 0.22));
  background-size: 250% 100%;
  color: var(--text); border-color: rgba(0, 229, 255, 0.55);
  box-shadow: 0 0 12px -2px rgba(0, 229, 255, 0.5);
  animation: vt-flow 5s ease-in-out infinite alternate;
}
html[data-theme="light"] .badge { color: var(--text); }
.badge--hot {
  background: linear-gradient(120deg, #ff8a1f, #ff2bd6, #ffe600, #ff8a1f); background-size: 300% 100%;
  color: #24002a; font-weight: 800; border-color: rgba(255, 255, 255, 0.55); text-shadow: none;
  animation: vt-flow 3s linear infinite, vt-badge-pulse 1.6s ease-in-out infinite;
}
html[data-theme="light"] .badge--hot { color: #24002a; }

/* ==========================================================================
   Forms
   ========================================================================== */
label { color: var(--muted); font-weight: 600; transition: color var(--dur) var(--ease), text-shadow var(--dur) var(--ease); }
label:focus-within { color: var(--n-cyan); text-shadow: 0 0 10px color-mix(in srgb, var(--n-cyan) 50%, transparent); }
input, select, textarea {
  color: var(--text);
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
  border: 1.5px solid rgba(196, 150, 255, 0.35);
}
input:hover, select:hover, textarea:hover { border-color: var(--n-purple); }
input:focus, select:focus, textarea:focus {
  border-color: var(--n-cyan);
  box-shadow: 0 0 0 3px rgba(255, 43, 214, 0.28), 0 0 24px -2px rgba(0, 229, 255, 0.6), 0 0 40px -12px var(--n-pink);
  animation: vt-input-glow 2.4s ease-in-out infinite;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--n-pink); }

/* ==========================================================================
   Tables
   ========================================================================== */
th {
  color: var(--th); text-shadow: 0 0 10px color-mix(in srgb, var(--th) 40%, transparent);
  /* border-image is ignored on collapsed table borders, so paint the rainbow underline as a background */
  border-bottom-color: transparent;
  background: var(--rainbow) 0 100% / 100% 2px no-repeat;
}
td { border-bottom-color: rgba(196, 150, 255, 0.16); }
tbody tr:hover { background: linear-gradient(90deg, rgba(255, 43, 214, 0.2), rgba(0, 229, 255, 0.14), rgba(155, 92, 255, 0.16)); }
tbody tr:hover td:first-child { box-shadow: inset 4px 0 0 var(--n-pink); }
tbody tr:nth-child(4n+1):hover td:first-child { box-shadow: inset 4px 0 0 var(--n-cyan); }
tbody tr:nth-child(4n+2):hover td:first-child { box-shadow: inset 4px 0 0 var(--n-lime); }
tbody tr:nth-child(4n+3):hover td:first-child { box-shadow: inset 4px 0 0 var(--n-orange); }

/* ==========================================================================
   Links
   ========================================================================== */
.app-content a:not(.btn):not(.pill), .auth-card a:not(.btn) {
  color: var(--link); font-weight: 600; text-decoration: none;
  background: linear-gradient(90deg, var(--n-pink), var(--n-cyan), var(--n-lime)) 0 100% / 100% 2px no-repeat;
  transition: text-shadow var(--dur) var(--ease), background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
.app-content a:not(.btn):not(.pill):hover, .auth-card a:not(.btn):hover {
  color: var(--n-pink); background-size: 100% 100%; background-image: linear-gradient(90deg, rgba(255, 43, 214, 0.18), rgba(0, 229, 255, 0.18));
  text-shadow: 0 0 12px color-mix(in srgb, var(--n-pink) 70%, transparent);
}
.promo-hint a, .alert a { text-decoration: none; }

/* ==========================================================================
   Modal
   ========================================================================== */
.gate-modal__backdrop {
  background: radial-gradient(circle at 30% 20%, rgba(255, 43, 214, 0.35), transparent 55%), radial-gradient(circle at 75% 80%, rgba(0, 229, 255, 0.28), transparent 55%), rgba(6, 0, 28, 0.72);
}
.gate-modal__panel { animation: rise 0.45s var(--ease) both; }
.app-overlay { background: linear-gradient(135deg, rgba(43, 10, 114, 0.6), rgba(6, 0, 28, 0.7)); }
.gate { border-bottom: 1px dashed rgba(0, 229, 255, 0.35); }

/* Misc */
pre.log { border: 1px solid rgba(0, 229, 255, 0.35); border-left: 4px solid var(--n-lime); }
.muted { color: var(--muted); }

/* ==========================================================================
   Footer (rendered by includes/layout/shell.php)
   ========================================================================== */
.app-footer {
  position: relative; margin-top: 36px; padding: 20px 24px 26px; text-align: center;
  font-size: 0.86rem; color: var(--muted);
  background: linear-gradient(0deg, rgba(155, 92, 255, 0.16), transparent);
}
.app-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--n-pink), var(--n-orange), var(--n-yellow), var(--n-lime), var(--n-cyan), var(--n-blue), var(--n-purple), var(--n-pink));
  background-size: 300% 100%; animation: vt-flow 6s linear infinite; box-shadow: 0 0 12px var(--n-pink);
}
.app-footer strong {
  font-weight: 800;
  background: linear-gradient(90deg, var(--n-pink), var(--n-orange), var(--n-yellow), var(--n-lime), var(--n-cyan), var(--n-purple));
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: vt-flow 7s linear infinite;
}

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes vt-flow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes vt-sidebar-flow { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 0 0, 0 0, 0 100%; } }
@keyframes vt-drift {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(-2%, 3%, 0) rotate(-6deg) scale(1); }
}
@keyframes vt-twinkle { 0% { opacity: 0.25; transform: translateY(0); } 100% { opacity: 0.85; transform: translateY(-14px); } }
@keyframes vt-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes vt-spin { to { --vt-ang: 360deg; } }
@keyframes vt-spin-slow { to { transform: rotate(360deg); } }
@keyframes vt-bob { 0%, 100% { transform: translateY(0) scale(1.1); } 50% { transform: translateY(-2px) scale(1.25); } }
@keyframes vt-nav-glow {
  0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 70%, transparent), 0 0 14px -6px var(--ac); }
  50%      { box-shadow: inset 0 0 0 1px var(--ac), 0 0 26px -2px var(--ac); }
}
@keyframes vt-btn-pulse {
  0%, 100% { box-shadow: 0 8px 22px -8px var(--btn-glow), 0 0 0 0 transparent, 0 1px 0 rgba(255, 255, 255, 0.3) inset; }
  50%      { box-shadow: 0 10px 30px -6px var(--btn-glow), 0 0 22px 1px var(--btn-glow2), 0 1px 0 rgba(255, 255, 255, 0.3) inset; }
}
@keyframes vt-pill-pulse { 0%, 100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.25); } 50% { box-shadow: 0 0 22px rgba(255, 255, 255, 0.65); } }
@keyframes vt-badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes vt-avatar-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 0 14px rgba(255, 43, 214, 0.6); }
  50%      { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45), 0 0 26px rgba(0, 229, 255, 0.8); }
}
@keyframes vt-input-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 43, 214, 0.26), 0 0 22px -2px rgba(0, 229, 255, 0.55), 0 0 36px -12px var(--n-pink); }
  50%      { box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.3), 0 0 28px -2px rgba(255, 43, 214, 0.6), 0 0 40px -10px var(--n-cyan); }
}

/* ==========================================================================
   Responsive + accessibility
   ========================================================================== */
@media (max-width: 640px) {
  /* Lighter effects on small screens for performance */
  body::after { display: none; }
  .pkg, .stat { animation: none; }
  .panel::after, .stat::after, .auth-card::after, .gate-modal__panel::after { animation-duration: 14s; }
  .brand { font-size: 1.3rem; }
  h1.brand { font-size: 1.6rem; }
  .app-footer { padding: 16px 16px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  body::before { transform: none; }
  body::after { opacity: 0.4; }
  .btn:hover, .app-nav a:hover { transform: none; }
}