:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #06142d; color: #f5f9ff; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 2rem 1rem; background: radial-gradient(circle at 50% 25%, rgba(15, 100, 220, .28), transparent 42%), linear-gradient(145deg, #07152f, #020813); }
.auth-card { width: min(100%, 29rem); padding: clamp(1.5rem, 4vw, 2.5rem); background: rgba(6, 22, 50, .9); border: 1px solid rgba(116, 184, 255, .26); border-radius: 1.25rem; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .35); }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: #fff; font-weight: 800; text-decoration: none; letter-spacing: .02em; }
.brand img { width: 2rem; height: 2rem; object-fit: contain; }
h1 { margin: 2rem 0 .5rem; font-size: clamp(1.7rem, 5vw, 2.3rem); }
p { color: #bed0eb; line-height: 1.6; }
form { display: grid; gap: 1rem; margin-top: 1.5rem; }
label { display: grid; gap: .45rem; font-size: .94rem; font-weight: 650; }
input { width: 100%; min-height: 2.85rem; padding: .7rem .85rem; color: inherit; background: #091e40; border: 1px solid #406da9; border-radius: .55rem; font: inherit; }
input:focus { outline: 3px solid rgba(45, 156, 255, .38); border-color: #39a8ff; }
button, .button { display: inline-flex; justify-content: center; align-items: center; min-height: 2.9rem; border: 0; border-radius: .55rem; padding: .7rem 1rem; background: linear-gradient(135deg, #1aa7ff, #1461e8); color: #fff; font: inherit; font-weight: 750; cursor: pointer; text-decoration: none; }
button:disabled { opacity: .65; cursor: wait; }
.helper, .links { margin: 1.2rem 0 0; font-size: .94rem; }
.links { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
a { color: #7ec8ff; }
.notice { min-height: 1.4rem; margin: 0; font-size: .92rem; color: #ffd38d; }
.notice[data-kind="success"] { color: #9af0be; }
.notice[data-kind="error"] { color: #ffafaf; }