:root{
	--bg:#0b0f14;
	--surface:#0f141b;
	--surface-2:#121925;
	--text:#e6edf7;
	--muted:#9aa6b2;
	--border:rgba(255,255,255,0.08);
	--accent:#16c784;
	--accent-2:#0ea36b;
	--danger:#ef4444;
	--success:#22c55e;
	--warning:#f59e0b;
	--radius:.85rem;
	--shadow-sm:0 8px 18px rgba(0,0,0,.25);
	--shadow-md:0 16px 30px rgba(0,0,0,.35);
	--shadow-lg:0 22px 40px rgba(0,0,0,.45);
}

html,body{height:100%;}
.site-body{
	font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	margin:0;
	background:
		radial-gradient(1200px 600px at 10% -10%, rgba(22,199,132,0.08), transparent 60%),
		radial-gradient(800px 400px at 90% -10%, rgba(14,163,107,0.06), transparent 55%),
		var(--bg);
	color:var(--text);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

.container{max-width:1140px}

/* Navbar */
.app-navbar{background:rgba(10,15,20,0.9);backdrop-filter:saturate(150%) blur(6px);border-bottom:1px solid var(--border)}
.app-navbar .navbar-brand{font-weight:700;letter-spacing:.2px;color:#fff!important;display:flex;align-items:center;gap:.4rem}
.app-navbar .brand-dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 12px rgba(22,199,132,0.7)}
.app-navbar .nav-link{color:var(--muted);display:flex;align-items:center;gap:.5rem;border-radius:999px;padding:.45rem .85rem;transition:all .2s ease}
.app-navbar .nav-link:hover{color:#fff;background:rgba(255,255,255,0.05)}
.app-navbar .nav-link.active{color:#0c1b12;background:linear-gradient(90deg, var(--accent), var(--accent-2));font-weight:700}
.app-navbar.navbar-scrolled{box-shadow:var(--shadow-sm)}
.navbar-toggler{border-color:rgba(255,255,255,0.2)}

.dropdown-mega{min-width:320px;max-width:520px}
.dropdown-mega-title{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:.5rem}
.dropdown-menu{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-md);border-radius:var(--radius);animation:dropdownFade .15s ease}
.dropdown-item{color:var(--text)}
.dropdown-item:hover{background:rgba(255,255,255,0.06);color:#fff}
.dropdown-mega .dropdown-item{white-space:normal;line-height:1.2;display:flex;align-items:flex-start;gap:.5rem}
.dropdown-mega .dropdown-item i{flex:0 0 auto}

@keyframes dropdownFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Page spacing */
header.mb-3, header.mb-4{margin-bottom:1.25rem}
.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}

/* Typography */
h1,h2,h3,h4,h5{letter-spacing:.2px}
.section-title{color:var(--text);font-weight:700}
.section-title .accent{color:var(--accent)}

/* Cards */
.card, .list-group-item{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text)}
.card{box-shadow:var(--shadow-sm)}
.card .card-body{padding:1.1rem}
.card.bg-soft{background:rgba(22,199,132,0.06)}
.card-soft{background:rgba(255,255,255,0.03)}

/* Match cards */
.match-card{
	display:block;
	width:100%;
	position:relative;
	border:1px solid var(--border);
	border-radius:var(--radius);
	background:var(--surface-2);
	box-shadow:var(--shadow-sm);
	padding:1rem 1.1rem;
	margin-bottom:.75rem;
	transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.match-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(22,199,132,0.4)}
.match-card a{color:var(--text)}
.match-card__top{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.match-card__league{display:flex;align-items:center;gap:.5rem;color:var(--muted)}
.match-card__league i{color:var(--accent)}
.league-name{color:var(--muted);font-weight:600;line-height:1.3}
.match-card__meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.match-card__teams{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.6rem}
.match-card__team-list{display:flex;flex-direction:column;gap:.25rem}
.team-row{display:flex;align-items:center;gap:.5rem}
.team-name{font-weight:600}
.team-score{font-weight:800;font-size:1.25rem;color:#fff;min-width:60px;text-align:right}
.score-box{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;padding:.35rem .65rem;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,0.04);min-width:78px}
.score-box .score-main{font-weight:900;font-size:1.1rem;letter-spacing:.02em}
.score-box .score-sub{font-size:.72rem;color:var(--muted);font-weight:700;text-transform:uppercase}
.match-card__extra{margin-top:.6rem;color:var(--muted);font-size:.9rem}
.match-card__meta-line{margin-top:.4rem;color:var(--muted);font-size:.85rem}
.text-muted, .small.text-muted{color:var(--muted)!important}

/* Badges / chips */
.badge{border-radius:999px;font-weight:700;letter-spacing:.02em}
.badge-live{background:var(--danger);color:#fff;padding:.35em .7em;text-transform:uppercase;position:relative}
.badge-live::after{content:'';position:absolute;top:50%;left:8px;width:6px;height:6px;border-radius:999px;background:#fff;transform:translateY(-50%);box-shadow:0 0 8px rgba(255,255,255,0.8);animation:pulse 1.4s ease infinite}
@keyframes dropdownFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.25)}100%{transform:translateY(-50%) scale(1)}}
.badge-ft{background:#1f2937;color:#fff;padding:.35em .7em}
.badge.bg-secondary{background:#1f2937!important}
.badge.bg-success{background:var(--success)!important}
.chip{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,0.06);border:1px solid var(--border);padding:.25rem .6rem;border-radius:999px;color:var(--text);font-size:.75rem}
.chip i{color:var(--accent)}

/* Buttons */
.btn-primary{background:linear-gradient(90deg, var(--accent), var(--accent-2));border:0;color:#06130d}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline-primary{border-color:var(--accent);color:var(--accent)}
.btn-outline-primary:hover{background:var(--accent);color:#06130d}
.btn-outline-success{border-color:var(--accent);color:var(--accent)}
.btn-outline-success:hover{background:var(--accent);color:#06130d}
.btn{transition:transform .15s ease, box-shadow .2s ease}
.btn:active{transform:scale(.98)}

/* Pills / tabs */
.pill-tabs{position:relative;display:flex;gap:.4rem;flex-wrap:wrap;background:rgba(255,255,255,0.04);border:1px solid var(--border);padding:.35rem;border-radius:999px}
.pill-tabs .nav-link{border-radius:999px;color:var(--muted);padding:.35rem .9rem;transition:all .2s ease}
.pill-tabs .nav-link.active{background:linear-gradient(90deg, var(--accent), var(--accent-2));color:#06130d;box-shadow:0 8px 18px rgba(22,199,132,0.25)}

/* Date switcher */
.date-switcher .pill-tabs{background:rgba(255,255,255,0.03)}
.date-switcher .nav-link{min-height:40px;display:flex;align-items:center}
.date-switcher .nav-link:hover{box-shadow:0 6px 14px rgba(0,0,0,0.25)}
.date-switcher .date-control{border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03)}
.date-switcher .date-control .input-group-text{background:transparent;border:0;color:var(--muted)}
.date-switcher .date-control .form-control{border:0;background:transparent;color:var(--text)}
.date-switcher .date-control .form-control:focus{box-shadow:0 0 0 .2rem rgba(22,199,132,0.15)}

/* Flatpickr dark theme */
.flatpickr-calendar{
	background:var(--surface);
	border:1px solid var(--border);
	box-shadow:var(--shadow-md);
	border-radius:var(--radius);
}
.flatpickr-months, .flatpickr-weekdays{
	background:var(--surface-2);
	border-bottom:1px solid var(--border);
}
.flatpickr-months .flatpickr-month, .flatpickr-weekdays .flatpickr-weekday{
	color:var(--text);
}
.flatpickr-day{
	color:var(--text);
}
.flatpickr-day:hover, .flatpickr-day:focus{
	background:rgba(255,255,255,0.08);
	border-color:transparent;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange{
	background:var(--accent);
	border-color:var(--accent);
	color:#06130d;
}
.flatpickr-day.today{
	border-color:var(--accent);
}
.flatpickr-disabled, .flatpickr-day.disabled{
	color:rgba(255,255,255,0.25);
}
.flatpickr-time input, .flatpickr-time .flatpickr-time-separator{
	color:var(--text);
}

/* Date picker control */
.date-control{border-radius:999px;overflow:hidden;border:1px solid var(--border);background:var(--surface)}
.date-control .input-group-text{background:rgba(255,255,255,0.05);border:0;color:var(--muted)}
.date-control .form-control{border:0;background:transparent;color:var(--text)}
.date-control .form-control:focus{box-shadow:none}

/* Tables */
.table thead th{background:rgba(255,255,255,0.04);border-bottom:1px solid var(--border);color:var(--muted)}
.table td, .table th{vertical-align:middle;color:var(--text)}
.table-sm td, .table-sm th{padding:.5rem .6rem}
.table-bordered{border-color:var(--border)}
.league-table .table{
	background:rgba(255,255,255,0.02);
	color:var(--text);
	border:1px solid var(--border);
	border-radius:1rem;
	overflow:hidden;
	border-collapse:separate;
	border-spacing:0;
	box-shadow:var(--shadow-sm);
}
.league-table .table thead th{
	position:sticky;
	top:0;
	z-index:2;
	background:linear-gradient(180deg, rgba(22,199,132,0.22), rgba(18,25,37,0.9));
	color:#e9f7ef;
	border-color:var(--border);
}
.league-table .table tbody td{border-color:var(--border)}
.league-table .table td, .league-table .table th{padding:.65rem .75rem}
.league-table .table-hover tbody tr{transition:background .2s ease, transform .2s ease}
.league-table .table-hover tbody tr:hover{background:rgba(255,255,255,0.06)}
.league-table .table tr.collapse{display:none}
.league-table .table tr.collapse.show,
.league-table .table tr.collapsing{display:table-row}

/* Inputs */
input.form-control, select.form-control, select.form-select, textarea.form-control{
	border-radius:.6rem;
	background:var(--surface);
	border:1px solid var(--border);
	color:var(--text);
}
input.form-control:focus, select.form-select:focus, textarea.form-control:focus{
	border-color:rgba(22,199,132,0.6);
	box-shadow:0 0 0 .2rem rgba(22,199,132,0.15);
}

/* Pagination */
.pagination .page-link{background:var(--surface);border-color:var(--border);color:var(--muted)}
.pagination .page-item.active .page-link{background:var(--accent);border-color:var(--accent);color:#06130d}

/* Footer */
footer{padding:0;color:var(--muted)}
.site-footer{background:#0a0f14;color:#cfd6e4;border-radius:0;width:100%;border-top:1px solid var(--border)}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}

/* Section header */
.section-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.6rem}
.section-header .view-all{color:var(--accent);text-decoration:none;font-size:.9rem}
.section-header .view-all:hover{text-decoration:underline}

/* Empty states */
.empty-state{border:1px dashed var(--border);border-radius:var(--radius);padding:2rem;text-align:center;background:rgba(255,255,255,0.02)}

/* Match page */
.match-hero{border:1px solid var(--border);border-radius:1.1rem;background:linear-gradient(160deg, rgba(22,199,132,0.08), rgba(12,16,22,0.95));padding:1.25rem;box-shadow:var(--shadow-md)}
.match-hero__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.match-hero__league{font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.match-hero__kickoff{font-size:.95rem;color:var(--text);display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.match-hero__teams{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center}
.team-block{display:flex;flex-direction:column;gap:.25rem}
.team-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.team-name-lg{font-size:1.25rem;font-weight:700;color:#fff}
.match-hero__center{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.match-badge{border-radius:999px;padding:.4rem .75rem;font-weight:700;letter-spacing:.02em}
.match-badge--status{background:rgba(255,255,255,0.08);border:1px solid var(--border);color:#e9f7ef}
.match-badge--score{background:linear-gradient(90deg, rgba(22,199,132,0.65), rgba(14,163,107,0.7));color:#04130c}
.prediction-list{display:flex;flex-direction:column;gap:.75rem}
.prediction-card{border:1px solid var(--border);border-radius:.9rem;padding:.85rem 1rem;background:rgba(255,255,255,0.02)}
.odds-list .list-group-item{background:transparent;border-color:var(--border);color:var(--text)}
.related-list{display:flex;flex-direction:column;gap:.5rem}
.related-item{display:flex;flex-direction:column;gap:.2rem;padding:.6rem .75rem;border:1px solid transparent;border-radius:.75rem;color:var(--text);text-decoration:none;background:rgba(255,255,255,0.02);transition:all .2s ease}
.related-item:hover{border-color:rgba(22,199,132,0.5);background:rgba(22,199,132,0.08);color:#fff}
.related-title{font-weight:600}

@media (max-width:768px){
	.match-hero__teams{grid-template-columns:1fr;gap:.75rem;text-align:left}
	.match-hero__center{align-items:flex-start}
}

/* Animations */
.fade-in{animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Skeleton */
.skeleton{background:linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.1), rgba(255,255,255,0.05));background-size:200% 100%;animation:skeleton 1.4s ease infinite;border-radius:.5rem}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Accessibility: focus outlines */
a:focus, button:focus, .btn:focus{outline:3px solid rgba(22,199,132,0.2);outline-offset:2px}

/* Utility class for subtle dividers */
.muted-divider{height:1px;background:var(--border);margin:1rem 0}

/* Responsive helpers */
@media (max-width:768px){
	.container{padding-left:12px;padding-right:12px}
	.app-navbar .navbar-nav{flex-direction:column;gap:.25rem}
	.app-navbar .nav-link{width:100%;justify-content:flex-start}
	.match-card__teams{flex-direction:column;align-items:flex-start}
	.team-score{text-align:left}
}

@media (prefers-reduced-motion: reduce){
	*{animation:none!important;transition:none!important}
}