:root {
    --bv-bg: #050912;
    --bv-bg-soft: #07101c;
    --bv-panel: rgba(10, 19, 33, .92);
    --bv-panel-2: rgba(7, 14, 25, .96);

    --bv-line: rgba(130, 157, 194, .13);
    --bv-line-blue: rgba(67, 124, 232, .27);

    --bv-text: #f5f7fb;
    --bv-muted: #75859c;
    --bv-muted-2: #9aa8bc;

    --bv-blue: #3379f6;
    --bv-blue-dark: #1553c9;

    --bv-green: #4bd9a0;
    --bv-red: #ff6872;

    --bv-radius: 20px;
}

/* =====================================================
   GLOBAL
   ===================================================== */

html {
    background: var(--bv-bg) !important;
}

body.bv-bank-ready {
    background:
        radial-gradient(
            circle at 58% -10%,
            rgba(31, 82, 175, .15),
            transparent 35%
        ),
        radial-gradient(
            circle at 100% 15%,
            rgba(26, 77, 174, .06),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #050912 0%,
            #07101a 48%,
            #050a11 100%
        ) !important;

    color: var(--bv-text) !important;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    -webkit-font-smoothing: antialiased;
}

body.bv-bank-ready * {
    box-sizing: border-box;
}

body.bv-bank-ready ::selection {
    background: rgba(52, 118, 242, .34);
}

body.bv-bank-ready ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

body.bv-bank-ready ::-webkit-scrollbar-track {
    background: transparent;
}

body.bv-bank-ready ::-webkit-scrollbar-thumb {
    background: rgba(110, 138, 177, .22);
    border-radius: 100px;
}

/* =====================================================
   SIDEBAR
   ===================================================== */

.bv-bank-sidebar {
    position: relative !important;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(39, 98, 215, .11),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #06101c,
            #050b14
        ) !important;

    border-right:
        1px solid rgba(117, 146, 186, .12) !important;

    box-shadow:
        24px 0 70px rgba(0,0,0,.16) !important;
}

.bv-bank-brand {
    position: relative;
}

.bv-bank-brand::after {
    content: "PRIVATE FINANCIAL SYSTEM";

    display: block;

    margin-top: 4px;

    color: #56677f;

    font-size: 8px;
    font-weight: 750;
    letter-spacing: .18em;
}

.bv-bank-nav {
    transition:
        background .17s ease,
        border-color .17s ease,
        color .17s ease,
        transform .17s ease !important;
}

.bv-bank-nav:hover {
    background:
        rgba(39, 78, 139, .08) !important;

    transform: translateX(2px);
}

.bv-bank-nav-active {
    background:
        linear-gradient(
            90deg,
            rgba(31, 91, 207, .22),
            rgba(14, 42, 82, .07)
        ) !important;

    border-color:
        rgba(55, 120, 246, .31) !important;

    box-shadow:
        inset 3px 0 0 #397df8,
        0 14px 30px rgba(17, 66, 154, .08) !important;
}

/* =====================================================
   GENERIC BANK PANELS
   ===================================================== */

.bv-bank-panel {
    border:
        1px solid var(--bv-line) !important;

    border-radius:
        var(--bv-radius) !important;

    background:
        linear-gradient(
            145deg,
            rgba(11, 21, 37, .93),
            rgba(7, 15, 27, .97)
        ) !important;

    box-shadow:
        0 28px 70px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.023) !important;
}

/* =====================================================
   HEADER / TITLE
   ===================================================== */

.bv-bank-page-title {
    letter-spacing: -.035em !important;
}

.bv-bank-page-title::after {
    content: "Персональный финансовый центр";

    display: block;

    margin-top: 6px;

    color: var(--bv-muted);

    font-size: 11px;
    font-weight: 450;

    letter-spacing: 0;
}

.bv-bank-profile {
    border:
        1px solid rgba(105, 137, 184, .11) !important;

    border-radius: 13px !important;

    padding: 6px 9px !important;

    background:
        rgba(8, 17, 30, .52) !important;

    backdrop-filter: blur(12px);
}

/* =====================================================
   MAIN BALANCE PANEL
   ===================================================== */

.bv-bank-balance-panel {
    position: relative !important;

    min-height: 360px !important;

    padding-right: 480px !important;

    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(48, 111, 235, .22),
            transparent 45%
        ),
        radial-gradient(
            circle at 95% 5%,
            rgba(31, 77, 165, .12),
            transparent 43%
        ),
        linear-gradient(
            145deg,
            #0b1d39,
            #09172b 50%,
            #071321
        ) !important;

    border-color:
        rgba(68, 122, 221, .24) !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.bv-bank-balance-panel::before {
    content: "";

    position: absolute;

    width: 440px;
    height: 440px;

    left: -250px;
    bottom: -340px;

    border-radius: 50%;

    border:
        1px solid rgba(74, 129, 229, .10);

    box-shadow:
        0 0 0 70px rgba(54, 108, 209, .018),
        0 0 0 140px rgba(54, 108, 209, .010);

    pointer-events: none;
}

