/* ============================================================================
   STATSI - FRENCH DIGITAL REDESIGN v2
   Bold, Vivid, Expressive CSS Overrides
   ============================================================================ */

/* Color Palette — new design tokens */
:root {
  --primary: #0046FF;
  --primary-light: #1A56DB;
  --secondary: #FF6B35;
  --secondary-dark: #FF4757;
  --tertiary: #00D4FF;
  --success: #00E676;
  --warning: #FFAB00;
  --danger: #FF1744;
  --bg-dark: #080D1A;
  --bg-card: #0F1623;
  --text-primary: #FFFFFF;
  --text-secondary: #B0B8C8;
  --glass-blue: rgba(0, 70, 255, 0.1);
  --glass-coral: rgba(255, 107, 53, 0.1);
  --glass-cyan: rgba(0, 212, 255, 0.1);

  /* ── Override SPA's built-in CSS variables ── */
  --bg:       #080D1A !important;
  --sf:       #0C1424 !important;
  --card:     #0F1A2E !important;
  --cardH:    #162040 !important;
  --bdr:      rgba(0, 70, 255, 0.18) !important;

  --txt:      #FFFFFF !important;
  --txt2:     #B0B8C8 !important;
  --txt3:     #6B7A90 !important;

  --acc:      #0046FF !important;
  --accD:     #003AD6 !important;
  --acc2:     #FF6B35 !important;
  --acc2L:    rgba(255, 107, 53, 0.15) !important;

  --live:     #FF1744 !important;
  --liveBg:   rgba(255, 23, 68, 0.12) !important;
  --win:      #00E676 !important;
  --draw:     #FFAB00 !important;
  --loss:     #FF1744 !important;

  --cyan:     #00D4FF !important;
  --home:     #0046FF !important;
  --away:     #FF6B35 !important;
  --homeBg:   rgba(0, 70, 255, 0.10) !important;
  --awayBg:   rgba(255, 107, 53, 0.10) !important;

  --dur-instant:  .1s !important;
  --dur-fast:     .2s !important;
  --dur-normal:   .3s !important;
  --dur-emphasis: .45s !important;
  --dur-slow:     .65s !important;

  --ease-standard: cubic-bezier(.4, 0, .2, 1) !important;
  --ease-decel:    cubic-bezier(0, 0, .2, 1) !important;
  --ease-accel:    cubic-bezier(.4, 0, 1, 1) !important;
  --ease-spring:   cubic-bezier(.22, 1.4, .36, 1) !important;

  --font-scale: 1 !important;
}

/* ── Light Theme — vivid warm version ── */
:root.light-theme {
  --bg:       #F0F2F8 !important;
  --sf:       #FFFFFF !important;
  --card:     #FFFFFF !important;
  --cardH:    #F5F7FC !important;
  --bdr:      rgba(0, 70, 255, 0.12) !important;
  --txt:      #0A0F1E !important;
  --txt2:     #4A5568 !important;
  --txt3:     #8A94A6 !important;
  --acc:      #0046FF !important;
  --live:     #FF1744 !important;
  --liveBg:   rgba(255, 23, 68, 0.08) !important;
  --win:      #00C853 !important;
  --draw:     #FF9100 !important;
  --loss:     #FF1744 !important;
  --cyan:     #0091EA !important;
  --home:     #0046FF !important;
  --away:     #FF6B35 !important;
  --homeBg:   rgba(0, 70, 255, 0.06) !important;
  --awayBg:   rgba(255, 107, 53, 0.06) !important;
}

/* ============================================================================
   GLOBAL STYLES
   ============================================================================ */

* {
  box-sizing: border-box !important;
}

html {
  scroll-behavior: smooth !important;
}

body {
  background: linear-gradient(135deg, #080D1A 0%, #0f1f3c 50%, #0d1a2e 100%) !important;
  color: var(--text-primary) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
  overflow-x: hidden !important;
}

/* Selection Styling */
::selection {
  background: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%) !important;
  color: var(--text-primary) !important;
}

::-moz-selection {
  background: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%) !important;
  color: var(--text-primary) !important;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

::-webkit-scrollbar-track {
  background: rgba(15, 22, 35, 0.5) !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary) 0%, var(--tertiary) 100%) !important;
  border-radius: 10px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--tertiary) 0%, var(--primary) 100%) !important;
}

