:root {
    /* Base Theme Colors (Pomodoro/Work) */
    --pomodoro-bg: rgb(205, 205, 33);
    --pomodoro-card-bg: rgba(0,0,0,0.1);
    --pomodoro-text: #fff;
    --pomodoro-icon: #fff;
    --pomodoro-button-bg: rgba(255,255,255,0.15);
    --pomodoro-button-text: #fff;
    --pomodoro-segmented-active: #fff;
    --pomodoro-segmented-color-bg: rgba(255,255,255,0.2);
    --pomodoro-wave-dark: rgba(0,0,0,0.2);
    --pomodoro-wave-light: rgba(255,255,255,0.1);
    --pomodoro-shadow-dark: rgba(0,0,0,0.25);
    --pomodoro-shadow-light: rgba(255,255,255,0.08);
    --pomodoro-inset-shadow-dark: rgba(0,0,0,0.3);
    --pomodoro-inset-shadow-light: rgba(255,255,255,0.05);
    --pomodoro-divider: rgba(255,255,255,0.2);
    --pomodoro-add-task-border: rgba(255,255,255,0.3);

    /* Short Break Theme Colors */
    --shortbreak-bg: rgb(57, 112, 151);
    --shortbreak-card-bg: rgba(0,0,0,0.1);
    --shortbreak-text: #fff;
    --shortbreak-icon: #fff;
    --shortbreak-button-bg: rgba(255,255,255,0.15);
    --shortbreak-button-text: #fff;
    --shortbreak-segmented-active: #fff;
    --shortbreak-segmented-color-bg: rgba(255,255,255,0.2);
    --shortbreak-wave-dark: rgba(0,0,0,0.2);
    --shortbreak-wave-light: rgba(255,255,255,0.1);
    --shortbreak-shadow-dark: rgba(0,0,0,0.25);
    --shortbreak-shadow-light: rgba(255,255,255,0.08);
    --shortbreak-inset-shadow-dark: rgba(0,0,0,0.3);
    --shortbreak-inset-shadow-light: rgba(255,255,255,0.05);
    --shortbreak-divider: rgba(255,255,255,0.2);
    --shortbreak-add-task-border: rgba(255,255,255,0.3);

    /* Long Break Theme Colors */
    --longbreak-bg: rgb(56, 133, 138);
    --longbreak-card-bg: rgba(0,0,0,0.1);
    --longbreak-text: #fff;
    --longbreak-icon: #fff;
    --longbreak-button-bg: rgba(255,255,255,0.15);
    --longbreak-button-text: #fff;
    --longbreak-segmented-active: #fff;
    --longbreak-segmented-color-bg: rgba(255,255,255,0.2);
    --longbreak-wave-dark: rgba(0,0,0,0.2);
    --longbreak-wave-light: rgba(255,255,255,0.1);
    --longbreak-shadow-dark: rgba(0,0,0,0.25);
    --longbreak-shadow-light: rgba(255,255,255,0.08);
    --longbreak-inset-shadow-dark: rgba(0,0,0,0.3);
    --longbreak-inset-shadow-light: rgba(255,255,255,0.05);
    --longbreak-divider: rgba(255,255,255,0.2);
    --longbreak-add-task-border: rgba(255,255,255,0.3);

    /* Current Theme Variables */
    --current-bg: var(--pomodoro-bg);
    --current-card-bg: var(--pomodoro-card-bg);
    --current-text: var(--pomodoro-text);
    --current-icon: var(--pomodoro-icon);
    --current-button-bg: var(--pomodoro-button-bg);
    --current-button-text: var(--pomodoro-button-text);
    --current-segmented-active: var(--pomodoro-segmented-active);
    --current-segmented-color-bg: var(--pomodoro-segmented-color-bg);
    --current-wave-dark: var(--pomodoro-wave-dark);
    --current-wave-light: var(--pomodoro-wave-light);
    --current-shadow-dark: var(--pomodoro-shadow-dark);
    --current-shadow-light: var(--pomodoro-shadow-light);
    --current-inset-shadow-dark: var(--pomodoro-inset-shadow-dark);
    --current-inset-shadow-light: var(--pomodoro-inset-shadow-light);
    --current-divider: var(--pomodoro-divider);
    --current-add-task-border: var(--pomodoro-add-task-border);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 62.5%; }

