body {
      background: linear-gradient(135deg, #071f4a, #0b2a5e, #0d1b2a);
      color: white;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      padding-top: 80px; /* Space for sticky top-bar */
      min-height: 100%;
      overflow-x: hidden;
	  
    }
	
	.main-content {
  flex: 1;
  min-width: 0;
}
	
    .logo-img {
    max-height: 70px;
	
    height: auto;
    width: auto;
    transition: all 0.3s ease;
   }

/* Responsive adjustments */
@media (max-width: 768px) {
  .logo-img {
    max-height: 60px;
  }
}

    /* Boxed layout container */
    .boxed-container {
      max-width: 1450px;
      margin: auto;
      background: rgba(13, 27, 42, 0.85);
      border-radius: 15px;
      padding: 10px 15px 20px 15px;
      transition: background 0.3s ease-in-out;
    }
    
    /* Sticky Boxed Top Bar */
    .top-bar-wrapper {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1050;
      background-color: transparent;
      border-bottom: none;
     
      display: flex;
      justify-content: center; /* Center the boxed top bar */
      padding: 0 15px; /* Side padding */
    }
    .top-bar {
      max-width: 1450px;
      width: 100%;
      background-color: rgba(13, 27, 42, 0.95);
      border-radius: 0 0 12px 12px;
      color: #a9b2c9;
      font-size: 18px;
      padding: 10px 25px;
	  height:60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 500;
      /* No box-shadow or shadow here */
    }

    .top-bar .social-icons i {
      color: #a9b2c9;
      margin-left: 15px;
      cursor: pointer;
      transition: color 0.25s ease;
    }
    .top-bar .social-icons i:hover {
      color: #40c4ff;
    }
    .top-bar .auth-buttons a {
      color: #40c4ff;
      text-decoration: none;
      margin-left: 20px;
      font-weight: 600;
      transition: color 0.3s ease;
    }
    .top-bar .auth-buttons a:hover {
      color: #82d4ff;
      text-decoration: underline;
    }

    /* Navbar styling */
    .navbar {
      background: linear-gradient(90deg, #0d1b2a, #162f4a);
      border-radius: 12px;
      padding: 10px 25px;
      margin-top: 20px;
      margin-bottom: 35px;
      transition: background 0.3s ease;
    }
    .navbar:hover {
      background: linear-gradient(90deg, #0a1a2f, #194a7b);
    }
    .navbar-brand {
      color: #40c4ff !important;
      font-size: 1.8rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      
    }
    .navbar-toggler {
      border: none;
      outline: none;
      box-shadow: none;
    }
    .navbar-toggler-icon {
      filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(120%) contrast(83%);
    }
    .nav-link {
      color: #c7d2f1 !important;
      font-weight: 600;
      margin: 0 12px;
      padding: 8px 0;
      position: relative;
      transition: color 0.3s ease;
    }
	.nav-link {
      color: #c7d2f1 !important;
      font-weight: 600;
      margin: 0 12px;
      padding: 8px 0;
      position: relative;
      transition: color 0.3s ease;
    }
    .nav-link:hover, .nav-link:focus {
      color: #40c4ff !important;
    }

    /* Language selector styling */
    .language-select {
      background-color: rgba(255,255,255,0.1);
      border: none;
      color: #d0d9ff;
      font-weight: 600;
      width: 100px;
      border-radius: 8px;
      transition: background-color 0.3s ease;
    }
    .language-select:hover, .language-select:focus {
      background-color: rgba(64,196,255,0.15);
      color: #40c4ff;
      outline: none;
    }

    /* Sidebar styling */
    .sidebar {
      background: linear-gradient(145deg, #132c58, #0d1f38);
      border-radius: 5px;
      padding: 15px 10px;
      min-height: 100vh;
      color: #d0d9ff;
      font-weight: 600;
      transition: box-shadow 0.3s ease;
      overflow-y: auto;
	  width: 300px;
  min-width: 300px;
  max-width: 300px;
  flex: 0 0 300px; /* VERY IMPORTANT */
    }
    .sidebar h5 {
      border-bottom: 2px solid #40c4ff;
      padding-bottom: 12px;
      margin-bottom: 20px;
      font-size: 1.3rem;
      text-shadow: 0 0 6px #40c4ff;
    }
    .sidebar p {
      font-weight: 400;
      color: #abb9e3;
    }
    @media (max-width: 767.98px) {
      .sidebar {
        display: none;
      }
    }

    /* Scrollbar styling for sidebars */
    .sidebar::-webkit-scrollbar {
      width: 8px;
    }
    .sidebar::-webkit-scrollbar-track {
      background: transparent;
    }
    .sidebar::-webkit-scrollbar-thumb {
      background: #40c4ff;
      border-radius: 10px;
    }

    /* Prediction Cards */
    .prediction-card {
	background: linear-gradient(135deg, #1c2d50, #0f1d35);
	border-radius: 10px;
	margin-bottom: 5px;
	border: 1px solid #297fc6;
	color: #c9def8;
	transition: transform 0.3s ease;
	cursor: pointer;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 20px;	  
    }
    .prediction-card:hover {
      transform: translateY(-6px);
      border-color: #40c4ff;
    }
    .prediction-card h5 {
      font-weight: 700;
      font-size: 1.3rem;
      margin-bottom: 10px;
      color: #80bfff;
      text-shadow: 0 0 6px #40c4ff;
    }
    .prediction-card p {
      font-weight: 500;
      font-size: 1.1rem;
      color: #d1e6ff;
      letter-spacing: 0.03em;
    }

    /* Footer styling */
    .footer {
      background: #0d1f42;
      border-radius: 15px;
      padding: 18px 20px;
      color: #abb9e3;
      text-align: center;
      margin-top: 50px;
      font-weight: 500;
      user-select: none;
    }

    /* Mobile Top Bar */
	
	/* Hide Language Select on Mobile */
	
	@media (max-width: 767px) {
  .top-bar-wrapper {
    padding:0;
  }

}
   
      #lang-select {
        display: none !important;
      }
   
    .top-bar-mobile {
	background: linear-gradient(90deg, #0a1a2f, #194a7b);
	color: #d0d9ff !important;
	font-weight: 600;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
    }
    .top-bar-mobile i {
      color: #40c4ff;
      font-size: 1.2rem;
    }
    .top-bar-mobile .btn-outline-light {
      color: #40c4ff;
      border-color: #40c4ff;
      font-weight: 700;
      transition: background-color 0.3s ease;
    }
    .top-bar-mobile .btn-outline-light:hover {
      background-color: #0c2a57;
      border-color: #0c2a57;
      color: #a5d7ff;
    }

    /* Mobile Navbar Offcanvas Menu */
    .offcanvas-header {
      background: linear-gradient(135deg, #0a1a2f, #194a7b);
      color: #d0d9ff;
      border-bottom: 1px solid #40c4ff;
    }
    .offcanvas-body {
      background: linear-gradient(135deg, #0d1b2a, #162f4a);
      color: #cbd9f1;
      font-weight: 600;
	  top: 0;
    }
    .offcanvas-body a.btn-primary {
      background-color: #40c4ff;
      border: none;
      font-weight: 700;
      margin-bottom: 12px;
      transition: background-color 0.3s ease;
    }
    .offcanvas-body a.btn-primary:hover {
      background-color: #82d4ff;
    }
    .offcanvas-body a.btn-outline-light {
      border-color: #40c4ff;
      color: #40c4ff;
      font-weight: 600;
    }
    .offcanvas-body a.btn-outline-light:hover {
      background-color: #0c2a57;
      border-color: #0c2a57;
      color: #a5d7ff;
    }

    /* Mobile Offcanvas Menu */
    .offcanvas-title {
      font-weight: 700;
      font-size: 1.4rem;
      letter-spacing: 0.05em;
      color: #40c4ff;
    }
    .offcanvas-body .nav-link {
      color: #d0d9ff !important;
      font-weight: 600;
      margin-bottom: 15px;
      padding: 8px 0;
      font-size: 1.1rem;
      border-bottom: 1px solid transparent;
      transition: border-color 0.25s ease;
    }
    .offcanvas-body .nav-link:hover {
      border-bottom: 1px solid #40c4ff;
      color: #82d4ff !important;
    }
.responsible-warning {
  text-align: center;
  padding: 15px 10px;
  background: linear-gradient(90deg, #0a1730, #0d2148);
  border-radius: 12px;
  color: #ccc;
  font-size: 0.95rem;
  max-width: 100%;
  margin: 20px auto;
}

.age-badge {
	display: inline-block;
	color: white;
	font-weight: bold;
	font-size: 0.9rem;
	width: 50px;
	height: 50px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	margin: 0 auto 10px;
	box-shadow: 0 0 8px rgba(229, 57, 53, 0.4);
	border: medium solid #F00;
}


/* ============================================================
   SureSoccerTips — dark blue theme (screenshot redesign)
   ============================================================ */
body {
  background: linear-gradient(135deg, #030815, #071426 45%, #0a1a33);
  color: #e6edff;
  padding-top: 70px;
}

/* ---------- Unified header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  background: linear-gradient(90deg, #0a1730, #0d2148);
  border: 1px solid #16294d;
  border-radius: 14px;
  padding: 10px 20px;
  margin-top: 15px;
  margin-bottom: 18px;
}
.brand-block {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
}
.brand-block .logo-img { max-height: 52px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand-accent { color: #2f7bff; }
.brand-tagline {
  font-size: 0.68rem;
  color: #8fa3c8;
  white-space: nowrap;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.header-nav-row {
  background: #0a1730;
  border: 1px solid #16294d;
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  flex-wrap: nowrap;
}
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  color: #c7d2f1 !important;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-pill i { font-size: 0.8rem; }
.nav-pill:hover { background: rgba(255, 255, 255, 0.07); color: #ffffff !important; }
.nav-pill.active {
  background: linear-gradient(90deg, #1c6ef2, #2f7bff);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(28, 110, 242, 0.35);
}
.header-right { display: flex; align-items: center; gap: 12px; }
.header-social { display: flex; align-items: center; gap: 8px; }
.header-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #1c2f52;
  color: #c7d2f1;
  font-size: 0.8rem;
  transition: all 0.2s ease;
}
.header-icon:hover { background: #1c6ef2; border-color: #1c6ef2; color: #fff; }
.btn-signin {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 8px;
  background: linear-gradient(90deg, #1c6ef2, #3b82f6);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(28, 110, 242, 0.35);
  transition: filter 0.2s ease;
  white-space: nowrap;
}
.btn-signin:hover { filter: brightness(1.12); }
.site-header-mobile { padding: 8px 14px; }
.site-header-mobile .logo-img { max-height: 42px; }
.site-header-mobile .brand-name { font-size: 1.05rem; }
.site-header-mobile .navbar-toggler { border: 1px solid #1c2f52; border-radius: 8px; padding: 6px 10px; }

/* ---------- Sidebars ---------- */
.sidebar-left {
  flex: 0 0 250px;
  min-width: 250px;
  max-width: 250px;
  width: 250px;
  margin-right: 16px;
}
.sidebar-right {
  flex: 0 0 265px;
  min-width: 265px;
  max-width: 265px;
  width: 265px;
  margin-left: 16px;
  min-height: auto;
}
.sidebar {
  background: linear-gradient(160deg, #0b1a36, #081226);
  border: 1px solid #16294d;
  border-radius: 12px;
}

/* ---------- Leagues sidebar ---------- */
.leagues-box { display: flex; flex-direction: column; }
.leagues-title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffffff;
  padding: 4px 6px 12px;
  margin: 0;
  border-bottom: 1px solid #16294d;
}
.leagues-title i { color: #2f7bff; }
.leagues-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0a1730;
  border: 1px solid #1c2f52;
  border-radius: 8px;
  padding: 7px 12px;
  margin: 12px 0;
}
.leagues-search i { color: #5b6f96; font-size: 0.8rem; }
.leagues-search input {
  background: transparent;
  border: none;
  outline: none;
  color: #e6edff;
  font-size: 0.85rem;
  width: 100%;
}
.leagues-search input::placeholder { color: #5b6f96; }
.leagues-list { display: flex; flex-direction: column; gap: 2px; }
.league-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #c7d2f1;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}
.league-link:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; }
.league-link.active {
  background: linear-gradient(90deg, #1c6ef2, #2f7bff);
  color: #ffffff;
}
.league-link-logo {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.league-link-logo img { max-width: 22px; max-height: 22px; object-fit: contain; }
.league-link-logo.all-leagues { color: #2f7bff; }
.league-link.active .league-link-logo.all-leagues { color: #ffffff; }
.league-link-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.league-link-count { color: #7d90b8; font-size: 0.78rem; font-weight: 700; }
.league-link.active .league-link-count { color: #dbe7ff; }
.other-leagues { margin-top: 8px; border-top: 1px solid #16294d; border-radius: 0 0 8px 8px; padding-top: 12px; }

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #0a1730;
  border: 1px solid #16294d;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.filter-field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0d1f42;
  border: 1px solid #1c2f52;
  border-radius: 8px;
  padding: 7px 12px;
  flex: 1 1 150px;
  min-width: 140px;
}
.filter-field > i { color: #5b6f96; font-size: 0.8rem; }
.filter-field input,
.filter-field select {
  background: transparent;
  border: none;
  outline: none;
  color: #e6edff;
  font-size: 0.86rem;
  width: 100%;
  color-scheme: dark;
}
.filter-field select option { background: #0d1f42; color: #e6edff; }
.filter-field input::placeholder { color: #5b6f96; }
.btn-filter {
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  background: #14295c;
  color: #dbe7ff;
  font-weight: 700;
  font-size: 0.86rem;
  transition: background 0.2s ease;
  white-space: nowrap;
}
.btn-filter:hover { background: #1c3a7d; }
.btn-stats {
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  background: linear-gradient(90deg, #1c6ef2, #3b82f6);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(28, 110, 242, 0.35);
  transition: filter 0.2s ease;
  white-space: nowrap;
}
.btn-stats:hover { filter: brightness(1.12); }

/* ---------- Match tabs ---------- */
.match-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.match-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #0a1730;
  border: 1px solid #1c2f52;
  color: #c7d2f1;
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none !important;
  transition: all 0.15s ease;
}
.match-tab:hover { border-color: #2f7bff; color: #ffffff; }
.match-tab.active {
  background: linear-gradient(90deg, #1c6ef2, #2f7bff);
  border-color: transparent;
  color: #ffffff;
}
.match-tab-count {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 0.74rem;
}

/* ---------- Tips grid + cards ---------- */
.tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tip-card {
  display: flex;
  flex-direction: column;
  background: #0a1730;
  border: 1px solid #1c2f52;
  border-radius: 12px;
  padding: 13px 15px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.tip-card:hover { transform: translateY(-4px); border-color: #2f7bff; }
.tip-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 9px;
  margin-bottom: 12px;
  border-bottom: 1px solid #142343;
}
.tip-league {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #7d90b8;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tip-flag { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; }
.tip-league-logo { max-height: 20px; max-width: 20px; object-fit: contain; }
.tip-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.tip-team { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; min-width: 0; }
.tip-team-logo { width: 42px; height: 42px; object-fit: contain; }
.tip-team-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e6edff;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tip-vs { font-weight: 800; color: #5b6f96; font-size: 0.85rem; }
.tip-info { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.tip-info-line { font-size: 0.79rem; color: #c7d2f1; }
.tip-info-line span { color: #7d90b8; }
.tip-info-line strong { color: #ffffff; }
.tip-odds { color: #9fb0d4; }
.tip-card-foot { margin-top: auto; display: flex; justify-content: flex-end; }
.btn-view-match {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 8px;
  border: 1px solid #2f7bff;
  color: #5ea0ff !important;
  font-weight: 700;
  font-size: 0.8rem;
  text-decoration: none !important;
  transition: all 0.15s ease;
}
.btn-view-match:hover { background: #1c6ef2; border-color: #1c6ef2; color: #ffffff !important; }

/* ---------- Pagination ---------- */
.tips-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 22px; flex-wrap: wrap; }
.page-btn {
  min-width: 34px;
  text-align: center;
  padding: 7px 12px;
  border-radius: 8px;
  background: #0a1730;
  border: 1px solid #1c2f52;
  color: #c7d2f1;
  font-weight: 700;
  font-size: 0.84rem;
  text-decoration: none !important;
}
.page-btn:hover { border-color: #2f7bff; color: #ffffff; }
.page-btn.active { background: linear-gradient(90deg, #1c6ef2, #2f7bff); color: #ffffff; border-color: transparent; }
.page-btn.disabled { opacity: 0.4; pointer-events: none; }
.page-dots { color: #5b6f96; }

/* ---------- Empty state ---------- */
.tips-empty {
  text-align: center;
  padding: 50px 20px;
  background: #0a1730;
  border: 1px solid #16294d;
  border-radius: 12px;
  color: #7d90b8;
}
.tips-empty i { font-size: 2.4rem; margin-bottom: 12px; color: #2f7bff; }
.tips-empty p { margin: 0; font-weight: 600; }

/* ---------- Right sidebar promos ---------- */
.promo-panel {
  background: linear-gradient(160deg, #0e2a63, #071a3d);
  border: 1px solid #1c2f52;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
}
.promo-img { width: 100%; max-height: 120px; object-fit: cover; display: block; }
.promo-body { padding: 14px 16px 18px; }
.promo-headline {
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1.05;
  color: #ffffff;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}
.promo-headline span { color: #facc15; }
.promo-points {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.promo-points li { color: #dbe7ff; font-size: 0.86rem; font-weight: 600; }
.promo-points i { color: #22c55e; margin-right: 7px; }
.btn-promo {
  display: block;
  padding: 11px 16px;
  border-radius: 9px;
  background: linear-gradient(90deg, #f59e0b, #facc15);
  color: #1a2332 !important;
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  transition: filter 0.2s ease;
}
.btn-promo:hover { filter: brightness(1.08); }
.promo-stadium {
  position: relative;
  margin-top: 16px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #1c2f52;
}
.promo-stadium img { width: 100%; display: block; max-height: 150px; object-fit: cover; }
.promo-stadium-btn {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 8px 18px;
  border-radius: 8px;
  background: rgba(10, 23, 48, 0.85);
  border: 1px solid #2f7bff;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.8rem;
  text-decoration: none !important;
  white-space: nowrap;
}
.promo-stadium-btn:hover { background: #1c6ef2; }

/* ---------- Footer ---------- */
.footer-links a { color: #40c4ff; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .tips-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
  .sidebar-left { flex: 0 0 220px; min-width: 220px; max-width: 220px; width: 220px; margin-right: 12px; }
  .sidebar-right { flex: 0 0 240px; min-width: 240px; max-width: 240px; width: 240px; margin-left: 12px; }
}
@media (max-width: 767.98px) {
  .tips-grid { grid-template-columns: 1fr; }
  .filter-field { flex: 1 1 100%; }
  .btn-stats, .btn-filter { flex: 1 1 auto; text-align: center; }
  .match-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
}

/* ---------- Header/filter refinements ---------- */
.filter-field { flex: 0 1 185px; }
.btn-stats { margin-left: auto; }

/* ---------- One-row filter bar ---------- */
.filter-bar { gap: 8px; padding: 8px 10px; }
.filter-field { flex: 0 1 145px; min-width: 120px; padding: 6px 10px; }
.btn-filter { padding: 8px 14px; }
.btn-stats { padding: 8px 14px; }

/* Stats button lives on the tabs row */
.match-tabs .btn-stats { margin-left: auto; }

/* ---------- Grid overlap fix ---------- */
.tips-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tip-card, .tip-team, .tip-teams { min-width: 0; }
.tip-team-name { white-space: normal; }
.tip-team-name { white-space: nowrap; }

/* ---------- Robust 3-column layout ---------- */
/* flex:1 1 0 + min-width:0 lets the centre column absorb any viewport width
   instead of wrapping/overlapping the fixed sidebars near ~1240px */
.main-col { flex: 1 1 0; min-width: 0; width: auto; max-width: none; }

/* Compact header so it stays on one row on smaller desktop windows */
@media (max-width: 1399.98px) {
  .site-header { gap: 10px; padding: 8px 14px; }
  .nav-pill { padding: 7px 10px; font-size: 0.84rem; }
  .brand-block .logo-img { max-height: 46px; }
  .header-icon { width: 28px; height: 28px; }
  .btn-signin { padding: 7px 14px; }
}

/* Re-assert responsive grid AFTER the minmax fix (later rules win) */
@media (max-width: 1199.98px) {
  .tips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .tips-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Match detail page (dark theme)
   ============================================================ */
.match-page { display: flex; flex-direction: column; gap: 14px; }
.btn-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 8px;
  background: #0a1730;
  border: 1px solid #1c2f52;
  color: #c7d2f1 !important;
  font-weight: 700;
  font-size: 0.84rem;
  text-decoration: none !important;
  transition: all 0.15s ease;
}
.btn-back:hover { border-color: #2f7bff; color: #ffffff !important; }

/* Hero card */
.match-hero {
  background: #0a1730;
  border: 1px solid #16294d;
  border-radius: 12px;
  padding: 14px 18px;
}
.match-hero-league {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #7d90b8;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #142343;
  text-align: center;
}
.match-hero-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.mh-team { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 0; }
.mh-logo { width: 64px; height: 64px; object-fit: contain; }
.mh-name { font-size: 1rem; font-weight: 800; color: #ffffff; max-width: 100%; }
.mh-center { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 110px; }
.mh-vs { font-size: 1.5rem; font-weight: 900; color: #5b6f96; }
.mh-score { font-size: 1.9rem; font-weight: 900; color: #ffffff; line-height: 1; }
.mh-status {
  font-size: 0.72rem;
  font-weight: 800;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  border-radius: 20px;
  padding: 2px 10px;
  text-transform: uppercase;
}
.mh-date { font-size: 0.78rem; color: #7d90b8; font-weight: 600; text-align: center; }

/* Odds row */
.odds-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #142343;
}
.odd-box {
  background: #0d1f42;
  border: 1px solid #1c2f52;
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.odd-box span { font-size: 0.72rem; color: #7d90b8; font-weight: 700; text-transform: uppercase; }
.odd-box strong { font-size: 1.05rem; color: #ffffff; }

/* Predictions panel */
.pred-panel {
  background: #0a1730;
  border: 1px solid #16294d;
  border-radius: 12px;
  padding: 14px 16px;
}
.pred-panel-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 12px;
}
.pred-panel-title i { color: #2f7bff; }
.pred-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pred-chip {
  background: #0d1f42;
  border: 1px solid #1c2f52;
  border-radius: 10px;
  padding: 10px 12px;
}
.pred-chip-type { font-size: 0.88rem; font-weight: 800; color: #ffffff; margin-bottom: 8px; }
.pred-chip-conf { display: flex; align-items: center; gap: 8px; }
.conf-bar {
  flex: 1;
  height: 7px;
  background: #142343;
  border-radius: 10px;
  overflow: hidden;
}
.conf-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #1c6ef2, #3b82f6);
  border-radius: 10px;
}
.pred-chip-conf em { font-style: normal; font-size: 0.78rem; font-weight: 800; color: #5ea0ff; min-width: 34px; text-align: right; }

/* Tabs */
.md-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  background: #0a1730;
  border: 1px solid #16294d;
  border-radius: 12px;
  padding: 8px;
}
.md-tab {
  flex: 1 1 130px;
  border: 1px solid #1c2f52;
  border-radius: 8px;
  background: #0d1f42;
  color: #c7d2f1;
  font-weight: 700;
  font-size: 0.84rem;
  padding: 9px 10px;
  transition: all 0.15s ease;
}
.md-tab:hover { border-color: #2f7bff; color: #ffffff; }
.md-tab.active {
  background: linear-gradient(90deg, #1c6ef2, #2f7bff);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(28, 110, 242, 0.35);
}

/* Subtitles + tables */
.md-subtitle { font-size: 0.9rem; font-weight: 800; color: #ffffff; }
.table-wrap {
  background: #0a1730;
  border: 1px solid #16294d;
  border-radius: 12px;
  overflow-x: auto;
}
.md-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 0.85rem; }
.md-table thead th, .md-table thead td {
  background: #10275c;
  color: #ffffff;
  font-weight: 800;
  text-align: center;
  padding: 10px 12px;
  border-bottom: 1px solid #1c2f52;
  white-space: nowrap;
}
.md-table tbody td {
  color: #c7d2f1;
  padding: 9px 12px;
  border-bottom: 1px solid #142343;
  text-align: center;
}
.md-table tbody tr:last-child td { border-bottom: none; }
.md-table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }

/* Chart */
.chart-wrap {
  background: #0a1730;
  border: 1px solid #16294d;
  border-radius: 12px;
  padding: 16px;
  max-width: 420px;
  margin: 0 auto 14px;
}
.chart-wrap canvas { max-height: 260px; }

/* Next fixture boxes */
.nextfix-box {
  background: #0a1730;
  border: 1px solid #16294d;
  border-radius: 12px;
  padding: 14px 16px;
}
.nextfix-box p { margin: 0 0 8px; color: #c7d2f1; font-size: 0.86rem; }
.nextfix-box p:last-child { margin-bottom: 0; }
.nextfix-box p span { color: #7d90b8; font-weight: 700; }

@media (max-width: 576px) {
  .mh-logo { width: 48px; height: 48px; }
  .mh-name { font-size: 0.85rem; }
  .mh-score { font-size: 1.4rem; }
  .mh-center { min-width: 84px; }
  .md-tab { flex: 1 1 100%; }
}

/* ============================================================
   Bet of the Day page
   ============================================================ */
.botd-page { display: flex; flex-direction: column; gap: 14px; }
.botd-head { text-align: center; padding: 6px 0 4px; }
.botd-title { font-size: 1.4rem; font-weight: 900; color: #ffffff; margin: 0 0 4px; }
.botd-title i { color: #f97316; }
.botd-sub { font-size: 0.86rem; color: #7d90b8; font-weight: 600; margin: 0; }
.botd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.botd-card { position: relative; }
.botd-top { border-color: #f59e0b; box-shadow: 0 0 22px rgba(245, 158, 11, 0.18); }
.botd-rank {
  position: absolute;
  top: -9px;
  left: 12px;
  z-index: 2;
  background: #142343;
  border: 1px solid #1c2f52;
  color: #7d90b8;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 20px;
  padding: 2px 10px;
}
.botd-rank.top {
  background: linear-gradient(90deg, #f59e0b, #facc15);
  border-color: transparent;
  color: #1a2332;
}
.botd-conf { margin-bottom: 10px; }

@media (max-width: 767.98px) {
  .botd-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Fixtures / Results page
   ============================================================ */
.fx-page { display: flex; flex-direction: column; gap: 14px; }
.fx-head { text-align: center; padding: 6px 0 4px; }
.fx-title { font-size: 1.4rem; font-weight: 900; color: #ffffff; margin: 0 0 4px; }
.fx-title i { color: #2f7bff; }
.fx-sub { font-size: 0.86rem; color: #7d90b8; font-weight: 600; margin: 0; }

.fx-list {
  display: flex;
  flex-direction: column;
  background: #0a1730;
  border: 1px solid #16294d;
  border-radius: 12px;
  overflow: hidden;
}
.fx-row {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid #142343;
}
.fx-row:last-child { border-bottom: none; }
.fx-row:hover { background: rgba(255, 255, 255, 0.02); }
.fx-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.fx-date { font-size: 0.76rem; color: #7d90b8; font-weight: 700; white-space: nowrap; }
.fx-status {
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 20px;
  padding: 2px 9px;
  text-transform: uppercase;
}
.fx-status.ns   { background: rgba(100, 116, 139, 0.18); color: #94a3b8; }
.fx-status.live { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.fx-status.ft   { background: rgba(47, 123, 255, 0.15); color: #5ea0ff; }
.fx-status.off  { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.fx-team { display: flex; align-items: center; gap: 9px; min-width: 0; text-decoration: none !important; }
.fx-team:last-of-type { justify-content: flex-end; text-align: right; }
.fx-logo { width: 28px; height: 28px; object-fit: contain; flex: 0 0 28px; }
.fx-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: #e6edff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fx-team:hover .fx-name { color: #5ea0ff; }
.fx-score { font-size: 1.05rem; font-weight: 900; color: #ffffff; min-width: 64px; text-align: center; }
.fx-odds { display: flex; gap: 6px; }
.fx-odd {
  min-width: 46px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 800;
  border-radius: 8px;
  padding: 5px 8px;
  background: #0d1f42;
  border: 1px solid #1c2f52;
  color: #c7d2f1;
}
.fx-odd.home { border-color: rgba(47, 123, 255, 0.5); color: #5ea0ff; }
.fx-odd.draw { color: #94a3b8; }
.fx-odd.away { border-color: rgba(239, 68, 68, 0.4); color: #f87171; }
/* League group header above result rows */
.fx-lg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #7d90b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: #0d1e3d;
  border-bottom: 1px solid #142343;
}
.fx-lg-head i { color: #5ea0ff; font-size: 0.68rem; }
/* Results rows: no league/odds column on the right */
.fx-row--result { grid-template-columns: 105px minmax(0, 1fr) auto minmax(0, 1fr); }

@media (max-width: 767.98px) {
  .fx-row { grid-template-columns: 1fr auto 1fr; grid-template-areas: "meta score meta2" "home score away"; row-gap: 8px; }
  .fx-meta { grid-area: meta; flex-direction: row; align-items: center; gap: 8px; }
  .fx-score { grid-area: score; }
  .fx-team:first-of-type { grid-area: home; }
  .fx-team:last-of-type { grid-area: away; }
  .fx-odds { grid-column: 1 / -1; justify-content: center; text-align: center; }
}

/* ===== Top Leagues page ===== */
.lg-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0a1730;
  border: 1px solid #16294d;
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 16px;
  color: #7d90b8;
}
.lg-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #e6edff;
  font-size: 0.88rem;
  font-weight: 600;
}
.lg-search input::placeholder { color: #55688f; }
.lg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 12px;
}
.lg-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  background: #0a1730;
  border: 1px solid #16294d;
  border-radius: 12px;
  text-decoration: none !important;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.lg-card:hover {
  border-color: rgba(47, 123, 255, 0.55);
  transform: translateY(-2px);
}
.lg-card-top { display: flex; align-items: center; gap: 8px; height: 34px; }
.lg-flag { width: 22px; height: 16px; object-fit: cover; border-radius: 3px; }
.lg-logo { width: 30px; height: 30px; object-fit: contain; }
.lg-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: #e6edff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.lg-card:hover .lg-name { color: #5ea0ff; }
.lg-country {
  font-size: 0.72rem;
  font-weight: 700;
  color: #7d90b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.lg-counts { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.lg-count {
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 9px;
  white-space: nowrap;
}
.lg-count.up   { background: rgba(47, 123, 255, 0.15); color: #5ea0ff; }
.lg-count.done { background: rgba(148, 163, 184, 0.14); color: #94a3b8; }

/* ===== Tip History page ===== */
.th-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.th-stat {
  background: #0a1730;
  border: 1px solid #16294d;
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}
.th-stat-num { font-size: 1.25rem; font-weight: 900; color: #e6edff; }
.th-stat-num.good { color: #22c55e; }
.th-stat-num.mid  { color: #eab308; }
.th-stat-num.bad  { color: #ef4444; }
.th-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #7d90b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 2px;
}
.filter-field input[type="text"] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #e6edff;
  font-size: 0.86rem;
  font-weight: 600;
  min-width: 150px;
}
.filter-field input[type="text"]::placeholder { color: #55688f; }
.th-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.th-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #0a1730;
  border: 1px solid #16294d;
  border-radius: 12px;
  padding: 13px 16px;
  transition: border-color 0.15s ease;
}
.th-card:hover { border-color: rgba(47, 123, 255, 0.45); }
.th-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.th-league {
  font-size: 0.7rem;
  font-weight: 800;
  color: #7d90b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-outcome {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 20px;
  padding: 2px 10px;
  text-transform: uppercase;
}
.th-outcome.won     { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.th-outcome.lost    { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.th-outcome.draw    { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.th-outcome.pending { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
.th-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.th-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.th-team.right { justify-content: flex-end; text-align: right; }
.th-logo { width: 26px; height: 26px; object-fit: contain; flex: 0 0 26px; }
.th-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: #e6edff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-score { font-size: 1rem; font-weight: 900; color: #ffffff; min-width: 56px; text-align: center; }
.th-pred { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.th-cat {
  font-size: 0.66rem;
  font-weight: 800;
  border-radius: 20px;
  padding: 2px 9px;
  text-transform: uppercase;
}
.th-cat.premium { background: rgba(234, 179, 8, 0.16); color: #eab308; }
.th-cat.free    { background: rgba(34, 197, 94, 0.16); color: #22c55e; }
.th-tip {
  font-size: 0.78rem;
  font-weight: 700;
  color: #5ea0ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-conf {
  font-size: 0.72rem;
  font-weight: 800;
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.12);
  border-radius: 20px;
  padding: 2px 8px;
}
.th-date { margin-left: auto; font-size: 0.7rem; font-weight: 600; color: #55688f; }
.th-confbar {
  height: 4px;
  background: rgba(148, 163, 184, 0.12);
  border-radius: 4px;
  overflow: hidden;
}
.th-confbar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2f7bff, #5ea0ff);
  border-radius: 4px;
}
@media (max-width: 767.98px) {
  .th-grid { grid-template-columns: 1fr; }
  .th-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ===== League predictions page ===== */
.lp-head { display: flex; align-items: center; gap: 14px; text-align: left; }
.lp-league-logo { width: 44px; height: 44px; object-fit: contain; flex: 0 0 44px; }
.lp-list { display: flex; flex-direction: column; gap: 12px; }
.lp-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #0a1730;
  border: 1px solid #16294d;
  border-radius: 12px;
  padding: 13px 16px;
  transition: border-color 0.15s ease;
}
.lp-card:hover { border-color: rgba(47, 123, 255, 0.45); }
.lp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-date { font-size: 0.76rem; font-weight: 700; color: #7d90b8; white-space: nowrap; }
.lp-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #5ea0ff;
  background: rgba(47, 123, 255, 0.12);
  border: 1px solid rgba(47, 123, 255, 0.4);
  border-radius: 20px;
  padding: 4px 12px;
  transition: background 0.15s ease;
}
.lp-preview:hover { background: rgba(47, 123, 255, 0.25); }
.lp-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.lp-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lp-team.right { justify-content: flex-end; text-align: right; }
.lp-teaminfo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lp-team.right .lp-teaminfo { align-items: flex-end; }
.lp-logo { width: 34px; height: 34px; object-fit: contain; flex: 0 0 34px; }
.lp-name {
  font-size: 0.92rem;
  font-weight: 800;
  color: #e6edff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-vs { font-size: 0.78rem; font-weight: 900; color: #55688f; }
.lp-form { display: inline-flex; gap: 3px; }
.form-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  font-size: 0.6rem;
  font-weight: 900;
  border-radius: 5px;
}
.form-chip.w { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.form-chip.d { background: rgba(234, 179, 8, 0.2); color: #eab308; }
.form-chip.l { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.lp-pred { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Dark modal */
.lp-modal .modal-content {
  background: #0d1e3d;
  border: 1px solid #16294d;
  border-radius: 14px;
  color: #e6edff;
}
.lp-modal .modal-header { border-bottom-color: #142343; }
.lp-modal .modal-title { font-size: 0.98rem; font-weight: 800; }
.lp-modal .modal-body { font-size: 0.86rem; }
.lp-mfacts { display: flex; flex-direction: column; gap: 6px; color: #a9b8d6; margin-bottom: 14px; }
.lp-mfacts i { color: #5ea0ff; width: 18px; }
.lp-msection {
  font-size: 0.72rem;
  font-weight: 800;
  color: #7d90b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 14px 0 8px;
}
.lp-mforms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lp-mform {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #0a1730;
  border: 1px solid #16294d;
  border-radius: 10px;
  padding: 9px 12px;
}
.lp-h2h { width: 100%; font-size: 0.82rem; border-collapse: collapse; }
.lp-h2h th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 800;
  color: #7d90b8;
  text-transform: uppercase;
  padding: 6px 10px;
  border-bottom: 1px solid #142343;
}
.lp-h2h td { padding: 7px 10px; border-bottom: 1px solid #101f3d; color: #c9d6f2; }
.lp-h2h td strong { color: #fff; }
.lp-muted { color: #55688f; font-size: 0.8rem; }
@media (max-width: 575.98px) {
  .lp-mforms { grid-template-columns: 1fr; }
}

/* ---------- Hamburger icon: pure-CSS white lines (no Bootstrap CSS dependency) ---------- */
.navbar-toggler-icon {
  display: inline-block;
  width: 22px;
  height: 14px;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  position: relative;
  filter: none;
}
.navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -1px;
  border-top: 2px solid #ffffff;
}

/* ---------- Mobile filter bar + tabs polish ---------- */
@media (max-width: 767.98px) {
  .filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
  }
  .filter-field {
    flex: none;
    min-width: 0;
    width: 100%;
    padding: 8px 10px;
  }
  .filter-field input,
  .filter-field select {
    font-size: 0.85rem;
  }
  .filter-bar .btn-filter {
    grid-column: 1 / -1;
    width: 100%;
    padding: 10px;
  }
  .match-tabs {
    gap: 6px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .match-tab {
    flex: 0 0 auto;
    padding: 7px 11px;
    font-size: 0.78rem;
    gap: 5px;
  }
  .match-tab-count {
    padding: 1px 6px;
    font-size: 0.68rem;
  }
  .match-tabs .btn-stats {
    flex: 0 0 auto;
    padding: 7px 11px;
    font-size: 0.78rem;
  }
}