:root {
    color-scheme: light;
    font-family: "Segoe UI", Arial, sans-serif;
    color: #172b3a;
    background: #f4f3ee;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100svh;
    display: grid;
    grid-template-rows: 1fr auto;
}
.login-layout {
    align-self: center;
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    width: min(900px, calc(100% - 48px));
    margin: 40px auto;
    border: 1px solid #bfc8cc;
    background: white;
}
.login-cover {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #112538;
    padding: 32px;
}
.login-cover img {
    width: min(100%, 234px);
    height: auto;
    position: relative;
    z-index: 1;
}
.route-print {
    position: absolute;
    inset: 30% 0 -8%;
    overflow: hidden;
    background-image: radial-gradient(#7690a1 1px, transparent 1px);
    background-size: 18px 18px;
}
.route-print i {
    position: absolute;
    left: -48%;
    top: 26%;
    width: 125%;
    height: 36%;
    border: 5px solid #719cc1;
    border-left: 0;
    border-radius: 0 52px 52px 0;
    transform: rotate(-33deg);
}
.route-print i:nth-child(2) {
    top: 33%;
    left: -37%;
    border-color: #4277ff;
}
.route-print i:nth-child(3) {
    top: 40%;
    left: -26%;
    border-color: #d0dce5;
}
.form-panel { padding: clamp(28px, 5vw, 66px); }
h1 { font-size: 40px; letter-spacing: -.045em; margin: 0; }
.form-intro, .access-help p { color: #506170; line-height: 1.5; }
.form-intro { margin: 6px 0 32px; }
form label { display: block; font-weight: 600; margin: 16px 0 7px; }
input, button { font: inherit; }
input {
    width: 100%;
    padding: 12px;
    border: 1px solid #a8b7c0;
    border-radius: 4px;
}
.password-field { position: relative; }
.password-field input { padding-right: 76px; }
.password-field button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px;
    background: transparent;
    color: #184999;
    border: 0;
    cursor: pointer;
}
.submit-button {
    margin-top: 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    background: #124fce;
    color: white;
    border: 0;
    border-radius: 4px;
    font-weight: 650;
    cursor: pointer;
}
.submit-button:hover { background: #073ca4; }
.access-help { border-top: 1px solid #dde1e3; margin-top: 26px; padding-top: 16px; }
.access-help p { margin: 4px 0 0; font-size: 14px; }
.form-error { background: #fff0ee; color: #842319; padding: 12px; }
.site-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: space-between;
    width: min(900px, calc(100% - 48px));
    margin: 0 auto 20px;
    color: #52636d;
    font-size: 12px;
}
:focus-visible { outline: 3px solid #498bff; outline-offset: 2px; }
@media (max-width: 650px) {
    .login-layout { grid-template-columns: 1fr; width: min(94%, 440px); margin: 20px auto; }
    .login-cover { padding: 16px 24px; }
    .login-cover img { width: 144px; }
    .route-print { inset: -50% -20% -60% 55%; }
    .form-panel { padding: 26px 24px; }
    h1 { font-size: 32px; }
}