/* Optimized main.css - DraftEdge Fantasy Sports Platform* Consolidated styles for all pages and components* Total Classes: ~470 (Optimized 2025-01-28)* Size: 96KB - Single file for optimal performance*/

/* Reserve 1888 v2 — production default (2026-04-27).
   Was: muted green (var(--primary-green)) + var(--bg-dark) charcoal + Montserrat headers.
   Now: navy + brass + Archivo Black. The ?theme= switcher (head.inc.php)
   still works on top of these defaults; setting ?theme=reserve-v2 is now
   a no-op since the values match. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700&display=swap');

:root {
	/* Brand: lifted brass — passes AA on bg-card, distinct from CTA gold */
	--primary-green: #D4AF60;
	--primary-green-hover: #BE9A3F;
	/* Surfaces — deeper navy, lifted card so edges read */
	--bg-dark: #0C1827;
	--bg-darker: #060F1B;
	--bg-card: #1B2E48;
	--bg-card-hover: #22375A;
	--border-color: #34507A;
	/* Text — warm bone scale, all three pairings pass AA */
	--text-primary: #F4EEDD;
	--text-secondary: #C9BFA8;
	--text-muted: #9A917C;
	/* CTA gold — brighter than brand brass for clear hierarchy */
	--gold: #F2D98A;
	--gold-hover: #E5C570;
	/* Status — warmed toward the brass story (info muted to dusty steel) */
	--success: #7FC4A1;
	--danger: #D8624C;
	--warning: #E0A23A;
	--info: #7794B0;
	--purple: #9B59B6;

	/* Stat highlighting — data-tier coloring (information design, intentionally
	   distinct from UI state colors above). Used by optimizer tables, value/
	   ownership/DVP class chips, lineup-card score tiers, etc. */
	--stat-elite: #3498DB;     /* Top tier — best player, top 5% */
	--stat-good: #00B894;      /* Above average */
	--stat-average: #F39C12;   /* Neutral / average */
	--stat-poor: #E74C3C;      /* Below average */
	--stat-bad: #E67E22;       /* Bad-but-not-worst (score-tier-poor) */

	/* ===== GLOBAL SPACING SYSTEM ===== */
	/* Page Layout Spacing */
	--page-padding-x: 24px;          /* Horizontal padding from screen edges */
	--page-padding-x-mobile: 16px;   /* Mobile horizontal padding */
	--section-spacing: 24px;         /* Vertical spacing between major sections */
	--section-spacing-mobile: 16px;  /* Mobile vertical spacing */
	
	/* Component Spacing */
	--component-spacing: 16px;       /* Spacing between components */
	--component-spacing-sm: 12px;    /* Small component spacing */
	--component-spacing-lg: 24px;    /* Large component spacing */
	
	/* Content Spacing */
	--content-padding: 16px;         /* Internal padding for content areas */
	--content-padding-sm: 12px;      /* Small internal padding */
	--content-padding-lg: 24px;      /* Large internal padding */
}
/* Base Reset & Global Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	overflow-x: hidden;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Reserve v2 default typography — Archivo Black for all major heads.
   Page-specific overrides win because they're more specific selectors. */
h1, h2, .page-title, .hero-title {
	font-family: 'Archivo Black', Impact, sans-serif;
	font-weight: 400;
	letter-spacing: -0.01em;
}
/* Container */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 768px) {
	.container {
		padding: 0 2rem;
	}
}
/* Button Styles */
.btn:focus,.btn:active {
	outline: none;
	box-shadow: none;
}
.btn {
	font-weight: 600;
	padding: 0.75rem 2rem;
	border-radius: 0.5rem;
	transition: all 0.3s ease;
	text-decoration: none;
	display: inline-block;
	border: none;
	cursor: pointer;
}
/* Global Form Styles - Dark Theme */
.form-control,.form-select,input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="tel"],input[type="url"],select,textarea {
	background-color: var(--bg-darker);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
	transition: all 0.2s ease;
	width: 100%;
}
/* Focus states */
.form-control:focus,.form-select:focus,input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="url"]:focus,select:focus,textarea:focus {
	background-color: var(--bg-darker);
	color: var(--text-primary);
	border-color: var(--primary-green);
	outline: none;
	box-shadow: 0 0 0 0.125rem rgba(0, 184, 148, 0.25);
}
/* Hover states */
.form-control:hover,.form-select:hover,select:hover,input:hover {
	border-color: var(--primary-green);
}
/* Form helper text - Dark theme contrast */
.form-text {
	color: var(--text-secondary) !important;
	font-size: 0.875rem;
}
.form-text.text-muted {
	color: var(--text-secondary) !important;
}

/* Disabled states */
.form-control:disabled,.form-select:disabled,input:disabled,select:disabled,textarea:disabled {
	background-color: var(--bg-card);
	color: var(--text-muted);
	cursor: not-allowed;
	opacity: 0.6;
}
/* Placeholder text */
.form-control::placeholder,input::placeholder,textarea::placeholder {
	color: var(--text-muted);
	opacity: 0.8;
}
/* Select dropdown arrow */
.form-select,select {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23888888' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px 12px;
	padding-right: 2.5rem;
	appearance: none;
}
/* Form labels */
label {
	color: var(--text-secondary);
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 0.375rem;
	display: block;
}
/* Form groups */
.form-group {
	margin-bottom: 1rem;
}
/* Checkbox and Radio */
.form-check-input[type="checkbox"],.form-check-input[type="radio"],input[type="checkbox"],input[type="radio"] {
	background-color: var(--bg-darker);
	border: 1px solid var(--border-color);
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.125rem;
}
.form-check-input[type="checkbox"]:checked,input[type="checkbox"]:checked {
	background-color: var(--primary-green);
	border-color: var(--primary-green);
}
.form-check-input[type="radio"]:checked,input[type="radio"]:checked {
	background-color: var(--primary-green);
	border-color: var(--primary-green);
}
/* Range inputs */
input[type="range"] {
	background-color: transparent;
	appearance: none;
	height: 0.5rem;
}
input[type="range"]::-webkit-slider-track {
	background: var(--bg-darker);
	border-radius: 0.25rem;
	height: 0.5rem;
}
input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	background: var(--primary-green);
	border-radius: 50%;
	height: 1.25rem;
	width: 1.25rem;
	margin-top: -0.375rem;
	cursor: pointer;
}
input[type="range"]::-moz-range-track {
	background: var(--bg-darker);
	border-radius: 0.25rem;
	height: 0.5rem;
}
input[type="range"]::-moz-range-thumb {
	background: var(--primary-green);
	border: none;
	border-radius: 50%;
	height: 1.25rem;
	width: 1.25rem;
	cursor: pointer;
}
/* File inputs */
input[type="file"] {
	background-color: var(--bg-darker);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	padding: 0.5rem;
}
input[type="file"]::file-selector-button {
	background-color: var(--bg-card);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: 0.375rem;
	padding: 0.375rem 0.75rem;
	margin-right: 0.75rem;
	cursor: pointer;
	transition: all 0.2s ease;
}
input[type="file"]::file-selector-button:hover {
	background-color: var(--primary-green);
	border-color: var(--primary-green);
	color: var(--bg-dark);
}
/* Override Bootstrap form control backgrounds */
.form-control,.form-select {
	background-color: var(--bg-darker) !important;
	color: var(--text-primary) !important;
	border-color: var(--border-color) !important;
}
.form-control:focus,.form-select:focus {
	background-color: var(--bg-darker) !important;
	color: var(--text-primary) !important;
	border-color: var(--primary-green) !important;
}
.btn-primary {
	background-color: var(--primary-green);
	color: var(--bg-dark);
}
.btn-primary:hover {
	background-color: var(--primary-green-hover);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(0, 216, 22, 0.3);
}
.btn-outline-light {
	background-color: transparent;
	color: var(--text-primary);
	border: 2px solid var(--border-color);
}
.btn-outline-light:hover {
	background-color: var(--bg-card);
	border-color: var(--text-secondary);
}
.btn-outline-primary {
	background: transparent;
	color: var(--primary-green);
	border: 2px solid var(--primary-green);
}
.btn-outline-primary:hover {
	background: var(--primary-green);
	color: var(--bg-dark);
}
.btn-secondary {
	background-color: transparent;
	color: var(--text-primary);
	border: 2px solid var(--border-color);
}
.btn-secondary:hover {
	background-color: var(--bg-card-hover);
	border-color: var(--text-secondary);
}
.btn-block {
	width: 100%;
}
.btn-premium {
	background: linear-gradient(135deg, var(--gold) 0%, #f4d03f 100%);
	color: var(--bg-dark);
	font-weight: 600;
	border: none;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}
.btn-premium:hover {
	background: linear-gradient(135deg, #f4d03f 0%, var(--gold) 100%);
	color: var(--bg-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}
.btn-premium:active {
	transform: translateY(0px);
	box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
}
.btn-gold {
	background: var(--gold);
	color: var(--bg-dark);
	font-weight: 700;
}
.btn-gold:hover {
	background: var(--gold-hover);
}
/* Badge Styles */
.badge {
	font-weight: 600;
	letter-spacing: 0.5px;
}
.badge-premium {
	font-size: 0.625rem;
	background-color: transparent;
	color: var(--gold);
	border: 1px solid var(--gold);
	padding: 0.0625rem 0.3125rem;
	border-radius: 0.25rem;
	font-weight: 700;
	margin-left: 0.25rem;
}
.badge-pro {
	font-size: 0.625rem;
	background-color: transparent;
	color: var(--gold);
	border: 1px solid var(--gold);
	padding: 0.0625rem 0.3125rem;
	border-radius: 0.25rem;
	font-weight: 700;
	margin-left: auto;
}
/* Animations */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}
/* CSS Variables - Dark Theme */
/* Dark Theme Body
   NOTE: do NOT redeclare font-family here. The base `body` rule above
   sets 'Inter' as the primary family; setting it again at higher
   specificity (body.dark-theme is 0,0,1,1 vs body 0,0,0,1) was the
   site-wide "old font" bug — it dropped Inter from the stack on every
   page (every page renders <body class="dark-theme">). Keep this rule
   for the dark-theme bg/color/sizing only. */
body.dark-theme {
	background-color: var(--bg-dark);
	color: var(--text-primary);
	font-size: 16px;
	line-height: 1.6;
}
/* Text Utilities */
.text-primary {
	color: var(--primary-green) !important;
}
.text-secondary {
	color: var(--text-secondary) !important;
}
.text-muted {
	color: var(--text-muted) !important;
}

/* Status Text Colors - Table Content */
.text-success {
	color: var(--success) !important;
}
.text-danger {
	color: var(--danger) !important;
}
.text-warning {
	color: var(--warning) !important;
}
.text-info {
	color: var(--info) !important;
}

/* Enhanced visibility for table cells - High specificity to override card styles */
td.text-success,
th.text-success,
.card-front.show .table td.text-success,
.card-back.show .table td.text-success,
.card-left.show .table td.text-success,
.card-right.show .table td.text-success,
.table tbody td.text-success {
	color: var(--success) !important;
	font-weight: 600 !important;
}
td.text-danger,
th.text-danger,
.card-front.show .table td.text-danger,
.card-back.show .table td.text-danger,
.card-left.show .table td.text-danger,
.card-right.show .table td.text-danger,
.table tbody td.text-danger {
	color: var(--danger) !important;
	font-weight: 600 !important;
}
td.text-warning,
th.text-warning,
.card-front.show .table td.text-warning,
.card-back.show .table td.text-warning,
.card-left.show .table td.text-warning,
.card-right.show .table td.text-warning,
.table tbody td.text-warning {
	color: var(--warning) !important;
	font-weight: 600 !important;
}
td.text-info,
th.text-info,
.card-front.show .table td.text-info,
.card-back.show .table td.text-info,
.card-left.show .table td.text-info,
.card-right.show .table td.text-info,
.table tbody td.text-info {
	color: var(--info) !important;
	font-weight: 600 !important;
}
/* Footer Styles */
.site-footer {
	background-color: var(--bg-darker);
	border-top: 1px solid var(--border-color);
	color: var(--text-primary);
}
.site-footer .footer-logo {
	height: 36px;
	width: auto;
	max-width: 160px;
	display: block;
	filter: brightness(0) invert(1);
	transition: all 0.3s ease;
}
.site-footer .footer-logo:hover {
	filter: brightness(0) saturate(100%) invert(73%) sepia(38%) saturate(4459%) hue-rotate(116deg) brightness(94%) contrast(101%);
}
.site-footer .tagline {
	color: var(--primary-green);
	font-weight: 700;
	font-size: 1.25rem;
}
.site-footer .description {
	line-height: 1.7;
	font-size: 0.9rem;
}
.site-footer .footer-heading {
	color: var(--text-primary);
	font-weight: 700;
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.site-footer .footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}
.site-footer .footer-links a {
	color: var(--text-secondary);
	text-decoration: none;
	transition: all 0.3s ease;
	font-size: 0.9rem;
	display: inline-block;
}
.site-footer .footer-links a:hover {
	color: var(--primary-green);
	transform: translateX(3px);
}
/* Navigation System */
.top-nav {
	background-color: var(--bg-darker);
	border-bottom: 1px solid var(--border-color);
	position: sticky;
	top: 0;
	z-index: 1000;
	height: 65px; /* Fixed height to prevent movement */
}
.nav-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	padding: 0 1rem;
	gap: 1rem;
}
.logo {
	flex-shrink: 0; /* Prevent logo from shrinking */
}
.logo-img {
	height: 36px;
	width: auto;
}
.sports-nav {
	display: flex;
	gap: 0.5rem;
	flex: 1;
	justify-content: center;
	align-items: center;
}
.sport-nav-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	background-color: transparent;
	border: 1px solid transparent;
	color: var(--text-secondary);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: inherit;
	font-size: inherit;
}
.sport-nav-item:hover {
	background-color: var(--bg-card);
	color: var(--text-primary);
}
.sport-nav-item.active {
	background-color: var(--bg-card);
	color: var(--primary-green);
	border-color: var(--primary-green);
}
.sport-nav-item i {
	font-size: 1rem;
}
/* Offseason sports in the top nav are NOT dimmed — they read like every other
   sport (pages still resolve). The .offseason class is kept on the element so
   smart-navigation.js can still pick the default homepage sport. */
.sport-nav-item.offseason,
.sport-nav-item.offseason:hover,
.sport-nav-item.offseason.active {
	opacity: 1;
}

/* "More Sports" dropdown — collapses inactive sports off the top bar. */
.sport-nav-more {
	position: relative;
}
.sport-nav-more-toggle {
	/* inherits .sport-nav-item base styles */
	gap: 0.4rem;
}
.sport-nav-more.active .sport-nav-more-toggle {
	color: var(--primary-green);
	border-color: var(--primary-green);
	background-color: var(--bg-card);
}
.sport-nav-more-caret {
	font-size: 0.65rem;
	transition: transform 0.2s ease;
	opacity: 0.7;
}
.sport-nav-more.open .sport-nav-more-caret {
	transform: rotate(180deg);
}
.sport-nav-more-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	min-width: 240px;
	background: var(--bg-card, var(--bg-card));
	border: 1px solid var(--border-color, var(--border-color));
	border-radius: 0.6rem;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
	padding: 0.6rem;
	z-index: 1050;
	display: none;
}
.sport-nav-more.open .sport-nav-more-menu {
	display: block;
}
.sport-nav-more-eyebrow {
	font-size: 0.65rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted, var(--text-muted));
	margin: 0.1rem 0.6rem 0.45rem;
	font-weight: 700;
}
.sport-nav-more-item {
	display: grid;
	grid-template-columns: 1.1rem 1fr auto;
	align-items: center;
	gap: 0.65rem;
	width: 100%;
	background: transparent;
	border: 0;
	color: var(--text-secondary);
	padding: 0.55rem 0.65rem;
	border-radius: 0.45rem;
	cursor: pointer;
	font: inherit;
	text-align: left;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.sport-nav-more-item:hover {
	background: rgba(255, 255, 255, 0.04);
	color: var(--text-primary);
}
.sport-nav-more-item.active {
	color: var(--primary-green);
	background: rgba(0, 184, 148, 0.08);
}
.sport-nav-more-icon {
	font-size: 0.95rem;
	opacity: 0.75;
}
.sport-nav-more-label {
	font-weight: 600;
}
.sport-nav-more-meta {
	font-size: 0.7rem;
	color: var(--text-muted, var(--text-muted));
	font-weight: 500;
	white-space: nowrap;
}
.offseason-badge {
	margin-left: 0.4rem;
	padding: 0.12rem 0.45rem;
	background-color: var(--bg-darker, #121212);
	color: var(--text-muted, var(--text-muted));
	border: 1px solid var(--border-color, var(--border-color));
	border-radius: 0.5rem;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.offseason-dot {
	display: inline-block;
	width: 0.45rem;
	height: 0.45rem;
	margin-left: 0.35rem;
	background-color: var(--text-muted, var(--text-muted));
	border-radius: 50%;
	vertical-align: middle;
}
.sub-nav-offseason-notice {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.55rem 0.9rem;
	color: var(--text-secondary, var(--text-secondary));
	font-size: 0.95rem;
}
.sub-nav-offseason-notice .return-date {
	color: var(--text-muted, var(--text-muted));
	font-size: 0.85rem;
	margin-left: 0.4rem;
}
.mobile-offseason-notice {
	padding: 1rem 0.9rem;
	color: var(--text-secondary, var(--text-secondary));
	border-left: 3px solid var(--border-color, var(--border-color));
	margin: 0.5rem 0;
	background-color: var(--bg-card, var(--bg-card));
	border-radius: 0 0.35rem 0.35rem 0;
}
.mobile-offseason-notice small {
	color: var(--text-muted, var(--text-muted));
}
/* Sub Navigation */
.sub-nav {
	background-color: var(--bg-card);
	border-bottom: 1px solid var(--border-color);
	overflow: visible;
	display: block;
	position: sticky;
	top: 65px; /* Match exact height of top-nav */
	z-index: 100;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	height: 58px; /* Fixed height to prevent CLS */
}
.sub-nav .container-fluid {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	position: relative;
	overflow-x: auto; /* Allow horizontal scroll on small screens */
	overflow-y: visible; /* Prevent vertical clipping */
}

/* Submenu wrapper - prevent overflow and center properly */
.sub-nav-wrapper {
	display: none; /* Hidden by default */
	gap: 0.25rem;
	min-width: fit-content;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: calc(100vw - 2rem); /* Prevent overflow */
	flex-wrap: nowrap;
}

/* Prevent submenu overflow on smaller screens */
@media (max-width: 1200px) {
	.sub-nav-wrapper {
		position: static;
		transform: none;
		left: auto;
		top: auto;
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE/Edge */
		padding: 0 1rem;
	}
	
	.sub-nav-wrapper::-webkit-scrollbar {
		display: none; /* Chrome/Safari */
	}
}

.sub-nav-wrapper.active {
	display: flex; /* Show when active */
	opacity: 1 !important; /* Force opacity to 1 */
	visibility: visible !important; /* Force visibility */
	pointer-events: auto !important; /* Force enable interaction when visible */
	z-index: 10; /* Ensure active menu is on top */
}
.sub-nav-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	text-decoration: none;
	color: var(--text-secondary);
	transition: all 0.3s ease;
	font-weight: 500;
	white-space: nowrap;
}
.sub-nav-item:hover {
	background-color: var(--bg-card-hover);
	color: var(--text-primary);
}
.sub-nav-item.active {
	background-color: rgba(0, 216, 22, 0.1);
	color: var(--primary-green);
}
	/* Dropdown adjustments */
	.user-dropdown .dropdown-toggle {
		padding: 0.375rem 0.75rem;
		font-size: 0.813rem;
	}
	
	/* Adjust main content padding */
	.main-content {
		padding-top: 120px; /* Adjusted for wrapped navigation */
	}
}

/* Mobile Menu Toggle - Bootstrap Navbar Toggler Style */
.mobile-menu-toggle {
	display: none;
	padding: 0.25rem 0.75rem;
	font-size: 1.25rem;
	line-height: 1;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.25rem;
	transition: box-shadow 0.15s ease-in-out;
}

.mobile-menu-toggle:hover {
	border-color: rgba(255, 255, 255, 0.3);
}

.mobile-menu-toggle:focus {
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(0, 216, 22, 0.25);
}

/* Bootstrap Navbar Toggler Icon */
.navbar-toggler-icon {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28240, 240, 240, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}

/* Mobile Navigation */
.mobile-nav-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 1100;
}
.mobile-nav-overlay.active {
	opacity: 1;
	visibility: visible;
}
.mobile-nav-menu {
	position: fixed;
	top: 0;
	right: 0;
	/* Park the closed drawer with translateX, NOT right:-100%. A fixed
	   element at right:-100% still extends the page scroll width (body
	   overflow-x:hidden can't clip fixed elements), causing site-wide
	   horizontal scroll on mobile. translateX is visual-only and adds
	   nothing to scroll width. */
	transform: translateX(100%);
	width: 85%;
	max-width: 400px;
	height: 100vh;
	background-color: var(--bg-card);
	z-index: 1101;
	transition: transform 0.3s ease;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
.mobile-nav-menu.active {
	transform: translateX(0);
}
.mobile-nav-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	border-bottom: 1px solid var(--border-color);
}
.mobile-logo {
	height: 30px;
	width: auto;
}
.mobile-nav-close {
	font-size: 2rem;
	background: none;
	border: none;
	color: var(--text-primary);
	cursor: pointer;
	line-height: 1;
}
/* Mobile Sports Tabs */
.mobile-sports-tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	padding: 1rem;
	background-color: var(--bg-darker);
	border-bottom: 1px solid var(--border-color);
}
.mobile-sport-tab {
	padding: 0.75rem;
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	color: var(--text-secondary);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}
.mobile-sport-tab:hover {
	background-color: var(--bg-card-hover);
	color: var(--text-primary);
}
.mobile-sport-tab.active {
	background-color: var(--primary-green);
	color: var(--bg-dark);
	border-color: var(--primary-green);
}
/* Mobile Menu Content */
.mobile-menu-content {
	flex: 1;
	padding: 1rem;
}
.mobile-sport-menu {
	display: none;
}
.mobile-sport-menu.active {
	display: block;
}
.mobile-sport-menu a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	color: var(--text-secondary);
	text-decoration: none;
	border-radius: 0.5rem;
	transition: all 0.3s ease;
}
.mobile-sport-menu a:hover {
	background-color: var(--bg-darker);
	color: var(--text-primary);
}
.mobile-sport-menu a.premium {
	color: var(--gold);
}
.mobile-nav-footer {
	padding: 1rem;
	border-top: 1px solid var(--border-color);
}
/* Nav Actions - right side of navigation */
.nav-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0; /* Prevent shrinking */
}
/* Main Content */
.main-content {
	padding: 2rem 0;
	min-height: calc(100vh - 120px);
}

/* Sport Homepage Content */
.sport-homepage-content {
	display: block;
}
/* Dashboard Card */
.dashboard-card {
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 0.75rem;
	margin-bottom: 1.5rem;
	overflow: hidden;
}
.card-header {
	padding: 1.25rem;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.card-header h2,.card-header h3 {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
/* Bottom Features */
.bottom-features {
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid var(--border-color);
}
.info-card {
	text-align: center;
	padding: 2rem;
}
.info-card i {
	font-size: 2.5rem;
	color: var(--primary-green);
	margin-bottom: 1rem;
	display: block;
}
.info-card h4 {
	margin-bottom: 0.75rem;
}
.info-card p {
	color: var(--text-secondary);
	margin: 0;
}
/* NFL Specific Styles */
.sport-dashboard {
	animation: fadeIn 0.3s ease;
}
.sport-dashboard.nfl-optimized {
	padding: 1rem 0;
	overflow-x: hidden;
	max-width: 100%;
}
/* Hero Focus Section */
.hero-focus {
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(0, 184, 148, 0.03) 100%);
	border: 1px solid var(--border-color);
	border-radius: 1rem;
	padding: 3rem;
	margin-bottom: 2.5rem;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.hero-focus::before {
	content: '';
	position: absolute;
	top: 0;
	right: -20%;
	width: 40%;
	height: 100%;
	background: radial-gradient(circle at center, var(--primary-green) 0%, transparent 70%);
	opacity: 0.03;
	pointer-events: none;
}
.focus-header {
	margin-bottom: 2rem;
}
.focus-title {
	font-size: 3rem;
	font-weight: 800;
	margin: 0 0 0.5rem 0;
	letter-spacing: -0.02em;
}
.focus-subtitle {
	font-size: 1.125rem;
	color: var(--text-secondary);
	margin: 0;
}
.focus-actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}
.focus-actions .btn {
	padding: 0.875rem 2rem;
}
/* Content Grid */
.nfl-content-grid,
.nba-content-grid,
.mlb-content-grid,
.nhl-content-grid,
.cbb-content-grid,
.cfb-content-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 2rem;
	max-width: 1400px;
	margin: 0 auto;
}
/* Value Hub - 4 Key Tools */
.value-hub {
	margin-bottom: 2rem;
}
.tool-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
.tool-box {
	background: var(--bg-card);
	border-radius: 0.75rem;
	padding: 1.5rem;
	text-align: center;
	text-decoration: none;
	color: var(--text-primary);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}
.tool-box:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.tool-box.optimizer {
	border-top: 3px solid var(--primary-green);
}
.tool-box.props {
	border-top: 3px solid var(--gold);
}
.tool-box.projections {
	border-top: 3px solid var(--info);
}
.tool-box.dvp {
	border-top: 3px solid var(--danger);
}
.tool-box.rankings {
	border-top: 3px solid var(--warning);
}
.tool-box.injuries {
	border-top: 3px solid var(--danger);
}
.tool-box.stacks {
	border-top: 3px solid var(--purple);
}
.tool-box.goalies {
	border-top: 3px solid var(--info);
}
.tool-box.lineups {
	border-top: 3px solid var(--success);
}
.tool-icon {
	width: 48px;
	height: 48px;
	margin: 0 auto 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--bg-darker);
	font-size: 1.25rem;
}
.tool-box.optimizer .tool-icon {
	color: var(--primary-green);
	background: rgba(0, 184, 148, 0.1);
}
.tool-box.props .tool-icon {
	color: var(--gold);
	background: rgba(255, 215, 0, 0.1);
}
.tool-box.projections .tool-icon {
	color: var(--info);
	background: rgba(52, 152, 219, 0.1);
}
.tool-box.dvp .tool-icon {
	color: var(--danger);
	background: rgba(231, 76, 60, 0.1);
}
.tool-box.rankings .tool-icon {
	color: var(--warning);
	background: rgba(243, 156, 18, 0.1);
}
.tool-box.injuries .tool-icon {
	color: var(--danger);
	background: rgba(231, 76, 60, 0.1);
}
.tool-box.stacks .tool-icon {
	color: var(--purple);
	background: rgba(155, 89, 182, 0.1);
}
.tool-box.goalies .tool-icon {
	color: var(--info);
	background: rgba(52, 152, 219, 0.1);
}
.tool-box.lineups .tool-icon {
	color: var(--success);
	background: rgba(0, 184, 148, 0.1);
}
.tool-box h3 {
	margin: 0 0 0.5rem 0;
	font-size: 1.125rem;
}
.tool-box p {
	margin: 0 0 0.75rem 0;
	font-size: 0.875rem;
	color: var(--text-secondary);
}
.tool-stat {
	display: block;
	font-weight: 700;
	color: var(--primary-green);
	font-size: 0.875rem;
}
/* Top Projections Section */
.projections-showcase {
	background: var(--bg-card);
	border-radius: 0.75rem;
	padding: 1.5rem;
	margin-bottom: 2rem;
}
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border-color);
}
.section-header h2 {
	margin: 0;
	font-size: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.view-all-link {
	color: var(--primary-green);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.875rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.view-all-link:hover {
	text-decoration: underline;
}
/* Projections Table */
.projections-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 1.5rem;
}
.projections-table {
	width: 100%;
	border-collapse: collapse;
}
.projections-table thead {
	background: var(--bg-darker);
}
.projections-table th {
	padding: 0.875rem 1rem;
	text-align: left;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--text-secondary);
	border-bottom: 2px solid var(--border-color);
}
.projections-table tbody tr {
	border-bottom: 1px solid var(--border-color);
	transition: all 0.2s;
}
.projections-table tbody tr:hover {
	background: rgba(0, 184, 148, 0.03);
}
.proj-row.elite {
	background: rgba(0, 184, 148, 0.02);
}
.projections-table td {
	padding: 1rem;
	font-size: 0.9375rem;
}
.rank-cell {
	font-weight: 700;
	color: var(--text-secondary);
	width: 50px;
}
.player-name {
	font-weight: 600;
	color: var(--text-primary);
}

