/* ── Box model + page reset ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
html, body, #page-wrapper { min-height: 100vh; margin: 0; }

/* ── Two-column grid ─────────────────────────────────────────────────────── */
.vn-login {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas: "brand form";
    min-height: 100vh;
    direction: ltr;
}
.vn-login__brand {
    grid-area: brand;
    background: radial-gradient(120% 90% at 15% 0%, #1B3663 0%, #102546 45%, #0B1B34 100%);
    color: #EDF1F8;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 48px 56px;
    position: relative;
    overflow: hidden;
}
.vn-login__panel {
    grid-area: form;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #fff;
    overflow-y: auto;
}
.vn-login__card { width: 100%; max-width: 392px; color: #131A26; }

@media (max-width: 900px) {
    .vn-login { grid-template-columns: 1fr; grid-template-areas: "form"; }
    .vn-login__brand { display: none; }
    .vn-login__panel { align-items: flex-start; padding: 40px 20px 48px; min-height: 100vh; }
    .vn-login__card { max-width: 100%; }
}

/* Hide Moodle's duplicate logo inside the login form */
#loginlogo, .login-logo { display: none !important; }

/* ── Lockup ──────────────────────────────────────────────────────────────── */
.vn-lockup { display: flex; align-items: center; gap: 12px; }
.vn-lockup__crest { width: 46px; height: 46px; flex: none; object-fit: contain; display: block; }
.vn-lockup__name { font-size: 16px; font-weight: 650; line-height: 1.15; color: #fff; }
.vn-lockup__sub { font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: #DCB666; margin-top: 2px; }

/* ── Tower SVG draw animation ────────────────────────────────────────────── */
.vn-tower-wrap { flex: 1; display: flex; align-items: center; justify-content: center; margin: 8px 0; }
.vn-tower { width: min(260px, 55%); max-height: 44vh; height: auto; overflow: visible; }

.vn-tower .draw {
    stroke: #DCB666;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: vn-draw 2.6s ease-out .25s forwards;
}
.vn-tower .glow {
    fill: #C99A3E;
    opacity: 0;
    animation: vn-glow .9s ease-out 2.1s forwards;
}
@keyframes vn-draw { to { stroke-dashoffset: 0; } }
@keyframes vn-glow { to { opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
    .vn-tower .draw { stroke-dashoffset: 0; animation: none; }
    .vn-tower .glow { opacity: .9; animation: none; }
}