body {
    font-family: 'Roboto Mono', monospace;
    background-color: #1c1c1c;
    color: #f0f0f0;
    margin: 0;
    transition: background-color 0.5s ease;
    display: block; 
}

main.container {
    margin: 40px auto;
}

.container {
    background-color: #2d2d2d;
    padding: 30px 20px; /* Уменьшили боковые отступы для мобильных */
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    text-align: center;
    width: 90%;
    max-width: 450px;
}

/* Стили для вкладок */
.tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
    background-color: #1c1c1c;
    border-radius: 10px;
    overflow: hidden;
}

.tab-link {
    background-color: transparent;
    border: none;
    padding: 15px 10px; /* Уменьшили отступы */
    cursor: pointer;
    font-size: 1em; /* Немного уменьшили шрифт */
    font-family: inherit;
    color: #a0a0a0;
    transition: background-color 0.3s, color 0.3s;
    flex-grow: 1;
}
.tab-link.active { background-color: #c84c4c; color: #fff; }
.tab-link:hover:not(.active) { background-color: #444; }

/* Контент таймера */
.timer-content { display: none; }
.timer-content.active { display: block; }
.status { font-size: 1.2em; margin-bottom: 10px; font-weight: bold; }
.timer-display {
    font-size: 4.5em; /* Значительно уменьшили шрифт для мобильных */
    font-weight: 700;
    margin: 10px 0 20px 0;
    letter-spacing: 2px;
}

/* Кнопки управления */
.controls button {
    font-family: 'Roboto Mono', monospace;
    background-color: #444; color: #fff; border: none;
    padding: 12px 25px; margin: 5px; border-radius: 8px;
    cursor: pointer; font-size: 1em;
    transition: background-color 0.3s, transform 0.1s;
}
.controls button:hover { background-color: #555; }
.controls button:active { transform: scale(0.97); }
.controls button#start25, .controls button#start50 { background-color: #28a745; }
.controls button#start25:hover, .controls button#start50:hover { background-color: #2ebf4f; }
.controls button#start25.running, .controls button#start50.running { background-color: #c84c4c; }
.controls button#start25.running:hover, .controls button#start50.running:hover { background-color: #e05a5a; }

/* Стили для чекбокса */
.checkbox-container {
    margin-bottom: 15px; display: flex; justify-content: center;
    align-items: center; font-size: 0.9em; /* Уменьшили шрифт */
    color: #ccc; cursor: pointer;
}
.checkbox-container input { margin-right: 8px; transform: scale(1.2); cursor: pointer; }
.checkbox-container label { cursor: pointer; }

/* Стили для статистики */
.stats-container { margin-top: 20px; padding-top: 20px; border-top: 1px solid #444; text-align: left; }
.stats-header { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; }
.stats-container h2 { margin: 0; margin-right: auto; }
#resetStats, #copyStats {
    background: none; border: none; font-size: 1.3em; line-height: 1;
    cursor: pointer; padding: 0 5px; opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
}
#resetStats:hover, #copyStats:hover { opacity: 1; transform: scale(1.1); }

/* --- Шапка --- */
.promo-header {
    width: 100%; background-color: #2d2d2d;
    padding: 10px 20px; /* Уменьшили боковые отступы */
    border-bottom: 1px solid #444; display: flex;
    justify-content: space-between; align-items: center; 
    box-sizing: border-box;
}
.chrome-store-button {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; /* Уменьшили отступы */
    background-color: #4285F4; color: white; text-decoration: none;
    border-radius: 5px; font-family: 'Roboto Mono', monospace;
    font-weight: bold; font-size: 0.8em; /* Уменьшили шрифт */
    transition: background-color 0.2s ease;
}
.chrome-store-button:hover { background-color: #5a95f5; }
.chrome-icon { width: 18px; height: 18px; }

/* --- Логотип --- */
.logo-container { display: flex; align-items: center; gap: 12px; }
.logo-icon { height: 30px; width: 30px; }
.logo-text {
    font-size: 1.1em;
    font-weight: bold;
    color: #f0f0f0;
}

/* --- Кнопка доната --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Расстояние между кнопкой доната и кнопкой Chrome */
}

.donate-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    background-color: #28a745;
    color: white;
    border-radius: 50%;
    transition: transform 0.2s ease-in-out, background-color 0.2s;
}

.donate-button:hover {
    background-color: #2ebf4f;
    transform: scale(1.1);
}

.donate-button svg {
    width: 22px;
    height: 22px;
}


/* --- Секция с описанием --- */
.explanation-section {
    width: 100%; padding: 40px 20px; background-color: #252526;
    border-top: 1px solid #444; display: flex; justify-content: center;
    box-sizing: border-box;
}
.explanation-content { max-width: 700px; text-align: left; line-height: 1.6; color: #ccc; }
.explanation-content h2 { color: #f0f0f0; text-align: center; margin-top: 0; margin-bottom: 20px; }
.explanation-content h3 { color: #e0e0e0; margin-top: 30px; border-bottom: 1px solid #555; padding-bottom: 5px; }
.explanation-content ul { padding-left: 20px; }
.explanation-content li { margin-bottom: 10px; }
.highlight-note {
    background-color: rgba(40, 167, 69, 0.2); color: #a7eebc;
    padding: 2px 8px; border-radius: 4px; font-size: 0.9em;
    border: 1px solid rgba(40, 167, 69, 0.4);
}

/* --- Футер --- */
.site-footer {
    width: 100%; padding: 20px 0; background-color: #1c1c1c;
    border-top: 1px solid #444; text-align: center;
}
.footer-content a { color: #a0a0a0; text-decoration: none; font-size: 0.8em; margin: 0 10px; transition: color 0.2s; }
.footer-content a:hover { color: #fff; }
.footer-separator { color: #555; }


================================================= */

/* Стили для экранов шире 768px (планшеты и десктопы) */
@media (min-width: 768px) {
    .container {
        padding: 30px 40px; /* Возвращаем большие отступы */
    }
    .timer-display {
        font-size: 6em; /* Возвращаем большой шрифт для таймера */
    }
    .tab-link {
        font-size: 1.1em;
        padding: 15px 20px;
    }
    .promo-header {
        padding: 10px 40px;
    }
    .chrome-store-button {
        font-size: 0.9em;
        padding: 8px 16px;
    }
    .footer-content a {
        font-size: 0.9em;
        margin: 0 15px;
    }
}

/* Новый медиа-запрос специально для мобильной адаптации шапки */
@media (max-width: 340px) {
    .logo-text {
        display: none; /* Скрываем текст логотипа только на очень узких экранах */
    }
    .promo-header {
        padding: 10px 15px; /* Можно еще немного уменьшить отступы для самых узких экранов */
    }
    .footer-content {
        display: flex;
        flex-direction: column; /* Ставим ссылки в футере друг под друга */
        gap: 10px;
    }
    .footer-separator {
        display: none; /* Прячем разделитель */
    }
}