body {
    font-family: 'Courier New', Courier, monospace; /* Add fallbacks */
    background-color: #333333; /* Dark background */
    color: #f0f0f0; /* Light text */
    margin: 0; /* Remove default body margin */
    display: flex; /* Enable flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    min-height: 100vh; /* Ensure full viewport height */
}

button, input, h1, h2, td, th { /* Added table cells/headers */
   font-family: inherit; /* Makes these elements use the body font */
}

.status-active-color {
    color: #4CAF50; /* Example color: a shade of green */
    font-weight: bold; /* Make it bold for clarity */
}

.container {
    background: transparent; /* Make the container transparent */
    padding: 40px; /* Add some padding around the content */
    /* box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); Optional: subtle shadow */
    max-width: 900px; /* Adjust as needed for the overall width */
    width: 90%; /* Take up 90% of the screen width on smaller devices */
    display: flex; /* Arrange timer, buttons, and login horizontally */
    align-items: center; /* Vertically align items within the container */
    position: relative; /* Required for absolute positioning of pseudo-element */
    overflow: hidden; /* Hides the part of the line that's off-screen */
    border: 1px solid transparent; /* Ensure a transparent border always exists */
    min-height: 200px; /* Example */
    justify-content: center; /* Center content horizontally within container */
}

.surprise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Darker, more dramatic overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.surprise-overlay.show {
    opacity: 1;
    visibility: visible;
}

.surprise-dialog {
    background: radial-gradient(circle at center, #2e2e2e 0%, #1a1a1a 100%);
    padding: 40px; /* Slightly larger padding */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    text-align: center;
    max-width: 550px;
    width: 90%;
    transform: scale(0.7);
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    opacity: 0;
}

.surprise-overlay.show .surprise-dialog {
    opacity: 1;
    transform: scale(1);
    animation: dialogGlow 2s ease-in-out infinite alternate;
}

@keyframes dialogGlow {
    from {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
    }
    to {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.5);
    }
}

.surprise-dialog h2 {
    color: #ffd700; /* Gold color for a festive feel */
    font-size: 2.8em;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
    letter-spacing: 2px;
}

.surprise-dialog p {
    font-size: 1.3em;
    line-height: 1.5;
    margin-bottom: 30px;
}

.surprise-dialog button {
    background-color: #ffd700;
    color: #333333;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.surprise-dialog button:hover {
    background-color: #ffc400;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.7);
}

.background-option img {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.background-option img.loaded {
    opacity: 1;
}

/* Style for the SVG container */
.border-loading-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicks on elements underneath */
    z-index: 10;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease; /* Smooth fade in/out */
}

/* Style for the SVG path/rect */
.border-path {
    fill: none; /* Explicitly no fill */
    stroke: white; /* Color of the moving line */
    stroke-width: 0.5; /* THICKNESS: Changed from 3 to 2 */
    stroke-linecap: butt; /* Makes the ends of the 'snake' rounded */
    stroke-linejoin: miter; /* Makes corners smoother for the 'snake' */

    /* These will be animated to create the snake effect */
    /* dasharray defines the length of the visible segment and the invisible gap */
    /* dashoffset moves that entire pattern along the path */
    stroke-dasharray: 60 400; /* Snake segment length (40) and a large gap (400) */
    stroke-dashoffset: 440; /* Start with the snake off-screen */

    animation: none; /* No animation by default */
}

/* Class to activate the animation */
.loading-active .border-loading-svg {
    opacity: 1; /* Make SVG visible */
}

.loading-active .border-path {
    /* Animating stroke-dashoffset will make the snake move */
    /* The animation duration determines speed */
    /* 'linear' for constant speed, 'infinite' for continuous loop */
    animation: snake-around 2.5s linear infinite; /* Adjust 2s for desired speed */
}

/* Keyframe animation for the "snake" effect */
@keyframes snake-around {
    from {
        stroke-dashoffset: 440; /* Start with the snake just off the path */
    }
    to {
        stroke-dashoffset: 0; /* Move the snake segment around the entire path */
    }
}

#header-section h1 {
  font-size: 2.8rem;
}