/* Firefox Scrollbar */
* {
  scrollbar-color: var(--primary) rgba(15, 22, 35, 0.5) !important;
  scrollbar-width: thin !important;
}

/* Focus Styles */
:focus-visible {
  outline: 2px solid var(--tertiary) !important;
  outline-offset: 2px !important;
}

/* ============================================================================
   KEYFRAME ANIMATIONS
   ============================================================================ */

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 70, 255, 0.7),
                0 0 20px rgba(0, 70, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 0 15px rgba(0, 70, 255, 0),
                0 0 40px rgba(0, 70, 255, 0.8);
  }
}

@keyframes pulse-glow-red {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 23, 68, 0.7),
                0 0 20px rgba(255, 23, 68, 0.5);
  }
  50% {
    box-shadow: 0 0 0 15px rgba(255, 23, 68, 0),
                0 0 40px rgba(255, 23, 68, 0.8);
  }
}

@keyframes slide-in-up {
  from {
    opacity: 0 !important;
    transform: translateY(30px) !important;
  }
  to {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

@keyframes slide-in-down {
  from {
    opacity: 0 !important;
    transform: translateY(-30px) !important;
  }
  to {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0 !important;
    transform: translateX(-30px) !important;
  }
  to {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0 !important;
    transform: translateX(30px) !important;
  }
  to {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

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

@keyframes border-glow {
  0% {
    border-color: var(--primary) !important;
    box-shadow: 0 0 10px var(--primary) !important;
  }
  50% {
    border-color: var(--tertiary) !important;
    box-shadow: 0 0 20px var(--tertiary) !important;
  }
  100% {
    border-color: var(--primary) !important;
    box-shadow: 0 0 10px var(--primary) !important;
  }
}

@keyframes score-pop {
  0% {
    transform: scale(0.8) !important;
    opacity: 0.5 !important;
  }
  50% {
    transform: scale(1.15) !important;
  }
  100% {
    transform: scale(1) !important;
    opacity: 1 !important;
  }
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.7) !important;
  }
  70% {
    box-shadow: 0 0 0 20px rgba(0, 212, 255, 0) !important;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 212, 255, 0) !important;
  }
}

@keyframes rainbow-border {
  0% {
    border-image-source: linear-gradient(90deg, var(--primary), var(--secondary), var(--tertiary), var(--primary)) !important;
  }
  100% {
    border-image-source: linear-gradient(90deg, var(--tertiary), var(--primary), var(--secondary), var(--tertiary)) !important;
  }
}

@keyframes glow-text {
  0%, 100% {
    text-shadow: 0 0 10px rgba(0, 70, 255, 0.5),
                 0 0 20px rgba(0, 212, 255, 0.3) !important;
  }
  50% {
    text-shadow: 0 0 20px rgba(0, 70, 255, 0.8),
                 0 0 40px rgba(0, 212, 255, 0.6) !important;
  }
}

@keyframes wiggle {
  0%, 100% {
    transform: rotate(0deg) !important;
  }
  25% {
    transform: rotate(-1deg) !important;
  }
  75% {
    transform: rotate(1deg) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   HEADER & NAVIGATION
   ============================================================================ */

.header {
  background: linear-gradient(135deg, #0046FF 0%, #1A56DB 50%, #0F1F3C 100%) !important;
  padding: 20px 16px !important;
  border-bottom: 2px solid var(--tertiary) !important;
  box-shadow: 0 8px 32px rgba(0, 70, 255, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  animation: slide-in-down 0.6s ease-out !important;
}

.header-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #FFFFFF 0%, var(--tertiary) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: glow-text 2s ease-in-out infinite !important;
  margin: 0 !important;
  letter-spacing: -0.5px !important;
}

.header-tagline {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-top: 4px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
}

.header-button {
  background: linear-gradient(135deg, var(--secondary) 0%, #FF4757 100%) !important;
  border: none !important;
  color: var(--text-primary) !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3) !important;
}

.header-button:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 30px rgba(255, 107, 53, 0.5) !important;
}

.header-button:active {
  animation: ripple 0.6s ease-out !important;
}

.nav-bar {
  background: linear-gradient(90deg, rgba(0, 70, 255, 0.15) 0%, rgba(15, 22, 35, 0.8) 50%, rgba(0, 212, 255, 0.15) 100%) !important;
  border-top: 1px solid rgba(0, 212, 255, 0.3) !important;
  border-bottom: 1px solid rgba(0, 70, 255, 0.3) !important;
  backdrop-filter: blur(15px) !important;
  padding: 0 !important;
  display: flex !important;
  gap: 0 !important;
  box-shadow: 0 4px 20px rgba(0, 70, 255, 0.2) inset !important;
}

.nav-item {
  flex: 1 !important;
  padding: 12px 8px !important;
  text-align: center !important;
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  border-radius: 8px 8px 0 0 !important;
}

.nav-item:hover {
  color: var(--tertiary) !important;
  background: rgba(0, 212, 255, 0.1) !important;
}

.nav-item.active {
  color: var(--text-primary) !important;
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.2) 0%, rgba(0, 212, 255, 0.2) 100%) !important;
  border-bottom: 3px solid var(--tertiary) !important;
  font-weight: 700 !important;
}

.nav-icon {
  font-size: 20px !important;
  display: block !important;
}

.nav-label {
  font-size: 11px !important;
  display: block !important;
}

.nav-disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ============================================================================
   MATCH CARDS
   ============================================================================ */

.match-card {
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.12) 0%, rgba(15, 22, 35, 0.92) 50%, rgba(0, 212, 255, 0.06) 100%) !important;
  border: 2px solid rgba(0, 70, 255, 0.4) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 8px 24px rgba(0, 70, 255, 0.2), inset 0 1px 0 rgba(0, 212, 255, 0.1) !important;
  animation: slide-in-up 0.5s ease-out both !important;
  backdrop-filter: blur(10px) !important;
  position: relative !important;
  overflow: hidden !important;
}

