:root {
    /* Цвета */
    --color-overlay: hsla(0, 0%, 0%, 0.7);
    --color-bg-modal: hsl(0, 0%, 100%);
    --color-text-message: hsl(0, 0%, 20%);
    --color-btn-primary: hsl(0, 100%, 41%);
    --color-btn-primary-hover: hsl(5, 92%, 33%);
    --color-btn-text: hsl(0, 0%, 100%);
    --color-shadow-default: hsla(0, 0%, 0%, 0.3);
    --color-shadow-hover: hsla(0, 0%, 0%, 0.2);

    /* Размеры теней */
    --shadow-offset-md: 0.3125rem;
    --shadow-blur-lg: 1.5625rem;
    --shadow-offset-sm: 0.25rem;
    --shadow-blur-md: 0.5rem;

    /* Отступы */
    --spacing-xl: 2.5rem;
    --spacing-lg: 1.875rem;
    --spacing-md: 1.25rem;
    --spacing-sm: 0.75rem;
    --spacing-xs: 0.625rem;

    /* Радиусы */
    --radius-lg: 0.75rem;
    --radius-sm: 0.375rem;

    /* Шрифты */
    --font-size-content: 1.25rem;
    --font-size-message: 1.375rem;
    --font-size-btn: 1rem;
    --font-size-message-mobile: 1.125rem;
    --font-size-btn-mobile: 0.9375rem;

    /* Размеры */
    --modal-max-width: 28.125rem;
    --btn-min-width: 6.25rem;
    --modal-appear-translate: -3.125rem;

    /* Интерактив */
    --btn-hover-translate: -0.125rem;
}

.modal {
    height: 100%;
    background-color: var(--color-overlay);
    display: none;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
}

.modal__content {
    font-weight: 600;
    font-size: var(--font-size-content);
    background-color: var(--color-bg-modal);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: 0 var(--shadow-offset-md) var(--shadow-blur-lg) var(--color-shadow-default);
    max-width: var(--modal-max-width);
    width: 80%;
    animation: modal-appear 0.7s ease-out;
}

.modal__close-btn {
    background-color: var(--color-btn-primary);
    color: var(--color-btn-text);
    border: none;
    padding: var(--spacing-sm) calc(var(--spacing-md) * 1.25);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-btn);
    font-weight: 600;
    transition: all 0.3s;
    display: inline-block;
    width: auto;
    min-width: var(--btn-min-width);
}

.modal__close-btn:hover {
    background-color: var(--color-btn-primary-hover);
    transform: translateY(var(--btn-hover-translate));
    box-shadow: 0 var(--shadow-offset-sm) var(--shadow-blur-md) var(--color-shadow-hover);
}

.modal__close-btn:active {
    transform: translateY(0);
}

@keyframes modal-appear {
    from {
        opacity: 0;
        transform: translateY(var(--modal-appear-translate)) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 600px) {
    .modal__content {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .modal__close-btn {
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: var(--font-size-btn-mobile);
    }
}