:root {
    --vtem-navy: #0c344d;
    --vtem-blue: #4a9bd1;
    --vtem-ink: #163a50;
    --vtem-line: #d6e4ec;
}

body.vtem-auth-page {
    min-height: 100vh;
    margin: 0;
    color: var(--vtem-ink);
    background: #f4f8fa;
}

.vtem-auth-page .scrollable-page { min-height: 100vh; }

.vtem-auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(340px, 1.1fr) minmax(420px, .9fr);
}

.vtem-auth-story {
    min-height: 100vh;
    padding: clamp(32px, 6vw, 84px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background: linear-gradient(140deg, #0c344d, #124f72);
    position: relative;
    overflow: hidden;
}

.vtem-auth-story::after {
    content: "";
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255,255,255,.16);
    position: absolute;
    right: -170px;
    bottom: -150px;
    transform: rotate(45deg);
}

.vtem-auth-brand { display: inline-flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; width: fit-content; }
.vtem-auth-brand:hover { color: #fff; }
.vtem-auth-brand img { width: 56px; height: 56px; object-fit: contain; padding: 6px; background: #fff; border-radius: 12px; }
.vtem-auth-brand strong { display: block; font-size: 17px; line-height: 1.1; }
.vtem-auth-brand small { display: block; margin-top: 5px; letter-spacing: .26em; color: #7fc5ee; font-size: 10px; font-weight: 700; }
.vtem-auth-message { position: relative; z-index: 1; max-width: 680px; margin: 72px 0; }
.vtem-auth-kicker, .vtem-form-kicker { font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.vtem-auth-kicker { color: #83caef; }
.vtem-auth-message h1 { margin: 18px 0 22px; font-size: clamp(38px, 5vw, 66px); line-height: 1.02; letter-spacing: -.045em; color: #fff; }
.vtem-auth-message p { max-width: 590px; margin: 0; color: #c8dce7; font-size: 18px; line-height: 1.65; }
.vtem-auth-proof { display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 1; }
.vtem-auth-proof span { padding: 8px 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #d7e8f1; font-size: 12px; }

.vtem-auth-form { display: flex; align-items: center; justify-content: center; padding: 36px; background: #f7fafc; }
.vtem-auth-form .form-signin { width: min(100%, 470px); max-width: none; margin: 0; }
.vtem-login-card { border: 0 !important; border-radius: 20px !important; box-shadow: 0 24px 65px rgba(17, 57, 80, .11) !important; overflow: hidden; }
.vtem-login-card .card-header { padding: 34px 34px 8px; border: 0; background: #fff; text-align: left; }
.vtem-form-kicker { color: #3389bf; }
.vtem-login-card h2 { margin: 10px 0 8px; color: var(--vtem-navy); font-size: 30px; letter-spacing: -.03em; }
.vtem-login-card .card-header p { margin: 0; color: #728795; }
.vtem-login-card .card-body { padding: 26px 34px 34px !important; }
.vtem-login-card label { display: block; margin-bottom: 7px; color: #365465; font-size: 13px; font-weight: 700; }
.vtem-login-card .form-control { min-height: 49px; border-color: var(--vtem-line); border-radius: 10px; }
.vtem-login-card .form-control:focus { border-color: var(--vtem-blue); box-shadow: 0 0 0 3px rgba(74,155,209,.14); }
.vtem-login-card .btn-primary { min-height: 51px; border: 0; border-radius: 10px; background: var(--vtem-navy); font-size: 15px; font-weight: 700; }
.vtem-login-card .btn-primary:hover { background: #154e70; }
.vtem-help-link a { color: #277dad; font-weight: 600; }

@media (max-width: 900px) {
    .vtem-auth-shell { grid-template-columns: 1fr; }
    .vtem-auth-story { min-height: auto; padding: 28px; }
    .vtem-auth-message { margin: 58px 0 34px; }
    .vtem-auth-message h1 { font-size: 38px; }
    .vtem-auth-proof { display: none; }
    .vtem-auth-form { padding: 28px 18px 44px; }
}