/* ===== AUTH (модалка в фирменном стиле) ===== */

/* Контейнер и состояния */
.auth{
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  visibility: hidden; pointer-events: none;
}
.auth[aria-hidden="false"]{ visibility: visible; pointer-events: auto; }
.auth.is-open    .auth__dialog{ animation: auth-card-in .22s cubic-bezier(.2,.75,.2,1) forwards; }
.auth.is-open    .auth__backdrop{ animation: auth-back-in .20s ease forwards; }
.auth.is-closing .auth__dialog{ animation: auth-card-out .18s ease forwards; }
.auth.is-closing .auth__backdrop{ animation: auth-back-out .16s ease forwards; }

/* Подложка */
.auth__backdrop{
  position: absolute; inset: 0;
  background: rgba(8,9,12,.58);
  backdrop-filter: blur(8px);
  opacity: 0;
}

/* Карточка */
.auth__dialog{
  position: relative;
  width: min(720px, 96vw);      /* ширина как в референсе */
  border-radius: 22px;
  background: rgba(19,20,24,.92);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 30px 100px rgba(0,0,0,.65), 0 8px 24px rgba(0,0,0,.45);
  overflow: hidden;
  transform: scale(.98);
  opacity: 0;
}

/* Шапка: вкладки + крестик, выровнены с колонкой контента */
.auth__head{
  position: relative;
  padding: 16px 20px 6px 48px;  /* слева = 48px, совпадает с колонкой контента */
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.auth__tabs{ display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.auth__tab{
  background: none; border: 0; padding: 0 2px; cursor: pointer;
  color: #fff; opacity: .42;
  font: 800 26px/1.1 Inter, system-ui, sans-serif;
  transition: opacity .2s ease, color .2s ease;
}
.auth__tab.is-active{ opacity: 1; }
.auth__divider{ width: 1px; height: 20px; background: rgba(255,255,255,.18); border-radius: 2px; }

.auth__close{
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color: #fff; font-size: 18px;
}
.auth__close:hover{ background: rgba(255,255,255,.1); }

/* Тело */
.auth__body{ padding: 18px 28px 22px; }

/* Колонка остаётся 520px, но внутри всё — одной ширины */
.auth__panel{
  --auth-field: 360px;           /* ЕДИНАЯ ширина полей и кнопки */
  display:none;
  max-width:520px;
  margin-left:48px;
}
.auth__panel.is-active{ display:block; }

/* Поля */
.field{ display: grid; gap: 6px; margin: 12px 0; }
.field__label{
  color: #cfd3de; font-weight: 700; letter-spacing: .2px;
  font-size: 12.5px;
}
.field__password{ position: relative; }

.field__input{
  width: var(--auth-field);
  padding: 0 14px;
  border-radius: 12px;
  color: #e8e9ed;
  background: #1d2128;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  font: 600 15.5px/1.3 Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
}
/* Контейнер пароля не растягивается шире поля */
.field__password{
  position:relative;
  max-width: var(--auth-field);
}
.field__password .field__input{ padding-right:44px; }
.field__input:focus{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* Переключатель видимости пароля (по умолчанию — скрыто, иконка eye-off) */
.field__toggle{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor: pointer;
}
.field__toggle::before{
  content:""; display:block; width:18px; height:18px; margin:auto;
  background:#c7cbd6; opacity:.95;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Zm10-5a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm7.5 12.5L4.5 4.5 3 6l16.5 16.5 1.5-1.5Z"/></svg>') center/contain no-repeat;
}
.field__toggle.is-on::before{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 5C6.5 5 2 12 2 12s4.5 7 10 7 10-7 10-7-4.5-7-10-7Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z"/></svg>') center/contain no-repeat;
}

/* Кнопка действия (внутри колонки, не «простыня») */
.auth__submit{
  width: var(--auth-field);
  height: 44px;
  margin: 18px 0 8px;
  border-radius: 12px;
  font-weight: 700;
}
.auth .btn.btn--accent{
  background: var(--accent) !important;
  color: #0f1115 !important;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 12px 28px rgba(203,180,115,.28);
}
.auth .btn.btn--accent:hover{ filter: brightness(.98); }

/* Нижняя строка ссылок: слева/справа */
.auth__links{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 6px;
}
.auth__link{ color: #a1a6b3; }
.auth__link:hover{ color: var(--accent); }

/* Правый линк — «красивый текст, но не кнопка» */
.auth__links .link{
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #eef0f4; font-weight: 800; letter-spacing: .2px;
  text-decoration: none; position: relative; transition: color .2s ease;
}
.auth__links .link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:2px; border-radius:2px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.auth__links .link:hover{ color: var(--accent); }
.auth__links .link:hover::after{ transform: scaleX(1); }

/* Ошибка */
.auth__error{
  color: #e75a5a;
  font-weight: 600;
  text-align: center;
  margin-top: 6px;
}

/* Анимации */
@keyframes auth-card-in   { from {opacity:0; transform:scale(.96);} to {opacity:1; transform:scale(1);} }
@keyframes auth-card-out  { from {opacity:1; transform:scale(1);} to {opacity:0; transform:scale(.985);} }
@keyframes auth-back-in   { from {opacity:0;} to {opacity:1;} }
@keyframes auth-back-out  { from {opacity:1;} to {opacity:0;} }

@media (prefers-reduced-motion: reduce){
  .auth__dialog,.auth__backdrop{ animation: none !important; }
}

@media (max-width: 560px){
  .auth__panel{ margin-left:24px; }
  .auth__panel{ --auth-field: 100%; }
  .field__password{ max-width:100%; }
}

/* Карточка поменьше, чтобы быть «ровной» вокруг контента */
.auth__dialog{
  width: min(640px, 96vw);     /* было 720px */
  border-radius: 22px;
}
.auth__body{ padding: 20px 28px 22px; }

/* Колонка теперь строго по центру */
.auth__panel{
  --auth-field: 360px;         /* ширина полей/кнопки как договорились */
  display: none;
  max-width: 520px;
  margin: 0 auto;              /* было margin-left:48px */
}
.auth__panel.is-active{ display: block; }

.field__input{
  width: var(--auth-field);
  height: 46px;                /* было 42px */
  padding: 0 14px;
  border-radius: 12px;
}
/* чтобы «глаз» не уезжал и блок не растягивался шире поля */
.field__password{
  position: relative;
  max-width: var(--auth-field);
}
.field__password .field__input{ padding-right: 44px; }

.auth__submit{
  width: var(--auth-field);    /* синхронно с полями */
  height: 44px;
  margin: 18px 0 8px;
  border-radius: 12px;
  font-weight: 700;
}

@media (max-width: 560px){
  .auth__dialog{ width: min(96vw, 560px); }
  .auth__panel{ --auth-field: 100%; max-width: 100%; }
  .field__password{ max-width: 100%; }
}

/* Панель = ширине полей/кнопки, без внутренней лишней ширины */
.auth__panel{
  --auth-field: 360px;           /* при необходимости поменяешь на 380/400 */
  display:none;
  width: var(--auth-field);      /* <-- было max-width:520px */
  margin: 0 auto;                /* центрируем всю колонку */
}
.auth__panel.is-active{ display:block; }

.field__password{
  position:relative;
  max-width: var(--auth-field);  /* сохраняем ограничение по ширине панели */
}

.field__input{ width: var(--auth-field); height:46px; }
.auth__submit{ width: var(--auth-field); height:44px; }

.auth__links{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:6px;
  width: 100%;                   /* = ширина .auth__panel */
}