.match-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.06), transparent) !important;
  transition: left 0.6s ease !important;
  pointer-events: none !important;
}

.match-card:hover::before {
  left: 100% !important;
}

.match-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: 0 16px 48px rgba(0, 70, 255, 0.35), 0 0 40px rgba(0, 212, 255, 0.2) !important;
  border-color: rgba(0, 212, 255, 0.6) !important;
}

.match-card.live {
  border-color: rgba(255, 23, 68, 0.7) !important;
  box-shadow: 0 8px 24px rgba(255, 23, 68, 0.25), 0 0 60px rgba(255, 23, 68, 0.1) !important;
  animation: slide-in-up 0.5s ease-out both, border-glow 2s ease-in-out infinite !important;
}

.match-team-left,
.match-team-right {
  flex: 1 !important;
  text-align: center !important;
}

.match-team-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin: 8px 0 !important;
  letter-spacing: 0.3px !important;
}

.match-badge {
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.2) 0%, rgba(0, 212, 255, 0.2) 100%) !important;
  border-radius: 50% !important;
  font-size: 24px !important;
  border: 2px solid var(--tertiary) !important;
  animation: float 3s ease-in-out infinite !important;
}

.match-score {
  font-size: 36px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin: 0 12px !important;
  animation: glow-text 2s ease-in-out infinite !important;
  letter-spacing: -1px !important;
}

.match-score.score-updated {
  animation: score-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.match-vs {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.match-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

.match-live {
  display: inline-block !important;
  background: linear-gradient(135deg, var(--danger) 0%, var(--secondary) 100%) !important;
  color: var(--text-primary) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  animation: pulse-glow-red 2s ease-in-out infinite !important;
  box-shadow: 0 0 15px var(--danger) !important;
}

.match-finished {
  display: inline-block !important;
  background: rgba(0, 212, 255, 0.15) !important;
  color: var(--tertiary) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border: 1px solid var(--tertiary) !important;
}

.match-halftime {
  display: inline-block !important;
  background: rgba(255, 171, 0, 0.15) !important;
  color: var(--warning) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border: 1px solid var(--warning) !important;
}

.kickoff {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
}

/* ============================================================================
   MATCH DETAIL VIEW
   ============================================================================ */

.match-detail-header {
  background: linear-gradient(135deg, #0046FF 0%, #1A56DB 50%, #0F1F3C 100%) !important;
  padding: 24px 16px !important;
  border-radius: 0 0 24px 24px !important;
  box-shadow: 0 8px 32px rgba(0, 70, 255, 0.3) !important;
  margin-bottom: 20px !important;
}

.match-detail-teams {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  gap: 16px !important;
}

.match-detail-team {
  flex: 1 !important;
  text-align: center !important;
}

.match-detail-badge {
  width: 72px !important;
  height: 72px !important;
  margin: 0 auto 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.3) 0%, rgba(0, 70, 255, 0.3) 100%) !important;
  border-radius: 50% !important;
  font-size: 36px !important;
  border: 3px solid var(--tertiary) !important;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.4) !important;
}

