/* Styles for the top-left menu (copied from upcoming-events.html) */
      .top-right-menu {
        position: absolute;
        top: 20px; /* Adjust distance from the top */
        right: 20px; /* Adjust distance from the right */
        background-color: #ffffff;
        padding: 15px 20px;
        border: 2px solid #007bff; /* Prominent blue border */
        border-radius: 5px;
        z-index: 1000;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Subtle shadow for better visibility */
      }

      .top-right-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      .top-right-menu ul li {
        margin-bottom: 8px;
      }

      .top-right-menu ul li:last-child {
        margin-bottom: 0;
      }

      .top-right-menu ul li a {
        text-decoration: none;
        color: #007bff;
        font-weight: bold;
        display: block;
      }

      .top-right-menu ul li a:hover {
        text-decoration: underline;
        color: #0056b3;
      }
      /* Auth Links Styles */
      #auth-container {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #eee;
        font-size: 0.9em;
        text-align: center;
      }
      #auth-container a {
        font-weight: normal;
      }
      .user-session span {
        margin-right: 10px;
        font-weight: bold;
      }
      #logout-btn {
        background-color: #dc3545; color: white; border: none;
        padding: 4px 8px; border-radius: 3px; cursor: pointer;
        font-size: 0.9em;
      }
      #logout-btn:hover { background-color: #c82333; }

      /* General body styles (adapted from upcoming-events.html) */
      body {
        font-family: Arial, sans-serif;
        font-size: 14px;
        color: #333; /* Default text color for content */
        background-color: #fff; /* Default background */
        margin: 0;
        padding: 0;
      }

      .page-container {
        max-width: 900px;
        margin: 20px auto;
        padding: 20px;
        padding-top: 80px; /* Space for the absolute positioned menu */
      }

      .page-container h1 {
        color: #33342D;
      }
       a {
        color: #007bff;
        text-decoration: none;
      }
      a:hover {
        color: #0056b3;
        text-decoration: underline;
      }
      .language-switcher {
        text-align: center;
        margin-top: 15px; /* Adjust as needed */
        margin-bottom: 20px;
      }
      .language-switcher button {
        background-color: transparent;
        border: none;
        padding: 0;
        margin: 0 5px;
        cursor: pointer;
        border-radius: 5px; /* Rounded corners for the button/outline */
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        outline: 2px solid transparent; /* For focus and active state */
        outline-offset: 2px;
      }
      .language-switcher button:hover {
        transform: scale(1.1); /* Enlarge on hover */
      }
      .language-switcher button.active {
        outline-color: #007bff; /* Highlight active language */
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.6); /* Add a glow */
      }
      .lang-flag {
        width: 36px; /* Larger flag */
        height: auto;
        border: 1px solid #ddd;
        border-radius: 4px; /* Rounded corners for the flag image */
        display: block; /* Remove extra space below image */
      }
      
      .sport-tags-container {
        text-align: center;
        margin-bottom: 25px;
        padding-top: 10px; /* Add some space if menu is close */
      }
      .sport-tag {
        background-color: #e9ecef;
        color: #495057;
        border: 1px solid #ced4da;
        padding: 8px 15px;
        margin: 0 5px 10px 5px; /* Added bottom margin for wrapping */
        border-radius: 20px; /* More rounded */
        cursor: pointer;
        font-size: 0.9em;
        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
        display: inline-block; /* Allow wrapping */
      }
      .sport-tag:hover, .sport-tag.active {
        background-color: #007bff;
        color: white;
        border-color: #0056b3;
      }

      .event-section {
        margin-bottom: 30px;
        background-color: #f9f9f9;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }

      .event-section h2 {
        color: #007bff;
        border-bottom: 2px solid #007bff;
        padding-bottom: 10px;
        margin-top: 0;
        font-size: 180%;
      }

      .event-list {
        list-style-type: none;
        padding-left: 0;
      }

      .event-item {
        background-color: #fff;
        border: 1px solid #eee;
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 5px;
      }

      .prediction-badge {
        display: inline-block;
        padding: 3px 8px;
        font-size: 0.8em;
        font-weight: bold;
        border-radius: 12px;
        color: white;
        margin-left: 10px;
        vertical-align: middle;
        cursor: help; /* Indicates to the user that there is a tooltip on hover */
      }
      .badge-correct { background-color: #28a745; }
      .badge-incorrect { background-color: #dc3545; }
      
      .event-item h3 {
        margin-top: 0;
        color: #33342D;
        font-size: 130%;
      }

      .event-item p {
        margin-bottom: 8px;
        line-height: 1.6;
        color: #555;
      }

      .event-item strong {
        color: #333;
      }

      .highlight-percentage {
        font-weight: bold;
        color: #28a745; /* A green color for emphasis (Bootstrap success green) */
      }
      .predictions-container {
        margin-top: 15px;
        padding-left: 10px;
      }
      .page-container h1 {
        color: #33342D;
        font-size: 250%;
        margin-top: 0;
        text-align: center;
        margin-bottom: 30px;
      }
      #accuracy-summary {
        background-color: #f0f8ff; /* A light, pleasant blue */
        border: 1px solid #b0c4de;
        border-radius: 8px;
        padding: 15px 20px;
        margin: 0 auto 25px auto; /* Center it and add margin below */
        max-width: 700px;
        text-align: center;
        font-size: 1.1em;
      }
      #accuracy-summary strong {
        color: #0056b3; /* A darker blue for the percentage */
        font-size: 1.3em;
      }
      #accuracy-summary h4 {
        margin-top: 20px;
        margin-bottom: 10px;
        color: #333;
        font-size: 1.1em;
        border-top: 1px solid #d0dce8;
        padding-top: 15px;
      }
      #accuracy-summary ul {
        list-style-type: none;
        padding: 0;
        margin: 0 auto;
        text-align: left;
        display: inline-block; /* To center the block of LIs */
      }
      #accuracy-summary li {
        margin-bottom: 12px; /* Increased margin for the bar */
        font-size: 0.95em;
      }
      #accuracy-summary li strong {
        font-size: 1.1em; /* Make percentage slightly bigger than text */
      }
      .accuracy-bar-container {
        background-color: #d0dce8; /* A light grey-blue, matching the h4 border */
        border-radius: 5px;
        height: 12px;
        margin-top: 5px;
        width: 100%;
        overflow: hidden; /* Ensures the inner bar's radius is visible */
      }
      .accuracy-bar {
        background-color: #007bff; /* A vibrant blue, matching the theme */
        height: 100%;
        border-radius: 5px;
        transition: width 0.5s ease-in-out;
      }
      .event-result {
        background-color: #e7f3ff;
        border-left: 4px solid #007bff;
        padding: 10px;
        margin-top: 15px;
        font-weight: bold;
      }
      .page-container p {
        line-height: 1.6;
        color: #333;
        margin-bottom: 15px;
        text-align: center;
      }
      .site-footer {
        margin-top: 3em;
        margin-bottom: 2em;
        padding: 1em;
        font-size: 0.9em;
        color: #555; /* A mid-dark grey for footer text */
        text-align: center;
      }
      .site-footer a {
        color: #007bff; /* Use the primary link color */
        text-decoration: none;
        margin: 0 10px; /* Space between links */
      }
      .site-footer a:hover {
        text-decoration: underline;
      }