/* =============================================
   Рубеж Времён — Login Page Styles
   Подключается только в login.html.
   Не дублирует base.css (reset, :root, body,
   .smoke, .particles, .particle — уже там).
   ============================================= */

/* ---------- Локальные CSS-переменные страницы ----------
   Цвета стран переопределяются JS через document.documentElement.style
   при выборе державы. Начальные значения совпадают с base.css :root.
*/
:root {
  /* Аура/свечение — специфично для страницы входа */
  --country-aura: rgba(139, 58, 58, 0.18);
  --country-aura-2: rgba(201, 184, 150, 0.10);
  --country-glow: rgba(201, 184, 150, 0.22);

  /* Алиасы, чтобы login.css не зависел от имён в base.css */
  --red: var(--crimson);
  /* из base.css */
  --gold-2: var(--gold-dark);
  /* из base.css */
  --muted: var(--text-muted);
  --line: rgba(201, 184, 150, 0.18);
  --shadow: 0 20px 80px rgba(0, 0, 0, .55);

  /* Градиент заголовка по умолчанию (меняется JS при выборе страны) */
  --title-gradient: linear-gradient(135deg, #f1ead9 0%, var(--gold) 40%, var(--gold-2) 80%, #f1ead9 100%);
}

/* ---------- body: фон страницы входа ----------
   Переопределяет base.css body.background — только на этой странице.
*/
body {
  background:
    radial-gradient(circle at 20% 20%, var(--country-aura) 0, transparent 32%),
    radial-gradient(circle at 80% 70%, var(--country-aura-2) 0, transparent 28%),
    linear-gradient(180deg, #0a0a0a 0%, #070707 100%);
  transition: background 0.5s ease;
}

/* ---------- Дымка (дополнение к base.css .smoke) ----------
   Все жестко заданные красные оттенки заменены на var(--country-aura).
*/
.smoke {
  background:
    radial-gradient(circle at 30% 35%, var(--country-aura), transparent 42%),
    radial-gradient(circle at 70% 65%, var(--country-aura-2), transparent 38%);
  animation: loginDrift 18s ease-in-out infinite;
  filter: blur(8px);
}

.smoke::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 55% 35%, rgba(255, 255, 255, .04), transparent 35%);
  animation: loginDrift2 25s ease-in-out infinite;
  filter: blur(12px);
}

.smoke::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 35% 75%, var(--country-aura), transparent 30%);
  animation: loginDrift3 30s ease-in-out infinite;
  filter: blur(14px);
}

/* Используем уникальные имена, чтобы не конфликтовать с base.js-анимациями */
@keyframes loginDrift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(20px, -18px) scale(1.08);
  }
}

@keyframes loginDrift2 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-24px, 14px) scale(1.06);
  }
}

@keyframes loginDrift3 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(10px, 20px) scale(1.05);
  }
}

/* base.js двигает .smoke через transform inline — это ок,
   потому что base.js пишет translateY(x)px, а анимации выше
   тоже работают через transform. Поскольку JS перезаписывает
   style.transform напрямую, анимации CSS на .smoke здесь
   ОТКЛЮЧЕНЫ: base.js управляет параллаксом. Оставляем только
   ::before / ::after где JS не трогает псевдоэлементы. */
.smoke {
  animation: none;
}

/* параллакс управляется login.js */

/* ---------- Сетка страницы ---------- */
.page {
  min-height: 100vh;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 28px;
}

.shell {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 24px;
  align-items: stretch;
}

/* ---------- Карточки (brand / panel) ---------- */
.brand,
.panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(201, 184, 150, .18);
  box-shadow: var(--shadow);
  background: linear-gradient(135deg, rgba(18, 18, 18, .95), rgba(10, 10, 10, .98));
  transition: border-color .6s ease, box-shadow .6s ease, transform .6s ease;
}

