* { box-sizing: border-box; }
body {
    margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px 0;
    background: #f4f8ff; font: 15px Arial, Helvetica, sans-serif; color: #102b50;
}
.auth {
    width: min(620px, 94%); padding: 38px; border: 1px solid #d9e5f3; border-radius: 20px;
    background: #fff; box-shadow: 0 20px 60px #1e4f8c1c;
}
.auth-sm { width: min(440px, 94%); }
.logo { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.logo span { background: #286cf0; color: #fff; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; }
.tag { font-size: 11px; letter-spacing: .1em; color: #286cf0; font-weight: 800; margin-top: 35px; }
.auth h1 { font-size: 30px; margin: 8px 0; }
.auth > p:not(.tag) { color: #637898; }
.error, .success { padding: 12px; border-radius: 8px; margin: 15px 0; }
.error { background: #ffe7e9; color: #a42635; }
.success { background: #e3f7ea; color: #1d6b3a; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 24px; }
label { display: grid; gap: 7px; font-size: 12px; font-weight: 700; }
label.check { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 13px; line-height: 1.4; }
label.check small { color: #7a8ba3; }
label.danger { color: #a42635; }
input { height: 45px; border: 1px solid #bfd0e7; border-radius: 8px; padding: 10px; font-size: 14px; }
input[type=checkbox] { height: auto; margin-top: 2px; }
input:focus { outline: 2px solid #2768e833; border-color: #2768e8; }
.wide, hr, button { grid-column: span 2; }
.section { margin: 4px 0 -4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #637898; text-transform: uppercase; }
hr { border: 0; border-top: 1px solid #e5edf6; width: 100%; }
button { border: 0; background: #2768e8; color: #fff; border-radius: 8px; padding: 14px; font-weight: 800; font-size: 15px; cursor: pointer; }
button:hover { background: #1d58cc; }
.link { color: #2768e8; font-weight: 700; text-decoration: none; }
.help { text-align: center; font-size: 13px; margin-top: 22px; }
code { background: #eef3fa; padding: 2px 6px; border-radius: 5px; }
@media (max-width: 600px) {
    .auth { padding: 26px; }
    form { grid-template-columns: 1fr; }
    .wide, hr, button { grid-column: auto; }
}