/* Оформление СТРАНИЦЫ ВХОДА — единственный стиль, который сайт отдаёт
   постороннему (674patch).

   ⚠️⚠️ ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ. Раньше странице входа отдавали общий app.css —
   а это 79 КБ: все названия разделов, устройство интерфейса и подробные
   комментарии о том, что и почему в сервисе сделано. Посторонний скачивал его
   одной ссылкой, не входя. Теперь app.css закрыт входом (nginx: auth_request),
   а невошедшему достаётся только этот файл — форма входа и ничего больше.

   ⚠️ Правила здесь — КОПИЯ соответствующих правил app.css, а не ссылка на них.
   Меняете вид формы входа — правьте ОБА файла: у вошедшего страницу рисует
   app.css (в кабинете те же .auth-form/.cabinet-form), у невошедшего — этот. */
:root{
    --white:#fff;
    --black:#151515;
    --gray-1:#fbfbfb;
    --gray-2:#f6f6f6;
    --gray-5:#9a9a9a;
    --gray-6:#5a5a5a;
    --gray-7:#333333;
    --video-card-shadow:0 0 9px rgba(0,0,0,.055),0 1px 5px rgba(0,0,0,.085);
    --speed:.24s;
}
*{box-sizing:border-box;max-width:100%}
[hidden]{display:none!important}
html{width:100%;height:100%;background:var(--white);-webkit-text-size-adjust:100%}
body{
    width:100%;
    margin:0;
    background:var(--white);
    color:var(--gray-7);
    font-family:Inter,Arial,sans-serif;
    font-size:15px;
    line-height:1.42;
}
input,textarea,select,button{font:inherit}
button{
    border:0;
    background:var(--gray-2);
    color:var(--gray-7);
    cursor:pointer;
    border-radius:14px;
    min-height:38px;
    padding:8px 12px;
    transition:background var(--speed),color var(--speed),box-shadow var(--speed);
}
button:focus,button:focus-visible{outline:0;box-shadow:none}
.auth-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:22px;
    background:var(--gray-1);
}
.auth-card{
    display:grid;
    gap:16px;
    width:min(410px,100%);
    background:var(--white);
    border-radius:22px;
    box-shadow:var(--video-card-shadow);
    padding:24px;
}
.auth-card h1{
    margin:0;
    color:var(--black);
    font-size:24px;
    line-height:30px;
}
.auth-form{
    display:grid;
    gap:10px;
}
.auth-form label{
    display:grid;
    gap:5px;
    color:var(--gray-6);
    font-size:12px;
    line-height:16px;
}
.auth-form input{
    width:100%;
    min-height:38px;
    border:0;
    border-radius:12px;
    background:var(--gray-2);
    color:var(--gray-7);
    padding:8px 10px;
    outline:0;
}
.auth-form input:focus{
    background:var(--white);
    box-shadow:var(--video-card-shadow);
}
/* Глазок «показать пароль» (password-eye.js) */
.pass-eye-wrap{position:relative;display:block;width:100%}
.pass-eye-wrap input{padding-right:40px}
button.pass-eye{
    position:absolute;
    top:50%;
    right:5px;
    width:28px;
    height:28px;
    min-height:28px;
    margin-top:-14px;
    display:grid;
    place-items:center;
    padding:0;
    border-radius:50%;
    background:transparent;
    color:var(--gray-5);
}
button.pass-eye:hover,button.pass-eye:focus-visible{background:transparent;color:var(--gray-6)}
button.pass-eye.is-on{color:var(--gray-6)}
button.pass-eye svg{display:block;height:18px}
/* Подсказка о надёжности пароля (password-strength.js) */
.password-hint{
    display:block;
    margin-top:4px;
    font-size:12px;
    line-height:16px;
    color:var(--gray-5);
}
.password-hint.is-weak{color:#a32020}
.password-hint.is-ok{color:#268044}
.auth-message{
    width:100%;
    border-radius:14px;
    padding:10px 12px;
    background:var(--gray-2);
    color:var(--gray-7);
    font-size:13px;
    line-height:18px;
}
.auth-message.is-error{color:#a32020}
.auth-message.is-ok{color:#268044}
@media(max-width:760px){
    .auth-card{padding:18px;border-radius:18px}
    .auth-card h1{font-size:22px;line-height:28px}
}