:root {
    --bg-color-light: #FFFFFF;
    --bg-color-dark: #1E1E2F;
    --container-bg-light: #F0F0F5;
    --container-bg-dark: #212126;
    --text-color-light: #000000;
    --text-color-dark: #FFFFFF;
    --input-bg-light: #FFFFFF;
    --input-bg-dark: #3A3A55;
    --button-bg-light: #E0E0E0;
    --button-bg-dark: #4E4E78;
    --button-hover-bg-light: #D0D0D0;
    --button-hover-bg-dark: #6A6A9D;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-family: 'Arial', sans-serif;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.container {
    text-align: center;
    padding: 20px 40px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.title {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
}

.timer {
    font-size: 48px;
    margin: 20px;
}

.controls {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.controls input,
.controls button,
.controls select {
    margin: 5px;
    padding: 10px 15px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
            outline: none;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        }

        .controls button {
            cursor: pointer;
            transition: background-color 0.2s ease-in-out;
        }

        .controls button:hover {
            transition: background-color 0.2s ease-in-out;
        }

        .controls select {
            cursor: pointer;
        }

        .input-group {
            display: flex;
            gap: 10px;
        }

        .dark-theme {
            --bg-color: var(--bg-color-dark);
            --container-bg: var(--container-bg-dark);
            --text-color: var(--text-color-dark);
            --input-bg: var(--input-bg-dark);
            --button-bg: var(--button-bg-dark);
            --button-hover-bg: var(--button-hover-bg-dark);
        }

        .light-theme {
            --bg-color: var(--bg-color-light);
            --container-bg: var(--container-bg-light);
            --text-color: var(--text-color-light);
            --input-bg: var(--input-bg-light);
            --button-bg: var(--button-bg-light);
            --button-hover-bg: var(--button-hover-bg-light);
        }

        body.light-theme {
            background-color: var(--bg-color-light);
            color: var(--text-color-light);
        }

        body.dark-theme {
            background-color: var(--bg-color-dark);
            color: var(--text-color-dark);
        }

        .container.light-theme {
            background-color: var(--container-bg-light);
        }

        .container.dark-theme {
            background-color: var(--container-bg-dark);
        }

        .controls input.light-theme,
        .controls select.light-theme,
        .controls button.light-theme {
            background-color: var(--input-bg-light);
            color: var(--text-color-light);
        }

        .controls input.dark-theme,
        .controls select.dark-theme,
        .controls button.dark-theme {
            background-color: var(--input-bg-dark);
            color: var(--text-color-dark);
        }

        .controls button.light-theme:hover {
            background-color: var(--button-hover-bg-light);
        }

        .controls button.dark-theme:hover {
            background-color: var(--button-hover-bg-dark);
        }

        .top-right-controls {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 10px;
        }

        .top-right-controls select,
        .top-right-controls button {
            padding: 8px 10px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        }

        .footer {
            position: absolute;
            bottom: 10px;
            font-size: 12px;
            color: #999;
        }