/* ==========================================
   ФАЙЛ: widgets.css
   ВЕРСИЯ: 1.8
   НАЗНАЧЕНИЕ: Виджет-панель (ИИ, Игра, Погода, Финансы, Новости, Инструменты)

   СОДЕРЖАНИЕ:
   1. .widgets-section — обёртка секции
   2. .widgets-section__bar — строка кнопок
   3. .widget-btn-wrap — обёртка кнопки + лейбл
   4. .widget-btn — базовые стили кнопок
   5. .widget-btn--ai / --game — круглые кнопки
   6. .widget-btn--weather/finance/news/tools — прямоугольные кнопки (мягкие тона)
   7. .widgets-section__panels — контейнер панелей
   8. .widget-panel — отдельная панель (hidden/visible)
   9. Погода: .weather-current, .weather-forecast, .weather-city-search, .weather-stats, .weather-hourly
   10. Финансы: .finance-header, .finance-grid, .finance-tabs, .finance-tab-content
   11. Новости: .news-sources, .news-list, .news-item__excerpt
   12. Инструменты: .tools-menu, .tool-content, password/converter/color/qr/base64/textcase
   13. Общие элементы: spinner, retry-btn, error, close-btn
   14. Адаптивность
   ========================================== */

/* ========================================== */
/* 1. СЕКЦИЯ                                  */
/* ========================================== */

.widgets-section {
    margin: 72px auto 72px;
    max-width: 1000px;
    width: 100%;
    padding: 16px 16px;
    box-sizing: border-box;
}

/* Скрытое состояние: показываем только кнопку-глазик вместо всей секции */
.widgets-section.widgets-hidden .widgets-section__bar,
.widgets-section.widgets-hidden .widgets-section__panels {
    display: none;
}

.widgets-section.widgets-hidden {
    margin: 12px auto;
    padding: 0;
}

/* Полоска восстановления (скрыта по умолчанию, видна только в состоянии hidden) */
.widgets-section__restore {
    display: none;
    justify-content: center;
    padding: 4px 0;
}

.widgets-section.widgets-hidden .widgets-section__restore {
    display: flex;
}

.widgets-section__restore-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.10);
    background: rgba(255, 255, 255, 0.22);
    color: rgba(60, 80, 90, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, transform 0.15s;
}

.widgets-section__restore-btn:hover {
    color: rgba(26, 107, 109, 0.85);
    border-color: rgba(26, 107, 109, 0.35);
    transform: scale(1.1);
}

/* ========================================== */
/* 2. СТРОКА КНОПОК                           */
/* ========================================== */

.widgets-section__bar {
    display: flex;
    gap: 14px;
    align-items: flex-end;
}

/* ========================================== */
/* 3. ОБЁРТКА КНОПКИ + ЛЕЙБЛ                 */
/* ========================================== */

.widget-btn-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Скрываем заголовки по умолчанию, показываем только при ховере на секцию */
.widget-btn-wrap__label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(40, 65, 80, 0.70);
    background-color: #ffffffc0;
    padding: 0px 6px;
    border-radius: 12px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    user-select: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    height: 18px; /* Фиксированная высота чтобы не было дёргания */
}

/* Показываем заголовки при наведении на блок виджетов */
.widgets-section:hover .widget-btn-wrap__label {
    opacity: 1;
    visibility: visible;
}

/* Круглые иконки: ИИ + Игра */
.widget-btn-wrap--icon {
    flex: none;
    flex-shrink: 0;
}

.widget-btn-wrap--icon:first-child {
    margin-left: 24px;
}

.widget-btn-wrap--game {
    margin-right: 24px;
    margin-left: 6px;
}

/* Погода и Инструменты — уже, чтобы поместилась кнопка Игра */
.widget-btn-wrap--weather,
.widget-btn-wrap--tools {
    flex: 0.72;
    min-width: 0;
}

/* Финансы и Новости — прежняя ширина */
.widget-btn-wrap--finance,
.widget-btn-wrap--news {
    flex: 1;
    min-width: 0;
}

/* Кнопка скрытия виджетов — скрыта по умолчанию, видна только при ховере */
.widget-btn-wrap--hide {
    flex-shrink: 0;
    margin: 0 1px 6px;
    align-self: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    height: 36px; /* Фиксированная высота чтобы не было дёргания */
}

/* Показываем кнопку скрытия при наведении на блок виджетов */
.widgets-section:hover .widget-btn-wrap--hide {
    opacity: 1;
    visibility: visible;
}

/* Дублирующиеся стили удалены — перенесены выше */

/* ========================================== */
/* 4. БАЗОВЫЕ СТИЛИ КНОПОК                   */
/* ========================================== */

.widget-btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Неактивный (dimmed) — чуть прозрачный, сохраняет цвет, кликабелен */
.widget-btn.dimmed {
    opacity: 0.45;
    transform: scale(0.98);
}

/* Активный — выделяется, немного поднят */
.widget-btn.active {
    transform: translateY(-2px);
}

/* ========================================== */
/* 5. КРУГЛЫЕ КНОПКИ: ИИ + ИГРА              */
/* ========================================== */

.widget-btn--ai,
.widget-btn--game {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #248586 0%, #5acacc 50%, #baf5f7 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(26, 107, 109, 0.4);
    border: none;
}

.widget-btn--ai:hover:not(.dimmed),
.widget-btn--game:hover:not(.dimmed) {
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(26, 107, 109, 0.55);
}

