:root {
        --primary-blue: #42e8f1;
        --accent-purple: #2d6ddc;
        --bg-soft: #ffffff;
    }

    body {
        background-color: var(--bg-soft);
        color: #333;
    }
    .custom-header {
        background: linear-gradient(135deg, var(--primary-blue), var(--accent-purple));
        padding: 1rem 1rem; /* уменьшил padding сверху/снизу, чтобы шапка не была огромной */
        margin-bottom: 2rem;
        min-height: 72px; /* фиксируем минимальную высоту, чтобы контент не «прыгал» */
    }
    .page-header {
        background: linear-gradient(135deg, var(--primary-blue), var(--accent-purple));
        color: white;
        padding: 2rem 1rem;
        margin-bottom: 2rem;
    }

    .header-content {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        width: 100%;
    }

        .logo-box {
        flex: 0 0 40%;       /* ровно треть по ширине */
        min-height: 128px;       /* минимальная высота шапки */
        display: flex;
        align-items: center;     /* центрирование по вертикали */
        justify-content: center; /* центрирование по горизонтали */
    }

        .logo-img {
        width: 128px;             /* растягивается на всю ширину бокса */
        height: auto;            /* высота подстроится по пропорциям */
        max-height: 128px;        /* ограничение сверху, чтобы не был гигантским */
        display: block;
        object-fit: contain;     /* опционально, если вдруг понадобится */
    }

    .card-payment {
        border: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }

    .payment-icon {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }

    .btn-action {
        background-color: var(--primary-blue);
        color: white;
        border: none;
    }
    .btn-action:hover {
        background-color: #3a56c5;
        color: white;
    }