body {
    font-family: "Poppins", sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background-color: var(--current-bg);
    color: var(--current-text);
    font-size: 1.5rem;
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}

.pomodoro-app-container {
    width: 100%;
    max-width: 450px;
    background-color: transparent;
    border-radius: 2rem;
    margin-top: 6rem;
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    margin-bottom: 1rem;
    width: 100%;
    max-width: 450px; /* Align with pomodoro-app-container */
    position: absolute;
    top: 2rem;
}

.logo-area {
    display: flex;
    align-items: center;
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--current-text);
}
.logo-area ion-icon {
    font-size: 2.7rem;
    margin-right: 0.8rem;
    color: var(--current-icon);
}

.nav-buttons {
    display: flex;
    align-items: center;
}

.nav-buttons button, .nav-buttons .btn-icon {
    margin-left: 0.8rem;
    padding: 0.8rem 1.2rem;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--current-button-text);
    background-color: var(--current-button-bg);
    border: none;
    border-radius: 0.8rem;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--current-shadow-dark), -0.2rem -0.2rem 0.5rem var(--current-shadow-light);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}
.nav-buttons button ion-icon {
    margin-right: 0.5rem;
    font-size: 1.6rem;
}
.nav-buttons .btn-icon {
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}
.nav-buttons .btn-icon svg {
    width: 2.2rem;
    height: 2.2rem;
    stroke: var(--current-icon);
}
.nav-buttons button:hover, .nav-buttons .btn-icon:hover {
    filter: brightness(1.05);
}
.nav-buttons button:active, .nav-buttons .btn-icon:active {
    box-shadow: inset 0.2rem 0.2rem 0.5rem var(--current-inset-shadow-dark),
                inset -0.15rem -0.15rem 0.4rem var(--current-inset-shadow-light);
    filter: brightness(0.95);
}

.timer-ui-card {
    background-color: var(--current-card-bg);
    border-radius: 2rem;
    padding: 2.5rem;
    box-shadow: 0.5rem 0.5rem 1rem var(--current-shadow-dark),
                -0.4rem -0.4rem 0.8rem var(--current-shadow-light);
    color: var(--current-text);
    transition: background-color 0.4s ease-in-out;
    text-align: center;
}

.timer-modes.segmented-control {
    width: 100%;
    max-width: 36rem;
    margin: 0 auto 2rem auto;
    height: 4.5rem;
    box-shadow: 0.2rem 0.2rem 0.5rem var(--current-shadow-dark),
                -0.1rem -0.1rem 0.4rem var(--current-shadow-light);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    position: relative;
    background-color: transparent;
}
.timer-modes.segmented-control input {
    display: none;
}
.timer-modes.segmented-control > input:checked + label {
    color: var(--current-segmented-active);
    font-weight: 600;
}
.timer-modes .segmented-control__1,
.timer-modes .segmented-control__2,
.timer-modes .segmented-control__3 {
    flex: 1;
    height: 100%;
    font-size: 1.5rem;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--current-button-text);
    transition: all 0.3s ease;
    z-index: 1;
}
.timer-modes .segmented-control__1 p,
.timer-modes .segmented-control__2 p,
.timer-modes .segmented-control__3 p {
    margin: 0;
}
.timer-modes .segmented-control__1:hover,
.timer-modes .segmented-control__2:hover,
.timer-modes .segmented-control__3:hover {
    color: var(--current-segmented-active);
}

