:root { color-scheme: dark; font-family: 'Segoe UI', Arial, sans-serif; color: #edf2ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-content: center; padding: 42px 24px; background: radial-gradient(ellipse at 15% 10%, #35256380, transparent 55%), radial-gradient(ellipse at 85% 90%, #12466b60, transparent 50%), #090d21; }
.login-shell { width: min(1000px, calc(100vw - 48px)); display: grid; grid-template-columns: 1.1fr 1fr; border: 1px solid #39416b; border-radius: 24px; background: #11182f; box-shadow: 0 8px 0 #060a19, 0 30px 90px #03051380; overflow: hidden; }
.identity { padding: 38px 46px 42px; background: radial-gradient(ellipse at 50% 38%, #3f418d50, transparent 65%), linear-gradient(140deg, #1b2349, #1d1737); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #f5f7ff; font-size: 17px; letter-spacing: 2px; font-weight: 750; }
.brand small { display: block; font-size: 8px; color: #b4c0df; letter-spacing: 1.8px; margin-top: 6px; }
.monogram { display: grid; place-items: center; width: 42px; height: 45px; border-radius: 12px; background: linear-gradient(140deg, #aafaff, #48c9ff 55%, #9680ff); color: #09152f; letter-spacing: -.5px; transform: rotate(-5deg); box-shadow: 0 4px #3055a4, 0 8px 24px #41bfff40; }
.shield-scene { position: relative; display: grid; place-items: center; height: 230px; perspective: 500px; }
.shield { width: 105px; height: 125px; display: grid; place-items: center; background: linear-gradient(135deg, #9af1ff, #3daff5 35%, #6b53e7 75%, #362476); clip-path: polygon(50% 0, 96% 16%, 91% 66%, 75% 85%, 50% 100%, 25% 85%, 9% 66%, 4% 16%); transform: rotateY(-22deg) rotateZ(-6deg); }
.shield svg { width: 70px; stroke: white; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.orbit { position: absolute; width: 245px; height: 160px; border: 1px solid #72a7ff50; border-radius: 50%; transform: rotate(-25deg); }
.orbit.second { transform: rotate(25deg); width: 265px; height: 140px; }
.eyebrow, .console-label { font-size: 9px; letter-spacing: 2px; color: #8adfff; font-weight: 650; }
h1 { font-size: 38px; line-height: 1.2; letter-spacing: -1px; margin: 15px 0; }
.intro { font-size: 13px; line-height: 1.9; color: #aebcdb; max-width: 340px; }
.features { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.features span { font-size: 9px; padding: 7px 9px; border: 1px solid #46517d; border-radius: 20px; color: #c0ceeb; }
.form-panel { padding: 75px 45px 40px; align-self: center; }
.console-label { color: #a6a5d3; font-size: 8px; }
h2 { margin: 16px 0 10px; font-size: 29px; font-weight: 650; letter-spacing: -.7px; }
.subtitle { color: #a8b5d2; font-size: 12px; margin-bottom: 30px; }
label { display: block; font-size: 12px; color: #cfdbf3; margin-bottom: 10px; }
input:not([type=hidden]) { width: 100%; border: 1px solid #405077; background: #0d142b; padding: 14px 15px; color: #f0f5ff; border-radius: 8px; font: inherit; font-size: 12px; margin-bottom: 23px; }
input::placeholder { color: #788ba9; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #8ae5ff; outline-offset: 3px; }
button { width: 100%; padding: 14px 17px; display: flex; justify-content: space-between; border-radius: 8px; border: 1px solid #95d8ff; background: linear-gradient(110deg, #57c9f1, #8b83ff); color: #09162e; font-size: 13px; font-weight: 750; cursor: pointer; box-shadow: 0 4px #344b8d; }
button:hover { filter: brightness(1.1); }
.access-note { color: #94a3c4; font-size: 10px; line-height: 1.9; text-align: center; margin: 24px 0; }
.session-note { border-top: 1px solid #303d5c; padding-top: 22px; text-align: center; color: #9baecc; font-size: 10px; }
.session-note span { color: #86dfff; margin-right: 6px; }
.error { background: #592739; border: 1px solid #a55c74; color: #ffdeeb; padding: 12px; border-radius: 7px; font-size: 12px; line-height: 1.6; margin-bottom: 22px; }
footer { display: flex; justify-content: space-between; margin-top: 25px; font-size: 8px; letter-spacing: 1.5px; color: #8b99b8; }
footer span { letter-spacing: 0; }
@media (prefers-reduced-motion: no-preference) { .shield { animation: float-shield 5s ease-in-out 2; } @keyframes float-shield { 50% { transform: translateY(-9px) rotateY(-10deg) rotateZ(-3deg); } } }
@media (max-width: 700px) { .login-shell { grid-template-columns: 1fr; } .identity { padding: 28px; } .shield-scene, .features, .intro, .eyebrow { display: none; } h1 { font-size: 23px; margin-bottom: 0; } h1 br { display: none; } .form-panel { padding: 32px 28px; } }