#agentName {
  font-size: 1.8rem;
}

#timer-section {
    width: 300px;
    text-align: left; /* Align timer text to the left */
    padding-right: 30px; /* Space between timer and buttons */
    border-right: 1px solid #000000; /* Subtle separator */
}

#timer {
    font-size: 4em; /* Make the timer huge */
    font-weight: bold;
    margin-bottom: 20px;
    color: #00bcd4; /* A more vibrant color for the timer */
    display: none;
}

#timer {
  display: none !important;
  visibility: hidden !important;
}

#timer.exceeded {
    color: red;
    animation: flickerAnimation 1s infinite alternate;
}

#timerWarning {
    color: red;
    margin-top: 5px;
}

.timer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none; /* hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 2000;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* dark tint over the overlay background */
.timer-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3); /* 25% opacity black */
  z-index: 0;
}

/* Circle progress */
.circle-timer {
  position: relative;
  width: 500px;   /* increased from 300px */
  height: 500px;  /* increased from 300px */
  z-index: 1; /* ensure timer and buttons are above tint */
}

.progress-ring__background {
  fill: none;
  stroke: #444;
  stroke-width: 10;
}

.progress-ring__circle {
  fill: none;
  stroke: #00bcd4; /* default teal */
  stroke-width: 10;
  stroke-linecap: butt;
  stroke-dasharray: 339; /* 2πr (r=54) */
  stroke-dashoffset: 339;
  transition: stroke-dashoffset 0.5s linear, stroke 0.5s ease;
}

.progress-ring {
  width: 100%;
  height: 100%;
  transform-origin: center;
}

/* Bio mode = spinning */
.progress-ring.spin {
  animation: spin 2s linear infinite; /* slower spin looks nice */
}

/* Bio mode = spinning ring */
.progress-ring.spin {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.progress-ring__circle.booting {
  stroke: #00bfff; /* blue while booting */
  stroke-dasharray: 339.292; /* circumference */
  stroke-dashoffset: 339.292;
  animation: spin-ring 1.2s linear forwards;
}

@keyframes spin-ring {
  from {
    stroke-dashoffset: 339.292;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.circle-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;   /* stack vertically */
  align-items: center;      /* center horizontally */
  justify-content: center;  /* center vertically */
  text-align: center;
  color: #f0f0f0;
  gap: 12px;                /* spacing between elements */
  z-index: 1; /* ensure timer and buttons are above tint */
}

#overlayTimer {
  font-size: 4.4em;
  font-weight: bolder;
  margin: 15px 0;
  color: white; 
  transition: color 0.3s ease;
}

/* Exceeded = red */
#overlayTimer.exceeded {
  color: red;
  animation: flickerOverlay 1s infinite alternate;
}

#overlayAllowed {
  font-size: 1.0rem;
  font-weight: 400;
  color: #ccc;
}

@keyframes flickerOverlay {
  0% { opacity: 1; }
  100% { opacity: 0.6; }
}

#overlayStatus {
  font-size: 2.2em;
  font-weight: bold;
  margin-bottom: 10px;
  text-transform: capitalize;
  color: yellow
}

#overlayStopBtn {
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 8px;
  background: transparent;
  color: #f0f0f0;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

#overlayStopBtn:hover {
  color: #f44336;
  border-color: #f44336;
}

#overlayExitBtn {
  font-size: 1.2em;
  border-radius: 8px;
  background: transparent;
  color: #f0f0f0;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

#overlayExitBtn:hover {
  color: #00bcd4;
  border-color: #00bcd4;
}

.timer-info-text {
    position: absolute;
    top: 50px; /* Adjust as needed */
    z-index: 2001; /* Above the overlay tint */
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2em;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

#startTimeInfo {
    left: 20px; /* Position on the left */
}

#stopTimeInfo {
    right: 20px; /* Position on the right */
}

@keyframes flickerAnimation {
    0% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* 1. Animation for 'Lunch' (fork & spoon clanking - subtle shake) */
@keyframes clank {
    0% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-5px) rotate(-7deg); } /* Increased movement */
    50% { transform: translateX(5px) rotate(7deg); }   /* Increased movement */
    75% { transform: translateX(-5px) rotate(-7deg); } /* Increased movement */
    100% { transform: translateX(0) rotate(0deg); }
}