.widget-btn--ai.active,
.widget-btn--game.active {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 5px 16px rgba(26, 107, 109, 0.5);
    transform: translateY(-2px);
}

.widget-btn__ai-robot {
    width: 24px;
    height: 24px;
}

.widget-btn__game-icon {
    font-size: 20px;
    line-height: 1;
    display: block;
}

/* Пульсация для ИИ кнопки (когда ничего не открыто) */
.widget-btn--ai.pulse {
    animation: widgetAiPulse 3s ease-in-out infinite;
}

@keyframes widgetAiPulse {
    0%, 100% { box-shadow: 0 3px 12px rgba(46, 159, 161, 0.2); }
    50% { box-shadow: 0 3px 20px rgba(38, 161, 163, 0.45), 0 0 0 5px rgba(26, 107, 109, 0.15); }
}

/* ========================================== */
/* 6. ПРЯМОУГОЛЬНЫЕ КНОПКИ — мягкие тона     */
/* ========================================== */

.widget-btn:not(.widget-btn--ai):not(.widget-btn--game) {
    width: 100%;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
}

/* Погода — мягкий синий */
.widget-btn--weather {
    background: rgba(255, 255, 255, 0.81);
    color: #1565c0ce;
    border: 1.5px solid rgba(21, 101, 192, 0.22);
}
.widget-btn--weather:hover:not(.dimmed) {
    border-color: rgba(21, 101, 192, 0.4);
    transform: translateY(-1px);
}
.widget-btn--weather.active {
    border-color: rgba(21, 101, 192, 0.5);
    box-shadow: 0 0 0 1px rgba(21, 101, 192, 0.2), 0 2px 5px rgba(21, 101, 192, 0.15);
    transform: translateY(-2px);
}

/* Финансы — мягкий зелёный */
.widget-btn--finance {
    background: rgba(255, 255, 255, 0.81);
    color: #2e7d32c7;
    border: 1.5px solid rgba(27, 94, 32, 0.2);
}
.widget-btn--finance:hover:not(.dimmed) {
    border-color: rgba(27, 94, 32, 0.38);
    transform: translateY(-1px);
}
.widget-btn--finance.active {
    border-color: rgba(27, 94, 32, 0.45);
    box-shadow: 0 0 0 1px rgba(27, 94, 32, 0.18), 0 2px 5px rgba(27, 94, 32, 0.12);
    transform: translateY(-2px);
}

/* Новости — тёмно-серый */
.widget-btn--news {
    background: rgba(255, 255, 255, 0.81);
    color: #455060d7;
    border: 1.5px solid rgba(55, 65, 75, 0.2);
}
.widget-btn--news:hover:not(.dimmed) {
    border-color: rgba(55, 65, 75, 0.35);
    transform: translateY(-1px);
}
.widget-btn--news.active {
    border-color: rgba(55, 65, 75, 0.42);
    box-shadow: 0 0 0 1px rgba(55, 65, 75, 0.18), 0 2px 5px rgba(55, 65, 75, 0.1);
    transform: translateY(-2px);
}

/* Инструменты — мягкий фиолетовый */
.widget-btn--tools {
    background: rgba(255, 255, 255, 0.81);
    color: #691b9aa6;
    border: 1.5px solid rgba(74, 20, 140, 0.2);
}
.widget-btn--tools:hover:not(.dimmed) {
    border-color: rgba(74, 20, 140, 0.38);
    transform: translateY(-1px);
}
.widget-btn--tools.active {
    border-color: rgba(74, 20, 140, 0.45);
    box-shadow: 0 0 0 1px rgba(74, 20, 140, 0.18), 0 2px 5px rgba(74, 20, 140, 0.12);
    transform: translateY(-2px);
}

/* Кнопка скрытия виджетов (глаз) */
.widget-btn--hide {
    background: rgba(255, 255, 255, 0.522);
    border-radius: 50%;
    border: none;
    color: rgba(60, 80, 90, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 6px;
    transition: color 0.2s, transform 0.15s;
    flex-shrink: 0;
}
.widget-btn--hide:hover {
    color: rgba(26, 107, 109, 0.75);
    transform: scale(1.15);
}

/* ========================================== */
/* Превью внутри кнопок                       */
/* ========================================== */

.widget-btn__preview {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
}

/* Погода */
.widget-weather-icon {
    font-size: 22px;
    flex-shrink: 0;
}
.widget-weather-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
.widget-weather-temp {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
}
.widget-weather-city {
    font-size: 10px;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 72px;
}

/* Финансы — в строку */
.widget-btn__preview--finance {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.widget-finance-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.widget-finance-currency {
    font-size: 10px;
    opacity: 0.65;
    font-weight: 600;
}
.widget-finance-rate {
    font-size: 14px;
    font-weight: 700;
}

/* Новости */
.widget-btn__preview--news {
    gap: 7px;
}
.widget-news-dot {
    width: 7px;
    height: 7px;
    min-width: 7px;
    border-radius: 50%;
    background: #e53935; /* красный только у точки */
    animation: newsPulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
    opacity: 0.85;
}
@keyframes newsPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.2; }
}
.widget-news-headline {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left;
    opacity: 0.9;
}

/* Инструменты — только иконки */
.widget-btn__preview--tools {
    align-items: center;
    justify-content: center;
    gap: 0;
}
.widget-tools-icons {
    display: flex;
    gap: 6px;
    font-size: 18px;
}
.widget-tools-hint {
    display: none;
}