.brand {
  padding: 44px;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.panel::before {
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(201, 184, 150, 0.1) 50%, transparent 58%),
    radial-gradient(circle at 15% 15%, rgba(201, 184, 150, 0.05), transparent 22%);
}


.brand::before {
  background:
    linear-gradient(135deg, transparent 0 42%, var(--country-aura) 50%, transparent 58%),
    radial-gradient(circle at 15% 15%, var(--country-aura-2), transparent 22%);
}



/* Sweep-эффект при смене страны */
.brand::after {
  content: '';
  position: absolute;
  inset: -12px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(120deg, transparent 0 32%, rgba(255, 255, 255, .10) 42%,
      var(--country-aura) 49%, rgba(255, 255, 255, .10) 56%, transparent 68%);
  transform: translateX(-120%);
  mix-blend-mode: screen;
}

.brand.is-switching::after {
  opacity: 1;
  animation: sweepState 650ms ease;
}

.brand.is-switching .eyebrow,
.brand.is-switching .title,
.brand.is-switching .subtitle,
.brand.is-switching .lore {
  animation: refreshCard 560ms ease;
}

@keyframes sweepState {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(120%);
  }
}

@keyframes refreshCard {
  0% {
    filter: brightness(1.3);
  }

  100% {
    filter: brightness(1);
  }
}

/* ---------- Угловые рамки ---------- */
.frame-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid var(--gold);
  z-index: 2;
  pointer-events: none;
  transition: border-color .5s ease;
}

.tl {
  top: 16px;
  left: 16px;
  border-right: none;
  border-bottom: none;
}

.tr {
  top: 16px;
  right: 16px;
  border-left: none;
  border-bottom: none;
}

.bl {
  bottom: 16px;
  left: 16px;
  border-right: none;
  border-top: none;
}

.br {
  bottom: 16px;
  right: 16px;
  border-left: none;
  border-top: none;
}

/* ---------- Brand inner ---------- */
.brand-inner {
  min-width: 0;
  width: 100%;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #c9b896;
  letter-spacing: 5px;
  text-transform: uppercase;
  font-size: .82rem;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp .9s ease forwards .15s;
}

.eyebrow::before,
.eyebrow::after {
  content: '';
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c9b896, transparent);
}

.title {
  font-family: 'Cinzel', serif;
  font-size: var(--title-size, clamp(2.4rem, 5vw, 5.2rem));
  letter-spacing: var(--title-spacing, .12em);
  line-height: .95;
  text-transform: uppercase;
  color: transparent;
  background: var(--title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 50px rgba(201, 184, 150, .12);
  white-space: nowrap;
  max-width: 100%;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(18px);
  transition: opacity 1s ease, transform 1s ease, filter 1s ease;
}

.title.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.reveal {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.subtitle {
  margin-top: 18px;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.8;
  max-width: 52ch;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease, transform .9s ease;
}

.lore {
  margin-top: 28px;
  display: grid;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateY(18px);
}

.lore p {
  color: #bbb6ad;
  line-height: 1.8;
  font-size: .98rem;
}

.lore strong {
  color: var(--gold);
  font-weight: 600;
}

/* Sigil (блок флага в brand) */
.sigil {
  margin-top: 30px;
  border: 1px solid rgba(201, 184, 150, .18);
  background: rgba(255, 255, 255, .02);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  width: fit-content;
  min-width: 260px;
  opacity: 0;
  transform: translateY(18px);
}

.sigil-flag {
  width: 80px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .18));
  transition: transform .35s ease;
}

.sigil-meta {
  display: grid;
  gap: 4px;
}

.sigil-meta .small {
  color: #90877b;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: .74rem;
}

.sigil-meta .nation-name {
  color: var(--gold);
  font-family: 'Cinzel', serif;
  letter-spacing: 2px;
  font-size: 1.05rem;
}

.panel {
  padding: 44px 38px;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp 1s ease forwards .25s;
}

