/* =========================
   Адаптивность
========================= */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }

    .logo h1 {
        font-size: 2rem;
    }

    .slot {
        flex-direction: column;
    }

    .image-container {
        flex: 0 0 auto;
        width: 100%;
        height: 200px;
    }

    .control-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .action-panel {
        flex-direction: column;
    }

    .btn-action {
        justify-content: center;
    }

    /* Модалки на мобильных */
    .modal .close {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        font-size: 28px;
    }

    #text-modal .modal-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .modal-header-buttons {
        width: 100%;
        justify-content: space-between;
    }

    /* Компактные слоты на мобильных */
    .slot.empty-slot.compact {
        padding: 15px;
        min-height: 70px;
    }

    .compact-upload-area i {
        font-size: 1.5rem;
    }

    .compact-upload-area span {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .logo {
        flex-direction: column;
        gap: 10px;
    }

    .logo i {
        font-size: 2rem;
    }

    .logo h1 {
        font-size: 1.8rem;
    }

    .slot-controls {
        flex-wrap: wrap;
    }

    .btn-control {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }

    .upload-area i {
        font-size: 3rem;
    }

    .upload-area h3 {
        font-size: 1.5rem;
    }
}