/* Hot/Cold Performance Indicators */
.player-hot {
	color: #ff4444 !important;
	margin-left: 3px;
	font-size: 14px;
}

.player-cold {
	color: #4da6ff !important;
	margin-left: 3px;
	font-size: 14px;
}
.pos-badge {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
}
/* Position badges — Reserve-harmonized muted palette. Each hue is
   ~50% saturation so the column reads as a calm scan, not a row of
   neon chips. Order of priority: keep enough hue distinction that
   colorblind users still get redundant cues from the position letter. */
.pos-badge.qb { background: rgba(201, 122, 107, 0.15);  color: #C97A6B; }
.pos-badge.rb { background: rgba(212, 175, 96, 0.15);   color: var(--primary-green); }
.pos-badge.wr { background: rgba(119, 148, 176, 0.15);  color: var(--info); }
.pos-badge.te { background: rgba(155, 123, 174, 0.15);  color: #9B7BAE; }
/* NBA Position Badges */
.pos-badge.pg { background: rgba(201, 122, 107, 0.15);  color: #C97A6B; }
.pos-badge.sg { background: rgba(201, 149, 107, 0.15);  color: #C9956B; }
.pos-badge.sf { background: rgba(119, 148, 176, 0.15);  color: #7794B0; }
.pos-badge.pf { background: rgba(155, 123, 174, 0.15);  color: #9B7BAE; }
.pos-badge.c  { background: rgba(212, 175, 96, 0.15);   color: var(--primary-green); }
.pos-badge.g  { background: rgba(224, 162, 58, 0.15);   color: var(--warning); }
.pos-badge.f  { background: rgba(126, 148, 168, 0.15);  color: #7E94A8; }
/* NHL Position Badges */
[data-sport="nhl"] .pos-badge.c  { background: rgba(212, 175, 96, 0.15);   color: var(--primary-green); }
[data-sport="nhl"] .pos-badge.lw { background: rgba(201, 122, 107, 0.15);  color: #C97A6B; }
[data-sport="nhl"] .pos-badge.rw { background: rgba(201, 149, 107, 0.15);  color: #C9956B; }
[data-sport="nhl"] .pos-badge.d  { background: rgba(119, 148, 176, 0.15);  color: #7794B0; }
[data-sport="nhl"] .pos-badge.g  { background: rgba(155, 123, 174, 0.15);  color: #9B7BAE; }
.matchup-cell {
	color: var(--text-secondary);
}
.proj-pts {
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--primary-green);
}
.salary {
	font-weight: 600;
}
.value-cell {
	font-weight: 600;
	color: var(--primary-green);
}
.ownership {
	color: var(--text-secondary);
}
/* Projections Footer */
.projections-footer {
	text-align: center;
	padding-top: 1rem;
}
/* Matchup & Weather Grid */
.matchup-weather-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: 2rem;
}
.weather-impact,.elite-matchups {
	background: var(--bg-card);
	border-radius: 0.75rem;
	overflow: hidden;
}
.header-link {
	color: var(--primary-green);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
}
/* Performance Cards - Reusable card styles for weather, player performance, etc. */
.performance-card {
	background-color: var(--bg-card);
	border-radius: 0.75rem;
	padding: 1.5rem;
	border: 1px solid var(--border-color);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}
.performance-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
/* Performance Card Variants */
.performance-card.severe {
	border-color: rgba(255, 59, 48, 0.3);
	background: linear-gradient(135deg, rgba(255, 59, 48, 0.05) 0%, var(--bg-card) 100%);
}
.performance-card.moderate {
	border-color: rgba(255, 159, 10, 0.3);
	background: linear-gradient(135deg, rgba(255, 159, 10, 0.05) 0%, var(--bg-card) 100%);
}
.performance-card.cold {
	border-color: rgba(90, 200, 250, 0.3);
	background: linear-gradient(135deg, rgba(90, 200, 250, 0.05) 0%, var(--bg-card) 100%);
}
.performance-card.elite {
	border-color: rgba(0, 184, 148, 0.3);
	background: linear-gradient(135deg, rgba(0, 184, 148, 0.05) 0%, var(--bg-card) 100%);
}

/* Subscription/Pricing Cards - Minimal Design */
.subscription-hero {
	text-align: center;
	padding: 3rem 0 2rem;
}

.subscription-hero h1 {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: var(--text-primary);
}

.subscription-hero p {
	font-size: 1.125rem;
	color: var(--text-secondary);
	margin: 0;
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.5rem;
	margin: 3rem 0;
}

.pricing-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 2rem;
	transition: border-color 0.2s ease;
	display: flex;
	flex-direction: column;
}

.pricing-card:hover {
	border-color: var(--primary-green);
}

.pricing-card.featured {
	border-color: var(--primary-green);
	position: relative;
}

.pricing-card.featured::before {
	content: 'BEST VALUE';
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--primary-green);
	color: white;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0.25rem 1rem;
	border-radius: 20px;
}

.plan-name {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: var(--text-primary);
}

.plan-description {
	font-size: 0.875rem;
	color: var(--text-secondary);
	margin-bottom: 1.5rem;
}

.plan-price {
	margin-bottom: 2rem;
}

.price-amount {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--primary-green);
}

.price-period {
	font-size: 1rem;
	color: var(--text-secondary);
	font-weight: 400;
}

.price-note {
	font-size: 0.875rem;
	color: var(--text-secondary);
	margin-top: 0.5rem;
}

.plan-features {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem 0;
	flex-grow: 1;
}

.plan-features li {
	padding: 0.75rem 0;
	color: var(--text-secondary);
	display: flex;
	align-items: start;
	gap: 0.75rem;
}

.plan-features li i {
	color: var(--primary-green);
	font-size: 1rem;
	flex-shrink: 0;
	margin-top: 0.125rem;
}

.plan-button {
	background: transparent;
	border: 2px solid var(--primary-green);
	color: var(--primary-green);
	padding: 0.875rem 2rem;
	border-radius: 6px;
	font-weight: 600;
	font-size: 1rem;
	text-align: center;
	transition: all 0.2s ease;
	cursor: pointer;
	text-decoration: none;
	display: block;
	width: 100%;
}

.plan-button:hover {
	background: var(--primary-green);
	color: white;
}

.pricing-card.featured .plan-button {
	background: var(--primary-green);
	color: white;
}

.pricing-card.featured .plan-button:hover {
	background: var(--primary-green-hover);
	border-color: var(--primary-green-hover);
}

.limited-access-info {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 1.5rem;
	margin-bottom: 2rem;
	text-align: center;
}

.limited-access-info h3 {
	color: var(--text-primary);
	font-size: 1.125rem;
	margin-bottom: 0.5rem;
}

.limited-access-info p {
	color: var(--text-secondary);
	margin: 0;
}

.trust-signals {
	display: flex;
	justify-content: center;
	gap: 3rem;
	margin: 3rem 0;
	color: var(--text-secondary);
	font-size: 0.875rem;
}

.trust-signals i {
	color: var(--primary-green);
	margin-right: 0.5rem;
}

/* Account Page Styles */
.account-wrapper {
	padding: 2rem 0;
	min-height: calc(100vh - 200px);
}

.account-sidebar {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 1rem;
	margin-bottom: 2rem;
}

.account-nav {
	list-style: none;
	padding: 0;
	margin: 0;
}

.account-nav li {
	margin-bottom: 0.25rem;
}

.account-nav li.divider {
	height: 1px;
	background: var(--bg-darker);
	margin: 1rem 0;
}

.account-nav a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	color: var(--text-secondary);
	text-decoration: none;
	border-radius: 4px;
	transition: all 0.2s ease;
}

.account-nav a:hover {
	background: rgba(0, 184, 148, 0.1);
	color: var(--text-primary);
}

.account-nav li.active a {
	background: rgba(0, 184, 148, 0.15);
	color: var(--primary-green);
}

.account-nav i {
	width: 20px;
	text-align: center;
}

.account-content {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 2rem;
	min-height: 500px;
}

@media (max-width: 768px) {
	.account-sidebar {
		margin-bottom: 1rem;
	}
	
	.account-content {
		padding: 1.5rem;
	}
}

/* Weather Impact Specific Styles */
.weather-impact-preview {
	padding: 1.5rem;
}
.weather-games-grid {
	display: grid;
	gap: 1.25rem;
}
.weather-severity {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}
.severity-badge {
	font-size: 0.625rem;
	font-weight: 700;
	padding: 0.25rem 0.75rem;
	border-radius: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.performance-card.severe .severity-badge {
	background: rgba(255, 59, 48, 0.15);
	color: #FF3B30;
}
.performance-card.moderate .severity-badge {
	background: rgba(255, 159, 10, 0.15);
	color: #FF9F0A;
}
.performance-card.cold .severity-badge {
	background: rgba(90, 200, 250, 0.15);
	color: #5AC8FA;
}
.performance-card.elite .severity-badge {
	background: rgba(0, 184, 148, 0.15);
	color: var(--primary-green);
}
.weather-severity i {
	font-size: 1.125rem;
	opacity: 0.8;
}
.performance-card.severe .weather-severity i {
	color: #FF3B30;
}
.performance-card.moderate .weather-severity i {
	color: #FF9F0A;
}
.performance-card.cold .weather-severity i {
	color: #5AC8FA;
}
.performance-card.elite .weather-severity i {
	color: var(--primary-green);
}
.weather-game-info {
	margin-bottom: 1rem;
}
.teams-weather {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
}
.away-team,.home-team {
	color: var(--text-primary);
}
.at-symbol {
	color: var(--text-secondary);
	font-weight: 400;
}
.weather-conditions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	font-size: 0.875rem;
	color: var(--text-secondary);
}
.weather-conditions i {
	font-size: 1rem;
	color: var(--text-muted);
}
.condition {
	font-weight: 600;
}
.wind {
	color: var(--text-muted);
}
.weather-impact-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}
.impact-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--text-secondary);
}
.impact-item i {
	font-size: 0.875rem;
	color: var(--primary-green);
}
.weather-recommendation {
	padding-top: 1rem;
	border-top: 1px solid var(--border-color);
	font-size: 0.875rem;
}
.rec-label {
	font-weight: 600;
	color: var(--text-secondary);
	margin-right: 0.5rem;
}
.rec-text {
	color: var(--primary-green);
	font-weight: 500;
}
.matchup-list {
	padding: 1.25rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
.matchup {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.2fr;
	gap: 0.75rem;
	align-items: center;
	padding: 1rem;
	background: var(--bg-darker);
	border-radius: 0.5rem;
	transition: all 0.3s ease;
}
.matchup:hover {
	background: var(--bg-card-hover);
	transform: translateX(2px);
}
.matchup.elite {
	border-left: 4px solid var(--primary-green);
	background: linear-gradient(90deg, rgba(0, 184, 148, 0.05) 0%, var(--bg-darker) 100%);
}
.matchup.excellent {
	border-left: 4px solid var(--info);
	background: linear-gradient(90deg, rgba(52, 152, 219, 0.05) 0%, var(--bg-darker) 100%);
}
.matchup.good {
	border-left: 4px solid var(--text-secondary);
}
.matchup-player {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.position-tag {
	font-size: 0.625rem;
	font-weight: 700;
	padding: 0.125rem 0.375rem;
	border-radius: 0.25rem;
	text-transform: uppercase;
}
.position-tag.rb {
	background: rgba(0, 184, 148, 0.15);
	color: var(--primary-green);
}
.position-tag.wr {
	background: rgba(52, 152, 219, 0.15);
	color: var(--info);
}
.position-tag.te {
	background: rgba(155, 89, 182, 0.15);
	color: #9B59B6;
}
.position-tag.qb {
	background: rgba(231, 76, 60, 0.15);
	color: var(--danger);
}
.matchup .vs {
	color: var(--text-secondary);
	font-size: 0.875rem;
	font-weight: 500;
}
.matchup .stat {
	color: var(--primary-green);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: right;
}
/* Sidebar Widgets */
.sidebar-widget {
	background: var(--bg-card);
	border-radius: 0.75rem;
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}
.sidebar-widget h3 {
	margin: 0 0 1rem 0;
	font-size: 1.125rem;
}
/* Slates Widget */
.slates-widget {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
}
.slates-list {
	display: grid;
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}
.slate-platform {
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	overflow: hidden;
}
.platform-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 1rem;
	background: var(--bg-darker);
	border-bottom: 1px solid var(--border-color);
}
.slate-count {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--primary-green);
}
.slate-item {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border-color);
	transition: all 0.3s ease;
}
.slate-item:last-child {
	border-bottom: none;
}
.slate-item:hover {
	background: var(--bg-card-hover);
}
.slate-item.main {
	background: linear-gradient(90deg, rgba(0, 184, 148, 0.03) 0%, transparent 100%);
}
.slate-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}
.slate-name {
	font-weight: 600;
	color: var(--text-primary);
	font-size: 0.875rem;
}
.slate-games {
	font-size: 0.75rem;
	color: var(--text-secondary);
}
.slate-time {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.75rem;
}
.start-time {
	color: var(--primary-green);
	font-weight: 600;
}
.entries {
	color: var(--text-muted);
}
/* Live Scores */
.live-scores {
	display: grid;
	gap: 0.75rem;
	margin-bottom: 1rem;
}
.score-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem;
	background: var(--bg-darker);
	border-radius: 0.375rem;
}
.score-item.in-progress {
	border-left: 3px solid var(--primary-green);
}
.teams {
	display: flex;
	gap: 0.75rem;
	font-weight: 600;
}
.winning {
	color: var(--primary-green);
}
.quarter {
	font-size: 0.75rem;
	color: var(--text-secondary);
}
/* Premium Widget */
.premium-widget {
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(255, 215, 0, 0.05) 100%);
	border: 1px solid rgba(255, 215, 0, 0.2);
	text-align: center;
}
.premium-icon {
	font-size: 2.5rem;
	margin-bottom: 0.75rem;
}
.premium-widget h4 {
	margin: 0 0 1rem 0;
}
.premium-features {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem 0;
	text-align: left;
}
.premium-features li {
	padding: 0.5rem 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
}
.premium-features i {
	color: var(--primary-green);
}
.trial-note {
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin: 0.5rem 0 0 0;
}
.sidebar-link {
	display: block;
	text-align: center;
	color: var(--primary-green);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
}
/* Coming Soon */
.coming-soon {
	padding: 3rem;
	text-align: center;
	color: var(--text-secondary);
}
/* Responsive Styles */
@media (max-width: 1200px) {
	.nfl-content-grid,
	.nba-content-grid,
	.mlb-content-grid,
	.nhl-content-grid,
	.cbb-content-grid {
		grid-template-columns: 1fr;
	}
	.tool-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.matchup-list {
		grid-template-columns: 1fr;
	}
}
/* Mobile Navigation - Tablets and Phones */
/* iPad and tablet responsive breakpoint */
@media (max-width: 1024px) {
	/* Hide sports navigation on tablets */
	.sports-nav {
		display: none;
	}
	
	/* Hide sub-nav on tablets */
	.sub-nav {
		display: none;
		height: auto;
	}
	
	/* Show mobile menu toggle on tablets */
	.mobile-menu-toggle {
		display: block !important;
	}
	
	/* Ensure submenu doesn't overflow on tablets when visible */
	.sub-nav-wrapper {
		position: static;
		transform: none;
		left: auto;
		top: auto;
		width: 100%;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	
	.sub-nav-item {
		font-size: 0.875rem;
		padding: 0.375rem 0.75rem;
	}
}

@media (max-width: 991px) {
	/* Top nav adjustments */
	.top-nav {
		height: auto;
		padding: 0.75rem 0;
	}
	
	/* Hide desktop nav buttons except login */
	.nav-actions .btn-premium {
		display: none;
	}
	
	/* Show mobile menu toggle */
	.mobile-menu-toggle {
		display: inline-block;
	}
	
	/* Hide sports navigation entirely on mobile */
	.sports-nav {
		display: none;
	}
	
	/* Hide sub-nav entirely on mobile */
	.sub-nav {
		display: none;
		height: auto;
	}
	
	/* Default button size for tablets */
	.nav-actions .btn-outline-light {
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
	}
	
	/* Default logo size for tablets */
	.logo-img {
		height: 40px;
	}
	
	/* Phone-specific styles */
	@media (max-width: 768px) {
		/* Make login button smaller on phones */
		.nav-actions .btn-outline-light {
			padding: 0.375rem 0.75rem;
			font-size: 0.875rem;
		}
		
		/* Smaller logo on phones */
		.logo-img {
			height: 30px;
		}
	}
	/* Adjust main content padding since no sub-nav */
	.main-content {
		padding-top: 1rem;
	}
	/* Hero Focus Mobile */
	.hero-focus {
		padding: 1.5rem;
		margin-bottom: 1.5rem;
	}
	.focus-title {
		font-size: 2rem;
	}
	.focus-subtitle {
		font-size: 1rem;
	}
	.focus-actions {
		flex-direction: column;
		gap: 0.75rem;
	}
	.focus-actions .btn {
		width: 100%;
		padding: 0.75rem 1.5rem;
		font-size: 0.875rem;
	}
	/* Value Hub - 4 Tools Mobile */
	.tool-grid {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
	.tool-box {
		padding: 1rem;
		display: grid;
		grid-template-columns: auto 1fr auto;
		gap: 1rem;
		align-items: center;
		text-align: left;
	}
	.tool-icon {
		width: 40px;
		height: 40px;
		margin: 0;
	}
	.tool-box h3 {
		font-size: 1rem;
		margin: 0;
	}
	.tool-box p {
		display: none;
	}
	.tool-stat {
		font-size: 0.75rem;
		text-align: right;
	}
	/* Projections Table Mobile */
	.projections-showcase {
		padding: 1rem;
	}
	.section-header {
		flex-direction: column;
		gap: 0.5rem;
		align-items: flex-start;
	}
	.section-header h2 {
		font-size: 1.25rem;
	}
	.projections-table-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.projections-table {
		font-size: 0.75rem;
		min-width: 500px;
	}
	.projections-table th,.projections-table td {
		padding: 0.5rem 0.375rem;
	}
	.proj-pts {
		font-size: 0.875rem;
	}
	.pos-badge {
		font-size: 0.625rem;
		padding: 0.125rem 0.25rem;
	}
	/* Performance Cards Mobile */
	.performance-card {
		padding: 1rem;
	}
	.teams-weather {
		font-size: 1rem;
	}
	.weather-conditions {
		font-size: 0.75rem;
		flex-wrap: wrap;
	}
	.weather-impact-stats {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
	.impact-item {
		font-size: 0.75rem;
	}
	/* Elite Matchups Mobile */
	.matchup {
		grid-template-columns: 1fr;
		gap: 0.5rem;
		padding: 0.75rem;
	}
	.matchup-player {
		margin-bottom: 0.25rem;
	}
	.matchup .vs,.matchup .stat {
		font-size: 0.75rem;
	}
	.matchup .stat {
		text-align: left;
		color: var(--text-secondary);
	}
	/* Sidebar Mobile */
	.content-sidebar {
		margin-top: 2rem;
	}
	.sidebar-widget {
		padding: 1rem;
	}
	.slate-platform {
		font-size: 0.875rem;
	}
	.slate-item {
		padding: 0.625rem 0.75rem;
	}
	.slate-name {
		font-size: 0.8125rem;
	}
	.slate-games,.slate-time {
		font-size: 0.6875rem;
	}
	/* Premium Widget Mobile */
	.premium-widget {
		padding: 1.5rem 1rem;
	}
	.premium-icon {
		font-size: 2rem;
	}
	.premium-features {
		font-size: 0.8125rem;
	}
	/* Button adjustments */
	.btn-block {
		padding: 0.75rem;
		font-size: 0.875rem;
	}
}
@media (max-width: 480px) {
	/* Extra small devices */
	.focus-title {
		font-size: 1.75rem;
	}
	.projections-table {
		font-size: 0.7rem;
	}
	.projections-table th,.projections-table td {
		padding: 0.375rem 0.25rem;
	}
	/* Hide less important columns on very small screens */
	.projections-table th:nth-child(7),.projections-table td:nth-child(7),.projections-table th:nth-child(8),.projections-table td:nth-child(8) {
		display: none;
	}
}
/* Scrollbar Styles */
::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
	background: var(--bg-card);
	border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--bg-card);
}
/* Hide scrollbar on mobile for sports nav */
@media (max-width: 768px) {
	.sports-nav::-webkit-scrollbar {
		display: none;
	}
	.sports-nav {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.sub-nav::-webkit-scrollbar {
		height: 4px;
	}
	.sub-nav::-webkit-scrollbar-track {
		background: var(--bg-darker);
	}
	.sub-nav::-webkit-scrollbar-thumb {
		background: var(--bg-darker);
		border-radius: 2px;
	}
}
/* Footer responsive */
@media (max-width: 768px) {
	.site-footer .text-md-end {
		text-align: left !important;
		margin-top: 1rem;
	}
}
/* Transitions for Sport Switching */
/* Remove old animation as we're using CSS transitions instead */
}
/* Bootstrap class extensions */
.border-top {
	border-color: var(--border-color) !important;
}
/* Utility Classes */
.list-unstyled {
	list-style: none;
	padding: 0;
	margin: 0;
}
.small {
	font-size: 0.875rem;
}
.fw-bold {
	font-weight: 700 !important;
}
/* ===== GLOBAL SPACING UTILITY CLASSES ===== */
/* Page Layout Classes - Use these for consistent page structure */
.page-container {
	padding-left: var(--page-padding-x);
	padding-right: var(--page-padding-x);
}

.section-spacing {
	margin-bottom: var(--section-spacing);
}

@media (max-width: 768px) {
	.page-container {
		padding-left: var(--page-padding-x-mobile);
		padding-right: var(--page-padding-x-mobile);
	}
	
	.section-spacing {
		margin-bottom: var(--section-spacing-mobile);
	}
}

/* Bootstrap spacing utilities used */
.py-5 {
	padding-top: 3rem !important;
	padding-bottom: 3rem !important;
}
.mb-0 {
	margin-bottom: 0 !important;
}
.mb-2 {
	margin-bottom: 0.5rem !important;
}
.mb-3 {
	margin-bottom: 1rem !important;
}
.mb-4 {
	margin-bottom: 1.5rem !important;
}
.me-2 {
	margin-right: 0.5rem !important;
}
.me-3 {
	margin-right: 1rem !important;
}
/* Bootstrap grid utilities used */
.container-fluid {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

/* Limited width container for better readability */
.container-fluid.limited {
	max-width: 1500px;
}

/* MLB Position Badges */
.pos-badge.mlb-p { background-color: #9B59B6; }
.pos-badge.mlb-c { background-color: #E74C3C; }
.pos-badge.mlb-1b { background-color: #3498DB; }
.pos-badge.mlb-2b { background-color: #F39C12; }
.pos-badge.mlb-3b { background-color: var(--primary-green); }
.pos-badge.mlb-ss { background-color: #E67E22; }
.pos-badge.mlb-of { background-color: #5DADE2; }
.pos-badge.mlb-dh { background-color: #95A5A6; }

/* Weather Alert Styles */
.weather-widget {
	background: var(--bg-darker);
	padding: 1.25rem;
	border-radius: 0.75rem;
}

.weather-alerts {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.weather-alert {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.05);
	transition: all 0.2s ease;
}

.weather-alert:hover {
	background: rgba(255, 255, 255, 0.05);
	transform: translateX(2px);
}

.weather-alert.positive {
	border-left: 3px solid var(--success);
}

.weather-alert.positive i {
	color: var(--success);
}

.weather-alert.negative {
	border-left: 3px solid var(--danger);
}

.weather-alert.negative i {
	color: var(--danger);
}

.weather-alert.warning {
	border-left: 3px solid var(--warning);
}

.weather-alert.warning i {
	color: var(--warning);
}

.alert-content {
	flex: 1;
}

.alert-content strong {
	display: block;
	color: var(--text-primary);
	font-size: 0.875rem;
	margin-bottom: 0.125rem;
}

.alert-content span {
	color: var(--text-secondary);
	font-size: 0.8125rem;
}

/* Stadium name styling */
.stadium-name {
	font-weight: 600;
	color: var(--text-primary);
}

.game-matchup {
	margin-top: 0.25rem;
	color: var(--text-secondary);
	font-size: 0.875rem;
}

/* Game title for NHL */
.game-title {
	font-weight: 600;
	color: var(--text-primary);
	font-size: 0.9375rem;
}

/* Lineup Widget Styles */
.lineup-widget {
	background: var(--bg-darker);
	padding: 1.25rem;
	border-radius: 0.75rem;
}

.lineup-updates {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.lineup-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.05);
	transition: all 0.2s ease;
}

.lineup-item:hover {
	background: rgba(255, 255, 255, 0.05);
	transform: translateX(2px);
}

.lineup-item.confirmed {
	border-left: 3px solid var(--success);
}

.lineup-item.confirmed i {
	color: var(--success);
}

.lineup-item.change {
	border-left: 3px solid var(--primary-green);
}

.lineup-item.change i {
	color: var(--primary-green);
}

.lineup-item.injury {
	border-left: 3px solid var(--warning);
}

.lineup-item.injury i {
	color: var(--warning);
}

.lineup-content {
	flex: 1;
}

.lineup-content strong {
	display: block;
	color: var(--text-primary);
	font-size: 0.875rem;
	margin-bottom: 0.125rem;
}

.lineup-content span {
	color: var(--text-secondary);
	font-size: 0.8125rem;
}

/* Conference/Rankings Widget Styles */
.conference-widget {
	background: var(--bg-darker);
	padding: 1.25rem;
	border-radius: 0.75rem;
}

.ranking-updates {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ranking-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.05);
	transition: all 0.2s ease;
}

.ranking-item:hover {
	background: rgba(255, 255, 255, 0.05);
	transform: translateX(2px);
}

.ranking-item.up {
	border-left: 3px solid var(--success);
}

.ranking-item.up i {
	color: var(--success);
}

.ranking-item.down {
	border-left: 3px solid var(--danger);
}

.ranking-item.down i {
	color: var(--danger);
}

.ranking-item.new {
	border-left: 3px solid var(--warning);
}

.ranking-item.new i {
	color: var(--warning);
}

.ranking-content {
	flex: 1;
}

.ranking-content strong {
	display: block;
	color: var(--text-primary);
	font-size: 0.875rem;
	margin-bottom: 0.125rem;
}

.ranking-content .move {
	font-size: 0.75rem;
	margin-left: 0.5rem;
	color: inherit;
}

.ranking-item.up .move {
	color: var(--success);
}

.ranking-item.down .move {
	color: var(--danger);
}

.ranking-item.new .move {
	color: var(--warning);
}

.ranking-content span:not(.move) {
	color: var(--text-secondary);
	font-size: 0.8125rem;
}

/* Global DataTables Dark Theme Styling */
.dataTables_wrapper .dataTables_paginate .paginate_button {
	color: var(--text-primary) !important;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	padding: 0.375rem 0.75rem;
	margin: 0 2px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: var(--bg-darker) !important;
	border-color: var(--primary-green) !important;
	color: var(--primary-green) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: var(--primary-green) !important;
	border-color: var(--primary-green) !important;
	color: white !important;
	cursor: default;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
	color: var(--text-muted) !important;
	background: var(--bg-card) !important;
	border-color: var(--border-color) !important;
	cursor: not-allowed;
	opacity: 0.5;
}

.dataTables_wrapper .dataTables_info {
	color: var(--text-secondary);
}

.dataTables_wrapper .dataTables_filter input {
	background-color: var(--bg-darker);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	padding: 0.375rem 0.75rem;
	border-radius: 4px;
	transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
	border-color: var(--primary-green);
	box-shadow: 0 0 0 0.2rem rgba(0, 184, 148, 0.25);
	outline: none;
}

.dataTables_wrapper .dataTables_filter label {
	color: var(--text-primary);
	font-weight: normal;
	margin-bottom: 0;
}

.dataTables_wrapper .dataTables_length select {
	background-color: var(--bg-darker);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	padding: 0.375rem 2rem 0.375rem 0.75rem;
	border-radius: 4px;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}
.g-4 {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 1.5rem;
}
.col-md-4 {
	flex: 0 0 auto;
	width: 33.3333333333%;
}
.col-md-6 {
	flex: 0 0 auto;
	width: 50%;
}
.col-lg-2 {
	flex: 0 0 auto;
	width: 16.6666666667%;
}
.col-lg-3 {
	flex: 0 0 auto;
	width: 25%;
}
@media (max-width: 768px) {
	.col-md-4,.col-md-6 {
		width: 100%;
	}
}
@media (max-width: 992px) {
	.col-lg-2,.col-lg-3 {
		width: 50%;
	}
}
@media (max-width: 768px) {
	.col-lg-2,.col-lg-3 {
		width: 100%;
	}
}
.text-md-end {
	text-align: right !important;
}
@media (max-width: 768px) {
	.text-md-end {
		text-align: left !important;
	}
}
/* Content Primary */
.content-primary {
	flex: 1;
}
/* Content Sidebar */
.content-sidebar {
	width: 320px;
}
/* Full Width */
.full-width {
	width: 100%;
}
/* Custom Animation */
/* Animation removed - using CSS transitions instead */
/* Projections Page Styles */
.projections-container {
	padding: 2rem 1rem;
}
/* Filters Bar */
.filters-bar {
	background: var(--bg-card);
	border-radius: 0.75rem;
	padding: 1.5rem;
	border: 1px solid var(--border-color);
}
.filters-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}
.filter-group label {
	display: block;
	font-size: 0.875rem;
	color: var(--text-secondary);
	margin-bottom: 0.375rem;
}
.search-group {
	grid-column: span 2;
}
@media (max-width: 768px) {
	.search-group {
		grid-column: span 1;
	}
}
.quick-actions {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
}
/* Stats Overview */
.stats-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
}
.stat-card {
	background: var(--bg-card);
	border-radius: 1rem;
	padding: 1.75rem 1.5rem;
	text-align: center;
	border: 1px solid var(--border-color);
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}
/* Add subtle gradient and icon backgrounds to stat cards */
.stat-card:nth-child(1) {
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(59, 130, 246, 0.03) 100%);
	border-color: rgba(59, 130, 246, 0.15);
}
.stat-card:nth-child(2) {
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(34, 197, 94, 0.03) 100%);
	border-color: rgba(34, 197, 94, 0.15);
}
.stat-card:nth-child(3) {
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(168, 85, 247, 0.03) 100%);
	border-color: rgba(168, 85, 247, 0.15);
}
.stat-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.stat-card:nth-child(1):hover {
	border-color: rgba(59, 130, 246, 0.3);
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(59, 130, 246, 0.06) 100%);
}
.stat-card:nth-child(2):hover {
	border-color: rgba(34, 197, 94, 0.3);
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(34, 197, 94, 0.06) 100%);
}
.stat-card:nth-child(3):hover {
	border-color: rgba(168, 85, 247, 0.3);
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(168, 85, 247, 0.06) 100%);
}
.stat-card.premium {
	background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-darker) 100%);
	border-color: var(--gold);
}
.stat-value {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 0.5rem;
	position: relative;
	z-index: 1;
	line-height: 1;
}
.stat-label {
	font-size: 0.8125rem;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	position: relative;
	z-index: 1;
}
/* Projections Table Container */
.projections-table-container {
	background: var(--bg-card);
	border-radius: 0.75rem;
	overflow: hidden;
	border: 1px solid var(--border-color);
}
/* Table Sorting */
.sortable {
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}
.sortable:hover {
	color: var(--primary-green);
}
.sortable i {
	margin-left: 0.25rem;
	font-size: 0.75rem;
	opacity: 0.5;
}
.sortable.active i {
	opacity: 1;
	color: var(--primary-green);
}
/* Player Info Cell */
.player-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.injury-tag {
	font-size: 0.625rem;
	padding: 0.125rem 0.375rem;
	border-radius: 0.25rem;
	text-transform: uppercase;
	font-weight: 600;
}
.injury-tag.questionable {
	background: var(--warning);
	color: var(--bg-dark);
}
.injury-tag.doubtful {
	background: var(--danger);
	color: white;
}
.injury-tag.out {
	background: var(--text-muted);
	color: white;
}
/* Spread Badge */
.spread {
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin-left: 0.25rem;
}
/* High Value Indicator */
.high-value {
	color: var(--primary-green);
	font-weight: 600;
}
/* Ownership Badge */
.ownership-badge {
	background: rgba(255, 215, 0, 0.2);
	color: var(--gold);
	padding: 0.125rem 0.5rem;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	font-weight: 600;
}
/* Premium Column */
.premium-col {
	position: relative;
}
/* Action Buttons */
.actions {
	white-space: nowrap;
}
.actions .btn {
	padding: 0.25rem 0.5rem;
}
/* Loading & Empty States */
.loading-state,.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem;
	color: var(--text-secondary);
}
/* Player Detail Modal */
.player-detail-grid {
	display: grid;
	gap: 1.5rem;
}
.player-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border-color);
}
.player-header h3 {
	margin: 0;
	color: var(--text-primary);
}
.team-badge {
	background: var(--bg-darker);
	padding: 0.25rem 0.75rem;
	border-radius: 0.375rem;
	font-weight: 600;
}
/* Enhanced Player Header */
.player-header-enhanced {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border-color);
}
.player-basic-info h3 {
	margin: 0 0 0.5rem 0;
	color: var(--text-primary);
	font-size: 1.5rem;
}
.player-tags {
	display: flex;
	gap: 0.5rem;
}
.matchup-display {
	text-align: right;
}
.matchup-text {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--text-primary);
}
.game-time {
	display: block;
	font-size: 0.875rem;
	color: var(--text-secondary);
	margin-top: 0.25rem;
}
/* Key Metrics Grid */
.key-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.metric-card {
	background: var(--bg-darker);
	padding: 1.25rem;
	border-radius: 0.5rem;
	text-align: center;
}
.metric-card.projection {
	background: linear-gradient(135deg, var(--bg-darker) 0%, rgba(0, 184, 148, 0.1) 100%);
	border: 1px solid rgba(0, 184, 148, 0.3);
}
.metric-label {
	font-size: 0.75rem;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.metric-value {
	font-size: 2rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0.25rem 0;
}
.metric-range {
	display: flex;
	justify-content: space-around;
	font-size: 0.75rem;
	color: var(--text-secondary);
}
.metric-salary {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text-primary);
}
.metric-value-sub {
	font-size: 0.875rem;
	color: var(--primary-green);
	margin: 0.25rem 0;
}
.metric-ownership {
	font-size: 0.75rem;
	color: var(--text-secondary);
}
/* Game Environment */
.game-environment {
	background: var(--bg-darker);
	padding: 1.25rem;
	border-radius: 0.5rem;
}
.environment-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}
.env-section h5 {
	margin: 0 0 0.75rem 0;
	color: var(--text-primary);
	font-size: 0.875rem;
}
.weather-info {
	display: flex;
	gap: 1rem;
}
.weather-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text-secondary);
}
/* Performance Trends */
.performance-trends {
	background: var(--bg-darker);
	padding: 1.25rem;
	border-radius: 0.5rem;
}
.trends-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}
.trend-chart {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	height: 120px;
	gap: 0.5rem;
	margin-bottom: 1rem;
}
.trend-bar-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
}
.trend-bar {
	width: 100%;
	background: var(--primary-green);
	border-radius: 0.25rem 0.25rem 0 0;
	position: relative;
	min-height: 20px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.trend-bar.above {
	background: var(--primary-green);
}
.trend-bar.below {
	background: var(--danger);
}
.trend-label {
	font-size: 0.625rem;
	color: var(--text-muted);
	margin-top: 0.25rem;
}
.trend-stats,.season-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
.trend-stat,.season-stat {
	text-align: center;
}
.trend-stat .label,.season-stat .label {
	display: block;
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin-bottom: 0.25rem;
}
.trend-stat .value,.season-stat .value {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--text-primary);
}
/* Advanced Metrics */
.advanced-metrics {
	background: var(--bg-darker);
	padding: 1.25rem;
	border-radius: 0.5rem;
}
.advanced-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.adv-stat {
	text-align: center;
}
.adv-stat .label {
	display: block;
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin-bottom: 0.25rem;
}
.adv-stat .value {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--text-primary);
}
/* Compare Functionality */
.proj-row.comparing {
	background: rgba(255, 215, 0, 0.1);
	border-left: 3px solid var(--gold);
}
.compare-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 2rem;
	max-height: 70vh;
	overflow-y: auto;
}
.compare-divider {
	width: 1px;
	background: var(--bg-darker);
}
.compare-player {
	padding: 0 1rem;
}
.compare-header {
	text-align: center;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 1.5rem;
}
.compare-header h4 {
	margin: 0 0 0.5rem 0;
	color: var(--text-primary);
}
.compare-section {
	margin-bottom: 1.5rem;
}
.compare-section h5 {
	margin: 0 0 0.75rem 0;
	color: var(--text-secondary);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.compare-metric {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.compare-metric:last-child {
	border-bottom: none;
}
.compare-metric .metric-label {
	font-size: 0.875rem;
	color: var(--text-secondary);
}
.compare-metric .metric-value {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
}
/* Better/Worse Indicators */
.compare-metric.better-1,.compare-metric.better-2 {
	background: rgba(0, 184, 148, 0.1);
}
.compare-metric.better-1 .metric-value,.compare-metric.better-2 .metric-value {
	color: var(--primary-green);
}
.compare-metric.worse-1,.compare-metric.worse-2 {
	opacity: 0.7;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
	.key-metrics {
		grid-template-columns: 1fr;
	}
	.environment-grid,.trends-content {
		grid-template-columns: 1fr;
	}
	.advanced-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.compare-grid {
		grid-template-columns: 1fr;
	}
	.compare-divider {
		display: none;
	}
	.compare-player {
		border-bottom: 2px solid var(--border-color);
		padding-bottom: 2rem;
		margin-bottom: 2rem;
	}
	.compare-player:last-child {
		border-bottom: none;
	}
}
.projection-breakdown {
	background: var(--bg-darker);
	padding: 1.25rem;
	border-radius: 0.5rem;
	margin-bottom: 1rem;
}
.projection-breakdown h4 {
	margin: 0 0 1rem 0;
	color: var(--text-primary);
	font-size: 1rem;
}
/* Vegas Lines Section - Full Width */
.vegas-lines-section {
	background: var(--bg-darker);
	padding: 1.5rem;
	border-radius: 0.75rem;
	margin-top: 1rem;
}
.vegas-lines-section h4 {
	margin: 0 0 1.25rem 0;
	color: var(--text-primary);
	font-size: 1.125rem;
}
.vegas-grid-full {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
}
.stats-grid,.vegas-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
.stat-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.stat-label {
	color: var(--text-secondary);
	font-size: 0.875rem;
}
.stat-value {
	color: var(--text-primary);
	font-weight: 600;
}
.vegas-item {
	display: flex;
	flex-direction: column;
	padding: 1rem;
	background: rgba(255, 255, 255, 0.02);
	border-radius: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.05);
	transition: all 0.2s ease;
}
.vegas-item:hover {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
}
.vegas-item .label {
	color: var(--text-secondary);
	font-size: 0.75rem;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}
.vegas-item .value {
	color: var(--text-primary);
	font-size: 1.25rem;
	font-weight: 600;
}
/* Performance Trends - Full Width */
.performance-trends {
	background: var(--bg-darker);
	padding: 1.5rem;
	border-radius: 0.75rem;
	margin-top: 1.5rem;
}
.performance-trends h4 {
	margin: 0 0 1.5rem 0;
	color: var(--text-primary);
	font-size: 1.125rem;
}
/* Trend Chart Container */
.trend-chart-container {
	margin-bottom: 1.5rem;
}
.trend-chart {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	height: 120px;
	gap: 1rem;
	padding: 0 0.5rem;
}
.trend-bar-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}
.trend-bar {
	width: 100%;
	background: var(--primary-green);
	border-radius: 0.375rem 0.375rem 0 0;
	position: relative;
	min-height: 20px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	transition: all 0.3s ease;
}
.trend-bar.above {
	background: var(--primary-green);
}
.trend-bar.below {
	background: var(--danger);
	opacity: 0.8;
}
.trend-bar:hover {
	transform: translateY(-2px);
	filter: brightness(1.1);
}
.trend-value {
	position: absolute;
	top: -25px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-primary);
	white-space: nowrap;
}
.trend-label {
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--text-secondary);
	text-transform: uppercase;
}
/* Trend Summary */
.trend-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border-color);
}
.trend-stat {
	text-align: center;
}
.trend-stat .label {
	display: block;
	font-size: 0.75rem;
	color: var(--text-secondary);
	text-transform: uppercase;
	margin-bottom: 0.25rem;
}
.trend-stat .value {
	display: block;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text-primary);
}
/* Edge Indicator for Compare */
.edge-indicator {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.125rem 0.375rem;
	background: rgba(0, 184, 148, 0.2);
	color: var(--primary-green);
	border-radius: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
}
.edge-indicator.better {
	background: rgba(0, 184, 148, 0.2);
	color: var(--primary-green);
}
/* Compare Indicator in Table */
.compare-indicator {
	display: inline-block;
	margin-left: 0.5rem;
	color: var(--gold);
	font-size: 0.875rem;
}
/* Top Value Stat Card - matches other stat cards but with position colors */
.stat-card.top-value-stat {
	/* Default gold style */
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(255, 215, 0, 0.03) 100%);
	border-color: rgba(255, 215, 0, 0.15);
}
/* Position-specific Top Value Card Colors */
.stat-card.top-value-stat.qb {
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(239, 68, 68, 0.03) 100%);
	border-color: rgba(239, 68, 68, 0.15);
}
.stat-card.top-value-stat.rb {
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(34, 197, 94, 0.03) 100%);
	border-color: rgba(34, 197, 94, 0.15);
}
.stat-card.top-value-stat.wr {
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(59, 130, 246, 0.03) 100%);
	border-color: rgba(59, 130, 246, 0.15);
}
.stat-card.top-value-stat.te {
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(168, 85, 247, 0.03) 100%);
	border-color: rgba(168, 85, 247, 0.15);
}
.stat-card.top-value-stat.k {
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(251, 146, 60, 0.03) 100%);
	border-color: rgba(251, 146, 60, 0.15);
}
.stat-card.top-value-stat.dst {
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(14, 165, 233, 0.03) 100%);
	border-color: rgba(14, 165, 233, 0.15);
}
/* Hover states for position-specific cards */
.stat-card.top-value-stat:hover {
	border-color: rgba(255, 215, 0, 0.3);
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(255, 215, 0, 0.06) 100%);
}
.stat-card.top-value-stat.qb:hover {
	border-color: rgba(239, 68, 68, 0.3);
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(239, 68, 68, 0.06) 100%);
}
.stat-card.top-value-stat.rb:hover {
	border-color: rgba(34, 197, 94, 0.3);
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(34, 197, 94, 0.06) 100%);
}
.stat-card.top-value-stat.wr:hover {
	border-color: rgba(59, 130, 246, 0.3);
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(59, 130, 246, 0.06) 100%);
}
.stat-card.top-value-stat.te:hover {
	border-color: rgba(168, 85, 247, 0.3);
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(168, 85, 247, 0.06) 100%);
}
.stat-card.top-value-stat.k:hover {
	border-color: rgba(251, 146, 60, 0.3);
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(251, 146, 60, 0.06) 100%);
}
.stat-card.top-value-stat.dst:hover {
	border-color: rgba(14, 165, 233, 0.3);
	background: linear-gradient(135deg, var(--bg-card) 0%, rgba(14, 165, 233, 0.06) 100%);
}
/* Top Value specific text styling - uses same sizing as other cards */
.stat-card.top-value-stat .stat-value {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}
.stat-card.top-value-stat .stat-value .pos-badge {
	font-size: 0.875rem;
	padding: 0.25rem 0.5rem;
}
/* Modal Content Padding Fix */
.modal-body {
	padding: 1.5rem;
	background-color: var(--bg-card);
	color: var(--text-primary);
}
.player-detail-grid {
	padding: 0 0.5rem;
}
/* Restore breathing room inside #propinfo when AI analysis renders.
   props-optimized-modal.css ships #propModal #propinfo {padding:0!important}
   with specificity (2,0,0) and loads AFTER main.css, so we have to match
   that selector with the de-ai-host class added to outrank it. */
