body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f4f9;
    margin: 0;
    transition: background-image 0.5s ease;
    background-size: cover;
    background-position: center;
}

/* --- Logo Styling --- */
#app-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2em; /* Increase size slightly */
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #E74C3C; /* Add a subtle red underline */
    letter-spacing: -1px;
}
.logo-icon {
    width: 40px; /* Adjust this value to your desired width */
    height: auto; /* Maintain aspect ratio */
    margin: 0 5px; /* Add some spacing around the image */
    vertical-align: middle; /* Helps align with text */
}

.logo-icon {
    font-size: 1.2em; /* Make the emojis slightly larger */
    margin: 0 5px;
    line-height: 1; /* Ensure vertical alignment is correct */
}

/* Optional: Keep the Tomato Red */
#app-logo .logo-icon:last-child {
    color: #E74C3C;
}

/* Optional: Keep the Tomato Red */
#app-logo .logo-icon:last-child {
    color: #E74C3C;
}
.pomodoro-container {
    background-color: rgba(255, 255, 255, 0.45);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 390px;
}
.pomodoro-container:hover  {
    background-color: rgba(255, 255, 255, 0.95);

}

#pomodoro-count {
    font-weight: bold;
    font-size: 1.2em;
    
    /* NEW: Gradient Background for the counter span */
    background: linear-gradient(90deg, #e74c3c, #ff7e5f); /* Red to Salmon/Orange */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Makes the text invisible, showing the clipped background */
}

h1 {
    color: #e74c3c;
    margin-bottom: 20px;
}

/* --- Mode Tabs --- */
.mode-tabs button {
    padding: 10px 15px;
    margin: 5px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background-color: #eee;
    transition: background-color 0.3s;
    font-weight: 500;
}

.mode-tabs button.active {
    background-color: #e74c3c;
    color: white;
    font-weight: bold;
}

/* --- Timer Display --- */
.timer-display {
display: flex; 
    justify-content: center;
    align-items: center;
    
    font-size: 150px;
    margin: 30px 0;
    font-weight: 700;
    /* NEW: Gradient Background for the large timer number */
    background: linear-gradient(135deg, #770cec 0%, #d0191b 100%); /* Red to Darker Red */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Makes the text invisible, showing the clipped background */
	text-shadow: 
        4px 4px 6px rgba(0, 0, 0, 0.4), 
        -1px -1px 0px rgba(255, 255, 255, 0.2); 
    /* End Gradient */
}
/* Ensure individual components have the right font properties */
.time-component {
    line-height: 1; /* Helps ensure perfect vertical alignment */
}
/* --- Controls --- */
.controls button {
    padding: 12px 25px;
    margin: 0 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s;
}

#pomodoro-tab {
			border-radius: 8px; 
			border-bottom-left-radius: 20px;
			border-top-right-radius: 20px;
			box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4), -1px -1px 0 rgba(255, 255, 255, 0.2);
}
#short-break-tab {
			border-radius: 8px; 
			border-bottom-left-radius: 20px;
			border-bottom-right-radius: 20px;
			box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4), -1px -1px 0 rgba(255, 255, 255, 0.2);
}
#long-break-tab {
			border-radius: 8px; 
			border-top-left-radius: 20px;
			border-bottom-right-radius: 20px;
			box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4), -1px -1px 0 rgba(255, 255, 255, 0.2);
}

#start-pause-btn {
    background-color: #2ecc71;
    color: white;
			border-radius: 8px; 
			border-top-left-radius: 20px;
			border-bottom-left-radius: 20px;
			box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4), -1px -1px 0 rgba(255, 255, 255, 0.2);
}

#reset-btn {
			background-color: #95a5a6;
			color: white;
			border-radius: 8px; 
			border-top-right-radius: 20px;
			border-bottom-right-radius: 20px;
			box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4), -1px -1px 0 rgba(255, 255, 255, 0.2);
			
}

	.pomo-btn {transition: transform 0.2s, box-shadow 0.2s;}
    .pomo-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
        }
	.pomo-btn:active {
            transform: translateY(0);
        }
	.pomo-txt {transition: transform 0.2s, box-shadow 0.2s;}
    .pomo-txt:hover {
            transform: translateY(-2px);
            text-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
        }
	.pomo-txt:active {
            transform: translateY(0);
        }	
.counter {
    margin-top: 20px;
    font-size: 1.1em;
	color: #333; /* Default text color for the label */
}

/* --- Settings Button Style --- */
.settings-btn {
    background: none;
    border: 0px solid #ccc;
    color: #111111;
    padding: 8px 15px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 15px;
	font-size:30px;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4), -1px -1px 0 rgba(255, 255, 255, 0.2);
	
}

/* --- Modal Styles --- */
.modal {
    display: none;
    position: fixed;
    z-index: 100; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto; 
    padding: 25px;
    border: 1px solid #888;
    width: 90%; 
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
    text-align: left;
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
    color: #000;
    text-decoration: none;
}

