[hidden]{display:none!important}
.auth{max-width:460px;margin:0 auto;padding:12vh 24px 80px}
.auth h1{font-family:var(--font-head);font-size:56px;line-height:1;margin:48px 0 16px;text-transform:uppercase}
.auth h2{font-family:var(--font-head);font-size:24px;margin:36px 0 12px;text-transform:uppercase}
.auth-note{color:var(--muted);line-height:1.6;margin:0 0 28px}
.auth form{display:grid;gap:10px;margin-bottom:20px}
.auth label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.auth input{background:var(--panel);border:1px solid var(--line);color:var(--white);padding:15px 16px;font:inherit;font-size:16px}
.auth input:focus{outline:2px solid var(--red-bright);outline-offset:1px}
.auth button{background:var(--red);border:0;color:var(--white);padding:16px 20px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;transition:background .25s}
.auth button:hover{background:var(--red-bright)}
#message{min-height:1.5em;line-height:1.5}
#message.error{color:var(--red-bright)}
#courses{list-style:none;padding:0;margin:0 0 32px}
#courses li{border:1px solid var(--line);padding:16px;margin-bottom:8px}
#courses .button{margin-top:12px;min-width:0;gap:24px}

/* Long titles («Вход и регистрация») must fit narrow phones. */
@media(max-width:480px){.auth h1{font-size:clamp(34px,12vw,56px);overflow-wrap:anywhere}}