/* ========================================== */
/* 7. КОНТЕЙНЕР ПАНЕЛЕЙ                      */
/* ========================================== */

.widgets-section__panels {
    margin-top: 10px;
}

/* ========================================== */
/* 8. ПАНЕЛЬ ВИДЖЕТА                         */
/* ========================================== */

.widget-panel {
    display: none;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    animation: widgetPanelIn 0.2s ease;
}

.widget-panel.active {
    display: block;
}

@keyframes widgetPanelIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Верхняя полоса панели с заголовком (по центру) и кнопкой закрытия (справа) */
.widget-panel__topbar {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 14px 8px;
}

.widget-panel__topbar-title {
    font-size: 20px;
    font-weight: 600;
    background: linear-gradient(135deg, #1a6b6d 0%, #7fc241 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
}

/* Кнопка закрытия — всегда в правом углу поверх заголовка */
.widget-panel__topbar .widget-panel__close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 8px; /* компенсация padding-top */
}

/* Топбар для блока ИИ помощника */
.ai-helper__topbar {
    padding-bottom: 4px;
    margin-bottom: 8px;
}

/* Кнопка закрытия панели */
.widget-panel__close {
    width: 33px;
    height: 33px;
    border: none;
    background: rgba(255, 255, 255, 0.7);
    color: #2b2828;
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}
.widget-panel__close:hover {
    background: rgba(255, 255, 255, 0.54);
    color: #ffffff;
}

.widget-panel__inner {
    padding: 14px 20px 20px;
    min-height: 120px;
}

/* Загрузка / ошибка */
.widget-panel__loading,
.widget-panel__error {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    min-height: 100px;
    font-size: 14px;
    color: #666;
    flex-wrap: wrap;
}

.widget-panel__error {
    color: #555;
    flex-direction: column;
    text-align: center;
    gap: 8px;
}

.widget-panel__spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #e0e0e0;
    border-top-color: #1a6b6d;
    border-radius: 50%;
    animation: spinnerAnim 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes spinnerAnim {
    to { transform: rotate(360deg); }
}

.widget-panel__retry-btn {
    margin-top: 4px;
    padding: 6px 16px;
    background: #1a6b6d;
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}
.widget-panel__retry-btn:hover {
    background: #145557;
}

/* ========================================== */
/* 9. ПОГОДА                                  */
/* ========================================== */

