/* iaSorte - Estilos customizados */

:root {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --secondary: #10b981;
  --accent: #f59e0b;
  --dark: #0f172a;
  --dark-light: #1e293b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--dark);
  color: #e2e8f0;
  min-height: 100vh;
}

/* Animações */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.3); }
  50% { box-shadow: 0 0 25px rgba(99, 102, 241, 0.6); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-fade-in { animation: fadeIn 0.6s ease-out; }
.animate-fade-in-delay { animation: fadeIn 0.6s ease-out 0.2s both; }
.animate-fade-in-delay2 { animation: fadeIn 0.6s ease-out 0.4s both; }
.animate-pulse-glow { animation: pulse-glow 2s infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }

/* Gradientes */
.gradient-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.gradient-hero { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%); }
.gradient-card { background: linear-gradient(145deg, #1e293b, #0f172a); }

/* Glass effect */
.glass {
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(99, 102, 241, 0.15);
}

/* Number balls */
.number-ball {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  margin: 3px;
  transition: transform 0.2s;
}

.number-ball:hover {
  transform: scale(1.15);
}

.number-ball.hot {
  background: linear-gradient(135deg, #ef4444, #f97316);
}

.number-ball.cold {
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
}

.number-ball.selected {
  background: linear-gradient(135deg, #10b981, #34d399);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
}

/* Score bar */
.score-bar {
  height: 8px;
  border-radius: 4px;
  background: #1e293b;
  overflow: hidden;
}

.score-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease;
}

/* Sidebar */
.sidebar {
  width: 260px;
  min-height: 100vh;
  background: var(--dark-light);
  border-right: 1px solid rgba(99, 102, 241, 0.1);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  transition: transform 0.3s;
}

.sidebar-hidden { transform: translateX(-100%); }

.main-content {
  margin-left: 260px;
  min-height: 100vh;
  transition: margin-left 0.3s;
}

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
}

/* Loading spinner */
.spinner {
  border: 3px solid rgba(99, 102, 241, 0.2);
  border-top: 3px solid #6366f1;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin-slow 1s linear infinite;
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 24px;
  border-radius: 8px;
  z-index: 9999;
  animation: fadeIn 0.3s;
  font-weight: 500;
}

.toast-success { background: #10b981; color: white; }
.toast-error { background: #ef4444; color: white; }
.toast-info { background: #6366f1; color: white; }

/* Pricing card highlight */
.pricing-popular {
  border: 2px solid #6366f1;
  transform: scale(1.05);
  position: relative;
}

.pricing-popular::before {
  content: 'MAIS POPULAR';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}