/************************************************************
        1. Base & Reset
        ************************************************************/
        *,
        *::before,
        *::after {
          box-sizing: border-box;
          padding: 0;
          margin: 0;
        }

        :root {
          /* Color Variables */
          --primary: #4A8CFF;
          --primary-dark: #3B6EDB;
          --primary-light: #6BA1FF;
          --background: #0A0A0B;
          --surface: #121316;
          --text: #E9ECEF;
          --text-secondary: #ADB5BD;
          --success: #40C057;
          --success-dark: #2B9943;
          --error: #FA5252;
          --error-dark: #E03131;
        }

        body {
          font-family: 'Segoe UI', 'Roboto', sans-serif;
          background-color: #121212; /* Existing logs.html background */
          color: #e0e0e0; /* Existing logs.html text color */
          margin: 0;
          padding: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-top: 140px; /* Adjust padding to accommodate fixed elements */
        }

        /* Copied Header & Navigation Styles from index.html */
        /************************************************************
        2. Header & Navigation
        ************************************************************/
        .header {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          padding: 15px 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          z-index: 4;
          background: rgba(30, 30, 34, 0.85);
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
          transition: all 0.3s ease;
        }

        .header-title {
          font-size: 24px;
          font-weight: 600;
          background: linear-gradient(135deg, var(--primary), var(--primary-light));
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          text-shadow: 0 0 30px rgba(74, 140, 255, 0.3);
        }

        .nav-links {
          display: flex;
          gap: 24px;
          position: relative;
        }

        .nav-link {
          font-size: 16px;
          color: var(--text-secondary);
          text-decoration: none;
          font-weight: 500;
          transition: all 0.3s ease;
          padding: 6px 12px;
          border-radius: 8px;
          position: relative;
        }

        .nav-link:hover {
          color: var(--primary);
          background: rgba(74, 140, 255, 0.1);
        }

        .nav-link.active {
          color: var(--primary);
          background: rgba(74, 140, 255, 0.15);
        }

        .nav-link.active::after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          width: 100%;
          height: 2px;
          background: linear-gradient(90deg, var(--primary), transparent);
        }

        /* Countdown Timer Styles */
        /************************************************************
        3. Countdown Timer
        ************************************************************/
        .countdown-timer {
          position: relative;
          display: flex;
          align-items: center;
          cursor: pointer;
        }

        .days-count {
          background: rgba(74, 140, 255, 0.1);
          color: var(--primary);
          padding: 8px 16px;
          border-radius: 12px;
          font-weight: 600;
          min-width: 80px;
          text-align: center;
          border: 1px solid rgba(74, 140, 255, 0.2);
          transition: all 0.3s ease;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .days-count:hover {
          background: var(--primary);
          color: #fff;
          transform: translateY(-1px);
          box-shadow: 0 6px 16px rgba(74, 140, 255, 0.3);
        }

        .countdown-tooltip {
          position: absolute;
          top: 110%;
          left: 50%;
          transform: translateX(-50%) translateY(10px);
          background: rgba(255, 255, 255, 0.15);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          color: #ffffff;
          padding: 10px 16px;
          border-radius: 12px;
          white-space: normal;
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.3s ease, transform 0.3s ease;
          z-index: 5;
          font-size: 14px;
          pointer-events: none;
          max-width: 300px;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        }

        .countdown-timer:hover .countdown-tooltip,
        .countdown-timer.active .countdown-tooltip {
          opacity: 1;
          visibility: visible;
          transform: translateX(-50%) translateY(0);
        }

        .countdown-timer.active .countdown-tooltip {
          background: rgba(255, 255, 255, 0.2);
        }

        /* Existing Capsule Styles in logs.html */
        .capsule-list {
            width: 90%;
            max-width: 1200px;
            margin-top: 60px; /* Add margin to avoid overlap with the fixed Weekly Total capsule */
        }

        /* Apply green fill only to capsules that are NOT weekly-total-capsule */
        .capsule:not(.weekly-total-capsule) {
            position: relative; /* To position the pseudo-element */
            overflow: hidden; /* Ensure the pseudo-element doesn't overflow */
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #1e1e1e; /* Original capsule background */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
            transition: transform 0.2s ease;
        }

        /* Green fill pseudo-element */
        .capsule:not(.weekly-total-capsule)::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: var(--fill-width, 0%);
            background-color: rgba(76, 175, 80, 0.2); /* Subtle green with transparency */
            border-radius: inherit; /* Match the capsule's border-radius */
            z-index: 0; /* Place it behind the content */
            transition: width 0.5s ease; /* Smooth transition for width changes */
        }

        /* Ensure content stays above the pseudo-element */
        .capsule:not(.weekly-total-capsule) .date,
        .capsule:not(.weekly-total-capsule) .day,
        .capsule:not(.weekly-total-capsule) .hours {
            position: relative;
            z-index: 1;
        }

        .capsule:hover {
            transform: translateY(-5px);
        }

        .weekly-total-capsule {
            border: 2px solid gold; /* Golden border */
            font-size: 1.2em; /* Slightly larger text */
            margin-bottom: 25px;
            position: fixed; /* Make it fixed */
            top: 100px; /* Adjust based on header height */
            width: 90%;
            max-width: 1200px;
            background-color: #1e1e1e; /* Match the capsule background */
            z-index: 2; /* Ensure it stays above the other capsules */
            box-shadow: 0 2px 8px rgba(255, 215, 0, 0.5); /* Slight shadow for emphasis */
            border-radius: 10px; /* Ensure border-radius matches regular capsules */
            padding: 20px; /* Ensure padding matches regular capsules */
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: transform 0.2s ease;
            overflow: hidden; /* Maintain consistency */
        }

        .weekly-total-capsule:hover {
            transform: translateY(-5px);
        }

        .weekly-total-capsule .winner {
            font-size: 22px;
            font-weight: 600;
            color: #4a8cff;
            margin-left: 20px;
        }

        .capsule .date,
        .capsule .day {
            font-size: 18px;
            color: #b0c4de;
        }

        .capsule .hours {
            font-size: 20px;
            font-weight: 500;
            color: #e0e0e0;
        }

        .capsule .winner {
            font-size: 22px;
            font-weight: 600;
            color: #4a8cff;
        }

        .capsule .winner.tie {
            color: #ff8c00; /* Different color for a tie */
        }

        .spinner {
            border: 8px solid #f3f3f3; /* Light grey */
            border-top: 8px solid #4a8cff; /* Blue */
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 1s linear infinite;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 20; /* Ensure it stays above other content */
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .winner-hours {
            border: 1px solid #4a8cff; /* Thin green border */
            border-radius: 5px; /* Slightly rounded corners */
            padding: 4px 8px; /* Padding for some space around the text */
            transition: transform 0.2s ease; /* Smooth transition on hover */
        }

        .winner-hours:hover {
            transform: translateY(-2px); /* Slight lift on hover for emphasis */
        }

        /* Styles for "View full logs" link */
        .view-full-logs {
            display: block;
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
            color: var(--text-secondary);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .view-full-logs:hover {
            color: var(--primary);
        }

        /* Responsive Styles */
        @media screen and (max-width: 768px) {
            /* Adjust body padding for mobile */
            body {
                padding-top: 100px; /* Ensure proper spacing at the top */
            }

            /* Adjust the header for mobile */
            .header {
                padding: 16px 24px; /* Increase padding for mobile */
            }

            .header-title {
                font-size: min(4vw, 16px); /* Font size scales with viewport width */
                margin-right: 12px; /* Maintain space between title and links */
            }

            .nav-link {
                font-size: min(3vw, 14px); /* Font size scales with viewport width */
            }

            /* Adjust capsule list margin */
            .capsule-list {
                margin-top: 60px; /* Ensure spacing between header and capsules */
            }

            /* Adjust the Weekly Total capsule */
            .weekly-total-capsule {
                font-size: min(2.5vw, 12px); /* Font size scales with viewport width */
                top: 70px; /* Adjust based on mobile header height */
                width: 90%; /* Reduce width to ensure it fits within screen */
                max-width: 90%; /* Ensure it does not exceed screen width */
                padding: 16px; /* Increase padding slightly */
                margin: 0 auto; /* Center the capsule horizontally */
                box-sizing: border-box; /* Include padding in the width calculation */
            }

            /* Adjust regular capsules for mobile */
            .capsule:not(.weekly-total-capsule) {
                display: flex; /* Use flexbox for alignment */
                flex-wrap: wrap; /* Allow items to wrap if needed */
                align-items: center; /* Align items along the center */
                justify-content: space-between; /* Space items evenly */
                padding: 16px; /* Increase padding */
                margin-bottom: 12px; /* Maintain margin between capsules */
            }

            /* Adjust the individual elements inside regular capsules */
            .capsule:not(.weekly-total-capsule) .date,
            .capsule:not(.weekly-total-capsule) .day,
            .capsule:not(.weekly-total-capsule) .hours,
            .capsule:not(.weekly-total-capsule) .winner {
                font-size: min(3vw, 14px); /* Font size scales with viewport width */
                flex: 1; /* Allow each item to grow and shrink */
                text-align: center; /* Center align text */
                margin: 0 5px; /* Add small margin to prevent overlap */
            }

            /* Spinner adjustments for mobile */
            .spinner {
                width: 20px;
                height: 20px;
                border-width: 2px; /* Reduce spinner size further */
            }

            /* Adjust weekly total winner text */
            .weekly-total-capsule .winner {
                font-size: min(3.5vw, 16px); /* Font size scales with viewport width */
            }

            /* Ensure content fits within regular capsules */
            .capsule:not(.weekly-total-capsule) * {
                word-wrap: break-word; /* Ensure text wraps properly if necessary */
            }

            /* Adjust winner-hours for mobile */
            .winner-hours {
                padding: 4px 6px; /* Increase padding slightly */
                font-size: min(3vw, 14px); /* Font size scales with viewport width */
            }

            /* Adjust "View full logs" link for mobile */
            .view-full-logs {
                font-size: min(3vw, 12px);
            }
        }