#propModal #propinfo.de-ai-host,
#propModal #propinfo:has(.de-ai) {
	padding: 18px 28px 28px !important;
	margin: 0 !important;
}
@media (max-width: 640px) {
	#propModal #propinfo.de-ai-host,
	#propModal #propinfo:has(.de-ai) {
		padding: 14px 18px 22px !important;
	}
}

/* ===========================================================================
   AI Props Analysis (streaming) — sleek single-document layout
   ---------------------------------------------------------------------------
   Type scale (locked, do NOT free-form variations):
     28px  Archivo Black — player name AND win-prob number (harmonized)
     22px  Archivo Black — verdict tag (BET OVER / BET UNDER / PASS)
     15px  Inter 400      — body copy (prose, bullet text)
     13px  Inter 500/600  — headline sentence, chrome captions, stat values
     11px  Inter 700 UC   — eyebrow labels, stat labels, section titles
   Horizontal padding lives on .de-ai itself (28px), NOT on a max-width
   inner column. The body flows the full modal width.
   =========================================================================== */
.de-ai {
	font-family: 'Inter', system-ui, sans-serif;
	color: var(--text-primary);
	line-height: 1.55;
	position: relative;
	/* Horizontal inset is owned by #propinfo.de-ai-host (28px). Keeping a
	   second 4px pad here used to double-inset prose AND leave the
	   ~720px-wide 78ch-clamped lead visibly shorter than the 960px grids.
	   Now: 0 horizontal here -> sections, prose, grids, and tables ALL
	   reach the same right edge. */
	padding: 14px 0 4px;
}

/* ---------- HERO: player + verdict + win prob fused into one panel ----------
 * The hero is flush with the modal body — no separate background, no radius —
 * and the only structural device is the host modal-content itself.
 */
.de-ai-hero {
	position: relative;
	/* Subtle 4% white overlay lifts the hero off the modal's dark navy
	   base so it reads as a distinct header band instead of bleeding into
	   the body content. Works over any base color (navy, gradient, etc.)
	   since it's an overlay, not a solid swap. */
	background: rgba(255, 255, 255, 0.04);
	border-radius: 0;
	/* Pull outside ALL parent paddings so the lifted band hits the
	   modal-content edges with no dark navy gap above. Vertical pull
	   needs to clear:
	     - .de-ai padding-top (14px)             — line ~3554
	     - #propinfo.de-ai-host padding-top (18px) — line ~3522
	   = -32px total. The verdict accent stripe lives on
	   .modal-content::before (z-index: 2) so it overlays the top 2px
	   of the lifted band regardless of where the hero sits. */
	margin: -32px -28px 20px;
	padding: 24px 28px 22px;
	overflow: visible;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 640px) {
	.de-ai-hero {
		/* Mobile #propinfo padding is 14px 18px 22px (see line 3528),
		   so vertical pull is -(14 .de-ai + 14 host) = -28px and the
		   horizontal pull tightens to -18px to match. */
		margin: -28px -18px 16px;
		padding: 20px 18px 18px;
	}
}
/* Subtle accent stripe across the top of the MODAL — recolored by verdict. */
.de-ai::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: var(--primary-green);
	opacity: 0.85;
	transition: background 0.3s ease;
}
.de-ai-verdict-wrap-over  .de-ai::before  { background: var(--success); }
.de-ai-verdict-wrap-under .de-ai::before  { background: var(--danger); }
.de-ai-verdict-wrap-pass  .de-ai::before  { background: var(--text-muted); }

/* ---------- Loading curtain --------------------------------------------------
 * While data-state="loading" on .de-ai (the default), we hide the hero +
 * meta strip + sections entirely. The user sees only a centered spinner +
 * single-line status until the LLM has emitted a real verdict + headline.
 * This kills the half-painted skeleton-frame full of em-dashes that was
 * visible during the 4-8s the model warms up.
 */
.de-ai-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 56px 24px 64px;
	gap: 14px;
	text-align: center;
}
.de-ai-loading-spinner {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.12);
	border-top-color: var(--primary-green);
	animation: de-ai-spin 0.9s linear infinite;
}
@keyframes de-ai-spin { to { transform: rotate(360deg); } }
.de-ai-loading-text {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 15px;
	color: var(--text-primary);
	font-weight: 600;
	letter-spacing: 0.1px;
	margin-top: 8px;
}
.de-ai-loading-sub {
	font-size: 12.5px;
	color: var(--text-muted);
}
/* While loading: hide the hero + flow entirely; show only the spinner. */
.de-ai[data-state="loading"] .de-ai-hero,
.de-ai[data-state="loading"] .de-ai-flow {
	display: none;
}
/* Once ready (verdict + headline streamed in): hide the spinner, reveal
 * the panels in one paint. No fade — feels snappier and avoids two
 * "loading-finished" cues fighting each other.
 */
.de-ai[data-state="ready"] .de-ai-loading,
.de-ai[data-state="complete"] .de-ai-loading {
	display: none;
}

/* Player name = the dominant header (28px Archivo Black) */
.de-ai-hero-head {
	margin-bottom: 18px;
	padding-right: 48px;  /* leave room for dismiss X */
}
.de-ai-head-title {
	font-family: 'Archivo Black', 'Inter', sans-serif;
	font-size: 28px;
	line-height: 1.1;
	letter-spacing: 0.2px;
	color: var(--text-primary);
}
.de-ai-pos {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	letter-spacing: 1.5px;
	color: var(--primary-green);
	margin-left: 8px;
	vertical-align: middle;
	font-weight: 700;
	text-transform: uppercase;
}
/* Chrome captions — 13px Inter 500 (tighter than before, harmonized) */
.de-ai-head-sub {
	font-size: 13px;
	color: var(--text-secondary);
	margin-top: 6px;
	font-weight: 500;
	line-height: 1.45;
}
.de-ai-head-sub strong { color: var(--text-primary); font-weight: 700; }
.de-ai-head-odds {
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 4px;
	letter-spacing: 0.2px;
}
.de-ai-head-odds strong { color: var(--text-primary); font-weight: 600; }
.de-ai-implied { color: var(--text-muted); font-size: 11px; margin-left: 4px; }

/* Single dismiss X anchored to the hero, top-right */
.de-ai-dismiss {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.04);
	color: var(--text-muted);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease;
}
.de-ai-dismiss:hover {
	background: rgba(231, 76, 60, 0.15);
	color: var(--danger);
}

/* ---------- VERDICT row: tag + headline LEFT, win prob RIGHT ----------
 * Verdict tag = 22px Archivo Black (down from 30).
 * Win prob number = 28px Archivo Black (down from 40), now harmonized with
 * the player name. Headline = 13px Inter 500 — same scale as chrome captions.
 */
.de-ai-hero-verdict {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	margin-bottom: 16px;
}
.de-ai-verdict-main {
	flex: 1 1 auto;
	min-width: 0;
}
.de-ai-verdict-tag {
	display: block;
	font-family: 'Archivo Black', sans-serif;
	font-size: 22px;
	letter-spacing: 1.2px;
	line-height: 1;
	color: var(--primary-green);
	margin-bottom: 10px;
}
.de-ai-verdict-over   { color: var(--success); }
.de-ai-verdict-under  { color: var(--danger); }
.de-ai-verdict-pass   { color: var(--text-muted); }
.de-ai-pending {
	color: var(--text-muted);
	letter-spacing: 4px;
}
.de-ai-headline {
	font-size: 13px;       /* harmonized with chrome captions */
	line-height: 1.5;
	color: var(--text-primary);
	min-height: 20px;
	font-weight: 500;
	margin: 0;
}
.de-ai-headline strong {
	color: var(--text-primary);
	font-weight: 700;
}

/* AI "angle" hook — a distinctive one-liner under the headline so every
   analysis opens with a unique read, not a templated lead. */
.de-ai-angle {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--primary-green, #00B894);
	font-style: italic;
	font-weight: 600;
	margin: 4px 0 0;
}
.de-ai-angle:empty { display: none; }

/* "Where To Bet" market section — accent it so the line-shopping/odds read
   stands out from the analytical sections. */
.de-ai-section-market {
	border-left: 2px solid rgba(0, 184, 148, 0.40);
	padding-left: 12px;
}

