:root { --navy: #123f75; --blue: #2da7ff; --ink: #172033; --muted: #66748d; --line: #dce5f0; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; font-family: Inter, "Segoe UI", Arial, sans-serif; color: var(--ink); background: radial-gradient(circle at top right, #24649e, var(--navy) 58%); }
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
.login-card { width: min(100%, 390px); padding: 34px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(255,255,255,.97); box-shadow: 0 20px 55px rgba(2,20,48,.3); }
.login-brand { color: var(--navy); font-size: 20px; font-weight: 800; }.login-brand span { color: #168ee1; }
h1 { margin: 25px 0 7px; font-size: 25px; }.login-card > p { margin: 0 0 24px; color: var(--muted); font-size: 14px; line-height: 1.45; }
label { display: block; margin: 15px 0 6px; font-size: 13px; font-weight: 700; } input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; } input:focus { border-color: var(--blue); outline: 3px solid rgba(45,167,255,.2); }
button { width: 100%; margin-top: 24px; padding: 12px; border: 0; border-radius: 8px; color: #fff; background: #167dcc; font: inherit; font-weight: 750; cursor: pointer; } button:hover { background: #0d6bb3; }
.login-error { margin: 14px 0; padding: 10px; border-radius: 7px; color: #992b37; background: #fee8eb; font-size: 13px; }

/* Full-screen Server Pulse sign-in experience. */
body { color: #f5f9ff; background: #020d25; overflow: auto; }
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; }
body::before { inset: 0; background: radial-gradient(circle at 62% 16%, rgba(22, 72, 170, .72), transparent 28%), radial-gradient(ellipse at 78% 76%, rgba(0, 186, 255, .22), transparent 28%), linear-gradient(115deg, #010a1e 0%, #041b4e 52%, #031432 100%); }
body::after { right: -18vw; bottom: -45vw; width: 110vw; height: 82vw; border: 1px solid rgba(33, 190, 255, .3); border-radius: 50% 50% 0 0; transform: rotate(-10deg); box-shadow: 0 -15px 40px rgba(18, 185, 255, .22); }
.login-page { width: min(1400px, 100%); min-height: 100vh; margin: 0 auto; padding: 70px 82px; grid-template-columns: minmax(0, 1fr) minmax(390px, 535px); place-items: center stretch; gap: clamp(55px, 9vw, 180px); }
.login-intro { align-self: center; max-width: 620px; }.login-brand { color: #fff; font-size: clamp(52px, 6vw, 86px); font-weight: 800; letter-spacing: -3px; line-height: 1; }.login-brand span { color: #12c7ef; }.login-brand sup { margin-left: 5px; color: #fff; font-size: 14px; letter-spacing: 0; vertical-align: top; }.login-tagline { margin: 20px 0 17px; color: #e7efff; font-size: 18px; }.login-tagline strong { color: #11d3f1; font-weight: 500; }.login-accent { width: 94px; height: 3px; margin-bottom: 45px; background: #14d7ed; }
.login-features { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }.login-features li { display: flex; align-items: center; gap: 24px; color: #edf5ff; font-size: 16px; }.login-features i { display: grid; width: 47px; height: 47px; place-items: center; border: 1px solid #17c9ed; border-radius: 12px; color: #19d8f2; background: rgba(9, 65, 119, .38); font-size: 23px; box-shadow: inset 0 0 12px rgba(29, 203, 250, .12); }.login-company { display: flex; align-items: center; gap: 13px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(174, 205, 255, .25); color: #c9d6ec; }.login-company > i { color: #21d8f4; font-size: 36px; }.login-company strong, .login-company span { display: block; }.login-company strong { color: #fff; font-size: 13px; }.login-company span { margin-top: 4px; font-size: 12px; }
.login-card { align-self: center; width: 100%; padding: 38px; border: 1px solid rgba(99, 173, 255, .78); border-radius: 28px; color: #f7fbff; background: linear-gradient(145deg, rgba(27, 62, 128, .8), rgba(5, 22, 59, .86)); box-shadow: inset 0 0 36px rgba(27, 151, 255, .13), 0 20px 48px rgba(0, 0, 0, .35); backdrop-filter: blur(12px); }.login-user-icon { display: grid; width: 74px; height: 74px; margin: 0 auto 17px; place-items: center; border: 1px solid #08c7f4; border-radius: 50%; color: #fff; background: radial-gradient(circle, #164ea3, #051c59); box-shadow: 0 0 0 8px rgba(15, 177, 255, .12), 0 0 23px #00c5ff; font-size: 36px; }.login-card h1 { margin: 0 0 7px; color: #fff; text-align: center; font-size: 25px; }.login-card h1 span { font-size: 22px; }.login-card > p { margin: 0 0 27px; color: #c9d8f4; text-align: center; font-size: 15px; }.login-card label { margin: 18px 0 8px; color: #fff; font-size: 14px; }.input-wrap { position: relative; }.input-wrap > i { position: absolute; z-index: 1; top: 50%; left: 15px; color: #c2d1ed; transform: translateY(-50%); }.login-card input { padding: 15px 14px 15px 45px; border-color: rgba(200, 221, 255, .52); border-radius: 10px; color: #fff; background: rgba(4, 16, 48, .4); }.login-card input::placeholder { color: #aebfdf; }.login-card input:focus { border-color: #11d6ee; outline-color: rgba(17, 214, 238, .2); }.login-security { display: flex; align-items: center; gap: 7px; margin-top: 17px; color: #aac4eb; font-size: 11px; }.login-security i { color: #22d8f2; }.login-card button { margin-top: 23px; padding: 15px; border-radius: 10px; background: linear-gradient(100deg, #1259ef, #08bee9); box-shadow: 0 9px 20px rgba(7, 137, 243, .33); font-size: 16px; }.login-card button:hover { background: linear-gradient(100deg, #0e4bd1, #08a9cf); }.login-card button i { margin-right: 7px; }.login-card .login-error { color: #70222e; background: #ffe4e8; }.login-footer { margin-top: 28px; color: #a9bddf; text-align: center; font-size: 11px; }
@media (max-width: 900px) { .login-page { grid-template-columns: 1fr; padding: 48px 30px; gap: 42px; }.login-intro { justify-self: center; }.login-card { max-width: 500px; justify-self: center; }.login-company { margin-top: 38px; } }
@media (max-width: 560px) { .login-page { padding: 32px 20px; }.login-intro { display: none; }.login-card { padding: 30px 23px; border-radius: 20px; }.login-brand { font-size: 50px; } }