.match-detail-team-name {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin: 8px 0 !important;
  letter-spacing: 0.3px !important;
}

.match-detail-score {
  font-size: 48px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, var(--secondary) 0%, var(--warning) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin: 0 16px !important;
  animation: glow-text 2s ease-in-out infinite !important;
}

.match-detail-vs {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.match-detail-status {
  font-size: 14px !important;
  color: var(--tertiary) !important;
  font-weight: 700 !important;
  margin-top: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.match-detail-league {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-top: 8px !important;
}

.match-detail-info {
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.08) 0%, rgba(15, 22, 35, 0.95) 50%, rgba(0, 212, 255, 0.05) 100%) !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
}

.match-detail-info-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.1) !important;
}

.match-detail-info-row:last-child {
  border-bottom: none !important;
}

.match-detail-info-label {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

.md-full-header {
  animation: slide-in-down 0.5s ease-out !important;
}

/* ============================================================================
   STATS SECTION
   ============================================================================ */

.stat-row {
  display: grid !important;
  grid-template-columns: 120px 1fr 120px !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.1) !important;
  animation: slide-in-up 0.5s ease-out !important;
}

.stat-label {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 600 !important;
  text-align: center !important;
}

.stat-bar-container {
  display: flex !important;
  gap: 8px !important;
  height: 24px !important;
}

.stat-bar-home,
.stat-bar-away {
  height: 100% !important;
  border-radius: 12px !important;
  position: relative !important;
  overflow: hidden !important;
  min-width: 20px !important;
}

.stat-bar-home {
  background: linear-gradient(90deg, var(--primary) 0%, var(--tertiary) 100%) !important;
  box-shadow: 0 0 20px rgba(0, 70, 255, 0.4) !important;
}

.stat-bar-away {
  background: linear-gradient(90deg, var(--secondary) 0%, var(--warning) 100%) !important;
  box-shadow: 0 0 20px rgba(255, 107, 53, 0.4) !important;
}

.stat-bar-animated {
  animation: gradient-shift 3s ease-in-out infinite !important;
  background-size: 200% 200% !important;
}

.stat-value-home,
.stat-value-away {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  text-align: center !important;
}

