/* Base tweaks */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: 'Sora', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

code, .mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Buttons */
.btn-primary { 
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.25rem; border-radius: 0.75rem; 
  background: linear-gradient(135deg, #0ea5e9, #8b5cf6); color: #0b1220;
  font-weight: 700; letter-spacing: 0.2px; 
  background-size: 200% 200%;
  transition: transform .2s ease, opacity .25s ease, box-shadow .3s ease, background-position .6s ease;
}
.btn-primary:hover { transform: translateY(-2px) scale(1.01); opacity: .98; background-position: 100% 0; box-shadow: 0 8px 24px rgba(14,165,233,.25); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary:active { transform: translateY(0) scale(.99); box-shadow: 0 4px 16px rgba(14,165,233,.18); }
.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(14,165,233,.45), 0 0 0 6px rgba(139,92,246,.25); }

.btn-secondary { 
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.1rem; border-radius: 0.75rem; border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06); color: #e2e8f0; font-weight: 600;
  transition: transform .2s ease, border-color .25s ease, box-shadow .3s ease, background-color .25s ease;
}
.btn-secondary:hover { transform: translateY(-2px) scale(1.01); border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); box-shadow: 0 8px 24px rgba(15,23,42,.35); }
.btn-secondary:active { transform: translateY(0) scale(.99); box-shadow: 0 4px 16px rgba(15,23,42,.25); }
.btn-secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(226,232,240,.35); }

/* Animate native button elements too */
button:not(.btn-primary):not(.btn-secondary) {
  transition: transform .2s ease, box-shadow .3s ease, background-color .25s ease, border-color .25s ease;
}
button:not(.btn-primary):not(.btn-secondary):hover { transform: translateY(-2px); }
button:not(.btn-primary):not(.btn-secondary):active { transform: translateY(0) scale(.99); }
button:not(.btn-primary):not(.btn-secondary):focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(148,163,184,.35); }

/* Stat cards */
.stat-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
}
.stat-label { color: #94a3b8; font-size: .85rem; }
.stat-value { font-size: 1.75rem; font-weight: 800; margin-top: .35rem; }

/* Utilities */
.hidden { display: none; }

/* Animated background grid */
.bg-grid {
  position: relative;
}
.bg-grid::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(148,163,184,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.08) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
  mask-image: radial-gradient(circle at center, black 60%, transparent 100%);
  animation: gridFloat 30s linear infinite;
}

/* Soft glow helpers */
.glow {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 10px 40px rgba(14,165,233,0.15), inset 0 0 30px rgba(139,92,246,0.12);
}

/* Keyframes */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: .45; }
  50% { opacity: .7; }
}
@keyframes gridFloat {
  from { background-position: 0 0, 0 0; }
  to { background-position: 32px 0, 0 32px; }
}

/* Decorative rings */
.ring-animated {
  position: relative;
}
.ring-animated::after {
  content: "";
  position: absolute; inset: -16px; border-radius: 24px;
  background: conic-gradient(from 0deg, rgba(14,165,233,.25), rgba(139,92,246,.25), rgba(14,165,233,.25));
  filter: blur(18px);
  animation: spin-slow 24s linear infinite;
  z-index: -1;
}

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.is-visible { opacity: 1; transform: translateY(0); }

/* Solana-like animated background (original implementation) */
.bg-solana {
  position: absolute; inset: 0; overflow: hidden;
}
.bg-solana::before {
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(120deg, rgba(0,212,255,.25), rgba(139,92,246,.25) 40%, rgba(236,72,153,.25) 70%, rgba(0,212,255,.25)),
              repeating-linear-gradient(120deg, rgba(255,255,255,.06) 0 2px, transparent 2px 16px);
  filter: blur(20px) saturate(120%);
  animation: solanaShift 18s ease-in-out infinite alternate;
}
.bg-solana::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 20% 10%, rgba(124,58,237,.25), transparent 40%),
              radial-gradient(ellipse at 80% 90%, rgba(14,165,233,.18), transparent 35%),
              radial-gradient(ellipse at 50% 40%, rgba(236,72,153,.12), transparent 45%);
  mix-blend-mode: screen;
  animation: solanaPulse 8s ease-in-out infinite;
}
@keyframes solanaShift {
  0% { transform: translate3d(-4%, -2%, 0) rotate(0.5deg); }
  50% { transform: translate3d(4%, 2%, 0) rotate(-0.5deg); }
  100% { transform: translate3d(-2%, 4%, 0) rotate(0.5deg); }
}
@keyframes solanaPulse {
  0%, 100% { opacity: .5; }
  50% { opacity: .8; }
}

/* Professional subtle background */
.bg-pro {
  position: relative;
}
.bg-pro::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(1000px 800px at 20% 15%, rgba(56,189,248,0.10), transparent 60%),
    radial-gradient(900px 700px at 80% 25%, rgba(168,85,247,0.08), transparent 58%),
    radial-gradient(800px 700px at 50% 85%, rgba(236,72,153,0.06), transparent 52%);
}
.bg-pro::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(2,6,23,0) 40%, rgba(2,6,23,0.55) 100%);
  pointer-events: none;
}