/* 2. Animation for 'Break' (burger opening - stronger pulse) */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); } /* Increased scale */
    100% { transform: scale(1); }
}

/* 3. Animation for 'Bio' (people waving - more vigorous bounce/rotation) */
@keyframes wave {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-7px) rotate(10deg); } /* Increased movement */
    50% { transform: translateY(0) rotate(-10deg); }   /* Increased movement */
    75% { transform: translateY(-7px) rotate(10deg); } /* Increased movement */
    100% { transform: translateY(0) rotate(0deg); }
}


/* Apply transition for smooth entry/exit, and animation on hover */

/* For Break button icon */
#breakBtn .button-icon {
    transition: transform 0.2s ease-in-out; /* Smooth transition when not animated */
}
#breakBtn:hover .button-icon {
    animation: pulse 0.6s ease-in-out infinite; /* 'forwards' keeps the final state */
}

/* For Lunch button icon */
#lunchBtn .button-icon {
    transition: transform 0.2s ease-in-out;
}
#lunchBtn:hover .button-icon {
    animation: clank 0.5s ease-in-out infinite; /* Runs once per hover */
}

/* For Bio button icon */
#bioBtn .button-icon {
    transition: transform 0.2s ease-in-out;
}
#bioBtn:hover .button-icon {
    animation: wave 0.7s ease-in-out infinite;
}

#companyLogo { /* Or use #timer-section img */
    display: block;      /* Treat the image as a block element */
    width: 300px;        /* Set the width */
    margin-bottom: -30px; /* Keep the space below the logo */
    margin-left: -50px;   /* Auto margin left */
}

.button-section {
    flex-grow: 1; /* Allow buttons to take up available space */
    padding: 0 30px; /* Space between buttons and login */
    text-align: left; /* Align buttons to the left */
}

button {
    background: none; /* Remove background color */
    color: #f0f0f0; /* Light text color */
    border: none;
    padding: 10px 15px;
    font-size: 1.1em;
    cursor: pointer;
    transition: color 0.3s ease; /* Smooth hover effect */
    display: block; /* Stack buttons vertically */
    margin-bottom: 10px;
    text-align: left; /* Align button text to the left */
}

.timer-action-button {
    display: flex; /* Makes the button a flex container */
    align-items: center; /* This is the key: Vertically centers the icon and text */
    justify-content: flex-start; /* Aligns content to the left */
    gap: 10px; /* Adds space between the icon and the text (adjust as needed) */
    /* Add any other button styles here if you want them to be specific to these action buttons */
    padding: 10px 15px; /* Ensure consistent padding */
    width: fit-content; /* Make button only as wide as its content (optional, or set a fixed width) */
}

/* Existing .button-icon, adjusted size */
.button-icon {
    width: 36px; /* Adjusted icon size, experiment to find what fits best */
    height: 36px; /* Adjusted icon size */
    /* No need for vertical-align when using flexbox on the parent */
}

.dialog-status-text {
    color: #4CAF50; /* A distinct color, similar to .status-active-color */
    font-size: 1.4em; /* Make the font size larger for clarity */
    font-weight: bold; /* Make the text bold */
    text-transform: capitalize; /* Ensure the first letter is capitalized */
}

/* Styles for the icon within the confirmation dialog */
.dialog-status-icon {
    width: 28px; /* Adjust icon size as needed */
    height: 28px;
    vertical-align: middle; /* Helps align the icon with the text */
}

button:hover {
    color: #00bcd4; /* Highlight on hover */
}

button:disabled {
    color: #777;
    cursor: not-allowed;
}

button.active-status {
    color: #4caf50; /* Green for active status */
    font-weight: bold;
}

.login-section {
    width: 300px; /* Adjust width of the login section */
    padding-left: 30px; /* Space between buttons and login */
    text-align: left; /* Align login elements to the left */
    border-left: 1px solid #000000; /* Subtle separator */
}

