.ber-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(2, 8, 18, .76);
    backdrop-filter: blur(10px);
    display: none;
    place-items: center;
    padding: 20px
}

.ber-modal.show {
    display: grid
}

.ber-card {
    position: relative;
    width: min(780px, 96vw);
    max-height: 92vh;
    overflow: auto;
    background: #091426;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    box-shadow: 0 34px 100px rgba(0, 0, 0, .55);
    padding: 28px;
    color: #e8f0fb
}

.ber-close {
    position: absolute;
    right: 16px;
    top: 13px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .05);
    color: #dbe7f7;
    font-size: 24px;
    cursor: pointer
}

.ber-head {
    padding-right: 48px
}

.ber-kicker {
    display: block;
    color: #60a5fa;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em
}

.ber-head h2 {
    margin: 6px 0 8px;
    font-size: clamp(1.7rem, 3vw, 2.45rem);
    line-height: 1.05
}

.ber-head p {
    margin: 0;
    color: #92a4be;
    line-height: 1.55
}

.ber-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin-top: 22px
}

.ber-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 11px;
    font-weight: 850;
    color: #c8d4e4
}

.ber-grid input,
.ber-grid select,
.ber-grid textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: #0d1b30;
    color: #edf4ff;
    padding: 11px;
    font: inherit;
    outline: 0
}

.ber-grid input:focus,
.ber-grid select:focus,
.ber-grid textarea:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .12)
}

.ber-grid textarea {
    resize: vertical
}

.ber-full {
    grid-column: 1/-1
}

.ber-consent {
    margin-top: 15px;
    padding: 11px 13px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: #9fb0c7;
    font-size: 12px
}

.ber-consent label {
    display: flex;
    gap: 9px
}

.ber-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 17px
}

.ber-btn {
    border: 0;
    border-radius: 10px;
    padding: 11px 15px;
    font-weight: 850;
    cursor: pointer
}

.ber-btn.primary {
    background: #22c55e;
    color: #05130d
}

.ber-btn.secondary {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #e5edf8
}

.ber-btn:disabled {
    opacity: .55;
    cursor: wait
}

.ber-result {
    margin-top: 12px;
    padding: 0;
    font-size: 12px
}

.ber-result.success,
.ber-result.error {
    padding: 12px;
    border-radius: 10px
}

.ber-result.success {
    background: rgba(34, 197, 94, .1);
    border: 1px solid rgba(34, 197, 94, .22);
    color: #8ff0b1
}

.ber-result.error {
    background: rgba(248, 113, 113, .1);
    border: 1px solid rgba(248, 113, 113, .22);
    color: #ffc0c0
}

@media(max-width:680px) {
    .ber-card {
        padding: 20px
    }

    .ber-grid {
        grid-template-columns: 1fr
    }

    .ber-full {
        grid-column: auto
    }

    .ber-actions {
        flex-direction: column-reverse
    }

    .ber-btn {
        width: 100%
    }
}