/* ===== Off-day / no-games states ===== */
.offday-banner {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	background: linear-gradient(155deg, rgba(0,184,148,0.07) 0%, var(--bg-card,#242424) 60%);
	border: 1px solid rgba(0,184,148,0.25);
	border-radius: 14px;
	padding: 1.5rem 1.75rem;
	margin: 0 0 1.75rem;
}
.offday-banner-icon {
	flex: 0 0 auto;
	width: 56px; height: 56px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0,184,148,0.12);
	color: var(--primary-green,#00B894);
	font-size: 1.5rem;
}
.offday-banner-body { flex: 1; }
.offday-banner-body h2 {
	margin: 0 0 0.35rem;
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--text-primary,#F0F0F0);
}
.offday-banner-body p {
	margin: 0 0 1rem;
	color: var(--text-secondary,#B8B8B8);
	font-size: 0.95rem;
	line-height: 1.55;
	max-width: 760px;
}
.offday-banner-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
@media (max-width: 700px) {
	.offday-banner { flex-direction: column; text-align: center; }
	.offday-banner-actions { justify-content: center; }
}

/* Slates sidebar widget — off-day empty state (no stale slate) */
.slates-widget-empty .slates-empty-state {
	text-align: center;
	padding: 1.25rem 0.5rem 0.5rem;
	color: var(--text-secondary,#B8B8B8);
}
.slates-widget-empty .slates-empty-state i {
	font-size: 1.6rem;
	color: var(--primary-green,#00B894);
	margin-bottom: 0.6rem;
}
.slates-empty-title { font-weight: 700; color: var(--text-primary,#F0F0F0); margin: 0 0 0.35rem; }
.slates-empty-sub { font-size: 0.82rem; line-height: 1.5; margin: 0; color: var(--text-muted,#888); }

/* ===== Optimizer off-day hero (replaces slate selector + pool + build) ===== */
.offday-hero { display: flex; justify-content: center; padding: 2.5rem 1rem 4rem; }
.offday-hero-card {
	width: 100%; max-width: 760px; text-align: center;
	background: radial-gradient(120% 80% at 50% -10%, rgba(0,184,148,0.10) 0%, rgba(0,184,148,0) 55%), var(--bg-card,#242424);
	border: 1px solid var(--border-color,#2E2E2E); border-radius: 18px;
	padding: 3rem 3rem 2.5rem; box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.offday-hero-icon {
	width: 84px; height: 84px; margin: 0 auto 1.5rem; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0,184,148,0.12); border: 1px solid rgba(0,184,148,0.30);
	color: var(--primary-green,#00B894); font-size: 2.1rem;
}
.offday-hero-title { margin: 0 0 0.85rem; font-weight: 800; font-size: 2rem; letter-spacing: -0.5px; color: var(--text-primary,#F0F0F0); }
.offday-hero-sub { margin: 0 auto 1.5rem; max-width: 560px; color: var(--text-secondary,#B8B8B8); font-size: 1.02rem; line-height: 1.6; }
.offday-hero-status {
	display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 2rem;
	padding: 0.5rem 1rem; border-radius: 999px;
	background: rgba(0,184,148,0.08); border: 1px solid rgba(0,184,148,0.25);
	color: var(--primary-green,#00B894); font-size: 0.85rem; font-weight: 600;
}
.offday-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary-green,#00B894); }
@media (prefers-reduced-motion: no-preference) {
	.offday-status-dot { animation: offday-pulse 2s infinite; }
	@keyframes offday-pulse {
		0% { box-shadow: 0 0 0 0 rgba(0,184,148,0.55); }
		70% { box-shadow: 0 0 0 8px rgba(0,184,148,0); }
		100% { box-shadow: 0 0 0 0 rgba(0,184,148,0); }
	}
}
.offday-hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.25rem; }
.offday-hero-divider { height: 1px; background: var(--border-color,#2E2E2E); margin: 0 auto 2rem; max-width: 480px; }
.offday-hero-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.75rem; }
.offday-feature {
	display: block; text-decoration: none; padding: 1.25rem 1rem; border-radius: 12px;
	background: rgba(255,255,255,0.02); border: 1px solid var(--border-color,#2E2E2E);
	transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.offday-feature:hover { border-color: rgba(0,184,148,0.45); background: rgba(0,184,148,0.05); transform: translateY(-2px); }
.offday-feature i { font-size: 1.4rem; color: var(--primary-green,#00B894); margin-bottom: 0.6rem; }
.offday-feature h6 { margin: 0 0 0.3rem; color: var(--text-primary,#F0F0F0); font-weight: 700; font-size: 0.95rem; }
.offday-feature small { color: var(--text-muted,#888); font-size: 0.8rem; line-height: 1.45; display: block; }
.offday-hero-crosssport { margin: 0; color: var(--text-muted,#888); font-size: 0.9rem; }
.offday-hero-crosssport a { color: var(--primary-green,#00B894); font-weight: 600; text-decoration: none; }
.offday-hero-crosssport a:hover { color: var(--primary-green-hover,#00A882); }
@media (max-width: 768px) {
	.offday-hero { padding: 1.5rem 0.5rem 2.5rem; }
	.offday-hero-card { padding: 2rem 1.25rem 1.75rem; border-radius: 14px; }
	.offday-hero-title { font-size: 1.5rem; }
	.offday-hero-sub { font-size: 0.95rem; }
	.offday-hero-actions { flex-direction: column; }
	.offday-hero-actions .btn { width: 100%; }
	.offday-hero-features { grid-template-columns: 1fr; }
}

/* ===== Dashboard off-day layout (single centered column, balanced tiles) ===== */
.offday-banner--feature {
	max-width: 1040px; margin: 0 auto 1.5rem; padding: 1.75rem 2rem;
	background: radial-gradient(120% 100% at 0% 0%, rgba(0,184,148,0.10) 0%, rgba(0,184,148,0) 60%), var(--bg-card,#242424);
	border-color: rgba(0,184,148,0.30);
}
.offday-banner--feature .offday-banner-icon { width: 64px; height: 64px; font-size: 1.7rem; }
.offday-banner--feature .offday-banner-body h2 { font-size: 1.5rem; }
/* Off-day NHL keeps the same two-column layout + sidebar as every other sport
   home (NFL shows its sidebar in the offseason; NHL should match on off days).
   The slates widget renders an honest "no games" state and the rest of the
   sidebar widgets still provide value. */
.nhl-content-grid--offday .value-hub { margin-top: 0.5rem; }
.tool-grid--offday { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 1040px; margin: 0 auto; }
@media (max-width: 992px) { .tool-grid--offday { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tool-grid--offday { grid-template-columns: 1fr; } }

/* Win-prob: colored numeric block, harmonized with player name (28px).
 * Same Archivo Black scale = no longer competing with the headline. */
.de-ai-winprob {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex: 0 0 auto;
	text-align: right;
}
.de-ai-winprob-label {
	font-size: 10px;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 1.8px;
	font-weight: 700;
	margin-bottom: 4px;
}
.de-ai-winprob-value {
	font-family: 'Archivo Black', sans-serif;
	font-size: 28px;
	color: var(--success);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.2px;
}
.de-ai-verdict-wrap-under .de-ai-winprob-value { color: var(--danger); }
.de-ai-verdict-wrap-pass  .de-ai-winprob-value { color: var(--text-muted); }

/* ---------- META row: Confidence | Projection | Edge | Hit Rate ----------
 * Stat values = 18px Inter 700 (harmonized — slightly smaller than verdict).
 * Stat labels = 10px Inter 700 uppercase (eyebrow scale).
 */
.de-ai-hero-meta {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px 20px;
}
@media (max-width: 560px) {
	.de-ai-hero-meta { grid-template-columns: repeat(2, 1fr); }
}
.de-ai-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.de-ai-stat-label {
	font-size: 10px;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 700;
}
.de-ai-stat-value {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	letter-spacing: 0.1px;
}
.de-ai-prob-inline {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted);
	letter-spacing: 0.2px;
}
.de-ai-prob-inline strong {
	color: var(--text-primary);
	font-weight: 700;
}
.de-ai-prob-inline .de-ai-prob-active strong { color: var(--success); }
.de-ai-verdict-wrap-under .de-ai-prob-inline .de-ai-prob-active strong { color: var(--danger); }
.de-ai-prob-sep { color: var(--text-muted); margin: 0 4px; opacity: 0.5; }
.de-ai-positive { color: var(--success); }
.de-ai-negative { color: var(--danger); }

/* ---------- FLOW: full-width document, prose + structured data hybrid ------
 * Sections flow edge-to-edge inside the modal padding. Each section is a
 * short prose lead + a structured data block (bullets, stat grid, or game
 * log table) — scannable AND readable. No more 680px column.
 */
.de-ai-flow {
	display: flex;
	flex-direction: column;
}
.de-ai-section {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 22px 0 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.de-ai-section:first-child { border-top: none; padding-top: 4px; }

/* Section title = small eyebrow label. 11px Inter 700 UPPERCASE. */
.de-ai-section-title {
	margin: 0 0 14px 0;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-muted);
}
.de-ai-section-body {
	font-size: 15px;        /* 15px Inter 400 — body copy, locked */
	line-height: 1.65;
	color: var(--text-primary);
	font-weight: 400;
}
.de-ai-section-body p,
.de-ai-section-body .de-ai-text {
	margin: 0 0 14px 0;
}
.de-ai-section-body p:last-child,
.de-ai-section-body .de-ai-text:last-child {
	margin-bottom: 0;
}
/* Prose lead — runs the full content column so its right edge aligns with
   the stat grids and game-log tables below. The earlier 78ch clamp made
   prose stop ~240px short of the data blocks at 1920px viewport which read
   as a visible indent the user explicitly called out (2026-05-14). */
.de-ai-section-body .de-ai-lead {
	color: var(--text-primary);
	margin: 0 0 14px 0;
}

/* Final Take gets the brand-tinted background + brand-color left bar.
 * Now uses the new horizontal padding scale (24px) and a tighter type
 * weight to match the rest of the redesigned hierarchy. */
.de-ai-section-take {
	background: linear-gradient(180deg, rgba(0, 184, 148, 0.06), rgba(0, 184, 148, 0.02));
	border-top: 1px solid rgba(0, 184, 148, 0.25);
	border-left: 3px solid var(--primary-green);
	border-radius: 10px;
	padding: 20px 24px;
	margin-top: 14px;
}
.de-ai-section-take .de-ai-section-title { color: var(--primary-green); }
.de-ai-section-take .de-ai-section-body  { color: var(--text-primary); font-size: 15px; }

/* Risks = red-tinted eyebrow only; no border tint */
.de-ai-section-risks .de-ai-section-title { color: var(--danger); }

/* Pending state */
.de-ai-pending-body {
	color: var(--text-muted);
	font-style: italic;
	font-size: 12px;
}
.de-ai-text {
	margin: 0;
	font-family: inherit;  /* kill a global Roboto cascade leak that was overriding Inter */
}

/* ---------- BULLETS: clean dotted list, body-scale text ---------- */
.de-ai-bullets {
	margin: 0;
	padding-left: 0;
	list-style: none;
}
.de-ai-bullets li {
	position: relative;
	padding: 5px 0 5px 22px;
	line-height: 1.55;
	font-size: 15px;
}
.de-ai-bullets li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 12px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--primary-green);
}
.de-ai-section-risks .de-ai-bullets li::before { background: var(--danger); }
.de-ai-bullets li strong {
	color: var(--text-primary);
	font-weight: 700;
	margin-right: 4px;
}
.de-ai-section-risks .de-ai-bullets li strong { color: var(--danger); }

/* ---------- QUICK FACTS: 2x2 stat grid used in THE READ ---------- */
.de-ai-facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	overflow: hidden;
	margin-top: 4px;
}
@media (max-width: 720px) {
	.de-ai-facts { grid-template-columns: repeat(2, 1fr); }
}
.de-ai-fact {
	background: var(--bg-card);
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.de-ai-fact-label {
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--text-muted);
}
.de-ai-fact-value {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}
.de-ai-fact-sub {
	font-size: 11px;
	color: var(--text-muted);
	font-weight: 500;
	margin-top: 1px;
}
.de-ai-fact-value.de-ai-positive { color: var(--success); }
.de-ai-fact-value.de-ai-negative { color: var(--danger); }

/* ---------- DEFENSE STAT GRID (MATCHUP section) ---------- */
.de-ai-defgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-top: 4px;
}
@media (max-width: 720px) {
	.de-ai-defgrid { grid-template-columns: repeat(2, 1fr); }
}
.de-ai-defcell {
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.de-ai-defcell-label {
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--text-muted);
}
.de-ai-defcell-value {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}
.de-ai-defcell-rank {
	font-size: 11px;
	color: var(--text-muted);
	font-weight: 600;
	letter-spacing: 0.2px;
}
.de-ai-defcell-rank.de-ai-rank-good { color: var(--success); }
.de-ai-defcell-rank.de-ai-rank-bad  { color: var(--danger); }

/* ---------- GAME LOG TABLE (RECENT FORM section) ---------- */
.de-ai-gamelog {
	width: 100%;
	border-collapse: collapse;
	margin-top: 4px;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.de-ai-gamelog thead th {
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--text-muted);
	text-align: left;
	padding: 8px 10px 8px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.de-ai-gamelog tbody td {
	padding: 9px 10px 9px 0;
	color: var(--text-primary);
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	font-weight: 500;
}
.de-ai-gamelog tbody tr:last-child td { border-bottom: none; }
.de-ai-gamelog td.de-ai-gl-num { text-align: right; padding-right: 0; }
.de-ai-gamelog td.de-ai-gl-hit { color: var(--success); font-weight: 700; }
.de-ai-gamelog td.de-ai-gl-miss { color: var(--danger); font-weight: 700; }

/* MLB game-log: HIT/MISS pill badge in the result column */
.de-ai-gl-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.4;
}
.de-ai-gl-badge-hit {
	background: rgba(0, 184, 148, 0.15);
	color: var(--success);
	border: 1px solid rgba(0, 184, 148, 0.35);
}
.de-ai-gl-badge-miss {
	background: rgba(231, 76, 60, 0.12);
	color: var(--danger);
	border: 1px solid rgba(231, 76, 60, 0.30);
}

/* Sub-line beneath a structured grid (e.g. MLB pitcher per-batter rates) */
.de-ai-structured-sub {
	font-size: 0.78rem;
	color: var(--text-secondary);
	margin-top: 6px;
	letter-spacing: 0.01em;
}

/* Eyebrow chip beside a section title (e.g. MLB "vs Logan Webb") */
.de-ai-section-eyebrow {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 4px;
	background: rgba(0, 184, 148, 0.10);
	color: var(--primary-green);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	vertical-align: middle;
}

/* Streaming caret */
.de-ai-streaming::after {
	content: '▌';
	display: inline-block;
	color: var(--primary-green);
	margin-left: 4px;
	animation: deAiCaret 1s steps(2, end) infinite;
}
@keyframes deAiCaret {
	0%, 50%   { opacity: 1; }
	51%, 100% { opacity: 0; }
}
.de-ai-prefilled { position: relative; }
.de-ai-prefilled::after {
	content: 'AI refining…';
	display: block;
	margin-top: 8px;
	font-size: 11px;
	color: var(--text-muted);
	font-style: italic;
	opacity: .6;
}
.de-ai-mini-log {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.de-ai-mini-log-title {
	font-size: 10px;
	color: var(--text-muted);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 600;
}

/* Typing dots (kept) */
.de-ai-typing-dots {
	display: inline-flex;
	gap: 4px;
	margin-right: 8px;
	vertical-align: middle;
}
.de-ai-typing-dots span {
	width: 6px;
	height: 6px;
	background: var(--primary-green);
	border-radius: 50%;
	animation: deAiBlink 1.2s infinite ease-in-out both;
}
.de-ai-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.de-ai-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
.de-ai-typing-label {
	color: var(--text-muted);
	font-size: 13px;
	font-style: italic;
}
@keyframes deAiBlink {
	0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
	40%           { opacity: 1;   transform: scale(1); }
}
/* Compare Button Active State */
.btn-outline-warning.active {
	background-color: var(--gold);
	color: var(--bg-dark);
	border-color: var(--gold);
}
.btn-outline-warning.active:hover {
	background-color: var(--gold-hover);
	border-color: var(--gold-hover);
}
/* Toast Notification */
.toast-notification {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	background: var(--bg-card);
	color: var(--text-primary);
	padding: 1rem 1.5rem;
	border-radius: 0.5rem;
	border: 1px solid var(--primary-green);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transform: translateY(1rem);
	transition: all 0.3s ease;
	z-index: 9999;
}
.toast-notification.show {
	opacity: 1;
	transform: translateY(0);
}
/* Bootstrap Modal Dark Mode Override */
.modal-content {
	background-color: var(--bg-card);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
}
.modal-header {
	background-color: var(--bg-darker);
	border-bottom: 1px solid var(--border-color);
	color: var(--text-primary);
}
.modal-title {
	color: var(--text-primary);
	width: 100%;
}
/* Modal Header Info Layout */
.modal-header-info {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 1rem;
}
.modal-header-info .player-name {
	font-weight: 700;
	font-size: 1.125rem;
}
.modal-header-info .pos-badge {
	font-size: 0.875rem;
}
.modal-header-info .team-info {
	color: var(--text-secondary);
	font-size: 0.875rem;
}
.modal-header-info .game-time-info {
	color: var(--text-secondary);
	font-size: 0.875rem;
}
.modal-header .btn-close {
	filter: invert(1);
	opacity: 0.8;
}
.modal-header .btn-close:hover {
	opacity: 1;
}
.modal-footer {
	background-color: var(--bg-darker);
	border-top: 1px solid var(--border-color);
}
.modal-backdrop {
	background-color: #000;
}
.modal-backdrop.show {
	opacity: 0.8;
}

/* Compact NBA Modal Styles - 75% scale */
#playerModal .modal-dialog {
	max-width: 750px; /* Down from 1000px */
}
#playerModal .modal-body {
	padding: 1rem; /* Down from 1.5rem */
}
#playerModal .player-detail-grid {
	gap: 1rem; /* Down from 1.5rem */
}
#playerModal .key-metrics {
	gap: 0.75rem; /* Down from 1rem */
}
#playerModal .metric-card {
	padding: 0.875rem; /* Down from 1.25rem */
}
#playerModal .metric-label {
	font-size: 0.6875rem; /* Down from 0.75rem */
}
#playerModal .metric-value {
	font-size: 1.5rem; /* Down from 2rem */
	margin: 0.125rem 0;
}
#playerModal .metric-range {
	font-size: 0.75rem; /* Down from 0.875rem */
}
#playerModal .metric-salary {
	font-size: 1.125rem; /* Down from 1.25rem */
	font-weight: 700;
	margin: 0.25rem 0;
}
#playerModal .metric-value-sub,
#playerModal .metric-ownership {
	font-size: 0.75rem; /* Down from 0.875rem */
}
#playerModal h4 {
	font-size: 1rem; /* Down from 1.25rem */
	margin-bottom: 0.75rem;
}
#playerModal .stats-grid {
	gap: 0.5rem; /* Down from 1rem */
	grid-template-columns: repeat(3, 1fr); /* 3 columns instead of 2 */
}
#playerModal .stat-item {
	padding: 0.25rem 0;
}
#playerModal .stat-label {
	font-size: 0.75rem; /* Down from 0.875rem */
}
#playerModal .stat-value {
	font-size: 0.875rem; /* Down from 1rem */
	font-weight: 600;
}
#playerModal .vegas-grid-full {
	gap: 0.75rem; /* Down from 1rem */
	grid-template-columns: repeat(3, 1fr);
}
#playerModal .vegas-item {
	padding: 0.5rem;
}
#playerModal .vegas-item .label {
	font-size: 0.6875rem; /* Smaller */
	color: var(--text-secondary);
}
#playerModal .vegas-item .value {
	font-size: 0.875rem; /* Smaller */
	font-weight: 600;
}
#playerModal .trend-chart {
	height: 100px; /* Down from 150px */
}
#playerModal .trend-value {
	font-size: 0.625rem; /* Smaller */
}
#playerModal .trend-label {
	font-size: 0.625rem; /* Smaller */
}
#playerModal .trend-summary {
	gap: 0.75rem;
}
#playerModal .trend-stat .label {
	font-size: 0.6875rem;
}
#playerModal .trend-stat .value {
	font-size: 0.875rem;
}

/* ===========================================================================
   PLAYER PROFILE MODAL — top-shelf rebuild (2026-05-20)
   ---------------------------------------------------------------------------
   Scope: #playerModal on /nba/nba-daily-projections/. Single hero + section
   flow per the design system (draftedge-design skill). All colors via CSS
   variables so themes resolve cleanly.
   =========================================================================== */
#playerModal .modal-dialog {
	max-width: 980px;  /* wide enough for the 13-col gamelog table */
}
#playerModal .modal-content {
	background: var(--bg-darker);
	border: 1px solid var(--border-color);
}
#playerModal .modal-header {
	border-bottom: 1px solid rgba(255,255,255,0.05);
	padding: 12px 18px;
}
#playerModal .modal-body {
	padding: 0;  /* .de-pp owns its own padding */
}

.de-pp {
	font-family: 'Inter', system-ui, sans-serif;
	color: var(--text-primary);
	padding: 22px 26px 28px;
	position: relative;
}
/* Subtle brand accent stripe at the top of the modal */
.de-pp::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: var(--primary-green);
	opacity: 0.85;
}

/* Kill the legacy modal-header strip on the player-profile modal.
   The hero panel paints its own close × in the top-right corner, so the
   Bootstrap header (with its own × and dark-navy bg) just creates a
   redundant band above the hero (reported 2026-05-19 — "the very top its
   a dark blue lets omit that"). Scoped to playerModal in case other
   modals on the projections page still want the standard header. */
#playerModal .modal-header { display: none; }

/* ---- HERO --------------------------------------------------------------- */
.de-pp-hero {
	position: relative;            /* anchor for the absolute close button */
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding-bottom: 18px;
	padding-right: 44px;           /* keep the title clear of the × hit area */
	border-bottom: 1px solid rgba(255,255,255,0.06);
	margin-bottom: 18px;
}
/* Top-right close × — lives inside the hero so it floats over the gradient
   instead of needing its own dark-navy header strip. Sized + spaced to
   match other DraftEdge dismiss controls (.de-ai-dismiss). */
.de-pp-close {
	position: absolute;
	top: 0;
	right: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 50%;
	color: var(--text-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	padding: 0;
}
.de-pp-close:hover {
	background: rgba(255,255,255,0.10);
	color: var(--text-primary);
	border-color: rgba(255,255,255,0.18);
}
.de-pp-close:focus { outline: none; box-shadow: 0 0 0 2px rgba(0, 184, 148, 0.35); }
.de-pp-hero-main { flex: 1 1 auto; min-width: 0; }
.de-pp-name-row {
	display: flex;
	align-items: center;
	gap: 14px;
}
.de-pp-team-logo {
	width: 44px;
	height: 44px;
	object-fit: contain;
	flex-shrink: 0;
}
.de-pp-name {
	margin: 0;
	font-family: 'Archivo Black', 'Inter', sans-serif;
	font-size: 28px;
	line-height: 1.1;
	letter-spacing: 0.2px;
	color: var(--text-primary);
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.de-pp-pos-badge {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	letter-spacing: 1.5px;
	color: var(--primary-green);
	font-weight: 700;
	text-transform: uppercase;
	border: 1px solid rgba(0, 184, 148, 0.35);
	padding: 3px 8px;
	border-radius: 4px;
	line-height: 1;
}
.de-pp-hero-sub {
	margin-top: 8px;
	font-size: 13px;
	color: var(--text-secondary);
	font-weight: 500;
	line-height: 1.5;
}
.de-pp-hero-sub strong { color: var(--text-primary); font-weight: 700; }
.de-pp-sub-sep { color: var(--text-muted); margin: 0 8px; opacity: 0.6; }
.de-pp-status-pill {
	display: inline-block;
	font-size: 10px;
	letter-spacing: 1.2px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 999px;
	text-transform: uppercase;
}
.de-pp-status-ok    { background: rgba(0,184,148,0.15); color: var(--success); border: 1px solid rgba(0,184,148,0.35); }
.de-pp-status-out   { background: rgba(231,76,60,0.15); color: var(--danger);  border: 1px solid rgba(231,76,60,0.35); }
.de-pp-status-doubt { background: rgba(231,76,60,0.10); color: var(--danger);  border: 1px solid rgba(231,76,60,0.25); }
.de-pp-status-quest { background: rgba(243,156,18,0.15); color: var(--warning); border: 1px solid rgba(243,156,18,0.35); }

/* ---- TODAY CARDS -------------------------------------------------------- */
.de-pp-today {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 24px;
}
@media (max-width: 720px) {
	.de-pp-today { grid-template-columns: 1fr; }
}
.de-pp-today-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 10px;
	padding: 14px 16px;
}
.de-pp-today-proj {
	background: linear-gradient(180deg, rgba(0,184,148,0.10), rgba(0,184,148,0.02));
	border-color: rgba(0,184,148,0.30);
}
.de-pp-today-label {
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--text-muted);
	margin-bottom: 6px;
}
.de-pp-today-value {
	font-family: 'Archivo Black', 'Inter', sans-serif;
	font-size: 26px;
	line-height: 1.1;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
	margin-bottom: 4px;
}
.de-pp-today-proj .de-pp-today-value { color: var(--primary-green); }
.de-pp-today-sub {
	display: flex;
	gap: 14px;
	font-size: 12px;
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
	flex-wrap: wrap;
}
.de-pp-today-sub em {
	color: var(--text-muted);
	font-style: normal;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	font-size: 10px;
	margin-right: 4px;
}

/* ---- SECTIONS ----------------------------------------------------------- */
.de-pp-section {
	padding: 20px 0;
	border-top: 1px solid rgba(255,255,255,0.06);
}
.de-pp-section:first-of-type { border-top: none; padding-top: 0; }
.de-pp-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.de-pp-section-title {
	margin: 0 0 14px 0;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-muted);
}
.de-pp-section-head .de-pp-section-title { margin-bottom: 0; }

/* ---- CHIPS (window selector) ------------------------------------------- */
.de-pp-chips {
	display: inline-flex;
	gap: 6px;
	background: var(--bg-card);
	padding: 4px;
	border-radius: 8px;
	border: 1px solid var(--border-color);
}
.de-pp-chip {
	background: transparent;
	border: none;
	color: var(--text-muted);
	padding: 6px 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.de-pp-chip:hover { color: var(--text-primary); }
.de-pp-chip-active {
	background: var(--primary-green);
	color: #0d1a14;
}

/* ---- STATS GRID --------------------------------------------------------- */
.de-pp-stats-grid {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	gap: 8px;
}
@media (max-width: 900px) {
	.de-pp-stats-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 520px) {
	.de-pp-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
.de-pp-stat {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 10px 8px 8px;
	text-align: center;
}
.de-pp-stat-label {
	font-size: 10px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--text-muted);
	margin-bottom: 4px;
}
.de-pp-stat-value {
	font-size: 17px;
	font-weight: 700;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}
.de-pp-stat-delta {
	margin-top: 3px;
	font-size: 10px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.2px;
}
.de-pp-delta-up   { color: var(--success); }
.de-pp-delta-down { color: var(--danger); }
.de-pp-delta-flat { color: var(--text-muted); }

/* ---- CHART -------------------------------------------------------------- */
.de-pp-chart-wrap {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 10px;
	padding: 14px 14px 8px;
	height: 260px;
	position: relative;
}
.de-pp-chart-wrap canvas {
	width: 100% !important;
	height: 100% !important;
}

/* ---- GAME LOG TABLE ----------------------------------------------------- */
.de-pp-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--border-color);
	border-radius: 10px;
	background: var(--bg-card);
}
.de-pp-gamelog {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	min-width: 760px;
}
.de-pp-gamelog thead th {
	font-size: 10px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--text-muted);
	text-align: left;
	padding: 10px 10px 9px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	background: rgba(0,0,0,0.12);
	white-space: nowrap;
}
.de-pp-gamelog thead th.de-pp-num { text-align: right; }
.de-pp-gamelog tbody td {
	padding: 9px 10px;
	color: var(--text-primary);
	border-bottom: 1px solid rgba(255,255,255,0.04);
	font-weight: 500;
	white-space: nowrap;
}
.de-pp-gamelog tbody tr:last-child td { border-bottom: none; }
.de-pp-gamelog tbody tr:hover td { background: rgba(255,255,255,0.02); }
.de-pp-gamelog td.de-pp-num { text-align: right; }
.de-pp-gamelog td.de-pp-pos { color: var(--success); }
.de-pp-gamelog td.de-pp-neg { color: var(--danger); }
/* "Hit" rows (cleared projection) get a subtle green left-edge accent.
   Used by the MLB batter profile modal to highlight games where DK pts
   met or exceeded the day's projection. */
.de-pp-gamelog tbody tr.de-pp-row-hit td:first-child {
	box-shadow: inset 3px 0 0 0 var(--primary-green);
}
.de-pp-gamelog tbody tr.de-pp-row-hit td {
	background: rgba(0, 184, 148, 0.04);
}

/* ---- LOADING / EMPTY ---------------------------------------------------- */
.de-pp-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 40px 20px;
}
.de-pp-spinner {
	width: 32px; height: 32px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.1);
	border-top-color: var(--primary-green);
	animation: de-pp-spin 0.9s linear infinite;
}
@keyframes de-pp-spin { to { transform: rotate(360deg); } }
.de-pp-loading-text {
	font-size: 13px;
	color: var(--text-muted);
	font-weight: 500;
}
.de-pp-empty {
	text-align: center;
	padding: 28px 16px;
	font-size: 13px;
	color: var(--text-muted);
	background: var(--bg-card);
	border: 1px dashed var(--border-color);
	border-radius: 10px;
}

/* Custom Breadcrumb Styles */
.breadcrumb-nav {
	background: var(--bg-darker);
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 1.5rem;
}
.breadcrumb {
	margin-bottom: 0;
	padding: 0;
	background: transparent;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
}
.breadcrumb-item {
	font-size: 0.875rem;
	color: var(--text-secondary);
}
.breadcrumb-item + .breadcrumb-item {
	padding-left: 0.5rem;
}
.breadcrumb-item + .breadcrumb-item::before {
	display: inline-block;
	padding-right: 0.5rem;
	color: var(--text-muted);
	content: "/";
}
.breadcrumb-item a {
	color: var(--text-secondary);
	text-decoration: none;
	transition: color 0.2s ease;
}
.breadcrumb-item a:hover {
	color: var(--primary-green);
	text-decoration: none;
}
.breadcrumb-item.active {
	color: var(--text-primary);
	font-weight: 500;
}
/* Override Bootstrap breadcrumb link colors */
.breadcrumb a {
	color: var(--text-secondary) !important;
}
.breadcrumb a:hover {
	color: var(--primary-green) !important;
}
/* Remove Bootstrap's default styling */
.breadcrumb > li + li:before {
	content: "/" !important;
	color: var(--text-muted) !important;
}
@media (max-width: 576px) {
	.breadcrumb-nav {
		padding: 0.5rem 0;
	}
	.breadcrumb-item {
		font-size: 0.75rem;
	}
}
/* ============================================Reusable Page Header (Used across all pages)============================================ */
.page-header {
	background: var(--bg-card);
	border-radius: 8px;
	padding: 2rem;
	position: relative;
	border: 1px solid var(--border-color);
	overflow: hidden;
}

/* Green accent line at bottom of page header */
.page-header::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, 
		transparent 0%, 
		var(--primary-green) 20%, 
		var(--primary-green) 80%, 
		transparent 100%);
	opacity: 0.8;
}

