/* ============================================================
   MIX OF PASSWORD v4.1 — АДАПТИВНОСТЬ
   Описание: Медиа-запросы для всех устройств
   ============================================================ */

/* ============================================================
   ПЛАНШЕТЫ И МАЛЕНЬКИЕ ЭКРАНЫ (до 600px)
   ============================================================ */
@media (max-width: 600px) {
    /* Основной контейнер */
    .mixpw-inner {
        padding: 20px 15px;
    }

    /* Заголовок */
    .mixpw-header {
        flex-direction: column;
        text-align: center;
    }

    .mixpw-header-text h2 {
        text-align: center;
    }

    .mixpw-subtitle {
        text-align: center;
    }

    /* Кнопка памятки */
    .mixpw-header-actions {
        margin-left: 0;
        margin-top: 10px;
    }

    .mixpw-btn-tip {
        width: 100%;
        justify-content: center;
    }

    /* Пресеты — 3 колонки */
    .mixpw-presets {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Чекбоксы — 1 колонка */
    .mixpw-options-grid {
        grid-template-columns: 1fr;
    }

    /* Поле пароля */
    .mixpw-output-display {
        font-size: 14px;
        padding: 10px;
    }

    /* Кнопки длины */
    .mixpw-length-presets {
        flex-wrap: wrap;
    }

    .mixpw-len-preset {
        flex: 0 0 calc(33.333% - 4px);
    }

    /* Кнопки копирования и показа */
    .mixpw-copy-btn {
        width: 40px;
        height: 40px;
    }

    .mixpw-toggle-btn {
        width: 34px;
        height: 34px;
    }

    /* Модальное окно памятки */
    .mixpw-tip-content {
        padding: 20px;
        max-height: 90vh;
    }

    .mixpw-tip-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mixpw-tip-rule {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ============================================================
   МАЛЕНЬКИЕ ТЕЛЕФОНЫ (до 480px)
   ============================================================ */
@media (max-width: 480px) {
    /* QR-код */
    .mixpw-qr-content {
        padding: 20px;
    }

    .mixpw-qr-code {
        padding: 10px;
        min-height: 160px;
    }

    .mixpw-qr-code canvas,
    .mixpw-qr-code img {
        width: 180px !important;
        height: 180px !important;
    }
}

/* ============================================================
   ОЧЕНЬ МАЛЕНЬКИЕ ТЕЛЕФОНЫ (до 400px)
   ============================================================ */
@media (max-width: 400px) {
    /* Пресеты — 2 колонки */
    .mixpw-presets {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Кнопки длины — 2 колонки */
    .mixpw-len-preset {
        flex: 0 0 calc(50% - 4px);
    }

    /* Поле пароля */
    .mixpw-output-display {
        font-size: 12px;
        padding: 8px;
    }

    /* Кнопки копирования и показа */
    .mixpw-copy-btn {
        width: 36px;
        height: 36px;
    }

    .mixpw-toggle-btn {
        width: 30px;
        height: 30px;
    }
}