.timer-modes .segmented-control__color {
    position: absolute;
    height: calc(100% - 0.8rem);
    top: 0.4rem;
    left: 0.4rem;
    border-radius: 0.8rem;
    box-shadow: inset 0.1rem 0.1rem 0.3rem var(--current-inset-shadow-dark), inset -0.05rem -0.05rem 0.2rem var(--current-inset-shadow-light);
    background-color: var(--current-segmented-color-bg);
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
::selection {
  background-color: var(--current-segmented-active); /* Or another color suitable for your theme */
  color: var(--current-bg); /* Or another text color suitable for your theme */
}

::-moz-selection { /* For Firefox */
  background-color: var(--current-segmented-active);
  color: var(--current-bg);
}
@media (max-width: 768px) {
    .app-header { padding: 0.5rem 16px; }

    .timer-modes .segmented-control__1,
    .timer-modes .segmented-control__2,
    .timer-modes .segmented-control__3 {
        font-size: 1.4rem; /* Reduced font size for mobile */
    }
    .timer-modes.segmented-control {
        max-width: 32rem; /* This is the existing cap for mobile */
    }
    .timer-ui-card {
        padding-left: 1.5rem;  /* Reduce left padding for mobile */
        padding-right: 1.5rem; /* Reduce right padding for mobile */
    }
}

.timer-visualization-area { position: relative; width: 300px; height: 300px; margin: 2.5rem auto 2rem auto; }
.progress-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-circle { fill: none; stroke-linecap: round; transition: stroke-dashoffset 0.3s linear, stroke 0.3s linear; }
.progress-bg-outer { stroke-width: 22; stroke: var(--current-card-bg); filter: drop-shadow(2px 2px 3px var(--current-shadow-dark)) drop-shadow(-1px -1px 2px var(--current-shadow-light)); }
.progress-heart { stroke-width: 22; stroke: var(--current-icon); }
.timer-center-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }
.timer-display { font-family: 'Consolas', 'Monaco', 'Lucida Console', 'Courier New', monospace; font-size: 7.5rem; font-weight: 700; color: var(--current-text); line-height: 1; font-variant-numeric: tabular-nums; }
.pomodoro-controls { display: flex; justify-content: center; align-items: center; gap: 2rem; margin-top: 1.5rem; margin-bottom: 2rem; }
.circle.pomodoro-start-control { width: 9rem; height: 9rem; margin: 0; display: grid; grid-template-rows: 1fr; justify-items: center; align-items: center; }
.circle.pomodoro-start-control .circle__btn { grid-area: 1 / 1; width: 7rem; height: 7rem; display: flex; justify-content: center; align-items: center; border-radius: 50%; color: var(--current-icon); z-index: 300; background: var(--current-button-bg); box-shadow: 0.4rem 0.4rem 0.8rem var(--current-shadow-dark), -0.3rem -0.3rem 0.6rem var(--current-shadow-light); cursor: pointer; position: relative; transition: all 0.15s ease-in-out; }
.circle.pomodoro-start-control .circle__btn ion-icon { font-size: 3.2rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.2s linear; color: var(--current-icon); }
.circle.pomodoro-start-control .circle__btn ion-icon.visibility { opacity: 1; }
.circle.pomodoro-start-control .circle__btn.shadow { box-shadow: inset 0.2rem 0.2rem 0.5rem var(--current-inset-shadow-dark), inset -0.15rem -0.15rem 0.4rem var(--current-inset-shadow-light); filter: brightness(0.95); }
.circle.pomodoro-start-control .circle__btn.shadow ion-icon { color: var(--current-segmented-active); }
.circle.pomodoro-start-control .circle__back-1, .circle.pomodoro-start-control .circle__back-2 { grid-area: 1 / 1; width: 7rem; height: 7rem; border-radius: 50%; filter: blur(1px); z-index: 100; }
.circle.pomodoro-start-control .circle__back-1 { box-shadow: 0.3rem 0.3rem 0.6rem var(--current-wave-dark), -0.3rem -0.3rem 0.6rem var(--current-wave-light); background: linear-gradient(to bottom right, var(--current-wave-dark) 0%, var(--current-wave-light) 100%); }
.circle.pomodoro-start-control .circle__back-2 { box-shadow: 0.3rem 0.3rem 0.6rem var(--current-wave-dark), -0.3rem -0.3rem 0.6rem var(--current-wave-light); }
#resetBtn.neumorphic-button { padding: 1.2rem 1.8rem; font-size: 1.5rem; font-weight: 500; color: var(--current-button-text); background-color: var(--current-button-bg); border: none; border-radius: 1rem; box-shadow: 0.3rem 0.3rem 0.6rem var(--current-shadow-dark), -0.2rem -0.2rem 0.5rem var(--current-shadow-light); cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; height: 7rem; width: 7rem; border-radius: 50%; justify-content: center; }
#resetBtn.neumorphic-button ion-icon { font-size: 2.8rem; color: var(--current-icon); }
#resetBtn.neumorphic-button:hover { filter: brightness(1.05); }
#resetBtn.neumorphic-button:active { box-shadow: inset 0.2rem 0.2rem 0.5rem var(--current-inset-shadow-dark), inset -0.15rem -0.15rem 0.4rem var(--current-inset-shadow-light); filter: brightness(0.95); }
.focus-message-area { margin-top:1.5rem; font-size: 1.5rem; color: var(--current-text); font-weight: 500; }
.focus-message-area .pomodoro-count { font-size: 1.3rem; margin-bottom: 0.3rem; color: var(--current-text); opacity: 0.8; }