.stat-percentile {
  background: rgba(0, 212, 255, 0.1) !important;
  border: 1px solid var(--tertiary) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  margin: 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.stat-percentile-bar {
  flex: 1 !important;
  height: 8px !important;
  background: rgba(0, 70, 255, 0.1) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.stat-percentile-fill {
  height: 100% !important;
  background: linear-gradient(90deg, var(--primary) 0%, var(--tertiary) 100%) !important;
  border-radius: 4px !important;
  animation: gradient-shift 3s ease-in-out infinite !important;
  background-size: 200% 200% !important;
}

/* ============================================================================
   PREDICTION BARS
   ============================================================================ */

.prediction-bars {
  display: flex !important;
  gap: 4px !important;
  height: 32px !important;
  margin: 16px 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.pred-bar-track {
  flex: 1 !important;
  display: flex !important;
  position: relative !important;
  overflow: hidden !important;
}

.pred-bar-segment {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  animation: gradient-shift 3s ease-in-out infinite !important;
  background-size: 200% 200% !important;
}

.pred-home {
  background: linear-gradient(90deg, #0046FF 0%, #1A56DB 100%) !important;
  flex: var(--pred-home, 1) !important;
}

.pred-draw {
  background: linear-gradient(90deg, var(--warning) 0%, #FFD700 100%) !important;
  flex: var(--pred-draw, 1) !important;
}

.pred-away {
  background: linear-gradient(90deg, var(--secondary) 0%, #FF4757 100%) !important;
  flex: var(--pred-away, 1) !important;
}

.pred-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  text-align: center !important;
  margin-top: 8px !important;
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.1) 0%, rgba(0, 212, 255, 0.1) 100%) !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  display: inline-block !important;
}

.confidence-badge {
  background: linear-gradient(135deg, var(--success) 0%, #0EE68F 100%) !important;
  color: #000 !important;
  padding: 8px 14px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  display: inline-block !important;
  box-shadow: 0 4px 15px rgba(0, 230, 118, 0.3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* ============================================================================
   INSIGHTS & AI CARDS
   ============================================================================ */

.insight-card {
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.12) 0%, rgba(15, 22, 35, 0.9) 50%, rgba(0, 212, 255, 0.08) 100%) !important;
  border: 2px solid transparent !important;
  border-image: linear-gradient(135deg, rgba(0, 70, 255, 0.4) 0%, rgba(0, 212, 255, 0.2) 100%) 1 !important;
  border-radius: 16px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 8px 24px rgba(0, 70, 255, 0.15) !important;
  animation: slide-in-up 0.5s ease-out !important;
}

.insight-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 36px rgba(0, 70, 255, 0.3), 0 0 30px rgba(0, 212, 255, 0.2) !important;
  border-image: linear-gradient(135deg, rgba(0, 212, 255, 0.6) 0%, rgba(0, 70, 255, 0.6) 100%) 1 !important;
}

.insight-card-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: 0.3px !important;
}

.insight-card-body {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.insight-card-badge {
  display: inline-block !important;
  background: linear-gradient(135deg, var(--tertiary) 0%, #00D4FF 100%) !important;
  color: #000 !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-top: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.insight-pill-glow {
  display: inline-block !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.2) 0%, rgba(0, 212, 255, 0.2) 100%) !important;
  border: 1px solid var(--tertiary) !important;
  color: var(--tertiary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.3) !important;
  animation: pulse-glow 2s ease-in-out infinite !important;
}

.ai-insight-card {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(15, 22, 35, 0.95) 50%, rgba(255, 171, 0, 0.08) 100%) !important;
  border: 2px solid transparent !important;
  border-image: linear-gradient(135deg, rgba(255, 107, 53, 0.4) 0%, rgba(255, 171, 0, 0.2) 100%) 1 !important;
  border-radius: 16px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
  backdrop-filter: blur(10px) !important;
}

.ai-insight-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--secondary) !important;
  margin: 0 0 8px 0 !important;
}

.ai-insight-body {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  line-height: 1.6 !important;
}

.ai-insight-type {
  display: inline-block !important;
  background: linear-gradient(135deg, var(--secondary) 0%, var(--warning) 100%) !important;
  color: #000 !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-top: 8px !important;
  text-transform: uppercase !important;
}

/* ============================================================================
   TIMELINE
   ============================================================================ */

.events-timeline {
  position: relative !important;
  padding: 20px 0 !important;
}

.timeline-event {
  display: flex !important;
  margin-bottom: 20px !important;
  animation: slide-in-left 0.5s ease-out !important;
}

.timeline-event-center {
  position: relative !important;
  width: 100% !important;
}

.timeline-event-center-card {
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.1) 0%, rgba(15, 22, 35, 0.95) 50%, rgba(0, 212, 255, 0.08) 100%) !important;
  border: 2px solid rgba(0, 212, 255, 0.3) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  position: relative !important;
  padding-left: 60px !important;
}

.timeline-emoji {
  font-size: 24px !important;
  position: absolute !important;
  left: 16px !important;
  top: 12px !important;
  animation: float 2s ease-in-out infinite !important;
}

.timeline-minute-badge {
  position: absolute !important;
  left: -70px !important;
  top: 12px !important;
  background: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%) !important;
  color: var(--text-primary) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 45px !important;
  text-align: center !important;
  box-shadow: 0 2px 10px rgba(0, 70, 255, 0.3) !important;
}

.timeline-player {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 4px !important;
}

.timeline-detail {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.timeline-ai-commentary {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.08) 0%, rgba(15, 22, 35, 0.95) 50%, rgba(255, 171, 0, 0.05) 100%) !important;
  border-left: 4px solid var(--secondary) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 12px 16px !important;
  margin: 12px 0 !important;
}

