html, body { min-height: 100%; margin: 0; }
body { background: #f5f7fb; color: #172033; font-family: Inter, Arial, sans-serif; }
.dion-login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(480px, 1.08fr) minmax(420px, .92fr); }
.dion-login-story { position: relative; overflow: hidden; display: flex; align-items: center; padding: clamp(3rem, 7vw, 8rem); color: #fff; background: radial-gradient(circle at 15% 20%, #1e55ad 0, #153b7d 35%, #0b214d 100%); }
.dion-login-story:after { content: ""; position: absolute; inset: 0; opacity: .08; background-image: linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px); background-size: 48px 48px; pointer-events: none; }
.dion-login-story-content { position: relative; z-index: 1; max-width: 680px; }
.dion-login-brand { width: 150px; max-height: 62px; object-fit: contain; object-position: left center; margin-bottom: 4.5rem; }
.dion-login-eyebrow { display: block; color: #7dd3fc; font-size: .72rem; font-weight: 800; letter-spacing: .18em; margin-bottom: 1rem; }
.dion-login-story h1 { font-size: clamp(2.6rem, 4.2vw, 4.7rem); line-height: 1.04; letter-spacing: -.045em; font-weight: 800; margin: 0 0 1.5rem; color: #fff; }
.dion-login-story p { max-width: 570px; font-size: 1.08rem; line-height: 1.75; color: #cbd8ee; }
.dion-login-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3.5rem; }
.dion-login-features > div { display: flex; gap: .75rem; padding: 1rem; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); border-radius: 14px; }
.dion-login-feature-icon { color: #7dd3fc; font-size: 1.2rem; }
.dion-login-features b, .dion-login-features small { display: block; }
.dion-login-features b { font-size: .86rem; }
.dion-login-features small { color: #aebed9; font-size: .72rem; margin-top: .2rem; }
.dion-login-orb { position: absolute; border-radius: 50%; opacity: .18; border: 1px solid white; }
.dion-login-orb-one { width: 300px; height: 300px; right: -110px; top: -70px; }
.dion-login-orb-two { width: 180px; height: 180px; left: -75px; bottom: -40px; }
.dion-login-form-side { display: flex; align-items: center; justify-content: center; padding: 2.5rem; background: linear-gradient(145deg, #fff, #f2f5fa); }
.dion-login-card { width: min(440px, 100%); }
.dion-login-mobile-brand { display: none; }
.dion-login-heading > span { font-size: .7rem; font-weight: 800; color: #2563eb; letter-spacing: .16em; }
.dion-login-heading h2 { font-size: 2rem; font-weight: 800; letter-spacing: -.035em; margin: .65rem 0 .5rem; }
.dion-login-heading p { color: #69758b; margin-bottom: 2.2rem; }
.dion-login-field { margin-bottom: 1.15rem; }
.dion-login-field label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: .45rem; }
.dion-login-field input { box-sizing: border-box; width: 100%; height: 52px; border: 1px solid #d7deea; background: #fff; border-radius: 10px; outline: 0; padding: 0 1rem; font: inherit; }
.dion-login-field input:focus { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.09); }
.dion-login-remember { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: #58647a; margin: 0 0 1rem; }
.dion-login-remember input { accent-color: #1d4ed8; }
.dion-login-error { color: #b91c1c; background: #fef2f2; border-radius: 8px; padding: .6rem .8rem; margin-bottom: 1rem; font-size: .82rem; }
.dion-login-error ul { margin: 0; padding-left: 1rem; }
.dion-login-submit { height: 52px; width: 100%; display: flex; align-items: center; justify-content: center; gap: .8rem; border: 0; border-radius: 10px; background: #1d4ed8; color: #fff; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 10px 25px rgba(29,78,216,.2); }
.dion-login-submit:hover { background: #173ea9; }
.dion-login-signup { text-align: center; color: #69758b; font-size: .8rem; margin-top: 1.2rem; }
.dion-login-signup a { color: #1d4ed8; font-weight: 700; }
.dion-login-security { text-align: center; color: #8a95a7; font-size: .72rem; margin-top: 2rem; }
@media (max-width: 900px) { .dion-login-shell { display: block; } .dion-login-story { display: none; } .dion-login-form-side { min-height: 100vh; box-sizing: border-box; padding: 1.5rem; } .dion-login-mobile-brand { display: block; width: 130px; max-height: 54px; object-fit: contain; object-position: left center; margin-bottom: 2rem; } .dion-login-heading h2 { font-size: 1.7rem; } }
@media (min-width: 901px) and (max-height: 820px) { .dion-login-story { padding: 2.5rem 7vw; } .dion-login-brand { margin-bottom: 2rem; } .dion-login-features { margin-top: 2rem; } .dion-login-story h1 { font-size: clamp(2.5rem, 3.6vw, 3.8rem); } .dion-login-heading p { margin-bottom: 1.5rem; } }