/* Общая обвязка страниц входа/регистрации Identity — переиспользуется всеми
   страницами в Components/Account/Pages, у каждой из которых нет общей раскладки. */

.vx-id{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-8) var(--space-6)}
.vx-id__panel{width:100%;max-width:400px;display:flex;flex-direction:column;gap:var(--space-5);
  padding:var(--pad-card);background:var(--surface-1);border:1px solid var(--border-1);
  border-radius:var(--radius-lg);box-shadow:var(--inset-top),var(--shadow-3)}
.vx-id__title{font:var(--type-display-m);color:var(--text-1);margin:0}
/* Шапка панели: слева — путь назад на главную, справа — знак. Панель без
   навигации ощутима как тупик, когда аккаунт не нужен и хочется просто играть. */
.vx-id__head{display:flex;align-items:center;justify-content:space-between}
.vx-id__home{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;
  background:var(--surface-3);border:1px solid var(--border-2);border-radius:var(--radius-md);
  color:var(--text-2);font:var(--type-small-strong);text-decoration:none;
  box-shadow:var(--inset-top);transition:var(--transition-control)}
.vx-id__home:hover{background:var(--warm-750);color:var(--text-1)}
.vx-id__home:focus-visible{box-shadow:var(--ring),var(--inset-top)}
.vx-id__lead{font:var(--type-small);color:var(--text-3);margin:0}
.vx-id__form{display:flex;flex-direction:column;gap:var(--gap-stack)}
.vx-id__remember{display:flex;align-items:center;gap:8px;font:var(--type-body);color:var(--text-2);cursor:pointer}
.vx-id__divider{display:flex;align-items:center;gap:12px;font:var(--type-caption);color:var(--text-3)}
.vx-id__divider span{flex:1;height:1px;background:var(--border-1)}
.vx-id__links{display:flex;flex-direction:column;gap:6px;font:var(--type-caption)}
/* align-self обязателен: контейнер — колонка флексбокса, и без него ссылка
   растягивается на всю ширину панели, а подчёркивание из base.css рисуется
   не под текстом, а линейкой во всю панель. */
.vx-id__links a{color:var(--text-2);align-self:flex-start}
.vx-id__note{font:var(--type-caption);color:var(--text-3)}

/* Кнопки внешнего входа и ключа доступа теперь используют настоящие классы
   .vx-btn* компонента Button дизайн-системы: после переноса стилей компонентов
   в глобальный слой (задача 12) эти классы действуют на любой разметке. */
a.vx-btn{border-bottom:0}

/* Форма провайдеров внешнего входа может содержать несколько кнопок подряд —
   раскладываем их в столбец с тем же зазором, что и у формы входа. */
.vx-id__external{display:flex;flex-direction:column;gap:var(--gap-stack)}

/* Личный кабинет (Components/Account/Shared/ManageLayout.razor и страницы
   Components/Account/Pages/Manage) — шапка остаётся от оболочки приложения,
   здесь только раскладка «меню слева, содержимое справа». */
.vx-manage{display:flex;flex-direction:column;gap:var(--space-6)}
.vx-manage__title{font:var(--type-display-m);color:var(--text-1);margin:0}
.vx-manage__body{display:grid;grid-template-columns:220px 1fr;gap:var(--space-8);align-items:start}
@media (max-width:720px){.vx-manage__body{grid-template-columns:1fr}}

.vx-manage__list{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
.vx-manage__link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-md);
  font:var(--type-body);color:var(--text-2);text-decoration:none;transition:var(--transition-control)}
.vx-manage__link:hover{background:var(--ghost-hover);color:var(--text-1)}
/* NavLink сам вешает .active на текущий пункт — своей подсветки заводить не нужно. */
.vx-manage__link.active{background:var(--surface-2);color:var(--text-1);font:var(--type-body-strong);box-shadow:var(--inset-top)}

/* Содержимое одной страницы кабинета — панель того же типа, что и vx-id__panel,
   но без ограничения ширины: колонка сама задаёт её через грид vx-manage__body. */
.vx-manage__panel{display:flex;flex-direction:column;gap:var(--space-5)}
/* Настройка писем отделена от смены почты чертой: это другое действие, и
   кнопка «Выключить» рядом с «Сменить почту» читалась бы как её часть. */
.vx-manage__reminders{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);
  padding-top:var(--space-5);border-top:1px solid var(--border-1)}
.vx-manage__reminders p{margin:0}
.vx-manage__heading{font:var(--type-title);color:var(--text-1);margin:0}
.vx-manage__subheading{font:var(--type-small-strong);color:var(--text-2);margin:var(--space-2) 0 0}

/* Кнопка «отправить письмо ещё раз» на Manage/Email.razor — форма, на которую
   она указывает через form=, лежит выше по разметке (вложенные формы нельзя),
   поэтому это не <a>, а <button> без рамки, оформленный как ссылка. */
.vx-manage__linklike{background:none;border:0;padding:0;font:var(--type-caption);
  color:var(--text-accent);text-decoration:underline;cursor:pointer;align-self:flex-start}

/* Список привязанных внешних входов на Manage/ExternalLogins.razor. */
.vx-manage__logins{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}
.vx-manage__login{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;background:var(--surface-2);border:1px solid var(--border-1);
  border-radius:var(--radius-md);font:var(--type-body);color:var(--text-1)}

/* Оговорка о согласии с документами под кнопкой регистрации. Приглушена, но
   ссылки в ней остаются акцентными: сама фраза — сноска, а документы за ней
   должны читаться как ссылки, иначе их никто не найдёт. */
.vx-id__consent{font:var(--type-caption);color:var(--text-3);margin:0}
.vx-id__consent a{color:var(--text-2)}