.timeline-ai-commentary-label {
  font-size: 11px !important;
  color: var(--secondary) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

.timeline-ai-commentary-text {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  line-height: 1.6 !important;
}

.event-timeline-bar {
  position: relative !important;
  height: 8px !important;
  background: rgba(0, 70, 255, 0.1) !important;
  border-radius: 4px !important;
  margin: 16px 0 !important;
  overflow: hidden !important;
}

.event-timeline-track {
  display: flex !important;
  height: 100% !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.event-timeline-marker {
  height: 100% !important;
  background: linear-gradient(90deg, var(--primary) 0%, var(--tertiary) 100%) !important;
  position: relative !important;
}

.event-timeline-progress {
  height: 100% !important;
  background: linear-gradient(90deg, var(--secondary) 0%, var(--warning) 100%) !important;
}

/* ============================================================================
   PLAYER CARDS
   ============================================================================ */

.player-card {
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.08) 0%, rgba(15, 22, 35, 0.9) 50%, rgba(0, 212, 255, 0.05) 100%) !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  margin: 8px 0 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  display: flex !important;
  gap: 12px !important;
}

.player-card:hover {
  transform: translateX(8px) !important;
  box-shadow: 0 8px 20px rgba(0, 70, 255, 0.25) !important;
  border-color: var(--tertiary) !important;
}

.player-card-img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

.player-card-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}

.player-card-team {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 4px 0 0 0 !important;
}

.player-chevron {
  margin-left: auto !important;
  color: var(--tertiary) !important;
}

.player-modal {
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.1) 0%, rgba(15, 22, 35, 0.98) 50%, rgba(0, 212, 255, 0.05) 100%) !important;
  border: 2px solid rgba(0, 212, 255, 0.3) !important;
  border-radius: 24px !important;
  padding: 20px !important;
  animation: slide-in-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.player-modal-header {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin-bottom: 12px !important;
}

.player-modal-photo {
  width: 80px !important;
  height: 80px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 36px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 8px 20px rgba(0, 70, 255, 0.3) !important;
}

.player-stats-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.player-stat-cell {
  background: rgba(0, 212, 255, 0.08) !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  text-align: center !important;
}

.player-stat-label {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

.player-stat-value {
  font-size: 16px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ============================================================================
   BUTTONS & INTERACTIONS
   ============================================================================ */

button {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

button:hover {
  transform: translateY(-2px) !important;
}

button:active {
  animation: ripple 0.6s ease-out !important;
}

.refresh-btn {
  background: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%) !important;
  color: var(--text-primary) !important;
  border: none !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 15px rgba(0, 70, 255, 0.3) !important;
  font-size: 13px !important;
}

.refresh-btn:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 30px rgba(0, 70, 255, 0.5) !important;
}

.share-btn {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--warning) 100%) !important;
  color: var(--text-primary) !important;
  border: none !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-size: 13px !important;
}

/* ============================================================================
   MODALS & OVERLAYS
   ============================================================================ */

.modal-overlay {
  background: rgba(8, 13, 26, 0.8) !important;
  backdrop-filter: blur(8px) !important;
}

.modal {
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.1) 0%, rgba(15, 22, 35, 0.98) 50%, rgba(0, 212, 255, 0.05) 100%) !important;
  border: 2px solid rgba(0, 212, 255, 0.3) !important;
  border-radius: 24px !important;
  animation: slide-in-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.modal-header {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.5px !important;
}

.modal-tabs {
  display: flex !important;
  gap: 0 !important;
  border-bottom: 2px solid rgba(0, 212, 255, 0.2) !important;
  margin-bottom: 16px !important;
  overflow-x: auto !important;
}

.modal-tab {
  padding: 12px 16px !important;
  border: none !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.modal-tab:hover {
  color: var(--tertiary) !important;
}

.modal-tab.active {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}

.modal-tab.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--primary) 0%, var(--tertiary) 100%) !important;
  animation: slide-in-right 0.3s ease-out !important;
}

.modal-tab-content {
  animation: fade-in 0.3s ease-out !important;
}

/* ============================================================================
   FILTERS & TABS
   ============================================================================ */

.feed-filter-bar {
  display: flex !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  overflow-x: auto !important;
  margin-bottom: 12px !important;
  background: linear-gradient(90deg, rgba(0, 70, 255, 0.1) 0%, rgba(15, 22, 35, 0.8) 50%, rgba(0, 212, 255, 0.1) 100%) !important;
}

.feed-filter-chip,
.filter-pill {
  padding: 8px 16px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(0, 212, 255, 0.3) !important;
  background: rgba(0, 70, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.feed-filter-chip:hover,
.filter-pill:hover {
  border-color: var(--tertiary) !important;
  color: var(--tertiary) !important;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.2) !important;
}

.feed-filter-chip.active,
.filter-pill.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%) !important;
  border-color: var(--tertiary) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.4) !important;
  font-weight: 700 !important;
}

