/*
 * Вход, регистрация, восстановление пароля и приглашения — одна страница,
 * форма подставляется по адресу. Слева форма, справа короткий рассказ о
 * сервисе: человек, попавший сюда по ссылке из письма, часто видит продукт
 * впервые.
 */

.auth-body { min-height: 100vh }

.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 0.85fr;
}

.auth-main {
  padding: 42px 44px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.auth-main .brand { align-self: center }

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 30px 28px;
}

.auth-loading { color: var(--muted); text-align: center; padding: 30px 0 }
.auth-card h1 { font: 600 24px Unbounded, sans-serif; letter-spacing: -1px; margin: 0 0 8px }
.auth-card > p { color: var(--muted); font-size: 14px; margin: 0 0 24px }
.auth-card .button { width: 100%; margin-top: 6px }

.auth-switch {
  margin: 20px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.auth-switch a { font-weight: 700; text-decoration: none }
.auth-switch a:hover { text-decoration: underline }

.auth-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px }
.auth-row a { font-size: 12px; font-weight: 700; text-decoration: none }
.auth-legal { max-width: 420px; text-align: center; color: var(--faint); font-size: 12px; margin: 0 }
.auth-legal a { color: var(--muted) }

.invite-box {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 22px;
  font-size: 13px;
  color: var(--info-ink);
}

.invite-box b { display: block; color: var(--accent-text); margin-bottom: 3px }

/* ---------------------------------------------------------------- правая колонка */

.auth-aside {
  background: var(--bg-deep);
  border-left: 1px solid var(--line);
  padding: 42px 44px;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
}

.auth-aside .theme-toggle { position: absolute; top: 34px; right: 44px }
.auth-aside-inner { max-width: 420px }
.auth-aside h2 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 30px }

.auth-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 18px }
.auth-list li { display: grid; gap: 4px; padding-left: 22px; position: relative }
.auth-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--good);
  font-weight: 800;
}
.auth-list b { font-size: 14px }
.auth-list span { color: var(--muted); font-size: 13px }
.auth-aside-note { color: var(--faint); font-size: 13px; margin: 0 }

/* ---------------------------------------------------------------- уведомление */

.toast {
  position: fixed;
  bottom: 28px; right: 30px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 12px;
  padding: 13px 16px;
  box-shadow: var(--shadow-lg);
  z-index: 10;
  font-size: 13px;
  font-weight: 700;
  max-width: 420px;
  line-height: 1.5;
}

.toast-error { background: var(--bad); color: #fff }

@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr }
  .auth-aside { display: none }
  .auth-main { padding: 34px 20px 50px }
}