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

   Окно перекрывает содержимое намеренно: вход требует сосредоточенности
   и завершается одним из двух исходов, после чего человек возвращается
   ровно туда, где нажал - с сохранёнными фильтрами и позицией в таблице. */

/* ---------- подложка ---------- */
.au-back {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 12, 14, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  animation: au-fade .18s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes au-fade { to { opacity: 1 } }

/* Единственный авторский момент движения: окно приезжает снизу и садится
   на место с затухающим ускорением, как выдвижной ящик. Больше нигде
   в этом файле анимаций нет - россыпь мелких эффектов дешевит интерфейс. */
@keyframes au-rise {
  from { opacity: 0; transform: translateY(14px) scale(.985) }
  to   { opacity: 1; transform: none }
}

/* ---------- окно ---------- */
.au-modal {
  position: relative;
  width: 100%;
  max-width: 424px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--white);
  border-radius: 16px;
  /* одна система высоты: тень со смещением и мягким размытием, без рамки */
  box-shadow: 0 18px 48px rgba(12, 12, 14, .22), 0 2px 8px rgba(12, 12, 14, .10);
  padding: 30px 30px 26px;
  animation: au-rise .28s cubic-bezier(.16, 1, .3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .au-back, .au-modal { animation-duration: .01ms }
}

.au-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--g500);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.au-close:hover { background: var(--g100); color: var(--ink) }
.au-close:focus-visible { outline: 2px solid var(--lime600); outline-offset: 2px }

/* ---------- заголовок ---------- */
.au-head { margin-bottom: 22px }
.au-title {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.15;
}
/* та же лаймовая черта, что под заголовками разделов портала */
.au-rule { width: 44px; height: 4px; background: var(--lime); border-radius: 2px; margin: 10px 0 9px }
.au-sub { font-size: 14px; line-height: 1.5; color: var(--g500) }

/* ---------- переключатель вход/регистрация ---------- */
.au-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--g100);
  border-radius: 100px;
  margin-bottom: 20px;
}
.au-tab {
  flex: 1;
  padding: 9px 14px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--g500);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.au-tab[aria-selected="true"] { background: var(--lime); color: #0c0c0e }
.au-tab:focus-visible { outline: 2px solid var(--lime600); outline-offset: 2px }

/* ---------- поля ---------- */
.au-field { margin-bottom: 15px }
.au-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--g700);
  margin-bottom: 7px;
}
.au-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--g200);
  border-radius: 11px;
  background: var(--white);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.au-input::placeholder { color: var(--g400) }
.au-input:hover { border-color: var(--g300) }
.au-input:focus {
  outline: none;
  border-color: var(--lime600);
  box-shadow: 0 0 0 3px var(--lime-soft);
}
.au-input[aria-invalid="true"] { border-color: var(--down) }
.au-input:disabled { background: var(--g50); color: var(--g400); cursor: not-allowed }

/* показать пароль */
.au-pass { position: relative }
.au-pass .au-input { padding-right: 44px }
.au-eye {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--g400);
  cursor: pointer;
}
.au-eye:hover { color: var(--g700) }
.au-eye:focus-visible { outline: 2px solid var(--lime600); outline-offset: 1px }

.au-hint { font-size: 12px; color: var(--g400); margin-top: 6px; line-height: 1.4 }

/* ---------- согласие ---------- */
.au-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 0 18px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--g700);
}
.au-consent input {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--lime600);
  cursor: pointer;
}
.au-consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px }
.au-consent a:hover { color: var(--lime-line) }

/* ---------- кнопки ---------- */
.au-submit {
  width: 100%;
  padding: 13px 18px;
  border: 0;
  border-radius: 100px;
  background: var(--lime);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #0c0c0e;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.au-submit:hover:not(:disabled) { background: var(--lime600) }
.au-submit:active:not(:disabled) { transform: translateY(1px) }
.au-submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
.au-submit:disabled { background: var(--g200); color: var(--g400); cursor: not-allowed }

.au-submit.is-busy { color: transparent; position: relative }
.au-submit.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(12, 12, 14, .25);
  border-top-color: #0c0c0e;
  border-radius: 50%;
  animation: au-spin .6s linear infinite;
}
@keyframes au-spin { to { transform: rotate(360deg) } }

/* ---------- разделитель и Telegram ---------- */
.au-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  font-size: 12px;
  color: var(--g400);
}
.au-or::before, .au-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--g200);
}

.au-tg {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 18px;
  border: 1px solid var(--g200);
  border-radius: 100px;
  background: var(--white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.au-tg:hover { border-color: var(--lime600); background: var(--g50) }
.au-tg:focus-visible { outline: 2px solid var(--lime600); outline-offset: 2px }
.au-tg svg { flex-shrink: 0; color: #2AABEE }
/* Кнопка входа через бота, а под ней - запасная ссылка на случай, если вкладка
   с Telegram не открылась или её закрыли, пока код ещё живой. */
.au-tg-widget { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 40px }
.au-tg-widget .au-tg { width: 100% }
.au-tg-again { font-size: 13px }

/* ---------- сообщения ---------- */
.au-msg {
  display: none;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 13.5px;
  line-height: 1.45;
  margin-bottom: 16px;
}
.au-msg.show { display: block }
.au-msg.err { background: var(--warn-bg); color: var(--warn-txt); border: 1px solid var(--warn-bd) }
.au-msg.ok  { background: var(--pri-bg); color: var(--pri-num); border: 1px solid var(--pri-bd) }

/* ---------- низ окна ---------- */
.au-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--g200);
  font-size: 13px;
  color: var(--g500);
  text-align: center;
}
.au-link {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.au-link:hover { color: var(--lime-line) }
.au-link:focus-visible { outline: 2px solid var(--lime600); outline-offset: 2px; border-radius: 3px }

/* ---------- шапка: вошедший пользователь ---------- */
.au-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 12px;
  border: 1px solid var(--g200);
  border-radius: 100px;
  background: var(--white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  max-width: 210px;
}
.au-user:hover { border-color: var(--g300) }
.au-user:focus-visible { outline: 2px solid var(--lime600); outline-offset: 2px }
.au-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.au-ava {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--lime);
  color: #0c0c0e;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

/* ---------- полоса «подтвердите почту» ---------- */
/* Мягкое напоминание: сервисом можно пользоваться и до подтверждения,
   без него не работают только письма с уведомлениями. */
.au-verify-bar {
  display: none;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 1600px;
  margin: 0 auto;
  padding: 11px 28px;
  background: var(--info-bg);
  border-bottom: 1px solid var(--info-bd);
  font-size: 13.5px;
  color: var(--info-txt);
}
.au-verify-bar.show { display: flex }
.au-verify-bar .au-link { color: var(--info-ink) }

@media (max-width: 560px) {
  .au-modal { padding: 26px 20px 22px; border-radius: 14px }
  .au-title { font-size: 22px }
  .au-verify-bar { padding: 10px 16px }
}