:root {
    --vtem-navy: #0c344d;
    --vtem-blue: #4a9bd1;
    --vtem-ink: #163a50;
    --vtem-muted: #6f8492;
    --vtem-line: #d8e5ec;
}

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

.vtem-accounts-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(380px, 1.05fr) minmax(440px, .95fr);
}

.vtem-accounts-story {
    min-height: 100vh;
    padding: clamp(34px, 6vw, 84px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, #0a3047 0%, #124c6d 100%);
}

.vtem-accounts-story::before,
.vtem-accounts-story::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255,255,255,.14);
    transform: rotate(45deg);
}
.vtem-accounts-story::before { width: 310px; height: 310px; right: -120px; top: 8%; }
.vtem-accounts-story::after { width: 470px; height: 470px; left: -280px; bottom: -230px; }

.vtem-accounts-brand { display: inline-flex; align-items: center; gap: 14px; width: fit-content; color: #fff; text-decoration: none; position: relative; z-index: 1; }
.vtem-accounts-brand:hover { color: #fff; }
.vtem-accounts-brand img { width: 58px; height: 58px; padding: 6px; object-fit: contain; background: #fff; border-radius: 13px; }
.vtem-accounts-brand strong { display: block; font-size: 17px; line-height: 1.1; }
.vtem-accounts-brand small { display: block; margin-top: 5px; color: #79c1eb; font-size: 10px; font-weight: 800; letter-spacing: .25em; }
.vtem-accounts-copy { max-width: 680px; margin: 70px 0; position: relative; z-index: 1; }
.vtem-accounts-kicker { color: #84c9ee; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.vtem-accounts-copy h1 { margin: 18px 0 22px; color: #fff; font-size: clamp(40px, 5vw, 68px); line-height: 1.01; letter-spacing: -.048em; }
.vtem-accounts-copy p { max-width: 610px; margin: 0; color: #cbdee8; font-size: 18px; line-height: 1.65; }
.vtem-accounts-features { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.vtem-accounts-features span { padding: 8px 13px; border: 1px solid rgba(255,255,255,.21); border-radius: 999px; color: #e0edf3; font-size: 12px; }

.vtem-accounts-access { display: flex; flex-direction: column; justify-content: center; padding: 34px clamp(28px, 6vw, 82px); background: #f7fafc; }
.vtem-accounts-topbar { width: min(100%, 500px); margin: 0 auto 18px; display: flex; align-items: center; justify-content: space-between; color: var(--vtem-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.vtem-accounts-topbar .btn { margin: 0 !important; padding: 7px 12px; border-radius: 8px; background: #e7f2f8; border: 1px solid #d2e4ee; color: var(--vtem-navy); font-size: 11px; }
.vtem-accounts-card { width: min(100%, 500px); margin: 0 auto; padding: clamp(28px, 4vw, 44px); background: #fff; border: 1px solid #e5edf2; border-radius: 20px; box-shadow: 0 24px 65px rgba(17,57,80,.1); }
.vtem-accounts-card h2 { margin-bottom: 8px !important; color: var(--vtem-navy); font-size: 31px; letter-spacing: -.035em; }
.vtem-accounts-card h2 + p { color: var(--vtem-muted); }
.vtem-accounts-card .form-label { color: #365465; font-size: 13px; font-weight: 700; }
.vtem-accounts-card .form-control { min-height: 49px; border-color: var(--vtem-line); border-radius: 10px; }
.vtem-accounts-card .form-control:focus { border-color: var(--vtem-blue); box-shadow: 0 0 0 3px rgba(74,155,209,.14); }
.vtem-accounts-card .btn-primary { min-height: 48px; border: 0; border-radius: 10px; background: var(--vtem-navy) !important; font-weight: 700; }
.vtem-accounts-card .btn-primary:hover { background: #155170 !important; }
.vtem-accounts-card a { color: #277dad; }
.vtem-accounts-footer { width: min(100%, 500px); margin: 20px auto 0; color: #8496a1; font-size: 12px; line-height: 1.5; text-align: center; }
.vtem-accounts-footer a { color: #4388b2; }

@media (max-width: 960px) {
    .vtem-accounts-shell { grid-template-columns: 1fr; }
    .vtem-accounts-story { min-height: auto; padding: 28px; }
    .vtem-accounts-copy { margin: 55px 0 25px; }
    .vtem-accounts-copy h1 { font-size: 39px; }
    .vtem-accounts-features { display: none; }
    .vtem-accounts-access { padding: 30px 18px 44px; }
}