/* Вход и создание администратора: перенос блоков <style> из login.php
   и add-admin.php старой панели.

   Классы формы входа префиксованы login-*: в оригинале они назывались
   .card / .btn / .muted / .inp / .err, но корневой layout подключает
   admin.css на всех страницах, а там .card, .btn и .muted уже заняты —
   без префикса карточка и кнопка перекрашиваются.

   Блок add-admin обёрнут в .auth-page: имена .form-grid, .form-card,
   .box там дословные из legacy и повторяются в packs.css, tarifs-*.css
   и billing.css. Файл раздела остаётся в <head> после клиентского
   перехода, поэтому без обёртки правила утекали бы на чужие страницы. */

/* ===================== ВХОД ===================== */

.auth-shell{ min-height:100% }

/* Фон ровный. Раньше под карточкой лежало синее пятно из radial-gradient
   на пол-экрана — самое крупное свечение во всей панели. Карточку от фона
   отделяет светлота поверхности, как и везде. */
.login-wrap{
  min-height:100vh; display:grid; place-items:center; padding:32px 20px;
  font-family:Roboto-Regular;
}

.login-card{
  width:min(410px, 100%);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  /* Плотность общая с остальными карточками: 16px, а не 26/24. */
  padding:16px;
  animation:login-rise .4s var(--ease) both;
}
@keyframes login-rise{ from{ opacity:0; transform:translateY(14px) scale(.985) } to{ opacity:1; transform:none } }

.login-logo{ display:flex; align-items:center; justify-content:center; gap:11px; margin-bottom:18px }
.login-logo img{ width:32px; height:auto; display:block }
/* Градиент логотипа набран токенами палитры: раньше здесь были литералы
   #FFFFFF и #A8C7FF. --text-dim — ближайший к прежнему хвосту градиента
   цвет из палитры, поэтому вид не поехал. */
.login-logo-txt{
  font-family:Roboto-Medium; font-size:17px; letter-spacing:.24em;
  background:linear-gradient(92deg, var(--text) 0%, var(--text-dim) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.login-card h1{
  margin:0 0 5px; font-size:20px; line-height:1.25; text-align:center;
  color:var(--text); font-family:Roboto-Medium; font-weight:400;
}
.login-muted{ color:var(--muted); font-size:13.5px; text-align:center; margin-bottom:18px }

.login-row{ display:flex; flex-direction:column; gap:6px; margin:0 0 12px }
.login-card label{
  font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--muted);
}

/* Иконка внутри поля: обёртка нужна только ради её позиционирования. */
.login-field{ position:relative; display:block }
.login-field > i{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  font-size:14px; color:var(--muted); pointer-events:none;
  transition:color var(--fast);
}
.login-field:focus-within > i{ color:var(--accent) }

.login-inp{
  width:100%; height:46px; padding:0 14px 0 42px;
  background:var(--surface-3); border:1px solid var(--border);
  border-radius:12px; color:var(--text);
  outline:none; font-family:inherit; font-size:15px;
  transition:border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.login-inp::placeholder{ color:var(--muted) }
.login-inp:hover{ border-color:var(--border-strong) }
.login-inp:focus{
  border-color:var(--border-accent); background:var(--surface-hover);
  box-shadow:0 0 0 3px var(--accent-soft);
}

.login-btn{
  width:100%; height:46px; margin-top:6px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-press) 100%);
  color:#fff; border:1px solid transparent; border-radius:12px; cursor:pointer;
  font-family:Roboto-Medium; font-size:15px; letter-spacing:.2px;
  box-shadow:var(--shadow-accent);
  transition:filter var(--fast), transform var(--fast);
}
.login-btn:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.login-btn:active{ transform:translateY(0) scale(.985) }

.login-err{
  display:flex; align-items:flex-start; gap:9px;
  background:var(--bad-soft); border:1px solid transparent; color:var(--bad);
  padding:11px 13px; border-radius:var(--radius-sm); margin:0 0 14px;
  font-size:13.5px; line-height:1.45;
}
.login-err i{ margin-top:2px; flex:none }

@media (max-width:480px){
  .login-card{ padding:16px 14px }
}

/* ===================== ДОБАВЛЕНИЕ АДМИНИСТРАТОРА ===================== */

/* Форма узкая, поэтому колонку ограничиваем целиком — иначе шапка
   .page-head растянулась бы во всю ширину над центрированной карточкой.
   Заголовок, подзаголовок и иконку раздела теперь несёт PageHeader
   (ui.css), здесь остались только сама карточка и поля. */
.auth-page{ max-width:720px; margin-inline:auto }

.auth-page .page-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:15px;
}

.auth-page .form-grid{ display:grid; grid-template-columns:1fr; gap:14px }

.auth-page .form-label{
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
  color:var(--text-dim); font-size:13.5px;
}
/* Иконка подписи серая: акцентом были подсвечены все три подписи формы,
   и синий переставал что-либо выделять. */
.auth-page .form-label i{ color:var(--muted); font-size:13px }

.auth-page .form-input{
  width:100%; height:46px;
  border-radius:12px; border:1px solid var(--border);
  background:var(--surface-3); color:var(--text);
  padding:0 14px; outline:none;
  font-family:inherit; font-size:15px;
  transition:border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.auth-page .form-input::placeholder{ color:var(--muted) }
.auth-page .form-input:hover{ border-color:var(--border-strong) }
.auth-page .form-input:focus{
  border-color:var(--border-accent); background:var(--surface-hover);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.auth-page select.form-input{ cursor:pointer; color:var(--text-dim) }
.auth-page select.form-input option{ background:var(--surface); color:var(--text) }

.auth-page .hint-text{ margin-top:6px; font-size:12px; color:var(--muted); line-height:1.5 }

.auth-page .actions-row{ display:flex; gap:10px; margin-top:2px; flex-wrap:wrap }

.auth-page .btn-main{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:46px; padding:0 18px; border:1px solid transparent; border-radius:12px;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-press) 100%);
  color:#fff; cursor:pointer; font-size:14px; font-family:Roboto-Medium;
  box-shadow:var(--shadow-accent);
  transition:filter var(--fast), transform var(--fast);
}
.auth-page .btn-main:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.auth-page .btn-main:active{ transform:translateY(0) scale(.985) }

/* Второстепенная кнопка не подкрашивается акцентной рамкой и не всплывает:
   меняются фон и цвет текста. */
.auth-page .btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:46px; padding:0 18px; border-radius:12px;
  border:1px solid var(--border-strong); background:transparent; color:var(--text-dim);
  text-decoration:none; font-size:14px; cursor:pointer;
  transition:background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
}
.auth-page .btn-secondary:hover{ background:var(--surface-3); color:var(--text) }
.auth-page .btn-secondary:active{ transform:scale(.985) }

.auth-page .alert-box{
  display:flex; align-items:flex-start; gap:10px;
  margin-bottom:14px; border-radius:var(--radius-sm); padding:12px 14px;
  font-size:13.5px; line-height:1.5; border:1px solid transparent;
}
.auth-page .alert-box i{ margin-top:2px; flex:none }
.auth-page .alert-success{ background:var(--good-soft); color:var(--good) }
.auth-page .alert-error{ background:var(--bad-soft); color:var(--bad) }

@media (max-width:700px){
  .auth-page .page-card{ padding:14px }
  .auth-page .actions-row .btn-main,
  .auth-page .actions-row .btn-secondary{ width:100% }
}