.page-header .header-content {
	position: relative;
	z-index: 1;
}
.page-header .header-actions {
	z-index: 10;
	pointer-events: auto;
}
.page-header .page-title {
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 0.75rem 0;
	letter-spacing: -0.5px;
	line-height: 1.2;
}
.page-header .page-subtitle {
	font-size: 0.95rem;
	color: var(--text-secondary);
	margin: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.page-header .update-badge {
	color: var(--primary-green);
	font-weight: 500;
}
.page-header .update-badge i {
	margin-right: 0.25rem;
	font-size: 0.875rem;
}
/* Data-freshness states (derived from the data file's mtime in inc/freshness.php).
   Green = fresh, amber = aging, red = stale — so a stalled pipeline shows red,
   never a false "Updated Live". */
.update-badge.update-fresh { color: var(--primary-green, #00B894); }
.update-badge.update-aging { color: var(--warning, #F39C12); }
.update-badge.update-stale { color: var(--danger, #E74C3C); font-weight: 600; }
.page-header .separator {
	color: var(--text-muted);
	opacity: 0.5;
}
.page-header .data-source,.page-header .season-info {
	color: var(--text-secondary);
}
.page-header .header-actions {
	position: absolute;
	top: 50%;
	right: 2rem;
	transform: translateY(-50%);
	display: flex;
	gap: 0.75rem;
	z-index: 10;
	pointer-events: auto;
}
/* Mobile Responsive */
@media (max-width: 768px) {
	.page-header {
		padding: 1.5rem;
		text-align: center;
	}
	.page-header .page-title {
		font-size: 1.75rem;
		margin-bottom: 1rem;
	}
	.page-header .page-subtitle {
		justify-content: center;
		font-size: 0.875rem;
	}
	.page-header .header-actions {
		position: static;
		transform: none;
		margin-top: 1.25rem;
		justify-content: center;
	}
}
@media (max-width: 576px) {
	.page-header .separator {
		display: none;
	}
	.page-header .page-subtitle {
		flex-direction: column;
		gap: 0.25rem;
	}
}
/* About Modal Styling */
.about-section .metric-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 1rem;
	height: 100%;
	transition: all 0.2s ease;
}
.about-section .metric-card:hover {
	background: var(--bg-card-hover);
	border-color: var(--primary-green);
}
.about-section .metric-card strong {
	color: var(--text-primary);
	display: block;
	margin-bottom: 0.5rem;
}
.about-section .metric-card p {
	color: var(--text-secondary);
}
/* ============================================Injury Report Page Styles============================================ */
.page-title {
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--text-primary);
	margin-bottom: 0.5rem;
	letter-spacing: -0.02em;
}
/* Eyebrow modifier — for pages where the content already self-identifies
   (optimizers show their sport via the slate widget + table content; AI
   modals have a hero header). Demotes the page title from a 40px hero
   to a small uppercase muted label so the data is the hero.
   See .claude/skills/draftedge-design rule #3. */
.page-title.page-title--eyebrow {
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--text-muted);
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 4px;
}
/* Status update lines on the NBA / sport-home dashboard. The JSON
   payload (nba.frontend.build_dashboard) emits a `severity` field per
   line ('severe' / 'moderate' / 'positive' / 'info') and the template
   renders class="status-update--{severity}". Maps to design tokens so
   colors theme correctly — replaces the old data-baked hex stack
   (#ff6b6b / #ffa94d / #69db7c) that ignored ?theme=. */
.status-update--severe   { color: var(--danger); }
.status-update--moderate { color: var(--warning); }
.status-update--positive { color: var(--success); }
.status-update--info     { color: var(--text-muted); }

.page-subtitle {
	font-size: 1.125rem;
	color: var(--text-secondary);
	margin-bottom: 0;
}
.page-updated {
	font-size: 0.875rem;
	color: var(--text-muted);
	margin-top: 0.5rem;
}
.updated-time {
	color: var(--text-secondary);
}
/* Page Header Responsive */
@media (max-width: 768px) {
	.page-header {
		padding: 2rem 0;
	}
	.page-title {
		font-size: 1.75rem;
	}
	.page-subtitle {
		font-size: 1rem;
	}
}
.injury-updated {
	color: var(--text-secondary);
	font-size: 0.875rem;
	margin-top: 0.5rem;
}
.injury-updated-time {
	color: var(--primary-green);
	font-weight: 600;
}
/* Injury Filters */
.injury-filters {
	background: var(--bg-card);
	padding: 1.5rem;
	border-radius: 8px;
	border: 1px solid var(--border-color);
}
.filter-row {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: center;
}
.filter-pills {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.filter-pill {
	padding: 0.5rem 1rem;
	background: var(--bg-dark);
	color: var(--text-secondary);
	border: 1px solid var(--border-color);
	border-radius: 20px;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.875rem;
	transition: all 0.2s ease;
}
.filter-pill:hover {
	border-color: var(--primary-green);
	color: var(--text-primary);
}
.filter-pill.active {
	background: var(--primary-green);
	color: var(--bg-dark);
	border-color: var(--primary-green);
}
/* Injury Summary Cards */
.injury-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}
.summary-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 1.5rem;
	text-align: center;
}
.summary-icon {
	width: 48px;
	height: 48px;
	margin: 0 auto 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 1.5rem;
}
.summary-icon.out {
	background: rgba(231, 76, 60, 0.2);
	color: var(--danger);
}
.summary-icon.doubtful {
	background: rgba(230, 126, 34, 0.2);
	color: var(--warning);
}
.summary-icon.questionable {
	background: rgba(243, 156, 18, 0.2);
	color: var(--warning);
}
.summary-icon.probable {
	background: rgba(0, 184, 148, 0.2);
	color: var(--success);
}
.summary-count {
	font-size: 2rem;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 0.25rem;
}
.summary-label {
	color: var(--text-secondary);
	font-size: 0.875rem;
	text-transform: uppercase;
	font-weight: 600;
}
/* Injury Table */
.injury-table-wrapper {
	background: var(--bg-card);
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--border-color);
}
.injury-table {
	width: 100%;
	border-collapse: collapse;
}
.injury-table th {
	background: var(--bg-darker);
	color: var(--text-primary);
	padding: 1rem;
	text-align: left;
	font-weight: 600;
	border-bottom: 2px solid var(--border-color);
	position: sticky;
	top: 0;
	z-index: 10;
}
.injury-table td {
	padding: 0.875rem 1rem;
	color: var(--text-primary);
	border-bottom: 1px solid var(--border-color);
}
.injury-table tbody tr {
	transition: background-color 0.2s ease;
}
.injury-table tbody tr:hover {
	background: var(--bg-card-hover);
}
/* Player Name */
.player-injury-name {
	font-weight: 600;
	color: var(--text-primary);
}
/* Status Display */
.injury-status-wrapper {
	display: inline-block;
}
.injury-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.875rem;
	border-radius: 20px;
	font-size: 0.813rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	border: 2px solid transparent;
	transition: all 0.2s ease;
}
.status-icon {
	font-size: 0.875rem;
}
.injury-status.out {
	background: rgba(231, 76, 60, 0.15);
	color: var(--danger);
	border-color: rgba(231, 76, 60, 0.3);
}
.injury-status.doubtful {
	background: rgba(230, 126, 34, 0.15);
	color: var(--warning);
	border-color: rgba(230, 126, 34, 0.3);
}
.injury-status.questionable {
	background: rgba(243, 156, 18, 0.15);
	color: var(--warning);
	border-color: rgba(243, 156, 18, 0.3);
}
.injury-status.probable {
	background: rgba(0, 184, 148, 0.15);
	color: var(--success);
	border-color: rgba(0, 184, 148, 0.3);
}
.injury-status.day-to-day {
	background: rgba(184, 184, 184, 0.15);
	color: var(--text-secondary);
	border-color: rgba(184, 184, 184, 0.3);
}
.injury-status.ir {
	background: rgba(139, 69, 19, 0.15);
	color: #A0522D;
	border-color: rgba(139, 69, 19, 0.3);
}
/* Mini status for team cards */
.injury-status-mini {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}
.injury-status-mini.out {
	background: rgba(231, 76, 60, 0.2);
	color: var(--danger);
}
.injury-status-mini.doubtful {
	background: rgba(230, 126, 34, 0.2);
	color: var(--warning);
}
.injury-status-mini.questionable {
	background: rgba(243, 156, 18, 0.2);
	color: var(--warning);
}
.injury-status-mini.probable {
	background: rgba(0, 184, 148, 0.2);
	color: var(--success);
}
.injury-status-mini.day-to-day {
	background: rgba(184, 184, 184, 0.2);
	color: var(--text-secondary);
}
.injury-status-mini.ir {
	background: rgba(139, 69, 19, 0.2);
	color: #A0522D;
}
/* Injury Details */
.injury-detail {
	color: var(--text-secondary);
	font-size: 0.875rem;
}
.injury-timeline {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text-secondary);
	font-size: 0.875rem;
}
.timeline-icon {
	color: var(--text-muted);
}
/* Fantasy Impact Rating */
.fantasy-impact-rating {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}
.impact-stars {
	display: flex;
	gap: 0.25rem;
}
.impact-star {
	font-size: 0.625rem;
	transition: all 0.2s ease;
}
.impact-star.high {
	color: var(--danger);
}
.impact-star.medium {
	color: var(--warning);
}
.impact-star.low {
	color: var(--success);
}
.impact-text {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
}
.impact-text.high {
	color: var(--danger);
}
.impact-text.medium {
	color: var(--warning);
}
.impact-text.low {
	color: var(--success);
}
/* Team Injury Cards */
.team-injury-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.5rem;
}
.team-injury-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	overflow: hidden;
}
.team-injury-header {
	background: var(--bg-darker);
	padding: 1rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	border-bottom: 1px solid var(--border-color);
}
.team-injury-logo {
	width: 40px;
	height: 40px;
	object-fit: contain;
}
.team-injury-name {
	font-weight: 700;
	color: var(--text-primary);
	font-size: 1.1rem;
}
.team-injury-count {
	margin-left: auto;
	background: var(--danger);
	color: white;
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	font-size: 0.875rem;
	font-weight: 700;
}
.team-injury-list {
	padding: 1rem;
}
.team-injury-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--border-color);
}
.team-injury-item:last-child {
	border-bottom: none;
}
/* News Section */
.injury-news {
	margin-top: 2rem;
}
.news-item {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 1rem;
}
.news-header {
	display: flex;
	justify-content: space-between;
	align-items: start;
	margin-bottom: 0.75rem;
}
.news-title {
	color: var(--text-primary);
	font-weight: 600;
	font-size: 1.1rem;
	margin: 0;
}
.news-time {
	color: var(--text-secondary);
	font-size: 0.875rem;
	white-space: nowrap;
}
.news-content {
	color: var(--text-secondary);
	line-height: 1.6;
}

/* Sidebar news widget — feeds from /api/nba/news.json (ESPN RSS).
   Per design rule #4 (section flow > stacked cards), each headline is a
   hairline-divided list row, not a bordered card. */
.sidebar-widget.news-widget .news-item {
	background: transparent;
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 0;
	padding: 12px 0;
	margin: 0;
}
.sidebar-widget.news-widget .news-item:first-child {
	border-top: none;
	padding-top: 4px;
}
.sidebar-widget.news-widget .news-time {
	display: block;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 4px;
}
.sidebar-widget.news-widget .news-item p {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--text-secondary);
}
.sidebar-widget.news-widget .news-item p a {
	color: var(--text-primary);
	text-decoration: none;
	transition: color 0.15s ease;
}
.sidebar-widget.news-widget .news-item p a:hover {
	color: var(--primary-green);
	text-decoration: none;
}
.sidebar-widget.news-widget .news-source-attr {
	margin: 14px 0 0;
	font-size: 10px;
	color: var(--text-muted);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-align: right;
}
.sidebar-widget.news-widget .news-empty {
	color: var(--text-muted);
	font-size: 13px;
	font-style: italic;
	margin: 0;
}
/* ============================================Schedule & Odds Page Styles============================================ */
/* Week/Date Navigation */
.schedule-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	margin-bottom: 2rem;
}
.nav-arrow {
	width: 40px;
	height: 40px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	color: var(--text-primary);
}
.nav-arrow:hover {
	background: var(--bg-card-hover);
	border-color: var(--primary-green);
	color: var(--primary-green);
}
.nav-arrow:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.schedule-period {
	text-align: center;
}
.period-label {
	color: var(--text-secondary);
	font-size: 0.875rem;
	text-transform: uppercase;
	margin-bottom: 0.25rem;
}
.period-value {
	color: var(--text-primary);
	font-size: 1.5rem;
	font-weight: 700;
}
/* Games Grid */
.games-grid {
	display: grid;
	gap: 1.5rem;
}
/* Game Card */
.game-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.2s ease;
}
.game-card:hover {
	border-color: var(--primary-green);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Live Game Highlighting */
.game-card.game-live {
	border: 2px solid var(--danger);
	animation: pulse-border 2s ease-in-out infinite;
}
@keyframes pulse-border {
	0%, 100% {
		border-color: var(--danger);
		box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4);
	}
	50% {
		border-color: #FF6B6B;
		box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.2);
	}
}
.live-indicator {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: var(--danger);
	border-radius: 50%;
	margin-right: 4px;
	animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.6;
		transform: scale(1.2);
	}
}
.game-quarter {
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin-left: 0.5rem;
}
/* Total Result Badge */
.total-result {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.125rem 0.375rem;
	border-radius: 4px;
	margin-left: 0.5rem;
}
.total-result.over {
	background: rgba(231, 76, 60, 0.2);
	color: var(--danger);
}
.total-result.under {
	background: rgba(0, 184, 148, 0.2);
	color: var(--success);
}
.game-header {
	background: var(--bg-darker);
	padding: 0.75rem 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--border-color);
}
.game-time {
	color: var(--text-secondary);
	font-size: 0.875rem;
	font-weight: 600;
}
.game-status {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
}
.status-scheduled {
	background: rgba(184, 184, 184, 0.2);
	color: var(--text-secondary);
}
.status-live {
	background: rgba(231, 76, 60, 0.2);
	color: var(--danger);
	animation: pulse 2s infinite;
}
.status-final {
	background: rgba(0, 184, 148, 0.2);
	color: var(--success);
}
/* Game Content */
.game-content {
	padding: 1.5rem;
}
.teams-matchup {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 1.5rem;
	align-items: center;
	margin-bottom: 1.5rem;
}
.team-info {
	text-align: center;
}
.team-info.away {
	text-align: right;
}
.team-info.home {
	text-align: left;
}
.team-logo {
	width: 60px;
	height: 60px;
	margin: 0 auto 0.5rem;
	object-fit: contain;
}
.team-name {
	color: var(--text-primary);
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 0.25rem;
}
.team-record {
	color: var(--text-secondary);
	font-size: 0.875rem;
}
.vs-divider {
	color: var(--text-muted);
	font-weight: 600;
	font-size: 1.25rem;
}
/* Betting Lines */
.betting-lines {
	background: var(--bg-dark);
	border-radius: 4px;
	padding: 1rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.line-item {
	text-align: center;
}
.line-label {
	color: var(--text-secondary);
	font-size: 0.75rem;
	text-transform: uppercase;
	margin-bottom: 0.25rem;
}
.line-value {
	color: var(--text-primary);
	font-size: 1.1rem;
	font-weight: 700;
}
.line-value.favorite {
	color: var(--primary-green);
}
/* Score Display (for live/final games) */
.game-score {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 1rem;
	align-items: center;
	margin-bottom: 1rem;
}
.score-value {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--text-primary);
}
.score-value.winner {
	color: var(--primary-green);
}
.score-separator {
	color: var(--text-muted);
	font-size: 1.5rem;
}
/* Game Insights - DFS/Betting Badges */
.game-insights {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 1rem;
}
.insight-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
}
.insight-badge i {
	font-size: 0.75rem;
}
.insight-badge.shootout {
	background: rgba(231, 76, 60, 0.15);
	color: var(--danger);
	border: 1px solid rgba(231, 76, 60, 0.3);
}
.insight-badge.under {
	background: rgba(52, 152, 219, 0.15);
	color: var(--info);
	border: 1px solid rgba(52, 152, 219, 0.3);
}
.insight-badge.blowout {
	background: rgba(243, 156, 18, 0.15);
	color: var(--warning);
	border: 1px solid rgba(243, 156, 18, 0.3);
}
.insight-badge.close {
	background: rgba(0, 184, 148, 0.15);
	color: var(--success);
	border: 1px solid rgba(0, 184, 148, 0.3);
}
.insight-badge.primetime {
	background: rgba(255, 215, 0, 0.15);
	color: var(--gold);
	border: 1px solid rgba(255, 215, 0, 0.3);
}
/* Weather Badges */
.insight-badge.weather-wind {
	background: rgba(149, 165, 166, 0.15);
	color: #95A5A6;
	border: 1px solid rgba(149, 165, 166, 0.3);
}
.insight-badge.weather-rain {
	background: rgba(52, 152, 219, 0.15);
	color: var(--info);
	border: 1px solid rgba(52, 152, 219, 0.3);
}
.insight-badge.weather-cold {
	background: rgba(142, 68, 173, 0.15);
	color: #8E44AD;
	border: 1px solid rgba(142, 68, 173, 0.3);
}
/* Injury Alert Badge */
.insight-badge.injury-alert {
	background: rgba(231, 76, 60, 0.15);
	color: var(--danger);
	border: 1px solid rgba(231, 76, 60, 0.3);
	animation: subtle-pulse 2s ease-in-out infinite;
}
@keyframes subtle-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.8;
	}
}
/* Game Actions */
.game-actions {
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border-color);
}
.game-action-btn {
	flex: 1;
	padding: 0.75rem;
	background: var(--bg-dark);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.2s ease;
}
.game-action-btn:hover {
	background: var(--bg-card-hover);
	border-color: var(--primary-green);
	color: var(--primary-green);
}
/* TV/Stream Info */
.broadcast-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text-secondary);
	font-size: 0.875rem;
	margin-top: 0.5rem;
}
.broadcast-icon {
	font-size: 1rem;
}
/* Schedule List View */
.schedule-list {
	background: var(--bg-card);
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--border-color);
}
.schedule-table {
	width: 100%;
	border-collapse: collapse;
}
.schedule-table th {
	background: var(--bg-darker);
	color: var(--text-primary);
	padding: 1rem;
	text-align: left;
	font-weight: 600;
	border-bottom: 2px solid var(--border-color);
}
.schedule-table td {
	padding: 0.875rem 1rem;
	color: var(--text-primary);
	border-bottom: 1px solid var(--border-color);
}
.schedule-table tbody tr:hover {
	background: var(--bg-card-hover);
}
.schedule-table tr.selected {
	background: var(--bg-card-hover);
	border-left: 3px solid var(--primary-green);
}
/* Status Badge */
.status-badge {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
}
/* Responsive Design for Injury & Schedule Pages */
@media (max-width: 768px) {
	.injury-summary {
		grid-template-columns: repeat(2, 1fr);
	}
	.filter-row {
		flex-direction: column;
		align-items: stretch;
	}
	.injury-table,.schedule-table {
		font-size: 0.875rem;
	}
	.injury-table th,.injury-table td,.schedule-table th,.schedule-table td {
		padding: 0.5rem;
	}
	.injury-table .hide-mobile,.schedule-table .hide-mobile {
		display: none;
	}
	.team-injury-grid {
		grid-template-columns: 1fr;
	}
	.impact-bar {
		width: 60px;
	}
	.schedule-nav {
		gap: 1rem;
	}
	.period-value {
		font-size: 1.25rem;
	}
	.teams-matchup {
		grid-template-columns: 1fr;
		text-align: center !important;
	}
	.team-info.away,.team-info.home {
		text-align: center;
	}
	.vs-divider {
		margin: 1rem 0;
	}
	.betting-lines {
		grid-template-columns: 1fr;
	}
	.game-actions {
		flex-direction: column;
	}
}
/* =====================================================DEFENSE VS POSITION STYLES===================================================== */
/* Position Selector */
.dvp-position-selector {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}
.position-tab {
	background: var(--bg-card);
	border: 2px solid var(--border-color);
	padding: 0.5rem 1.25rem;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--text-primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.position-tab:hover {
	background: var(--bg-card-hover);
	border-color: var(--primary-green);
	color: var(--primary-green);
}
.position-tab.active {
	background: var(--primary-green);
	border-color: var(--primary-green);
	color: var(--bg-dark);
}
/* DVP Legend */
.dvp-legend {
	display: flex;
	gap: 2rem;
	justify-content: center;
	flex-wrap: wrap;
	padding: 1rem;
	background: var(--bg-card);
	border-radius: 8px;
}
.legend-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--text-secondary);
}
.legend-icon {
	font-size: 1.25rem;
}
.legend-icon.elite {
	color: var(--primary-green);
}
.legend-icon.good {
	color: #26D0CE;
}
.legend-icon.average {
	color: var(--warning);
}
.legend-icon.bad {
	color: var(--warning);
}
.legend-icon.avoid {
	color: var(--danger);
}
/* Summary Cards */
.dvp-summary-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
}
.summary-section {
	background: var(--bg-card);
	padding: 1.5rem;
	border-radius: 8px;
	border: 1px solid var(--border-color);
}
.summary-section h3 {
	color: var(--text-primary);
	margin-bottom: 1rem;
	font-size: 1.125rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.summary-section .subtitle {
	font-size: 0.75rem;
	color: var(--text-secondary);
	font-weight: 400;
}
.team-summary-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.team-summary-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem;
	background: var(--bg-darker);
	border-radius: 6px;
	transition: background 0.2s ease;
}
.team-summary-item:hover {
	background: var(--bg-card-hover);
}
.team-summary-item .rank {
	font-weight: 700;
	color: var(--text-secondary);
	min-width: 30px;
}
.team-summary-item .team-name-summary {
	font-weight: 600;
	color: var(--text-primary);
	flex: 1;
	text-align: left;
}
.team-summary-item .points {
	font-weight: 700;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	font-size: 0.875rem;
}
.points.elite {
	background: rgba(0, 184, 148, 0.2);
	color: var(--primary-green);
}
.points.avoid {
	background: rgba(231, 76, 60, 0.2);
	color: var(--danger);
}
/* DVP Table */
.dvp-table-wrapper {
	background: var(--bg-card);
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--border-color);
	margin-bottom: 3rem;
}
.dvp-table {
	width: 100%;
	border-collapse: collapse;
}
.dvp-table th {
	background: var(--bg-darker);
	color: var(--text-primary);
	padding: 1rem;
	text-align: left;
	font-weight: 600;
	border-bottom: 2px solid var(--border-color);
	position: sticky;
	top: 0;
	z-index: 10;
}
.dvp-table td {
	padding: 0.875rem 1rem;
	color: var(--text-primary);
	border-bottom: 1px solid var(--border-color);
}
.dvp-table tbody tr {
	transition: background-color 0.2s ease;
}
.dvp-table tbody tr:hover {
	background: var(--bg-card-hover);
}
/* Rank Badge */
.rank-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-weight: 700;
	font-size: 0.875rem;
}
.rank-badge.elite {
	background: rgba(0, 184, 148, 0.2);
	color: var(--primary-green);
	border: 2px solid rgba(0, 184, 148, 0.3);
}
.rank-badge.good {
	background: rgba(38, 208, 206, 0.2);
	color: #26D0CE;
	border: 2px solid rgba(38, 208, 206, 0.3);
}
.rank-badge.average {
	background: rgba(243, 156, 18, 0.2);
	color: var(--warning);
	border: 2px solid rgba(243, 156, 18, 0.3);
}
.rank-badge.bad {
	background: rgba(230, 126, 34, 0.2);
	color: var(--warning);
	border: 2px solid rgba(230, 126, 34, 0.3);
}
.rank-badge.avoid {
	background: rgba(231, 76, 60, 0.2);
	color: var(--danger);
	border: 2px solid rgba(231, 76, 60, 0.3);
}
/* Team Name in DVP Table */
.dvp-table .team-name {
	font-weight: 600;
	color: var(--text-primary);
	font-size: 0.875rem;
	text-align: left;
}
/* DFS Points */
.dfs-points {
	font-weight: 700;
	font-size: 1rem;
}
.dfs-points.elite {
	color: var(--primary-green);
}
.dfs-points.good {
	color: #26D0CE;
}
.dfs-points.average {
	color: var(--text-primary);
}
.dfs-points.bad {
	color: var(--warning);
}
.dfs-points.avoid {
	color: var(--danger);
}
/* VS Average */
.vs-avg {
	font-weight: 600;
	font-size: 0.875rem;
}
.vs-avg.positive {
	color: var(--primary-green);
}
.vs-avg.negative {
	color: var(--danger);
}
/* Trend Indicators */
.trend-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
}
.trend-better {
	color: var(--primary-green);
	font-size: 0.875rem;
}
.trend-worse {
	color: var(--danger);
	font-size: 0.875rem;
}
.trend-stable {
	color: var(--text-secondary);
	font-size: 0.875rem;
}
/* Last 3 Average */
.last3-avg {
	font-weight: 600;
	color: var(--text-secondary);
}
/* DVP Notes */
.dvp-notes {
	margin-top: 3rem;
}
.dvp-notes h3 {
	color: var(--text-primary);
	margin-bottom: 1.5rem;
	font-size: 1.25rem;
}
.notes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
}
.note-card {
	background: var(--bg-card);
	padding: 1.5rem;
	border-radius: 8px;
	border: 1px solid var(--border-color);
	transition: all 0.3s ease;
}
.note-card:hover {
	background: var(--bg-card-hover);
	border-color: var(--primary-green);
}
.note-icon {
	font-size: 2rem;
	color: var(--primary-green);
	margin-bottom: 1rem;
	display: block;
}
.note-card h4 {
	color: var(--text-primary);
	margin-bottom: 0.5rem;
	font-size: 1rem;
}
.note-card p {
	color: var(--text-secondary);
	font-size: 0.875rem;
	line-height: 1.5;
}
/* Responsive Design */
@media (max-width: 768px) {
	.dvp-position-selector {
		justify-content: center;
	}
	.position-tab {
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
	}
	.dvp-legend {
		gap: 1rem;
		font-size: 0.75rem;
	}
	.dvp-summary-cards {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.dvp-table th,.dvp-table td {
		padding: 0.5rem;
		font-size: 0.813rem;
	}
	.dvp-table .hide-mobile {
		display: none;
	}
	.team-cell .team-name {
		display: none;
	}
	.notes-grid {
		grid-template-columns: 1fr;
	}
}
/* ================================PROPS PAGE STYLES================================ */
/* Props Stats Bar */
.props-stats-bar {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 1rem;
	padding: 1.5rem;
	margin-bottom: 2rem;
}
.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 2rem;
	text-align: center;
}
.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.stat-value {
	font-size: 2rem;
	font-weight: 700;
	color: var(--primary-green);
	line-height: 1;
	margin-bottom: 0.25rem;
}
.stat-label {
	font-size: 0.875rem;
	color: var(--text-secondary);
	font-weight: 500;
}
/* Props Filters */
.props-filters {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 1rem;
	padding: 1.5rem;
	margin-bottom: 2rem;
}
.filters-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	align-items: end;
}
.filter-group label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: var(--text-primary);
	font-size: 0.875rem;
}
.search-group {
	min-width: 250px;
}
/* Props Grid */
.props-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	gap: 2rem;
	margin-bottom: 3rem;
}
/* Prop Card */
.prop-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 1rem;
	padding: 1.5rem;
	transition: all 0.3s ease;
}
.prop-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 30px rgba(0, 184, 148, 0.1);
	border-color: var(--primary-green);
}
/* Prop Card Header */
.prop-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border-color);
}
.player-info {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.player-avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--bg-darker);
	border: 2px solid var(--border-color);
}
.player-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.player-name {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 0.25rem 0;
}
.player-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875rem;
}
.position-badge {
	background: var(--primary-green);
	color: var(--bg-dark);
	padding: 0.25rem 0.5rem;
	border-radius: 0.375rem;
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
}
.position-badge.qb {
	background: #3498db;
}
.position-badge.rb {
	background: #e74c3c;
}
.position-badge.wr {
	background: #f39c12;
}
.position-badge.te {
	background: #9b59b6;
}
/* MLB positions */
.position-badge.sp,
.position-badge.rp,
.position-badge.p {
	background: #e74c3c;
}
.position-badge.c {
	background: #3498db;
}
.position-badge.1b,
.position-badge.2b,
.position-badge.3b,
.position-badge.ss {
	background: #f39c12;
}
.position-badge.of {
	background: var(--primary-green);
}
.team {
	font-weight: 600;
	color: var(--text-primary);
}
.matchup {
	color: var(--text-secondary);
}
.ai-advice-btn {
	white-space: nowrap;
}
/* Prop Tabs */
.prop-tabs {
	margin-top: 1rem;
}
.prop-nav {
	display: flex;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 1rem;
}
.prop-tab {
	background: transparent;
	border: none;
	padding: 0.75rem 1rem;
	color: var(--text-secondary);
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: all 0.2s ease;
}
.prop-tab:hover {
	color: var(--text-primary);
}
.prop-tab.active {
	color: var(--primary-green);
	border-bottom-color: var(--primary-green);
}
.prop-content {
	display: none;
}
.prop-content.active {
	display: block;
}
/* Prop Items */
.props-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.prop-item {
	background: var(--bg-darker);
	border: 1px solid var(--border-color);
	border-radius: 0.75rem;
	padding: 1rem;
	transition: all 0.2s ease;
}
.prop-item:hover {
	border-color: var(--primary-green);
}
.prop-item.high-confidence {
	border-left: 4px solid var(--success);
}
.prop-item.medium-confidence {
	border-left: 4px solid var(--warning);
}
.prop-item.low-confidence {
	border-left: 4px solid var(--text-muted);
}
.prop-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
}
.prop-stat {
	font-weight: 600;
	color: var(--text-primary);
	font-size: 0.875rem;
}
.confidence-badge {
	padding: 0.25rem 0.5rem;
	border-radius: 0.375rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
}
.confidence-badge.high {
	background: var(--success);
	color: var(--bg-dark);
}
.confidence-badge.medium {
	background: var(--warning);
	color: var(--bg-dark);
}
.confidence-badge.low {
	background: var(--text-muted);
	color: white;
}
/* Prop Data */
.prop-data {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.line-movement,.projection-data {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.875rem;
}
.current-line,.projection {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.line-label,.proj-label {
	color: var(--text-secondary);
	font-weight: 500;
}
.line-value,.proj-value {
	color: var(--text-primary);
	font-weight: 600;
}
.movement {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-weight: 600;
	font-size: 0.75rem;
}
.movement.up {
	color: var(--success);
}
.movement.down {
	color: var(--danger);
}
.movement.neutral {
	color: var(--text-muted);
}
.edge {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}
.edge-value {
	font-weight: 700;
	color: var(--primary-green);
	font-size: 0.875rem;
}
.edge-label {
	color: var(--text-secondary);
	font-size: 0.75rem;
}
/* Prop Recommendations */
.prop-recommendation {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem;
	background: var(--bg-card);
	border-radius: 0.5rem;
	border: 1px solid var(--border-color);
}
.rec-badge {
	padding: 0.25rem 0.75rem;
	border-radius: 0.375rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	min-width: 60px;
	text-align: center;
}
.rec-badge.over {
	background: var(--success);
	color: var(--bg-dark);
}
.rec-badge.under {
	background: var(--danger);
	color: white;
}
.rec-badge.yes {
	background: var(--success);
	color: var(--bg-dark);
}
.rec-text {
	color: var(--text-secondary);
	font-size: 0.813rem;
	font-style: italic;
}
/* Load More Section */
.load-more-section {
	text-align: center;
	margin: 3rem 0;
}
/* AI Advice Modal */
.ai-coming-soon {
	text-align: center;
	padding: 2rem;
}
.coming-soon-icon {
	color: var(--primary-green);
	margin-bottom: 1.5rem;
}
.coming-soon-icon i {
	animation: pulse 2s infinite;
}
@keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}
.feature-list {
	text-align: left;
	margin: 1.5rem 0;
	padding-left: 0;
	list-style: none;
}
.feature-list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	color: var(--text-secondary);
}
.feature-list i {
	color: var(--primary-green);
	font-size: 0.875rem;
}
.notify-section {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border-color);
}
.hit-rate-badge {
	color: var(--success);
	font-weight: 600;
}
/* Responsive Design */
@media (max-width: 768px) {
	.props-grid {
		grid-template-columns: 1fr;
	}
	.filters-row {
		grid-template-columns: 1fr;
	}
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
	.prop-card-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	.player-info {
		width: 100%;
	}
	.prop-nav {
		overflow-x: auto;
		white-space: nowrap;
	}
	.prop-tab {
		flex-shrink: 0;
	}
	.line-movement,.projection-data {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	.edge {
		align-items: flex-start;
		text-align: left;
	}
	.prop-recommendation {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}
/* MLB Props Additional Styles */
.prop-card {
	position: relative;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 0;
	transition: all 0.3s ease;
	cursor: pointer;
	height: 320px;
	transform-style: preserve-3d;
	perspective: 1000px;
}
.prop-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.prop-card.elite {
	border-color: #3498db;
	background: linear-gradient(135deg, rgba(52, 152, 219, 0.1) 0%, transparent 100%);
}
.prop-card.high {
	border-color: var(--primary-green);
	background: linear-gradient(135deg, rgba(0, 184, 148, 0.1) 0%, transparent 100%);
}
.prop-card.low {
	border-color: var(--danger);
	background: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, transparent 100%);
}
.card-face {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	transition: transform 0.6s;
	padding: 1.5rem;
	overflow: hidden;
}
.card-front {
	z-index: 2;
	transform: rotateY(0deg);
}
.card-back {
	transform: rotateY(180deg);
	background: var(--bg-darker);
	border: 1px solid var(--border-color);
	border-radius: 8px;
}
.prop-card.flipped .card-front {
	transform: rotateY(-180deg);
}
.prop-card.flipped .card-back {
	transform: rotateY(0deg);
}
.prop-main-content {
	margin: 1.5rem 0;
}
.prop-stat-display {
	display: flex;
	flex-direction: column;
}
.stat-type {
	font-size: 0.875rem;
	color: var(--text-secondary);
	text-transform: uppercase;
}
.stat-line {
	font-size: 2rem;
	font-weight: 700;
	color: var(--text-primary);
}
.recommendation-badge {
	padding: 0.5rem 1.5rem;
	border-radius: 25px;
	font-weight: 700;
	font-size: 1rem;
}
.recommendation-badge.over {
	background: var(--primary-green);
	color: white;
}
.recommendation-badge.under {
	background: var(--danger);
	color: white;
}
.quick-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.stat-item {
	text-align: center;
}
.card-actions {
	position: absolute;
	bottom: 1.5rem;
	left: 1.5rem;
	right: 1.5rem;
}
.btn-flip {
	width: 100%;
	padding: 0.75rem;
	background: rgba(0, 184, 148, 0.1);
	border: 1px solid var(--primary-green);
	color: var(--primary-green);
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.btn-flip:hover {
	background: var(--primary-green);
	color: white;
}
.card-back-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}
.card-back-header h4 {
	margin: 0;
	font-size: 1.125rem;
	color: var(--text-primary);
}
.btn-flip-back {
	background: none;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	font-size: 1.25rem;
}
.detailed-stats-tabs {
	height: calc(100% - 60px);
	display: flex;
	flex-direction: column;
}
.stats-nav {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--border-color);
}
.stats-tab {
	background: none;
	border: none;
	color: var(--text-secondary);
	padding: 0.5rem 1rem;
	cursor: pointer;
	position: relative;
	transition: color 0.3s ease;
}
.stats-tab.active {
	color: var(--primary-green);
}
.stats-tab.active::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--primary-green);
}
.stats-content {
	flex: 1;
	overflow-y: auto;
}
.tab-pane {
	display: none;
}
.tab-pane.active {
	display: block;
}
.main-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
.stat-block {
	background: rgba(255, 255, 255, 0.05);
	padding: 1rem;
	border-radius: 6px;
	text-align: center;
}
.block-label {
	display: block;
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin-bottom: 0.5rem;
}
.block-value {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text-primary);
}
.odds-display {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.odds-row {
	display: flex;
	justify-content: space-between;
	padding: 0.75rem;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 6px;
}
.book-name {
	font-weight: 500;
	color: var(--text-secondary);
}
.odds-value {
	font-weight: 600;
	color: var(--primary-green);
}
.game-logs {
	font-size: 0.875rem;
}
.log-header {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: 0.5rem;
	border-bottom: 1px solid var(--border-color);
	color: var(--text-secondary);
	font-weight: 600;
}
.log-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: 0.5rem;
	border-bottom: 1px solid rgba(46, 46, 46, 0.5);
}
.log-row .hit {
	color: var(--primary-green);
	font-weight: 600;
}
.log-row .miss {
	color: var(--danger);
}
.chart-container {
	height: 200px;
}
.filters-section {
	background: var(--bg-card);
	padding: 1.5rem;
	border-radius: 8px;
	border: 1px solid var(--border-color);
}
.stat-filters {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.filter-btn {
	padding: 0.5rem 1rem;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
	border-radius: 25px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.filter-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--text-primary);
}
.filter-btn.active {
	background: var(--primary-green);
	border-color: var(--primary-green);
	color: white;
}
.toggle-container {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.toggle-label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--text-secondary);
}
.toggle-input {
	display: none;
}
.toggle-slider {
	width: 50px;
	height: 26px;
	background: var(--bg-darker);
	border-radius: 13px;
	position: relative;
	cursor: pointer;
	transition: background 0.3s ease;
}
.toggle-slider::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: white;
	border-radius: 50%;
	transition: transform 0.3s ease;
}
.toggle-input:checked + .toggle-slider {
	background: var(--primary-green);
}
.toggle-input:checked + .toggle-slider::after {
	transform: translateX(24px);
}
.btn-ai-advice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.token-count {
	font-size: 0.875rem;
	opacity: 0.8;
}

