:root {
           --primary: #126e51;
           --primary-dark: #0d5940;
           --secondary: #027b5b;
           --accent: #ffdf1b;
           --accent-dark: #e6c400;

           --bg-dark: #121212;
           --bg-medium: #1f1f1f;
           --bg-light: #2a2a2a;
           --bg-elevated: #262626;
           --bg-card: #1c1c1c;

           --text-light: #e0e0e0;
           --text-muted: #b0b0b0;

           --on-primary: #ffffff;
           --on-accent: #121212;

           --win: #4caf50;
           --loss: #f44336;
           --info: #64b5f6;

           --overlay-dark: rgba(18, 18, 18, 0.95);
           --overlay-medium: rgba(18, 18, 18, 0.85);
           --modal-bg: var(--bg-medium);

           --border-color: #323232;
           --border-radius: 0.5rem;
           --radius-soft: 0.625rem;
           --radius-lg: 0.75rem;
           --radius-xl: 1rem;
           --box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
           --transition: all 0.25s ease-in-out;

           --font-size-base: 14px;
           --space-1: 0.25rem;
           --space-2: 0.5rem;
           --space-3: 0.75rem;
           --space-4: 1rem;
           --space-5: 1.25rem;
           --space-6: 1.5rem;
           --space-default: var(--space-4);
           --space-compact: var(--space-3);
       }

       [data-theme="light"] {
           --primary: #4acfa5;
           --primary-dark: #2fb98e;
           --secondary: #36b88f;
           --accent: #f0c800;
           --accent-dark: #cfad00;

           --bg-dark: #f8f8f8;
           --bg-medium: #ffffff;
           --bg-light: #f3f5f7;
           --bg-elevated: #eef2f5;
           --bg-card: #ffffff;

           --text-light: #000000;
           --text-muted: #4f4f4f;

           --on-primary: #ffffff;
           --on-accent: #111111;

           --win: #2e7d32;
           --loss: #c62828;
           --info: #1976d2;

           --overlay-dark: rgba(248, 248, 248, 0.95);
           --overlay-medium: rgba(248, 248, 248, 0.85);
           --modal-bg: #ffffff;

           --border-color: #d7dee6;
           --space-default: var(--space-4);
           --space-compact: var(--space-3);
       }

       .bg-medium {
           background: var(--bg-medium) !important;
       }

       .bg-light {
           background: var(--bg-light) !important;
       }

       .bg-elevated {
           background: var(--bg-elevated) !important;
       }

       .bg-card {
           background: var(--bg-card) !important;
       }

       .bg-modal {
           background: var(--modal-bg) !important;
       }

       .bg-overlay-dark {
           background: var(--overlay-dark) !important;
       }

       .bg-overlay-medium {
           background: var(--overlay-medium) !important;
       }

       .bg-accent {
           background: var(--accent) !important;
       }

       .text-light-color {
           color: var(--text-light) !important;
       }

       .text-muted-color {
           color: var(--text-muted) !important;
       }

       * {

           box-sizing: border-box;
       }

       body {
           background-color: var(--bg-dark);
           color: var(--text-light);
           font-family: "Inter", sans-serif;
           line-height: 1.5;
           font-size: var(--font-size-base);
           overflow-x: hidden;
           margin: 0;
           padding: 0;
       }

       html {
           overflow-y: scroll;
       }



       html,
       body,
       main,
       section,
       article,
       aside,
       header,
       footer {
           transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
       }

       /* Promotional Sticky Bar */
       .landing-cta {
           position: sticky;
           top: 0;
           z-index: 1001;
           background: var(--primary);
           padding: 8px 16px 8px 16px;
           text-align: center;
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
           animation: glow 2s infinite;
       }

       .landing-cta.is-hidden {
           display: none !important;
       }

       .promo-close-btn {
           position: absolute;
           top: 50%;
           right: 10px;
           transform: translateY(-50%);
           width: 28px;
           height: 28px;
           border-radius: 6px;
           border: 1px solid rgba(255, 255, 255, 0.25);
           background: rgba(0, 0, 0, 0.16);
           color: var(--on-primary);
           display: inline-flex;
           align-items: center;
           justify-content: center;
           cursor: pointer;
           font-size: 14px;
           line-height: 1;
           transition: background 0.2s ease, border-color 0.2s ease;
       }

       .promo-close-btn:hover {
           background: rgba(0, 0, 0, 0.28);
           border-color: rgba(255, 255, 255, 0.45);
       }

       .landing-cta .promo-cta {
           color: var(--on-primary);
           text-decoration: none;
           font-weight: 700;
           font-size: 1rem;
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 10px;
           transition: transform 0.2s;
       }

       .landing-cta .promo-cta:hover {
           transform: scale(1.05);
       }

       @keyframes glow {

           0%,
           100% {
               box-shadow: 0 0 5px var(--accent);
           }

           50% {
               box-shadow: 0 0 10px var(--accent);
           }
       }

       /* Enhanced Stat Cards with Clickability */
       .stat-card {
           cursor: pointer;
           position: relative;
           transition:
               transform 0.2s,
               box-shadow 0.2s;
           user-select: none;
       }

       .stat-card:hover {
           transform: translateY(-5px);
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
       }

       .stat-card::after {
           content: "ℹ️";
           position: absolute;
           top: 8px;
           right: 8px;
           opacity: 0;
           transition: opacity 0.2s;
           font-size: 0.8rem;
       }

       .stat-card:hover::after {
           opacity: 1;
       }

       .stat-card:active {
           transform: scale(0.98);
           transition: transform 0.1s;
       }

       .stat-hint {
           font-size: 0.7rem;
           color: var(--text-muted);
           margin-top: 3px;
           display: none;
       }

       .stat-card:hover .stat-hint {
           display: block;
       }

       .trend {
           font-size: 0.8rem;
           font-weight: 600;
           margin-left: 5px;
       }

       /* Filter Feedback Improvements */
       .filter-feedback {
           display: none;
           position: fixed;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           background: var(--primary);
           color: white;
           padding: 10px 20px;
           border-radius: 20px;
           z-index: 1002;
           font-weight: 600;
           box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
       }

       #filter-summary {
           background: var(--bg-medium);
           padding: 10px 15px;
           border-radius: var(--border-radius);
           margin-bottom: 15px;
           font-size: 0.9rem;
           color: var(--accent);
           border-left: 3px solid var(--accent);
           display: flex;
           justify-content: space-between;
           align-items: center;
       }

       #live-counter {
           background: var(--accent);
           color: var(--on-accent);
           padding: 3px 10px;
           border-radius: 10px;
           font-weight: 700;
           font-size: 0.9rem;
           display: inline-flex;
           align-items: center;
           justify-content: center;
           min-width: 92px;
       }

       #system2-live-counter {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           min-width: 92px;
       }

       @keyframes pulse {
           0% {
               transform: scale(1);
           }

           50% {
               transform: scale(1.1);
           }

           100% {
               transform: scale(1);
           }
       }

       .pulse {
           animation: pulse 0.5s ease;
       }

       /* Enhanced Prediction Cards */
       .prediction-card {
           cursor: pointer;
           transition: all 0.2s ease;
           position: relative;
           overflow: hidden;
       }

       .prediction-card:hover {
           background-color: var(--bg-light);
           transform: translateY(-2px);
           box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
       }

       .prediction-card:active {
           transform: translateY(0);
       }

       .prediction-card::before {
           content: "Click for details";
           position: absolute;
           bottom: 10px;
           right: 10px;
           font-size: 0.7rem;
           color: var(--text-muted);
           opacity: 0;
           transition: opacity 0.3s;
       }

       .prediction-card:hover::before {
           opacity: 1;
       }

       @keyframes filterPulse {
           0% {
               background-color: transparent;
           }

           50% {
               background-color: var(--accent-light);
           }

           100% {
               background-color: transparent;
           }
       }

       .prediction-card.filter-match {
           animation: filterPulse 0.5s ease;
       }

       #system2-predictions-container.predictions-grid {
           display: grid;
           grid-template-columns: 1fr;
           gap: var(--space-default);
           width: 100%;
       }

       @media (min-width: 600px) {
           #system2-predictions-container.predictions-grid {
               grid-template-columns: repeat(2, 1fr);
           }
       }

       @media (min-width: 1024px) {
           #system2-predictions-container.predictions-grid {
               grid-template-columns: repeat(3, 1fr);
           }
       }

       #system2-predictions-container .prediction-card {
           width: 100%;
           margin: 0;
       }

       /* Metric Explanation Modal */
       #sportsMetricModal,
       #system2MetricModal {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: var(--overlay-medium);
           backdrop-filter: blur(8px);
           z-index: 10000;
           align-items: center;
           justify-content: center;
           font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               sans-serif;
       }

       #sportsMetricModal .modal-content,
       #system2MetricModal .modal-content {
           background: var(--modal-bg);
           padding: 16px;
           border-radius: 15px;
           max-width: 500px;
           width: 90%;
           box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
           border: 2px solid var(--accent);
       }

       #sportsMetricModalTitle,
       #system2MetricModalTitle {
           color: var(--accent);
           font-size: 1.5rem;
           margin-bottom: 12px;
           text-align: center;
       }

       #sportsMetricModalContent,
       #system2MetricModalContent {
           color: var(--text-light);
           line-height: 1.6;
           margin-bottom: 12px;
       }

       .metric-value {
           font-size: 2.5rem;
           text-align: center;
           margin: 10px 0;
           color: var(--accent);
           font-weight: 700;
       }

       .metric-howto {
           font-size: 0.9rem;
           color: var(--text-muted);
           margin-top: 10px;
       }

       /* Quick Preview Modal - Unified for both sections */
       #sportsPreviewModal,
       #system2PreviewModal,
       #inplayPreviewModal,
       #inplay2PreviewModal {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: var(--overlay-medium);
           z-index: 10001;
           align-items: center;
           justify-content: center;
       }

       .preview-content {
           background: var(--modal-bg);
           padding: 16px;
           border-radius: 15px;
           max-width: 600px;
           width: 90%;
           max-height: 80vh;
           overflow-y: auto;
           box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
       }

       /* Quick Preview Button */
       .btn-preview {
           background: var(--accent);
           color: var(--on-accent);
           border: none;
           padding: 8px 16px;
           border-radius: 20px;
           font-weight: 600;
           cursor: pointer;
           transition: all 0.2s;
           font-size: 0.9rem;
           text-decoration: none;
           display: inline-flex;
           align-items: center;
           gap: 5px;
       }

       .btn-preview:hover {
           background: var(--accent-dark);
           transform: scale(1.05);
       }

       /* InPlay Preview Tab Buttons */
       .inplay-preview-tab,
       .inplay2-preview-tab {
           transition: all 0.3s ease;
       }

       .inplay-preview-tab:not(.active),
       .inplay2-preview-tab:not(.active) {
           background: var(--bg-light) !important;
           color: var(--text-light) !important;
       }

       .inplay-preview-tab.active,
       .inplay2-preview-tab.active {
           background: var(--accent) !important;
           color: var(--on-accent) !important;
       }

       .inplay-preview-tab:hover,
       .inplay2-preview-tab:hover {
           opacity: 0.9;
           transform: translateY(-2px);
       }

       .progression-guide {
           background: var(--bg-light);
           padding: 12px;
           border-radius: 8px;
           margin: 15px 0;
           border-left: 4px solid var(--accent);
       }

       .progression-guide-title {
           margin-bottom: 8px;
           color: var(--accent);
       }

       .progression-guide-text {
           font-size: 0.9rem;
           margin-bottom: 10px;
       }

       .progression-guide-actions {
           display: flex;
           gap: 10px;
           flex-wrap: wrap;
       }

       .btn-compact {
           padding: 8px 16px;
           border: none;
           border-radius: 4px;
           font-weight: 600;
           cursor: pointer;
       }

       .btn-compact-accent {
           background: var(--accent);
           color: var(--on-accent);
       }

       .btn-compact-primary {
           background: var(--primary);
           color: var(--on-primary);
       }

       .preview-empty {
           text-align: center;
           padding: 15px;
           color: var(--text-muted);
       }

       .preview-empty p {
           margin: 0;
       }

       .preview-empty p:first-child {
           margin-bottom: 8px;
       }

       .preview-empty-note {
           font-size: 0.85rem;
       }

       .preview-header {
           text-align: center;
           padding: 6px 10px;
           border-radius: 6px;
           margin-bottom: 10px;
           font-size: 0.85rem;
       }

       .preview-header.recent {
           background: var(--secondary);
       }

       .preview-header.today {
           background: var(--primary);
           color: var(--on-primary);
       }

       .preview-card {
           margin: 8px 0;
           padding: 12px;
           background: var(--bg-light);
           border-left: 4px solid var(--accent);
           border-radius: 6px;
       }

       .preview-date {
           font-size: 0.75rem;
           color: var(--text-muted);
           margin-bottom: 6px;
       }

       .preview-league {
           font-size: 0.7rem;
           color: var(--accent);
           margin-bottom: 4px;
           font-weight: 500;
       }

       .preview-match {
           font-weight: 600;
           font-size: 1.05rem;
           margin-bottom: 8px;
           color: var(--text-light);
           line-height: 1.3;
           letter-spacing: 0.2px;
       }

       .preview-meta {
           display: flex;
           gap: 8px;
           flex-wrap: wrap;
           font-size: 0.85rem;
       }

       .preview-chip {
           padding: 3px 8px;
           border-radius: 4px;
       }

       .preview-chip.pick {
           background: var(--primary);
           color: var(--on-primary);
       }

       .preview-chip.odds {
           background: var(--accent);
           color: var(--on-accent);
           font-weight: 600;
       }

       .preview-chip.trust {
           background: var(--secondary);
       }

       .preview-content-compact {
           padding: 12px;
           max-height: 85vh;
           overflow-y: auto;
       }

       .preview-title {
           color: var(--accent);
           margin-bottom: 15px;
           text-align: center;
           font-size: 1.3rem;
       }

       .preview-tab-row {
           display: flex;
           gap: 8px;
           margin-bottom: 15px;
           justify-content: center;
       }

       .preview-tab-btn {
           flex: 1;
           border: none;
           padding: 8px 16px;
           border-radius: 6px;
           cursor: pointer;
           font-weight: 600;
           transition: all 0.2s;
           font-size: 0.9rem;
       }

       .preview-footer-note {
           margin-top: 12px;
           color: var(--text-muted);
           font-size: 0.85rem;
           text-align: center;
           margin-bottom: 12px;
       }

       .preview-actions {
           display: flex;
           gap: 8px;
           margin-top: 0;
       }

       .preview-action-btn {
           border: none;
           padding: 10px;
           border-radius: 6px;
           cursor: pointer;
           font-size: 0.9rem;
       }

       .preview-action-close {
           flex: 1;
           background: var(--bg-light);
           color: var(--text-light);
       }

       .preview-action-primary {
           flex: 2;
           background: var(--accent);
           color: var(--on-accent);
           font-weight: 600;
       }

       .about-section {
           font-family: "Inter", sans-serif;
           line-height: 1.6;
           max-width: 700px;
           margin: 0 auto;
           padding: 1rem;
       }

       .history-preview {
           /* border: 1px solid var(--border-color); */
           min-height: 200px;
           /* padding: 10px; */
           background: var(--bg-medium);
           color: var(--text-light);
       }

       /* Promo Highlight */
       .promo-highlight {
           background: var(--accent);
           padding: 10px 20px;
           border-radius: 25px;
           display: inline-block;
           margin: 10px 0;
           font-weight: 700;
           animation: glow 2s infinite;
       }

       /* Loading state for filters */
       .filtering {
           position: relative;
           opacity: 0.7;
       }

       .filtering::after {
           content: "";
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           width: 40px;
           height: 40px;
           border: 3px solid var(--accent);
           border-top-color: transparent;
           border-radius: 50%;
           animation: spin 1s linear infinite;
       }

       @keyframes spin {
           to {
               transform: translate(-50%, -50%) rotate(360deg);
           }
       }

       /* Toast Notifications */
       .toast {
           position: fixed;
           bottom: 20px;
           right: 20px;
           background: var(--primary);
           color: white;
           padding: 12px 24px;
           border-radius: 8px;
           box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
           z-index: 1003;
           animation: slideIn 0.3s ease;
           display: flex;
           align-items: center;
           gap: 10px;
       }

       @keyframes slideIn {
           from {
               transform: translateX(100%);
               opacity: 0;
           }

           to {
               transform: translateX(0);
               opacity: 1;
           }
       }

       /* Continue with existing styles... */
       header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: clamp(0.5rem, 1.5vw, 0.75rem);
           background-color: var(--bg-medium);
           border-radius: var(--border-radius);
           margin-bottom: 1rem;
           box-shadow: var(--box-shadow);
           flex-wrap: wrap;
           gap: clamp(0.5rem, 1.5vw, 0.75rem);
       }

       header .brand svg {
           width: clamp(1.75rem, 4vw, 2.25rem);
           height: clamp(1.75rem, 4vw, 2.25rem);
           color: var(--accent);
       }

       header .brand-title {
           font-size: clamp(0.75rem, 1.5vw, 0.875rem);
           font-weight: 600;
       }

       header .right-section,
       .brand {
           display: flex;
           align-items: center;
           gap: 0.5rem;
       }

       .header-left {
           display: inline-flex;
           align-items: center;
           gap: 0.5rem;
       }

       header .right-section {
           gap: clamp(0.5rem, 1.5vw, 0.75rem);
       }

       .countdown-link {
           color: var(--accent);
           text-decoration: none;
           font-weight: 500;
           font-size: 0.8rem;
           display: flex;
           align-items: center;
           gap: 0.25rem;
           background-color: var(--bg-light);
           padding: 0.3rem 0.6rem;
           border-radius: 2rem;
           transition: var(--transition);
       }

       .countdown-link:hover {
           background-color: var(--primary);
           color: var(--text-light);
       }

       .countdown-label {
           color: var(--text-muted);
           margin-right: 0.25rem;
       }

       .nav-toggle {
           display: flex;
           align-items: center;
           gap: 0.4rem;
           background-color: var(--primary);
           border: none;
           color: var(--text-light);
           cursor: pointer;
           padding: 0.4rem 0.8rem;
           border-radius: var(--border-radius);
           transition: background-color var(--transition);
       }

       .nav-toggle:hover {
           background-color: var(--primary-dark);
       }

       .nav-toggle .filter-text {
           font-weight: 600;
           font-size: 0.9rem;
       }

       @media (max-width: 640px) {
           .nav-toggle .filter-text {
               display: none;
           }
       }

       .nav-toggle svg {
           width: 1rem;
           height: 1rem;
       }

       .filters {
           display: none;
           background: var(--bg-medium);
           padding: 0.8rem;
           border-radius: var(--border-radius);
           margin-bottom: 1rem;
           grid-template-columns: 1fr;
           gap: 0.75rem;
       }

       .filters.active {
           display: grid;
       }

       .filter-item {
           display: flex;
           flex-direction: column;
           gap: 0.4rem;
       }

       .filter-item label {
           font-size: 0.8rem;
           font-weight: 500;
           color: var(--text-muted);
       }

       .filter-item select,
       .filter-item input[type="text"],
       .filter-item input[type="number"] {
           padding: 0.5rem 0.75rem;
           border: 1px solid var(--border-color);
           background-color: var(--bg-dark);
           color: var(--text-light);
           border-radius: 0.25rem;
           font-size: 0.9rem;
           transition: var(--transition);
           width: 100%;
           -webkit-appearance: none;
           -moz-appearance: none;
           appearance: none;
       }

       .filter-item select:focus,
       .filter-item input[type="text"]:focus,
       .filter-item input[type="number"]:focus {
           outline: none;
           border-color: var(--accent);
           box-shadow: 0 0 0 2px rgba(255, 223, 27, 0.2);
       }

       .search {
           position: relative;
       }

       .search svg {
           position: absolute;
           left: 0.75rem;
           top: 50%;
           transform: translateY(-50%);
           color: var(--text-muted);
           width: 1rem;
           height: 1rem;
       }

       .search input {
           padding-left: 2.5rem;
       }

       #refresh-btn {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           gap: 0.25rem;
           padding: 0.25rem 0.5rem;
           background-color: var(--accent);
           color: var(--on-accent);
           border: none;
           border-radius: 0.25rem;
           font-weight: 500;
           cursor: pointer;
           transition: var(--transition);
           font-size: 0.8rem;
           line-height: 1;
           vertical-align: middle;
       }

       #refresh-btn:hover {
           background-color: var(--accent-dark);
       }

       .stats {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
           gap: 0.4rem;
           margin-bottom: 0.6rem;
       }

       .date {
           background-color: var(--primary);
           color: var(--text-light);
           padding: 0.5rem 0.8rem;
           font-weight: 600;
           font-size: 0.9rem;
           text-align: center;
           cursor: default;
           user-select: none;
           pointer-events: none;
           opacity: 0.9;
       }

       .match {
           padding: 0.5rem;
           border-bottom: 1px solid var(--border-color);
       }

       .match:last-of-type {
           border-bottom: none;
       }

       .team {
           display: block;
           font-weight: 600;
           margin-bottom: 0.5rem;
           color: var(--text-light);
           font-size: 0.95rem;
       }

       .league,
       .prediction {
           display: inline-block;
           font-size: 0.75rem;
           padding: 0.2rem 0.5rem;
           border-radius: 1rem;
           font-weight: 500;
       }

       .league {
           background-color: var(--bg-light);
           color: var(--text-muted);
       }

       .prediction {
           background-color: var(--accent);
           color: var(--on-accent);
       }

       .confidence,
       .odds,
       .score,
       .result {
           font-size: 0.8rem;
           color: var(--text-muted);
       }

       .score {
           font-weight: 600;
           color: var(--text-light);
       }

       .result {
           font-weight: 600;
       }

       .bet-info {
           background-color: var(--bg-dark);
           padding: 0.75rem;
           display: flex;
           flex-wrap: wrap;
           gap: 0.75rem;
           justify-content: space-between;
           align-items: center;
       }

       .bet-type,
       .bet-odds,
       .bet-result,
       .bet-profit {
           font-size: 0.85rem;
           font-weight: 500;
           color: var(--text-muted);
       }

       .loading,
       .error,
       .no-predictions {
           text-align: center;
           padding: 1.5rem;
           background-color: var(--bg-medium);
           border-radius: var(--border-radius);
       }

       .loading {
           color: var(--accent);
       }

       .error {
           color: var(--loss);
       }

       .no-predictions {
           color: var(--text-muted);
       }

       .contact-card,
       .faq-section,
       footer {
           background-color: var(--bg-medium);
           border-radius: 0;
           padding: 1rem;
           margin-top: 0;
           box-shadow: var(--box-shadow);
       }

       .card-title {
           font-size: 1.3rem;
           font-weight: 700;
           margin-bottom: 0.5rem;
           color: var(--text-light);
       }

       .card-description {
           color: var(--text-muted);
           margin-bottom: 0.6rem;
       }

       .contact-item {
           display: flex;
           align-items: center;
           margin-bottom: 0.5rem;
           padding: 0.5rem;
           background-color: var(--bg-light);
           border-radius: var(--border-radius);
       }

       .contact-icon {
           background: var(--primary);
           width: 2.5rem;
           height: 2.5rem;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           margin-right: 0.5rem;
           flex-shrink: 0;
           font-weight: 700;
       }

       .contact-content h3 {
           font-size: 1rem;
           font-weight: 600;
           margin-bottom: 0.2rem;
       }

       .contact-content p {
           color: var(--text-muted);
       }

       .contact-content a {
           color: var(--accent);
           text-decoration: none;
           transition: var(--transition);
       }

       .contact-content a:hover {
           text-decoration: underline;
       }

       .footer-text {
           text-align: center;
           margin-top: 1rem;
           font-size: 0.8rem;
           color: var(--text-muted);
       }

       .btn-primary {
           background: var(--accent);
           color: var(--on-accent);
           border: 0;
           padding: 0.6rem 1.2rem;
           border-radius: var(--border-radius);
           font-weight: 600;
           cursor: pointer;
           transition: var(--transition);
           display: inline-block;
           text-align: center;
           text-decoration: none;
       }

       .btn-primary:hover {
           background: var(--accent-dark);
       }

       .payment-options {
           display: flex;
           flex-direction: column;
           gap: 0.6rem;
           margin: 0.6rem 0;
       }

       .qr-code {
           width: 8rem;
           height: 8rem;
           background: var(--bg-card);
           padding: 0.4rem;
           border-radius: var(--border-radius);
           margin: 0 auto;
       }

       .resources-container {
           min-height: 280px;
           border-radius: var(--border-radius);
           margin: 0.6rem 0;
           overflow: hidden;
       }

       .resources-frame {
           width: 100%;
           height: 100%;
           border: 0;
       }

       .responsible-betting,
       .footer-links {
           text-align: center;
           margin-bottom: 0.6rem;
       }

       .responsible-betting h3 {
           margin-bottom: 0.5rem;
       }

       .responsible-betting p {
           color: var(--text-muted);
           font-size: 0.85rem;
       }

       .social-links {
           display: flex;
           gap: 0.5rem;
           justify-content: center;
       }

       .social-link {
           background: var(--bg-light);
           border-radius: 50%;
           width: 2.25rem;
           height: 2.25rem;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: var(--transition);
           color: var(--accent);
       }

       .social-link:hover {
           transform: translateY(-2px);
           background: var(--primary);
       }

       .social-link svg {
           width: 1rem;
           height: 1rem;
       }

       .faq-header {
           padding-bottom: 0.8rem;
           margin-bottom: 0.8rem;
           border-bottom: 1px solid var(--border-color);
       }

       .faq-title {
           font-size: 1.1rem;
           font-weight: 600;
           color: var(--accent);
       }

       .faq-item {
           border-bottom: 1px solid var(--border-color);
       }

       .faq-item:last-child {
           border-bottom: none;
       }

       .faq-item input[type="checkbox"] {
           display: none;
       }

       .faq-item label {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 0.8rem 0;
           cursor: pointer;
           font-size: 0.95rem;
           font-weight: 500;
           transition: var(--transition);
       }

       .faq-item label:hover {
           color: var(--accent);
       }

       .faq-arrow {
           transition: transform 0.3s ease;
       }

       .faq-answer {
           overflow: hidden;
           max-height: 0;
           transition: max-height 0.3s ease-in-out;
       }

       .faq-answer-content {
           padding-bottom: 0.8rem;
           color: var(--text-muted);
       }

       .faq-answer-content a {
           color: var(--accent);
       }

       .faq-item input:checked~.faq-answer {
           max-height: 20rem;
       }

       .faq-item input:checked~label .faq-arrow {
           transform: rotate(180deg);
       }

       .faq-item input:checked~label {
           color: var(--accent);
       }

       .faq-content-panel {
           max-width: 800px;
           margin: 0 auto;
           padding: 16px 12px;
           font-family: -apple-system, system-ui, sans-serif;
           line-height: 1.6;
           color: var(--text-light);
           background: var(--modal-bg);
           border-radius: var(--border-radius);
           border: 1px solid var(--border-color);
       }

       .faq-hero-title {
           color: var(--primary);
           font-size: 2rem;
           text-align: center;
           margin-bottom: 2.5rem;
       }

       .faq-subtitle {
           color: var(--text-light);
           font-size: 1.4rem;
           margin-top: 2rem;
       }

       .faq-link {
           color: var(--primary);
           text-decoration: none;
           font-weight: 600;
       }

       .faq-query-card {
           background: var(--bg-light);
           border-radius: 12px;
           padding: 2rem;
           margin-top: 3rem;
           border: 1px solid var(--border-color);
       }

       .faq-query-title {
           margin-top: 0;
           color: var(--primary);
       }

       .faq-query-form {
           display: flex;
           flex-direction: column;
           gap: 8px;
       }

       .faq-query-input {
           padding: 12px;
           border: 1px solid var(--border-color);
           border-radius: 6px;
           font-size: 1rem;
           background: var(--bg-medium);
           color: var(--text-light);
       }

       .faq-query-btn {
           background: var(--primary);
           color: var(--on-primary);
           border: none;
           padding: 12px;
           border-radius: 6px;
           font-weight: 600;
           cursor: pointer;
       }

       .faq-form-status {
           margin-top: 10px;
           font-size: 0.9rem;
           display: none;
       }

       ::-webkit-scrollbar {
           width: 8px;
       }

       ::-webkit-scrollbar-track {
           background: var(--bg-dark);
       }

       ::-webkit-scrollbar-thumb {
           background: var(--primary);
           border-radius: 4px;
       }

       ::-webkit-scrollbar-thumb:hover {
           background: var(--secondary);
       }

       .tab-container {
           max-width: 1000px;
           margin: 0 auto;
           background: var(--bg-elevated);
           border-radius: 8px;
           border: 1px solid var(--border-color);
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
           overflow: hidden;
       }

       .tab-header {
           position: relative;
           background: var(--bg-medium);
           padding: 0;
           overflow: hidden;
       }

       .desktop-sidebar-toggle {
           display: none;
           align-items: center;
           justify-content: center;
           width: 36px;
           height: 36px;
           border: 1px solid var(--border-color);
           background: var(--bg-dark);
           color: var(--text-light);
           border-radius: 8px;
           cursor: pointer;
           font-size: 18px;
           line-height: 1;
           flex-shrink: 0;
       }

       .tab-scroll-container {
           overflow-x: auto;
           overflow-y: hidden;
           scrollbar-width: thin;
           scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
       }

       .tab-scroll-container::-webkit-scrollbar {
           height: 3px;
       }

       .tab-scroll-container::-webkit-scrollbar-track {
           background: rgba(0, 0, 0, 0.2);
       }

       .tab-scroll-container::-webkit-scrollbar-thumb {
           background: rgba(255, 255, 255, 0.4);
           border-radius: 2px;
       }

       .tab-nav {
           display: flex;
           min-width: fit-content;
       }

       .tab-button {
           background: none;
           border: none;
           color: var(--text-light);
           font-size: 13px;
           font-weight: 600;
           padding: 14px 20px;
           cursor: pointer;
           transition: all 0.25s ease;
           white-space: nowrap;
           position: relative;
           text-transform: uppercase;
           letter-spacing: 0.5px;
       }

       .tab-button:hover {
           color: var(--text-light);
           background: var(--bg-light);
           transform: translateY(-1px);
       }

       .tab-button.active {
           color: var(--on-primary);
           background: var(--primary);
           border-radius: 6px 6px 0 0;
           box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
       }

       .tab-button.active::before {
           content: "";
           position: absolute;
           bottom: 0;
           left: 0;
           right: 0;
           height: 3px;
           background: var(--accent);
       }

       .scroll-indicator {
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
           background: rgba(0, 0, 0, 0.3);
           border: 1px solid rgba(255, 255, 255, 0.2);
           color: white;
           width: 32px;
           height: 32px;
           border-radius: 4px;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 14px;
           font-weight: bold;
           transition: all 0.2s ease;
           z-index: 10;
       }

       .scroll-indicator:hover {
           background: rgba(0, 0, 0, 0.5);
           border-color: var(--accent);
           color: var(--accent);
       }

       .scroll-left {
           left: 8px;
       }

       .scroll-right {
           right: 8px;
       }

       .tab-content {
           padding: 12px;
           background: var(--bg-elevated);
       }

       @media (min-width: 1024px) {
           .container>header {
               position: fixed !important;
               top: 0 !important;
               left: 0 !important;
               width: 100%;
               z-index: 1200 !important;
               margin-bottom: 0 !important;
           }

           .tab-container {
               max-width: calc(100% - var(--desktop-sidebar-width, 252px));
               margin-left: var(--desktop-sidebar-width, 252px);
               margin-right: 0;
               margin-top: var(--desktop-sidebar-top, 108px) !important;
               transition: margin-left 0.2s ease, max-width 0.2s ease;
               border-left: 1px solid var(--border-color);
               border-radius: 0 8px 8px 0;
           }

           footer {
               max-width: calc(100% - var(--desktop-sidebar-width, 252px));
               margin-left: var(--desktop-sidebar-width, 252px);
               margin-right: 0;
               border-left: none;
               border-radius: 0 8px 8px 0;
           }

           .tab-header {
               position: fixed;
               top: var(--desktop-sidebar-top, 108px);
               left: 0px !important;
               width: var(--desktop-sidebar-width, 300px);
               height: calc(100vh - var(--desktop-sidebar-top, 108px));
               border-right: none;
               border-radius: 0;
               z-index: 1100;
               overflow: hidden;
               padding-top: 0;
               transition: width 0.2s ease;
           }

           .desktop-sidebar-toggle {
               display: inline-flex;
               position: static;
               z-index: auto;
           }

           .tab-scroll-container {
               height: 100%;
               overflow-y: auto;
               overflow-x: hidden;
           }

           .tab-nav {
               flex-direction: column;
               min-width: 0;
               padding: 0 10px 10px;
               gap: 6px;
           }

           .tab-nav .tab-select {
               order: -1;
           }

           .tab-button {
               width: 100%;
               text-align: left;
               white-space: normal;
               text-transform: none;
               letter-spacing: 0;
               border-radius: 8px;
               padding: 10px 12px;
           }

           .tab-button.active {
               border-radius: 8px;
           }

           .tab-subtitle {
               display: block;
               margin-top: 2px;
           }

           .scroll-indicator {
               display: none;
           }

           body.sidebar-collapsed {
               --desktop-sidebar-width: 82px;
           }

           body.sidebar-collapsed .tab-button {
               padding: 8px 10px;
               font-size: 12px;
           }

           body.sidebar-collapsed .tab-subtitle,
           body.sidebar-collapsed #system-select {
               display: none;
           }
       }

       .tab-panel {
           display: none;
       }

       .tab-panel.active {
           display: block;
           animation: fadeIn 0.3s ease;
       }

       @keyframes fadeIn {
           from {
               opacity: 0;
               transform: translateY(8px);
           }

           to {
               opacity: 1;
               transform: translateY(0);
           }
       }

       .content-card {
           background: var(--bg-medium);
           border-radius: 6px;
           padding: 18px;
           border-left: 1px solid var(--accent);
           border-top: 1px solid var(--border-color);
       }

       .content-title {
           font-weight: 700;
           color: var(--accent);
           margin-bottom: 10px;
           text-transform: uppercase;
           letter-spacing: 0.5px;
       }

       .content-text {
           color: var(--text-muted);
           line-height: 1.5;
           font-size: 13px;
           margin-bottom: 14px;
       }

       .feature-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
           gap: 10px;
           margin-top: 14px;
       }

       .feature-item {
           background: var(--primary);
           padding: 10px 14px;
           border-radius: 4px;
           font-size: 12px;
           font-weight: 600;
           color: var(--text-light);
           display: flex;
           align-items: center;
           gap: 8px;
           transition: all 0.2s ease;
           cursor: pointer;
           border: 1px solid transparent;
       }

       .feature-item:hover {
           background: var(--accent);
           color: var(--primary);
           border-color: var(--primary);
           transform: translateY(-1px);
       }

       .feature-item::before {
           content: "⚡";
           font-size: 14px;
           color: var(--accent);
       }

       .feature-item:hover::before {
           color: var(--primary);
       }

       .stats-bar {
           background: var(--accent);
           height: 2px;
           width: 100%;
           margin: 12px 0;
           border-radius: 1px;
       }

       .skeleton {
           background-color: var(--bg-light);
           border-radius: 0.25rem;
           position: relative;
           overflow: hidden;
       }

       .skeleton::before {
           content: "";
           position: absolute;
           top: 0;
           left: 0;
           height: 100%;
           width: 150px;
           background: rgba(255, 255, 255, 0.2);
           animation: shimmer 1.5s infinite;
       }

       @keyframes shimmer {
           0% {
               transform: translateX(-150px);
           }

           100% {
               transform: translateX(100%);
           }
       }

       .skeleton-text {
           height: 1em;
           width: 75%;
       }

       .skeleton-stat {
           height: 24px;
           width: 60px;
           margin: 0 auto;
       }

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

       .skeleton-card .skeleton {
           margin-bottom: 0.75rem;
       }

       .skeleton-card .skeleton-line-sm {
           width: 40%;
           height: 1rem;
       }

       .skeleton-card .skeleton-line-md {
           width: 70%;
           height: 1rem;
       }

       .skeleton-card .skeleton-line-lg {
           width: 90%;
           height: 1rem;
       }

       .skeleton-card .skeleton-line-xs {
           width: 25%;
           height: 0.8rem;
       }

       .skeleton-gap-md {
           margin-bottom: var(--space-4);
       }

       .skeleton-gap-lg {
           margin-bottom: var(--space-6);
       }

       .skeleton-width-35 {
           width: 35%;
       }

       .skeleton-width-20 {
           width: 20%;
       }

       .pred-gap-md {
           margin-bottom: var(--space-4);
       }

       .pred-gap-lg {
           margin-bottom: var(--space-6);
       }

       .pred-skeleton-line-xs.pred-width-35 {
           width: 35%;
       }

       .pred-skeleton-line-xs.pred-width-20 {
           width: 20%;
       }

       .skeleton-card .flex {
           display: flex;
           gap: 1rem;
           align-items: center;
       }

       .text-compact {
           font-size: 0.75em;
       }

       .status-inline-message {
           text-align: center;
           color: var(--text-muted);
       }

       .hidden-display-none {
           display: none;
       }

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

       .display-inline-block {
           display: inline-block;
       }

       .text-accent {
           color: var(--accent);
       }

       .center-margin-md {
           text-align: center;
           margin: 15px 0;
       }

       .muted-inline-note {
           color: var(--text-muted);
       }

       .section-heading {
           margin: 0;
           color: var(--text-light);
           font-size: 24px;
           letter-spacing: -0.5px;
       }

       .tab-subtitle {
           display: block;
           font-size: 10px;
           opacity: 0.7;
           font-weight: normal;
       }

       .vip-status-text {
           color: var(--text-muted);
           text-align: center;
           margin-top: 50px;
           font-style: italic;
       }

       .vip-feed-shell {
           background: var(--bg-dark);
           color: var(--text-light);
           font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Arial, sans-serif;
           padding: 12px;
           min-height: 100vh;
           width: 100%;
           box-sizing: border-box;
           overflow-y: auto;
       }

       .vip-feed-container {
           max-width: 1000px;
           margin: 0 auto;
       }

       .vip-feed-header {
           border-bottom: 2px solid var(--border-color);
           padding-bottom: 20px;
           margin-bottom: 20px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           flex-wrap: wrap;
           gap: 15px;
       }

       .vip-feed-title {
           margin: 0;
           color: var(--text-light);
           font-size: 24px;
           letter-spacing: -0.5px;
       }

       .vip-feed-meta {
           margin: 5px 0 0;
           color: var(--text-muted);
           font-size: 14px;
       }

       .vip-feed-actions {
           display: flex;
           align-items: center;
           gap: 10px;
       }

       .vip-feed-link {
           background: var(--primary);
           color: var(--on-primary);
           text-decoration: none;
           padding: 8px 16px;
           border-radius: 6px;
           font-size: 13px;
           font-weight: 700;
           transition: 0.2s;
           border: 1px solid var(--primary-dark);
       }

       .vip-feed-live-pill {
           font-size: 12px;
           background: var(--card-bg);
           border: 1px solid var(--win);
           color: var(--win);
           padding: 7px 14px;
           border-radius: 30px;
           font-weight: 700;
           text-transform: uppercase;
           white-space: nowrap;
       }

       .vip-feed-list {
           display: flex;
           flex-direction: column;
           gap: 12px;
       }

       .brand-link {
           display: inline-flex;
           align-items: center;
           text-decoration: none;
           white-space: nowrap;
           font-family: -apple-system, system-ui, sans-serif;
       }

       .brand-logo {
           width: 24px;
           height: 24px;
           border-radius: 5px;
           margin-right: 8px;
           object-fit: cover;
       }

       .brand-main-text {
           font-size: 0.85rem;
           font-weight: 800;
           color: var(--accent-dark);
       }

       .brand-sub-text {
           font-size: 0.75rem;
           font-weight: 400;
           color: var(--text-muted);
       }

       .brand-icon-small {
           margin-left: 6px;
           color: var(--info);
       }

       .countdown-inline {
           font-family: monospace;
           display: inline-flex;
           align-items: center;
           font-size: clamp(0.7rem, 2vw, 1rem);
           user-select: none;
           min-width: 84px;
           font-variant-numeric: tabular-nums;
           font-feature-settings: "tnum";
       }

       .metric-modal-close-btn {
           background: var(--accent);
           color: var(--on-accent);
           border: none;
           padding: 12px 24px;
           border-radius: 10px;
           font-size: 16px;
           font-weight: 600;
           cursor: pointer;
           width: 100%;
       }

       .filter-summary-bar {
           background: var(--bg-medium);
           padding: 10px 15px;
           border-radius: var(--border-radius);
           margin-bottom: 15px;
           font-size: 0.9rem;
           color: var(--accent);
           border-left: 3px solid var(--accent);
           display: flex;
           justify-content: space-between;
           align-items: center;
       }

       .search-inline-wrap {
           display: flex;
           align-items: center;
           padding: 4px 8px;
           height: 32px;
           box-sizing: border-box;
           width: 100%;
           max-width: 100%;
           gap: 4px;
       }

       .icon-fixed {
           flex-shrink: 0;
       }

       .sr-only-pos {
           position: absolute;
           left: -9999px;
       }

       /* Toast Notification System */
       #toast-container {
           position: fixed;
           top: 20px;
           right: 20px;
           z-index: 10000;
           display: flex;
           flex-direction: column;
           gap: 10px;
           max-width: 400px;
           pointer-events: none;
       }

       .toast {
           padding: 14px 18px;
           border-radius: 8px;
           font-size: 14px;
           font-weight: 500;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
           animation: slideIn 0.3s ease-out;
           pointer-events: all;
           display: flex;
           align-items: center;
           gap: 10px;
           max-width: 100%;
           word-wrap: break-word;
       }

       .toast.success {
           background: #4caf50;
           color: white;
       }

       .toast.error {
           background: #f44336;
           color: white;
       }

       .toast.info {
           background: var(--primary);
           color: white;
       }

       .toast.warning {
           background: #ff9800;
           color: white;
       }

       @keyframes slideIn {
           from {
               transform: translateX(400px);
               opacity: 0;
           }

           to {
               transform: translateX(0);
               opacity: 1;
           }
       }

       @keyframes slideOut {
           from {
               transform: translateX(0);
               opacity: 1;
           }

           to {
               transform: translateX(400px);
               opacity: 0;
           }
       }

       .toast.closing {
           animation: slideOut 0.3s ease-out;
       }

       .search-inline-input {
           flex: 1;
           padding: 4px 8px;
           font-size: inherit;
           border: 1px solid var(--border-color);
           border-radius: 3px;
           outline: none;
           box-sizing: border-box;
           height: 24px;
       }

       .trial-modal-overlay {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.8);
           backdrop-filter: blur(8px);
           z-index: 10000;
           align-items: center;
           justify-content: center;
           font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               sans-serif;
       }

       .trial-modal-card {
           background: var(--modal-bg);
           padding: 16px 12px;
           border-radius: var(--radius-xl);
           text-align: center;
           max-width: 400px;
           width: 90%;
           box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
       }

       .trial-icon-star {
           background: var(--bg-light);
           color: var(--primary);
           width: 60px;
           height: 60px;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           margin: 0 auto 20px;
           font-size: 24px;
       }

       .trial-title {
           margin: 0 0 10px;
           color: var(--text-light);
           font-size: 22px;
           font-weight: 700;
       }

       .trial-desc {
           color: var(--text-muted);
           font-size: 15px;
           line-height: 1.6;
           margin-bottom: 25px;
       }

       .trial-input {
           width: 100%;
           padding: 15px;
           margin-bottom: 15px;
           border: 1px solid var(--border-color);
           background: var(--bg-medium);
           color: var(--text-light);
           border-radius: 10px;
           font-size: 16px;
           box-sizing: border-box;
           outline: none;
       }

       .trial-submit {
           width: 100%;
           padding: 15px;
           background: var(--bg-elevated);
           color: var(--text-light);
           border: none;
           border-radius: 10px;
           font-size: 16px;
           font-weight: 600;
           cursor: pointer;
           transition: all 0.2s;
       }

       .trial-icon-success {
           background: rgba(74, 207, 165, 0.18);
           color: var(--win);
           width: 60px;
           height: 60px;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           margin: 0 auto 20px;
           font-size: 24px;
       }

       .trial-success-title {
           margin: 0 0 10px;
           color: var(--text-light);
           font-size: 20px;
           font-weight: 700;
       }

       .trial-success-desc {
           color: var(--text-muted);
           font-size: 14px;
           line-height: 1.5;
           margin-bottom: 15px;
       }

       .trial-link {
           display: block;
           padding: 15px;
           background: var(--bg-light);
           color: var(--primary);
           border-radius: 10px;
           text-decoration: underline;
           font-weight: 700;
           font-size: 14px;
           margin-bottom: 10px;
           word-break: break-all;
           border: 1px solid var(--border-color);
       }

       .trial-close-btn {
           background: none;
           border: none;
           color: var(--text-muted);
           margin-top: 20px;
           cursor: pointer;
           font-size: 13px;
           font-weight: 500;
       }

       /* CLS safeguards */
       #quote-box {
           min-height: 44px;
           display: block;
           padding: 10px 0 0 0;
       }

       #sports-predictions-container,
       #system2-predictions-container {
           min-height: 220px;
       }

       #preview {
           min-height: 200px;
       }

       #ntfy-widget-container {
           min-height: 250px;
       }

       #inplay .ma-dropdown-container,
       #inplay2 .ma-dropdown-container {
           min-height: 64px;
       }

       #inplay .ma-matchDataSection {
           min-height: 1200px;
       }

       #inplay .ma-tablesContainer,
       #inplay2 #ma-tablesContainer {
           min-height: auto;
       }

       #sports-predictions-container,
       #system2-predictions-container,
       #inplay .ma-matchDataSection,
       #inplay .ma-tablesContainer,
       #inplay2 #ma-matchDataSection,
       #inplay2 #ma-tablesContainer,
       #ntfy-widget-container {
           content-visibility: auto;
           contain-intrinsic-size: 1200px;
       }

       .quote-text {
           font-style: italic;
           margin-bottom: 6px;
       }

       .quote-author {
           color: var(--text-muted);
           font-size: 0.85em;
       }

       #ma-matchDataSection {
           font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               sans-serif;
           margin: 12px;
           color: var(--text-light);
           background-color: var(--bg-dark);
           padding: 12px;
           border-radius: 8px;
           max-width: 1200px;
           margin-left: auto;
           margin-right: auto;
       }

       #ma-matchDataSection h1 {
           font-size: 1.8em;
           margin-bottom: 20px;
           color: var(--text-light);
           text-align: center;
       }

       .ma-dropdown-container {
           margin-bottom: 5px;
           display: flex;
           align-items: center;
           gap: 5px;
           font-size: small;
       }

       label {
           color: var(--text-muted);
       }

       select {
           padding: 8px;
           font-size: 1em;
           border-radius: 6px;
           border: 1px solid var(--border-color);
           background-color: var(--bg-light);
           color: var(--text-light);
           cursor: pointer;
       }

       .ma-tab-container {
           display: flex;
           gap: 10px;
           margin-bottom: 20px;
       }

       .ma-tab-button {
           padding: 10px 20px;
           border: none;
           cursor: pointer;
           border-radius: 6px;
           background: var(--bg-light);
           color: var(--text-light);
           font-weight: bold;
       }

       .ma-tab-button.active {
           background: var(--info);
           color: var(--text-light);
       }

       th,
       td {
           padding: 12px;
           text-align: left;
           border-bottom: 1px solid var(--border-color);
       }

       th {
           background-color: var(--bg-light);
           text-transform: uppercase;
       }

       tr:nth-child(even) {
           background-color: var(--bg-light);
       }

       tr:hover {
           background-color: var(--bg-elevated);
       }

       .ma-summary {
           background-color: var(--secondary);
           font-weight: 600;
           color: var(--text-light);
       }

       .ma-month-header {
           font-size: 1.4em;
           margin: 12px 0 6px;
           color: var(--text-light);
           font-weight: 500;
       }

       .ma-error {
           color: var(--loss);
           text-align: center;
       }

       .range-inputs {
           display: flex;
           gap: 0.5rem;
           align-items: center;
       }

       .range-inputs input {
           flex: 1;
           min-width: 0;
       }

       .range-inputs span {
           color: var(--text-muted);
           font-size: 0.8rem;
           white-space: nowrap;
       }

       .st-sticky-share-buttons img,
       [class*="sharethis"] img,
       .st-toggle img {
           width: 20px !important;
           height: 20px !important;
       }

       @media (min-width: 768px) {


           .nav-toggle {
               display: none;
           }

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

           .search {
               grid-column: span 2;
           }

           #refresh-btn {
               grid-column: 1/-1;
           }

           #predictions-container {
               grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
           }

           .payment-options {
               flex-direction: row;
               gap: 1.5rem;
           }

           .qr-container {
               flex: 1;
           }

           .card-title {
               font-size: 1.5rem;
           }
       }

       @media (min-width: 1024px) {
           #predictions-container {
               grid-template-columns: repeat(3, 1fr);
           }

           .resources-container {
               min-height: 280px;
           }
       }

       @media (max-width: 640px) {
           .tab-button {
               padding: 12px 16px;
               font-size: 11px;
               letter-spacing: 0.3px;
           }

           .tab-content {
               padding: 1px;
           }

           .feature-grid {
               grid-template-columns: 1fr 1fr;
           }
       }

       @media (max-width: 600px) {
           #ma-matchDataSection {
               margin: 10px;
               padding: 1px;
           }

           th,
           td {
               padding: 1px;
               font-size: 0.75em;
           }
       }


       body.page-initializing {
           visibility: hidden;
       }

       body.page-initializing .tab-container,
       body.page-initializing .tab-header,
       body.page-initializing .container>header,
       body.page-initializing .tab-button {
           transition: none !important;
           animation: none !important;
       }

       body.page-warmup .tab-button,
       body.page-warmup .pred-stat-card,
       body.page-warmup .pred-prediction-card,
       body.page-warmup .inplay-match-row,
       body.page-warmup .inplay2-match-row,
       body.page-warmup .prediction-card {
           transition: none !important;
           animation: none !important;
       }

       body.page-warmup .tab-button:hover,
       body.page-warmup .pred-stat-card:hover,
       body.page-warmup .pred-prediction-card:hover,
       body.page-warmup .inplay-match-row:hover,
       body.page-warmup .inplay2-match-row:hover,
       body.page-warmup .prediction-card:hover {
           transform: none !important;
       }


       .bac-result {
           margin-top: 20px;
           font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
           max-width: 500px;
           background: transparent;
       }

       .bac-card {
           background: var(--bg-medium);
           border-radius: var(--radius-lg);
           padding: var(--space-4);
           box-shadow: var(--box-shadow);
           border: 1px solid var(--border-color);
           transition: box-shadow 0.2s ease;
       }

       .bac-card:hover {
           box-shadow: 0 16px 30px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.12);
       }

       .bac-badge {
           display: inline-flex;
           align-items: center;
           padding: 6px 14px;
           border-radius: 40px;
           font-size: 13px;
           font-weight: 600;
           letter-spacing: 0.3px;
           text-transform: uppercase;
           margin-bottom: 18px;
           border: none;
           line-height: 1;
       }

       .bac-badge-new {
           background: var(--secondary);
           color: var(--text-light);
       }

       .bac-badge-inactive {
           background: var(--loss);
           color: var(--text-light);
       }

       .bac-badge-active {
           background: var(--accent);
           color: var(--on-accent);
       }

       .bac-badge-upgrade {
           background: var(--accent-dark);
           color: var(--text-light);
       }

       .bac-message {
           margin-bottom: 12px;
       }

       .bac-message h3 {
           margin: 0 0 8px 0;
           font-size: 22px;
           font-weight: 700;
           color: var(--text-light);
           line-height: 1.2;
       }

       .bac-message p {
           margin: 6px 0;
           color: var(--text-light);
           font-size: 15px;
           line-height: 1.5;
           font-weight: 400;
       }

       .bac-email-highlight {
           background: var(--bg-light);
           padding: 2px 8px;
           border-radius: 30px;
           font-weight: 600;
           color: var(--text-light);
       }

       .bac-btn,
       .bac-dashboard-btn {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           background: var(--accent);
           color: var(--on-accent);
           font-weight: 600;
           border-radius: 40px;
           text-decoration: none;
           transition: all 0.2s;
           border: none;
           cursor: pointer;
       }

       .bac-btn {
           padding: 12px 28px;
           margin: 12px 0 8px;
           font-size: 15px;
       }

       .bac-dashboard-btn {
           padding: 10px 24px;
           font-size: 14px;
           white-space: nowrap;
           font-weight: 700;
       }

       .bac-btn:hover,
       .bac-dashboard-btn:hover {
           background: var(--accent-dark);
           transform: translateY(-2px);
           box-shadow: 0 8px 14px var(--accent-light);
       }

       .bac-btn i {
           margin-right: 8px;
       }

       .bac-btn-payment {
           background: var(--bg-light);
           color: var(--text-light);
           border: 1.5px solid var(--border-color);
           padding: 10px 20px;
           border-radius: 40px;
           font-weight: 600;
           font-size: 14px;
           transition: all 0.18s;
           display: inline-flex;
           align-items: center;
           gap: 6px;
           margin-right: 8px;
           box-shadow: none;
       }

       .bac-btn-payment:hover {
           background: var(--bg-medium);
           border-color: var(--accent);
           transform: translateY(-1px);
           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
       }

       .bac-btn-payment:active {
           background: var(--bg-medium);
       }

       .bac-payment-options {
           margin-top: var(--space-4);
           padding-top: var(--space-3);
           border-top: 1px solid var(--border-color);
       }

       .bac-payment-options h4 {
           font-size: 16px;
           margin: 0 0 16px;
           color: var(--text-light);
           font-weight: 700;
           display: flex;
           align-items: center;
           gap: 8px;
       }

       .bac-price {
           font-size: 28px;
           font-weight: 800;
           color: var(--text-light);
           margin: 8px 0 4px;
           display: flex;
           align-items: baseline;
           gap: 6px;
       }

       .bac-price span.original {
           font-size: 16px;
           font-weight: 400;
           color: var(--text-muted);
           text-decoration: line-through;
       }

       .bac-discount {
           background: var(--loss);
           color: var(--text-light);
           padding: 4px 12px;
           border-radius: 40px;
           font-size: 12px;
           font-weight: 700;
           margin-left: 8px;
           display: inline-block;
       }

       .bac-dashboard-card {
           background: var(--bg-medium);
           border-radius: var(--radius-lg);
           padding: var(--space-4);
           margin-top: var(--space-4);
           border: 1px solid var(--border-color);
           display: flex;
           align-items: center;
           gap: 14px;
           flex-wrap: wrap;
       }

       .bac-dashboard-card p {
           margin: 0;
           color: var(--text-light);
           font-weight: 600;
           font-size: 15px;
           flex: 1;
       }

       .bac-check-another {
           display: inline-block;
           margin-top: 20px;
           color: var(--text-muted);
           font-weight: 500;
           font-size: 13px;
           text-decoration: underline;
           text-underline-offset: 4px;
           cursor: pointer;
           background: none;
           border: none;
           padding: 8px 0;
           transition: color 0.2s;
       }

       .bac-check-another:hover {
           color: var(--text-light);
       }

       .bac-inline-container {
           width: 100%;
           max-width: 240px;
           font-family: -apple-system, sans-serif;
       }

       .bac-inline-form {
           display: flex;
           align-items: center;
           gap: 2px;
           background: var(--bg-light);
           border: 1px solid var(--border-color);
           border-radius: 4px;
           padding: 2px;
           margin: 0;
       }

       .bac-inline-input {
           flex: 1;
           min-width: 0;
           border: none;
           padding: 0 6px;
           font-size: 12px;
           color: var(--text-light);
           outline: none;
           background: transparent;
           height: 24px;
       }

       .bac-inline-submit {
           background: var(--accent);
           color: var(--on-accent);
           border: none;
           border-radius: 3px;
           padding: 0 10px;
           font-weight: 700;
           font-size: 11px;
           cursor: pointer;
           height: 24px;
       }

       .bac-inline-note {
           font-size: 9px;
           color: var(--accent);
           font-weight: 700;
           margin-top: 3px;
           text-transform: uppercase;
           display: flex;
           align-items: center;
           gap: 8px;
           flex-wrap: wrap;
       }

       .bac-inline-history {
           color: var(--on-accent);
           background: var(--accent);
           padding: 3px 8px;
           border-radius: 2px;
           font-size: 8px;
           text-decoration: none;
           font-weight: 600;
           cursor: pointer;
           white-space: nowrap;
           transition: opacity 0.2s;
       }

       .bac-error {
           background: rgba(239, 83, 80, 0.12);
           border-left: 6px solid var(--loss);
           color: var(--loss);
           padding: 16px 20px;
           border-radius: 16px;
           font-size: 14px;
           margin: 12px 0;
           font-weight: 500;
       }

       .bac-loading {
           display: flex;
           align-items: center;
           color: var(--text-muted);
           padding: 16px;
           font-weight: 500;
           gap: 12px;
       }

       .bac-spinner {
           width: 20px;
           height: 20px;
           border: 3px solid var(--bg-light);
           border-top-color: var(--accent);
           border-radius: 50%;
           animation: bac-spin 0.8s linear infinite;
       }

       @keyframes bac-spin {
           0% {
               transform: rotate(0deg);
           }

           100% {
               transform: rotate(360deg);
           }
       }

       .bac-modal-overlay {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: var(--overlay-medium);
           backdrop-filter: blur(3px);
           align-items: center;
           justify-content: center;
           z-index: 999999;
       }

       .bac-modal-container {
           background: var(--modal-bg);
           border-radius: var(--radius-xl);
           padding: var(--space-5) var(--space-4);
           max-width: 400px;
           width: 90%;
           box-shadow: var(--box-shadow);
           border: 1px solid var(--border-color);
           position: relative;
           animation: bac-fadeIn 0.2s ease;
       }

       @keyframes bac-fadeIn {
           from {
               opacity: 0;
               transform: scale(0.94);
           }

           to {
               opacity: 1;
               transform: scale(1);
           }
       }

       .bac-modal-close {
           position: absolute;
           top: 22px;
           right: 22px;
           background: none;
           border: none;
           font-size: 26px;
           cursor: pointer;
           color: var(--text-muted);
           padding: 0;
           line-height: 1;
           transition: color 0.2s;
       }

       .bac-modal-close:hover {
           color: var(--text-light);
       }

       .bac-modal-title {
           font-size: 24px;
           font-weight: 800;
           margin: 0 0 16px 0;
           color: var(--text-light);
           display: flex;
           align-items: center;
           gap: 10px;
       }

       .bac-modal-detail {
           background: var(--bg-light);
           color: var(--text-light);
           padding: 16px;
           border-radius: 24px;
           margin: 10px 0;
           font-size: 16px;
           border: 1px solid var(--border-color);
       }

       .bac-modal-detail p {
           margin: 16px 0;
       }

       .bac-modal-footer {
           display: flex;
           justify-content: flex-end;
       }

       .bac-payment-duration {
           color: var(--text-muted);
           margin-bottom: 20px;
       }

       .bac-payment-actions {
           display: flex;
           flex-wrap: wrap;
           gap: 10px;
       }

       .bac-modal-content-center {
           text-align: center;
       }

       .bac-modal-subtitle {
           font-size: 16px;
           font-weight: 600;
           margin-bottom: 20px;
           color: var(--text-light);
       }

       .bac-modal-divider {
           margin-top: 30px;
           padding-top: 20px;
           border-top: 2px solid var(--border-color);
       }

       .bac-modal-note-title {
           font-size: 14px;
           font-weight: 600;
           color: var(--text-muted);
           margin-bottom: 12px;
       }

       .bac-copy-value {
           background: var(--bg-elevated);
           color: var(--text-light);
           padding: 14px;
           border-radius: 12px;
           font-size: 17px;
           font-weight: 600;
           letter-spacing: 0.5px;
           cursor: pointer;
           user-select: all;
       }

       .bac-copy-hint {
           color: var(--text-muted);
           margin-top: 8px;
           font-size: 12px;
           font-style: italic;
       }

       .bac-modal-success-note {
           color: var(--text-light);
           margin-top: 20px;
           font-size: 14px;
       }

       .bac-mpesa-title {
           font-size: 18px;
           font-weight: 700;
           margin-bottom: 12px;
       }

       .bac-mpesa-box {
           background: var(--bg-elevated);
           color: var(--text-light);
           padding: 16px;
           border-radius: 16px;
           font-size: 20px;
           font-weight: 600;
           text-align: center;
       }

       .bac-copy-chip {
           background: var(--accent);
           color: var(--on-accent);
           padding: 4px 14px;
           border-radius: 40px;
           cursor: pointer;
           user-select: all;
       }

       .bac-mpesa-hint {
           color: var(--text-muted);
           margin-top: 12px;
           font-size: 13px;
           font-style: italic;
       }

       .bac-mpesa-amount {
           color: var(--text-light);
           margin-top: 20px;
           font-size: 15px;
       }

       .bac-btn-modal {
           background: var(--primary);
           color: var(--on-primary);
           border: none;
           padding: 12px 32px;
           border-radius: 40px;
           font-weight: 600;
           cursor: pointer;
           font-size: 15px;
           transition: all 0.2s;
       }

       .bac-btn-modal:hover {
           background: var(--primary-dark);
           transform: scale(1.02);
       }

       #subbox-form-ihy {
           background: var(--bg-light) !important;
           border: 1px solid var(--border-color) !important;
       }

       #subbox-email-ihy {
           background: transparent !important;
           color: var(--text-light) !important;
       }

       #subbox-email-ihy::placeholder {
           color: var(--text-muted);
       }

       @media (max-width: 480px) {
           .bac-card {
               padding: var(--space-3);
           }

           .bac-btn-payment {
               width: 100%;
               margin-right: 0;
               margin-bottom: 10px;
               justify-content: center;
           }

           .bac-dashboard-card {
               flex-direction: column;
               align-items: stretch;
               text-align: center;
           }

           .bac-dashboard-btn {
               width: 100%;
           }
       }




       #sports {
           font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
           background: var(--bg-dark);
           color: var(--text-light);
           line-height: 1.5;
           transition: background 0.3s, color 0.3s
       }

       .pred-container {
           max-width: 1280px;
           margin: 0 auto;
           padding: 1.5rem
       }

       #sports header {
           background: var(--bg-medium);
           box-shadow: var(--box-shadow);
           padding: 1rem;
           position: sticky;
           top: 0;
           z-index: 10;
           display: flex;
           justify-content: space-between;
           align-items: center;
           border-radius: var(--border-radius);
           margin-bottom: 1rem
       }

       #sports header h1 {
           margin: 0;
           font-size: 1.5rem;
           font-weight: 600
       }

       .pred-theme-toggle {
           background: none;
           border: none;
           cursor: pointer;
           font-size: 1.2rem;
           color: var(--text-light)
       }

       .pred-nav-toggle {
           display: none;
           font-size: 1.5rem;
           background: none;
           border: none;
           cursor: pointer;
           color: var(--text-light)
       }

       .pred-filters {
           display: none;
           background: var(--bg-medium);
           padding: 0.8rem;
           border-radius: var(--border-radius);
           margin-bottom: 1rem;
           grid-template-columns: 1fr;
           gap: 0.75rem
       }

       .pred-filters.active {
           display: grid
       }

       .pred-filter-item {
           display: flex;
           flex-direction: column;
           gap: 0.4rem
       }

       .pred-filter-item label {
           font-size: 0.8rem;
           font-weight: 500;
           color: var(--text-muted)
       }

       .pred-filter-item select,
       .pred-filter-item input[type="text"],
       .pred-filter-item input[type="number"] {
           padding: 0.5rem 0.75rem;
           border: 1px solid var(--border-color);
           background-color: var(--bg-dark);
           color: var(--text-light);
           border-radius: 0.25rem;
           font-size: 0.9rem;
           transition: var(--transition);
           width: 100%;
           -webkit-appearance: none;
           -moz-appearance: none;
           appearance: none
       }

       .pred-filter-item select:focus,
       .pred-filter-item input[type="text"]:focus,
       .pred-filter-item input[type="number"]:focus {
           outline: none;
           border-color: var(--accent);
           box-shadow: 0 0 0 2px rgba(255, 223, 27, 0.2)
       }

       .pred-search {
           position: relative
       }

       .pred-search svg {
           position: absolute;
           left: 0.75rem;
           top: 50%;
           transform: translateY(-50%);
           color: var(--text-muted);
           width: 1rem;
           height: 1rem
       }

       .pred-search input {
           padding-left: 2.5rem
       }

       #pred-refresh-btn {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           gap: 0.25rem;
           padding: 0.5rem 1rem;
           background-color: var(--accent);
           color: var(--bg-dark);
           border: none;
           border-radius: 0.25rem;
           font-weight: 500;
           cursor: pointer;
           transition: var(--transition);
           font-size: 0.9rem
       }

       #pred-refresh-btn:hover {
           background-color: var(--accent-dark)
       }

       .pred-stats {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
           gap: 0.5rem;
           margin-bottom: 1rem
       }

       .pred-stat-card {
           background-color: var(--bg-medium);
           padding: 0.6rem;
           border-radius: var(--border-radius);
           text-align: center;
           border-top: 3px solid var(--primary);
           transition: var(--transition);
           cursor: pointer;
           position: relative
       }

       .pred-stat-card:hover {
           transform: translateY(-5px);
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3)
       }

       .pred-stat-card::after {
           content: "ℹ️";
           position: absolute;
           top: 8px;
           right: 8px;
           opacity: 0;
           transition: opacity 0.2s;
           font-size: 0.8rem
       }

       .pred-stat-card:hover::after {
           opacity: 1
       }

       .pred-stat-card:active {
           transform: scale(0.98);
           transition: transform 0.1s
       }

       .pred-stat-title {
           font-size: 0.7rem;
           color: var(--text-muted);
           margin-bottom: 0.25rem;
           font-weight: 500;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis
       }

       .pred-stat-value {
           font-size: 1rem;
           font-weight: 700;
           color: var(--accent)
       }

       .pred-predictions {
           display: grid;
           grid-template-columns: 1fr;
           gap: 1rem
       }

       .pred-prediction-card {
           background-color: var(--bg-medium);
           border-radius: var(--border-radius);
           box-shadow: var(--box-shadow);
           overflow: hidden;
           transition: var(--transition);
           border-left: 3px solid var(--primary);
           cursor: pointer;
           position: relative;
           overflow: hidden
       }

       .pred-prediction-card:hover {
           transform: translateY(-4px);
           box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25);
           background-color: var(--bg-light)
       }

       .pred-prediction-card:active {
           transform: translateY(0)
       }

       .pred-prediction-card::before {
           content: "Click for details";
           position: absolute;
           bottom: 10px;
           right: 10px;
           font-size: 0.7rem;
           color: var(--text-muted);
           opacity: 0;
           transition: opacity 0.3s
       }

       .pred-prediction-card:hover::before {
           opacity: 1
       }

       .pred-prediction-card.win {
           border-left-color: var(--win)
       }

       .pred-prediction-card.loss {
           border-left-color: var(--loss)
       }

       .pred-date {
           background-color: var(--primary);
           color: var(--text-light);
           padding: 0.5rem 0.8rem;
           font-weight: 600;
           font-size: 0.9rem;
           text-align: center;
           cursor: default;
           user-select: none;
           pointer-events: none;
           opacity: 0.9
       }

       .pred-match {
           padding: 0.8rem;
           border-bottom: 1px solid var(--border-color)
       }

       .pred-match:last-of-type {
           border-bottom: none
       }

       .pred-team {
           display: block;
           font-weight: 600;
           margin-bottom: 0.5rem;
           color: var(--text-light);
           font-size: 0.95rem
       }

       .pred-league,
       .pred-prediction {
           display: inline-block;
           font-size: 0.75rem;
           padding: 0.2rem 0.5rem;
           border-radius: 1rem;
           font-weight: 500
       }

       .pred-league {
           background-color: var(--bg-light);
           color: var(--text-muted)
       }

       .pred-prediction {
           background-color: var(--accent);
           color: var(--bg-dark)
       }

       .pred-confidence,
       .pred-odds,
       .pred-score,
       .pred-result {
           font-size: 0.8rem;
           color: var(--text-muted)
       }

       .pred-score {
           font-weight: 600;
           color: var(--text-light)
       }

       .pred-result {
           font-weight: 600
       }

       .pred-bet-info {
           background-color: var(--bg-dark);
           padding: 0.75rem;
           display: flex;
           flex-wrap: wrap;
           gap: 0.75rem;
           justify-content: space-between;
           align-items: center
       }

       .pred-bet-type,
       .pred-bet-odds,
       .pred-bet-result,
       .pred-bet-profit {
           font-size: 0.85rem;
           font-weight: 500;
           color: var(--text-muted)
       }

       .pred-skeleton {
           background: var(--bg-light);
           animation: pulse 1.5s infinite;
           border-radius: 4px
       }

       .pred-skeleton-card {
           background: var(--bg-medium);
           padding: 1.5rem;
           border-radius: var(--border-radius);
           box-shadow: var(--box-shadow);
           margin-bottom: 1rem
       }

       .pred-skeleton-line-sm {
           height: 1rem;
           width: 50%
       }

       .pred-skeleton-line-lg {
           height: 1.5rem;
           width: 80%;
           margin-bottom: 1rem
       }

       .pred-skeleton-line-xs {
           height: 0.8rem;
           width: 40%
       }

       .pred-skeleton-stat {
           height: 2rem;
           width: 100%
       }

       .pred-no-predictions,
       .pred-error {
           text-align: center;
           padding: 2rem;
           color: var(--loss);
           font-size: 1.1rem
       }

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

       .pred-range-inputs {
           display: flex;
           gap: 0.5rem;
           align-items: center
       }

       .pred-range-inputs input {
           flex: 1;
           min-width: 0
       }

       .pred-range-inputs span {
           color: var(--text-muted);
           font-size: 0.8rem;
           white-space: nowrap
       }

       @keyframes pulse {
           0% {
               opacity: 1
           }

           50% {
               opacity: 0.5
           }

           100% {
               opacity: 1
           }
       }

       @media (min-width:768px) {
           .pred-nav-toggle {
               display: none
           }

           .pred-filters {
               display: grid;
               grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
               gap: 1rem
           }

           .pred-search {
               grid-column: span 2
           }

           #pred-refresh-btn {
               grid-column: 1/-1
           }

           .pred-predictions {
               grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
           }
       }

       @media (min-width:1024px) {
           .pred-predictions {
               grid-template-columns: repeat(3, 1fr)
           }
       }


       .container>header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           /* padding: clamp(0.5rem, 1.5vw, 0.75rem); */
           background-color: var(--bg-medium);
           border-radius: 0;
           margin-bottom: 1rem;
           box-shadow: none;
           flex-wrap: wrap;
           gap: clamp(0.5rem, 1.5vw, 0.75rem);
           position: relative;
           top: auto;
           z-index: auto;
       }


       /* System2 Top Picks Container & Filters Styling */
       #system2 {
           font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
           /* background: var(--bg-dark); */
           color: var(--text-light);
           line-height: 1.5;
       }

       #system2 * {
           box-sizing: border-box;
       }

       #system2 .filters-mobile {
           display: flex;
           flex-wrap: wrap;
           gap: 0.75rem;
           padding: 1rem;
           background: var(--bg-medium);
           border-radius: var(--border-radius);
           margin-bottom: 1rem;
           align-items: center;
       }

       #system2 .filter-item {
           display: flex;
           flex-direction: column;
           gap: 0.3rem;
           flex: 1;
           min-width: 150px;
       }

       #system2 .filter-item label {
           font-size: 0.75rem;
           font-weight: 600;
           color: var(--text-muted);
           text-transform: uppercase;
           letter-spacing: 0.5px;
       }

       #system2 .filter-item select,
       #system2 .filter-item input {
           padding: 0.5rem;
           background: var(--bg-light);
           border: 1px solid var(--border-color);
           border-radius: 4px;
           color: var(--text-light);
           font-size: 0.85rem;
           transition: var(--transition);
       }

       #system2 .filter-item select:hover,
       #system2 .filter-item input:hover {
           border-color: var(--primary);
           box-shadow: 0 0 8px rgba(18, 110, 81, 0.1);
       }

       #system2 .filter-item select:focus,
       #system2 .filter-item input:focus {
           outline: none;
           border-color: var(--primary);
           background: var(--bg-elevated);
           box-shadow: 0 0 12px rgba(18, 110, 81, 0.2);
       }

       #system2 .range-inputs {
           display: flex;
           gap: 0.5rem;
           align-items: center;
       }

       #system2 .range-inputs input {
           flex: 1;
           min-width: 70px;
           padding: 0.4rem;
       }

       #system2 .range-inputs span {
           color: var(--text-muted);
           font-size: 0.8rem;
       }

       #system2 button {
           background: var(--primary);
           color: white;
           border: none;
           padding: 0.5rem 1rem;
           border-radius: 4px;
           cursor: pointer;
           font-weight: 500;
           font-size: 0.85rem;
           transition: var(--transition);
           display: flex;
           align-items: center;
           gap: 0.5rem;
       }

       #system2 button:hover {
           background: var(--primary-dark);
           transform: translateY(-2px);
           box-shadow: 0 4px 12px rgba(18, 110, 81, 0.3);
       }

       #system2 button:active {
           transform: translateY(0);
       }

       #system2 .search.filter-item {
           position: relative;
           flex: 0 1 auto;
           min-width: auto;
       }

       #system2 .search-inline-input {
           padding-left: 2rem !important;
       }

       #system2 .icon-fixed {
           position: absolute;
           left: 8px;
           top: 50%;
           transform: translateY(-50%);
           pointer-events: none;
       }

       #system2 .filter-summary-bar {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 0.75rem 1rem;
           background: rgba(255, 223, 27, 0.1);
           border: 1px solid var(--accent);
           border-radius: var(--border-radius);
           margin-bottom: 1rem;
           font-size: 0.85rem;
           color: var(--text-light);
       }

       #system2 #system2-live-counter {
           font-weight: 600;
           color: var(--accent);
       }

       #system2 #system2-live-counter.pulse {
           animation: pulse-count 1.5s ease-in-out infinite;
       }

       @keyframes pulse-count {

           0%,
           100% {
               opacity: 1;
           }

           50% {
               opacity: 0.6;
           }
       }

       #system2 .content-card {
           background: var(--bg-medium);
           padding: 1.5rem;
           border-radius: var(--border-radius);
           margin-bottom: 1rem;
           box-shadow: var(--box-shadow);
       }

       #system2 .content-text {
           color: var(--text-muted);
           font-size: 0.9rem;
           line-height: 1.6;
       }

       #system2 .center-margin-md {
           text-align: center;
           margin: 1rem 0;
       }

       #system2 .btn-preview {
           background: linear-gradient(135deg, var(--accent), #dab800);
           color: var(--bg-dark);
           padding: 0.75rem 1.5rem;
           border-radius: 6px;
           font-weight: 600;
           border: none;
           cursor: pointer;
           transition: var(--transition);
       }

       #system2 .btn-preview:hover {
           transform: scale(1.05);
           box-shadow: 0 6px 16px rgba(255, 223, 27, 0.3);
       }

       #system2 .stats {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
           gap: 1rem;
           margin-bottom: 2rem;
       }

       #system2 .stat-card {
           background: var(--bg-medium);
           padding: 0.6rem;
           border-radius: var(--border-radius);
           box-shadow: var(--box-shadow);
           cursor: pointer;
           transition: var(--transition);
           border-top: 3px solid var(--primary);
           position: relative;
           text-align: center;
       }

       #system2 .stat-card:hover {
           transform: translateY(-5px);
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
       }

       #system2 .stat-card::after {
           content: "ℹ️";
           position: absolute;
           top: 8px;
           right: 8px;
           opacity: 0;
           transition: opacity 0.2s;
           font-size: 0.8rem;
       }

       #system2 .stat-card:hover::after {
           opacity: 1;
       }

       #system2 .stat-card:active {
           transform: scale(0.98);
           transition: transform 0.1s;
       }

       #system2 .stat-title {
           font-size: 0.7rem;
           color: var(--text-muted);
           margin-bottom: 0.25rem;
           font-weight: 500;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
       }

       #system2 .stat-value {
           font-size: 1rem;
           font-weight: 700;
           color: var(--accent);
       }

       #system2 .stat-hint {
           font-size: 0.7rem;
           color: var(--text-muted);
           margin-top: 0.5rem;
       }

       @media (max-width: 768px) {
           #system2 .filters-mobile {
               flex-direction: column;
           }

           #system2 .filter-item {
               width: 100%;
           }

           #system2 .stats {
               grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
           }
       }


       /* System2 Prediction Cards Styling */
       #system2-predictions-container {
           display: grid;
           grid-template-columns: 1fr;
           gap: 1rem;
           animation: fadeIn 0.3s ease-in;
       }

       .pred-no-predictions {
           text-align: center;
           padding: 2rem;
           color: var(--text-muted);
           font-size: 0.95rem;
           background: var(--bg-medium);
           border-radius: var(--border-radius);
       }

       .pred-error {
           text-align: center;
           padding: 1.5rem;
           color: var(--loss);
           font-size: 0.9rem;
           background: rgba(244, 67, 54, 0.1);
           border-radius: var(--border-radius);
           border-left: 3px solid var(--loss);
       }

       .pred-prediction-card {
           background-color: var(--bg-medium);
           border-radius: var(--border-radius);
           box-shadow: var(--box-shadow);
           overflow: hidden;
           transition: var(--transition);
           border-left: 3px solid var(--primary);
           cursor: pointer;
           position: relative;
           overflow: hidden;
       }

       .pred-prediction-card:hover {
           transform: translateY(-4px);
           box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25);
           background-color: var(--bg-light);
       }

       .pred-prediction-card:active {
           transform: translateY(0);
       }

       .pred-prediction-card::before {
           content: "Click for details";
           position: absolute;
           bottom: 10px;
           right: 10px;
           font-size: 0.7rem;
           color: var(--text-muted);
           opacity: 0;
           transition: opacity 0.3s;
       }

       .pred-prediction-card:hover::before {
           opacity: 1;
       }

       .pred-prediction-card.win {
           border-left-color: var(--win);
       }

       .pred-prediction-card.loss {
           border-left-color: var(--loss);
       }

       .pred-date {
           background-color: var(--primary);
           color: var(--text-light);
           padding: 0.5rem 0.8rem;
           font-weight: 600;
           font-size: 0.9rem;
           text-align: center;
           cursor: default;
           user-select: none;
           pointer-events: none;
           opacity: 0.9;
       }

       .pred-match {
           padding: 0.5rem;
       }

       .pred-match:last-of-type {
           border-bottom: none;
       }

       .pred-team {
           display: block;
           font-weight: 600;
           margin-bottom: 0.5rem;
           color: var(--text-light);
           font-size: 0.95rem;
       }

       .pred-league,
       .pred-prediction {
           display: inline-block;
           font-size: 0.75rem;
           padding: 0.2rem 0.5rem;
           border-radius: 1rem;
           font-weight: 500;
       }

       .pred-league {
           background-color: var(--bg-light);
           color: var(--text-muted);
           margin-right: 0.5rem;
       }

       .pred-prediction {
           background-color: var(--accent);
           color: var(--bg-dark);
       }

       .pred-confidence,
       .pred-odds,
       .pred-score,
       .pred-result {
           font-size: 0.8rem;
           color: var(--text-muted);
       }

       .pred-score {
           font-weight: 600;
           color: var(--text-light);
       }

       .pred-result {
           font-weight: 600;
       }

       .pred-meta-row {
           display: flex;
           gap: 1rem;
           font-size: 0.8rem;
           color: var(--text-muted);
           margin-top: 0.4rem;
       }

       .pred-score-row {
           margin-top: 0.6rem;
           padding-top: 0.6rem;
           border-top: 1px solid var(--border-color);
       }

       .pred-result-win {
           color: var(--win);
       }

       .pred-result-loss {
           color: var(--loss);
       }

       .pred-bet-info {
           background-color: var(--bg-dark);
           padding: 0.75rem;
           display: flex;
           flex-wrap: wrap;
           gap: 0.75rem;
           justify-content: space-between;
           align-items: center;
       }

       .pred-bet-type,
       .pred-bet-odds,
       .pred-bet-result,
       .pred-bet-profit {
           font-size: 0.85rem;
           font-weight: 500;
           color: var(--text-muted);
       }

       .pred-bet-profit {
           font-weight: 600;
           margin-left: auto;
       }

       .pred-profit-positive {
           color: var(--win);
       }

       .pred-profit-negative {
           color: var(--loss);
       }

       .pred-profit-pending {
           color: var(--text-muted);
       }

       .filter-match {
           animation: pulse-highlight 0.5s ease-out;
       }

       @keyframes pulse-highlight {
           0% {
               background-color: rgba(255, 223, 27, 0.2);
           }

           100% {
               background-color: transparent;
           }
       }

       @keyframes fadeIn {
           from {
               opacity: 0;
           }

           to {
               opacity: 1;
           }
       }

       @media (max-width: 768px) {
           #system2-predictions-container {
               grid-template-columns: 1fr;
           }

           .pred-bet-info {
               flex-direction: column;
               align-items: flex-start;
           }

           .pred-bet-profit {
               margin-left: 0;
               width: 100%;
           }
       }


       /* Modern Sports Score UI Styling for Expert Picks */
       .inplay-scores-container {
           background-color: var(--bg-dark);
           border-radius: 8px;
           overflow: hidden;
       }

       .inplay-month-header {
           background-color: var(--bg-medium);
           padding: 12px 16px;
           display: flex;
           align-items: center;
           border-bottom: 1px solid var(--border-color);
           margin-top: 10px;
       }

       .inplay-month-header:first-child {
           margin-top: 0;
       }

       .inplay-month-icon {
           width: 24px;
           height: 24px;
           margin-right: 12px;
           background: var(--primary);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 14px;
       }

       .inplay-month-info {
           flex-grow: 1;
       }

       .inplay-month-name {
           font-weight: bold;
           font-size: 15px;
           color: var(--text-light);
           display: block;
       }

       .inplay-month-subtitle {
           font-size: 11px;
           color: var(--text-muted);
           text-transform: uppercase;
           margin-top: 2px;
       }

       .inplay-match-row {
           display: flex;
           align-items: center;
           gap: 8px;
           padding: 14px 16px;
           border-bottom: 1px solid var(--border-color);
           min-height: 70px;
           background-color: var(--bg-dark);
           transition: background-color 0.2s;
       }

       .inplay-match-row:hover {
           background-color: var(--bg-light);
       }

       .inplay-star-icon {
           color: var(--text-muted);
           margin-right: 0;
           font-size: 18px;
           cursor: pointer;
           flex: 0 0 14px;
           width: 14px;
           text-align: center;
       }

       .inplay-teams {
           flex: 1 1 auto;
           min-width: 0;
           display: flex;
           flex-direction: column;
           gap: 6px;
       }

       .inplay-team {
           display: flex;
           align-items: center;
           min-width: 0;
           font-size: 14px;
           color: var(--text-light);
       }

       .inplay-team-name {
           min-width: 0;
           flex: 1 1 auto;
           overflow: visible;
           text-overflow: clip;
           white-space: normal;
           word-break: break-word;
           line-height: 1.2;
       }

       .inplay-team-logo {
           width: 20px;
           height: 20px;
           margin-right: 10px;
           background: var(--primary);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 10px;
           font-weight: bold;
           color: var(--on-primary);
       }

       .inplay-match-details {
           display: flex;
           align-items: center;
           gap: 10px;
           flex: 0 0 auto;
       }

       .inplay-date {
           font-size: 12px;
           color: var(--text-muted);
           min-width: 52px;
           text-align: center;
       }

       .inplay-odds {
           font-size: 13px;
           color: var(--accent);
           font-weight: 600;
           min-width: 34px;
           text-align: center;
       }

       .inplay-scores {
           display: flex;
           flex-direction: column;
           gap: 4px;
           font-weight: bold;
           font-size: 15px;
           color: var(--text-light);
           text-align: center;
           min-width: 24px;
       }

       .inplay-status-box {
           width: 24px;
           height: 24px;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 4px;
           font-size: 12px;
           font-weight: bold;
           color: var(--text-light);
       }

       .inplay-status-box.win {
           background-color: var(--win);
       }

       .inplay-status-box.loss {
           background-color: var(--loss);
       }

       .inplay-status-box.pending {
           background-color: var(--pending);
       }

       .inplay-summary-row {
           background-color: var(--bg-light);
           padding: 12px 16px;
           display: flex;
           justify-content: space-around;
           align-items: center;
           border-bottom: 2px solid var(--border-color);
           margin-bottom: 5px;
       }

       .inplay-summary-item {
           text-align: center;
       }

       .inplay-summary-label {
           font-size: 11px;
           color: var(--text-muted);
           text-transform: uppercase;
           margin-bottom: 4px;
       }

       .inplay-summary-value {
           font-size: 16px;
           font-weight: bold;
           color: var(--accent);
       }

       .inplay-h2h-badge {
           background-color: var(--bg-medium);
           padding: 2px 8px;
           border-radius: 12px;
           font-size: 11px;
           color: var(--text-muted);
           margin-left: 8px;
       }

       @media (max-width: 768px) {
           .inplay-match-row {
               padding: 9px 10px;
               min-height: 56px;
               gap: 6px;
           }

           .inplay-team {
               font-size: 12px;
           }

           .inplay-team-logo {
               width: 18px;
               height: 18px;
               margin-right: 8px;
               font-size: 9px;
           }

           .inplay-star-icon {
               flex-basis: 10px;
               width: 10px;
               font-size: 14px;
           }

           .inplay-match-details {
               gap: 7px;
           }

           .inplay-date {
               min-width: 44px;
               font-size: 10px;
           }

           .inplay-odds {
               min-width: 30px;
               font-size: 11px;
           }

           .inplay-scores {
               min-width: 22px;
               font-size: 12px;
           }

           .inplay-status-box {
               width: 20px;
               height: 20px;
               font-size: 10px;
           }

           .inplay-h2h-badge {
               display: none;
           }
       }

       @media (max-width: 420px) {
           .inplay-team-name {
               font-size: 11px;
           }

           .inplay-date {
               min-width: 40px;
           }

           .inplay-odds {
               min-width: 28px;
           }
       }


       /* Modern Sports Score UI Styling for Elite Picks */
       .inplay2-scores-container {
           background-color: var(--bg-dark);
           border-radius: 8px;
           overflow: hidden;
       }

       .inplay2-month-header {
           background-color: var(--bg-medium);
           padding: 12px 16px;
           display: flex;
           align-items: center;
           border-bottom: 1px solid var(--border-color);
           margin-top: 10px;
       }

       .inplay2-month-header:first-child {
           margin-top: 0;
       }

       .inplay2-month-icon {
           width: 24px;
           height: 24px;
           margin-right: 12px;
           background: var(--primary);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 14px;
       }

       .inplay2-month-info {
           flex-grow: 1;
       }

       .inplay2-month-name {
           font-weight: bold;
           font-size: 15px;
           color: var(--text-light);
           display: block;
       }

       .inplay2-month-subtitle {
           font-size: 11px;
           color: var(--text-muted);
           text-transform: uppercase;
           margin-top: 2px;
       }

       .inplay2-match-row {
           display: flex;
           align-items: center;
           gap: 8px;
           padding: 14px 16px;
           border-bottom: 1px solid var(--border-color);
           min-height: 70px;
           background-color: var(--bg-dark);
           transition: background-color 0.2s;
       }

       .inplay2-match-row:hover {
           background-color: var(--bg-light);
       }

       .inplay2-star-icon {
           color: var(--text-muted);
           margin-right: 0;
           font-size: 18px;
           cursor: pointer;
           flex: 0 0 14px;
           width: 14px;
           text-align: center;
       }

       .inplay2-teams {
           flex: 1 1 auto;
           min-width: 0;
           display: flex;
           flex-direction: column;
           gap: 6px;
       }

       .inplay2-team {
           display: flex;
           align-items: center;
           min-width: 0;
           font-size: 14px;
           color: var(--text-light);
       }

       .inplay2-team-name {
           min-width: 0;
           flex: 1 1 auto;
           overflow: visible;
           text-overflow: clip;
           white-space: normal;
           word-break: break-word;
           line-height: 1.2;
       }

       .inplay2-team-logo {
           width: 20px;
           height: 20px;
           margin-right: 10px;
           background: var(--primary);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 10px;
           font-weight: bold;
           color: var(--on-primary);
       }

       .inplay2-match-details {
           display: flex;
           align-items: center;
           gap: 10px;
           flex: 0 0 auto;
       }

       .inplay2-date {
           font-size: 12px;
           color: var(--text-muted);
           min-width: 52px;
           text-align: center;
       }

       .inplay2-odds {
           font-size: 13px;
           color: var(--accent);
           font-weight: 600;
           min-width: 34px;
           text-align: center;
       }

       .inplay2-scores {
           display: flex;
           flex-direction: column;
           gap: 4px;
           font-weight: bold;
           font-size: 15px;
           color: var(--text-light);
           text-align: center;
           min-width: 24px;
       }

       .inplay2-status-box {
           width: 24px;
           height: 24px;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 4px;
           font-size: 12px;
           font-weight: bold;
           color: var(--text-light);
       }

       .inplay2-status-box.win {
           background-color: var(--win);
       }

       .inplay2-status-box.loss {
           background-color: var(--loss);
       }

       .inplay2-status-box.pending {
           background-color: var(--pending);
       }

       .inplay2-summary-row {
           background-color: var(--bg-light);
           padding: 12px 16px;
           display: flex;
           justify-content: space-around;
           align-items: center;
           border-bottom: 2px solid var(--border-color);
           margin-bottom: 5px;
       }

       .inplay2-summary-item {
           text-align: center;
       }

       .inplay2-summary-label {
           font-size: 11px;
           color: var(--text-muted);
           text-transform: uppercase;
           margin-bottom: 4px;
       }

       .inplay2-summary-value {
           font-size: 16px;
           font-weight: bold;
           color: var(--accent);
       }

       .inplay2-h2h-badge {
           background-color: var(--bg-medium);
           padding: 2px 8px;
           border-radius: 12px;
           font-size: 11px;
           color: var(--text-muted);
           margin-left: 8px;
       }

       @media (max-width: 768px) {
           .inplay2-match-row {
               padding: 9px 10px;
               min-height: 56px;
               gap: 6px;
           }

           .inplay2-team {
               font-size: 12px;
           }

           .inplay2-team-logo {
               width: 18px;
               height: 18px;
               margin-right: 8px;
               font-size: 9px;
           }

           .inplay2-star-icon {
               flex-basis: 10px;
               width: 10px;
               font-size: 14px;
           }

           .inplay2-match-details {
               gap: 7px;
           }

           .inplay2-date {
               min-width: 44px;
               font-size: 10px;
           }

           .inplay2-odds {
               min-width: 30px;
               font-size: 11px;
           }

           .inplay2-scores {
               min-width: 22px;
               font-size: 12px;
           }

           .inplay2-status-box {
               width: 20px;
               height: 20px;
               font-size: 10px;
           }

           .inplay2-h2h-badge {
               display: none;
           }
       }

       @media (max-width: 420px) {
           .inplay2-team-name {
               font-size: 11px;
           }

           .inplay2-date {
               min-width: 40px;
           }

           .inplay2-odds {
               min-width: 28px;
           }
       }


       /* Trial Modal Styling */
       #trialModal {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.7);
           backdrop-filter: blur(4px);
           align-items: center;
           justify-content: center;
           z-index: 10000;
       }

       #trialModal.open {
           display: flex;
       }

       .modal-content {
           background: var(--bg-medium);
           border-radius: var(--radius-xl);
           padding: 2rem;
           max-width: 420px;
           width: 90%;
           box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
           border: 1px solid var(--border-color);
           position: relative;
           animation: slideUp 0.3s ease;
       }

       @keyframes slideUp {
           from {
               opacity: 0;
               transform: translateY(30px);
           }

           to {
               opacity: 1;
               transform: translateY(0);
           }
       }

       .modal-close-btn {
           position: absolute;
           top: 1rem;
           right: 1rem;
           background: none;
           border: none;
           font-size: 1.8rem;
           cursor: pointer;
           color: var(--text-muted);
           padding: 0;
           width: 2rem;
           height: 2rem;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 50%;
           transition: all 0.2s;
       }

       .modal-close-btn:hover {
           background: var(--bg-light);
           color: var(--text-light);
       }

       .modal-header {
           margin-bottom: 2rem;
           text-align: center;
       }

       .modal-header h2 {
           margin: 0 0 0.5rem 0;
           font-size: 1.5rem;
           color: var(--text-light);
       }

       .modal-header p {
           margin: 0;
           font-size: 0.95rem;
           color: var(--text-muted);
       }

       .trial-offer-card {
           background: var(--bg-light);
           border: 2px solid var(--accent);
           border-radius: var(--radius-lg);
           padding: 1.5rem;
           text-align: center;
           margin-bottom: 1.5rem;
       }

       .trial-offer-card h3 {
           margin: 0 0 1rem 0;
           font-size: 1.1rem;
           color: var(--text-light);
       }

       .trial-price {
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 0.5rem;
           margin-bottom: 0.5rem;
       }

       .original-price {
           text-decoration: line-through;
           color: var(--text-muted);
           font-size: 0.9rem;
       }

       .trial-discount {
           background: var(--loss);
           color: white;
           padding: 0.25rem 0.75rem;
           border-radius: 20px;
           font-size: 0.8rem;
           font-weight: 700;
       }

       .trial-price-main {
           font-size: 2rem;
           font-weight: 800;
           color: var(--accent);
           margin: 0.5rem 0;
       }

       .trial-duration {
           margin: 0.5rem 0 0 0;
           color: var(--text-muted);
           font-size: 0.9rem;
       }

       .trial-features {
           margin-bottom: 1.5rem;
       }

       .trial-features h4 {
           margin: 0 0 1rem 0;
           font-size: 0.95rem;
           color: var(--text-light);
       }

       .trial-features ul {
           margin: 0;
           padding: 0;
           list-style: none;
       }

       .trial-features li {
           padding: 0.5rem 0;
           color: var(--text-light);
           font-size: 0.9rem;
       }

       .trial-payment-options {
           margin-bottom: 1.5rem;
       }

       .payment-label {
           margin: 0 0 1rem 0;
           font-size: 0.9rem;
           font-weight: 600;
           color: var(--text-light);
       }

       .payment-buttons {
           display: flex;
           flex-direction: column;
           gap: 0.75rem;
       }

       .payment-btn {
           padding: 0.75rem 1rem;
           border: 1px solid var(--border-color);
           border-radius: var(--radius-md);
           background: var(--bg-light);
           color: var(--text-light);
           font-weight: 600;
           font-size: 0.9rem;
           cursor: pointer;
           transition: all 0.2s;
           text-decoration: none;
           display: inline-block;
           text-align: center;
       }

       .payment-btn:hover {
           background: var(--bg-dark);
           border-color: var(--accent);
           transform: translateY(-2px);
           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
       }

       .payment-btn-play {
           background: linear-gradient(135deg, #3b5bdb 0%, #2d44a7 100%);
           color: white;
           border: none;
       }

       .payment-btn-mpesa {
           background: linear-gradient(135deg, #31d442 0%, #22a833 100%);
           color: white;
           border: none;
       }

       .payment-btn-gumroad {
           background: linear-gradient(135deg, #ff4a77 0%, #d63055 100%);
           color: white;
           border: none;
       }

       .trial-terms {
           text-align: center;
           margin-bottom: 1.5rem;
           padding: 1rem;
           background: rgba(255, 223, 27, 0.1);
           border-radius: var(--radius-md);
       }

       .trial-terms p {
           margin: 0;
           font-size: 0.8rem;
           color: var(--text-muted);
           line-height: 1.4;
       }

       .trial-terms a {
           color: var(--accent);
           text-decoration: none;
           font-weight: 600;
       }

       .modal-footer {
           display: flex;
           justify-content: center;
           gap: 1rem;
       }

       .btn-secondary {
           padding: 0.75rem 2rem;
           border: 1px solid var(--border-color);
           border-radius: 40px;
           background: transparent;
           color: var(--text-light);
           font-weight: 600;
           cursor: pointer;
           transition: all 0.2s;
       }

       .btn-secondary:hover {
           background: var(--bg-light);
           border-color: var(--text-light);
       }

       @media (max-width: 480px) {
           .modal-content {
               padding: 1.5rem;
               max-width: 100%;
               margin: 1rem;
           }

           .trial-price-main {
               font-size: 1.5rem;
           }

           .payment-buttons {
               flex-direction: column;
           }

           .payment-btn {
               width: 100%;
           }
       }


       /* =====================================================================
           BET365-INSPIRED THEME OVERRIDES
           Visual restyle only — no markup/structure changes, no JS touched.
           Reuses the existing CSS variables/selectors so it cascades cleanly
           on top of everything above. Keeps every existing breakpoint intact.
        ===================================================================== */

       :root {
           /* Darker, near-black bet365-style surfaces */
           --bg-dark: #0e1011;
           --bg-medium: #181b1e;
           --bg-light: #20242a;
           --bg-elevated: #1c2024;
           --bg-card: #1a1e22;
           --border-color: #2a2f35;
           --box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
       }

       [data-theme="light"] {
           /* Keep light theme as-is, just nudge borders for the new card style */
           --border-color: #d7dee6;
       }

       body {
           background-color: var(--bg-dark);
           background-image: linear-gradient(180deg, #11151a 0%, var(--bg-dark) 280px);
       }

       /* ---------- Header (bet365 top bar) ---------- */
       header {
           background-color: var(--bg-medium);
           background-image: linear-gradient(180deg, #163b30 0%, var(--bg-medium) 100%);
           border-bottom: 2px solid var(--primary);
           border-radius: 0.5rem;
           box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
       }

       .brand-main-text {
           color: #ffffff;
           letter-spacing: 0.2px;
       }

       .brand-sub-text {
           color: var(--accent);
           font-weight: 600;
       }

       /* .countdown-link,
        .nav-toggle,
        .pred-theme-toggle,
        .pred-nav-toggle {
            background-color: var(--bg-dark);
            border: 1px solid var(--border-color);
        } */

       .countdown-link:hover {
           background-color: var(--primary);
           border-color: var(--primary);
       }

       /* ---------- Sidebar / Nav (the .tab-header + .tab-button combo,
           which already becomes a fixed left sidebar at >=1024px) ---------- */
       .tab-container {
           background: var(--bg-elevated);
           border: 1px solid var(--border-color);
       }

       .tab-header {
           background-color: var(--bg-medium);
       }

       .tab-button {
           color: #c7ccd1;
           font-weight: 700;
           border-left: 3px solid transparent;
       }

       .tab-button:hover {
           background: var(--bg-light);
           color: #ffffff;
       }

       .tab-button.active {
           background: linear-gradient(90deg, rgba(18, 110, 81, 0.35), rgba(18, 110, 81, 0.08));
           color: #ffffff;
           border-left-color: var(--accent);
           box-shadow: none;
       }

       .tab-button.active::before {
           /* Replace the bottom underline with a left accent bar to read like
               a sidebar "selected" state, matching the bet365 nav language */
           top: 0;
           bottom: 0;
           left: 0;
           right: auto;
           width: 3px;
           height: auto;
           background: var(--accent);
       }

       .tab-subtitle {
           color: #8a9099;
       }

       @media (min-width: 1024px) {
           .tab-header {
               background-color: var(--bg-medium);
               border-right: 1px solid var(--border-color);
           }

           .tab-button.active {
               border-radius: 0 8px 8px 0;
           }
       }

       .scroll-indicator {
           background: rgba(0, 0, 0, 0.45);
       }

       /* ---------- Main area cards (bet365 "Bet Boost" card language) ---------- */
       .pred-stat-card,
       .stat-card {
           background-color: var(--bg-card);
           border: 1px solid var(--border-color);
           border-top: 3px solid var(--primary);
           border-radius: var(--radius-soft);
       }

       .pred-stat-card:hover,
       .stat-card:hover {
           border-top-color: var(--accent);
           box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
       }

       .pred-stat-value {
           color: var(--accent);
           font-weight: 800;
       }

       .pred-prediction-card {
           background-color: var(--bg-card);
           border: 1px solid var(--border-color);
           border-left: 3px solid var(--primary);
           border-radius: var(--radius-soft);
       }

       .pred-prediction-card:hover {
           background-color: var(--bg-light);
           border-left-color: var(--accent);
       }

       .pred-prediction-card.win {
           border-left-color: var(--win);
       }

       .pred-prediction-card.loss {
           border-left-color: var(--loss);
       }

       .pred-date {
           background-color: var(--bg-light);
           color: var(--accent);
           border-bottom: 1px solid var(--border-color);
       }

       .pred-odds,
       .pred-bet-odds {
           color: var(--accent);
           font-weight: 700;
       }

       /* ---------- Filters bar — match bet365's flat dark search/filter row ---------- */
       .pred-filter-item select,
       .pred-filter-item input[type="text"],
       .pred-filter-item input[type="number"] {
           background-color: var(--bg-card);
           border: 1px solid var(--border-color);
           color: var(--text-light);
       }

       .pred-filter-item select:focus,
       .pred-filter-item input[type="text"]:focus,
       .pred-filter-item input[type="number"]:focus {
           border-color: var(--primary);
           box-shadow: 0 0 0 2px rgba(18, 110, 81, 0.35);
       }

       /* ---------- Buttons — bet365 green/yellow pill language ---------- */
       .promo-cta,
       #pred-refresh-btn,
       .trial-submit,
       .payment-btn {
           border-radius: 999px;
       }

       .tab-button.promo-highlight {
           background: var(--accent);
           color: var(--on-accent);
           border-left-color: transparent;
       }

       .tab-button.promo-highlight:hover {
           background: var(--accent-dark);
       }

       /* ---------- Responsive polish (additive only, doesn't remove anything) ---------- */
       @media (max-width: 1023px) {
           header {
               border-radius: 0.5rem;
           }

           .tab-nav {
               gap: 2px;
           }
       }

       @media (max-width: 480px) {
           .brand-sub-text {
               display: none;
           }

           .pred-stats {
               grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
           }
       }

       /* =====================================================================
           SIMPLIFIED / FULL-WIDTH LAYOUT PASS
           - .container now fills 100% of the viewport instead of a fixed
             1200px max-width, with small responsive side padding only.
           - Header, sidebar, and card surfaces lose their box-shadow/border
             treatment for a flatter, more minimal look.
           - Trims extra margin/padding that's no longer needed once the
             shadow/border separation is gone.
        ===================================================================== */

       .container {
           max-width: 100%;
           width: 100%;
           margin: 0;
           /* padding: 0 0.75rem; */
           box-sizing: border-box;
       }

       /* @media (min-width: 768px) {
            .container {
                padding: 0 1rem;
            }
        } */

       header,
       .container>header {
           box-shadow: none;
           border: none;
           margin-bottom: 0.5rem;
           /* padding: 0.5rem 0.75rem; */
       }

       .tab-container {
           border: none;
           box-shadow: none;
       }

       .tab-header {
           box-shadow: none;
       }

       @media (min-width: 1024px) {
           .tab-header {
               border-right: none;
           }

           .tab-container {
               border-left: none;
           }
       }

       .pred-stat-card,
       .stat-card,
       .pred-prediction-card {
           border: none;
           box-shadow: none;
       }

       .pred-stat-card:hover,
       .stat-card:hover,
       .pred-prediction-card:hover {
           box-shadow: none;
       }

       .pred-filter-item select,
       .pred-filter-item input[type="text"],
       .pred-filter-item input[type="number"] {
           border: none;
       }

       .pred-filter-item select:focus,
       .pred-filter-item input[type="text"]:focus,
       .pred-filter-item input[type="number"]:focus {
           box-shadow: none;
           outline: 2px solid var(--primary);
           outline-offset: -2px;
       }

       /* =====================================================================
           BET365-INSPIRED THEME — COMPREHENSIVE DESIGN OVERRIDES
           Goals:
             1. True full-bleed layout (no side gaps, 100% width)
             2. Sidebar toggle hidden on all viewports
             3. Clean, minimal surfaces — no decorative box-shadow / borders
             4. Cards, buttons, tabs, header all restyled to match reference
        ===================================================================== */

       /* ── Palette tweaks ───────────────────────────────────────────── */
       :root {
           --bg-dark: #0d1117;
           --bg-medium: #161b22;
           --bg-light: #21262d;
           --bg-elevated: #1c2128;
           --bg-card: #161b22;
           --border-color: #30363d;
           --text-light: #e6edf3;
           --text-muted: #8b949e;
           --box-shadow: none;
       }

       /* ── Full-bleed reset ─────────────────────────────────────────── */
       html,
       body {
           margin: 0;
           padding: 0;
           border: none;
           width: 100%;
           overflow-x: hidden;
       }

       .container {
           width: 100%;
           max-width: 100%;
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }

       @media (min-width: 768px) {
           .container {
               padding: 0;
           }
       }

       /* ── Hide sidebar toggles everywhere ─────────────────────────── */
       #desktop-sidebar-toggle,
       .desktop-sidebar-toggle,
       #mobile-nav-toggle,
       .pred-nav-toggle {
           display: none !important;
       }

       /* ── #platinum tab panel ─────────────────────────────────────── */

       #platinum {
           background: var(--bg-dark);
           color: var(--text-light);
           font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
           font-size: 12px;
           line-height: 1.6;
       }

       /* Centred inner wrapper */
       #platinum>div {
           max-width: 1140px;
           margin: 0 auto;
           padding: 16px 12px;
           box-sizing: border-box;
       }

       /* ── Stats image card ──────────────────────────────────────── */
       #platinum>div>div:first-child {
           background: var(--bg-elevated);
           border: 1px solid var(--border-color);
           border-radius: 10px;
           padding: 12px;
           margin-bottom: 16px;
           overflow: hidden;
       }

       #platinum>div>div:first-child img {
           width: 100%;
           height: auto;
           border-radius: 8px;
           display: block;
       }

       /* ── Header block ──────────────────────────────────────────── */
       #platinum>div>div:nth-child(2) {
           text-align: center;
           margin-bottom: 20px;
       }

       /* "Platinum • New" badge */
       #platinum>div>div:nth-child(2) span {
           display: inline-block;
           background: var(--accent);
           color: var(--on-accent);
           font-size: 9px;
           font-weight: 800;
           padding: 3px 9px;
           border-radius: 20px;
           text-transform: uppercase;
           letter-spacing: 0.8px;
           margin-bottom: 8px;
       }

       /* Title */
       #platinum>div>div:nth-child(2) h2 {
           font-size: 15px;
           font-weight: 600;
           color: var(--text-light);
           margin: 0 0 10px;
           line-height: 1.4;
           letter-spacing: -0.2px;
       }

       /* Accent divider */
       #platinum>div>div:nth-child(2)>div {
           width: 48px;
           height: 2px;
           background: var(--accent);
           border-radius: 2px;
           margin: 0 auto;
       }

       /* ── Content blocks wrapper ────────────────────────────────── */
       #platinum>div>div:nth-child(3) {
           display: flex;
           flex-direction: column;
           gap: 10px;
       }

       /* All child blocks get base card style */
       #platinum>div>div:nth-child(3)>div {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           border-radius: 8px;
           padding: 12px 14px;
           box-sizing: border-box;
       }

       /* ── Block 1: Live alert (left-border accent) ──────────────── */
       #platinum>div>div:nth-child(3)>div:nth-child(1) {
           background: var(--bg-elevated);
           border: none;
           border-left: 3px solid var(--accent);
           border-radius: 0 8px 8px 0;
       }

       #platinum>div>div:nth-child(3)>div:nth-child(1)>p:nth-child(1) {
           font-size: 9px;
           font-weight: 700;
           color: var(--accent);
           text-transform: uppercase;
           letter-spacing: 1.2px;
           margin: 0 0 5px;
       }

       #platinum>div>div:nth-child(3)>div:nth-child(1)>p:nth-child(2) {
           font-size: 12px;
           font-weight: 600;
           color: var(--text-light);
           margin: 0 0 4px;
       }

       #platinum>div>div:nth-child(3)>div:nth-child(1)>p:nth-child(3) {
           font-size: 10px;
           color: var(--text-dim, var(--text-muted));
           font-style: italic;
           margin: 0;
       }

       /* ── Block 2: Launch info pills ────────────────────────────── */
       #platinum>div>div:nth-child(3)>div:nth-child(2)>div {
           display: flex;
           flex-wrap: wrap;
           gap: 6px;
           background: none;
           border: none;
           padding: 0;
       }

       #platinum>div>div:nth-child(3)>div:nth-child(2) span {
           background: rgba(255, 223, 27, 0.15);
           color: var(--accent);
           font-size: 10px;
           font-weight: 600;
           padding: 3px 10px;
           border-radius: 20px;
       }

       #platinum>div>div:nth-child(3)>div:nth-child(2) span strong {
           color: var(--text-light);
           font-weight: 700;
       }

       /* ── Block 3 & 4 subheadings ───────────────────────────────── */
       #platinum>div>div:nth-child(3)>div:nth-child(3) h3,
       #platinum>div>div:nth-child(3)>div:nth-child(4) h3,
       #platinum>div>div:nth-child(3)>div:nth-child(5) h3 {
           display: flex;
           align-items: center;
           gap: 6px;
           font-size: 10.5px;
           font-weight: 700;
           color: var(--accent);
           text-transform: uppercase;
           letter-spacing: 0.7px;
           margin: 0 0 8px;
       }

       /* Dot before subheading */
       #platinum>div>div:nth-child(3)>div:nth-child(3) h3 span,
       #platinum>div>div:nth-child(3)>div:nth-child(4) h3 span,
       #platinum>div>div:nth-child(3)>div:nth-child(5) h3 span {
           display: inline-block;
           width: 5px;
           height: 5px;
           background: var(--accent);
           border-radius: 50%;
           flex-shrink: 0;
       }

       /* Body text */
       #platinum>div>div:nth-child(3)>div:nth-child(3) p,
       #platinum>div>div:nth-child(3)>div:nth-child(4) p {
           color: var(--text-muted);
           font-size: 12px;
           margin: 0 0 5px;
       }

       /* ── Feature list ──────────────────────────────────────────── */
       #platinum ul {
           list-style: none;
           padding: 0;
           margin: 0;
           display: flex;
           flex-direction: column;
           gap: 7px;
       }

       #platinum ul li {
           display: flex;
           gap: 8px;
           color: var(--text-muted);
           font-size: 12px;
           line-height: 1.5;
       }

       #platinum ul li>span:first-child {
           color: var(--accent);
           font-size: 11px;
           flex-shrink: 0;
           margin-top: 1px;
       }

       #platinum ul li strong {
           color: var(--text-light);
           font-weight: 600;
       }

       /* ── Block 5: Reserve form card ────────────────────────────── */
       #platinum>div>div:nth-child(3)>div:nth-child(5) {
           background: linear-gradient(135deg,
                   rgba(255, 223, 27, 0.07) 0%,
                   rgba(255, 223, 27, 0.02) 100%);
           border-color: rgba(255, 223, 27, 0.2);
           border-radius: 10px;
           padding: 16px;
       }

       #platinum>div>div:nth-child(3)>div:nth-child(5)>p {
           color: var(--text-muted);
           font-size: 10px;
           margin: 0 0 12px;
       }

       /* Form labels */
       #platinum-form label {
           display: block;
           font-size: 9.5px;
           font-weight: 700;
           color: var(--accent);
           letter-spacing: 0.8px;
           text-transform: uppercase;
           margin-bottom: 5px;
       }

       /* Form field wrappers */
       #platinum-form>div {
           margin-bottom: 8px;
       }

       /* Inputs */
       #platinum-email,
       #platinum-sport {
           width: 100%;
           padding: 9px 12px;
           background: var(--bg-dark);
           border: 1px solid var(--border-color);
           border-radius: 8px;
           color: var(--text-light);
           font-size: 12px;
           font-family: inherit;
           outline: none;
           transition: border-color 0.15s;
           box-sizing: border-box;
       }

       #platinum-email::placeholder,
       #platinum-sport::placeholder {
           color: var(--text-dim, var(--text-muted));
           opacity: 0.5;
       }

       #platinum-email:focus,
       #platinum-sport:focus {
           border-color: var(--accent);
       }

       /* Reserve button */
       #platinum-form button {
           width: 100%;
           padding: 12px;
           margin-top: 4px;
           background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%);
           color: var(--on-accent);
           font-size: 13px;
           font-weight: 800;
           font-family: inherit;
           letter-spacing: 0.8px;
           text-transform: uppercase;
           border: none;
           border-radius: 8px;
           cursor: pointer;
           display: block;
           transition: opacity 0.15s;
       }

       #platinum-form button:hover {
           opacity: 0.88;
       }

       #platinum-form button:active {
           transform: scale(0.98);
       }

       /* Status text */
       #platinum-status {
           margin-top: 6px;
           font-size: 11px;
           text-align: center;
           min-height: 18px;
           color: var(--text-muted);
       }

       /* ── Success state ──────────────────────────────────────────── */
       #platinum-success {
           border-radius: 8px;
           padding: 16px;
           background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
           text-align: center;
           margin-top: 8px;
       }

       #platinum-success p {
           color: #fff;
           font-size: 12px;
           font-weight: 500;
           margin: 0;
           line-height: 1.6;
       }

       /* ── Footer disclaimer ──────────────────────────────────────── */
       #platinum>div>div:nth-child(3)>p {
           font-size: 10px;
           color: var(--text-muted);
           font-style: italic;
           text-align: center;
           margin: 0;
           padding: 4px 0;
       }

       /* ── Responsive ─────────────────────────────────────────────── */
       @media (max-width: 480px) {
           #platinum>div {
               padding: 12px 8px;
           }

           #platinum>div>div:nth-child(3)>div:nth-child(5) {
               padding: 12px;
           }

           #platinum>div>div:nth-child(2) h2 {
               font-size: 14px;
           }

           #platinum-form button {
               font-size: 12px;
               padding: 11px;
           }
       }

       /* ── Header ──────────────────────────────────────────────────── */
       header,
       .container>header {
           background: var(--bg-medium);
           border: none;
           border-bottom: 1px solid var(--border-color);
           box-shadow: none;
           border-radius: 0;
           margin: 0;
           padding: 0 1rem;
           height: 56px;
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 0.75rem;
           flex-wrap: nowrap;
       }

       /* Fixed header sits edge to edge */
       @media (min-width: 1024px) {
           .container>header {
               position: fixed !important;
               top: 0 !important;
               left: 0 !important;
               width: 100% !important;
               z-index: 1200 !important;
               margin-bottom: 0 !important;
           }
       }

       .brand-link {
           gap: 8px;
       }

       .brand-main-text {
           font-size: 0.95rem;
           font-weight: 800;
           color: var(--text-light);
           letter-spacing: -0.2px;
       }

       .brand-sub-text {
           color: var(--accent);
           font-weight: 500;
       }

       /* Login/join form in header — compact */
       .bac-inline-container {
           max-width: 340px;
       }

       .bac-inline-form {
           display: flex;
           gap: 4px;
       }

       .bac-inline-input {
           background: var(--bg-dark);
           border: 1px solid var(--border-color);
           color: var(--text-light);
           border-radius: 6px;
           padding: 5px 10px;
           font-size: 12px;
           outline: none;
           flex: 1;
           min-width: 0;
       }

       .bac-inline-input:focus {
           border-color: var(--primary);
       }

       .bac-inline-submit {
           background: var(--primary);
           color: #fff;
           border: none;
           border-radius: 6px;
           padding: 5px 12px;
           font-size: 12px;
           font-weight: 700;
           cursor: pointer;
           white-space: nowrap;
           transition: background 0.2s;
       }

       .bac-inline-submit:hover {
           background: var(--primary-dark);
       }

       .bac-inline-note {
           font-size: 10px;
           color: var(--text-muted);
           margin-top: 3px;
           display: flex;
           gap: 8px;
       }

       /* Theme toggle — minimal icon button */
       .pred-theme-toggle {
           background: none;
           border: none;
           color: var(--text-muted);
           font-size: 16px;
           cursor: pointer;
           padding: 4px;
           border-radius: 6px;
           transition: color 0.2s;
       }

       .pred-theme-toggle:hover {
           color: var(--text-light);
       }

       /* ── Sidebar (tab-header, fixed left on desktop) ─────────────── */
       .tab-container {
           width: 100%;
           max-width: 100%;
           margin: 0;
           background: var(--bg-dark);
           border: none;
           box-shadow: none;
           border-radius: 0;
           overflow: visible;
       }

       .tab-header {
           background: var(--bg-medium);
           box-shadow: none;
           border: none;
           padding: 0;
       }

       @media (min-width: 1024px) {
           .tab-container {
               max-width: calc(100% - var(--desktop-sidebar-width, 220px));
               margin-left: var(--desktop-sidebar-width, 220px);
               margin-right: 0;
               margin-top: var(--desktop-sidebar-top, 56px) !important;
               border-left: 1px solid var(--border-color);
               border-radius: 0;
               transition: margin-left 0.2s ease, max-width 0.2s ease;
           }

           footer {
               max-width: calc(100% - var(--desktop-sidebar-width, 220px));
               margin-left: var(--desktop-sidebar-width, 220px);
           }

           .tab-header {
               position: fixed;
               top: 56px;
               left: 0;
               width: var(--desktop-sidebar-width, 220px);
               height: calc(100vh - 56px);
               border-right: 1px solid var(--border-color);
               z-index: 1100;
               overflow: hidden;
               transition: width 0.2s ease;
           }
       }

       /* Sidebar nav items */
       .tab-scroll-container {
           overflow-x: hidden;
           overflow-y: auto;
           scrollbar-width: thin;
           scrollbar-color: var(--border-color) transparent;
       }

       .tab-nav {
           padding: 8px 0;
           gap: 2px;
       }

       @media (min-width: 1024px) {
           .tab-nav {
               flex-direction: column;
               padding: 8px 8px 16px;
               gap: 2px;
           }
       }

       .tab-button {
           background: none;
           border: none;
           color: var(--text-muted);
           font-size: 13px;
           font-weight: 600;
           padding: 10px 14px;
           cursor: pointer;
           transition: background 0.15s, color 0.15s;
           white-space: nowrap;
           position: relative;
           text-transform: none;
           letter-spacing: 0;
           border-radius: 6px;
       }

       .tab-button:hover {
           background: var(--bg-light);
           color: var(--text-light);
           transform: none;
       }

       .tab-button.active {
           background: var(--bg-light);
           color: var(--text-light);
           border-radius: 6px;
           box-shadow: none;
       }

       /* Accent left bar on active sidebar item */
       .tab-button.active::before {
           content: "";
           position: absolute;
           left: 0;
           top: 20%;
           bottom: 20%;
           right: auto;
           width: 3px;
           height: 60%;
           background: var(--accent);
           border-radius: 0 2px 2px 0;
       }

       .tab-subtitle {
           font-size: 11px;
           color: var(--text-muted);
           font-weight: 400;
           display: block;
           margin-top: 1px;
       }

       .tab-button.active .tab-subtitle {
           color: var(--accent);
       }

       .tab-button.promo-highlight {
           background: rgba(255, 223, 27, 0.12);
           color: var(--accent);
           border: 1px solid rgba(255, 223, 27, 0.25);
       }

       .tab-button.promo-highlight:hover {
           background: rgba(255, 223, 27, 0.22);
       }

       /* Horizontal scrollable nav on mobile */
       @media (max-width: 1023px) {
           .tab-button {
               padding: 10px 16px;
               font-size: 12px;
               border-radius: 4px;
           }

           .tab-button.active::before {
               top: auto;
               left: 10%;
               right: 10%;
               bottom: 0;
               width: 80%;
               height: 2px;
               border-radius: 2px 2px 0 0;
           }
       }

       /* Tab content area */
       .tab-content {
           padding: 16px;
           background: var(--bg-dark);
       }

       /* ── Stat cards ───────────────────────────────────────────────── */
       .stats {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
           gap: 8px;
           margin-bottom: 12px;
       }

       .stat-card {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           border-radius: 8px;
           padding: 12px 10px;
           text-align: center;
           cursor: pointer;
           position: relative;
           transition: background 0.15s, border-color 0.15s;
           box-shadow: none;
       }

       .stat-card:hover {
           background: var(--bg-light);
           border-color: var(--primary);
           transform: none;
           box-shadow: none;
       }

       .stat-card:hover::after {
           opacity: 0;
       }

       .stat-card:active {
           transform: scale(0.98);
       }

       .stat-title {
           font-size: 11px;
           font-weight: 600;
           color: var(--text-muted);
           text-transform: uppercase;
           letter-spacing: 0.5px;
           margin-bottom: 6px;
       }

       .stat-value {
           font-size: 1.35rem;
           font-weight: 800;
           color: var(--accent);
           line-height: 1;
       }

       .stat-hint {
           font-size: 10px;
           color: var(--text-muted);
           margin-top: 4px;
       }

       /* Pred stat cards (mirror) */
       .pred-stat-card {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           border-radius: 8px;
           padding: 12px 10px;
           text-align: center;
           box-shadow: none;
       }

       .pred-stat-card:hover {
           background: var(--bg-light);
           border-color: var(--primary);
           box-shadow: none;
       }

       .pred-stat-value {
           font-size: 1.35rem;
           font-weight: 800;
           color: var(--accent);
       }

       .pred-stat-title {
           font-size: 11px;
           color: var(--text-muted);
           text-transform: uppercase;
           letter-spacing: 0.4px;
       }

       /* ── Prediction / match cards ─────────────────────────────────── */
       .prediction-card {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           border-radius: 8px;
           overflow: hidden;
           cursor: pointer;
           transition: border-color 0.15s, background 0.15s;
           box-shadow: none;
       }

       .prediction-card:hover {
           background: var(--bg-light);
           border-color: var(--primary);
           transform: none;
           box-shadow: none;
       }

       .prediction-card::before {
           display: none;
       }

       .prediction-card.win {
           border-left: 3px solid var(--win);
       }

       .prediction-card.loss {
           border-left: 3px solid var(--loss);
       }

       /* Date row */
       .date {
           background: var(--bg-light);
           color: var(--text-muted);
           padding: 6px 12px;
           font-size: 11px;
           font-weight: 700;
           text-transform: uppercase;
           letter-spacing: 0.6px;
       }

       /* Match row inside a card */
       .match {
           padding: 10px 12px;
           border-bottom: 1px solid var(--border-color);
       }

       .match:last-of-type {
           border-bottom: none;
       }

       .team {
           font-weight: 700;
           font-size: 0.9rem;
           color: var(--text-light);
           margin-bottom: 4px;
       }

       .league {
           background: var(--bg-light);
           color: var(--text-muted);
           font-size: 10px;
           padding: 2px 6px;
           border-radius: 10px;
       }

       .prediction {
           background: var(--accent);
           color: var(--on-accent);
           font-size: 10px;
           font-weight: 700;
           padding: 2px 8px;
           border-radius: 10px;
       }

       .confidence,
       .odds {
           font-size: 11px;
           color: var(--text-muted);
       }

       .odds {
           color: var(--accent);
           font-weight: 700;
       }

       .score {
           font-weight: 700;
           color: var(--text-light);
           font-size: 12px;
       }

       .result {
           font-weight: 700;
           font-size: 12px;
       }

       .result.win {
           color: var(--win);
       }

       .result.loss {
           color: var(--loss);
       }

       /* Bet info strip at card bottom */
       .bet-info {
           background: var(--bg-elevated);
           padding: 8px 12px;
           display: flex;
           flex-wrap: wrap;
           gap: 8px;
           align-items: center;
           border-top: 1px solid var(--border-color);
       }

       /* ── Content card (description + feature grid) ────────────────── */
       .content-card {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           border-radius: 8px;
           padding: 16px;
       }

       .content-title {
           font-size: 13px;
           font-weight: 700;
           color: var(--accent);
           text-transform: uppercase;
           letter-spacing: 0.5px;
           margin-bottom: 8px;
       }

       .content-text {
           font-size: 13px;
           color: var(--text-muted);
           line-height: 1.6;
           margin-bottom: 12px;
       }

       .stats-bar {
           background: var(--border-color);
           height: 1px;
           width: 100%;
           margin: 12px 0;
           border-radius: 0;
       }

       /* ── Feature grid items ───────────────────────────────────────── */
       .feature-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
           gap: 8px;
           margin-top: 12px;
       }

       .feature-item {
           background: var(--bg-light);
           border: 1px solid var(--border-color);
           padding: 10px 12px;
           border-radius: 6px;
           font-size: 12px;
           font-weight: 600;
           color: var(--text-light);
           display: flex;
           align-items: center;
           gap: 6px;
           cursor: pointer;
           transition: border-color 0.15s, background 0.15s;
       }

       .feature-item:hover {
           background: var(--bg-elevated);
           border-color: var(--primary);
           color: var(--text-light);
           transform: none;
       }

       .feature-item::before {
           content: "⚡";
           font-size: 13px;
           color: var(--accent);
       }

       .feature-item:hover::before {
           color: var(--accent);
       }

       /* ── Buttons ──────────────────────────────────────────────────── */
       .btn-preview {
           background: var(--primary);
           color: #fff;
           border: none;
           padding: 9px 18px;
           border-radius: 6px;
           font-weight: 700;
           font-size: 13px;
           cursor: pointer;
           transition: background 0.2s;
           display: inline-flex;
           align-items: center;
           gap: 6px;
           text-decoration: none;
       }

       .btn-preview:hover {
           background: var(--primary-dark);
           transform: none;
       }

       .preview-action-btn {
           border-radius: 6px;
           font-weight: 700;
           padding: 9px 18px;
           font-size: 13px;
           border: none;
           cursor: pointer;
           transition: background 0.2s;
       }

       .preview-action-primary {
           background: var(--primary);
           color: #fff;
       }

       .preview-action-primary:hover {
           background: var(--primary-dark);
       }

       .preview-action-close {
           background: var(--bg-light);
           color: var(--text-muted);
           border: 1px solid var(--border-color);
       }

       .preview-action-close:hover {
           background: var(--bg-elevated);
           color: var(--text-light);
       }

       /* VIP feed links */
       .vip-feed-link {
           background: var(--primary);
           color: #fff;
           padding: 7px 14px;
           border-radius: 6px;
           font-size: 12px;
           font-weight: 700;
           text-decoration: none;
           border: none;
           transition: background 0.2s;
       }

       .vip-feed-link:hover {
           background: var(--primary-dark);
       }

       .vip-feed-live-pill {
           background: transparent;
           border: 1px solid var(--win);
           color: var(--win);
           padding: 5px 12px;
           border-radius: 20px;
           font-size: 11px;
           font-weight: 700;
           text-transform: uppercase;
       }

       /* Filter summary bar */
       .filter-summary-bar,
       #filter-summary {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           border-left: 3px solid var(--accent);
           border-radius: 6px;
           padding: 8px 14px;
           margin-bottom: 12px;
           font-size: 12px;
           color: var(--accent);
           box-shadow: none;
       }

       /* Progression guide */
       .progression-guide {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           border-left: 3px solid var(--accent);
           border-radius: 6px;
           padding: 12px;
           margin: 12px 0;
       }

       /* ── VIP feed shell ───────────────────────────────────────────── */
       .vip-feed-shell {
           background: var(--bg-dark);
           padding: 12px;
       }

       .vip-feed-container {
           max-width: 100%;
           margin: 0;
       }

       .vip-feed-header {
           border-bottom: 1px solid var(--border-color);
           padding-bottom: 14px;
           margin-bottom: 14px;
       }

       .vip-feed-title {
           font-size: 18px;
           font-weight: 800;
           color: var(--text-light);
           letter-spacing: -0.3px;
       }

       .vip-feed-meta {
           font-size: 12px;
           color: var(--text-muted);
           margin-top: 3px;
       }

       /* ── Search input ─────────────────────────────────────────────── */
       .search-inline-input {
           background: var(--bg-dark);
           border: 1px solid var(--border-color);
           color: var(--text-light);
           border-radius: 6px;
           font-size: 12px;
       }

       .search-inline-input:focus {
           border-color: var(--primary);
           outline: none;
       }

       /* Filter items */
       .filter-item select,
       .filter-item input[type="text"],
       .filter-item input[type="number"] {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           color: var(--text-light);
           border-radius: 6px;
           padding: 6px 10px;
           font-size: 12px;
       }

       .filter-item select:focus,
       .filter-item input:focus {
           border-color: var(--primary);
           outline: none;
           box-shadow: none;
       }

       .pred-filter-item select,
       .pred-filter-item input[type="text"],
       .pred-filter-item input[type="number"] {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           color: var(--text-light);
           border-radius: 6px;
       }

       .pred-filter-item select:focus,
       .pred-filter-item input:focus {
           border-color: var(--primary);
           outline: none;
           box-shadow: none;
       }

       /* ── Promo sticky bar ─────────────────────────────────────────── */
       .landing-cta {
           background: var(--primary);
           padding: 7px 16px;
           font-size: 13px;
       }

       .promo-cta {
           color: #fff;
           font-weight: 700;
       }

       /* ── Footer ───────────────────────────────────────────────────── */
       footer {
           background: var(--bg-medium);
           border-top: 1px solid var(--border-color);
           box-shadow: none;
           border-radius: 0;
           /* margin: 0; */
           padding: 24px 16px;
       }

       /* ── Misc: remove leftover shadows/borders globally ───────────── */
       .skeleton-card {
           border: 1px solid var(--border-color);
           box-shadow: none;
       }

       .tab-button:hover {
           transform: none;
       }

       .inplay-preview-tab:hover,
       .inplay2-preview-tab:hover {
           transform: none;
       }

       .stat-card:hover {
           transform: none;
       }

       /* ── Responsive helpers ───────────────────────────────────────── */
       @media (max-width: 480px) {
           .tab-content {
               padding: 10px;
           }

           .content-card {
               padding: 12px;
           }

           .feature-grid {
               grid-template-columns: 1fr 1fr;
           }

           .bac-inline-container {
               display: none;
           }
       }

       @media (min-width: 481px) and (max-width: 767px) {
           .feature-grid {
               grid-template-columns: repeat(2, 1fr);
           }
       }

       /* ═══════════════════════════════════════════════════════════════
           ELEGANT DESIGN SYSTEM — v2
           Approach: Dark betting-app aesthetic with sharp typography,
           subtle depth via opacity not shadows, accent yellow as the
           single bold signal. Every surface is intentional.
        ═══════════════════════════════════════════════════════════════ */

       /* ── Google Font import ────────────────────────────────────── */
       @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');

       /* ── Refined design tokens ─────────────────────────────────── */
       :root {
           /* Surfaces — slightly warmer than pure black */
           --bg-dark: #0c0e10;
           --bg-medium: #13161a;
           --bg-light: #1a1e24;
           --bg-elevated: #1e2229;
           --bg-card: #13161a;

           /* Brand */
           --primary: #1a7a5e;
           --primary-dark: #125545;
           --primary-glow: rgba(26, 122, 94, 0.15);
           --accent: #f5d020;
           --accent-dark: #d4b21a;
           --accent-glow: rgba(245, 208, 32, 0.12);

           /* Text */
           --text-light: #f0f2f5;
           --text-muted: #7a8494;
           --text-dim: #4a5260;

           /* Structure */
           --border-color: #222831;
           --border-subtle: #1a1e24;

           /* Outcome colours */
           --win: #22c55e;
           --loss: #ef4444;
           --info: #60a5fa;

           /* Spacing */
           --radius-sm: 4px;
           --radius: 8px;
           --radius-md: 10px;
           --radius-lg: 14px;
           --radius-xl: 20px;

           /* Typography */
           --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
           --font-mono: 'DM Mono', 'Fira Code', monospace;
           --font-size-base: 14px;

           /* Layout */
           --header-h: 58px;
           --sidebar-w: 220px;
           --box-shadow: none;
       }

       [data-theme="light"] {
           --bg-dark: #f4f6f9;
           --bg-medium: #ffffff;
           --bg-light: #eef1f6;
           --bg-elevated: #e8ecf2;
           --bg-card: #ffffff;
           --text-light: #0d1117;
           --text-muted: #5a6475;
           --text-dim: #9aa3b0;
           --border-color: #dde2ea;
           --border-subtle: #eef1f6;
       }

       /* ── Base reset ────────────────────────────────────────────── */
       *,
       *::before,
       *::after {
           box-sizing: border-box;
       }

       html,
       body {
           margin: 0;
           padding: 0;
           border: none;
           width: 100%;
           overflow-x: hidden;
           font-family: var(--font-sans);
           font-size: var(--font-size-base);
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
       }

       body {
           background: var(--bg-dark);
           color: var(--text-light);
       }

       /* ── Full-bleed container ──────────────────────────────────── */
       .container {
           width: 100%;
           max-width: 100%;
           margin: 0;
           padding: 0;
       }

       /* ── Hide all sidebar toggles ──────────────────────────────── */
       #desktop-sidebar-toggle,
       .desktop-sidebar-toggle,
       #mobile-nav-toggle,
       .pred-nav-toggle {
           display: none !important;
       }

       /* ═══════════ HEADER ══════════════════════════════════════════ */
       header,
       .container>header {
           position: relative;
           background: var(--bg-medium);
           border: none;
           border-bottom: 1px solid var(--border-color);
           box-shadow: none;
           border-radius: 0;
           margin: 0;
           padding: 0 20px;
           height: var(--header-h);
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 12px;
           flex-wrap: nowrap;
           z-index: 1200;
       }

       @media (min-width: 1024px) {
           .container>header {
               position: fixed !important;
               top: 0;
               left: 0;
               width: 100%;
           }
       }

       /* Brand */
       .brand-link {
           gap: 10px;
           text-decoration: none;
       }

       .brand-logo {
           width: 28px;
           height: 28px;
           border-radius: 6px;
           object-fit: cover;
       }

       .brand-main-text {
           font-size: 15px;
           font-weight: 800;
           color: var(--text-light);
           letter-spacing: -0.3px;
       }

       .brand-sub-text {
           font-size: 12px;
           font-weight: 500;
           color: var(--accent);
           letter-spacing: 0.1px;
       }

       /* Header form */
       .bac-inline-container {
           max-width: 360px;
       }

       .bac-inline-form {
           display: flex;
           gap: 6px;
           align-items: center;
       }

       .bac-inline-input {
           background: var(--bg-light);
           border: 1px solid var(--border-color);
           color: var(--text-light);
           border-radius: var(--radius);
           padding: 7px 12px;
           font-size: 12px;
           font-family: var(--font-sans);
           outline: none;
           flex: 1;
           min-width: 0;
           transition: border-color 0.15s;
       }

       .bac-inline-input::placeholder {
           color: var(--text-dim);
       }

       .bac-inline-input:focus {
           border-color: var(--primary);
       }

       .bac-inline-submit {
           background: var(--primary);
           color: #fff;
           border: none;
           border-radius: var(--radius);
           padding: 7px 14px;
           font-size: 12px;
           font-weight: 700;
           font-family: var(--font-sans);
           cursor: pointer;
           white-space: nowrap;
           transition: background 0.15s;
           letter-spacing: 0.2px;
       }

       .bac-inline-submit:hover {
           background: var(--primary-dark);
       }

       .bac-inline-note {
           font-size: 10px;
           color: var(--text-dim);
           margin-top: 3px;
           display: flex;
           gap: 10px;
       }

       .bac-inline-history {
           color: #000;
           text-decoration: none;
           font-weight: 600;
       }

       /* Theme toggle */
       .pred-theme-toggle {
           background: none;
           border: none;
           color: var(--text-muted);
           font-size: 16px;
           cursor: pointer;
           padding: 6px;
           border-radius: var(--radius);
           transition: color 0.15s, background 0.15s;
           line-height: 1;
       }

       .pred-theme-toggle:hover {
           color: var(--text-light);
           background: var(--bg-light);
       }

       /* Promo bar */
       .landing-cta {
           background: linear-gradient(90deg, var(--primary-dark), var(--primary));
           padding: 8px 20px;
           font-size: 12.5px;
           font-weight: 600;
           border: none;
           letter-spacing: 0.1px;
       }

       .promo-cta {
           color: #fff;
           font-weight: 700;
       }

       /* ═══════════ SIDEBAR ═════════════════════════════════════════ */
       .tab-container {
           width: 100%;
           max-width: 100%;
           margin: 0;
           background: var(--bg-dark);
           border: none;
           box-shadow: none;
           border-radius: 0;
           overflow: visible;
       }

       .tab-header {
           background: var(--bg-medium);
           box-shadow: none;
           border: none;
           padding: 0;
       }

       @media (min-width: 1024px) {
           .tab-container {
               max-width: calc(100% - var(--sidebar-w));
               margin-left: var(--sidebar-w);
               margin-top: var(--header-h) !important;
               border-left: 1px solid var(--border-color);
               border-radius: 0;
           }

           footer {
               max-width: calc(100% - var(--sidebar-w));
               margin-left: var(--sidebar-w);
           }

           .tab-header {
               position: fixed;
               top: var(--header-h);
               left: 0;
               width: var(--sidebar-w);
               height: calc(100vh - var(--header-h));
               border-right: 1px solid var(--border-color);
               z-index: 1100;
               overflow: hidden;
           }
       }

       /* Sidebar scrollbar */
       .tab-scroll-container {
           overflow-x: hidden;
           overflow-y: auto;
           scrollbar-width: thin;
           scrollbar-color: var(--border-color) transparent;
       }

       .tab-scroll-container::-webkit-scrollbar {
           width: 4px;
       }

       .tab-scroll-container::-webkit-scrollbar-thumb {
           background: var(--border-color);
           border-radius: 4px;
       }

       /* Sidebar nav items */
       @media (min-width: 1024px) {
           .tab-nav {
               flex-direction: column;
               padding: 12px 10px 20px;
               gap: 2px;
               min-width: 0;
           }
       }

       @media (max-width: 1023px) {
           .tab-nav {
               padding: 0 4px;
               gap: 2px;
           }
       }

       .tab-button {
           background: transparent;
           border: none;
           color: var(--text-muted);
           font-size: 13px;
           font-weight: 600;
           font-family: var(--font-sans);
           padding: 10px 12px;
           cursor: pointer;
           transition: background 0.15s, color 0.15s;
           white-space: nowrap;
           position: relative;
           text-transform: none;
           letter-spacing: 0;
           border-radius: var(--radius);
           text-align: left;
       }

       .tab-button:hover {
           background: var(--bg-light);
           color: var(--text-light);
           transform: none;
       }

       .tab-button.active {
           background: var(--bg-light);
           color: var(--text-light);
           box-shadow: none;
       }

       /* Accent left pill on active item */
       .tab-button.active::after {
           content: "";
           position: absolute;
           left: 0;
           top: 25%;
           bottom: 25%;
           width: 3px;
           height: 50%;
           background: var(--accent);
           border-radius: 0 3px 3px 0;
       }

       /* Override old ::before on active */
       .tab-button.active::before {
           display: none;
       }

       .tab-subtitle {
           font-size: 10.5px;
           color: var(--text-dim);
           font-weight: 400;
           display: block;
           margin-top: 1px;
           font-style: normal;
       }

       .tab-button.active .tab-subtitle {
           color: var(--text-muted);
       }

       .tab-button.promo-highlight {
           background: var(--accent-glow);
           color: var(--accent);
           border: 1px solid rgba(245, 208, 32, 0.2);
       }

       .tab-button.promo-highlight:hover {
           background: rgba(245, 208, 32, 0.2);
       }

       /* Horizontal mobile tab strip */
       @media (max-width: 1023px) {
           .tab-button {
               padding: 10px 14px;
               font-size: 12px;
               border-radius: var(--radius-sm);
           }

           .tab-button.active::after {
               display: none;
           }

           .tab-button.active::before {
               display: block;
               content: "";
               position: absolute;
               bottom: 0;
               left: 10%;
               right: 10%;
               top: auto;
               width: 80%;
               height: 2px;
               background: var(--accent);
               border-radius: 2px 2px 0 0;
           }
       }

       /* Tab content area */
       .tab-content {
           padding: 18px;
           background: var(--bg-dark);
       }

       @media (max-width: 480px) {
           .tab-content {
               padding: 12px;
           }
       }

       /* ═══════════ STAT CARDS ══════════════════════════════════════ */
       .stats {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
           gap: 8px;
           margin-bottom: 14px;
       }

       .stat-card {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           border-radius: var(--radius-md);
           padding: 14px 10px 10px;
           text-align: center;
           cursor: pointer;
           position: relative;
           transition: border-color 0.15s, background 0.15s;
           box-shadow: none;
       }

       .stat-card:hover {
           background: var(--bg-light);
           border-color: var(--primary);
           transform: none;
           box-shadow: none;
       }

       .stat-card:hover::after {
           display: none;
       }

       .stat-card:active {
           transform: scale(0.97);
       }

       .stat-title {
           font-size: 10px;
           font-weight: 700;
           color: var(--text-dim);
           text-transform: uppercase;
           letter-spacing: 0.7px;
           margin-bottom: 8px;
       }

       .stat-value {
           font-family: var(--font-mono);
           font-size: 1.3rem;
           font-weight: 500;
           color: var(--accent);
           line-height: 1;
           letter-spacing: -0.5px;
       }

       .stat-hint {
           font-size: 9.5px;
           color: var(--text-dim);
           margin-top: 5px;
           font-style: italic;
       }

       /* Pred cards mirror */
       .pred-stat-card {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           border-radius: var(--radius-md);
           padding: 14px 10px 10px;
           text-align: center;
           box-shadow: none;
           transition: border-color 0.15s, background 0.15s;
       }

       .pred-stat-card:hover {
           background: var(--bg-light);
           border-color: var(--primary);
           box-shadow: none;
       }

       .pred-stat-value {
           font-family: var(--font-mono);
           font-size: 1.3rem;
           font-weight: 500;
           color: var(--accent);
           letter-spacing: -0.5px;
       }

       .pred-stat-title {
           font-size: 10px;
           font-weight: 700;
           color: var(--text-dim);
           text-transform: uppercase;
           letter-spacing: 0.7px;
       }

       /* ═══════════ PREDICTION / MATCH CARDS ═══════════════════════ */
       .prediction-card {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           border-radius: var(--radius-md);
           overflow: hidden;
           cursor: pointer;
           transition: border-color 0.15s, background 0.15s;
           box-shadow: none;
       }

       .prediction-card:hover {
           background: var(--bg-light);
           border-color: var(--primary);
           transform: none;
           box-shadow: none;
       }

       .prediction-card::before {
           display: none;
       }

       .prediction-card.win {
           border-left: 3px solid var(--win);
       }

       .prediction-card.loss {
           border-left: 3px solid var(--loss);
       }

       .date {
           background: var(--bg-elevated);
           color: var(--text-dim);
           padding: 5px 14px;
           font-size: 10px;
           font-weight: 700;
           text-transform: uppercase;
           letter-spacing: 1px;
           border-bottom: 1px solid var(--border-color);
       }

       .match {
           padding: 12px 14px;
           border-bottom: 1px solid var(--border-subtle);
       }

       .match:last-of-type {
           border-bottom: none;
       }

       .team {
           font-size: 13px;
           font-weight: 700;
           color: var(--text-light);
           margin-bottom: 5px;
           letter-spacing: -0.1px;
       }

       .league {
           background: var(--bg-elevated);
           color: var(--text-dim);
           font-size: 9.5px;
           font-weight: 700;
           padding: 2px 7px;
           border-radius: 20px;
           text-transform: uppercase;
           letter-spacing: 0.4px;
       }

       .prediction {
           background: var(--accent);
           color: #000;
           font-size: 10px;
           font-weight: 800;
           padding: 2px 8px;
           border-radius: 20px;
           text-transform: uppercase;
           letter-spacing: 0.3px;
       }

       .confidence,
       .odds {
           font-size: 11px;
           color: var(--text-muted);
       }

       .odds {
           font-family: var(--font-mono);
           font-size: 12px;
           color: var(--accent);
           font-weight: 500;
       }

       .score {
           font-family: var(--font-mono);
           font-weight: 500;
           color: var(--text-light);
           font-size: 12px;
       }

       .result {
           font-weight: 700;
           font-size: 11px;
       }

       .result.win {
           color: var(--win);
       }

       .result.loss {
           color: var(--loss);
       }

       .bet-info {
           background: var(--bg-elevated);
           padding: 8px 14px;
           display: flex;
           flex-wrap: wrap;
           gap: 8px;
           align-items: center;
           border-top: 1px solid var(--border-color);
           font-size: 11px;
       }

       /* ═══════════ CONTENT CARD ════════════════════════════════════ */
       .content-card {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           border-radius: var(--radius-md);
           padding: 18px;
       }

       .content-title {
           font-size: 11px;
           font-weight: 800;
           color: var(--text-dim);
           text-transform: uppercase;
           letter-spacing: 1.2px;
           margin-bottom: 10px;
       }

       .content-text {
           font-size: 13px;
           color: var(--text-muted);
           line-height: 1.65;
           margin-bottom: 14px;
       }

       .stats-bar {
           background: var(--border-color);
           height: 1px;
           width: 100%;
           margin: 14px 0;
           border-radius: 0;
       }

       /* ═══════════ FEATURE GRID ════════════════════════════════════ */
       .feature-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
           gap: 8px;
           margin-top: 14px;
       }

       .feature-item {
           background: var(--bg-elevated);
           border: 1px solid var(--border-color);
           padding: 10px 12px;
           border-radius: var(--radius);
           font-size: 12px;
           font-weight: 600;
           color: var(--text-muted);
           display: flex;
           align-items: center;
           gap: 7px;
           cursor: pointer;
           transition: border-color 0.15s, color 0.15s, background 0.15s;
       }

       .feature-item:hover {
           background: var(--bg-light);
           border-color: var(--primary);
           color: var(--text-light);
           transform: none;
       }

       .feature-item::before {
           content: "⚡";
           font-size: 12px;
           color: var(--accent);
           flex-shrink: 0;
       }

       .feature-item:hover::before {
           color: var(--accent);
       }

       /* ═══════════ BUTTONS ═════════════════════════════════════════ */
       .btn-preview {
           background: var(--primary);
           color: #fff;
           border: none;
           padding: 9px 18px;
           border-radius: var(--radius);
           font-weight: 700;
           font-size: 12.5px;
           font-family: var(--font-sans);
           cursor: pointer;
           transition: background 0.15s;
           display: inline-flex;
           align-items: center;
           gap: 6px;
           text-decoration: none;
           letter-spacing: 0.1px;
       }

       .btn-preview:hover {
           background: var(--primary-dark);
           transform: none;
       }

       .preview-action-btn {
           border-radius: var(--radius);
           font-weight: 700;
           font-family: var(--font-sans);
           padding: 9px 18px;
           font-size: 12.5px;
           border: none;
           cursor: pointer;
           transition: background 0.15s;
           letter-spacing: 0.1px;
       }

       .preview-action-primary {
           background: var(--primary);
           color: #fff;
       }

       .preview-action-primary:hover {
           background: var(--primary-dark);
       }

       .preview-action-close {
           background: var(--bg-elevated);
           color: var(--text-muted);
           border: 1px solid var(--border-color);
       }

       .preview-action-close:hover {
           background: var(--bg-light);
           color: var(--text-light);
       }

       .vip-feed-link {
           background: var(--primary);
           color: #fff;
           padding: 7px 14px;
           border-radius: var(--radius);
           font-size: 12px;
           font-weight: 700;
           text-decoration: none;
           border: none;
           transition: background 0.15s;
       }

       .vip-feed-link:hover {
           background: var(--primary-dark);
       }

       .vip-feed-live-pill {
           background: transparent;
           border: 1px solid var(--win);
           color: var(--win);
           padding: 5px 12px;
           border-radius: 20px;
           font-size: 10px;
           font-weight: 700;
           text-transform: uppercase;
           letter-spacing: 0.5px;
       }

       /* ═══════════ FILTERS ═════════════════════════════════════════ */
       .filter-summary-bar,
       #filter-summary {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           border-left: 3px solid var(--accent);
           border-radius: var(--radius);
           padding: 8px 14px;
           margin-bottom: 12px;
           font-size: 12px;
           color: var(--accent);
           box-shadow: none;
           display: flex;
           align-items: center;
           justify-content: space-between;
       }

       .filter-item select,
       .filter-item input[type="text"],
       .filter-item input[type="number"],
       .pred-filter-item select,
       .pred-filter-item input[type="text"],
       .pred-filter-item input[type="number"] {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           color: var(--text-light);
           border-radius: var(--radius);
           padding: 7px 10px;
           font-size: 12px;
           font-family: var(--font-sans);
           transition: border-color 0.15s;
       }

       .filter-item select:focus,
       .filter-item input:focus,
       .pred-filter-item select:focus,
       .pred-filter-item input:focus {
           border-color: var(--primary);
           outline: none;
           box-shadow: none;
       }

       .search-inline-input {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           color: var(--text-light);
           border-radius: var(--radius);
           font-size: 12px;
           font-family: var(--font-sans);
           padding: 6px 10px;
           transition: border-color 0.15s;
       }

       .search-inline-input:focus {
           border-color: var(--primary);
           outline: none;
       }

       .search-inline-input::placeholder {
           color: var(--text-dim);
       }

       /* ═══════════ PROGRESSION GUIDE ══════════════════════════════ */
       .progression-guide {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           border-left: 3px solid var(--accent);
           border-radius: var(--radius-md);
           padding: 14px;
           margin: 14px 0;
       }

       .progression-guide-title {
           font-size: 12px;
           font-weight: 700;
           color: var(--accent);
           text-transform: uppercase;
           letter-spacing: 0.6px;
           margin-bottom: 6px;
       }

       .progression-guide-text {
           font-size: 13px;
           color: var(--text-muted);
           line-height: 1.6;
       }

       /* ═══════════ VIP FEED ════════════════════════════════════════ */
       .vip-feed-shell {
           background: var(--bg-dark);
           padding: 16px;
       }

       .vip-feed-container {
           max-width: 100%;
           margin: 0;
       }

       .vip-feed-header {
           border-bottom: 1px solid var(--border-color);
           padding-bottom: 14px;
           margin-bottom: 16px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           flex-wrap: wrap;
           gap: 12px;
       }

       .vip-feed-title {
           font-size: 17px;
           font-weight: 800;
           color: var(--text-light);
           letter-spacing: -0.4px;
           margin: 0;
       }

       .vip-feed-meta {
           font-size: 11.5px;
           color: var(--text-dim);
           margin-top: 2px;
       }

       .vip-feed-list {
           display: flex;
           flex-direction: column;
           gap: 10px;
       }

       /* ═══════════ FOOTER ══════════════════════════════════════════ */
       footer {
           background: var(--bg-medium);
           border-top: 1px solid var(--border-color);
           box-shadow: none;
           border-radius: 0;

       }

       /* Footer inner layout */

       /* Wrap all footer children in a flex row */
       footer {
           display: flex;
           flex-direction: column;
           gap: 0;
           padding: 0;
       }

       /* Top section: links + social in one row */
       .footer-links {
           display: flex;
           align-items: center;
           justify-content: space-between;
           flex-wrap: wrap;
           gap: 12px;
           padding: 18px 24px 14px;
           border-bottom: 1px solid var(--border-color);
           text-align: left;
           margin: 0;
       }

       .footer-links .btn-secondary {
           display: inline-flex;
           align-items: center;
           font-size: 12px;
           font-weight: 600;
           color: var(--text-muted);
           text-decoration: none;
           padding: 6px 12px;
           border: 1px solid var(--border-color);
           border-radius: var(--radius);
           transition: border-color 0.15s, color 0.15s;
           background: none;
       }

       .footer-links .btn-secondary:hover {
           border-color: var(--primary);
           color: var(--text-light);
       }

       /* Responsible betting section */
       .responsible-betting {
           padding: 16px 24px;
           border-bottom: 1px solid var(--border-color);
           text-align: left;
           margin: 0;
       }

       .responsible-betting h3 {
           font-size: 11px;
           font-weight: 800;
           color: var(--text-dim);
           text-transform: uppercase;
           letter-spacing: 1px;
           margin: 0 0 6px;
       }

       .responsible-betting p {
           font-size: 12px;
           color: var(--text-dim);
           line-height: 1.6;
           margin: 0;
           max-width: 680px;
       }

       /* Social links row */
       .social-links {
           display: flex;
           gap: 8px;
           justify-content: flex-start;
           align-items: center;
           padding: 14px 24px 18px;
           flex-wrap: wrap;
       }

       .social-link {
           background: var(--bg-elevated);
           border: 1px solid var(--border-color);
           border-radius: var(--radius);
           width: 34px;
           height: 34px;
           display: flex;
           align-items: center;
           justify-content: center;
           color: var(--text-muted);
           text-decoration: none;
           font-size: 12px;
           font-weight: 700;
           transition: border-color 0.15s, color 0.15s, background 0.15s;
       }

       .social-link:hover {
           background: var(--bg-light);
           border-color: var(--primary);
           color: var(--text-light);
           transform: none;
       }

       .social-link svg {
           width: 15px;
           height: 15px;
           stroke: currentColor;
       }

       /* ═══════════ MISC / GLOBAL ═══════════════════════════════════ */

       /* Remove all decorative transforms */
       *:hover {
           transform: none !important;
       }

       /* … except scale-down on active (tactile feel) */
       .stat-card:active {
           transform: scale(0.97) !important;
       }

       .tab-button:active {
           transform: scale(0.98) !important;
       }

       /* Skeleton */
       .skeleton-card {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           border-radius: var(--radius-md);
           box-shadow: none;
       }

       /* #filter-summary live counter */
       #live-counter {
           background: var(--accent);
           color: #000;
           font-family: var(--font-mono);
           font-weight: 500;
           padding: 3px 10px;
           border-radius: var(--radius-sm);
           font-size: 12px;
       }

       /* Trend badges */
       .trend {
           font-size: 11px;
           font-weight: 700;
           font-family: var(--font-mono);
       }

       /* Scroll indicators */
       .scroll-indicator {
           background: var(--bg-medium);
           border: 1px solid var(--border-color);
           color: var(--text-muted);
           border-radius: var(--radius-sm);
       }

       .scroll-indicator:hover {
           border-color: var(--primary);
           color: var(--text-light);
           background: var(--bg-light);
       }

       @media (max-width: 480px) {
           .content-card {
               padding: 14px;
           }

           .feature-grid {
               grid-template-columns: 1fr 1fr;
           }

           .bac-inline-container {
               display: none;
           }

           .footer-links {
               padding: 14px 16px;
           }

           .responsible-betting {
               padding: 14px 16px;
           }

           .social-links {
               padding: 12px 16px 16px;
           }
       }

       /* ═══════════════════════════════════════════════════════════════
           RESTORE ORIGINAL COLOUR SCHEME
           Overrides only the colour tokens added in the elegant-design
           pass. All typography, spacing, and layout rules stay intact.
        ═══════════════════════════════════════════════════════════════ */
       :root {
           --primary: #126e51;
           --primary-dark: #0d5940;
           --primary-glow: rgba(18, 110, 81, 0.15);
           --secondary: #027b5b;
           --accent: #ffdf1b;
           --accent-dark: #e6c400;
           --accent-glow: rgba(255, 223, 27, 0.12);

           --bg-dark: #121212;
           --bg-medium: #1f1f1f;
           --bg-light: #2a2a2a;
           --bg-elevated: #262626;
           --bg-card: #1c1c1c;

           --text-light: #e0e0e0;
           --text-muted: #b0b0b0;
           --text-dim: #6b7280;

           --on-primary: #ffffff;
           --on-accent: #121212;

           --win: #4caf50;
           --loss: #f44336;
           --info: #64b5f6;

           --border-color: #323232;
           --border-subtle: #2a2a2a;

           --radius-sm: 4px;
           --radius: 8px;
           --radius-md: 10px;
           --radius-lg: 12px;
           --radius-xl: 16px;

           --header-h: 58px;
           --sidebar-w: 220px;
       }

       [data-theme="light"] {
           --primary: #4acfa5;
           --primary-dark: #2fb98e;
           --primary-glow: rgba(74, 207, 165, 0.15);
           --secondary: #36b88f;
           --accent: #f0c800;
           --accent-dark: #cfad00;
           --accent-glow: rgba(240, 200, 0, 0.12);

           --bg-dark: #f8f8f8;
           --bg-medium: #ffffff;
           --bg-light: #f3f5f7;
           --bg-elevated: #eef2f5;
           --bg-card: #ffffff;

           --text-light: #000000;
           --text-muted: #4f4f4f;
           --text-dim: #9aa3b0;

           --on-primary: #ffffff;
           --on-accent: #111111;

           --win: #2e7d32;
           --loss: #c62828;
           --info: #1976d2;

           --border-color: #d7dee6;
           --border-subtle: #eef2f5;
       }