#log,*#log *{box-sizing:border-box}

#log{
  --tx:#0f172a;
  --mut:#5b6b84;
  --a:#36a3ff;
  --b:#9ad7ff;
  --f:40px;

  position:fixed;
  inset:0;
  display:grid;
  grid-template-rows:1fr;
  overflow:hidden;
  color:var(--tx);
  padding-bottom:var(--f);
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size:14px;
}

#log::before{
  content:"";
  position:fixed;
  inset:-10vmax;
  z-index:-1;
  pointer-events:none;
  background-attachment:fixed;
  background:
    radial-gradient(60vmax 60vmax at 10% -6%, rgba(154,215,255,.85) 0 38%, rgba(154,215,255,0) 62%),
    radial-gradient(56vmax 56vmax at 110% 116%, rgba(54,163,255,.65) 0 40%, rgba(54,163,255,0) 60%),
    linear-gradient(180deg,#eaf6ff 0%, #dff1ff 100%);
}

/* Карточка */
#log #form_login{
  place-self:center;
  width:min(420px,94vw);
  max-height:calc(100dvh - var(--f) - 20px);
  overflow:auto;
  scrollbar-gutter:stable;

  padding:20px;
  border-radius:16px;
  position:relative;

  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 14px 40px rgba(63,139,201,.25);
}

#log #form_login::before{
  content:"";
  position:absolute;
  left:-1px;
  right:-1px;
  top:-1px;
  height:3px;
  border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,var(--a),var(--b));
}

/* Заголовок по центру */
#log #form_login h1{
  margin:0 0 25px;
  text-align:center;
  font-size:20px;
  font-weight:700;
}

/* Таблица полей */
#log .login_table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 12px;
  table-layout:fixed;
}

#log .login_table td{
  position:relative;
  vertical-align:middle;
  min-width:0;
}

/* Инпуты (иконка слева внутри) */
#log input[type=text],
#log input[type=password]{
  width:100%;
  padding:12px 44px;
  padding-left:44px;
  border-radius:5px;
  border:1px solid rgba(0,0,0,.1);
  background:rgba(255,255,255,.9);
  color:var(--tx);
  outline:0;
}

#log input::placeholder{color:var(--mut)}
#log input:focus{border-color:var(--a);box-shadow:0 0 0 4px rgba(54,163,255,.25)}
#log input.error{border-color:#e11d48}

/* Иконки слева (внутри input) через псевдоэлемент td */
#log .login_table tr:first-child td::before,
#log .login_table tr:nth-child(2) td::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  opacity:.95;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
}

#log .login_table tr:first-child td::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M22 7 12 13 2 7'/%3E%3C/svg%3E");
}

#log .login_table tr:nth-child(2) td::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* Глаз внутри поля пароля справа */
#log .pass-td{position:relative}
#log .pass-input{padding-right:44px}

#log .toggle-pass{
  width:30px;
  height:30px;
  border-radius:5px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.75);
  display:grid;
  place-items:center;
  cursor:pointer;
}

/* Строка: чекбокс слева, восстановить справа */
#log .login-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:4px 0 12px;
  font-size:12px;
}

#log .remember{
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
  cursor:pointer;
}

#log .remember input{
  width:14px;
  height:14px;
}

#log .remember input:focus,
#log .remember input:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

#log .login-btns{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:30px;
}

#log .login-btns input[type=submit]{
  appearance:none;
  min-width:220px;
  padding:10px 18px;
  border-radius:5px;
  border:1px solid rgba(0,0,0,.08);
  cursor:pointer;
  font-weight:700;
  color:#0b1b2e;
  background:linear-gradient(135deg,#e8f6ff,#bfe7ff);
  box-shadow:0 8px 20px rgba(63,139,201,.22);
}

#log .login-btns input[type=submit]:hover{
  background:linear-gradient(135deg,#e8f6ff,#7ACEFF);
}

