:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; color: #eef8ff; background: radial-gradient(circle at 20% 10%, #1c5c8f 0, transparent 34rem), radial-gradient(circle at 90% 90%, #4d2f91 0, transparent 31rem), #07131e; }
.login-card { width: min(27rem, calc(100% - 2rem)); padding: 2.25rem; border: 1px solid rgb(167 218 255 / 28%); border-radius: 1.5rem; background: rgb(8 21 34 / 86%); box-shadow: 0 2rem 5rem rgb(0 0 0 / 36%); backdrop-filter: blur(16px); }
.login-eyebrow { margin: 0 0 .75rem; color: #87d8ff; font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 0; font-size: 2rem; }
p { color: #b7c9d9; line-height: 1.5; }
form { display: grid; gap: 1rem; margin-top: 1.7rem; }
label { display: grid; gap: .45rem; color: #d9edfd; font-size: .9rem; font-weight: 700; }
input { width: 100%; padding: .85rem .95rem; border: 1px solid #34566f; border-radius: .8rem; color: #f5fbff; background: #102537; font: inherit; }
input:focus { outline: 3px solid rgb(74 193 255 / 35%); border-color: #57c8ff; }
button { margin-top: .4rem; padding: .9rem 1rem; border: 0; border-radius: .8rem; color: #061522; background: linear-gradient(100deg, #47d9ec, #7a83ff); font: inherit; font-weight: 800; cursor: pointer; }
button:disabled { cursor: progress; opacity: .65; }
#login-error { margin: 0; padding: .7rem .8rem; border-radius: .6rem; color: #ffcdca; background: rgb(150 32 48 / 35%); }