/* ============================================================================
   LOADING STATES
   ============================================================================ */

.skeleton {
  background: linear-gradient(90deg,
    rgba(0, 70, 255, 0.1) 0%,
    rgba(0, 212, 255, 0.2) 50%,
    rgba(0, 70, 255, 0.1) 100%) !important;
  background-size: 200% 100% !important;
  animation: shimmer 2s infinite !important;
  border-radius: 8px !important;
}

.skeleton-card {
  height: 100px !important;
  margin-bottom: 12px !important;
  border-radius: 16px !important;
}

.skeleton-circle {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
}

.skeleton-text {
  height: 16px !important;
  margin-bottom: 8px !important;
}

.skeleton-text-sm {
  height: 12px !important;
  width: 70% !important;
}

.skeleton-row {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.spinner {
  width: 40px !important;
  height: 40px !important;
  border: 4px solid rgba(0, 70, 255, 0.2) !important;
  border-top: 4px solid var(--primary) !important;
  border-radius: 50% !important;
  animation: spin 1s linear infinite !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loaded {
  animation: slide-in-up 0.5s ease-out !important;
}

/* ============================================================================
   BADGES & STATUS
   ============================================================================ */

.compact-badge {
  background: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%) !important;
  color: var(--text-primary) !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 70, 255, 0.3) !important;
}

.upcoming-star-badge {
  background: linear-gradient(135deg, var(--warning) 0%, var(--secondary) 100%) !important;
  color: #000 !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  display: inline-block !important;
  box-shadow: 0 4px 15px rgba(255, 171, 0, 0.3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.suspension-alert {
  background: linear-gradient(135deg, rgba(255, 23, 68, 0.15) 0%, rgba(255, 107, 53, 0.1) 100%) !important;
  border-left: 4px solid var(--danger) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 12px 16px !important;
  margin: 12px 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.suspension-alert-icon {
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

.suspension-alert-text {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  line-height: 1.5 !important;
}

/* ============================================================================
   LEAGUE & STANDINGS
   ============================================================================ */

.league-section {
  margin-bottom: 20px !important;
  animation: slide-in-up 0.5s ease-out !important;
}

.league-header {
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.08) 0%, rgba(0, 212, 255, 0.08) 100%) !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  margin-bottom: 12px !important;
}

.league-logo {
  font-size: 24px !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.league-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

/* ============================================================================
   ODDS & VALUES
   ============================================================================ */

.odds-card {
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.08) 0%, rgba(15, 22, 35, 0.9) 50%, rgba(0, 212, 255, 0.05) 100%) !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}

.odds-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.1) !important;
}

.odds-row:last-child {
  border-bottom: none !important;
}

.odds-label {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 600 !important;
}

.odds-value {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--tertiary) !important;
  background: rgba(0, 212, 255, 0.1) !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid var(--tertiary) !important;
}

.odds-bookmaker {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
}

/* ============================================================================
   LAYOUT & CONTENT
   ============================================================================ */

.content {
  padding: 16px !important;
  padding-bottom: 80px !important;
}

.context-section {
  margin-bottom: 20px !important;
}

.context-section-header {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, var(--primary) 0%, var(--tertiary) 100%) 1 !important;
}

/* ============================================================================
   LIVE & ANIMATIONS
   ============================================================================ */

.live-pulse-ring {
  position: absolute !important;
  border: 2px solid var(--danger) !important;
  border-radius: 50% !important;
  animation: pulse-glow-red 1.5s ease-out infinite !important;
}

.live-pulse-ring-2 {
  animation: pulse-glow-red 1.5s ease-out 0.5s infinite !important;
}

.live-toast {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  background: linear-gradient(135deg, var(--danger) 0%, var(--secondary) 100%) !important;
  color: var(--text-primary) !important;
  padding: 16px 24px !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(255, 23, 68, 0.4) !important;
  animation: slide-in-up 0.4s ease-out, pulse-glow-red 2s ease-in-out infinite !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  z-index: 999 !important;
}

/* ============================================================================
   EMPTY & ERROR STATES
   ============================================================================ */

.empty-state,
.error-state {
  text-align: center !important;
  padding: 40px 20px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.08) 0%, rgba(15, 22, 35, 0.8) 50%, rgba(0, 212, 255, 0.05) 100%) !important;
  border: 2px dashed rgba(0, 212, 255, 0.3) !important;
}