#log .login-btns .btn-reg{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  margin-left: 10px;
  border-radius:5px;
  border:1px solid rgba(0,0,0,.10);
  font-size: 13px;
  font-weight:600;
  color:#0f172a;
  text-decoration:none;
  background:linear-gradient(135deg,#f3f4f6,#d1d5db);
  box-shadow:0 8px 20px rgba(15,23,42,.10);
}

#log .login-btns .btn-reg:hover{
  background:linear-gradient(135deg,#f9fafb,#cbd5e1);
  text-decoration:none;
}

/* Ссылки */
#log a{color:#08c;text-underline-offset:3px}
#log a:hover{text-decoration:none}

/* Текст соглашения по центру */
#log .login-terms{
  margin:30px 0 0;
  text-align:center;
  font-size:12px;
  color:var(--mut);
}

/* Футер */
#log .app-footer{
  font-size:12px;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:var(--f);
  padding:0 clamp(16px,4vw,24px);
  display:flex;
  align-items:center;
  background:linear-gradient(to top,rgba(255,255,255,.85),rgba(255,255,255,.6));
  border-top:1px solid rgba(0,0,0,.08);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
  backdrop-filter:blur(8px) saturate(140%);
}

#log .footer__container{
  max-width:1100px;
  margin:0 auto;
  width:100%;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

#log .footer__logo{font-weight:700}

/* ===== Password recovery ===== */

#log .sub_links{margin:0 0 10px}
#log .sub_links a{color:#08c;text-decoration:none;font-size:12px}
#log .sub_links a:hover{text-decoration:underline}

#log .page-title{
  margin:0 0 14px;
  text-align:center;
  font-size:18px;
  font-weight:700;
}

/* таблицу делаем как контейнер поля */
#log .form_table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}
#log .form_table td{padding:0;position:relative}

/* поле с иконкой слева */
#log .pw_table .field::before{
  content:"";
  position:absolute;
  left:14px;
  top:32%;
  transform:translateY(-50%);
  width:18px;height:18px;
  opacity:.95;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M22 7 12 13 2 7'/%3E%3C/svg%3E");
}

/* инпут */
#log #form_password input[type=text]{
  width:100%;
  padding:12px 14px;
  padding-left:44px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.1);
  background:rgba(255,255,255,.9);
  color:var(--tx);
  outline:0;
}
#log #form_password input[type=text]::placeholder{color:var(--mut)}
#log #form_password input[type=text]:focus{border-color:var(--a);box-shadow:0 0 0 4px rgba(54,163,255,.25)}
#log #form_password input[type=text].error{border-color:#e11d48}

/* ошибка */
#log #form_password .error_text{
  margin:.35rem 0 0;
  min-height:1rem;
  font:12px/1.1 system-ui;
  color:#e11d48;
}

/* подпись про обязательные поля */
#log .req-note{
  margin:10px 0 0;
  text-align:center;
  font-size:12px;
  color:var(--mut);
}

/* кнопка по центру */
#log .pw-actions{
  display:flex;
  justify-content:center;
  margin-top:12px;
}
#log #form_password input[type=submit]{
  appearance:none;
  min-width:260px;
  padding:10px 18px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.08);
  cursor:pointer;
  font-weight:700;
  color:#0b1b2e;
  background:linear-gradient(135deg,#e8f6ff,#bfe7ff);
  box-shadow:0 8px 20px rgba(63,139,201,.22);
}
#log #form_password input[type=submit]:hover{
  background:linear-gradient(135deg,#e8f6ff,#7ACEFF);
}

#log .page-title{
  margin:0 0 14px;
  text-align:center;
  font-size:18px;
  font-weight:700;
}

#log .pw-info,
#log .pw-redirect{
  margin:10px 0 0;
  text-align:center;
  color:var(--mut);
  font-size:12px;
  line-height:1.45;
}

#log .pw-redirect strong{color:var(--tx)}