.panel-inner {
  width: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(18px);
}

.panel-head h2 {
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  letter-spacing: .16em;
  color: var(--gold);
  text-transform: uppercase;
}

.field {
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(18px);
}

.label {
  display: block;
  margin-top: 18px;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: .9rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ---------- Nation grid ---------- 
 * 80px*/
.nation-grid {
  display: grid;
  grid-auto-rows: 1fr;
  /* Заставляет все строки быть одной (максимальной) высоты */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.nation {
  position: relative;
  height: 100%;
  border: 1px solid rgba(201, 184, 150, .18);
  background: linear-gradient(135deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .04));
  color: #d6d0c6;
  padding: 11px 11px 11px 13px;
  cursor: pointer;
  transition: border-color .5s ease, box-shadow .5s ease, transform .5s ease, background-color .5s ease, color .5s ease;
  user-select: none;
  font-size: .92rem;
  letter-spacing: .28px;
  text-align: left;
  min-height: 72px;
  display: grid;
  min-height: 80px;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  container-type: inline-size;
}

.nation:hover {
  border-color: rgba(201, 184, 150, .42);
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(201, 184, 150, .06), rgba(255, 255, 255, .02));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.nation.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(201, 184, 150, .12), 0 8px 20px var(--country-aura);
  background: linear-gradient(135deg, var(--country-aura), rgba(255, 255, 255, .03));
  color: var(--gold);
}

.nation.active .flag {
  transform: scale(1.02);
}

.nation.active .nation-label .sub {
  color: rgba(201, 184, 150, .9);
}

.flag {
  width: 50px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, .18);
  overflow: hidden;
  position: relative;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
  transition: transform .25s ease;
}

.flag::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 40%, rgba(0, 0, 0, .16));
  pointer-events: none;
}