/* Modal Styles (General) */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; justify-content: center; align-items: center; }
.modal-overlay.active { display: flex; }

/* Report Modal Specific */
#reportModal .modal {
    background-color: var(--current-card-bg);
    border-radius: 1.5rem;
    padding: 2rem;
    width: 90%;
    max-width: 450px;
    box-shadow: 0.5rem 0.5rem 1rem var(--current-shadow-dark), -0.4rem -0.4rem 0.8rem var(--current-shadow-light);
    position: relative;
    color: var(--current-text);
    overflow-y: auto;
    max-height: 90vh;
}
#reportModal .modal-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
    position: relative;
}
#reportModal .modal-header h2 {
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1rem;
}

/* Enhanced Report Styles */
.today-tabs {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--current-divider, rgba(255,255,255,0.15));
    margin-bottom: 1.5rem;
}

.today-tab-btn {
    background: none;
    border: none;
    color: var(--current-button-text);
    opacity: 0.7;
    padding: 0.8rem 1.5rem;
    font-size: 1.6rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease, color 0.2s ease, border-bottom-color 0.2s ease;
    border-bottom: 3px solid transparent;
    margin: 0 0.5rem;
}

.today-tab-btn:hover {
    opacity: 1;
}

.today-tab-btn.active {
    opacity: 1;
    color: var(--current-segmented-active);
    font-weight: 600;
    border-bottom-color: var(--current-segmented-active);
}

.chart-container {
    background: rgba(255,255,255,0.1);
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    backdrop-filter: blur(10px);
}

.chart-container canvas {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    background: #fff;
}

.weekly-stats, .monthly-stats {
    background: rgba(255,255,255,0.1);
    border-radius: 1rem;
    padding: 1rem;
    backdrop-filter: blur(10px);
}

.weekly-stats h3, .monthly-stats h3 {
    margin: 0 0 1rem 0;
    color: var(--current-text);
    font-size: 1.2rem;
    font-weight: 600;
}

.weekly-stats p, .monthly-stats p {
    margin: 0.5rem 0;
    color: var(--current-text);
    opacity: 0.9;
}

.data-disclaimer {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(255,255,255,0.05);
    border-radius: 0.5rem;
    border-left: 3px solid rgba(255,255,255,0.3);
}