/* --- Settings Groups --- */
hr {
    border: 0;
    height: 1px;
    background: #ccc;
    margin: 20px 0;
}

.modal-content h2 {
    color: #e74c3c;
    margin-bottom: 15px;
    font-size: 1.2em;
}

.setting-group {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; 
}

.sound-settings-section {
    margin-bottom: 20px;
}
.sound-settings-section > label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

/* Styling for duration number inputs */
.setting-group input[type="number"] {
    width: 60px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
}

/* Styling for URL text inputs (which is now readonly for file names) */
.setting-group input[type="text"] {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 0 5px;
    background-color: #f9f9f9;
}

/* Styling for the Volume range slider */
.setting-group input[type="range"] {
    flex-grow: 1; 
    margin: 0 10px;
}

/* Styling for the new "Select File" buttons */
#select-audio-btn, #select-image-btn, .select-sound-btn {
    padding: 8px 10px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9em;
}

#select-audio-btn:hover, #select-image-btn:hover, .select-sound-btn:hover {
    background-color: #e0e0e0;
}

/* Styling for the new select dropdowns */
.file-list-select select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    font-size: 0.9em;
    flex-grow: 1;
    margin-left: 5px;
}

/* Ensure the setting groups display nicely with the checkbox */
.setting-group input[type="checkbox"] {
    width: auto;
    margin-left: auto;
}

#save-settings-btn {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    margin-top: 25px;
    transition: background-color 0.2s;
}

#save-settings-btn:hover {
    background-color: #c0392b;
}

/* --- Settings Tabs Styling --- */
.settings-tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
}

.tab-button {
    flex-grow: 1;
    padding: 10px 0;
    margin: 0 5px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    color: #95a5a6; /* Default inactive color */
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.tab-button.active {
    color: #e74c3c; /* Active primary color */
    border-bottom-color: #e74c3c;
}

/* Hide inactive tab content */
.tab-content {
    display: none;
    padding-top: 15px; /* Space between tabs and content */
}

/* Show active tab content */
.tab-content.active {
    display: block;
}

/* Cleanup the HRs now that content is better separated */
.tab-content hr {
    margin: 20px 0;
}

/* Remove the extra HRs we added in PHP to separate tabs */
.modal-content hr:first-of-type {
    display: none;
}

/* ========================================= */
/* === MOBILE RESPONSIVENESS MEDIA QUERY === */
/* ========================================= */

@media (max-width: 800px) {
    
    /* --- Main Container --- */
    .pomodoro-container {
        /* Reduce the container width to allow for some padding on the sides */
        width: 80%;
        padding: 20px 10px;
		height:80vh;
    }

    /* --- Logo and Title --- */
    #app-logo {
        /* Reduce the overall font size for the header */
        font-size: 1.8em;
        margin-bottom: 15px;
    }
    
    .app-logo-image {
        /* Make the logo image smaller on mobile */
        width: 30px; 
    }
    
    /* --- Timer Display --- */
    .timer-display {
        /* Significantly reduce the massive timer font size */
        font-size: 130px; 
        margin: 20px 0;
		text-shadow: 
        4px 4px 6px rgba(0, 0, 0, 0.4), 
        -1px -1px 0px rgba(255, 255, 255, 0.2); 
    }

    /* --- Mode Tabs --- */
    .mode-tabs {
        /* Allow tabs to wrap if necessary, though 3 should usually fit */
        flex-wrap: wrap; 
    }

    .mode-tabs button {
        /* Make tab buttons slightly smaller and take up more width */
        font-size: 0.9em;
        padding: 8px 10px;
        flex-grow: 1; /* Make buttons expand evenly */
    }

    /* --- Controls (Start/Reset) --- */
    .controls {
        /* Make the main buttons stack vertically or take full width */
        flex-direction: column;
        gap: 10px;
        margin-bottom: 10px;
    }

    .controls button {
        /* Make controls full width */
        width: 40%;
        padding: 12px;
        font-size: 1.1em;
    }

    /* --- Settings Button --- */
    .settings-btn {
        /* Make the settings button slightly larger and easier to tap */
        font-size: 1.5em;
        padding: 10px;
    }
    
    /* --- Settings Modal --- */
    .modal-content {
        /* Increase the modal padding and make it take up more screen space */
        width: 90%;
        max-width: none;
        padding: 15px;
        margin: 10vh auto;
    }

    /* Stack settings groups for better touch experience */
    .setting-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .setting-group label, 
    .setting-group input[type="number"], 
    .setting-group select,
    .setting-group button {
        width: 100%;
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
    }
    
    /* Settings Tabs */
    .settings-tabs {
        flex-direction: column;
        gap: 5px;
        margin-bottom: 15px;
    }
    
    .settings-tabs .tab-button {
        width: 100%;
        padding: 10px;
    }
}
@media (max-width: 450px) {
    /* --- Timer Display --- */
    .timer-display {
        /* Significantly reduce the massive timer font size */
        font-size: 110px; 
        margin: 20px 0;
		text-shadow: 
        4px 4px 6px rgba(0, 0, 0, 0.4), 
        -1px -1px 0px rgba(255, 255, 255, 0.2); 
    }
}
@media (max-width: 400px) {
    /* --- Timer Display --- */
    /* --- Timer Display --- */
    .timer-display {
        flex-direction: column; /* FORCES MINUTES ABOVE SECONDS */
        font-size: 150px; /* Adjust size for the smaller space */
        margin: 15px 0;
		text-shadow: 
        4px 4px 6px rgba(0, 0, 0, 0.4), 
        -1px -1px 0px rgba(255, 255, 255, 0.2); 
    }
	    #time-separator {
        display: none; /* Hide the colon in vertical mode */
    }
	
