@font-face { font-family:Lato; src:url('../fonts/Lato-Regular.ttf'); font-weight:400; font-display:swap; }
@font-face { font-family:Lato; src:url('../fonts/Lato-Bold.ttf'); font-weight:700; font-display:swap; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:#f4f6f8; color:#333e4b; font-family:Lato,Arial,sans-serif; }
button,input { font:inherit; }
.auth-page { min-height:100vh; min-height:100svh; padding:44px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.brand { display:flex; align-items:center; gap:10px; margin-bottom:24px; color:#303b49; text-decoration:none; font-weight:700; font-size:29px; }
.brand img { border-radius:50%; }
.auth-card { width:100%; max-width:420px; padding:30px; background:#fff; border:1px solid #e7ebee; border-radius:12px; box-shadow:0 12px 40px #253c5010; }
h1 { font-size:26px; margin:0 0 20px; text-align:center; }
.prototype { background:#edf7fc; color:#4d7187; padding:12px; border-radius:7px; font-size:12px; line-height:1.65; margin:0 0 22px; }
.field { margin:0 0 18px; }
label { display:block; font-size:14px; font-weight:700; margin:0 0 8px; }
input { width:100%; height:46px; border:1px solid #dbe1e6; border-radius:6px; padding:0 13px; outline:none; background:#fff; }
input:focus { border-color:#008dd3; box-shadow:0 0 0 3px #008dd315; }
input[aria-invalid=true] { border-color:#c74b4b; }
.primary { background:#078ccd; border:0; border-radius:6px; width:100%; height:46px; color:#fff; font-weight:700; cursor:pointer; margin-top:5px; }
.primary:hover { background:#007bb8; }
.feedback { color:#b93737; background:#fff4f4; font-size:14px; line-height:1.5; padding:10px; border-radius:6px; }
.feedback.success { color:#257243; background:#edf8f0; }
.switch { text-align:center; font-size:14px; margin:24px 0 20px; }
a { color:#087cbb; }
.back { display:block; text-align:center; font-size:13px; text-decoration:none; }
button:focus-visible,a:focus-visible { outline:2px solid #078ccd; outline-offset:4px; }
@media(max-width:380px) { .auth-card { padding:24px 20px; } }