/* Vegas Bets — Design System (Automatizador Bac Bo) */

:root {
  --bg-void:    #0a0a0a;
  --bg-deep:    #1a1a1a;
  --bg-panel:   rgba(26, 26, 26, 0.72);
  --bg-panel-solid: #141414;
  --bg-elevated: rgba(30, 30, 30, 0.92);
  --border-glass: rgba(18, 199, 122, 0.12);
  --border-glass-strong: rgba(18, 199, 122, 0.28);

  --vegas:        #12C77A;
  --vegas-bright: #2ee89a;
  --vegas-deep:   #0e9f5f;
  --vegas-glow:   rgba(18, 199, 122, 0.45);

  --green:  #12C77A;
  --red:    #e74c3c;
  --amber:  #f39c12;
  --blue:   #3498db;

  /* Cores do Bac Bo — padrão universal */
  --color-player:        #007BFF;
  --color-player-bright: #4488FF;
  --color-player-glow:   rgba(0, 123, 255, 0.55);

  --color-banker:        #ED0103;
  --color-banker-bright: #ff4757;
  --color-banker-glow:   rgba(237, 1, 3, 0.55);

  --color-tie:           #ffc107;
  --color-tie-bright:    #ffe066;
  --color-tie-glow:      rgba(255, 193, 7, 0.55);

  --text-primary:   #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-muted:     rgba(255, 255, 255, 0.45);

  --grad-primary: linear-gradient(135deg, #12C77A 0%, #0e9f5f 100%);
  --grad-premium: linear-gradient(100deg, #12C77A 0%, #2ee89a 40%, #12C77A 100%);
  --grad-danger:  linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);

  --glow-vegas: 0 0 24px rgba(18, 199, 122, 0.45);
  --glow-green: 0 0 24px rgba(18, 199, 122, 0.45);
  --glow-red:   0 0 24px rgba(231, 76, 60, 0.45);

  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Poppins', 'Segoe UI', sans-serif;
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body { position: relative; overflow-x: hidden; }

.bg-field {
  position: fixed;
  inset: 0;
  z-index: -3;
  background: var(--bg-void);
  overflow: hidden;
}
.bg-field::before,
.bg-field::after {
  content: '';
  position: absolute;
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.22;
}
.bg-field::before {
  top: -15%;
  left: -8%;
  background: radial-gradient(circle, var(--vegas), transparent 70%);
  animation: driftA 28s ease-in-out infinite alternate;
}
.bg-field::after {
  bottom: -20%;
  right: -8%;
  background: radial-gradient(circle, rgba(18, 199, 122, 0.4), transparent 70%);
  animation: driftB 34s ease-in-out infinite alternate;
}
@keyframes driftA {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(6vw, 8vh) scale(1.12); }
}
@keyframes driftB {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-5vw, -6vh) scale(1.08); }
}

.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(18, 199, 122, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 199, 122, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 100%);
}

.bg-vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 12%, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }

.text-gradient {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-premium {
  background: var(--grad-premium);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: premiumShine 5s linear infinite;
  filter: drop-shadow(0 0 12px rgba(18, 199, 122, 0.3));
}
@keyframes premiumShine { to { background-position: 200% center; } }

.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-amber { color: var(--amber); }

.glass {
  position: relative;
  background: linear-gradient(160deg, rgba(18, 199, 122, 0.04) 0%, transparent 40%), var(--bg-panel);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  border: none;
  border-radius: var(--radius-md);
  padding: 13px 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.2s var(--ease-premium), box-shadow 0.2s ease;
  color: var(--text-primary);
  text-decoration: none;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: var(--grad-primary);
  box-shadow: var(--glow-vegas);
  color: #fff;
}
.btn-primary:hover:not(:disabled) {
  box-shadow: 0 0 34px rgba(18, 199, 122, 0.65);
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--grad-danger);
  box-shadow: var(--glow-red);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-glass-strong);
  color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(18, 199, 122, 0.08);
  color: var(--text-primary);
}

.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 12.5px; }
.btn:active { transform: translateY(1px) scale(0.98); }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"] {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass-strong);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field input:focus {
  border-color: var(--vegas);
  background: rgba(18, 199, 122, 0.06);
  box-shadow: 0 0 0 4px rgba(18, 199, 122, 0.12);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-idle    { background: rgba(255,255,255,0.08); color: var(--text-secondary); }
.badge-live    { background: rgba(18,199,122,0.15); color: var(--vegas-bright); }
.badge-analyzing { background: rgba(18,199,122,0.2); color: var(--vegas-bright); }
.badge-entry   { background: rgba(243,156,18,0.18); color: var(--amber); }
.badge-win     { background: rgba(18,199,122,0.2); color: var(--green); }
.badge-loss    { background: rgba(231,76,60,0.18); color: var(--red); }

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.dot-pulse { animation: dotPulse 1.6s ease-in-out infinite; }
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.75); }
}

.flex-col { display: flex; flex-direction: column; }
.gap-16 { gap: 16px; }

.spinner {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.demo-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(18, 199, 122, 0.15);
  border-bottom: 1px solid rgba(18, 199, 122, 0.35);
  padding: 8px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--vegas-bright);
  backdrop-filter: blur(8px);
}
body.has-demo-banner { padding-top: 38px; }