* {margin: 0;padding: 0;box-sizing: border-box;}
html {font-size: 16px;scroll-behavior: smooth;}
body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;color: #0f172a;background: #f8fafc;line-height: 1.6;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
a {color: #2563eb;text-decoration: none;}
a:hover {color: #f0f2f7;}
img {max-width: 100%;height: auto;display: block;}
.container {max-width: 1200px;margin: 0 auto;padding: 0 1rem;}
.main {min-height: calc(100vh - 70px - 200px);}
.section {padding: 3rem 0;}
.section-alt {background: #f8fafc;}
.section-header {text-align: center;margin-bottom: 2rem;}
.section-header h1, .section-header h2 {color: #0f172a;margin-bottom: 0.5rem;}
.section-header p {color: #64748b;font-size: 1.1rem;}
.hero {background: linear-gradient(135deg, #2563eb 0%, #764ba2 100%); color: #ffffff; padding: 2rem 0;text-align: center;}
.hero h1 {font-size: 2.5rem;margin-bottom: 1rem;font-weight: 700;}
.hero p {font-size: 1.2rem;opacity: 0.95;}
.hero-subtitle {opacity: 0.9;font-size: 1rem;margin-top: 0.5rem;}
@media (max-width: 768px) {
.hero h1 {font-size: 1.8rem;}
.hero p {font-size: 1rem;}
}
.cards-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 1.5rem;}
.card {background: #ffffff;padding: 1.5rem;border-radius: 12px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);}
.card:hover {box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);transform: translateY(-5px);}
.card h3 {color: #0f172a;margin-bottom: 0.75rem;font-size: 1.25rem;}
.card p {color: #64748b;line-height: 1.6;}
.match-card {background: #ffffff;border-radius: 12px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);overflow: hidden;}
.match-card:hover {box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);transform: translateY(-5px);}
.match-header {display: flex;justify-content: space-between;align-items: center;padding: 1rem;background: #f8fafc;border-bottom: 2px solid #e2e8f0;}
.match-league {font-weight: 600;color: #2563eb;font-size: 0.9rem;}
.match-time {color: #64748b;font-size: 0.85rem;font-weight: 500;}
.team {display: flex;flex-direction: column;align-items: center;gap: 0.5rem;flex: 1;}
.team-logo {width: 40px;height: 40px;object-fit: contain;}
.team-name {font-weight: 600;font-size: 0.95rem;text-align: center;color: #0f172a;}
.vs {font-weight: 700;color: #64748b;font-size: 0.9rem;}
.match-prediction {padding: 1rem 1.5rem 1.5rem;background: #f8fafc;}
.prediction-row {display: flex;justify-content: space-between;align-items: center;padding: 0.5rem 0;border-bottom: 1px solid #e2e8f0;}
.prediction-row:last-child {border-bottom: none;}
.prediction-label {color: #64748b;font-size: 0.9rem;}
.btn {display: inline-block;padding: 0.75rem 1.5rem;border-radius: 6px;font-weight: 600;text-align: center;cursor: pointer;border: none;font-size: 1rem;}
.btn-primary {background: #2563eb;color: #ffffff;}
.btn-primary:hover {background: #764ba2;transform: translateY(-2px);box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);color: #ffffff;}
.btn-secondary {background: #64748b;color: #ffffff;}
.btn-secondary:hover {background: #475569;color: #ffffff;}
.btn-success {background: #22c55e;color: #202020;}
.btn-success:hover {background: #16a34a;color: #ffffff;}
.confidence-badge {display: inline-block;padding: 0.35rem 0.75rem;border-radius: 6px;font-weight: 700;font-size: 0.85rem;}
.confidence-very-high {background: #dcfce7; color: #166534;}
.confidence-high {background: #dbeafe; color: #1e40af;}
.confidence-medium {background: #fef3c7; color: #92400e;}
.confidence-low {background: #fee2e2; color: #991b1b;}
.info-box {background: #f0f9ff;padding: 1.5rem;margin: 2rem 0;border-radius: 8px;}
.info-box-title, .nav-box-title {font-size: 16px;font-weight: bold;margin-bottom: 1rem;color: #1f2937;}
.info-box ul {list-style: none;padding: 0;display: flex;gap: 1.5rem;flex-wrap: wrap;}
.info-box li {color: #1f2937;font-size: 13px;}
.info-box strong {display: inline-block;width: 20px;height: 20px;line-height: 20px;text-align: center;border-radius: 3px;margin-right: 0.5rem;font-weight: 700;}
.info-box p {margin-top: 1rem;color: #6b7280;font-size: 13px;}
.info-box a {color: #2563eb;}
.info-box a:hover {color: #764ba2;text-decoration: underline;}
.alert {padding: 1rem;border-radius: 6px;margin-bottom: 2rem;border-left: 4px solid;}
.alert-info {background: #dbeafe;border-color: #2563eb;color: #0f172a;}
.alert-warning {background: #fef3c7;border-color: #f59e0b;color: #0f172a;}
.quick-nav {background: white;padding: 1.5rem;border-radius: 12px;margin-bottom: 2rem;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);}
.quick-nav h3 {margin-bottom: 1rem;}
.quick-nav-buttons {display: flex;gap: 1rem;flex-wrap: wrap;}
.date-switcher-buttons a:hover{color:#57585a;}
.nav-box-title--days {width: 100%;margin-top: 0.75rem;padding-top: 0.75rem;border-top: 1px solid var(--border-color);}
.date-switcher-buttons {width: 100%;}
.empty-state {background: white;padding: 3rem;border-radius: 12px;text-align: center;}
.empty-state h2 {color: #64748b;margin-bottom: 1rem;}
.empty-state p {color: #64748b;margin-bottom: 2rem;}
.section-divider {display: flex;justify-content: space-between;align-items: center;margin-bottom: 1.5rem;padding-bottom: 0.5rem;border-bottom: 3px solid #2563eb;}
.section-divider h2 {margin: 0;}
.section-divider-subtitle {font-size: 0.8rem;color: #64748b;font-weight: normal;margin-left: 0.5rem;}
.more-tips {background: white;padding: 2rem;border-radius: 12px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);margin-top: 3rem;}
.more-tips h3 {color: #0f172a;margin-bottom: 1.5rem;font-size: 1.5rem;display: flex;align-items: center;gap: 0.5rem;}
.more-tips-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 1rem;}
.more-tips-link {display: block;padding: 1rem;background: #f8fafc;border-radius: 6px;border: 2px solid #e2e8f0;text-align: center;font-weight: 600;color: #0f172a;}
.more-tips-link:hover {border-color: #2563eb;background: #2563eb;color: #ffffff;transform: translateY(-3px);box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
.related-links {margin-top: 3rem;}
.related-links h3 {margin-bottom: 1rem;}
.related-links-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 1rem;}
.related-links .btn {text-align: center;}
.hide-mobile {display: table-cell;}
.text-center {text-align: center;}
.mt-1 {margin-top: 0.5rem;}
.mt-2 {margin-top: 1rem;}
.mt-3 {margin-top: 1.5rem;}
.mb-1 {margin-bottom: 0.5rem;}
.mb-2 {margin-bottom: 1rem;}
.mb-3 {margin-bottom: 1.5rem;}
.date-divider {
margin: 2rem 0 1.5rem 0;padding: 0.75rem 1.5rem;background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);border-left: 4px solid #2563eb;border-radius: 8px;}
.date-divider h3 {margin: 0;font-size: 1.1rem;font-weight: 700;color: #0f172a;}
.date-divider:first-of-type {margin-top: 0;}
.surewins-tier-header {display: flex;align-items: center;gap: 1rem;padding: 1rem 1.25rem;border-radius: 10px;margin: 1.5rem 0 0.75rem;}
.surewins-tier-header .tier-icon {font-size: 1.6rem;}
.surewins-tier-header h2 { margin: 0; font-size: 1.1rem;}
.surewins-tier-header p  { margin: 0; font-size: 0.78rem; opacity: 0.8;}
.surewins-tier-header .tier-count {margin-left: auto;font-size: 0.82rem;font-weight: 600;white-space: nowrap;}
.surewins-tier-toppick {background: linear-gradient(135deg, #fff7ed, #ffedd5);color: #7c2d12;}
.surewins-tier-surewin {background: linear-gradient(135deg, #f0fdf4, #dcfce7);color: #14532d;}
.surewins-methodology {background: #f8fafc;border: 1px solid #e2e8f0;border-radius: 8px;padding: 1.25rem 1.5rem;margin: 2rem 0 1rem;font-size: 0.88rem;color: #475569;line-height: 1.6;}
.surewins-methodology h3 {margin: 0 0 0.5rem;font-size: 0.95rem;color: #1e293b;}
.surewins-methodology a {color: #3b82f6;}
.surewins-methodology p {margin-top: 1rem;}
@media (max-width: 768px) {
.section {padding: 2rem 0;}
.cards-grid {grid-template-columns: 1fr;}
.team-name{font-size: 0.85rem;}
.more-tips-grid {grid-template-columns: 1fr;}
.related-links-grid {grid-template-columns: 1fr;}
.hide-mobile {display: none;}
.quick-nav-buttons {flex-direction: column;}
.date-divider {padding: 0.5rem 1rem;margin: 1.5rem 0 1rem 0;}
.date-divider h3 {font-size: 1rem;}
}
@media (max-width: 480px) {
.match-card  {font-size: 0.9rem;}
.empty-state {padding: 2rem 1rem;}
.match-card  {font-size: 0.9rem;}
.empty-state {padding: 2rem 1rem;}
.date-switcher-buttons {display: grid;grid-template-columns: 1fr 1fr;gap: 0.5rem;}
.date-switcher-buttons .btn {text-align: center;width: 100%;padding: 0.5rem 0.25rem;font-size: 0.82rem;}
.nav-box-title--days {grid-column: 1 / -1;}
}
@media print {.header, .btn, .mobile-menu-toggle, .quick-nav, .more-tips, .related-links {display: none;}}