/* Страница входа. Единственная, которую видно без сессии, — поэтому стили отдельные:
   style.css рассчитан на шапку с навигацией, а здесь её нет и быть не должно.

   ИДЕЯ. Карточка — лист на кольцах: ровно тот товар, ради которого весь дашборд.
   Кольца настоящие по пропорциям (разъёмное кольцо шире, чем выше) и с одинаковым шагом,
   как в стандарте Спироплёт, — иначе получилась бы «пружинка вообще». */

.login-body {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 20px;
  /* Мягкий фон: сплошная заливка на пустой странице выглядит как незагруженная. */
  background:
    radial-gradient(1100px 460px at 50% -8%, var(--accent-bg) 0%, transparent 62%),
    var(--bg);
}

.login-wrap { width: 100%; max-width: 380px; }

.login-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  /* слева место под переплёт — текст не должен налезать на кольца */
  padding: 30px 30px 28px 50px;
  display: flex; flex-direction: column; gap: 15px;
  box-shadow: 0 10px 34px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .05);
}
@media (prefers-color-scheme: dark) {
  .login-card { box-shadow: 0 12px 38px rgba(0, 0, 0, .45); }
}

/* ---------- переплёт ---------- */
.binding {
  position: absolute; left: -11px; top: 0; height: 100%; width: 44px;
  pointer-events: none;
  /* Появляется целиком, коротко: на форме входа анимация не должна задерживать. */
  animation: binding-in .35s ease-out both;
}
.ring-body { fill: none; stroke: var(--muted); stroke-width: 2.6; opacity: .5; stroke-linecap: round; }
.ring-hole { fill: var(--bg); stroke: var(--border); stroke-width: 1.2; }

/* ТОЛЬКО прозрачность, без сдвига. Анимация с transform не доигрывает в фоновой вкладке —
   браузер не композитит скрытую страницу, — и переплёт залипает сдвинутым влево на 8 px.
   Прозрачность такой беды не создаёт: не доиграет — просто останется видимым. */
@keyframes binding-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .binding { animation: none; } }

/* ---------- шапка ---------- */
.login-head { margin-bottom: 2px; }
.login-head h1 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
.login-sub { margin: 5px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.login-sub.warn { color: #d64545; }

/* ---------- поля ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.login-card input {
  width: 100%; padding: 9px 2px; font-size: 15px;
  border: none; border-bottom: 1.5px solid var(--border); border-radius: 0;
  background: transparent; color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
/* Фокус подсвечивает саму строчку — рамки вокруг поля здесь не к месту:
   на листе пишут по линейке, а не в клетке. */
.login-card input:focus {
  outline: none; border-bottom-color: var(--accent);
  box-shadow: 0 1.5px 0 0 var(--accent);
}
.login-card input::placeholder { color: var(--muted); opacity: .6; }

/* Кнопка «показать пароль» лежит внутри поля, поэтому полю нужен запас справа. */
.field-pass { position: relative; display: block; }
.field-pass input { padding-right: 38px; }
.peek {
  position: absolute; right: 0; top: 46%; transform: translateY(-50%);
  width: 30px; height: 30px; padding: 5px; border: none; border-radius: 7px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.peek:hover { color: var(--accent); background: var(--accent-bg); }
.peek svg { width: 100%; height: 100%; display: block; }
.peek svg .eye { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.peek svg .pupil { fill: none; stroke: currentColor; stroke-width: 1.8; }
/* Перечёркнутый глаз = «сейчас скрыт». Когда пароль показан, черту убираем. */
.peek svg .slash { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.peek.on svg .slash { display: none; }

/* ---------- ошибка ---------- */
.login-err {
  font-size: 13px; color: #d64545; background: #fdecec; border: 1px solid #f2c4c4;
  border-radius: 9px; padding: 9px 11px; line-height: 1.4;
}
@media (prefers-color-scheme: dark) { .login-err { background: #3a1e1e; border-color: #5c2e2e; color: #ff9b9b; } }

/* Промах по паролю — короткое подрагивание. Текст ошибки читают не все, движение замечают все. */
.shake { animation: shake .3s ease-in-out; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }

/* ---------- кнопка ---------- */
.login-go {
  margin-top: 4px; width: 100%; padding: 11px 16px; font-size: 14px; font-weight: 600;
  border-radius: 9px;
}
.login-go:disabled { opacity: .65; cursor: default; }
.login-go.busy { cursor: progress; }

.login-foot {
  margin: 14px 4px 0; font-size: 12px; color: var(--muted); line-height: 1.5; text-align: center;
}

@media (max-width: 420px) {
  .login-card { padding: 26px 20px 24px 46px; border-radius: 12px; }
  .login-head h1 { font-size: 21px; }
}