/* =====================================================
   ENHANCED SCHEDULE PAGE STYLES
   ===================================================== */

/* Enhanced Navigation */
.schedule-nav-enhanced {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	margin: 2rem 0 3rem;
}

.schedule-period-enhanced {
	text-align: center;
	min-width: 200px;
}

.schedule-period-enhanced .period-label {
	font-size: 0.875rem;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 0.25rem;
}

.schedule-period-enhanced .period-value {
	font-size: 3rem;
	font-weight: 800;
	color: var(--primary-green);
	line-height: 1;
}

.schedule-period-enhanced .period-dates {
	font-size: 0.875rem;
	color: var(--text-secondary);
	margin-top: 0.5rem;
}

/* Week Stats Bar */
.week-stats-bar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 1rem;
	margin-bottom: 3rem;
	background: var(--bg-card);
	padding: 1.5rem;
	border-radius: 12px;
	border: 1px solid var(--border-color);
}

.week-stat {
	text-align: center;
	position: relative;
}

.week-stat .stat-value {
	font-size: 2rem;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 0.25rem;
}

.week-stat .stat-label {
	font-size: 0.875rem;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.week-stat .stat-hint {
	font-size: 0.75rem;
	color: var(--text-muted);
	font-weight: 400;
	text-transform: none;
}

.week-stat.highlight-stat .stat-value {
	color: var(--primary-green);
}

/* Games Container */
.games-container {
	margin-bottom: 3rem;
}

.empty-state {
	text-align: center;
	padding: 4rem;
	background: var(--bg-card);
	border-radius: 12px;
	color: var(--text-secondary);
}

.empty-state i {
	font-size: 3rem;
	color: var(--text-muted);
	margin-bottom: 1rem;
	display: block;
}

/* Day Section */
.day-section {
	margin-bottom: 3rem;
}

.day-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--border-color);
	color: var(--text-primary);
}

.day-header i {
	color: var(--primary-green);
}

.day-header .game-count {
	margin-left: auto;
	font-size: 0.875rem;
	color: var(--text-secondary);
	font-weight: 400;
}

/* Day Games Grid */
.day-games-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	gap: 1.5rem;
}

/* Enhanced Game Card */
.game-card-enhanced {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	transition: all 0.3s ease;
}

.game-card-enhanced:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	border-color: var(--primary-green);
}

.game-card-enhanced.game-live {
	border-color: var(--primary-green);
	animation: pulse-border 2s infinite;
}

.game-card-enhanced.game-final {
	opacity: 0.9;
}

@keyframes pulse-border {
	0%, 100% { border-color: var(--primary-green); }
	50% { border-color: rgba(0, 184, 148, 0.3); }
}

/* Game Badge */
.game-badge {
	position: absolute;
	top: 0;
	right: 0;
	background: var(--primary-green);
	color: var(--bg-dark);
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom-left-radius: 8px;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.game-badge.primetime-badge {
	background: var(--gold);
}

.game-badge.division-badge {
	background: var(--danger);
}

/* Game Header Enhanced */
.game-header-enhanced {
	padding: 1rem 1.25rem;
	background: var(--bg-darker);
	border-bottom: 1px solid var(--border-color);
}

.game-status-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.game-time {
	font-size: 0.875rem;
	color: var(--text-secondary);
}

.broadcast-info {
	font-size: 0.75rem;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

/* Teams Section */
.teams-section {
	padding: 1.25rem;
}

.team-row {
	/* Table rows should not use flex display */
	transition: background-color 0.2s ease;
}

.team-info {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1;
	justify-content: space-between;
}

/* Specific override for schedule page team layout */
.teams-section .team-info {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-direction: row !important;
}

.team-logo {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.team-details {
	display: flex;
	flex-direction: column;
}

.team-name {
	font-weight: 700;
	color: var(--text-primary);
	font-size: 1rem;
}

.team-record {
	font-size: 0.75rem;
	color: var(--text-secondary);
}

/* Team Logo and Name Wrapper for Schedule */
.team-logo-small {
	width: 50px;
	height: auto;
	object-fit: contain;
	flex-shrink: 0;
}

.teams-section .team-name-wrapper {
	display: flex !important;
	align-items: center !important;
	gap: 10px;
	flex-direction: row !important;
}

.teams-section .team-name-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.2;
}

.teams-section .team-city {
	font-weight: 700;
	color: var(--text-primary);
	white-space: nowrap;
	font-size: 0.875rem;
	display: block;
}

.teams-section .team-nickname {
	font-weight: 700;
	color: var(--text-primary);
	white-space: nowrap;
	font-size: 1rem;
	display: block;
}

.team-score {
	font-size: 2rem;
	font-weight: 800;
	color: var(--text-secondary);
}

.team-score.winning {
	color: var(--primary-green);
}

.team-ml {
	font-size: 0.875rem;
	color: var(--text-secondary);
	font-weight: 600;
}

.game-separator {
	text-align: center;
	padding: 0.5rem 0;
}

.at-symbol {
	color: var(--text-muted);
	font-size: 0.875rem;
}

/* Final Game Stats */
.final-game-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: var(--bg-darker);
	border-top: 1px solid var(--border-color);
}

.stat-item {
	text-align: center;
}

.stat-item .stat-label {
	font-size: 0.75rem;
	color: var(--text-secondary);
	text-transform: uppercase;
	display: block;
	margin-bottom: 0.25rem;
}

.stat-item .stat-value {
	font-weight: 700;
	color: var(--text-primary);
}

.stat-value.over {
	color: var(--danger);
}

.stat-value.under {
	color: var(--primary-green);
}

.ou-result {
	font-size: 0.75rem;
	margin-left: 0.25rem;
}

/* Betting Lines Enhanced */
.betting-lines-enhanced {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: var(--bg-darker);
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
}

.betting-line {
	text-align: center;
}

.line-header {
	font-size: 0.75rem;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
}

.line-content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.line-team {
	font-size: 0.875rem;
	color: var(--text-secondary);
}

.line-value {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text-primary);
}

.line-value.favorite {
	color: var(--danger);
}

.line-value.underdog {
	color: var(--primary-green);
}

.line-value.total-value {
	color: var(--warning);
}

/* Game Insights Enhanced */
.game-insights-enhanced {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 1rem 1.25rem;
}

.insight-badge-enhanced {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--bg-darker);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	font-size: 0.75rem;
	transition: all 0.2s ease;
}

.insight-badge-enhanced:hover {
	transform: translateY(-1px);
	border-color: currentColor;
}

.insight-badge-enhanced i {
	font-size: 1rem;
}

.insight-text {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.insight-detail {
	color: var(--text-secondary);
	font-weight: 400;
}

.insight-badge-enhanced.shootout {
	color: var(--danger);
	border-color: rgba(231, 76, 60, 0.3);
}

.insight-badge-enhanced.under {
	color: var(--primary-green);
	border-color: rgba(0, 184, 148, 0.3);
}

.insight-badge-enhanced.blowout {
	color: var(--warning);
	border-color: rgba(243, 156, 18, 0.3);
}

.insight-badge-enhanced.close {
	color: var(--text-primary);
	border-color: var(--border-color);
}

.insight-badge-enhanced.weather-alert {
	color: var(--warning);
	border-color: rgba(243, 156, 18, 0.3);
}

.insight-badge-enhanced.weather-alert.cold {
	color: #3498db;
	border-color: rgba(52, 152, 219, 0.3);
}

.insight-badge-enhanced.injury-alert {
	color: var(--danger);
	border-color: rgba(231, 76, 60, 0.3);
}

/* Quick Actions */
.game-quick-actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	padding: 1rem 1.25rem;
	background: var(--bg-darker);
}

.quick-action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0.75rem;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	color: var(--text-secondary);
	text-decoration: none;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	transition: all 0.2s ease;
	position: relative;
}

.quick-action-btn:hover {
	background: var(--bg-card-hover);
	color: var(--primary-green);
	border-color: var(--primary-green);
	transform: translateY(-1px);
}

.quick-action-btn.premium {
	background: rgba(255, 215, 0, 0.1);
	border-color: var(--gold);
	color: var(--gold);
}

.quick-action-btn.premium:hover {
	background: rgba(255, 215, 0, 0.2);
}

.quick-action-btn i {
	font-size: 1.25rem;
}

/* DFS Slates Section */
.dfs-slates-section {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.section-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	color: var(--text-primary);
	font-size: 1.5rem;
}

.section-title i {
	color: var(--primary-green);
}

.slates-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1rem;
}

.slate-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 1.25rem;
	transition: all 0.2s ease;
}

.slate-card:hover {
	border-color: var(--primary-green);
	transform: translateY(-1px);
}

.slate-card.main-slate {
	border-color: var(--primary-green);
	border-width: 2px;
}

.slate-card.primetime {
	background: rgba(255, 215, 0, 0.05);
	border-color: rgba(255, 215, 0, 0.3);
}

.slate-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.slate-type {
	font-weight: 700;
	color: var(--text-primary);
}

.slate-games {
	font-size: 0.875rem;
	color: var(--text-secondary);
}

.slate-time {
	font-size: 0.875rem;
	color: var(--text-secondary);
	margin-bottom: 1rem;
}

.slate-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border-color);
}

.slate-stat .stat-label {
	font-size: 0.75rem;
	color: var(--text-muted);
	text-transform: uppercase;
	display: block;
	margin-bottom: 0.25rem;
}

.slate-stat .stat-value {
	font-weight: 700;
	color: var(--primary-green);
}

/* Season Navigator */
.season-navigator {
	margin-top: 3rem;
}

.weeks-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
	gap: 0.5rem;
}

.week-box {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 0.75rem;
	text-align: center;
	text-decoration: none;
	color: var(--text-secondary);
	transition: all 0.2s ease;
	position: relative;
}

.week-box:hover {
	background: var(--bg-card-hover);
	border-color: var(--primary-green);
	color: var(--text-primary);
}

.week-box.completed {
	background: var(--bg-darker);
	opacity: 0.7;
}

.week-box.current {
	border-color: var(--primary-green);
	border-width: 2px;
}

.week-box.selected {
	background: var(--primary-green);
	color: var(--bg-dark);
	font-weight: 700;
}

.week-number {
	font-weight: 600;
	font-size: 0.875rem;
}

.week-indicator {
	position: absolute;
	top: -8px;
	right: -8px;
	background: var(--danger);
	color: white;
	font-size: 0.625rem;
	padding: 0.125rem 0.375rem;
	border-radius: 3px;
	font-weight: 700;
	text-transform: uppercase;
	animation: blink 2s infinite;
}

@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* Tooltip */
.tooltip {
	position: absolute;
	background: var(--bg-darker);
	color: var(--text-primary);
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	font-size: 0.75rem;
	border: 1px solid var(--border-color);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	z-index: 1000;
	pointer-events: none;
	white-space: nowrap;
}

/* Schedule Page Responsive */
@media (max-width: 768px) {
	.week-stats-bar {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.day-games-grid {
		grid-template-columns: 1fr;
	}
	
	.betting-lines-enhanced {
		grid-template-columns: 1fr;
	}
	
	.game-quick-actions {
		grid-template-columns: 1fr;
	}
	
	.weeks-grid {
		grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
	}
	
	.schedule-nav-enhanced {
		gap: 1rem;
	}
	
	.schedule-period-enhanced .period-value {
		font-size: 2rem;
	}
}

/* NBA Starting Lineups Styles */
.lineup-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
	gap: 2rem;
	margin-bottom: 3rem;
}

.lineup-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.3s ease;
}

.lineup-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	border-color: var(--primary-green);
}

.lineup-header {
	background: var(--bg-darker);
	padding: 1rem 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--border-color);
}

.game-time {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text-primary);
}

.game-tv {
	background: var(--primary-green);
	color: var(--bg-primary);
	padding: 0.25rem 0.75rem;
	border-radius: 4px;
	font-size: 0.875rem;
	font-weight: 500;
}

.lineup-teams {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	padding: 1.5rem;
	gap: 1.5rem;
}