.data-disclaimer p {
    margin: 0;
    color: var(--current-text);
    opacity: 0.8;
    font-style: italic;
}

.report-content-area {
    min-height: 300px;
}
#reportModal .report-tabs {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--current-divider, rgba(255,255,255,0.15));
    margin-bottom: 1.5rem;
}
#reportModal .report-tab-btn {
    background: none;
    border: none;
    color: var(--current-button-text);
    opacity: 0.7;
    padding: 0.8rem 1.5rem;
    font-size: 1.6rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease, color 0.2s ease, border-bottom-color 0.2s ease;
    border-bottom: 3px solid transparent;
    margin: 0 0.5rem;
}
#reportModal .report-tab-btn:hover {
    opacity: 1;
}
#reportModal .report-tab-btn.active {
    opacity: 1;
    color: var(--current-segmented-active);
    font-weight: 600;
    border-bottom-color: var(--current-segmented-active);
}
#reportModal .modal-header .modal-close {
    position: absolute;
    top: -0.5rem;
    right: 0rem;
    background: none;
    border: none;
    color: var(--current-icon);
    font-size: 2.8rem;
    cursor: pointer;
    padding: 0.5rem;
}
#reportModal .modal-header .modal-close ion-icon { --ionicon-stroke-width: 35px; }

#reportModal .modal-content {
    padding-top: 0;
}
#reportModal .report-content-area {
    font-size: 1.4rem;
    line-height: 1.7;
    padding: 0.5rem 0;
}
#reportModal .report-content-area p {
    margin: 0.8rem 0;
}
#reportModal .report-log {
    max-height: 280px;
    overflow-y: auto;
    padding-right: 0.5rem;
}
#reportModal .report-log p {
    margin: 0.5rem 0;
}

#reportModal .modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--current-divider, rgba(255,255,255,0.15));
}
#reportModal .modal-footer button {
    padding: 0.8rem 1.6rem; font-size: 1.4rem; font-weight: 500;
    color: var(--current-button-text); background-color: var(--current-button-bg);
    border: none; border-radius: 0.8rem;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--current-shadow-dark), -0.2rem -0.2rem 0.5rem var(--current-shadow-light);
    cursor: pointer; transition: all 0.2s ease;
}

#reportModal .modal-footer button:hover { filter: brightness(1.05); }
#reportModal .modal-footer button:active {
    box-shadow: inset 0.2rem 0.2rem 0.5rem var(--current-inset-shadow-dark), inset -0.15rem -0.15rem 0.4rem var(--current-inset-shadow-light);
    filter: brightness(0.95);
}

/* Settings Modal Specific Styles */
#settingsModal .modal {
    background-color: #ffffff;
    color: #333333;
    border-radius: 8px;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
    overflow-y: auto;
    max-height: 90vh;
    --current-card-bg: #ffffff;
    --current-text: #333333;
    --current-icon: #555555;
    --current-button-bg: #f0f0f0;
    --current-button-text: #333333;
    --current-shadow-dark: rgba(0,0,0,0.05);
    --current-shadow-light: rgba(255,255,255,0.3);
    --current-inset-shadow-dark: rgba(0,0,0,0.08);
    --current-inset-shadow-light: rgba(255,255,255,0.2);
}

#settingsModal .modal-header {
    display: flex; justify-content: center; align-items: center;
    padding-bottom: 15px; border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px; position: relative;
}
#settingsModal .modal-header h2 {
    font-size: 1.5rem; font-weight: 500; color: #6c757d;
    text-transform: uppercase; margin: 0; text-align: center;
}
#settingsModal .modal-header .modal-close {
    position: absolute; right: 0px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #6c757d;
    font-size: 2.8rem; padding: 0; line-height: 1; cursor: pointer;
}
#settingsModal .modal-header .modal-close ion-icon { --ionicon-stroke-width: 40px; }