/* Карточка СЕГОДНЯ */
.weather-today {
    background: linear-gradient(135deg, rgba(21,101,192,0.07) 0%, rgba(26,107,109,0.07) 100%);
    border: 1px solid rgba(21,101,192,0.12);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

/* Заголовок: Город · Дата */
.weather-today__title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.weather-today__city {
    font-size: 18px;
    font-weight: 700;
    color: #1a3a4a;
}

.weather-today__title-sep {
    font-size: 16px;
    color: #ccc;
    font-weight: 400;
}

.weather-today__date {
    font-size: 15px;
    font-weight: 600;
    color: #555;
}

/* Основная строка: иконка слева + инфо справа */
.weather-today__main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

/* Иконка — крупная, цветная */
.weather-today__icon {
    font-size: 52px;
    flex-shrink: 0;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* Блок с температурой, описанием, ощущается/ветер */
.weather-today__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.weather-today__temp {
    font-size: 40px;
    font-weight: 700;
    color: #1565c0;
    line-height: 1;
}

.weather-today__desc {
    font-size: 14px;
    color: #555;
}

/* Ощущается + ветер — читабельно, слева */
.weather-today__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
    margin-top: 2px;
    flex-wrap: wrap;
}

.weather-today__meta-dot {
    color: #ccc;
    font-size: 12px;
}

/* Статистика внутри карточки сегодня */
.weather-stats {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.weather-stats__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 6px;
    background: rgba(255,255,255,0.6);
    border-radius: 8px;
    text-align: center;
}

.weather-stats__icon { font-size: 16px; }

.weather-stats__label {
    font-size: 10px;
    color: #888;
    font-weight: 500;
}

.weather-stats__value {
    font-size: 13px;
    font-weight: 700;
    color: #1a3a4a;
}

/* Заголовок секции (По часам / Прогноз на 5 дней / Источники) */
.weather-section-label {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 16px 0 8px;
}

.weather-section-label:first-of-type {
    margin-top: 0;
}

/* Источники погоды — заголовок секции выделен */
.weather-section-label--sources {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #284150;
    font-size: 13px;
    font-weight: 700;
}

.weather-sources {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
}

.weather-source {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Текстовое название источника */
.weather-source__name {
    font-size: 14px;
    margin-left: 15px;
    color: #284150;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Ссылка — кликабельная, идёт сразу после названия */
.weather-source__link {
    font-size: 15px;
    color: #1a6b6d;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px dashed rgba(26, 107, 109, 0.45);
    transition: color 0.15s, border-color 0.15s;
}

.weather-source__link:hover {
    font-size: 15px;
    color: #000000;
    border-bottom-style: solid;
}

.weather-source__save {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(255, 193, 7, 0.12);
    border: 1.5px solid rgba(255, 193, 7, 0.5);
    color: #7a5f00;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s;
}

.weather-source__save:hover {
    background: rgba(255, 193, 7, 0.808);
    border-color: rgba(255, 193, 7, 0.8);
}

/* Прогноз на 5 дней */
.weather-forecast {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 4px;
}

.weather-forecast__day {
    flex: 1;
    min-width: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 5px;
    background: #f8f9fa;
    border-radius: 10px;
    text-align: center;
}

.weather-forecast__day--today {
    background: rgba(21,101,192,0.08);
    border: 1px solid rgba(21,101,192,0.18);
}

.weather-forecast__day-name {
    font-size: 11px;
    font-weight: 600;
    color: #555;
}

.weather-forecast__day--today .weather-forecast__day-name {
    color: #1565c0;
}

.weather-forecast__day-date {
    font-size: 10px;
    color: #aaa;
}

.weather-forecast__day--today .weather-forecast__day-date {
    color: rgba(21,101,192,0.7);
}

.weather-forecast__day-icon {
    font-size: 20px;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.weather-forecast__day-max {
    font-size: 13px;
    font-weight: 700;
    color: #1565c0;
}

.weather-forecast__day-min {
    font-size: 11px;
    color: #aaa;
}

/* Поиск города (вместо ошибки геолокации) */
.weather-city-search {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 2px;
}

.weather-city-input {
    flex: 1;
    padding: 7px 12px;
    border: 1.5px solid #d0d8e0;
    border-radius: 20px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    color: #333;
    max-width: 200px;
}
.weather-city-input:focus {
    border-color: #1565c0;
}

.weather-geo-retry {
    background: none;
    border: none;
    color: #888;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    text-decoration: underline;
    padding: 0;
    margin-top: 2px;
}
.weather-geo-retry:hover { color: #555; }

/* ========================================== */
/* 10. ФИНАНСЫ                                */
/* ========================================== */

/* Строка с датой */
.finance-date-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 16px;
}

.finance-date-label {
    font-size: 13px;
    color: #888;
}

.finance-date-value {
    font-size: 15px;
    font-weight: 700;
    color: #1a3a4a;
}

/* 3 столбика */
.finance-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.finance-col {
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.07);
}

/* Цветной заголовок колонки */
.finance-col__head {
    padding: 11px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2px;
}

.finance-col--currency .finance-col__head {
    background: linear-gradient(135deg, #1565c0 0%, #42a5f5 100%);
}

.finance-col--crypto .finance-col__head {
    background: linear-gradient(135deg, #e65100 0%, #ffb74d 100%);
}

.finance-col--stocks .finance-col__head {
    background: linear-gradient(135deg, #1a6b6d 0%, #7fc241 100%);
}

/* Список котировок */
.finance-col__rates {
    flex: 1;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Строка котировки */
.finance-rate-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.finance-rate-item:last-child {
    border-bottom: none;
}

.finance-rate-item__code {
    font-size: 13px;
    font-weight: 700;
    color: #444;
    min-width: 36px;
    flex-shrink: 0;
}

.finance-rate-item__rate {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.finance-rate-item__change {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.finance-rate-item__change--up { color: #2e7d32; }
.finance-rate-item__change--down { color: #c62828; }

/* Крипто: два значения — $ сверху, ₽ снизу */
.finance-rate-item__rate--crypto {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    overflow: hidden;
}
.finance-rate-item__usd {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
}
.finance-rate-item__rub {
    font-size: 11px;
    font-weight: 400;
    color: rgba(40, 65, 80, 0.55);
    white-space: nowrap;
}

/* Блок источников */
.finance-col__sources {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    padding: 20px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Подзаголовок «Открыть источник» */
.finance-col__sources-label {
    font-size: 12px;
    padding-bottom: 10px;
    font-weight: 700;
    color: #1a6b6d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

/* Строка источника */
.finance-source {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Текстовое название источника */
.finance-source__name {
    font-size: 13px;
    padding-left: 15px;
    color: #284150;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Ссылка — кликабельная */
.finance-source__link {
    font-size: 16px;
    color: #1a6b6d;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px dashed rgba(26, 107, 109, 0.45);
    transition: color 0.15s, border-color 0.15s;
}

.finance-source__link:hover {
    color: #000000;
    border-bottom-style: solid;
}

/* Кнопка «+» сохранить */
.finance-source__save {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(255, 193, 7, 0.12);
    border: 1.5px solid rgba(255, 193, 7, 0.5);
    color: #7a5f00;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s;
}

.finance-source__save:hover {
    background: rgba(255, 193, 7, 0.76);
    border-color: rgba(255, 193, 7, 0.8);
}

/* ========================================== */
/* 11. НОВОСТИ                                */
/* ========================================== */

.news-sources {
    display: flex;
    gap: 7px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.news-source-btn {
    padding: 4px 11px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    color: #555;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.news-source-btn:hover {
    border-color: #455060;
    color: #455060;
}

.news-source-btn.active {
    background: #455060;
    border-color: #455060;
    color: #fff;
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.news-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.news-item:last-child {
    border-bottom: none;
}

.news-item:hover {
    background: #fafafa;
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 6px;
}

.news-item__num {
    font-size: 13px;
    color: #6b7a8d;
    font-weight: 700;
    min-width: 18px;
    flex-shrink: 0;
    padding-top: 1px;
}

.news-item__content {
    flex: 1;
}

.news-item__title {
    font-size: 13px;
    font-weight: 500;
    color: #222;
    line-height: 1.4;
    margin-bottom: 3px;
}

.news-item__date {
    font-size: 11px;
    color: #aaa;
}

/* ========================================== */
/* 12. ИНСТРУМЕНТЫ                           */
/* ========================================== */

.tools-menu {
    display: flex;
    gap: 7px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.tools-menu-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    color: #555;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.tools-menu-btn:hover {
    border-color: #6a1b9a;
    color: #6a1b9a;
}

.tools-menu-btn.active {
    background: #6a1b9a;
    border-color: #6a1b9a;
    color: #fff;
}

.tools-menu-btn__icon {
    font-size: 14px;
}

/* Контент инструментов */
.tool-content {
    display: none;
}

.tool-content.active {
    display: block;
}

/* --- Генератор паролей --- */
.password-gen__output {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.password-gen__result {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    font-family: monospace;
    background: #f9f9f9;
    color: #333;
    outline: none;
}

.password-gen__result:focus {
    border-color: #6a1b9a;
}

.password-gen__copy-btn {
    padding: 0 12px;
    background: #6a1b9a;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
}

.password-gen__copy-btn:hover {
    background: #4a148c;
}

.password-gen__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.password-gen__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #555;
    gap: 10px;
}

.password-gen__option input[type="range"] {
    flex: 1;
    accent-color: #6a1b9a;
}

.password-gen__checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.password-gen__checkbox input {
    accent-color: #6a1b9a;
    width: 15px;
    height: 15px;
}

.password-gen__btn {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #4a148c, #6a1b9a);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.password-gen__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(106, 27, 154, 0.4);
}

/* --- Конвертер единиц --- */
.unit-converter__type-row {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.unit-type-btn {
    padding: 5px 12px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    color: #555;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.unit-type-btn:hover {
    border-color: #6a1b9a;
    color: #6a1b9a;
}

.unit-type-btn.active {
    background: #6a1b9a;
    border-color: #6a1b9a;
    color: #fff;
}

.unit-converter__row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.unit-converter__input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
}

.unit-converter__input:focus {
    border-color: #6a1b9a;
}

.unit-converter__select {
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    background: #fafafa;
    min-width: 110px;
}

.unit-converter__select:focus {
    border-color: #6a1b9a;
}

.unit-converter__arrow {
    text-align: center;
    font-size: 20px;
    color: #6a1b9a;
    margin: 4px 0;
    cursor: default;
}

/* --- Конвертер цвета --- */
.color-converter__picker-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.color-converter__picker {
    width: 56px;
    height: 44px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    padding: 2px;
    background: #fff;
}

.color-converter__preview {
    flex: 1;
    height: 44px;
    border-radius: 8px;
    transition: background 0.2s;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.color-converter__fields {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.color-converter__field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.color-converter__field span {
    font-size: 11px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
}

.color-converter__field input {
    padding: 8px 10px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    font-family: monospace;
    outline: none;
}

.color-converter__field input:focus {
    border-color: #6a1b9a;
}

.color-converter__copy-btn {
    padding: 10px 20px;
    background: #6a1b9a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.color-converter__copy-btn:hover {
    background: #4a148c;
}

/* ========================================== */
/* Погода: почасовой прогноз                 */
/* ========================================== */

.weather-hourly {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 14px;
}

.weather-hourly__item {
    flex-shrink: 0;
    min-width: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 5px;
    background: #f0f4fa;
    border-radius: 10px;
    text-align: center;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.weather-hourly__item--now {
    background: rgba(21,101,192,0.1);
    border: 1px solid rgba(21,101,192,0.2);
}

.weather-hourly__time {
    font-size: 11px;
    font-weight: 600;
    color: #555;
}

.weather-hourly__item--now .weather-hourly__time {
    color: #1565c0;
}

.weather-hourly__temp {
    font-size: 14px;
    font-weight: 700;
    color: #1565c0;
}

.weather-hourly__precip {
    font-size: 11px;
    color: #5c8aac;
    min-height: 14px;
}

.finance-loading-inline {
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}

/* ========================================== */
/* Новости: анонс                            */
/* ========================================== */

.news-item__excerpt {
    font-size: 12px;
    color: rgba(40, 65, 80, 0.55);
    line-height: 1.4;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================== */
/* Новости: дата-заголовок + футер источника */
/* ========================================== */

.news-date-header {
    font-size: 12px;
    font-weight: 600;
    color: rgba(40, 65, 80, 0.5);
    letter-spacing: 0.02em;
    padding: 6px 12px 4px;
    text-transform: none;
}

.news-source-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(40, 65, 80, 0.1);
    margin-top: 4px;
}

/* Текстовое название источника */
.news-source-footer__name {
    font-size: 14px;
    color: #284150;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Ссылка — сразу после названия */
.news-source-footer__link {
    font-size: 15px;
    color: #1a6b6d;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px dashed rgba(26, 107, 109, 0.45);
    transition: color 0.15s, border-color 0.15s;
}

.news-source-footer__link:hover {
    color: #000000;
    border-bottom-style: solid;
}

.news-source-footer__save {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1.5px solid rgba(255, 193, 7, 0.5);
    background: rgba(255, 193, 7, 0.12);
    border-radius: 7px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    color: #7a5f00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}

.news-source-footer__save:hover {
    background: rgba(255, 193, 7, 0.767);
    border-color: rgba(255, 193, 7, 0.8);
}

/* ========================================== */
/* Инструменты: QR-код                       */
/* ========================================== */

.qr-tool {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qr-tool__input {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    font-size: 13px;
    box-sizing: border-box;
    font-family: inherit;
    outline: none;
}

.qr-tool__input:focus {
    border-color: #6a1b9a;
}

.qr-tool__btn {
    padding: 8px 16px;
    background: rgba(26, 107, 109, 0.12);
    border: 1.5px solid rgba(26, 107, 109, 0.25);
    border-radius: 8px;
    color: #1a6b6d;
    font-weight: 500;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: background 0.15s;
}

.qr-tool__btn:hover {
    background: rgba(26, 107, 109, 0.2);
}

.qr-tool__preview {
    display: flex;
    justify-content: center;
}

.qr-tool__img {
    border-radius: 8px;
}

.qr-tool__download {
    padding: 6px 14px;
    background: rgba(255, 193, 7, 0.15);
    border: 1.5px solid rgba(255, 193, 7, 0.4);
    border-radius: 8px;
    color: #7a5f00;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}

/* ========================================== */
/* Инструменты: Base64                       */
/* ========================================== */

.base64-tool {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.base64-tool__input,
.base64-tool__output {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    font-size: 12px;
    font-family: monospace;
    resize: vertical;
    min-height: 70px;
    box-sizing: border-box;
    outline: none;
}

.base64-tool__output {
    background: rgba(0, 0, 0, 0.02);
    color: rgba(40, 65, 80, 0.8);
}

.base64-tool__btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.base64-tool__btn {
    padding: 6px 12px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.base64-tool__btn:hover {
    background: rgba(26, 107, 109, 0.1);
    border-color: rgba(26, 107, 109, 0.25);
}

.base64-tool__btn--copy {
    margin-left: auto;
}

/* ========================================== */
/* Инструменты: Регистр текста               */
/* ========================================== */

.textcase-tool {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.textcase-tool__input,
.textcase-tool__output {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    font-size: 13px;
    resize: vertical;
    min-height: 60px;
    box-sizing: border-box;
    font-family: inherit;
    outline: none;
}

.textcase-tool__output {
    background: rgba(0, 0, 0, 0.02);
}

.textcase-tool__btns {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.textcase-btn {
    padding: 5px 10px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.textcase-btn:hover {
    background: rgba(26, 107, 109, 0.1);
    border-color: rgba(26, 107, 109, 0.25);
}

.textcase-tool__output-row {
    position: relative;
}

.textcase-tool__copy {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 3px 8px;
    background: rgba(26, 107, 109, 0.1);
    border: 1px solid rgba(26, 107, 109, 0.2);
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
}

/* ========================================== */
/* 13. АДАПТИВНОСТЬ                          */
/* ========================================== */

/* ==========================================
   АДАПТИВНОСТЬ: БЛОК #6 ВИДЖЕТЫ
   ≤880px — планшет
   ≤650px — телефон (основное)
   ≤480px — маленький телефон
   ========================================== */

/* --- ПЛАНШЕТ: ≤880px --- */
@media (max-width: 880px) {
    /* Игра только для полного десктопа */
    .widget-btn-wrap--game {
        display: none !important;
    }

    /* Без кнопки Игра — погода/инструменты снова равномерно с остальными */
    .widget-btn-wrap--weather,
    .widget-btn-wrap--tools,
    .widget-btn-wrap--finance,
    .widget-btn-wrap--news {
        flex: 1;
        min-width: 0;
    }

    /* FIX 3: Отступы от соседних блоков */
    .widgets-section { padding: 0 10px; margin-top: 56px; margin-bottom: 44px; }

    /* Бар кнопок */
    .widgets-section__bar { gap: 8px; }
    .widget-btn-wrap--icon:first-child { margin-left: 16px; margin-right: 16px; }
    .widget-btn--ai { width: 40px; height: 40px; }
    .widget-btn__ai-robot { width: 20px; height: 20px; }
    .widget-btn:not(.widget-btn--ai):not(.widget-btn--game) { height: 40px; border-radius: 9px; padding: 0 8px; }
    .widget-btn-wrap__label { font-size: 10px; }

    /* Кнопка глаза — уменьшаем, центрируем по кнопкам без лейблов */
    /* margin-bottom = (высота кнопок 40px − высота глаза 24px) / 2 = 8px */
    .widget-btn-wrap--hide { margin: 0 1px 8px; align-self: flex-end; }
    .widget-btn--hide { padding: 5px; }
    .widget-btn--hide svg { width: 14px; height: 14px; }

    /* Превью в кнопках */
    .widget-weather-icon { font-size: 18px; }
    .widget-weather-temp { font-size: 13px; }
    .widget-weather-city { max-width: 55px; font-size: 9px; }
    .widget-finance-rate { font-size: 12px; }
    .widget-finance-currency { font-size: 9px; }
    .widget-news-headline { font-size: 10px; }
    .widget-tools-icons { font-size: 15px; gap: 5px; }

    /* Панель */
    .widget-panel__inner { padding: 14px 16px 16px; }
    .widget-panel__topbar { padding: 12px 14px 6px; }
    .widget-panel__topbar-title { font-size: 18px; }

    /* Погода */
    .weather-today { padding: 12px 14px; margin-bottom: 14px; }
    .weather-today__city { font-size: 17px; }
    .weather-today__date { font-size: 14px; }
    .weather-today__temp { font-size: 36px; }
    .weather-today__icon { font-size: 46px; }
    .weather-stats__item { padding: 7px 5px; }
    .weather-stats__label { font-size: 9px; }
    .weather-stats__value { font-size: 12px; }

    /* Финансы */
    .finance-columns { gap: 8px; }
    .finance-col__head { font-size: 13px; padding: 10px 10px; }
    .finance-col__sources { padding: 8px 10px 10px; gap: 5px; }
    .finance-col__sources-label { font-size: 10px; }
    .finance-source__name { font-size: 12px; }
    .finance-source__link { font-size: 12px; }
    .finance-rate-item__code { font-size: 12px; }
    .finance-rate-item__usd { font-size: 12px; }
    .finance-rate-item__rub { font-size: 10px; }

    /* Новости */
    .news-source-btn { font-size: 11px; padding: 4px 9px; }
    .news-item__title { font-size: 13px; }
    .news-date-header { font-size: 11px; }
}

/* --- ТЕЛЕФОН: ≤650px --- */
@media (max-width: 650px) {
    /* FIX 3: Отступы */
    .widgets-section { padding: 0 8px; margin-top: 48px; margin-bottom: 36px; }
    .widget-panel__inner { padding: 10px 12px 14px; }
    .widget-panel__topbar { padding: 10px 12px 4px; }
    .widget-panel__topbar-title { font-size: 17px; }
    .widget-panel__close { width: 30px; height: 30px; font-size: 12px; }

    /* Бар кнопок */
    .widgets-section__bar { gap: 5px; }
    .widget-btn-wrap--icon:first-child { margin-left: 8px; margin-right: 8px; }
    .widget-btn--ai { width: 38px; height: 38px; }
    .widget-btn__ai-robot { width: 19px; height: 19px; }
    .widget-btn:not(.widget-btn--ai):not(.widget-btn--game) { height: 38px; padding: 0 6px; border-radius: 8px; }
    .widget-btn-wrap__label { font-size: 9px; }

    /* FIX 1: Превью кнопок — упрощаем на телефоне */

    /* Погода: иконка + температура, без города */
    .widget-weather-info { display: flex; }
    .widget-weather-city { display: none; }
    .widget-weather-icon { font-size: 18px; }
    .widget-weather-temp { font-size: 13px; font-weight: 700; line-height: 1; }

    /* Финансы: только USD в центре, прячем EUR и разделитель */
    .widget-btn__preview--finance { flex-direction: column; justify-content: center; align-items: center; gap: 0; }
    .widget-finance-currency { display: none; }
    .widget-finance-rate { font-size: 13px; font-weight: 700; }
    .widget-btn__preview--finance .widget-finance-row:last-of-type { display: none; }
    .widget-btn__preview--finance > span { display: none; }   /* скрываем разделитель · */

    /* Новости */
    .widget-news-dot { display: none; }
    .widget-news-headline { -webkit-line-clamp: 1; line-clamp: 1; font-size: 10px; }

    /* Инструменты: уменьшаем иконки */
    .widget-tools-icons { gap: 4px; }
    .widget-tools-icons svg { width: 12px !important; height: 12px !important; }

    /* Погода — карточка сегодня */
    .weather-today { padding: 12px; border-radius: 10px; }
    .weather-today__city { font-size: 16px; }
    .weather-today__date { font-size: 13px; }
    .weather-today__temp { font-size: 34px; }
    .weather-today__icon { font-size: 44px; }
    .weather-today__main { gap: 12px; }
    .weather-today__desc { font-size: 13px; }
    .weather-today__meta { font-size: 12px; }
    .weather-stats { gap: 5px; }
    .weather-stats__item { padding: 7px 4px; border-radius: 7px; }
    .weather-stats__label { font-size: 9px; }
    .weather-stats__value { font-size: 12px; }
    .weather-stats__icon { font-size: 15px; }

    /* Погода — почасовой / прогноз */
    .weather-section-label { font-size: 10px; margin: 12px 0 6px; }
    .weather-section-label--sources { margin-top: 16px; font-size: 11px; }
    .weather-hourly__item { min-width: 50px; padding: 7px 4px; }
    .weather-hourly__temp { font-size: 13px; }
    .weather-forecast__day { min-width: 52px; padding: 7px 4px; }
    .weather-forecast__day-max { font-size: 12px; }

    /* FIX 2: Погода — источники в одну строку (как финансы) */
    .weather-sources { gap: 6px; }
    .weather-source { flex-wrap: nowrap; gap: 6px; align-items: center; }
    .weather-source__name { font-size: 13px; flex-shrink: 0; white-space: nowrap; }
    .weather-source__link {
        font-size: 13px;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .weather-source__save { flex-shrink: 0; }

    /* Финансы — одна колонка */
    .finance-columns { grid-template-columns: 1fr; gap: 10px; }
    .finance-col { border-radius: 12px; }
    .finance-col__head { font-size: 13px; padding: 10px 12px; }
    .finance-col__rates { padding: 4px 12px; }
    .finance-rate-item { padding: 7px 0; gap: 5px; }
    .finance-rate-item__code { font-size: 13px; min-width: 34px; }
    .finance-rate-item__usd { font-size: 13px; }
    .finance-rate-item__rub { font-size: 11px; }
    .finance-col__sources { padding: 8px 12px 10px; }
    .finance-col__sources-label { font-size: 10px; }
    .finance-source__name { font-size: 13px; }
    .finance-source__link { font-size: 13px; }
    .finance-date-row { font-size: 13px; margin-bottom: 10px; }

    /* Новости */
    .news-sources { gap: 5px; margin-bottom: 10px; }
    .news-source-btn { font-size: 11px; padding: 4px 9px; }
    .news-item { gap: 8px; padding: 8px 0; }
    .news-item__title { font-size: 13px; }
    .news-item__excerpt { font-size: 11px; }
    .news-item__date { font-size: 10px; }
    .news-date-header { font-size: 11px; padding: 4px 0 3px; }

    /* FIX 2: Новости — футер источника в одну строку */
    .news-source-footer { flex-wrap: nowrap; gap: 6px; padding: 8px 0 10px; align-items: center; }
    .news-source-footer__name { font-size: 13px; flex-shrink: 0; white-space: nowrap; }
    .news-source-footer__link {
        font-size: 13px;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .news-source-footer__save { flex-shrink: 0; }

    /* Инструменты */
    .tools-menu { gap: 5px; margin-bottom: 14px; }
    .tools-menu-btn { font-size: 12px; padding: 5px 10px; }
    .tools-menu-btn__icon { font-size: 13px; }
}

/* --- МАЛЕНЬКИЙ ТЕЛЕФОН: ≤480px --- */
@media (max-width: 480px) {
    /* Общее */
    .widgets-section { padding: 0 6px; margin-top: 40px; margin-bottom: 30px; }
    .widget-panel__inner { padding: 8px 10px 12px; }
    .widget-panel__topbar { padding: 8px 10px 3px; }
    .widget-panel__topbar-title { font-size: 16px; }
    .widget-panel__close { width: 28px; height: 28px; font-size: 11px; }

    /* Бар кнопок — минимальный */
    .widgets-section__bar { gap: 4px; }
    .widget-btn-wrap--icon:first-child { margin-left: 4px; margin-right: 4px; }
    .widget-btn--ai { width: 36px; height: 36px; }
    .widget-btn__ai-robot { width: 18px; height: 18px; }
    .widget-btn:not(.widget-btn--ai):not(.widget-btn--game) { height: 36px; padding: 0 5px; border-radius: 8px; }
    .widget-btn-wrap__label { font-size: 9px; }
    /* margin-bottom = (36px − 20px) / 2 = 8px */
    .widget-btn-wrap--hide { margin: 0 1px 8px; }
    .widget-btn--hide { padding: 4px; }
    .widget-btn--hide svg { width: 12px; height: 12px; }

    /* Превью в кнопках — минимум на маленьком экране */
    .widget-weather-icon { font-size: 20px; }
    .widget-finance-rate { font-size: 11px; }
    .widget-news-headline { -webkit-line-clamp: 1; line-clamp: 1; font-size: 10px; }
    .widget-tools-icons { font-size: 13px; gap: 3px; }

    /* Погода */
    .weather-today { padding: 10px; border-radius: 9px; }
    .weather-today__title { margin-bottom: 8px; gap: 4px; }
    .weather-today__city { font-size: 15px; }
    .weather-today__date { font-size: 12px; }
    .weather-today__temp { font-size: 30px; }
    .weather-today__icon { font-size: 40px; }
    .weather-today__main { gap: 10px; margin-bottom: 10px; }
    .weather-today__desc { font-size: 12px; }
    .weather-today__meta { font-size: 11px; gap: 4px; }
    .weather-stats { gap: 4px; }
    .weather-stats__item { padding: 6px 3px; }
    .weather-stats__label { font-size: 8px; }
    .weather-stats__value { font-size: 11px; }
    .weather-stats__icon { font-size: 14px; }

    /* Погода — источники: одна строка с усечением ссылки */
    .weather-source__name { font-size: 12px; }
    .weather-source__link { font-size: 12px; }
    .weather-source__save { width: 24px; height: 24px; font-size: 15px; }

    /* Финансы */
    .finance-date-row { font-size: 12px; margin-bottom: 8px; }
    .finance-col__head { font-size: 12px; padding: 9px 10px; }
    .finance-col__rates { padding: 3px 10px; }
    .finance-rate-item { padding: 6px 0; gap: 4px; }
    .finance-rate-item__code { font-size: 12px; min-width: 30px; }
    .finance-rate-item__usd { font-size: 12px; }
    .finance-rate-item__rub { font-size: 10px; }
    .finance-rate-item__change { font-size: 10px; }
    .finance-col__sources { padding: 6px 10px 8px; gap: 4px; }
    .finance-col__sources-label { font-size: 9px; margin-bottom: 2px; }
    .finance-source__name { font-size: 11px; }
    .finance-source__link { font-size: 11px; }
    .finance-source__save { width: 24px; height: 24px; font-size: 15px; }

    /* Новости */
    .news-sources { gap: 4px; margin-bottom: 8px; }
    .news-source-btn { font-size: 10px; padding: 3px 8px; }
    .news-item { gap: 6px; padding: 7px 0; }
    .news-item__num { font-size: 11px; min-width: 14px; }
    .news-item__title { font-size: 12px; }
    .news-item__excerpt { font-size: 10px; }
    .news-item__date { font-size: 10px; }
    .news-date-header { font-size: 10px; }
    /* Новости — футер источника: одна строка с усечением */
    .news-source-footer { padding: 7px 0 8px; }
    .news-source-footer__name { font-size: 12px; }
    .news-source-footer__link { font-size: 12px; }
    .news-source-footer__save { width: 24px; height: 24px; font-size: 15px; }

    /* Инструменты */
    .tools-menu { gap: 4px; margin-bottom: 12px; }
    .tools-menu-btn { font-size: 11px; padding: 5px 8px; }
    .tools-menu-btn__icon { font-size: 12px; }

    /* Конвертеры */
    .color-converter__fields { flex-direction: column; }
    .unit-converter__row { flex-direction: column; }
}