.lineup-team {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.team-header {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.team-logo {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.team-info {
	flex: 1;
}

.team-name {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 0.25rem;
}

.lineup-status {
	font-size: 0.875rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.lineup-status.confirmed {
	color: var(--success);
}

.lineup-status.projected {
	color: var(--warning);
}

.update-time {
	font-size: 0.75rem;
	color: var(--text-muted);
}

.vs-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.vs-divider::before {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 100%;
	background: var(--bg-darker);
}

.vs-divider span {
	background: var(--bg-card);
	padding: 0.5rem 1rem;
	border-radius: 20px;
	border: 1px solid var(--border-color);
	font-weight: 600;
	color: var(--text-secondary);
	z-index: 1;
}

.lineup-section {
	margin-bottom: 1.5rem;
}

.lineup-section:last-child {
	margin-bottom: 0;
}

.section-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.75rem;
}

.lineup-starters {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.lineup-player {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem;
	background: var(--bg-darker);
	border-radius: 6px;
	transition: background-color 0.2s ease;
}

.lineup-player:hover {
	background: rgba(0, 184, 148, 0.1);
}

.lineup-player.player-injured {
	opacity: 0.8;
}

.player-jersey {
	font-weight: 600;
	color: var(--text-secondary);
	min-width: 2rem;
	text-align: center;
}

.player-name {
	flex: 1;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.player-note {
	color: var(--warning);
	font-size: 0.875rem;
	cursor: help;
}

.lineup-bench {
	max-height: 200px;
	overflow-y: auto;
	padding-right: 0.5rem;
}

.lineup-bench::-webkit-scrollbar {
	width: 6px;
}

.lineup-bench::-webkit-scrollbar-track {
	background: var(--bg-darker);
	border-radius: 3px;
}

.lineup-bench::-webkit-scrollbar-thumb {
	background: var(--bg-darker);
	border-radius: 3px;
}

.lineup-bench::-webkit-scrollbar-thumb:hover {
	background: var(--text-muted);
}

.bench-player {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.5rem;
	font-size: 0.875rem;
	color: var(--text-secondary);
	transition: color 0.2s ease;
}

.bench-player:hover {
	color: var(--text-primary);
}

.pos-badge-mini {
	font-size: 0.75rem;
	padding: 0.125rem 0.375rem;
	border-radius: 3px;
	font-weight: 500;
}

/* Position badge colors for mini badges */
.pos-badge-mini.pg { background-color: rgba(231, 76, 60, 0.2); color: #E74C3C; }
.pos-badge-mini.sg { background-color: rgba(230, 126, 34, 0.2); color: #E67E22; }
.pos-badge-mini.sf { background-color: rgba(52, 152, 219, 0.2); color: #3498DB; }
.pos-badge-mini.pf { background-color: rgba(155, 89, 182, 0.2); color: #9B59B6; }
.pos-badge-mini.c { background-color: rgba(0, 184, 148, 0.2); color: var(--primary-green); }
.pos-badge-mini.g { background-color: rgba(243, 156, 18, 0.2); color: #F39C12; }
.pos-badge-mini.f { background-color: rgba(93, 173, 226, 0.2); color: #5DADE2; }

/* Date selector styles */
.date-selector {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 2rem;
}

.date-nav-btn {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.date-nav-btn:hover {
	background: var(--primary-green);
	border-color: var(--primary-green);
	color: var(--bg-primary);
}

.date-picker {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	padding: 0.5rem 1rem;
	border-radius: 8px;
	font-size: 1rem;
	cursor: pointer;
}

.no-games-message {
	text-align: center;
	padding: 4rem 2rem;
	color: var(--text-secondary);
	font-size: 1.1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
	.lineup-grid {
		grid-template-columns: 1fr;
	}
	
	.lineup-teams {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	
	.vs-divider {
		height: 40px;
		margin: 1rem 0;
	}
	
	.vs-divider::before {
		width: 100%;
		height: 1px;
		top: 50%;
		transform: translateY(-50%);
	}
	
	.team-header {
		justify-content: center;
		text-align: center;
	}
	
	.lineup-bench {
		max-height: 150px;
	}
}

/* NBA Defense vs Position Styles */
.info-box {
	background: var(--bg-card);
	border: 1px solid var(--primary-green);
	border-radius: 8px;
	padding: 1.5rem;
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.info-icon {
	color: var(--primary-green);
	font-size: 1.5rem;
	flex-shrink: 0;
}

.info-content h4 {
	margin: 0 0 0.5rem 0;
	color: var(--text-primary);
	font-size: 1.1rem;
}

.info-content p {
	margin: 0;
	color: var(--text-secondary);
	line-height: 1.6;
}

.position-toggle {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.toggle-label {
	font-weight: 600;
	color: var(--text-secondary);
}

.position-buttons {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.position-btn {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
	padding: 0.5rem 1rem;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.position-btn:hover {
	border-color: var(--primary-green);
	color: var(--text-primary);
}

.position-btn.active {
	background: var(--primary-green);
	border-color: var(--primary-green);
	color: var(--bg-primary);
}

/* NBA Defense vs Position Specific Styles */
.dvp-summary-cards {
	margin-bottom: 2rem;
}

.summary-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

.summary-card h3 {
	margin: 0 0 1rem 0;
	font-size: 1.125rem;
	color: var(--text-primary);
}

.avg-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 1rem;
}

.avg-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0.75rem;
	background: var(--bg-darker);
	border-radius: 6px;
}

.avg-stat .stat-label {
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin-bottom: 0.25rem;
}

.avg-stat .stat-value {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--primary-green);
}

/* NBA DVP Specific Adjustments */
.dvp-table .fantasy-points {
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.125rem 0.375rem;
	border-radius: 4px;
	display: inline-block;
}

.dvp-table .stat-value {
	font-weight: 500;
	color: var(--text-primary);
	font-size: 0.875rem;
}

.dvp-table .stat-diff {
	font-size: 0.625rem;
	margin-top: 0.125rem;
}

.dvp-table .stat-diff.positive {
	color: #FF7979;
}

.dvp-table .stat-diff.negative {
	color: #2ED573;
}

.dvp-table .vs-avg {
	text-align: center;
}

.dvp-table .rank-indicator {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-weight: 500;
	font-size: 0.875rem;
}

.dvp-table .rank-indicator.good {
	color: #2ED573;
}

.dvp-table .rank-indicator.bad {
	color: #FF7979;
}

.dvp-table .diff-value {
	font-size: 0.75rem;
	font-weight: 500;
	display: block;
	margin-top: 0.125rem;
}

/* Cell background colors based on performance */
.elite-defense {
	background-color: rgba(0, 184, 148, 0.15);
}

.elite-defense .diff-value {
	color: var(--primary-green);
}

.good-defense {
	background-color: rgba(46, 213, 115, 0.1);
}

.good-defense .diff-value {
	color: #2ED573;
}

.average-defense {
	background-color: transparent;
}

.average-defense .diff-value {
	color: var(--text-secondary);
}

.poor-defense {
	background-color: rgba(255, 121, 121, 0.1);
}

.poor-defense .diff-value {
	color: #FF7979;
}

.terrible-defense {
	background-color: rgba(231, 76, 60, 0.15);
}

.terrible-defense .diff-value {
	color: #E74C3C;
}

/* Legend color boxes */
.legend-color {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	border: 1px solid var(--border-color);
}

.legend-color.elite-defense {
	background-color: rgba(0, 184, 148, 0.15);
}

.legend-color.good-defense {
	background-color: rgba(46, 213, 115, 0.1);
}

.legend-color.average-defense {
	background-color: rgba(255, 255, 255, 0.1);
}

.legend-color.poor-defense {
	background-color: rgba(255, 121, 121, 0.1);
}

.legend-color.terrible-defense {
	background-color: rgba(231, 76, 60, 0.15);
}

/* Hide less important columns on mobile */
@media (max-width: 1024px) {
	.dvp-table .hide-mobile {
		display: none;
	}
}

@media (max-width: 768px) {
	.position-toggle {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	
	.avg-stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}
	
	.avg-stat {
		padding: 0.5rem;
	}
	
	.avg-stat .stat-value {
		font-size: 1rem;
	}
	
	.dvp-table {
		font-size: 0.75rem;
	}
	
	.dvp-table th,
	.dvp-table td {
		padding: 0.5rem;
	}
	
	.dvp-table .fantasy-points {
		font-size: 0.75rem;
		padding: 0.125rem 0.25rem;
	}
	
	.dvp-table .rank-badge {
		width: 24px;
		height: 24px;
		font-size: 0.625rem;
	}
	
	.dvp-table .stat-value {
		font-size: 0.75rem;
	}
	
	.dvp-table .team-name {
		font-size: 0.75rem;
	}
}

/* =====================================================TOP PLAYER MATCHUPS STYLES===================================================== */
.matchup-filters {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.position-filter {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.filter-btn {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
	padding: 0.5rem 1rem;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.filter-btn:hover {
	border-color: var(--primary-green);
	color: var(--text-primary);
}

.filter-btn.active {
	background: var(--primary-green);
	border-color: var(--primary-green);
	color: var(--bg-primary);
}

/* Right-side wrapper holds the Show + Sort controls.  Without flex they
   stacked / collided with each other — the "Show 24" dropdown overlapped
   the Sort by Matchup Score dropdown. */
.filter-controls-right {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.per-page-control,
.sort-control {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.per-page-control label,
.sort-control label {
	color: var(--text-secondary);
	font-size: 0.85rem;
	font-weight: 500;
	margin: 0;
	white-space: nowrap;
}

.per-page-select,
.sort-select {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	padding: 0.5rem 1rem;
	border-radius: 6px;
	font-size: 0.875rem;
	cursor: pointer;
	min-width: 90px;
}

.per-page-select:focus,
.sort-select:focus {
	outline: none;
	border-color: var(--primary-green);
}

/* Matchup Sections */
.matchups-section {
	margin-bottom: 3rem;
}

.section-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	font-size: 1.5rem;
	color: var(--text-primary);
}

.section-title i {
	font-size: 1.25rem;
}

.favorable-section .section-title i {
	color: var(--primary-green);
}

.unfavorable-section .section-title i {
	color: var(--danger);
}

.section-subtitle {
	font-size: 0.875rem;
	color: var(--text-secondary);
	font-weight: 400;
	margin-left: auto;
}

/* Modern Matchup Cards Grid */
.matchup-cards-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-bottom: 3rem;
}

.matchup-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.favorable-section .matchup-card {
	border-left: 4px solid var(--primary-green);
}

.unfavorable-section .matchup-card {
	border-left: 4px solid var(--danger);
}

/* Matchup Score Badge */
.matchup-score {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1rem;
	border: 2px solid;
}

.elite-matchup {
	background: rgba(0, 184, 148, 0.2);
	color: var(--primary-green);
	border-color: var(--primary-green);
}

.great-matchup {
	background: rgba(46, 213, 115, 0.2);
	color: #2ED573;
	border-color: #2ED573;
}

.good-matchup {
	background: rgba(52, 152, 219, 0.2);
	color: var(--info);
	border-color: var(--info);
}

.average-matchup {
	background: rgba(243, 156, 18, 0.2);
	color: var(--warning);
	border-color: var(--warning);
}

.poor-matchup {
	background: rgba(255, 121, 121, 0.2);
	color: #FF7979;
	border-color: #FF7979;
}

.terrible-matchup {
	background: rgba(231, 76, 60, 0.2);
	color: var(--danger);
	border-color: var(--danger);
}

/* Player Section */
.player-section {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-right: 1rem;
}

/* Card Content Grid */
.card-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start;
}

.player-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding-right: 60px; /* Space for matchup score */
}

.player-name {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0;
	line-height: 1.3;
	flex: 1;
}

.player-meta {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-shrink: 0;
}

.team-badge {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-secondary);
}

/* Player Stats */
.dfs-points {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.stat-item {
	background: var(--bg-darker);
	padding: 0.5rem;
	border-radius: 6px;
	text-align: center;
}

.stat-label {
	font-size: 0.75rem;
	color: var(--text-secondary);
	display: block;
	margin-bottom: 0.25rem;
}

.stat-value {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--primary-green);
}

.stat-rank {
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin-left: 0.25rem;
}

.traditional-stats {
	padding: 0.75rem 0;
	border-top: 1px solid rgba(46, 46, 46, 0.5);
	border-bottom: 1px solid rgba(46, 46, 46, 0.5);
	margin-bottom: 0.75rem;
}

.stat-row {
	display: flex;
	gap: 1rem;
	font-size: 0.875rem;
	color: var(--text-primary);
	justify-content: center;
}

.salary-info {
	display: flex;
	gap: 1rem;
	font-size: 0.875rem;
	justify-content: center;
}

.dk-salary, .fd-salary {
	color: var(--text-secondary);
}

/* Matchup Section */
.matchup-section {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: space-between;
}

.opponent-info {
	background: var(--bg-darker);
	padding: 1rem;
	border-radius: 8px;
}

.vs-label {
	text-align: center;
	font-size: 0.875rem;
	color: var(--text-secondary);
	margin-bottom: 0.5rem;
}

.opponent-team {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	justify-content: center;
	margin-bottom: 0.75rem;
}

.team-logo-small {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.defense-stats {
	text-align: center;
}

.def-rank {
	font-size: 0.875rem;
	color: var(--text-secondary);
	margin-bottom: 0.25rem;
}

.rank-value {
	color: var(--text-primary);
	font-weight: 600;
}

.vs-position {
	font-size: 0.875rem;
	color: var(--text-secondary);
}

.position-rank {
	color: var(--text-primary);
	font-weight: 600;
}

.vs-avg.positive {
	color: #FF7979;
}

.vs-avg.negative {
	color: #2ED573;
}

/* Game Info */
.game-info {
	background: var(--bg-darker);
	padding: 0.75rem;
	border-radius: 6px;
	text-align: center;
	font-size: 0.875rem;
}

.game-time {
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 0.25rem;
}

.game-location {
	color: var(--text-secondary);
	margin-bottom: 0.5rem;
}

.game-odds {
	display: flex;
	justify-content: center;
	gap: 1rem;
	font-size: 0.75rem;
	color: var(--text-muted);
}

/* Responsive Design */
@media (max-width: 768px) {
	.matchup-filters {
		flex-direction: column;
		align-items: stretch;
	}
	
	.position-filter {
		justify-content: center;
	}

	.filter-controls-right {
		justify-content: center;
	}

	.per-page-control,
	.sort-control {
		justify-content: center;
	}
	
	.matchup-cards-grid {
		grid-template-columns: 1fr;
	}
	
	.matchup-card {
		padding: 1.25rem;
		gap: 1.25rem;
	}
	
	.card-content {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	
	.player-section {
		padding-right: 0;
	}
	
	.player-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
		padding-right: 50px;
	}
	
	.matchup-score {
		width: 40px;
		height: 40px;
		font-size: 0.875rem;
	}
	
	.section-subtitle {
		display: none;
	}
}

/* =====================================================
   MODERN NBA TOP PLAYER MATCHUPS STYLES
   ===================================================== */

/* Modern Matchup Card */
.matchup-card-modern {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.matchup-card-modern:hover {
	background: var(--bg-darker);
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Card Header */
.matchup-card-modern .card-header {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 20px;
}

/* Player Info Row - single line with name and position/team */
.player-info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

/* Player name - takes available space */
.player-info-row .player-name {
	flex: 1;
	font-size: 20px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0;
	line-height: 1.3;
}

/* Team Logo in card header */
.player-info-row .team-logo {
	width: 48px;
	height: 48px;
	object-fit: contain;
	margin-right: 14px;
	flex-shrink: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	padding: 4px;
}

/* Player details wrapper */
.player-info-row .player-details {
	flex: 1;
	min-width: 0;
}

.player-info-row .player-details .player-name {
	margin: 0 0 4px 0;
}

/* Opponent logo - smaller inline */
.player-meta .opp-logo {
	display: inline-block;
	width: 20px;
	height: 20px;
	max-width: 20px;
	max-height: 20px;
	object-fit: contain;
	margin-left: 2px;
	vertical-align: middle;
	flex-shrink: 0;
}

/* VS text separator */
.player-meta .vs-text {
	color: var(--text-muted);
	margin: 0 4px;
	font-size: 12px;
}

/* Opponent team text */
.player-meta .opp-team {
	color: var(--text-muted);
	font-size: 13px;
	margin-left: 4px;
}

/* Player meta - position and team */
.player-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.player-meta .position {
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--bg-darker);
	color: #FFFFFF;
	font-size: 12px;
}

.player-meta .position.position-pg { background: #E74C3C; }
.player-meta .position.position-sg { background: #E67E22; }
.player-meta .position.position-sf { background: #3498DB; }
.player-meta .position.position-pf { background: #9B59B6; }
.player-meta .position.position-c { background: var(--primary-green); }

.player-meta .team {
	font-weight: 700;
	color: var(--text-secondary);
	font-size: 14px;
}

/* Stats Grid - 8 boxes in 2 rows */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}

/* Stat Box */
.stat-box {
	background: var(--bg-dark);
	border-radius: 8px;
	padding: 10px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 4px;
	border: 1px solid var(--border-color);
	transition: all 0.2s ease;
}

.stat-box:hover {
	background: var(--bg-card);
	border-color: var(--border-color);
}

.stat-header {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-muted);
}

.stat-value {
	font-size: 20px;
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1;
}

.stat-value.large {
	font-size: 24px;
}

.stat-rank {
	font-size: 11px;
	color: var(--text-secondary);
	font-weight: 600;
}

.vs-defense {
	font-size: 10px;
	color: var(--text-muted);
	font-weight: 600;
	text-transform: uppercase;
}

.vs-defense.good {
	color: var(--primary-green);
}

.vs-defense.bad {
	color: #E74C3C;
}

.vs-defense.avg {
	color: #F39C12;
}

/* Matchup Box - special styling for the matchup score box */
.stat-box.matchup-box {
	border: 2px solid var(--border-color);
}

.stat-box.matchup-box.elite-matchup {
	background: rgba(0, 184, 148, 0.15);
	border-color: rgba(0, 184, 148, 0.3);
}

.stat-box.matchup-box.elite-matchup .stat-value {
	color: var(--primary-green);
}

.stat-box.matchup-box.great-matchup {
	background: rgba(0, 184, 148, 0.1);
	border-color: rgba(0, 184, 148, 0.2);
}

.stat-box.matchup-box.great-matchup .stat-value {
	color: var(--primary-green);
}

.stat-box.matchup-box.good-matchup {
	background: rgba(38, 208, 206, 0.1);
	border-color: rgba(38, 208, 206, 0.2);
}

.stat-box.matchup-box.good-matchup .stat-value {
	color: #26D0CE;
}

.stat-box.matchup-box.average-matchup {
	background: rgba(243, 156, 18, 0.1);
	border-color: rgba(243, 156, 18, 0.2);
}

.stat-box.matchup-box.average-matchup .stat-value {
	color: #F39C12;
}

.stat-box.matchup-box.poor-matchup {
	background: rgba(255, 121, 121, 0.1);
	border-color: rgba(255, 121, 121, 0.2);
}

.stat-box.matchup-box.poor-matchup .stat-value {
	color: #FF7979;
}

.stat-box.matchup-box.terrible-matchup {
	background: rgba(231, 76, 60, 0.15);
	border-color: rgba(231, 76, 60, 0.3);
}

.stat-box.matchup-box.terrible-matchup .stat-value {
	color: #E74C3C;
}

/* Secondary Info */
.secondary-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 16px;
	border-top: 1px solid var(--border-color);
	gap: 16px;
}

.stat-group,
.salary-group,
.game-details {
	display: flex;
	gap: 12px;
	font-size: 13px;
	color: var(--text-secondary);
}

.stat-group .stat {
	font-weight: 600;
}

.salary-group .salary {
	font-weight: 500;
	color: var(--text-primary);
}

.game-details {
	font-size: 12px;
	color: var(--text-muted);
}

.game-details .time {
	font-weight: 600;
	color: var(--text-secondary);
}

.game-details .location {
	color: var(--text-secondary);
}

.game-details .spread {
	font-weight: 600;
	color: var(--text-primary);
}

/* Section Styling */
.favorable-section .matchup-card-modern {
	border-top: 4px solid var(--primary-green);
}

.unfavorable-section .matchup-card-modern {
	border-top: 4px solid #E74C3C;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
	.matchup-cards-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

@media (max-width: 768px) {
	.matchup-card-modern {
		padding: 16px;
	}

	.player-info-row {
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	.player-info-row .team-logo {
		width: 40px;
		height: 40px;
		margin-right: 10px;
	}

	.player-info-row .player-details .player-name {
		font-size: 16px;
	}

	.player-meta {
		flex-wrap: wrap;
		gap: 4px;
	}

	.player-meta .opp-logo {
		width: 16px;
		height: 16px;
	}
	
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	
	.stat-box {
		padding: 8px;
	}
	
	.stat-value {
		font-size: 18px;
	}
	
	.stat-value.large {
		font-size: 20px;
	}
	
	.secondary-info {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
	}
	
	.stat-group,
	.salary-group,
	.game-details {
		width: 100%;
		justify-content: space-between;
	}
}

/* =====================================================
   NHL STARTING GOALIES STYLES
   ===================================================== */

/* Goalies Section */
.goalies-section {
	margin-bottom: 3rem;
}

.goalies-section .section-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	font-size: 1.5rem;
	color: var(--text-primary);
}

.goalies-section .section-count {
	font-size: 1rem;
	color: var(--text-secondary);
	font-weight: 400;
}

/* Goalie Cards Grid */
.goalie-cards-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	max-width: 1400px;
	margin: 0 auto;
}

/* Goalie Card */
.goalie-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.goalie-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	background: var(--bg-card-hover);
}

/* Goalie Card Header */
.goalie-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20px;
}

.goalie-info {
	flex: 1;
}

.goalie-name {
	font-size: 22px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 8px 0;
	line-height: 1.2;
}

.goalie-meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Status Badge */
.goalie-status-badge {
	padding: 4px 12px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.goalie-status-badge.confirmed {
	background: rgba(0, 184, 148, 0.15);
	color: var(--primary-green);
	border: 1px solid rgba(0, 184, 148, 0.3);
}

.goalie-status-badge.expected {
	background: rgba(230, 126, 34, 0.15);
	color: #E67E22;
	border: 1px solid rgba(230, 126, 34, 0.3);
}

/* Trend Indicator */
.trend-indicator {
	font-size: 16px;
}

/* Game Time */
.goalie-card-header .game-time {
	font-size: 13px;
	color: var(--text-secondary);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Matchup Section */
.goalie-matchup {
	background: var(--bg-darker);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 20px;
}

.team-matchup {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

.team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.team-logo {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.team-abbr {
	font-weight: 700;
	font-size: 14px;
	color: var(--text-primary);
}

.vs-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.vs-text {
	font-size: 14px;
	color: var(--text-secondary);
	font-weight: 600;
}

.game-line {
	font-size: 16px;
	font-weight: 700;
	color: var(--primary-green);
}

.game-total {
	font-size: 12px;
	color: var(--text-secondary);
}

/* Goalie Stats Grid */
.goalie-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}

/* Goalie Section Labels */
.section-label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-secondary);
	margin: 0 0 12px 0;
}

/* Recent Form Section */
.recent-form-section {
	background: var(--bg-darker);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 16px;
}

.recent-stats {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.recent-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.recent-stat .label {
	font-size: 11px;
	color: var(--text-secondary);
	margin-bottom: 4px;
}

.recent-stat .value {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
}

/* Vs Opponent Section */
.vs-opponent-section {
	background: var(--bg-darker);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 16px;
}

.vs-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.vs-stat {
	text-align: center;
}

.vs-stat .label {
	display: block;
	font-size: 11px;
	color: var(--text-secondary);
	margin-bottom: 4px;
}

.vs-stat .value {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
}

/* DFS Section */
.goalie-dfs-section {
	border-top: 1px solid var(--border-color);
	padding-top: 16px;
}

.dfs-salaries {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

.salary-box {
	background: var(--bg-darker);
	border-radius: 8px;
	padding: 12px;
	text-align: center;
}

.salary-box .platform {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin-bottom: 4px;
}

.salary-box.dk .platform {
	color: #FF6B35;
}

.salary-box.fd .platform {
	color: #0A84FF;
}

.salary-box .salary {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 4px;
}

.salary-box .projection {
	font-size: 12px;
	color: var(--primary-green);
	font-weight: 600;
}


/* Filter Bar */
.filters-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}

.filter-buttons {
	display: flex;
	gap: 0.5rem;
}

/* Empty State */
.empty-state {
	text-align: center;
	padding: 4rem 2rem;
	color: var(--text-secondary);
}

.empty-state h3 {
	margin-bottom: 0.5rem;
	color: var(--text-primary);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
	.goalie-cards-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media (max-width: 768px) {
	.goalie-card {
		padding: 20px;
	}
	
	.goalie-name {
		font-size: 20px;
	}
	
	.goalie-stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	
	.team-logo {
		width: 40px;
		height: 40px;
	}
	
	.team-matchup {
		gap: 16px;
	}
	
	.recent-stats {
		flex-direction: column;
		gap: 12px;
	}
	
	.vs-stats {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	
	.dfs-meta {
		flex-direction: column;
		gap: 8px;
	}
	
	.filters-bar {
		flex-direction: column;
		align-items: stretch;
	}
	
	.filter-buttons {
		justify-content: center;
	}
}

/* =====================================================
   NHL LINE STACKS STYLES
   ===================================================== */

/* Line Stacks Grid */
.line-stacks-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-bottom: 3rem;
}

/* Line Stack Card */
.line-stack-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.line-stack-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	background: var(--bg-card-hover);
}

/* Stack Header */
.stack-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border-color);
}

.team-info {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
}

.team-info .team-logo {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.team-details {
	flex: 1;
}

.team-name {
	font-size: 20px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 8px 0;
}

.game-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--text-secondary);
}

.game-info .separator {
	color: var(--text-muted);
	font-size: 10px;
	opacity: 0.5;
}

.game-info .opponent {
	font-weight: 600;
	color: var(--text-primary);
}

.game-info .game-time {
	font-weight: 500;
}

.game-info .implied-total {
	color: var(--primary-green);
	font-weight: 600;
}

/* Stack Grade Badge */
.stack-grade-badge {
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 18px;
	font-weight: 800;
	background: var(--bg-darker);
	border: 2px solid;
}

.stack-grade-badge.text-success {
	border-color: var(--primary-green);
	color: var(--primary-green);
}

.stack-grade-badge.text-info {
	border-color: #3498DB;
	color: #3498DB;
}

.stack-grade-badge.text-warning {
	border-color: #F39C12;
	color: #F39C12;
}

/* Players Section */
.players-section {
	margin-bottom: 20px;
}

.player-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px;
	background: var(--bg-darker);
	border-radius: 8px;
	margin-bottom: 8px;
	transition: background 0.2s;
}

.player-row:hover {
	background: var(--bg-darker);
}

.player-info {
	flex: 1;
}

.player-name {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 2px;
}

.player-position {
	font-size: 12px;
	color: var(--text-secondary);
	font-weight: 700;
	text-transform: uppercase;
}

.player-projections {
	display: flex;
	gap: 20px;
}

.projection-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.projection-item .platform {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.projection-item .platform.dk {
	color: #FF6B35;
}

.projection-item .platform.fd {
	color: #0A84FF;
}

.projection-item .salary {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
}

.projection-item .projection {
	font-size: 13px;
	color: var(--primary-green);
	font-weight: 600;
}

/* Line Metrics */
.line-metrics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 20px;
	padding: 16px;
	background: var(--bg-darker);
	border-radius: 10px;
}

.metric-item {
	text-align: center;
}

.metric-label {
	display: block;
	font-size: 11px;
	color: var(--text-secondary);
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.metric-value {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
}

/* Correlation Section */
.correlation-section {
	background: var(--bg-darker);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 16px;
}

.correlation-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.correlation-header .section-label {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--text-secondary);
}

.correlation-badge {
	padding: 4px 12px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	background: rgba(0, 0, 0, 0.3);
}

.correlation-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.correlation-stat {
	text-align: center;
}

.correlation-stat .label {
	display: block;
	font-size: 11px;
	color: var(--text-secondary);
	margin-bottom: 4px;
}

.correlation-stat .value {
	font-size: 15px;
	font-weight: 700;
}

/* DFS Section */
.dfs-section {
	border-top: 1px solid var(--border-color);
	padding-top: 16px;
	margin-bottom: 16px;
}

.combined-stats {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.salary-info {
	display: flex;
	gap: 20px;
}

.salary-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.salary-item .platform {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.salary-item .platform.dk {
	color: #FF6B35;
}

.salary-item .platform.fd {
	color: #0A84FF;
}

.salary-item .total-salary {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
}

.salary-item .total-projection {
	font-size: 13px;
	color: var(--primary-green);
	font-weight: 600;
}

.value-metrics {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-end;
}

.value-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.value-item .label {
	font-size: 12px;
	color: var(--text-secondary);
}

.value-item .value {
	font-size: 15px;
	font-weight: 700;
}

/* Matchup Section */
.matchup-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.matchup-narrative {
	flex: 1;
	font-size: 13px;
	color: var(--text-secondary);
	font-style: italic;
	display: flex;
	align-items: center;
	gap: 8px;
}

.matchup-narrative i {
	color: var(--primary-green);
}

.add-stack-btn {
	background: var(--primary-green);
	color: #121212;
	border: none;
	padding: 8px 16px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	transition: all 0.2s;
}

.add-stack-btn:hover {
	background: var(--primary-green-hover);
	transform: translateY(-1px);
}

/* Filter Controls */
.filter-controls {
	display: flex;
	gap: 16px;
	align-items: center;
}

.salary-filter {
	display: flex;
	align-items: center;
	gap: 8px;
}

.salary-filter label {
	font-size: 13px;
	color: var(--text-secondary);
	font-weight: 600;
	margin: 0;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
	.line-stacks-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media (max-width: 768px) {
	.line-stack-card {
		padding: 20px;
	}
	
	.stack-header {
		flex-direction: column;
		gap: 12px;
	}
	
	.team-info .team-logo {
		width: 48px;
		height: 48px;
	}
	
	.team-name {
		font-size: 18px;
	}
	
	.game-info {
		font-size: 12px;
	}
	
	.stack-grade-badge {
		align-self: flex-end;
	}
	
	.line-metrics {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		padding: 12px;
	}
	
	.correlation-stats {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	
	.combined-stats {
		flex-direction: column;
		gap: 16px;
	}
	
	.value-metrics {
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	
	.matchup-section {
		flex-direction: column;
		align-items: stretch;
	}
	
	.add-stack-btn {
		width: 100%;
	}
	
	.filter-controls {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	
	.salary-filter {
		width: 100%;
	}
	
	.salary-filter .form-select {
		flex: 1;
	}
}


/* User Dropdown Styles */
.user-dropdown {
    position: relative;
    display: inline-block;
}

.user-dropdown .dropdown-toggle {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
    padding: 0.375rem 0.75rem;
}

.user-dropdown .dropdown-toggle:hover,
.user-dropdown .dropdown-toggle:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.user-dropdown .dropdown-menu {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin-top: 0.5rem;
    min-width: 200px;
}

.user-dropdown .dropdown-item {
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-dropdown .dropdown-item:hover {
    background: var(--bg-darker);
    color: var(--primary-color);
}

.user-dropdown .dropdown-item i {
    width: 16px;
    text-align: center;
}

.user-dropdown .dropdown-divider {
    margin: 0.5rem 0;
    border-color: var(--border-color);
}

@media (max-width: 768px) {
    .user-dropdown .dropdown-toggle {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    
    .user-dropdown .dropdown-toggle i {
        margin-right: 0.25rem;
    }
    
    .user-dropdown .dropdown-toggle span {
        display: none;
    }
}

/* General Dropdown Styles - Fix for Bootstrap dropdowns */
.dropdown-menu {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin-top: 0.5rem;
}

.dropdown-item {
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-card-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary-color);
    color: white;
}

.dropdown-divider {
    background-color: var(--bg-darker);
    margin: 0.5rem 0;
    opacity: 1;
}

/* Fix for Bootstrap dropdown toggle */
.dropdown-toggle::after {
    vertical-align: 0.255em;
}

/* Ensure dropdowns are properly positioned */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-primary);
    text-align: left;
    list-style: none;
    background-clip: padding-box;
    border-radius: 0.5rem;
}

.dropdown-menu.show {
    display: block;
}

/* Dark theme for dropdown in buttons */
.btn-secondary {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--bg-card-hover);
    border-color: var(--primary-color);
    color: var(--text-primary);
}

/* =================================================================
   DRAFTEDGE USER DROPDOWN - UNIVERSAL FIX
   Critical fixes for user dropdown navigation conflicts
   ================================================================= */

/* Main user dropdown container - Ultra high z-index to prevent conflicts */
#draftedge-main-user-dropdown {
    position: relative !important;
    z-index: 999999 !important;
}

/* User dropdown menu - Solid background and RIGHT-ALIGNED positioning */
.draftedge-user-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;  /* This makes it align to the RIGHT edge of its parent */
    left: auto !important;  /* Don't set left positioning */
    z-index: 999999 !important;
    background-color: var(--bg-dark) !important;  /* Solid dark background */
    background-clip: padding-box !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    min-width: 200px !important;
    padding: 8px 0 !important;
    backdrop-filter: none !important; /* Remove any transparency effects */
    margin-top: 2px !important; /* Small gap below button */
}

/* Ensure dropdown items are fully opaque and clickable */
.draftedge-user-menu .dropdown-item {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
}

.draftedge-user-menu .dropdown-item:hover,
.draftedge-user-menu .dropdown-item:focus {
    background-color: var(--bg-card-hover) !important;
    color: var(--primary-green) !important;
}

.draftedge-user-menu .dropdown-item i {
    width: 16px !important;
    margin-right: 8px !important;
    color: var(--text-secondary) !important;
}

.draftedge-user-menu .dropdown-item:hover i {
    color: var(--primary-green) !important;
}

/* Dropdown divider with solid background */
.draftedge-user-menu .dropdown-divider {
    height: 1px !important;
    margin: 8px 0 !important;
    background-color: var(--bg-darker) !important;
    border: 0 !important;
    opacity: 1 !important;
}

/* User dropdown button styling */
#draftedge-userDropdown {
    position: relative !important;
    z-index: 999998 !important;
    pointer-events: auto !important;
}

/* Ensure the dropdown is always above everything else */
.draftedge-user-menu.show {
    display: block !important;
    /* Position will be set by JavaScript - don't override here */
    z-index: 999999 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    margin: 0 !important;
    inset: auto !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .draftedge-user-menu {
        min-width: 180px !important;
        right: 0 !important;
    }
}

/* Emergency override for any elements that might interfere */
.draftedge-user-menu,
.draftedge-user-menu * {
    pointer-events: auto !important;
}

/* Prevent backdrop interference */
#draftedge-main-user-dropdown .dropdown-menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* =================================================================
   END DRAFTEDGE USER DROPDOWN FIX
   ================================================================= */

/* =================================================================
   HELP CENTER STYLES
   ================================================================= */

/* Help Center Base Styles */
.help-center {
    background: var(--bg-dark);
    min-height: 100vh;
}

/* Help Hero Section */
.help-hero {
    background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
    padding: 4rem 0 2rem;
    position: relative;
    overflow: hidden;
}

.help-hero-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.help-hero-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 0;
    line-height: 1.4;
}

.help-hero-icon {
    color: var(--primary-green);
    margin-right: 0.75rem;
    animation: helpHeroFloat 3s ease-in-out infinite;
}

.help-hero-graphic {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

.help-chart-icon {
    font-size: 6rem;
    color: var(--primary-green);
    opacity: 0.8;
    animation: helpPulse 2s ease-in-out infinite;
}

.help-floating-icons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.help-float-icon {
    position: absolute;
    font-size: 1.5rem;
    color: var(--gold);
    opacity: 0.7;
}

.help-float-1 { top: 20%; right: 10%; animation: helpFloat1 4s ease-in-out infinite; }
.help-float-2 { bottom: 30%; left: 15%; animation: helpFloat2 3s ease-in-out infinite; }
.help-float-3 { top: 60%; left: 60%; animation: helpFloat3 5s ease-in-out infinite; }

/* Search Section */
.help-search-section {
    background: var(--bg-dark);
    padding: 2rem 0;
    border-bottom: 1px solid var(--border-color);
}

.help-search-box {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.help-search-input-group {
    position: relative;
    margin-bottom: 1rem;
}

.help-search-input {
    width: 100%;
    padding: 1rem 4.5rem 1rem 1rem;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-primary);
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.help-search-input:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.1);
}

.help-search-icon {
    position: absolute;
    right: 3.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 1.2rem;
    pointer-events: none;
}

.help-search-clear {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.help-search-clear:hover {
    background: var(--bg-darker);
    color: var(--text-primary);
}

.help-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    margin-top: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.help-search-result-item {
    display: block;
    padding: 1rem;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.help-search-result-item:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.help-search-result-item:last-child {
    border-bottom: none;
}

.help-search-result-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.help-search-result-category {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.help-search-no-results {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
}

.help-search-suggestions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.help-suggestion-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-right: 0.5rem;
}

.help-suggestion-tag {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.help-suggestion-tag:hover {
    background: var(--primary-green);
    color: white;
    border-color: var(--primary-green);
}

/* Categories Section */
.help-categories-section {
    padding: 3rem 0;
    background: var(--bg-dark);
}

.help-section-header {
    margin-bottom: 3rem;
}

.help-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.help-section-title i {
    color: var(--primary-green);
    margin-right: 0.75rem;
}

.help-section-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.help-category-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: block;
    height: 100%;
}

.help-category-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 184, 148, 0.1);
    color: var(--text-primary);
    text-decoration: none;
}

.help-category-card.help-card-featured {
    border-color: var(--primary-green);
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(0, 184, 148, 0.05) 100%);
}

.help-category-card.help-card-contact {
    border-color: var(--gold);
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(255, 215, 0, 0.05) 100%);
}

.help-card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--primary-green);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.help-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    transition: all 0.3s ease;
}

.help-icon-getting-started { background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%); }
.help-icon-optimizer { background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-hover) 100%); }
.help-icon-faq { background: linear-gradient(135deg, #3498DB 0%, #2980B9 100%); }
.help-icon-subscription { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-hover) 100%); }
.help-icon-sports { background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%); }
.help-icon-support { background: linear-gradient(135deg, #F39C12 0%, #E67E22 100%); }

.help-card-icon i {
    color: white;
}

.help-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.help-card-description {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.help-card-features {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.help-feature-item {
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

.help-feature-item i {
    color: var(--primary-green);
    margin-right: 0.5rem;
    font-size: 0.8rem;
}

.help-card-cta {
    font-weight: 600;
    color: var(--primary-green);
    display: flex;
    align-items: center;
    margin-top: auto;
    transition: all 0.2s ease;
}

.help-card-cta i {
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}

.help-category-card:hover .help-card-cta i {
    transform: translateX(4px);
}

/* Popular Articles */
.help-popular-section {
    padding: 3rem 0;
    background: var(--bg-darker);
}

.help-article-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    transition: all 0.3s ease;
    position: relative;
}

.help-article-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-2px);
}

.help-article-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.help-article-icon i {
    color: white;
    font-size: 1.2rem;
}

.help-article-content {
    flex: 1;
}

.help-article-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.help-article-excerpt {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.help-article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

.help-article-category {
    background: var(--bg-darker);
    color: var(--text-secondary);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-weight: 500;
}

.help-article-views {
    color: var(--text-muted);
}

.help-article-link {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-green);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
    opacity: 0;
}

.help-article-card:hover .help-article-link {
    opacity: 1;
}

.help-article-link:hover {
    background: var(--primary-green-hover);
    transform: scale(1.1);
    color: white;
}

/* Video Section */
.help-videos-section {
    padding: 3rem 0;
    background: var(--bg-dark);
}

.help-video-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.help-video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.help-video-thumbnail {
    position: relative;
    height: 180px;
    background: linear-gradient(135deg, var(--bg-darker) 0%, var(--border-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-video-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.help-video-placeholder i {
    font-size: 3rem;
    color: var(--primary-green);
    cursor: pointer;
    transition: all 0.3s ease;
}

.help-video-placeholder:hover i {
    transform: scale(1.1);
}

.help-video-duration {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.help-video-content {
    padding: 1.5rem;
}

.help-video-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.help-video-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Tips Section */
.help-tips-section {
    padding: 3rem 0;
    background: var(--bg-darker);
}

.help-tips-carousel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.help-tip-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.help-tip-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 184, 148, 0.1);
}

.help-tip-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.5rem;
    color: white;
}

.help-tip-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.help-tip-text {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Common Help Utilities */
.help-tip {
    background: linear-gradient(135deg, rgba(0, 184, 148, 0.1) 0%, rgba(0, 184, 148, 0.05) 100%);
    border-left: 4px solid var(--primary-green);
    padding: 1rem;
    border-radius: 0 8px 8px 0;
    margin: 1.5rem 0;
}

.help-tip i {
    color: var(--primary-green);
    margin-right: 0.5rem;
}

.help-tip strong {
    color: var(--text-primary);
}

/* Animations */
@keyframes helpHeroFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes helpPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
}

@keyframes helpFloat1 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes helpFloat2 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(-180deg); }
}

@keyframes helpFloat3 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-25px) rotate(360deg); }
}

/* =================================================================
   FAQ PAGE STYLES
   ================================================================= */

.help-faq {
    background: var(--bg-dark);
    min-height: 100vh;
}

.help-faq-hero {
    background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
    padding: 3rem 0;
    text-align: center;
}

.help-faq-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.help-faq-title i {
    color: var(--primary-green);
    margin-right: 0.75rem;
}

.help-faq-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.help-faq-controls {
    background: var(--bg-dark);
    padding: 2rem 0;
    border-bottom: 1px solid var(--border-color);
}

.help-faq-search {
    position: relative;
}

.help-faq-search i {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

.help-faq-search-input {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.help-faq-search-input:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.1);
}

.help-faq-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.help-faq-search-clear:hover {
    background: var(--bg-darker);
    color: var(--text-primary);
}

.help-faq-filter-select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.help-faq-filter-select:focus {
    outline: none;
    border-color: var(--primary-green);
}

.help-faq-stats {
    padding: 2rem 0;
    background: var(--bg-darker);
}

.help-faq-stat {
    text-align: center;
    padding: 1rem;
}

.help-faq-stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-green);
    display: block;
}

.help-faq-stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.help-faq-content {
    padding: 3rem 0;
}

.help-faq-category {
    margin-bottom: 3rem;
}

.help-faq-category-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
}

