/* ===============================
   Football Predictions - Dark Blue Glow Edition (Enhanced Readability)
   =============================== */

:root{
  --bg-1: #03040a;
  --bg-2: #071026;
  --card-bg: rgba(12,22,38,0.7);
  --glass: rgba(255,255,255,0.03);
  --accent: #00b5ff;
  --accent-2: #0070f3;
  --muted: #b7c7e0; /* brighter for visibility */
  --text-main: #eaf4ff;
  --neon: rgba(0,181,255,0.15);
  --card-radius: 14px;
}

/* Base */
*{box-sizing:border-box;}
body.dark-bg{
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  color: var(--text-main);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
}

/* NAV */
.topbar{
  background: linear-gradient(90deg, rgba(2,10,25,0.95), rgba(5,15,35,0.95));
  border-bottom: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 4px 25px rgba(0,0,0,0.5);
}
.logo-dot{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  padding:6px 8px;
  border-radius:8px;
  color:#fff;
  font-weight:700;
}
.app-title{ font-weight:700; color:#dff6ff; letter-spacing:0.3px }

/* PAGE TITLE */
.page-title{
  font-size:1.6rem;
  font-weight:700;
  color:#f0f8ff;
  text-shadow:0 0 6px rgba(0,181,255,0.3);
}

/* Neon Match Card */
.neon-card{
  background: var(--card-bg);
  border: 1px solid rgba(0,181,255,0.08);
  border-radius: var(--card-radius);
  box-shadow: 0 8px 25px rgba(0,0,0,0.6), 0 0 20px rgba(0,181,255,0.05) inset;
  padding: 14px;
  transition: transform .3s cubic-bezier(.2,.9,.3,1), box-shadow .3s ease;
}
.neon-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.7), 0 0 40px rgba(0,181,255,0.12);
}

/* Typography */
h5, h6, .fw-bold { color: var(--text-main); }
.small, .text-muted { color: var(--muted) !important; }
.label-small{
  font-size:0.85rem;
  font-weight:600;
  color: #c9dbf9;
}

/* Progress Bars */
.tiny-prog{
  height:10px;
  background: rgba(255,255,255,0.06);
  border-radius:8px;
  overflow:hidden;
}
.progress-bar{
  height:10px;
  transition: width 1s ease;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow: 0 6px 20px rgba(0,181,255,0.12);
}
.small.text-muted + .progress + .small{
  color:#eaf4ff !important;
  font-weight:600;
}

/* Modal (Premium Picks) */
.premium-modal{
  background: linear-gradient(180deg, rgba(4,10,20,0.97), rgba(2,5,12,0.97));
  color: #f0f8ff;
  border-radius: 14px;
  border: 1px solid rgba(0,181,255,0.1);
  box-shadow: 0 0 30px rgba(0,181,255,0.08);
}
.dark-input{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: #f2f9ff;
  font-size:1rem;
  border-radius:10px;
}
.dark-input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(0,181,255,0.4);
}

/* Premium Picks List */
.pick-item{
  background: rgba(255,255,255,0.02);
  border-radius:10px;
  margin-bottom:8px;
  padding:10px 14px;
}
.pick-item .fw-bold{ color:#eaf4ff; }
.odds-badge{
  background: linear-gradient(135deg, rgba(0,181,255,0.15), rgba(0,112,255,0.12));
  color: #dff6ff;
  padding:8px 12px;
  border-radius:10px;
  font-weight:700;
  box-shadow: 0 6px 20px rgba(0,181,255,0.08);
}

/* Buttons */
.btn-outline-light{
  color:#eaf4ff;
  border-color: rgba(255,255,255,0.08);
  font-weight:600;
}
.btn-outline-light:hover{
  background: rgba(255,255,255,0.04);
  border-color: rgba(0,181,255,0.2);
}
.btn-primary{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  border:none;
  font-weight:600;
  color:white;
  box-shadow: 0 8px 24px rgba(0,181,255,0.15);
}

/* Text & List improvements */
ul li{ color: #eaf4ff; margin:2px 0; }
.score-item, .score-prob{ color:#eaf4ff !important; }

/* Footer */
footer{ color: var(--muted); font-size:0.85rem; opacity:0.8; }

/* Responsive */
@media (max-width:768px){
  .page-title{ font-size:1.4rem; }
  .label-small{ font-size:0.8rem; }
  .neon-card{ padding:12px; }
}