:root { --navy: #11354e; --navy-deep: #09263b; --blue: #246187; --ink: #18394e; --muted: #758796; --accent: #2c98cf; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.login-page { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #eef3f6; color: var(--ink); }
.login-shell { min-height: 100vh; padding: clamp(18px, 4vw, 60px); display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at 13% 13%, rgba(77,161,204,.09),transparent 45%), linear-gradient(145deg,#f2f7f9,#e8eef3); }
.login-panel { width: min(1100px, 100%); min-height: 610px; display: grid; grid-template-columns: 1.06fr 1fr; border-radius: 22px; background: white; overflow: hidden; box-shadow: 0 26px 75px rgba(15,47,71,.12) !important; }
.login-intro { position: relative; color: white; padding: 52px 55px 42px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: linear-gradient(145deg,#173d5a,#0b2b42 72%); isolation: isolate; }
.login-intro:after { content: ""; position: absolute; width: 420px; height: 420px; border: 1px solid rgba(130,202,232,.18); border-radius: 50%; right: -225px; top: 36%; box-shadow: 0 0 0 70px rgba(130,202,232,.035), 0 0 0 145px rgba(130,202,232,.024); z-index: -1; }
.login-logo { background: white; border-radius: 12px; width: fit-content; padding: 8px 14px; }
.login-logo img { object-fit: contain; max-width: 175px; height: auto; display: block; }
.intro-copy { padding: 52px 0; }
.intro-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #9cc7dc; display: flex; gap: 12px; align-items: center; }
.eyebrow-dot, .secure-dot { display: inline-block; background: #5ac7df; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 12px rgba(90,199,223,.5); }
.intro-copy h1 { font-size: clamp(36px,4vw,58px); line-height: 1.16; margin: 27px 0 20px; font-weight: 700; letter-spacing: -2px; }
.intro-copy h1 span { color: #71bedf; }
.intro-copy p { color: #c2d3df; font-size: 16px; max-width: 330px; line-height: 1.8; }
.intro-decoration { display: flex; align-items: center; gap: 13px; color: #98b4c6; font-size: 11px; text-transform: uppercase; letter-spacing: 1.3px; font-weight: 600; margin-top: 40px; }
.decoration-line { height: 1px; width: 35px; background: #5ab8df; }
.intro-bottom { color: #a9c6d5; font-size: 12px; display: flex; gap: 12px; align-items: center; }
.login-form-panel { padding: 52px 50px 34px; display: flex; flex-direction: column; min-width: 0; }
.form-header { display: flex; align-items: center; gap: 10px; color: #537a92; letter-spacing: 1.6px; font-size: 11px; font-weight: 700; }
.form-icon { background: #e8f3f9; color: #246187; padding: 6px 9px; border-radius: 8px; font-size: 15px; }
.form-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 35px 0; }
.form-heading > span { display: block; font-size: 12px; font-weight: 700; color: #377ba3; margin-bottom: 11px; text-transform: uppercase; letter-spacing: 1px; }
.form-heading h2 { font-size: 28px; font-weight: 700; line-height: 1.28; letter-spacing: -.75px; margin: 0 0 13px; color: #19384e; }
.form-heading p { color: #748697; line-height: 1.6; font-size: 14px; margin-bottom: 27px; }
.form-label { font-size: 13px; font-weight: 700; color: #344d60; margin-bottom: 8px; }
.form-control { padding: 13px 15px; border: 1px solid #d9e3e9; background: #fbfdfe; color: #17394f; border-radius: 9px; font-size: 14px; }
.form-control:focus { border-color: #3995c4; box-shadow: 0 0 0 .2rem rgba(57,149,196,.12); }
.form-control::placeholder { color: #a1adb6; }
.login-submit { padding: 15px; display: flex; align-items: center; justify-content: center; gap: 22px; background: #174c6e; color: white; font-weight: 700; font-size: 14px; border-radius: 9px; border: 0; transition: background .2s; }
.login-submit:hover,.login-submit:focus-visible { background: #0d3958; color: #fff; }
.access-note { color: #8797a2; font-size: 12px; text-align: center; margin: 25px 0 0; }
.access-note a { color: #246d96; text-decoration: none; font-weight: 700; }
.access-note a:hover { text-decoration: underline; }
.login-footer { padding-top: 20px; border-top: 1px solid #edf1f3; color: #87949f; font-size: 11px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.login-footer nav { display: flex; gap: 20px; }
.login-footer a { color: #6c8191; text-decoration: none; }
.login-footer a:hover { color: #1c6b94; text-decoration: underline; }
.login-caption { color: #99aab5; margin-top: 24px; font-size: 11px; letter-spacing: .5px; }
@media (max-width: 850px) { .login-panel { grid-template-columns: 1fr; min-height: auto; max-width: 520px; } .login-intro { min-height: 210px; padding: 30px; } .intro-copy { padding: 26px 0 8px; } .intro-copy h1 { font-size: 29px; margin: 15px 0 6px; letter-spacing: -.8px; } .intro-copy p { font-size: 13px; line-height: 1.6; margin: 0; } .intro-decoration,.intro-bottom { display: none; } .login-form-panel { padding: 32px; } .form-main { padding: 30px 0; } }
@media (max-width: 420px) { .login-shell { padding: 12px; } .login-intro { padding: 22px; } .login-form-panel { padding: 24px; } .login-footer { align-items: start; flex-direction: column; } .form-heading h2 { font-size: 23px; } }