.help-faq-category-title i {
    color: var(--primary-green);
    margin-right: 0.75rem;
}

.help-faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.help-faq-item:hover {
    box-shadow: 0 4px 12px rgba(0, 184, 148, 0.1);
}

.help-faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 1.25rem;
    text-align: left;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.help-faq-question:hover {
    background: var(--bg-card-hover);
}

.help-faq-toggle {
    color: var(--text-secondary);
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.help-faq-answer {
    border-top: 1px solid var(--border-color);
}

.help-faq-answer-content {
    padding: 1.5rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.help-faq-answer-content h5 {
    color: var(--text-primary);
    font-weight: 600;
    margin: 1.5rem 0 0.75rem 0;
}

.help-faq-answer-content ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.help-faq-answer-content li {
    margin-bottom: 0.5rem;
}

.help-faq-answer-content strong {
    color: var(--text-primary);
}

.help-faq-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.help-faq-plan {
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
}

.help-faq-plan h5 {
    color: var(--primary-green);
    font-weight: 600;
    margin-bottom: 1rem;
}

.help-faq-voting {
    border-top: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-darker);
    margin-top: 1.5rem;
}

.help-faq-voting-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.help-faq-vote-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    margin-left: 0.5rem;
}

.help-faq-vote-btn:hover {
    background: var(--primary-green);
    border-color: var(--primary-green);
    color: white;
}

.help-faq-vote-thanks {
    color: var(--primary-green);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.help-faq-vote-thanks i {
    margin-right: 0.5rem;
}

.help-faq-no-results {
    text-align: center;
    padding: 4rem 2rem;
}

.help-no-results-icon {
    font-size: 4rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.help-faq-footer {
    background: var(--bg-darker);
    padding: 3rem 0;
    border-top: 1px solid var(--border-color);
}

.help-faq-footer-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 3rem;
    max-width: 600px;
    margin: 0 auto;
}

.help-faq-footer h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.help-faq-footer p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.help-faq-footer-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* =================================================================
   GETTING STARTED PAGE STYLES
   ================================================================= */

.help-getting-started {
    background: var(--bg-dark);
    min-height: 100vh;
}

.help-getting-started-hero {
    background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
    padding: 4rem 0 3rem;
    position: relative;
    overflow: hidden;
}

.help-getting-started-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.help-getting-started-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.help-getting-started-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.help-meta-item {
    background: var(--bg-card);
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    border: 1px solid var(--border-color);
}

.help-meta-item i {
    color: var(--primary-green);
    margin-right: 0.5rem;
}

.help-progress-circle {
    width: 150px;
    height: 150px;
    position: relative;
    margin: 0 auto;
}

.help-progress-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.help-progress-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-green);
    display: block;
}

.help-progress-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.help-quick-overview {
    padding: 3rem 0;
    background: var(--bg-darker);
}

.help-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.help-overview-item {
    text-align: center;
    padding: 1.5rem;
}

.help-overview-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: white;
    font-size: 1.5rem;
}

.help-overview-item h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.help-overview-item p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.help-guide-steps {
    padding: 2rem 0;
}

.help-step {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.help-step.help-step-completed {
    border-color: var(--primary-green);
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(0, 184, 148, 0.05) 100%);
}

.help-step.help-step-open {
    box-shadow: 0 8px 24px rgba(0, 184, 148, 0.1);
}

.help-step-header {
    display: flex;
    align-items: center;
    padding: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.help-step-header:hover {
    background: var(--bg-card-hover);
}

.help-step-number {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.5rem;
    flex-shrink: 0;
    position: relative;
}

.help-step-number i {
    color: white;
    font-size: 1.5rem;
    position: absolute;
}

.help-step-count {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
}

.help-step-completed .help-step-number {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-hover) 100%);
}

.help-step-completed .help-step-count {
    display: none;
}

.help-step-completed .help-step-number::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: white;
    font-size: 1.5rem;
}

.help-step-info {
    flex: 1;
}

.help-step-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.help-step-description {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.5;
}

.help-step-status {
    margin-left: 1rem;
}

.help-step-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0.5rem;
}

.help-step-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.help-step-action {
    background: linear-gradient(135deg, rgba(0, 184, 148, 0.1) 0%, rgba(0, 184, 148, 0.05) 100%);
    border: 1px solid var(--primary-green);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem;
    margin-top: 0;
}

.help-step-action h4 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.help-step-action h4 i {
    color: var(--primary-green);
    margin-right: 0.5rem;
}

.help-step-action p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.help-step-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.help-step-complete {
    background: linear-gradient(135deg, rgba(0, 184, 148, 0.2) 0%, rgba(0, 184, 148, 0.1) 100%);
    border: 1px solid var(--primary-green);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem;
    margin-top: 0;
    display: flex;
    align-items: center;
}

.help-step-complete i {
    color: var(--primary-green);
    font-size: 1.5rem;
    margin-right: 1rem;
}

.help-step-complete span {
    color: var(--text-primary);
    font-weight: 600;
}

.help-step-details {
    padding: 2rem;
}

.help-step-details h4 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin: 1.5rem 0 1rem 0;
}

.help-step-details h4:first-child {
    margin-top: 0;
}

.help-checklist {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.help-checklist li {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    color: var(--text-secondary);
}

.help-checklist i {
    color: var(--primary-green);
    margin-right: 0.75rem;
    width: 16px;
}

.help-registration-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.help-reg-option {
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
}

.help-reg-icon {
    font-size: 2rem;
    color: var(--primary-green);
    margin-bottom: 1rem;
}

.help-reg-option strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.5rem;
}

.help-reg-option p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.help-dashboard-tour {
    padding: 2rem;
}

.help-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.help-feature-item {
    display: flex;
    align-items: flex-start;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
}

.help-feature-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.help-feature-icon i {
    color: white;
    font-size: 1.2rem;
}

.help-feature-content h5 {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.help-feature-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.help-navigation-guide {
    margin: 2rem 0;
}

.help-nav-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.help-nav-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.help-nav-list li:last-child {
    border-bottom: none;
}

.help-nav-list strong {
    color: var(--text-primary);
}

.help-sports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.help-sport-card {
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    text-decoration: none;
    color: var(--text-primary);
    text-align: center;
    transition: all 0.3s ease;
    display: block;
}

.help-sport-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-4px);
    color: var(--text-primary);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 184, 148, 0.1);
}

.help-sport-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: white;
    font-size: 1.5rem;
}

.help-sport-card h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.help-sport-card p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.help-sport-season {
    font-size: 0.85rem;
    color: var(--primary-green);
    font-weight: 500;
}

.help-optimizer-guide {
    padding: 2rem;
}

.help-optimizer-steps {
    margin: 2rem 0;
}

.help-optimizer-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.help-optimizer-step-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-hover) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 1rem;
    flex-shrink: 0;
}

.help-optimizer-step-content h5 {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.help-optimizer-step-content p {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.help-optimizer-settings {
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
}

.help-optimizer-settings h4 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.help-settings-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-settings-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.help-settings-list li:last-child {
    border-bottom: none;
}

.help-settings-list strong {
    color: var(--text-primary);
}

.help-action-box {
    background: linear-gradient(135deg, rgba(0, 184, 148, 0.1) 0%, rgba(0, 184, 148, 0.05) 100%);
    border: 1px solid var(--primary-green);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    margin: 2rem 0;
}

.help-action-box h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.help-action-box p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.help-optimizer-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.help-results-guide {
    padding: 2rem;
}

.help-table-explanation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.help-table-column {
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.help-table-column h5 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.help-table-column h5 i {
    color: var(--primary-green);
    margin-right: 0.5rem;
}

.help-table-column p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9rem;
}

.help-metrics-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.help-metrics-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.help-metrics-list li:last-child {
    border-bottom: none;
}

.help-metrics-list strong {
    color: var(--text-primary);
}

.help-export-guide {
    padding: 2rem;
}

.help-export-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.help-export-step {
    text-align: center;
    padding: 2rem 1rem;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.help-export-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: white;
    font-size: 1.5rem;
}

.help-export-content h5 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.help-export-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.help-platform-links {
    margin: 2rem 0;
}

.help-platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.help-platform-item {
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
}

.help-platform-logo {
    width: 80px;
    height: 40px;
    object-fit: contain;
    margin: 0 auto 1rem;
    display: block;
    opacity: 0.8;
}

.help-platform-item h5 {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.help-platform-item p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.help-platform-link {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 500;
}

.help-platform-link:hover {
    text-decoration: underline;
}

.help-final-tips {
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
}

.help-final-tips h4 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.help-success-tips {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-success-tips li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.help-success-tips li:last-child {
    border-bottom: none;
}

.help-success-tips strong {
    color: var(--text-primary);
}

.help-congratulations {
    background: var(--bg-darker);
    padding: 4rem 0;
}

.help-congrats-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 4rem;
    max-width: 800px;
    margin: 0 auto;
}

.help-congrats-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    color: var(--bg-dark);
    font-size: 3rem;
}

.help-congrats-card h2 {
    color: var(--text-primary);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.help-congrats-card > p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 3rem;
}

.help-next-steps h4 {
    color: var(--text-primary);
    margin-bottom: 2rem;
}

.help-next-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.help-next-card {
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    color: var(--text-primary);
    text-align: center;
    transition: all 0.3s ease;
    display: block;
}

.help-next-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-4px);
    color: var(--text-primary);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 184, 148, 0.1);
}

.help-next-card i {
    color: var(--primary-green);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.help-next-card h5 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.help-next-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.help-congrats-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Responsive Design */
@media (max-width: 768px) {
    .help-hero-title {
        font-size: 2rem;
    }
    
    .help-hero-subtitle {
        font-size: 1rem;
    }
    
    .help-section-title {
        font-size: 2rem;
    }
    
    .help-categories-grid {
        grid-template-columns: 1fr;
    }
    
    .help-category-card {
        padding: 1.5rem;
    }
    
    .help-search-input {
        font-size: 1rem;
        padding: 0.75rem 4rem 0.75rem 0.75rem;
    }
    
    .help-faq-footer-actions {
        flex-direction: column;
    }
    
    .help-getting-started-title {
        font-size: 2rem;
    }
    
    .help-step-header {
        padding: 1.5rem;
    }
    
    .help-step-number {
        width: 60px;
        height: 60px;
        margin-right: 1rem;
    }
    
    .help-step-number i,
    .help-step-count {
        font-size: 1.2rem;
    }
    
    .help-step-title {
        font-size: 1.2rem;
    }
    
    .help-meta-item {
        font-size: 0.8rem;
        padding: 0.4rem 0.75rem;
    }
    
    .help-export-steps {
        grid-template-columns: 1fr;
    }
    
    .help-optimizer-steps {
        margin: 1rem 0;
    }
    
    .help-optimizer-step {
        padding: 1rem;
    }
    
    .help-congrats-card {
        padding: 2rem;
    }
    
    .help-congrats-icon {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
    
    .help-congrats-card h2 {
        font-size: 1.5rem;
    }
    
    .help-next-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    
    .help-congrats-cta {
        flex-direction: column;
        align-items: center;
    }
}

/* =================================================================
   END HELP CENTER STYLES
   ================================================================= */

/* =================================================================
   DRAFTKINGS REVISION MODE STYLES
   ================================================================= */

/* Upload section styling */
.dk-upload-section {
    animation: slideDown 0.3s ease-out;
}

.upload-dropzone {
    transition: all 0.3s ease;
}

.upload-dropzone:hover {
    border-color: var(--warning) !important;
    background-color: rgba(255, 193, 7, 0.05);
}

.upload-dropzone.dragover {
    border-color: var(--warning) !important;
    background-color: rgba(255, 193, 7, 0.1);
    transform: scale(1.02);
}

/* Revision mode banner */
.revision-mode-banner {
    animation: slideDown 0.3s ease-out;
}

/* Uploaded player styling */
.optimizer-table tr.uploaded-player {
    background-color: rgba(40, 167, 69, 0.1) !important;
    border: 1px solid rgba(40, 167, 69, 0.2);
}

.optimizer-table tr.uploaded-player:hover {
    background-color: rgba(40, 167, 69, 0.15) !important;
}

/* Uploaded lock indicator */
.uploaded-lock {
    position: relative;
}

.uploaded-lock::before {
    content: '';
    position: absolute;
    left: -3px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 0 2px 2px 0;
}

/* Lock button states for uploaded players */
.uploaded-player .lock-btn.btn-success {
    background: linear-gradient(135deg, #28a745, #20c997);
    border-color: #28a745;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}

.uploaded-player .lock-btn.btn-success:hover {
    background: linear-gradient(135deg, #218838, #1ea080);
    transform: scale(1.05);
}

/* Lineup preview styling */
.lineup-preview-item {
    transition: all 0.2s ease;
    background-color: rgba(255, 255, 255, 0.02);
}

.lineup-preview-item:hover {
    background-color: rgba(255, 193, 7, 0.1) !important;
    border-color: var(--warning) !important;
    transform: translateY(-1px);
}

.lineup-preview-item.selected {
    background-color: rgba(255, 193, 7, 0.15) !important;
    border-color: var(--warning) !important;
}

/* Quick upload toggle button */
.quick-upload-toggle {
    display: flex;
    justify-content: center;
}

/* Animation keyframes */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

/* Revision mode specific table styling */
.optimizer-table.revision-mode .uploaded-player {
    position: relative;
}

.optimizer-table.revision-mode .uploaded-player::after {
    content: 'UPLOADED';
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 0.6rem;
    color: #28a745;
    background: rgba(40, 167, 69, 0.1);
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .dk-upload-section .card-body .row {
        flex-direction: column;
    }
    
    .revision-mode-banner .d-flex {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .lineup-preview-item {
        margin-bottom: 1rem !important;
    }
    
    .upload-dropzone {
        padding: 2rem 1rem !important;
    }
}

/* Dark theme enhancements */
.upload-dropzone {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.lineup-preview-item {
    backdrop-filter: blur(10px);
}

/* Success states */
.upload-success {
    animation: pulse 2s infinite;
}

/* =================================================================
   END DRAFTKINGS REVISION MODE STYLES
   ================================================================= */

/* =================================================================
   MLB Schedule — weather severity painting (#34/35)
   The PHP applies .severe / .moderate / .outdoor to the weather row;
   these rules give the user a visible cue when conditions will
   actually move scoring (rain, temp extreme, strong HR-axis wind).

   Layout note: base .schedule-weather-display in css/schedules.css is
   `display:flex` *without* wrap, so when a notable badge is added the
   whole row gets squeezed and the bullet-prefixed spans wrap mid-phrase
   ("Light\nrain"). Force wrap + per-span nowrap so each phrase stays
   together and the badge drops to its own line on narrow cards.
   ================================================================= */
.schedule-weather-display {
	flex-wrap: wrap;
	row-gap: 6px;
	padding: 6px 12px;
	border-radius: 6px;
}
.schedule-weather-display > span {
	white-space: nowrap;
}
.schedule-weather-display.severe {
	border-left: 3px solid #E74C3C;
	background: rgba(231, 76, 60, 0.08);
}
.schedule-weather-display.moderate {
	border-left: 3px solid #F39C12;
	background: rgba(243, 156, 18, 0.06);
}
.schedule-weather-display .weather-notable-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2px;
	white-space: nowrap;
}
.schedule-weather-display .weather-notable-badge[data-impact="severe"] {
	background: rgba(231, 76, 60, 0.18);
	color: #FF6B5C;
}
.schedule-weather-display .weather-notable-badge[data-impact="moderate"] {
	background: rgba(243, 156, 18, 0.18);
	color: #F5B544;
}
@media (max-width: 540px) {
	/* On phone-width cards the badge can't share a row with the conditions,
	   so push it onto a full-width line below. */
	.schedule-weather-display .weather-notable-badge {
		margin-left: 0;
		flex-basis: 100%;
	}
}

/* =================================================================
   Bootstrap component overrides — Reserve v2 palette
   Bootstrap 5 ships its own --bs-primary / --bs-success / etc. that
   ignore our :root vars. Buttons, badges, alerts, and any "btn-X /
   bg-X / text-X" utility class were rendering Bootstrap's defaults
   (success = var(--success) green, primary = var(--primary-green) blue) on top of our
   navy palette — leaking the old DraftEdge green look on every page
   that uses .btn-success or similar.
   ================================================================= */
:root {
	--bs-primary: var(--primary-green);
	--bs-primary-rgb: 212, 175, 96;
	--bs-secondary: var(--text-secondary);
	--bs-success: var(--success);
	--bs-success-rgb: 127, 196, 161;
	--bs-info: var(--info);
	--bs-info-rgb: 119, 148, 176;
	--bs-warning: var(--warning);
	--bs-warning-rgb: 224, 162, 58;
	--bs-danger: var(--danger);
	--bs-danger-rgb: 216, 98, 76;
	--bs-light: var(--text-primary);
	--bs-dark: var(--bg-darker);
	--bs-body-bg: var(--bg-dark);
	--bs-body-color: var(--text-primary);
	--bs-body-bg-rgb: 12, 24, 39;
	--bs-body-color-rgb: 244, 238, 221;
	--bs-border-color: var(--border-color);
	--bs-border-color-translucent: rgba(255,255,255,0.06);
}
/* Buttons — Bootstrap's btn-success was Reserve's brass-CTA tell;
   re-aim it to brass with bone text and matching hover. */
.btn-success, .btn.btn-success {
	background-color: var(--primary-green);
	border-color: var(--primary-green);
	color: var(--bg-darker);
	font-weight: 600;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
	background-color: var(--primary-green-hover);
	border-color: var(--primary-green-hover);
	color: var(--bg-darker);
}
.btn-primary, .btn.btn-primary {
	background-color: var(--gold);
	border-color: var(--gold);
	color: var(--bg-darker);
	font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	background-color: var(--gold-hover);
	border-color: var(--gold-hover);
	color: var(--bg-darker);
}
/* Form controls — Bootstrap's defaults paint inputs with white-ish
   bg on dark; force them to navy card with bone text. */
.form-control, .form-select, input[type="text"], input[type="number"],
input[type="email"], input[type="password"], input[type="search"], textarea {
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
}
.form-control:focus, .form-select:focus,
input:focus, textarea:focus {
	background-color: var(--bg-card-hover);
	border-color: var(--primary-green);
	color: var(--text-primary);
	box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary-green) 25%, transparent);
}
.form-control::placeholder, input::placeholder, textarea::placeholder {
	color: var(--text-muted);
}

/* =================================================================
   Bootstrap table overrides — Reserve v2 navy palette
   Bootstrap 5 .table.table-dark defaults to a slate-grey var(--bg-darker)
   surface that ignores our --bg-card var, so power-rankings tables,
   leaderboards, and any other .table-dark instance render grey
   against our navy site. Map Bootstrap's own --bs-table-* tokens
   to our palette so tables inherit the theme.
   ================================================================= */
.table {
	--bs-table-color: var(--text-primary);
	--bs-table-bg: transparent;
	--bs-table-border-color: var(--border-color);
	--bs-table-striped-bg: rgba(255, 255, 255, 0.025);
	--bs-table-striped-color: var(--text-primary);
	--bs-table-active-bg: var(--bg-card-hover);
	--bs-table-active-color: var(--text-primary);
	--bs-table-hover-bg: var(--bg-card-hover);
	--bs-table-hover-color: var(--text-primary);
	color: var(--bs-table-color);
}
.table-dark {
	/* Same overrides; .table-dark uses these specifically */
	--bs-table-color: var(--text-primary);
	--bs-table-bg: var(--bg-card);
	--bs-table-border-color: var(--border-color);
	--bs-table-striped-bg: color-mix(in srgb, var(--bg-card-hover) 60%, transparent);
	--bs-table-striped-color: var(--text-primary);
	--bs-table-active-bg: var(--bg-card-hover);
	--bs-table-active-color: var(--text-primary);
	--bs-table-hover-bg: var(--bg-card-hover);
	--bs-table-hover-color: var(--text-primary);
	color: var(--bs-table-color);
	background-color: var(--bs-table-bg);
}
/* Header row — slightly darker than rows, so it visually anchors */
.table-dark thead,
.table thead.table-dark,
.table thead {
	background-color: var(--bg-darker);
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.75rem;
	font-weight: 600;
}
.table-dark thead th,
.table thead th {
	background-color: var(--bg-darker);
	border-bottom: 1px solid var(--border-color);
	color: var(--text-secondary);
}
/* Bootstrap input-group prefix — the $ box, %, etc. defaulted to a
   light grey bar that exploded against navy. Theme it to the bg-darker
   strip with secondary text. */
.input-group-text {
	background-color: var(--bg-darker);
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
}
/* Anchor links — Bootstrap defaults to var(--primary-green) cobalt. */
a {
	color: var(--primary-green);
}
a:hover {
	color: var(--gold);
}
/* Outline + secondary buttons — also Bootstrap defaults that leaked. */
.btn-outline-secondary {
	color: var(--text-secondary);
	border-color: var(--border-color);
}
.btn-outline-secondary:hover {
	color: var(--text-primary);
	background-color: var(--bg-card-hover);
	border-color: var(--primary-green);
}
.btn-outline-primary {
	color: var(--primary-green);
	border-color: var(--primary-green);
}
.btn-outline-primary:hover {
	color: var(--bg-darker);
	background-color: var(--primary-green);
	border-color: var(--primary-green);
}

/* =================================================================
   DataTables overrides — Reserve v2 navy palette
   The library injects greys for search box, length selector, paginate
   buttons, and info row that ignore our vars. Re-aim to navy + bone.
   ================================================================= */
.dataTables_wrapper {
	color: var(--text-primary);
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	border-radius: 4px;
	padding: 4px 8px;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
	background-color: var(--bg-card-hover);
	border-color: var(--primary-green);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-green) 25%, transparent);
	outline: none;
}
.dataTables_wrapper .dataTables_info {
	color: var(--text-muted);
	padding-top: 0.75em;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
	background: transparent !important;
	color: var(--text-secondary) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 4px;
	padding: 4px 10px !important;
	margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: var(--bg-card-hover) !important;
	color: var(--text-primary) !important;
	border-color: var(--primary-green) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: var(--primary-green) !important;
	color: var(--bg-darker) !important;
	border-color: var(--primary-green) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
	color: var(--text-muted) !important;
	background: transparent !important;
	border-color: var(--border-color) !important;
	opacity: 0.4;
	cursor: not-allowed;
}
.dataTables_wrapper .dataTables_processing {
	background: var(--bg-card) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border-color);
}