:root { --ink: #172125; --muted: #69777d; --line: #dfeaec; --blue: #3fc1df; --blue-dark: #117f98; --red: #a92f2f; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 80% 10%, rgba(63,193,223,.32), transparent 34%), linear-gradient(145deg, #edf7f9, #f8fbfb 55%, #e5f4f7); color: var(--ink); font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 420px); padding: 34px; border: 1px solid rgba(223,234,236,.95); border-radius: 22px; background: rgba(255,255,255,.97); box-shadow: 0 24px 70px rgba(23,33,37,.14); }
.login-logo { display: block; width: 150px; height: 70px; margin-bottom: 22px; object-fit: contain; object-position: left center; }
.eyebrow { margin: 0 0 5px; color: var(--blue-dark); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
h1 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.intro { margin: 8px 0 24px; color: var(--muted); }
.login-error { margin: -8px 0 18px; padding: 10px 12px; border-radius: 10px; background: #ffeded; color: var(--red); font-size: 12px; font-weight: 750; }
form { display: grid; gap: 16px; }
label > span { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; }
input[type="text"], input[type="password"] { width: 100%; height: 46px; padding: 0 13px; border: 1px solid #cadadd; border-radius: 11px; background: #fff; color: var(--ink); font: inherit; outline: none; }
input[type="text"]:focus, input[type="password"]:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(63,193,223,.16); }
.remember { display: flex; align-items: center; gap: 9px; width: fit-content; color: #46595f; cursor: pointer; }
.remember input { width: 17px; height: 17px; margin: 0; accent-color: var(--blue-dark); }
.remember span { margin: 0; font-weight: 700; }
button { height: 47px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-weight: 850; cursor: pointer; }
button:hover { background: #27363b; }
.login-card > small { display: block; margin-top: 22px; color: var(--muted); text-align: center; }
@media (max-width: 480px) { .login-shell { padding: 14px; } .login-card { padding: 26px 22px; } }