.bv-bank-balance-number {
    color: #fff !important;

    font-weight: 740 !important;
    letter-spacing: -.05em !important;

    text-shadow:
        0 10px 35px rgba(0,0,0,.25);
}

/* =====================================================
   ORIGINAL BUTTONS - KEEP ORIGINAL FUNCTIONALITY
   ===================================================== */

.bv-bank-primary {
    border:
        1px solid rgba(108, 161, 255, .40) !important;

    border-radius: 12px !important;

    background:
        linear-gradient(
            180deg,
            #377eff,
            #175bd8
        ) !important;

    color: white !important;

    box-shadow:
        0 11px 30px rgba(28, 97, 228, .24),
        inset 0 1px 0 rgba(255,255,255,.20) !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease !important;
}

.bv-bank-primary:hover {
    transform: translateY(-1px);

    box-shadow:
        0 15px 37px rgba(28, 97, 228, .30),
        inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.bv-bank-secondary {
    border:
        1px solid rgba(117, 149, 195, .18) !important;

    border-radius: 12px !important;

    background:
        rgba(10, 26, 47, .68) !important;

    color: #dce5f2 !important;

    transition:
        background .16s ease,
        border-color .16s ease !important;
}

.bv-bank-secondary:hover {
    background:
        rgba(18, 42, 73, .80) !important;

    border-color:
        rgba(89, 137, 211, .31) !important;
}

/* =====================================================
   CARD MODULE
   ===================================================== */

#bv-bank-card-module {
    position: absolute;

    z-index: 10;

    width: 418px;

    right: 28px;
    top: 50%;

    transform: translateY(-50%);
}

.bv-bank-card-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 10px;

    color: #8495ad;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .13em;

    text-transform: uppercase;
}

.bv-bank-tier {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 9px;

    border-radius: 100px;

    font-size: 8px;
    font-weight: 850;
    letter-spacing: .12em;
}

.bv-bank-tier::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;

    box-shadow:
        0 0 10px currentColor;
}

.bv-bank-card {
    position: relative;

    width: 100%;
    aspect-ratio: 1.586 / 1;

    padding: 24px;

    border-radius: 21px;

    overflow: hidden;

    isolation: isolate;

    box-shadow:
        0 27px 60px rgba(0,0,0,.50),
        inset 0 1px 0 rgba(255,255,255,.13);

    transition:
        transform .23s ease,
        box-shadow .23s ease;
}

.bv-bank-card:hover {
    transform:
        perspective(1100px)
        rotateX(1deg)
        rotateY(-2deg)
        translateY(-2px);

    box-shadow:
        0 32px 75px rgba(0,0,0,.56),
        inset 0 1px 0 rgba(255,255,255,.16);
}

/* STANDARD */

.bv-card-standard {
    border:
        1px solid rgba(83, 142, 252, .35);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(57, 128, 255, .39),
            transparent 40%
        ),
        radial-gradient(
            circle at 0% 105%,
            rgba(26, 73, 167, .28),
            transparent 42%
        ),
        linear-gradient(
            142deg,
            #102b59,
            #0c1d39 48%,
            #07111f
        );
}

.bv-tier-standard {
    color: #84acff;

    background:
        rgba(50, 108, 217, .11);

    border:
        1px solid rgba(86, 142, 246, .20);
}

/* GOLD */

.bv-card-gold {
    border:
        1px solid rgba(225, 178, 72, .48);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(215, 166, 57, .41),
            transparent 36%
        ),
        radial-gradient(
            circle at 0% 110%,
            rgba(156, 104, 25, .22),
            transparent 43%
        ),
        linear-gradient(
            142deg,
            #33250c,
            #17130b 47%,
            #08090c
        );

    box-shadow:
        0 28px 65px rgba(0,0,0,.53),
        0 0 42px rgba(195,142,37,.06),
        inset 0 1px 0 rgba(255,230,157,.18);
}

.bv-tier-gold {
    color: #ebc15f;

    background:
        rgba(180, 129, 31, .11);

    border:
        1px solid rgba(222, 170, 62, .22);
}

/* PLATINUM */

.bv-card-platinum {
    border:
        1px solid rgba(205, 218, 232, .29);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(201, 216, 232, .22),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #29313b,
            #12171e 48%,
            #05080c
        );

    box-shadow:
        0 30px 70px rgba(0,0,0,.57),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.bv-tier-platinum {
    color: #dce5ee;

    background:
        rgba(166, 182, 201, .08);

    border:
        1px solid rgba(198, 211, 225, .17);
}

/* CARD DECORATION */

.bv-bank-card::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -120px;
    top: -120px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.075);

    box-shadow:
        0 0 0 42px rgba(255,255,255,.016),
        0 0 0 84px rgba(255,255,255,.010);

    z-index: -1;
}

.bv-bank-card::after {
    content: "V";

    position: absolute;

    right: 19px;
    bottom: -32px;

    color:
        rgba(255,255,255,.038);

    font-family:
        Georgia,
        serif;

    font-size: 150px;

    z-index: -1;
}