.empty-state-icon,
.error-state-icon {
  font-size: 48px !important;
  margin-bottom: 16px !important;
  animation: float 3s ease-in-out infinite !important;
}

.empty-state-title,
.error-state-msg {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin-bottom: 8px !important;
}

.empty-state-text {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 16px !important;
}

.error-state-retry {
  background: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%) !important;
  color: var(--text-primary) !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-size: 13px !important;
  box-shadow: 0 4px 15px rgba(0, 70, 255, 0.3) !important;
}

/* ============================================================================
   FORM ELEMENTS
   ============================================================================ */

input,
textarea,
select {
  background: rgba(0, 70, 255, 0.05) !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
  padding: 12px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  transition: all 0.3s ease !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--tertiary) !important;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.3) !important;
  outline: none !important;
}

input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* ============================================================================
   UTILITY & MISC
   ============================================================================ */

.weather-widget {
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.1) 0%, rgba(15, 22, 35, 0.95) 50%, rgba(0, 212, 255, 0.05) 100%) !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 12px 0 !important;
}

.weather-icon {
  font-size: 28px !important;
}

.weather-temp {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.weather-desc {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.week-selector {
  display: flex !important;
  gap: 4px !important;
  margin: 16px 0 !important;
  padding: 12px !important;
  background: rgba(0, 70, 255, 0.08) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
}

.week-day {
  flex: 1 !important;
  padding: 8px !important;
  text-align: center !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  background: rgba(0, 70, 255, 0.05) !important;
  border: 1px solid transparent !important;
  transition: all 0.3s ease !important;
}

.week-day:hover {
  border-color: var(--tertiary) !important;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.2) !important;
}

.week-day.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%) !important;
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  border-color: var(--tertiary) !important;
}

.week-day-label {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.week-day-num {
  font-size: 13px !important;
  font-weight: 700 !important;
  display: block !important;
}

/* ============================================================================
   BACK BUTTONS
   ============================================================================ */

.floating-back-btn,
.compact-back,
.modal-back-btn {
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.2) 0%, rgba(0, 212, 255, 0.15) 100%) !important;
  border: 1px solid var(--tertiary) !important;
  color: var(--tertiary) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 18px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 10px rgba(0, 212, 255, 0.1) !important;
}

.floating-back-btn:hover,
.compact-back:hover,
.modal-back-btn:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3) !important;
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.3) 0%, rgba(0, 212, 255, 0.25) 100%) !important;
}

.floating-back-btn {
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  z-index: 100 !important;
}

/* ============================================================================
   PRINT MEDIA
   ============================================================================ */

@media print {
  body {
    background: white !important;
    color: black !important;
  }

  * {
    box-shadow: none !important;
    animation: none !important;
  }
}

/* ============================================================================
   ADDITIONAL STATE CLASSES
   ============================================================================ */

.active {
  opacity: 1 !important;
}

.on {
  background: linear-gradient(135deg, var(--success) 0%, #0EE68F 100%) !important;
  color: #000 !important;
}

.off {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.hot {
  color: var(--secondary) !important;
  font-weight: 700 !important;
}

.cold {
  color: var(--primary) !important;
  font-weight: 700 !important;
}

.up {
  color: var(--success) !important;
  font-weight: 700 !important;
}

.down {
  color: var(--danger) !important;
  font-weight: 700 !important;
}

.good {
  color: var(--success) !important;
  background: rgba(0, 230, 118, 0.1) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}

.elite {
  color: var(--secondary) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.yellow {
  color: var(--warning) !important;
  font-weight: 700 !important;
}

.red {
  color: var(--danger) !important;
  font-weight: 700 !important;
}

.goal {
  color: var(--success) !important;
  font-weight: 700 !important;
  animation: score-pop 0.6s ease-out !important;
}

.sub {
  color: var(--tertiary) !important;
}

.var {
  color: var(--warning) !important;
}

.top3 {
  background: linear-gradient(135deg, var(--warning) 0%, var(--secondary) 100%) !important;
  color: #000 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  font-size: 11px !important;
}

/* ============================================================================
   FADE-IN ANIMATION
   ============================================================================ */

@keyframes fade-in {
  from {
    opacity: 0 !important;
  }
  to {
    opacity: 1 !important;
  }
}

/* ============================================================================
   END OF STYLESHEET
   ============================================================================ */