#settingsModal .settings-section-title {
    display: flex; align-items: center; font-size: 1.2rem;
    font-weight: 600; color: #6c757d; text-transform: uppercase;
    margin-bottom: 15px;
}
#settingsModal .settings-section-title ion-icon {
    font-size: 1.8rem; margin-right: 8px; color: #6c757d;
}
#settingsModal .modal-content > label.settings-main-label {
    display: block; font-size: 1.4rem; font-weight: bold;
    color: #343a40; margin-bottom: 8px; margin-top: 5px;
}
#settingsModal .time-inputs-container {
    display: flex; justify-content: space-between;
    gap: 15px; margin-bottom: 25px;
}
#settingsModal .time-input-group { flex: 1; display: flex; flex-direction: column; }
#settingsModal .time-input-group label {
    font-size: 1.2rem; color: #6c757d; margin-bottom: 5px; font-weight: 500;
}
#settingsModal .modal-content input[type="number"] {
    padding: 8px 10px; font-size: 1.4rem; border: 1px solid #ced4da;
    border-radius: 4px; background-color: #f8f9fa; color: #495057;
    box-shadow: none; margin-bottom: 0; width: 100%; text-align: left;
}
#settingsModal .modal-content input[type="number"]:focus {
    outline: none; border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#settingsModal .switch-container {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0; margin-bottom: 0; border-bottom: 1px solid #e9ecef;
}
#settingsModal .switch-container:nth-of-type(3) {
     border-bottom: none; margin-bottom: -7px;
}
#settingsModal .switch-container label {
    font-size: 1.4rem; font-weight: 500; color: #495057;
    margin-bottom: 0; flex-grow: 1; margin-right: 10px;
}
#settingsModal .toggle-switch {
    position: relative; width: 48px; height: 26px;
    display: inline-block; flex-shrink: 0;
}
#settingsModal .toggle-switch input[type="checkbox"] { opacity: 0; width: 0; height: 0; }
#settingsModal .toggle-switch .slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #adb5bd; border-radius: 26px;
    transition: background-color 0.2s ease-in-out; box-shadow: none;
}
#settingsModal .toggle-switch .slider:before {
    position: absolute; content: ""; height: 20px; width: 20px;
    left: 3px; bottom: 3px; background-color: white; border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: transform 0.2s ease-in-out;
}
#settingsModal .toggle-switch input:checked + .slider { background-color: #8BC34A; }
#settingsModal .toggle-switch input:checked + .slider:before { transform: translateX(22px); }

#settingsModal .setting-input-container {
    display: flex; align-items: center; justify-content: space-between; padding: 12px 0;
}
#settingsModal .setting-input-container label {
    font-size: 1.4rem; font-weight: 500; color: #495057; flex-grow: 1;
}
#settingsModal .setting-input-container input[type="number"] {
    width: 70px; text-align: center; background-color: #f0f0f0;
}

#settingsModal .modal-footer {
    padding-top: 20px; margin-top: 10px; border-top: 1px solid #e0e0e0;
    display: flex; justify-content: flex-end;
}
#settingsModal .modal-footer button {
    padding: 8px 20px; font-size: 1.4rem; font-weight: 500;
    background-color: #28a745; color: white; border: none;
    border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer; transition: background-color 0.2s ease;
}
#settingsModal .modal-footer button:hover { background-color: #218838; filter: none; }
#settingsModal .modal-footer button:active {
    background-color: #1e7e34; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); filter: none;
}
#settingsModal .modal-content {
    max-height: calc(80vh - 150px); overflow-y: auto; padding-right: 10px;
}
@media (max-width: 480px) {
    #settingsModal .modal { padding: 15px; }
    #settingsModal .time-inputs-container { flex-direction: column; gap: 10px; margin-bottom: 15px; }
    #settingsModal .modal-content input[type="number"] { width: auto; }
    #settingsModal .setting-input-container input[type="number"] { width: 60px; }
}

