/* --- CUSTOM CSS FOR LIGHT THEME FOTMOB STYLE (CENTERED LAYOUT) --- */
    
    body { 
        font-family: 'Poppins', sans-serif; 
        background-color: #f3f4f6; /* Light Gray Background (Default) */
        color: #1f2937; /* Dark Text (Default) */
    }

    /* Dark Mode Body Overrides */
    .dark body { 
        background-color: #111827; /* Very Dark Gray */
        color: #f3f4f6; /* Light Text */
    }
    
    .match-schedule-container { max-width: 1000px; margin: 0 auto; padding: 0 1rem 3rem; box-sizing: border-box; }
    
    .league-title {
        font-size: 1rem; font-weight: 700; margin: 20px auto 15px; 
        background: #1d4ed8; /* Primary Blue */ 
        color: white;
        border-radius: 8px; text-align: center; padding: 12px; 
        width: calc(100% - 1rem); max-width: 960px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    /* Match Card */
    .match-card {
        display: block; border-radius: 12px; 
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        border: 1px solid #e5e7eb; 
        padding: 16px; margin: 16px auto; 
        background: #ffffff; /* Light Mode Background */
        width: calc(100% - 1rem); max-width: 960px; 
        transition: all 0.25s;
    }
    
    /* Dark Mode Match Card */
    .dark .match-card {
        background: #374151; /* Darker Card Background */
        border-color: #4b5563;
        box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    }

    .match-card:hover { 
        box-shadow: 0 6px 14px rgba(0,0,0,0.15); /* Subtly increased shadow */
        border-color: #93c5fd;
    }
    .dark .match-card:hover {
        border-color: #60a5fa;
    }

    /* Content Layout */
    .match-card-content { display: flex; flex-direction: column; gap: 10px; }
    
    /* Key change: Team Layout for Centering */
    .match-row-teams { 
        display: flex; 
        align-items: center; 
        justify-content: space-between; 
        width: 100%;
    }
    
    /* * Team Containers: Updated to use flex properties for better mobile responsiveness.
      * flex-grow: 1 ensures they fill available space.
      * min-width: 0 is critical to allow flex items to shrink below their content size.
      */
    .match-team { 
        flex-grow: 1; 
        flex-basis: 0;
        min-width: 0; /* Fixes mobile overflow issue */
        display: flex; 
        align-items: center; 
        gap: 10px; 
        flex-shrink: 1;
    }

    /* Home Team (Left): Pushed to the right edge of its container (closest to center) */
    .match-team.home {
        justify-content: flex-end; 
    }

    /* Away Team (Right): Pushed to the left edge of its container (closest to center) */
    .match-team.away {
        justify-content: flex-start;
    }

    /* Logo Styling (Position of logo is maintained relative to team name/center) */
    .match-team img { 
        width: 48px; height: 48px; 
        border-radius: 0; /* User Request: Remove all rounded corners */
        border: none; /* User Request: Remove all borders/square styling */
        flex-shrink: 0;
    }

    /* Team Name Ordering and Alignment (Text aligns toward center) */
    .match-team-name {
        font-size: 1.125rem; 
        font-weight: 700; 
        color: #1f2937; /* Light Mode Text Color */
        flex-grow: 1;
        /* Desktop: Truncate long names with "..." */
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
    }

    /* Dark Mode Team Name Color */
    .dark .match-team-name {
        color: #f3f4f6;
    }
    
    /* Home team name is placed to the left of the logo and aligns right */
    .match-team.home .match-team-name { 
        order: -1; 
        text-align: right; 
    }
    
    /* Away team name is placed to the right of the logo and aligns left */
    .match-team.away .match-team-name { 
        order: 1; 
        text-align: left; 
    }

    /* Status/Center Element (Fixed width to maintain centering) */
    .match-center { 
        flex-shrink: 0; 
        min-width: 90px;
        text-align: center;
        display: flex; 
        flex-direction: column; 
        align-items: center;
    }
    
    /* Local Time Styling */
    .match-local-time {
        font-size: 0.875rem; 
        font-weight: 600;
        color: #4b5563; /* Light Mode Text Color */
        margin-bottom: 4px;
        letter-spacing: 0.00em;
    }

    /* Dark Mode Local Time Styling */
    .dark .match-local-time {
        color: #9ca3af;
    }

    /* Status Indicator (Pill style) */
    .match-status {
        font-size: 0.75rem !important; 
        font-weight: 700; 
        padding: 4px 8px;
        border-radius: 9999px; 
        display: inline-block;
        min-width: 60px; text-align: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        letter-spacing: 0.05em;
        line-height: 1;
    }
    .match-status-countdown { background: #10b981; color: white; }
    .match-status-live {
        background: #ef4444; color: white; 
        animation: pulse 1.2s infinite;
    }
    .match-status-over { background: #6b7280; color: #ffffff; }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

    /* Media Query for Mobile adjustments (Force wrap long names) */
    @media (max-width: 640px) {
        .match-team-name { 
            font-size: 0.875rem; /* Smaller font for better fit */
            /* Crucial changes to allow wrapping on mobile */
            white-space: normal; 
            overflow: visible; 
            text-overflow: clip; 
            line-height: 1.2; /* Tighter line spacing for two lines */
        } 
        .match-team img { width: 36px; height: 36px; }
        .match-center { min-width: 80px; }
        .match-card { padding: 12px; }
        .match-team { gap: 8px; } /* Slightly reduced gap */
    }

    /* Header and Footer styles (Light Theme Defaults) */
    header {
      position: fixed; top: 0; width: 100%; 
      background: white; /* Light Mode Header Background */
      box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 100;
    }

    /* Dark Mode Header */
    .dark header {
        background: #1f2937; /* Dark Header Background */
    }

    .header-container {
      max-width: 1000px; margin: 0 auto; padding: 0 1rem;
      height: 70px; display: flex; justify-content: space-between; align-items: center;
    }

    /* DMCA and Footer Sections Styles: BLOCK STYLE RESTORED */
    .dmca-section, .footer {
      max-width: 1000px; 
      margin: 2rem auto 0;
      padding: 2rem 1.5rem; /* Re-added padding */
      border-radius: 12px; /* Re-added rounded corners */
      text-align: center;
      background: #ffffff; /* Light Mode Background */
      box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Re-added light shadow */
      color: inherit;
    }
    
    /* Dark Mode DMCA and Footer Background overrides */
    .dark .dmca-section, .dark .footer {
        background: #1f2937; /* Darker background */
        box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
    }

    /* Dark Mode Link Color Correction for Footer */
    .dark .footer a {
        color: #93c5fd; /* Lighter link color */
    }

    /* Toggle (Kept for functionality, but appearance defaults to off/light) */
    .toggle { position: relative; display: inline-block; width: 46px; height: 24px; }
    .toggle input { opacity: 0; width:0; height:0; }
    .slider {
      position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
      background: #ccc; border-radius: 30px; transition: .4s;
    }
    .slider:before {
      position: absolute; content: ""; height: 20px; width: 20px; left: 2px; bottom: 2px;
      background: white; border-radius: 50%; transition: .4s;
    }
    input:checked + .slider { background: #3b82f6; }
    input:checked + .slider:before { transform: translateX(22px); }