.bh-login {
    --bh-surface:#f8fafc;
    --bh-text:#0f172a;
    --bh-muted:#64748b;
    --bh-border:#e2e8f0;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    min-height:100svh;
    background:var(--bh-surface);
    color:var(--bh-text);
}

.dark .bh-login {
    --bh-surface:#0b0f19;
    --bh-text:#f1f5f9;
    --bh-muted:#94a3b8;
    --bh-border:#253044;
}

.bh-brand {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:100svh;
    padding:48px 64px;
    background:#0b1424;
    color:#fff;
}

.bh-brand:before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:radial-gradient(ellipse at 10% 45%,#00559655,transparent 65%),radial-gradient(ellipse at 100% 100%,#00c2ff14,transparent 55%);
}

.bh-brand:after {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    opacity:.15;
    background-image:linear-gradient(#64748b44 1px,transparent 1px),linear-gradient(90deg,#64748b44 1px,transparent 1px);
    background-size:64px 64px;
    mask-image:linear-gradient(transparent,#000,transparent);
}

.bh-brand-logo {
    display:block;
    width:220px;
}

.bh-brand-logo img {
    width:100%;
    height:auto;
    object-fit:contain;
}

.bh-brand-content {
    max-width:470px;
    margin:64px 0;
}

.bh-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.18em;
    color:#a5c7dd;
}

.bh-eyebrow>span {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#00c2ff;
}

.bh-brand h2 {
    margin:24px 0 20px;
    font-size:clamp(32px,3.2vw,48px);
    font-weight:600;
    line-height:1.2;
    letter-spacing:-.035em;
}

.bh-brand h2>span {
    color:#8ac8ed;
}

.bh-brand-content>p {
    max-width:380px;
    color:#a7b6ca;
    font-size:15px;
    line-height:1.8;
}

.bh-platform {
    margin-top:40px;
    max-width:390px;
    border:1px solid #ffffff14;
    border-radius:14px;
    background:#0b142499;
    box-shadow:0 24px 48px #00000020;
}

.bh-platform-top {
    display:flex;
    align-items:center;
    gap:6px;
    padding:17px 20px;
    border-bottom:1px solid #ffffff0d;
    color:#8396ad;
    font-family:ui-monospace,monospace;
    font-size:9px;
    letter-spacing:.07em;
}

.bh-platform-top>span {
    margin-right:auto;
}

.bh-platform-top i {
    width:5px;
    height:5px;
    border-radius:50%;
    background:#415269;
}

.bh-platform-row {
    display:flex;
    align-items:center;
    gap:12px;
    padding:17px 20px;
    color:#c4d0df;
    font-size:12px;
}

.bh-platform-row+.bh-platform-row {
    border-top:1px solid #ffffff08;
}

.bh-platform-row svg {
    width:18px;
    height:18px;
    color:#77bce4;
}

.bh-platform-line {
    margin-left:auto;
    width:48px;
    height:4px;
    background:#005596;
    border-radius:4px;
}

.bh-brand-footer {
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size:11px;
    color:#8293aa;
}

.bh-brand-footer>span:last-child {
    font-size:9px;
    letter-spacing:.15em;
}

.bh-signin {
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:32px 40px;
}

.bh-topbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.bh-workspace {
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--bh-muted);
    font-size:12px;
}

.bh-workspace svg {
    width:16px;
    height:16px;
}

.bh-form-area {
    width:100%;
    max-width:380px;
    margin:auto;
    padding:64px 0;
}

.bh-lock {
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    margin-bottom:28px;
    border:1px solid #00559622;
    border-radius:14px;
    background:#0055960a;
    color:#005596;
}

.dark .bh-lock {
    color:#7dd3fc;
    border-color:#7dd3fc24;
    background:#7dd3fc0a;
}

.bh-lock svg {
    width:23px;
    height:23px;
}

.bh-login .fi-simple-header {
    align-items:flex-start;
}

.bh-login .fi-simple-header-heading {
    text-align:left;
    font-size:30px;
    font-weight:600;
    letter-spacing:-.035em;
}

.bh-login .fi-simple-header-subheading {
    text-align:left;
    line-height:1.6;
    color:var(--bh-muted);
}

.bh-login .fi-input-wrp {
    border-radius:10px;
}

.bh-login .fi-input {
    padding-top:13px;
    padding-bottom:13px;
}

.bh-login .fi-btn {
    min-height:46px;
    border-radius:10px;
}

.bh-login .fi-simple-page section {
    row-gap:32px;
}

.bh-access-note {
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:28px;
    padding-top:24px;
    border-top:1px solid var(--bh-border);
    color:var(--bh-muted);
    font-size:11px;
    line-height:1.7;
}

.bh-access-note svg {
    width:16px;
    height:16px;
    flex-shrink:0;
    margin-top:2px;
}

.bh-signin-footer {
    display:flex;
    justify-content:space-between;
    gap:16px;
    color:var(--bh-muted);
    font-size:11px;
}

.bh-mobile-logo {
    display:none;
}

@media(min-width:1500px) {
    .bh-brand {
        padding:56px 88px;
    }
    .bh-brand-content {
        align-self:center;
        width:100%;
        max-width:520px;
    }
}

@media(max-width:1023px) {
    .bh-brand {
        padding:36px;
    }
    .bh-signin {
        padding:28px;
    }
    .bh-brand-footer>span:last-child {
        display:none;
    }
    .bh-brand h2 {
        font-size:34px;
    }
}

@media(max-width:767px) {
    .bh-login {
        grid-template-columns:1fr;
    }
    .bh-brand {
        display:none;
    }
    .bh-signin {
        min-height:100svh;
        padding:24px;
    }
    .bh-form-area {
        padding:40px 0;
    }
    .bh-mobile-logo {
        display:block;
        margin-bottom:40px;
    }
    .bh-mobile-logo .fi-logo {
        margin:0;
        height:36px!important;
    }
    .bh-login .fi-simple-header-heading {
        font-size:28px;
    }
}