#pomodoro-tab {
			border-radius: 8px; 
			border-bottom-left-radius: 20px;
			border-bottom-right-radius: 20px;
}
#short-break-tab {
			border-radius: 8px; 
			border-bottom-left-radius: 20px;
			border-bottom-right-radius: 20px;
}
#long-break-tab {
			border-radius: 8px; 
			border-bottom-left-radius: 20px;
			border-bottom-right-radius: 20px;
}
}

@media (max-width: 300px) {
    /* --- Timer Display --- */
    .timer-display {
        flex-direction: column; /* FORCES MINUTES ABOVE SECONDS */
        font-size: 150px; /* Adjust size for the smaller space */
        margin: 15px 0;
		text-shadow: 
        4px 4px 6px rgba(0, 0, 0, 0.4), 
        -1px -1px 0px rgba(255, 255, 255, 0.2); 
    }
	    #time-separator {
        display: none; /* Hide the colon in vertical mode */
    }
#pomodoro-tab {
			border-radius: 8px; 
			border-bottom-left-radius: 20px;
			border-bottom-right-radius: 20px;
}
#short-break-tab {
			border-radius: 8px; 
			border-bottom-left-radius: 20px;
			border-bottom-right-radius: 20px;
}
#long-break-tab {
			border-radius: 8px; 
			border-bottom-left-radius: 20px;
			border-bottom-right-radius: 20px;
}
}
/* ========================================= */
/* === EXTREME MOBILE (max-width: 250px) === */
/* === Vertical Stacking === */
/* ========================================= */

@media (max-width: 250px) {
    
    /* --- Main Container --- */
    .pomodoro-container {
        width: 90%; 
        padding: 10px 5px; 
		height:90vh;
    }

    /* --- Logo and Title (#app-logo) --- */
    #app-logo {
        flex-direction: column;
        font-size: 1.5em; 
        margin-bottom: 10px;
        padding-bottom: 5px; 
    }
    
    .app-logo-image,
    .logo-icon {
        margin: 5px 0; 
    }

    /* --- Timer Display (Vertical Stacking) --- */
    .timer-display {
        flex-direction: column; /* FORCES MINUTES ABOVE SECONDS */
        font-size: 120px; /* Adjust size for the smaller space */
        margin: 15px 0;
		text-shadow: 
        4px 4px 6px rgba(0, 0, 0, 0.4), 
        -1px -1px 0px rgba(255, 255, 255, 0.2); 
    }
    
    #time-separator {
        display: none; /* Hide the colon in vertical mode */
    }
    
    /* Give minute and second components margins so they don't touch */
    #min-display, #sec-display {
        margin: 0;
        line-height: 1;
    }
    
    /* --- Mode Tabs (.mode-tabs) --- */
    .mode-tabs {
        flex-direction: column; 
    }

    .mode-tabs button {
        width: 80%;
        margin: 2px 0;
    }

    /* --- Controls (Start/Reset buttons) --- */
    .controls {
        flex-direction: column; 
        gap: 5px;
    }
    
    .controls button {
        width: 60%;
        margin-bottom: 10px;
    }
    
    /* --- Rounded Button Styling (Vertical Stacked) --- */
    /* Mode Tabs */
    #pomodoro-tab {
        border-radius: 8px; 
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
    #short-break-tab {
        border-radius: 8px; 
    }
    #long-break-tab {
        border-radius: 8px; 
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    
    /* Controls */
    #start-pause-btn {
        border-radius: 8px; 
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        margin-bottom: 10; /* Remove bottom margin to align with reset */
    }
    #reset-btn {
        border-radius: 8px; 
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    
    /* --- Settings Modal adjustments for extreme narrowness --- */
    .modal-content {
        padding: 10px;
        width: 90%;
        max-width: none;
    }

    .settings-tabs,
    .setting-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}