/* CSS-флаги */
.flag.de {
  background: linear-gradient(to bottom, #111 0 33.33%, #c81f25 33.33% 66.66%, #e0c14e 66.66% 100%);
}

.flag.gb {
  background:
    linear-gradient(135deg, transparent 42%, #fff 42% 48%, #d81e2c 48% 52%, transparent 52%),
    linear-gradient(45deg, transparent 42%, #fff 42% 48%, #d81e2c 48% 52%, transparent 52%),
    linear-gradient(to right, #192f6a 0 100%);
}

.flag.ru {
  background: linear-gradient(to bottom, #fff 0 33.33%, #2e58a6 33.33% 66.66%, #d6383f 66.66% 100%);
}

.flag.fr {
  background: linear-gradient(to right, #1e4fa3 0 33.33%, #fff 33.33% 66.66%, #d83a3a 66.66% 100%);
}

.flag.it {
  background: linear-gradient(to right, #2f8f4e 0 33.33%, #fff 33.33% 66.66%, #cc2e2e 66.66% 100%);
}

.flag.at {
  background: linear-gradient(to bottom, #b8212f 0 25%, #fff 25% 50%, #b8212f 50% 75%, #fff 75% 100%);
}

.flag.jp {
  background: radial-gradient(circle at 50% 50%, #cf2830 0 28%, transparent 29%), #fff;
}

.flag.pt {
  background: linear-gradient(to right, #1f6f3a 0 40%, #c92b2b 40% 100%);
}

.nation-label {
  line-height: 1.08;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.nation-label .name {
  font-weight: 600;
  color: inherit;
  font-size: clamp(.6rem, 13cqw, .92rem);
  line-height: 1.2;
  letter-spacing: 0;

  /* Разрешаем перенос и ограничиваем двумя строками */
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nation-label .sub {
  font-size: .72rem;
  color: #817a70;
  letter-spacing: .2px;
  line-height: 1.1;
}

/* ---------- Selected bar / preview ---------- */
.selected-bar {
  margin-top: 18px;
  padding: 14px 26px;
  border: 1px dashed rgba(201, 184, 150, .22);
  background: rgba(255, 255, 255, .02);
  color: #cdc6b8;
  line-height: 1.6;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color .55s ease, background-color .55s ease, color .55s ease, box-shadow .55s ease;
}

.selected-bar strong {
  color: var(--gold);
}

.selected-preview {
  margin-top: 16px;
  border: 1px solid rgba(201, 184, 150, .16);
  background: rgba(255, 255, 255, .02);
  padding: 18px;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: center;
  transition: border-color .55s ease, background-color .55s ease, box-shadow .55s ease, transform .55s ease;
}

.selected-preview .big-flag {
  width: 88px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .18));
  transition: transform .35s ease;
}

.selected-preview .big-flag::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 40%, rgba(0, 0, 0, .16));
}

.country-note {
  margin-top: 10px;
  color: #8c8478;
  font-size: .86rem;
  line-height: 1.5;
  min-height: 22px;
  transition: color .35s ease;
}

/* ---------- Country chip ---------- */
.panel-head .country-chip {
  border: 1px solid rgba(201, 184, 150, .22);
  padding: 8px 12px;
  letter-spacing: 1px;
  color: #d5cbb7;
  background: rgba(255, 255, 255, .03);
  border-radius: 999px;
  white-space: nowrap;
  font-size: .8rem;
  text-transform: uppercase;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  transition: all .35s ease;
}

.country-chip strong {
  color: var(--gold);
  font-weight: 600;
  margin-left: 6px;
}

/* ---------- Preview text ---------- */
.preview-text {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.preview-text .preview-title {
  font-family: 'Cinzel', serif;
  color: var(--gold);
  letter-spacing: 2px;
  font-size: 1.02rem;
  word-break: break-word;
}

.preview-text .preview-sub {
  color: #8f887d;
  font-size: .86rem;
  line-height: 1.5;
}

/* ---------- Password ---------- */
.password-wrap {
  position: relative;
}

.password-wrap input {
  width: 100%;
  border: 1px solid rgba(201, 184, 150, .18);
  background: rgba(255, 255, 255, .03);
  color: #d4ccbe;
  padding: 16px 56px 16px 16px;
  outline: none;
  font: inherit;
  letter-spacing: 1px;
  transition: .25s ease;
}

.password-wrap input::placeholder {
  color: #7d786f;
}

/* ИЗМЕНЕНИЕ: Заменяем жесткий красный цвет рамки пароля на акцентный цвет страны */
.password-wrap input:focus {
  border-color: rgba(201, 184, 150, .5);
  box-shadow: 0 0 0 3px var(--country-aura);
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 1px solid rgba(201, 184, 150, .16);
  background: rgba(255, 255, 255, .03);
  color: #d4ccbe;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: .25s ease;
  font-size: 1rem;
  line-height: 1;
}

.password-toggle:hover {
  border-color: rgba(201, 184, 150, .54);
  color: var(--gold);
  background: rgba(201, 184, 150, .06);
}

.password-toggle:active {
  transform: translateY(-50%) scale(.98);
}

.password-wrap:focus-within .password-toggle {
  border-color: rgba(201, 184, 150, .6);
  box-shadow: 0 0 0 3px var(--country-aura);
}

/* ИЗМЕНЕНИЕ: Убираем белое/желтое свечение пароля при автозаполнении */
.password-wrap input:-webkit-autofill,
.password-wrap input:-webkit-autofill:hover,
.password-wrap input:-webkit-autofill:focus,
.password-wrap input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #141414 inset !important;
  -webkit-text-fill-color: #d4ccbe !important;
  transition: background-color 5000s ease-in-out 0s;
}

.hint {
  margin-top: 10px;
  color: #7e786e;
  font-size: .80rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease, transform .9s ease;
}

.password-error {
  margin-top: 8px;
  min-height: 20px;
  color: #c77d7d;
  font-size: .80rem;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .25s ease, transform .25s ease;
}

.password-error.show {
  opacity: 1;
  transform: translateY(0);
}

.password-tools {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.mini-btn {
  border: 1px solid rgba(201, 184, 150, .18);
  background: rgba(255, 255, 255, .03);
  color: #d7cfbf;
  padding: 10px 12px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: .25s ease;
  font-size: .80rem;
}

.mini-btn:hover {
  border-color: rgba(201, 184, 150, .52);
  color: var(--gold);
  transform: translateY(-1px);
}

/* ---------- Actions / Submit ---------- */
.actions {
  margin-top: 28px;
  display: grid;
  gap: 14px;
  opacity: 0;
  transform: translateY(18px);
}

/* ИЗМЕНЕНИЕ: кнопка "Войти" тоже переведена на акцентные цвета */
.submit {
  width: 100%;
  border: 1px solid rgba(201, 184, 150, .48);
  background: linear-gradient(135deg, var(--country-aura), var(--country-aura-2));
  color: #efe8d8;
  padding: 16px 18px;
  font-family: 'Cinzel', serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .3s ease;
  position: relative;
  overflow: hidden;
}

.submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
  transform: translateX(-120%);
}

.submit:hover::before {
  animation: sweep 1s ease;
}

.submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px var(--country-aura);
  border-color: var(--gold);
}

@keyframes sweep {
  100% {
    transform: translateX(120%);
  }
}

.status {
  min-height: 24px;
  color: #cfc6b6;
  font-size: .92rem;
  letter-spacing: .5px;
  line-height: 1.5;
}

.status.ok {
  color: #d1c39b;
}

.status.err {
  color: #c77d7d;
}

/* ---------- Country glow (после выбора) ---------- */
body[data-country] .brand {
  box-shadow: var(--shadow), 0 0 0 1px rgba(201, 184, 150, .04), 0 0 48px var(--country-glow);
  transition: box-shadow .45s ease, border-color .45s ease;
}

body[data-country] .panel-head h2 {
  text-shadow: 0 0 18px rgba(201, 184, 150, .14);
}

/* ---------- Анимации страницы ---------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .brand,
  .panel {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .page {
    padding: 14px;
  }

  .brand,
  .panel {
    padding: 24px;
  }

  .nation-grid {
    grid-template-columns: 1fr;
  }

  .panel-head {
    flex-direction: column;
    align-items: start;
  }

  .title {
    letter-spacing: .10em;
  }

  .nation {
    letter-spacing: .2px;
  }

  .selected-preview {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}



.bg-layer,
.bg-layer-next {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-layer {
  background:
    radial-gradient(circle at 20% 20%, var(--aura-current) 0, transparent 32%),
    radial-gradient(circle at 80% 70%, var(--aura2-current) 0, transparent 28%);
}

.bg-layer-next {
  background:
    radial-gradient(circle at 20% 20%, var(--aura-next) 0, transparent 32%),
    radial-gradient(circle at 80% 70%, var(--aura2-next) 0, transparent 28%);
  opacity: 0;
  transition: opacity 0.7s ease;
}

.bg-layer-next.active {
  opacity: 1;
}






/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .shell {
    grid-template-columns: 1fr;
    max-width: 600px;
    /* Не даем форме слишком сильно растягиваться */
    margin: 0 auto;
  }

  .brand,
  .panel {
    min-height: auto;
  }

  .brand {
    padding: 34px;
  }
}

@media (max-width: 640px) {
  .page {
    padding: 14px;
  }

  .brand,
  .panel {
    padding: 24px;
  }

  /* Карточки становятся в один столбец */
  .nation-grid {
    grid-template-columns: 1fr;
  }

  .panel-head {
    flex-direction: column;
    align-items: start;
  }

  .selected-preview {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

.login-error-banner {
  color: #c77d7d;

}


.panel {
  box-shadow: var(--shadow);
}