@import "tailwindcss";

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  color: #18181b;
  font-family: var(--font-sans), system-ui, sans-serif;
  background-color: #f4f5fa;
  background-image:
    radial-gradient(55rem 55rem at 10% -12%, rgba(124, 58, 237, 0.10), transparent 55%),
    radial-gradient(48rem 48rem at 98% -5%, rgba(59, 130, 246, 0.10), transparent 50%),
    radial-gradient(60rem 38rem at 50% 118%, rgba(20, 184, 166, 0.07), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Glass surface (light) */
.glass {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
}
.glass-hover { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.glass-hover:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.28);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 16px 32px -14px rgba(79, 70, 229, 0.25);
}

/* Online status pulse */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.dot-online { background: #16a34a; animation: pulse-ring 2s infinite; }
.dot-offline { background: #cbd5e1; }

@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fade-in .35s ease both; }

.gradient-text {
  background: linear-gradient(90deg, #7c3aed, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}