:root { font-family: "Segoe UI", Inter, system-ui, sans-serif; color: #173d42; background: #f3f7f6; font-synthesis: none; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(100%, 460px); padding: 34px; border: 1px solid #dce8e4; border-radius: 18px; background: #fff; box-shadow: 0 14px 36px #123b3714; }
.logo { width: 78px; height: 78px; object-fit: contain; }
.eyebrow { margin: 20px 0 6px; color: #3a857d; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: 30px; letter-spacing: -.04em; }
.intro, .help { color: #607a7c; line-height: 1.55; }
.intro { margin: 14px 0 28px; }
form { display: grid; gap: 9px; }
label { margin-top: 9px; font-size: 13px; font-weight: 700; }
input { width: 100%; padding: 12px 13px; border: 1px solid #bfcfca; border-radius: 9px; font: inherit; }
input:focus-visible, button:focus-visible { outline: 3px solid #98d9cd; outline-offset: 2px; }
button { margin-top: 18px; padding: 13px 16px; border: 0; border-radius: 9px; background: #145752; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
button:hover { background: #0f4642; }
button:disabled { opacity: .6; cursor: wait; }
[hidden] { display: none !important; }
.message { min-height: 20px; margin: 18px 0 0; font-size: 14px; font-weight: 650; line-height: 1.45; }
.message.error { color: #a13c36; }
.message.success { color: #246b4f; }
.help { margin: 22px 0 0; font-size: 12px; }
@media (max-width: 480px) { .auth-card { padding: 25px; } }