.login-section h2 {
    color: #f0f0f0;
    margin-bottom: 20px;
}

.input-container {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    width: 100%;
}

input, .password-toggle {
    padding: 10px 12px;
    font-size: 1em;
    border: 1px solid #555;
    background-color: #333; /* Dark input background */
    color: #f0f0f0;
    box-sizing: border-box;
    line-height: 1.5;
    border-radius: 5px;
}

#password {
    border-radius: 5px 0 0 5px;
    border-right: none;
    flex-grow: 1;
}

#userId {
    width: 100%;
    border-radius: 5px;
}

.password-toggle {
    border-radius: 0 5px 5px 0;
    border-left: none;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    cursor: pointer;
    background-color: #555;
}

#controls {
    display: none; /* Initially hidden */
    margin-top: 20px;
    text-align: left; /* Align controls to the left within their section */
}

#stopBtn, #logoutBtn {
    background: none; /* Remove background */
    color: #f44336; /* Red for stop/logout */
    border: none;
    padding: 10px 15px;
    font-size: 1.1em;
    cursor: pointer;
    transition: color 0.3s ease;
    display: inline-block; /* Display horizontally if needed */
    margin-right: 10px;
}

#stopBtn:hover, #logoutBtn:hover {
    color: #d32f2f;
}

#logoutBtn:disabled {
    color: #777;
    cursor: not-allowed;
}

#historyDisplay {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #222; /* Dark modal background */
    color: #f0f0f0;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    z-index: 1006;
    max-height: 80vh;
    overflow-y: auto;
    width: 90%;
    max-width: 700px;
    text-align: left; /* Align text within the modal */
}

#historyDisplay h2 {
    color: #f0f0f0;
    margin-bottom: 15px;
}

#historyTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    border: 1px solid #555;
}

#historyTable th, #historyTable td {
    border: 1px solid #555;
    padding: 10px 12px;
    text-align: left;
}

#historyTable th {
    background-color: #333;
    font-weight: 600;
    color: #eee;
}

#historyTable tr:nth-child(even) {
    background-color: #2a2a2a;
}

#historyTable tr:hover {
    background-color: #444;
}

#closeHistoryBtn, #exportHistoryBtn {
    background: none; /* Minimalist buttons */
    color: #f0f0f0;
    border: 1px solid #555; /* Add a border for visual distinction */
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease;
    display: inline-block;
    margin-top: 15px;
    margin-right: 10px; /* Add some spacing */
}

#closeHistoryBtn:hover, #exportHistoryBtn:hover {
    color: #00bcd4;
    border-color: #00bcd4;
}

.custom-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #222222; /* Or #333333 */
    color: #f0f0f0;
    padding: 25px;
    border: 1px solid #555555;
    z-index: 1006;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    min-width: 300px; /* Ensure a minimum width */
    max-width: 90%;   /* Responsive */
}

.custom-dialog p {
    margin-bottom: 20px;
    font-size: 1.1em;
    text-align: center;
    margin-top: 0; /* Remove default top margin */
}

.custom-dialog .button-container {
    text-align: center; /* This should already be there from Option 2 */
    /* Optional: Add/adjust top margin if needed for spacing */
    margin-top: 20px;
}

.custom-dialog-button {
    display: inline-block; /* CRITICAL: Makes buttons sit side-by-side */
    vertical-align: middle; /* Aligns buttons nicely if they have different heights (unlikely here) */

    /* Keep your existing styles from Option 2 */
    background: transparent;
    color: #f0f0f0;
    border: 1px solid #555555;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 1em;
    transition: color 0.2s ease, border-color 0.2s ease;
    margin: 0 5px; /* Provides space *between* the buttons */
}

.custom-dialog-button.confirm-button:hover {
    border-color: #00bcd4; /* Use theme accent for confirm hover */
    color: #00bcd4;
}

.custom-dialog-button.cancel-button:hover {
    border-color: #f44336; /* Use red accent for cancel hover */
    color: #f44336;
}

#scheduleDialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #222222; /* Match custom dialog background */
    color: #f0f0f0;
    padding: 25px;
    border: 1px solid #555555;
    z-index: 1006;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    min-width: 300px;
    max-width: 90%;
    text-align: center; /* Center content within the dialog */
}

#scheduleDialog h2 {
    color: #f0f0f0;
    margin-bottom: 20px;
    text-align: center; /* Center the header */
}

#scheduleDialog label {
    display: inline-block; /* Allows setting a width */
    width: 150px; /* Adjust this width as needed */
    margin-bottom: 5px;
    font-size: 1em;
    text-align: right; /* Align labels to the right */
    margin-right: 10px; /* Add some space between label and input */
}

#scheduleDialog input[type='time'],
#scheduleDialog select {
    padding: 10px 12px;
    font-size: 1em;
    border: 1px solid #555;
    background-color: #333;
    color: #f0f0f0;
    box-sizing: border-box;
    line-height: 1.5;
    border-radius: 5px;
    margin-bottom: 15px;
    width: calc(100% - 160px); /* Adjust width to account for label width and margin */
    display: inline-block; /* Align with the label */
    vertical-align: middle; /* Vertically align with the label */
}

#dialogUpdateScheduleBtn {
    background: transparent;
    color: #f0f0f0;
    border: 1px solid #555555;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 1em;
    transition: color 0.2s ease, border-color 0.2s ease;
}

#dialogUpdateScheduleBtn:hover {
    border-color: #00bcd4;
    color: #00bcd4;
}

#aboutDialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #222222; /* Or #333333, matching your custom dialog */
    color: #f0f0f0;
    padding: 25px;
    border: 1px solid #555555;
    z-index: 1006;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    min-width: 300px; /* Ensure a minimum width */
    max-width: 90%;   /* Responsive */
    text-align: center; /* Center the content */
}

#aboutDialog h2 {
    color: #f0f0f0;
    margin-top: 0;
    margin-bottom: 15px;
}

#aboutDialog p {
    margin-bottom: 15px;
    font-size: 1.1em;
}

#closeAboutBtn {
    background: transparent;
    color: #f0f0f0;
    border: 1px solid #555555;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 1em;
    transition: color 0.2s ease, border-color 0.2s ease;
    margin-top: 20px;
}

#closeAboutBtn:hover {
    border-color: #f44336; /* Use a color indicating close/cancel */
    color: #f44336;
}

.version-text {
    color: #00bcd4; /* Example: A nice blue color */
    /* You can add other styles too, like: */
    font-weight: bold;
    font-size: 0.9em;
}

.small-duration-input {
    width: 70px; /* Adjust this value as needed */
    padding: 5px; /* Make sure padding looks good too */
    box-sizing: border-box; /* Include padding in the width calculation */
}

.settings-container {
    position: absolute;
    top: 10px; /* Adjust as needed */
    right: 10px; /* Adjust as needed */
    z-index: 1000; /* Ensure it's on top */
}

.settings-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: #f0f0f0; /* CHANGE THIS LINE: Use a light color that stands out against #333333 */
    /* You had a duplicate 'color: white;' above, remove that or comment it out if it's still there */
    padding: 5px;
    border-radius: 5px;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    display: block;
}

.settings-button:hover {
    color: #00bcd4; /* This is the color on hover, which you want to keep */
    background-color: rgba(0, 0, 0, 0.1);
}

.settings-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 40px; /* Position below the button, adjust as needed */
    right: 0;
    background-color: #2a2a2a; /* Darker background to blend with body but still distinct */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle light border */
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Darker, more pronounced shadow */
    min-width: 150px; /* Adjust width as needed */
    z-index: 1001; /* Higher than button */
    padding: 5px 0; /* Padding inside the menu */
}

.settings-menu-item {
    display: block;
    width: 100%;
    padding: 10px 15px;
    text-align: left;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: #f0f0f0; /* Light text color to be visible on the dark menu background */
    transition: background-color 0.2s ease;
}

.settings-menu-item:hover {
    background-color: #444444; /* Slightly lighter dark background on hover for subtle highlight */
    /* You could also use: background-color: rgba(255, 255, 255, 0.1); for a semi-transparent highlight */
}

