/* Вёрстка авторизации — забрана 1:1 из старого topcnc.pro/Authorization/ui/login.php
   (только UI). Токены цвета вынесены в переменные для повторного использования. */
:root{
  --x:16px;
  /* 420 вместо 560: на два поля широкая карточка выглядит пустой (04.08). */
  --w:min(420px, 100vw - 2*var(--x));
  --bg:#f8fafc; --card:#fff; --ink:#111827;
  --line:#e5e7eb; --line-strong:#d1d5db;
  --muted:#6b7280; --link:#2563eb; --accent:#2f5da0;
  --err:#b91c1c; --ok:#166534;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
/* Атрибут hidden должен побеждать: у .actions задан display:flex, и он перебивал
   его — форма не скрывалась после отправки (04.08, тот же подвох, что с кнопкой фото). */
[hidden]{display:none !important}
body{
  margin:0;background:var(--bg);color:var(--ink);
  display:flex;min-height:100vh;align-items:center;justify-content:center;
}
.card{
  width:var(--w);background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:20px;
}
h1{font-size:20px;margin:0 0 12px 0}
label{display:block;font-size:14px;margin:10px 0 6px}
.input-wrap{position:relative}
input{
  width:100%;padding:10px;border:1px solid var(--line-strong);
  border-radius:8px;font-size:14px;
}
/* прячем нативный «глаз» браузера (Edge/IE ::-ms-reveal) — свой переключатель «показать» уже есть,
   иначе они накладываются друг на друга у правого края поля */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{display:none}
.eye{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:0;background:none;padding:2px 4px;border-radius:6px;
  cursor:pointer;user-select:none;font:inherit;font-size:13px;color:#4b5563;
}
.eye:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.eye:hover{color:var(--ink)}
/* место под подпись «показать», чтобы точки пароля не заезжали под неё */
.input-wrap input{padding-right:96px}
.actions{margin-top:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* Главное действие карточки — залитая кнопка: раньше она была бледнее соседних
   ссылок, и взгляд уходил на них, а не на вход (04.08). */
.btn{
  display:inline-flex;align-items:center;gap:.6ch;border:1px solid var(--accent);
  border-radius:10px;padding:9px 16px;background:var(--accent);cursor:pointer;
  font:inherit;font-weight:600;color:#fff;text-decoration:none;
}
.btn:hover{background:#274f8c;border-color:#274f8c}
.btn:disabled{opacity:.55;cursor:default}
.actions-sub{margin-top:9px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.state{margin-top:10px;font-size:13px;color:var(--muted)}
/* Ошибка обязана читаться как ошибка, а успех — как успех: серым одинаково
   выглядели оба, и отказ проходил мимо глаза. */
.state.err{color:var(--err)}
.state.ok{color:var(--ok)}
.link{color:var(--link);text-decoration:none}
.link:hover{text-decoration:underline}
/* Восстановление доступа — редкий путь, ему незачем спорить с регистрацией. */
.link.quiet{color:var(--muted);font-size:13px}

/* Открытая панель консультанта (§15) не должна накрывать форму — о ней и спрашивают.
   Страница ужимается на ширину панели; на узком экране панель занимает почти всё,
   там сдвигать нечего. */
body.assistant-open{
  padding-right: 440px;
  transition: padding-right .18s ease-in-out;
}
@media (max-width: 900px){
  body.assistant-open{ padding-right: 0; }
}

/* Угол карточки: переключатель языка и вызов консультанта. Помощь — не действие
   входа, поэтому она здесь, а не в ряду с «Войти» (решение владельца 04.08). */
.card-tools{ position:absolute; top:14px; right:16px; display:flex; gap:6px; align-items:flex-start; }
.help-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:31px; height:29px; border:1px solid var(--line); background:var(--card);
  color:var(--muted); border-radius:9px; cursor:pointer; padding:0;
}
.help-btn:hover{ border-color:var(--line-strong); color:var(--ink); }
/* Карточке нужен якорь позиционирования и место под значок в первой строке. */
.card{ position:relative; }
.card h1{ padding-right:96px; }

/* Ожидание письма подтверждения (AUTH_CONTRACT.md): подсказка про спам, повтор с
   таймером и — после третьей просьбы — блок «письмо не доходит». */
.waiting{margin-top:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.waiting .hint{color:var(--muted);font-size:13px;flex:1 1 220px}
.waiting .btn{padding:7px 13px;font-size:14px}
.stuck{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.stuck b{display:block;font-size:14px;margin-bottom:4px}
.stuck p{margin:0 0 8px;color:#374151;font-size:13.5px}
.stuck-actions{display:flex;gap:14px;flex-wrap:wrap;font-size:14px}