:root {
  --bg-a: #0a0f1e;
  --bg-b: #0f1729;
}
* { -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1000px 500px at 80% -10%, rgba(45,212,191,0.12), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(99,102,241,0.15), transparent 60%),
    linear-gradient(160deg, var(--bg-a), var(--bg-b));
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

/* connect ring states */
.ring-glow-idle {
  background: conic-gradient(from 0deg, #334155, #1e293b, #334155);
  filter: blur(2px); opacity: .5;
}
.ring-glow-pulse {
  background: conic-gradient(from 0deg, #6366f1, #8b5cf6, #6366f1);
  animation: spin 1.2s linear infinite, pulseGlow 1s ease-in-out infinite;
  filter: blur(3px);
}
.ring-glow-on {
  background: conic-gradient(from 0deg, #2dd4bf, #10b981, #14b8a6, #2dd4bf);
  animation: spin 6s linear infinite;
  box-shadow: 0 0 60px rgba(45,212,191,0.5);
  filter: blur(1px);
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulseGlow { 0%,100% { opacity:.6; } 50% { opacity:1; } }

/* animations */
@keyframes fadeUp { from { opacity:0; transform: translateY(12px);} to {opacity:1; transform:none;} }
@keyframes fadeIn { from { opacity:0;} to {opacity:1;} }
@keyframes sheetUp { from { transform: translateY(100%);} to { transform:none;} }
@keyframes tickIn { from { transform: scale(1.25); opacity:.4;} to { transform:scale(1); opacity:1;} }
@keyframes toastIn { from { opacity:0; transform: translate(-50%, 16px);} to { opacity:1; transform: translate(-50%,0);} }

.banner-in { animation: fadeUp .4s ease both; }
.stats-in { animation: fadeUp .35s ease both; }
.card-in { animation: fadeUp .3s ease both; }
.sheet-in { animation: sheetUp .3s cubic-bezier(.2,.8,.2,1) both; }
.tick-in { animation: tickIn .3s ease; }
.toast-in { animation: toastIn .3s ease both; }
.nav-active { animation: fadeIn .2s ease; transform: scale(1.15); display:inline-block; }

/* running fox */
@keyframes foxRun {
  0% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(3px) rotate(-8deg); }
  75% { transform: translateX(-3px) rotate(8deg); }
  100% { transform: translateX(0) rotate(0); }
}
.fox-run { display:inline-block; animation: foxRun .28s linear infinite; }
@keyframes foxIdle { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-6px);} }
.fox-idle { display:inline-block; animation: foxIdle 2s ease-in-out infinite; }

/* scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* date input dark */
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); }
textarea:focus, input:focus, select:focus { outline: none; border-color: rgba(45,212,191,0.5); }