.dialog-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #222; /* Dark modal background */
    color: #f0f0f0;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    z-index: 1006; /* Ensure it's on top of the overlay and other elements */
    max-height: 80vh;
    overflow-y: auto;
    width: 90%;
    max-width: 450px; /* Adjust width as needed */
    text-align: center; /* Center text within the modal */
}

.dialog-modal h2 {
    color: #f0f0f0;
    margin-bottom: 15px;
}

.dialog-input {
    width: calc(100% - 20px); /* Adjust width considering padding */
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: #333;
    color: #f0f0f0;
    box-sizing: border-box; /* Include padding in width calculation */
}

.dialog-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: space-around; /* Distribute buttons */
    gap: 10px; /* Space between buttons */
}

.dialog-button {
    background: none;
    color: #f0f0f0;
    border: 1px solid #555;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease;
    flex-grow: 1; /* Make buttons grow to fill space */
}

.dialog-button.confirm {
    border-color: #00bcd4;
    color: #00bcd4;
}

.dialog-button.confirm:hover {
    background-color: rgba(0, 188, 212, 0.1);
}

.dialog-button.cancel {
    border-color: #f44336;
    color: #f44336;
}

.dialog-button.cancel:hover {
    background-color: rgba(244, 67, 54, 0.1);
}

.dialog-close-btn {
    background: none;
    border: 2px solid #ff1744; /* Red border */
    color: #ff1744; /* Red text */
    font-size: 1.8em;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%; /* Circular button */
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.dialog-close-btn:hover {
    background-color: #ff1744;
    color: #fff;
    transform: scale(1.1);
}

/* Styles for the header and content within the User Info dialog, ensuring consistency */
.custom-dialog .user-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #555; /* Subtle separator */
}

.custom-dialog .user-info-header h2 {
    margin: 0;
    font-size: 1.3em;
    color: #00bcd4;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.custom-dialog .user-info-content p {
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 12px;
    display: flex; /* Use flexbox for label-value alignment */
    justify-content: space-between; /* Space out label and value */
    align-items: baseline; /* Align text baselines */
    gap: 10px; /* Space between label and value */
}

.custom-dialog .user-info-content strong {
    color: #a7ffeb;
    flex-shrink: 0; /* Prevent label from shrinking */
    min-width: 130px;
}

/* Keyframe for fade-in animation (reuse if already exists) */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

#changeBackgroundDialog .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #555;
}

#changeBackgroundDialog .dialog-header h2 {
    margin: 0;
    font-size: 1.3em;
    color: #00bcd4;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.background-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Responsive grid */
    gap: 15px; /* Space between items */
    margin-top: 15px;
    max-height: 250px; /* Limit height to enable scrolling if many options */
    overflow-y: auto; /* Enable vertical scrolling */
    padding-right: 5px; /* Prevent scrollbar from overlapping content */
    border: 1px solid #555; /* Subtle border for the options area */
    padding: 10px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.3); /* Slightly darker background for the grid */
}

.background-option {
    cursor: pointer;
    border: 2px solid transparent; /* Default transparent border */
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    background-color: #444; /* Background for options */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* Fixed height for consistent sizing */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.background-option img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, cropping if necessary */
    display: block;
    border-radius: 6px; /* Slightly smaller border-radius than parent */
}

.background-option:hover {
    transform: translateY(-3px); /* Lift effect on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.background-option.selected {
    border-color: #00bcd4; /* Highlight color for selected option */
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.7); /* Glow effect for selected */
    transform: scale(1.05); /* Slightly enlarge selected */
}

#customBackgroundUrlInput {
    width: calc(100% - 20px); /* Adjust width considering padding/margin */
    padding: 10px;
    margin-top: 15px;
    margin-bottom: 10px;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: #2a2a2a;
    color: #f0f0f0;
    font-size: 0.9em;
}

#customBackgroundUrlInput::placeholder {
    color: #bbb;
}

#applyCustomBackgroundBtn,
#resetBackgroundBtn {
    margin-top: 10px;
    /* Reuses existing dialog-button styles */
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
    z-index: 1005;
    display: none;
}