/* IGAXMING — Premium futuristic styles */
:root {
  --cyan: #00C8FF;
  --blue: #0066FF;
  --blue-deep: #001a3a;
  --gold: #F5A623;
  --gold-dim: #FF9500;
  --green: #00E5A8;
  --teal: #00B4D8;
  --bg: #020617;
  --bg-panel: #060A1A;
  color-scheme: dark;
}

html { background: var(--bg); color-scheme: dark; }
body { background: var(--bg); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb { background: #1a3050; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #2a4070; }

/* Animations */
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fade-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; }

@keyframes reveal-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
[data-reveal] { opacity: 0; }
[data-reveal].is-visible { animation: reveal-up 0.85s cubic-bezier(0.16, 1, 0.3, 1) both; }
[data-reveal][data-d="1"].is-visible { animation-delay: 0.08s; }
[data-reveal][data-d="2"].is-visible { animation-delay: 0.16s; }
[data-reveal][data-d="3"].is-visible { animation-delay: 0.24s; }
[data-reveal][data-d="4"].is-visible { animation-delay: 0.32s; }

@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } }
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

@keyframes glow-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-text {
  background: linear-gradient(90deg, #fff 0%, #00C8FF 25%, #fff 50%, #F5A623 75%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { animation: marquee 40s linear infinite; }

/* Gradient text utilities */
.text-grad-cyan {
  background: linear-gradient(135deg, #00C8FF 0%, #0066FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-grad-gold {
  background: linear-gradient(135deg, #F5A623 0%, #FF9500 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-grad-aurora {
  background: linear-gradient(120deg, #00C8FF 0%, #00E5A8 35%, #F5A623 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glass cards */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.glass-strong {
  background: linear-gradient(180deg, rgba(20,30,60,0.6) 0%, rgba(8,12,28,0.4) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Glow border on hover */
.glow-border {
  position: relative;
  overflow: hidden;
}
.glow-border::before {
  content: '';
  position: absolute; inset: -1px;
  background: linear-gradient(120deg, rgba(0,200,255,0) 30%, rgba(0,200,255,0.4) 50%, rgba(245,166,35,0) 70%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
}
.glow-border:hover::before { opacity: 1; }

/* Floating dashboard cards */
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float-y { animation: float-y 6s ease-in-out infinite; }

/* Aurora background blob */
.aurora-blob {
  filter: blur(100px);
  opacity: 0.4;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
}

/* Bar chart */
.dash-bar {
  background: linear-gradient(to top, #0066FF 0%, #00C8FF 100%);
  border-radius: 4px 4px 0 0;
  transition: transform 0.3s ease;
}
.dash-bar:hover { transform: scaleY(1.05); }

/* Buttons */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00C8FF 0%, #0066FF 100%);
  color: #020617;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  box-shadow: 0 0 0 0 rgba(0,200,255,0), 0 8px 24px -8px rgba(0,200,255,0.6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(0,200,255,0.15), 0 12px 32px -8px rgba(0,200,255,0.7); }
.btn-primary:active { transform: translateY(0); }

.btn-gold {
  background: linear-gradient(135deg, #F5A623 0%, #FF9500 100%);
  box-shadow: 0 8px 24px -8px rgba(245,166,35,0.6);
}
.btn-gold:hover { box-shadow: 0 0 0 4px rgba(245,166,35,0.15), 0 12px 32px -8px rgba(245,166,35,0.7); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: #e5e7eb;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.3s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }

/* Form inputs — high specificity to beat any Tailwind forms plugin reset */
.form-input,
input.form-input,
select.form-input,
textarea.form-input,
input[type="text"].form-input,
input[type="email"].form-input,
input[type="password"].form-input,
input[type="number"].form-input,
input[type="search"].form-input,
input[type="tel"].form-input,
input[type="url"].form-input {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  background-color: rgba(255,255,255,0.04) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #f1f5f9 !important;
  font-size: 14px;
  transition: all 0.2s;
  outline: none !important;
  -webkit-text-fill-color: #f1f5f9;
  caret-color: #00C8FF;
  color-scheme: dark;
  appearance: none;
  -webkit-appearance: none;
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  box-shadow: none;
}
textarea.form-input { height: auto; padding-top: 12px; padding-bottom: 12px; }
select.form-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'><path d='M4.5 6l3.5 4 3.5-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.form-input:focus { background-color: rgba(255,255,255,0.06) !important; border-color: rgba(0,200,255,0.5); box-shadow: 0 0 0 4px rgba(0,200,255,0.1); }
.form-input::placeholder { color: #64748b; opacity: 1; }

/* Kill browser autofill white background (Chrome/Safari/Edge/Brave) */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #f1f5f9 !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(8,12,28,0.96) inset !important;
  box-shadow: 0 0 0 1000px rgba(8,12,28,0.96) inset !important;
  background-color: rgba(8,12,28,0.96) !important;
  caret-color: #00C8FF !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  transition: background-color 99999s ease-in-out 0s, color 99999s ease-in-out 0s;
}
/* Firefox */
.form-input:autofill,
input:autofill {
  background-color: rgba(8,12,28,0.96) !important;
  color: #f1f5f9 !important;
}
/* Hide default password reveal/clear icons that may render on white bg */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }

.form-checkbox {
  width: 18px; height: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
  appearance: none;
  flex-shrink: 0;
  position: relative;
}
.form-checkbox:checked {
  background: linear-gradient(135deg, #00C8FF 0%, #0066FF 100%);
  border-color: transparent;
}
.form-checkbox:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #020617;
  font-size: 12px;
  font-weight: 800;
}

/* OAuth buttons */
.oauth-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: #f1f5f9;
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.25s ease;
  overflow: hidden;
}
.oauth-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--brand-color, transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.oauth-btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); }
.oauth-btn:hover::before { opacity: 0.08; }
.oauth-btn span, .oauth-btn i { position: relative; z-index: 1; }
.oauth-btn.google { --brand-color: #4285F4; }
.oauth-btn.discord { --brand-color: #5865F2; }
.oauth-btn.facebook { --brand-color: #1877F2; }

/* Locked module overlay */
.module-locked { position: relative; overflow: hidden; }
.module-locked .module-content { filter: blur(8px) brightness(0.6); pointer-events: none; user-select: none; }
.module-locked .module-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(2,6,23,0.4) 0%, rgba(2,6,23,0.85) 100%);
  text-align: center;
  padding: 24px;
  z-index: 2;
}

/* Sidebar */
.side-link {
  display: flex; align-items: center; gap: 12px;
  height: 38px; padding: 0 12px;
  border-radius: 10px;
  font-size: 13.5px; color: #94a3b8;
  transition: all 0.18s;
  position: relative;
}
.side-link:hover { background: rgba(255,255,255,0.04); color: #f1f5f9; }
.side-link.active { background: linear-gradient(90deg, rgba(0,200,255,0.12), transparent); color: #00C8FF; }
.side-link.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(to bottom, #00C8FF, #0066FF); border-radius: 2px; }
.side-link i { width: 18px; text-align: center; flex-shrink: 0; opacity: 0.8; }

/* RTL fix */
[dir="rtl"] .side-link.active::before { left: auto; right: 0; }

/* Section headings */
.section-pad { padding: 88px 0; }
@media (max-width: 768px) { .section-pad { padding: 64px 0; } }

/* Subtle grid lines */
.grid-lines {
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* Plan card highlight */
.plan-hero {
  background: linear-gradient(135deg, rgba(0,102,255,0.18) 0%, rgba(0,200,255,0.05) 50%, rgba(245,166,35,0.10) 100%);
  border: 1px solid rgba(0,200,255,0.3);
  box-shadow: 0 32px 80px -20px rgba(0,102,255,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Badge tints */
.badge-free { background: rgba(148,163,184,0.12); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.2); }
.badge-license { background: rgba(245,166,35,0.12); color: #F5A623; border: 1px solid rgba(245,166,35,0.3); }
.badge-core { background: rgba(0,200,255,0.12); color: #00C8FF; border: 1px solid rgba(0,200,255,0.3); }
.badge-full { background: linear-gradient(135deg, rgba(0,200,255,0.18), rgba(245,166,35,0.18)); color: #fff; border: 1px solid rgba(255,255,255,0.18); }
.badge-enterprise { background: linear-gradient(135deg, rgba(245,166,35,0.18), rgba(0,229,168,0.18)); color: #F5A623; border: 1px solid rgba(245,166,35,0.3); }

/* Flash error fade */
@keyframes slide-down { from { transform: translateX(-50%) translateY(-20px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
[data-testid="flash-error"] { animation: slide-down 0.4s ease both; }