.bv-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.bv-card-bank {
    font-size: 14px;
    font-weight: 850;

    letter-spacing: .14em;
}

.bv-card-level {
    margin-top: 5px;

    font-size: 8px;
    font-weight: 850;

    letter-spacing: .22em;
}

.bv-card-contactless {
    font-size: 24px;

    opacity: .68;
}

.bv-bank-chip {
    position: relative;

    width: 46px;
    height: 34px;

    margin-top: 28px;

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            #f1da82,
            #b88e34 58%,
            #eed579
        );

    box-shadow:
        inset 0 0 0 1px rgba(80,56,13,.36);
}

.bv-bank-chip::before {
    content: "";

    position: absolute;

    top: 11px;
    left: 0;
    right: 0;
    bottom: 11px;

    border-top:
        1px solid rgba(88,62,15,.42);

    border-bottom:
        1px solid rgba(88,62,15,.42);
}

.bv-card-number {
    margin-top: 17px;

    color: #f4f6f9;

    font-family:
        Consolas,
        "SFMono-Regular",
        monospace;

    font-size: 18px;
    font-weight: 570;

    letter-spacing: .10em;
}

.bv-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    margin-top: 22px;
}

.bv-card-small-label {
    color:
        rgba(220,229,240,.49);

    font-size: 6px;
    font-weight: 700;

    letter-spacing: .15em;
}

.bv-card-value {
    margin-top: 4px;

    color: #f2f4f8;

    font-size: 9px;
    font-weight: 750;

    letter-spacing: .10em;

    text-transform: uppercase;
}

.bv-card-info {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 10px;

    padding: 9px 11px;

    border:
        1px solid rgba(115, 145, 188, .10);

    border-radius: 10px;

    background:
        rgba(3, 9, 18, .48);

    color: #7d8da5;

    font-size: 8px;
}

.bv-card-info strong {
    color: #dbe3ef;
}

/* =====================================================
   ACCOUNT PANEL
   ===================================================== */

.bv-bank-account-panel {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(40, 97, 199, .11),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(11, 22, 38, .95),
            rgba(7, 15, 27, .97)
        ) !important;
}

.bv-card-account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 15px;

    padding: 11px 12px;

    border:
        1px solid rgba(111, 141, 184, .11);

    border-radius: 11px;

    background:
        rgba(4, 11, 20, .36);
}

.bv-card-account-label {
    color: #6e7f98;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .13em;

    text-transform: uppercase;
}

.bv-card-account-value {
    font-size: 9px;
    font-weight: 850;

    letter-spacing: .08em;
}

/* =====================================================
   LEDGER
   ===================================================== */

.bv-bank-ledger {
    background:
        linear-gradient(
            145deg,
            rgba(10, 19, 33, .92),
            rgba(6, 13, 24, .96)
        ) !important;

    border-color:
        rgba(108, 137, 178, .12) !important;

    box-shadow:
        0 24px 60px rgba(0,0,0,.16) !important;
}

/* =====================================================
   FORMS / OTHER PAGES
   ===================================================== */

body.bv-bank-ready input,
body.bv-bank-ready select,
body.bv-bank-ready textarea {
    border:
        1px solid rgba(116, 145, 184, .17) !important;

    border-radius: 11px !important;

    background:
        rgba(5, 12, 22, .79) !important;

    color: #f2f5f9 !important;

    outline: none !important;

    transition:
        border-color .16s ease,
        box-shadow .16s ease !important;
}

body.bv-bank-ready input:focus,
body.bv-bank-ready select:focus,
body.bv-bank-ready textarea:focus {
    border-color:
        rgba(66, 128, 246, .48) !important;

    box-shadow:
        0 0 0 3px rgba(50, 112, 232, .08) !important;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1350px) {

    .bv-bank-balance-panel {
        padding-right: 410px !important;
    }

    #bv-bank-card-module {
        width: 350px;
        right: 22px;
    }

    .bv-card-number {
        font-size: 15px;
    }

    .bv-bank-chip {
        margin-top: 20px;
    }
}

@media (max-width: 1080px) {

    .bv-bank-balance-panel {
        min-height: 660px !important;
        padding-right: inherit !important;
        padding-bottom: 345px !important;
    }

    #bv-bank-card-module {
        width: min(
            420px,
            calc(100% - 40px)
        );

        right: auto;
        left: 20px;

        top: auto;
        bottom: 20px;

        transform: none;
    }
}

@media (max-width: 650px) {

    .bv-bank-page-title::after {
        display: none;
    }

    .bv-bank-balance-panel {
        min-height: 610px !important;
        padding-bottom: 300px !important;
    }

    #bv-bank-card-module {
        width: calc(100% - 28px);

        left: 14px;
        bottom: 14px;
    }

    .bv-bank-card {
        padding: 19px;
    }

    .bv-bank-chip {
        margin-top: 15px;
    }

    .bv-card-number {
        font-size: 13px;
    }

    .bv-card-info {
        display: none;
    }
}