/* Styles for the Pomodoro Technique explanation section */
.pomodoro-explanation-body { /* Renamed to avoid conflict */
    font-family: 'Arial', sans-serif;
    background-color: #f5f3f0; /* Applied to a container, not body */
    padding: 40px 20px;
    /* min-height: 100vh; Removed, as it's part of the main page */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px; /* Add some space above this section */
    border-radius: 15px; /* Optional: give it a rounded look */
    color: #2c2c2c; /* Set text color for this section */
}

.pomodoro-explanation-body .main-title {
    font-size: 3.5rem;
    font-weight: bold;
    color: #2c2c2c;
    text-align: center;
    margin-bottom: 60px;
    letter-spacing: -2px;
}

.pomodoro-explanation-body .steps-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 13px;
    max-width: 1200px;
    align-items: flex-start;
}

.pomodoro-explanation-body .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 200px;
    position: relative;
}

.pomodoro-explanation-body .step:nth-child(2),
.pomodoro-explanation-body .step:nth-child(4) {
    margin-top: 30px;
}


.pomodoro-explanation-body .step-bubble {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.pomodoro-explanation-body .step:nth-child(1) .step-bubble { background-color: #a8d5d1; }
.pomodoro-explanation-body .step:nth-child(2) .step-bubble { background-color: #b5b8d6; }
.pomodoro-explanation-body .step:nth-child(3) .step-bubble { background-color: #e6c2c2; }
.pomodoro-explanation-body .step:nth-child(4) .step-bubble { background-color: #d4a886; }
.pomodoro-explanation-body .step:nth-child(5) .step-bubble { background-color: #e6d4a8; }

.pomodoro-explanation-body .step-bubble::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

.pomodoro-explanation-body .step:nth-child(1) .step-bubble::after { border-top: 20px solid #a8d5d1; }
.pomodoro-explanation-body .step:nth-child(2) .step-bubble::after { border-top: 20px solid #b5b8d6; }
.pomodoro-explanation-body .step:nth-child(3) .step-bubble::after { border-top: 20px solid #e6c2c2; }
.pomodoro-explanation-body .step:nth-child(4) .step-bubble::after { border-top: 20px solid #d4a886; }
.pomodoro-explanation-body .step:nth-child(5) .step-bubble::after { border-top: 20px solid #e6d4a8; }

.pomodoro-explanation-body .step-icon {
    width: 100px;  /* Increased for larger SVG appearance */
    height: 75px; /* Adjusted to maintain SVG aspect ratio (4:3) */
    display: flex;
    align-items: center;
    justify-content: center;
}

.pomodoro-explanation-body .step-icon svg {
    width: 100%; 
    height: 100%; 
    fill: #2c2c2c;
}

.pomodoro-explanation-body .step-text {
    font-size: 1.7rem;
    font-weight: 600;
    color: #2c2c2c;
    line-height: 1.4;
    margin-bottom: 20px;
}

.pomodoro-explanation-body .step-bar {
    width: 80px;
    height: 8px;
    border-radius: 4px;
}

.pomodoro-explanation-body .step:nth-child(1) .step-bar { background-color: #a8d5d1; }
.pomodoro-explanation-body .step:nth-child(2) .step-bar { background-color: #b5b8d6; }
.pomodoro-explanation-body .step:nth-child(3) .step-bar { background-color: #e6c2c2; }
.pomodoro-explanation-body .step:nth-child(4) .step-bar { background-color: #d4a886; }
.pomodoro-explanation-body .step:nth-child(5) .step-bar { background-color: #e6d4a8; }

@media (max-width: 768px) {
    .pomodoro-explanation-body .main-title {
        font-size: 2.5rem;
    }

    .pomodoro-explanation-body .steps-container {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .pomodoro-explanation-body .step {
        max-width: 300px;
    }
}